/**
 * elite-merch.css — Elite Merch Auctions brand label sheet.
 *
 * Brand: moss green #405020 + black (per application/configs/elite-merch.ini).
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * The platform is token-driven (public/styles/theme/kb-tokens.css). The generic
 * Elite Merch accent remap in responsive-layout.phtml only re-pointed
 * --kb-accent / --kb-link / --kb-brand-red, but the LEGACY action buttons
 * (.btn_lg, .search_btn, .item_search_btn, .btn_sm_inline, watch buttons…) and a
 * lot of chrome are painted from --kb-legacy-blue / --kb-legacy-blue-deep in
 * oas_listings.css. Those tokens were never remapped, so primary buttons and many
 * links stayed K-Bid blue on the Elite Merch site.
 *
 * This sheet redefines BOTH the accent tokens AND the legacy-blue tokens to the
 * moss-green palette (light + dark), so every button goes green with a darker
 * hover and every <a> link matches — without editing the shared oas_listings.css.
 *
 * It is loaded by all three layout pipelines (layout.phtml, cleanlayout.phtml,
 * responsive-layout.phtml) ONLY when APPLICATION_INI === 'elite-merch', so no
 * other client is affected. It loads after kb-tokens.css / kb-dark-overrides.css
 * so these token values win the cascade.
 */

/* ------------------------------------------------------------------ */
/* 1. Brand tokens — LIGHT theme                                       */
/* ------------------------------------------------------------------ */
:root,
:root:not([data-theme="dark"]) {
    /* accent family */
    --kb-accent:            #405020;
    --kb-accent-hover:      #2c3915;

    /* links (A tags) — same green as buttons, darker on hover */
    --kb-link:              #405020;
    --kb-link-hover:        #2c3915;

    /* red brand slot reused as green so brand-red chrome matches */
    --kb-brand-red:         #405020;

    /* LEGACY blue family — this is what actually paints the buttons */
    --kb-legacy-blue:       #405020;
    --kb-legacy-blue-deep:  #2c3915;
    --kb-legacy-navy:       #2c3915;

    /* solid button fills that used the red/neutral slots */
    --kb-btn-red:           #405020;
    --kb-btn-red-hover:     #2c3915;

    --kb-focus-ring:        rgba(64, 80, 32, .45);
}

/* ------------------------------------------------------------------ */
/* 2. Brand tokens — DARK theme (lightened so it reads on dark slate)  */
/* ------------------------------------------------------------------ */
:root[data-theme="dark"] {
    --kb-accent:            #7d9a4a;
    --kb-accent-hover:      #8fae57;

    --kb-link:              #9ab86a;
    --kb-link-hover:        #b3ce86;

    --kb-brand-red:         #7d9a4a;

    --kb-legacy-blue:       #7d9a4a;
    --kb-legacy-blue-deep:  #6a853e;
    --kb-legacy-navy:       #6a853e;

    --kb-btn-red:           #7d9a4a;
    --kb-btn-red-hover:     #6a853e;

    --kb-focus-ring:        rgba(125, 154, 74, .5);
}

/* ------------------------------------------------------------------ */
/* 3. Belt-and-suspenders — anything still hardcoding blue             */
/*    (a handful of legacy rules bake the hex directly). Keep these    */
/*    scoped to buttons/links so nothing else is tinted.               */
/* ------------------------------------------------------------------ */

/* Generic bootstrap primary buttons (.btn-primary) — cover EVERY state so
   there is no blue flash on click/focus. Bootstrap paints :active / :focus /
   .active and a blue box-shadow focus ring; override them all to green. */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary {
    background-color: var(--kb-accent) !important;
    border-color: var(--kb-accent-hover) !important;
    color: var(--kb-text-inverse) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:hover,
.btn-primary:active:focus {
    background-color: var(--kb-accent-hover) !important;
    border-color: var(--kb-accent-hover) !important;
}
/* kill the blue focus ring that flashes on click */
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active:focus,
.btn-primary.active:focus {
    outline: none !important;
    box-shadow: 0 0 0 .18rem var(--kb-focus-ring) !important;
}

/* Anchor-styled primary buttons (e.g. <a class="btn btn-primary btn-lg">
   "Check out the auctions now"): anchors get their own :link/:visited/:hover/
   :active color from the generic a{} + bootstrap, which can flash blue. Force
   white text in every anchor state and keep the green fill. */
a.btn-primary,
a.btn-primary:link,
a.btn-primary:visited,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active {
    color: var(--kb-text-inverse) !important;
    text-decoration: none !important;
}
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active {
    background-color: var(--kb-accent-hover) !important;
    border-color: var(--kb-accent-hover) !important;
}

/* Search submit buttons keep their sprite icon but take the green bg */
.search_btn,
#search .search_btn {
    background-color: var(--kb-legacy-blue);
}
.search_btn:hover,
.search_btn:focus,
.search_btn:active,
#search .search_btn:hover,
#search .search_btn:focus,
#search .search_btn:active {
    background-color: var(--kb-legacy-blue-deep) !important;
}
.search_btn:focus,
#search .search_btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 .18rem var(--kb-focus-ring) !important;
}

/* Responsive (bootstrap) search submit button — glyphicon submit in the
   navbar-form. It's a .btn-primary variant; make sure no blue flash. */
.navbar-form .btn,
.navbar-form button[type="submit"] {
    background-color: var(--kb-accent) !important;
    border-color: var(--kb-accent-hover) !important;
    color: var(--kb-text-inverse) !important;
}
.navbar-form .btn:hover,
.navbar-form .btn:focus,
.navbar-form .btn:active,
.navbar-form button[type="submit"]:hover,
.navbar-form button[type="submit"]:focus,
.navbar-form button[type="submit"]:active {
    background-color: var(--kb-accent-hover) !important;
    border-color: var(--kb-accent-hover) !important;
    outline: none !important;
    box-shadow: 0 0 0 .18rem var(--kb-focus-ring) !important;
}

