/* ==========================================================================
   ACXPA Supplier Directory — brand layer (sitewide chrome)
   File:     public/assets/css/acxpa-brand-2026.css
   Version:  1.1.0 (7 October 2026) — live for everyone; the old dropdown and
             footer-band rules were removed from style.css at the same time.
             1.0.0 (6 October 2026) — first issue, behind the preview switch.
   Owns:     The sitewide chrome ONLY — top bar, header, navigation and
             dropdowns, buttons, links, the home hero + search band, footer
             bands, the member badge size. Page bodies (category intros,
             pricing tables, listing cards) are deliberately NOT restyled:
             the site is being replaced (Brief 3), so effort goes only where
             every visitor sees it on every page.
   Enqueue:  layouts/master.blade.php, LAST in <head> — after style.css,
             @yield('extra_css'), the admin Custom CSS and the inline block,
             so equal-specificity rules here win.
             Order: acxpa-tokens.css -> acxpa-fonts.css -> this file.
   Rules:    No hex, rgb() or font name in this file — every value comes from
             acxpa-tokens.css (--acxpa-ds-*), copied verbatim from
             acxpa.com.au (tokens v1.6.0, fonts v1.1.0). Ruleset R-A1 / R-A3.
             !important is used only where the old theme or an inline view
             <style> already uses it, and is commented where it is.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Type and links
   -------------------------------------------------------------------------- */
body,
p, li, td, th, label, address, blockquote,
button, input, select, textarea,
.tooltip, .popover,
h1, h2, h3, h4, h5, h6 {
    font-family: var(--acxpa-ds-font);
}
body { color: var(--acxpa-ds-ink); }

a { color: var(--acxpa-ds-link); }
a:hover,
a:focus { color: var(--acxpa-ds-link-hover) !important; } /* style.css a:hover is !important */
a:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--acxpa-ds-focus);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   2. Top utility bar — Teal 900 strip, so the header reads as its own band
   -------------------------------------------------------------------------- */
.navigation .secondary-navigation {
    background-color: var(--acxpa-ds-teal-900);
    border-bottom: 0;
    opacity: 1;
    font-size: var(--acxpa-ds-text-caption);
}
.navigation .secondary-navigation .contact figure,
.navigation .secondary-navigation .contact figure strong { color: var(--acxpa-ds-text-muted-on-dark); }
.navigation .secondary-navigation a,
.navigation .secondary-navigation .user-area a { color: var(--acxpa-ds-white); }
.navigation .secondary-navigation a:hover,
.navigation .secondary-navigation a.promoted:hover,
.navigation .secondary-navigation .user-area a:hover { color: var(--acxpa-ds-gold) !important; }
.navigation .secondary-navigation a.promoted { color: var(--acxpa-ds-gold); }

/* --------------------------------------------------------------------------
   3. Header — white, logo lockup + "Supplier Directory" label
   -------------------------------------------------------------------------- */
.navigation { background-color: var(--acxpa-ds-white); box-shadow: var(--acxpa-ds-shadow-md); }
.navigation .navbar { padding: var(--acxpa-ds-space-md) 0; }

.navigation .navbar .navbar-brand .cxd-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--acxpa-ds-space-md);
    text-decoration: none;
}
.navigation .navbar .navbar-brand .cxd-brand-logo {
    display: block;
    width: 150px;          /* lockup is 3.01:1 -> 50px tall; brand minimum is 120px wide */
    height: auto;
    max-width: none;
}
.navigation .navbar .navbar-brand .cxd-brand-label {
    border-left: 1px solid var(--acxpa-ds-teal-200);
    padding-left: var(--acxpa-ds-space-md);
    color: var(--acxpa-ds-teal-700);
    font-weight: 600;
    font-size: var(--acxpa-ds-text-h4);
    line-height: var(--acxpa-ds-leading-tight);
    letter-spacing: 0;
}
.navigation .navbar .navbar-brand .cxd-brand:hover .cxd-brand-label { color: var(--acxpa-ds-teal-800); }

/* Top-level menu */
.navigation .navbar .navbar-nav > li > a {
    color: var(--acxpa-ds-ink);
    opacity: 1;
    font-weight: 500;
    font-size: var(--acxpa-ds-text-small);
}
.navigation .navbar .navbar-nav > li > a:hover,
.navigation .navbar .navbar-nav > li.active > a { color: var(--acxpa-ds-teal-700) !important; }
.navigation .navbar .navbar-nav > li a:after { background-color: var(--acxpa-ds-gold); height: 2px; }
.navigation .navbar .navbar-nav > li.has-child:after { color: var(--acxpa-ds-teal-600); }

/* Dropdowns — white panels, Gold top edge (were mid-grey with white type) */
.navigation .navbar .navbar-nav > li .child-navigation {
    background-color: var(--acxpa-ds-white);
    border-top: 3px solid var(--acxpa-ds-gold);
    box-shadow: var(--acxpa-ds-shadow-lg);
}
.navigation .navbar .navbar-nav > li .child-navigation li a {
    color: var(--acxpa-ds-ink);
    opacity: 1;            /* the theme fades every menu link to 0.7 */
    border-bottom: 1px solid var(--acxpa-ds-teal-100);
    font-size: var(--acxpa-ds-text-small);
}
.navigation .navbar .navbar-nav > li .child-navigation li a:hover {
    background-color: var(--acxpa-ds-teal-50);
    color: var(--acxpa-ds-teal-700) !important;
    box-shadow: none;
}
.navigation .navbar .navbar-nav li .child-navigation li.has-child:after,
.navigation .navbar .navbar-nav li .child-navigation li.has-child:hover:after { color: var(--acxpa-ds-teal-600); }
/* Third level sits on Cloud so it reads as a separate layer */
.navigation .navbar .navbar-nav > li .child-navigation li .child-navigation {
    background-color: var(--acxpa-ds-cloud);
    border-top: 0;
}
/* Little pointer arrows above/below the first/last dropdown item */
.navigation .navbar .navbar-nav > li > .child-navigation > li:first-child a:after { border-color: transparent transparent var(--acxpa-ds-gold); }
.navigation .navbar .navbar-nav > li > .child-navigation > li:first-child:hover a:hover:after { border-color: transparent transparent var(--acxpa-ds-gold); }

.navigation .navbar .navbar-toggle .icon-bar { background-color: var(--acxpa-ds-teal-700); }

/* --------------------------------------------------------------------------
   4. Buttons
   Primary action  = Gold with Ink type (8.49:1) — the ACXPA CTA colour.
   Default button  = Teal 700 with white type (9.16:1).
   Status variants (danger/success/info/warning) are left alone.
   -------------------------------------------------------------------------- */
.btn { border-radius: var(--acxpa-ds-radius-md); font-weight: 600; }
.btn.btn-default,
select.btn-default {
    background-color: var(--acxpa-ds-teal-700);
    color: var(--acxpa-ds-white);
    border: 0;
    box-shadow: none;
}
.btn.btn-default:hover,
.btn.btn-default:focus,
select.btn-default:hover {
    background-color: var(--acxpa-ds-teal-800);
    color: var(--acxpa-ds-white) !important;
}

/* Dropdown fields (bootstrap-select) also carry .btn-default — they are form
   fields, not buttons, so they stay light: Cloud field, Ink type, Teal 200 edge */
.bootstrap-select > .btn.btn-default,
.bootstrap-select > .btn.btn-default:hover,
.bootstrap-select > .btn.btn-default:focus,
.bootstrap-select.open > .btn.btn-default {
    background-color: var(--acxpa-ds-cloud) !important; /* sidebar views set these with !important */
    color: var(--acxpa-ds-ink) !important;
    border: 1px solid var(--acxpa-ds-teal-200);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   5. Home hero + search band
   The band was the old dark green with a 1980px background photo that stopped short
   on wide screens (the visible seam). Solid Teal 800 replaces both.
   -------------------------------------------------------------------------- */
.background-header:before {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--acxpa-ds-teal-900) 72%, transparent),
        color-mix(in srgb, var(--acxpa-ds-teal-900) 45%, transparent)
    );
}
.dir-ho-t-tit h1 {
    font-family: var(--acxpa-ds-font);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.dir-ho-t-tit p {
    font-family: var(--acxpa-ds-font);
    font-weight: 500;
    color: var(--acxpa-ds-white);
}

.horizontal-search .search-box-wrapper,
.search-box-wrapper { background-color: var(--acxpa-ds-teal-800); }
.search-box-wrapper .background-image { display: none; }
#search-form button[type="submit"] {
    background-color: var(--acxpa-ds-gold) !important; /* home view sets the old green with !important */
    color: var(--acxpa-ds-ink) !important;
    border: 0;
    border-radius: var(--acxpa-ds-radius-md);
    font-weight: 700;
}
#search-form button[type="submit"]:hover {
    background-color: var(--acxpa-ds-gold-mid) !important;
    color: var(--acxpa-ds-ink) !important;
}
.horizontal-search .search-box-wrapper .search-box .form-map .selectpicker .caret:after { color: var(--acxpa-ds-teal-700); }
/* The category picker is a bootstrap-select button carrying .btn-default —
   keep it a white field on the band, not a Teal 700 button */