/* Plain text links (A tags) match the button green */
a {
    color: var(--kb-link);
}
a:hover,
a:focus {
    color: var(--kb-link-hover);
}

/* ------------------------------------------------------------------ */
/* 4. Logo — task #4: make it as big as the header allows.             */
/*    Legacy header #logo box was 70x330; the img was capped small.    */
/*    Grow the box + let the image fill it (object-fit keeps ratio).   */
/* ------------------------------------------------------------------ */
header #logo,
.html5-header #logo {
    height: 96px;
    width: 420px;
    top: 8px;
}
#logoimg {
    max-height: 96px !important;
    max-width: 100% !important;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ------------------------------------------------------------------ */
/* Header logo: fill the available area of its container as large as   */
/* possible WITHOUT overflowing it or distorting the aspect ratio.     */
/* ------------------------------------------------------------------ */

/* Desktop header (responsive-inner.phtml .nav44-3 > .col-md-8 > a).
   Let the anchor span the full column so the logo has the whole area
   to scale into (overrides the inline width:fit-content on the <a>). */
header .nav44-3 .col-md-8 > a,
header .nav44-3 .col-xs-6 > a {
    display: block !important;
    width: 100% !important;
}

header .nav44-3 a > img.img-responsive {
    /* Grow to the full container width, cap the height to the header
       band, and keep the aspect ratio. object-fit guards against any
       forced dimension ever stretching the artwork. */
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 110px;
    object-fit: contain;
    object-position: left center;
}

/* Mobile navbar brand: the .navbar-brand box is 50px tall, so fill that
   height and let the width follow the aspect ratio. */
.navbar-brand img.img-responsive {
    max-height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* ------------------------------------------------------------------ */
/* 5. Task-3 sweep — remaining elements that BAKE blue hex directly    */
/*    (not token-driven, so the remaps above don't reach them).        */
/*    Each is scoped tight so only Elite Merch chrome changes.         */
/* ------------------------------------------------------------------ */

/* User dashboard "view full results" pill (layout.css ~4937) */
#user-dashboard-invoices a.view_full_result_list,
#user_dashboard .dashboard_content a.view_full_result_list {
    background-image: none !important;
    background-color: var(--kb-accent) !important;
}
#user-dashboard-invoices a.view_full_result_list:hover,
#user_dashboard .dashboard_content a.view_full_result_list:hover {
    background-color: var(--kb-accent-hover) !important;
}

/* Details panel active tab link (layout.css ~1757) */
#details_panel_nav li a { color: var(--kb-link); }
#details_panel_nav li.ui-state-active a { color: var(--kb-link-hover); }

/* Carousel pagination dots/arrows (jcarousel.responsive.css) */
.jcarousel-pagination a,
.jcarousel-pagination a.active { background: var(--kb-accent); }
.jcarousel-pagination a:not(.active) { color: var(--kb-accent); }

/* Image editor apply button (image-tools.css) */
.image-editor-apply-enabled {
    background: var(--kb-accent) !important;
    border-color: var(--kb-accent-hover) !important;
}

/* ------------------------------------------------------------------ */
/* 6. Primary-nav icons (.span-nav-icon)                               */
/*    These are slices of a BLUE png sprite (/images/nav-sprite-       */
/*    bootstrap.png) positioned by background-position, so `color`     */
/*    can't touch them. We recolor the blue artwork to moss green with */
/*    a CSS filter: grayscale neutralizes the blue, then sepia +       */
/*    hue-rotate + saturate push it to #405020-ish green. Elite Merch  */
/*    only (this sheet is gated to APPLICATION_INI === 'elite-merch'). */
/* ------------------------------------------------------------------ */
.nav .span-nav-icon {
    /* grayscale -> sepia gives a warm base, hue-rotate swings it to green,
       saturate deepens it, brightness keeps it from washing out. */
    filter: grayscale(1) sepia(1) hue-rotate(40deg) saturate(2.2) brightness(.72);
}

/* Active item previously just grayscaled the blue; keep it readable by
   using the same green treatment but a touch darker so "active" still reads. */
.nav .active .span-nav-icon {
    filter: grayscale(1) sepia(1) hue-rotate(40deg) saturate(2.4) brightness(.6);
}

/* ------------------------------------------------------------------ */
/* 7. Responsive (bootstrap) top-bar — these use corePublic's own      */
/*    hardcoded bootstrap colors, so they ignore the token a{} remap.  */
/*    Scope tight and override to the moss-green brand.                */
/* ------------------------------------------------------------------ */

/* "Register For Free Account" (.btn-danger) stays RED per client request,
   but force WHITE text so it reads clearly on the red fill. */
.btn-danger,
.btn.btn-danger,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    color: #ffffff !important;
}

/* "Login" — bootstrap .btn-link (blue text) -> green text */
.btn-link {
    color: var(--kb-link) !important;
}
.btn-link:hover,
.btn-link:focus {
    color: var(--kb-link-hover) !important;
}

/* Global/top nav text links (Closed Auctions, Login, etc.) */
#menu-collapsed-nav-global-closedauctions,
#menu-collapsed-nav-global-login,
#menu-collapsed-nav-global-logout,
.navbar-nav > li > a,
.nav44-3 a {
    color: var(--kb-link);
}
#menu-collapsed-nav-global-closedauctions:hover,
#menu-collapsed-nav-global-login:hover,
.navbar-nav > li > a:hover,
.nav44-3 a:hover {
    color: var(--kb-link-hover);
}