.search-box-wrapper .bootstrap-select .btn.btn-default,
.search-box-wrapper .bootstrap-select .btn.btn-default:hover,
.search-box-wrapper .bootstrap-select .btn.btn-default:focus {
    background-color: var(--acxpa-ds-white) !important; /* style.css sets these fields with !important */
    color: var(--acxpa-ds-ink) !important;
    border-radius: var(--acxpa-ds-radius-md);
}
.search-box-wrapper input[type="text"] { border-radius: var(--acxpa-ds-radius-md); color: var(--acxpa-ds-ink); }

/* --------------------------------------------------------------------------
   6. Footer — three distinct bands: Cloud (links) / Teal 700 (ACXPA) / Ink
   -------------------------------------------------------------------------- */
#page-footer .inner #footer-main {
    background-color: var(--acxpa-ds-cloud);
    border-top: 1px solid var(--acxpa-ds-teal-100);
    color: var(--acxpa-ds-slate);
}
#page-footer .inner h3,
#page-footer #footer-main article h3 {
    color: var(--acxpa-ds-ink);
    font-weight: 600;
    font-size: var(--acxpa-ds-text-h4);
}
#page-footer #footer-main a { color: var(--acxpa-ds-teal-600); }
#page-footer #footer-main a:hover { color: var(--acxpa-ds-teal-800) !important; }
#page-footer #footer-main address strong,
#page-footer #footer-main strong { color: var(--acxpa-ds-ink); }
#page-footer ul.list-links li a { color: var(--acxpa-ds-slate); }
#page-footer ul.list-links li a .fa { color: var(--acxpa-ds-gold-deep); }
#page-footer ul.list-links li a:hover { color: var(--acxpa-ds-teal-700) !important; }

aside#footer-acxpa-section {
    padding: var(--acxpa-ds-space-xl) 0;
    text-align: center;
    background-color: var(--acxpa-ds-teal-700);
    color: var(--acxpa-ds-white);
}
aside#footer-acxpa-section p { color: var(--acxpa-ds-white); }
.acxpa-footer-logo { width: 180px; height: auto; }
a.goto-acxpa-btn {
    display: inline-block;
    background: var(--acxpa-ds-gold);
    color: var(--acxpa-ds-ink);
    border: 0;
    border-radius: var(--acxpa-ds-radius-md);
    padding: var(--acxpa-ds-space-xs) var(--acxpa-ds-space-lg);
    font-size: var(--acxpa-ds-text-body);
    font-weight: 700;
    white-space: nowrap;
}
a.goto-acxpa-btn:hover,
a.goto-acxpa-btn:focus {
    background: var(--acxpa-ds-white);
    color: var(--acxpa-ds-teal-800) !important;
}
a.goto-acxpa-btn:focus-visible { outline-color: var(--acxpa-ds-focus-on-dark); }

#page-footer .inner #footer-copyright {
    background-color: var(--acxpa-ds-ink);
    color: var(--acxpa-ds-text-muted-on-dark);
    font-size: var(--acxpa-ds-text-small);
}
#page-footer .inner #footer-copyright a { color: var(--acxpa-ds-white); }
#page-footer .inner #footer-copyright a:hover { color: var(--acxpa-ds-gold) !important; }

/* --------------------------------------------------------------------------
   7. ACXPA member badge on listing profiles
   Badge minimum is 300px wide (ACXPA logo and badge usage sheet, Sep 2026).
   -------------------------------------------------------------------------- */
img.acxpa_member_img,
.acxpa-member-logo-left img.acxpa_member_img {   /* the profile view caps it at 200px inline */
    width: 300px;
    max-width: 100%;
    height: auto;
    opacity: 1;            /* style.css faded the old badge to 0.9 */
    border: 0;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   8. Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .navigation .navbar .navbar-brand .cxd-brand { gap: var(--acxpa-ds-space-sm); }
    .navigation .navbar .navbar-brand .cxd-brand-logo { width: 120px; } /* brand minimum */
    .navigation .navbar .navbar-brand .cxd-brand-label {
        font-size: var(--acxpa-ds-text-small);
        padding-left: var(--acxpa-ds-space-sm);
    }
    .row.acxpa-footer-wrap { display: block; }
    aside#footer-acxpa-section .col-md-2,
    aside#footer-acxpa-section .col-md-8 { margin-bottom: var(--acxpa-ds-space-md); }
}