/* ==========================================================================
   ADS — The Association for Dressings & Sauces
   Portal theme overrides
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Palette + layout tokens
   Header height was hard-coded as 85px in four places; it's a variable now
   so the bar, the logo box, and the content offset can never drift apart.
   -------------------------------------------------------------------------- */
:root {
    --bodyBackground: #d3cdbc;
    --headerBackground: #ffffff;
    --sidebarBackground: #736f64;
    --sidebarFontColor: #ffffff;
    --primaryAccent: #33735b;
    --secondaryAccent: #33735b;
    --footerBackground: #82302f;

    --headerHeight: 85px;
    --logoMaxWidth: 200px;
    --logoMaxHeight: 65px;   /* leaves ~10px above and below inside the bar */
}

body {
    background-color: var(--bodyBackground) !important;
}

/* --------------------------------------------------------------------------
   2. Header bar
   -------------------------------------------------------------------------- */
.header {
    height: var(--headerHeight) !important;
    min-height: var(--headerHeight) !important;
}

#main_divHeader {
    background-color: var(--headerBackground) !important;
}

.page-header-fixed .page-container {
    margin-top: var(--headerHeight);
}

#main_pnlSiteTemplateHeader {
    display: none !important;
}

/* --------------------------------------------------------------------------
   3. Logo — the fix for the gap under the header image

   WAS:  padding: 20px 0 0 0  +  font-size: 24px  +  display: inline-block
         An inline image sits on the TEXT BASELINE, so the parent's 24px font
         reserved ~6px of descender space below it. The one-sided 20px top
         padding then left the remainder pooling underneath.

   NOW:  flex centering (no one-sided padding), font-size: 0 (no line box),
         and display: block on the image (removed from the baseline model).
   -------------------------------------------------------------------------- */
.header .navbar-brand {
    display: flex !important;
    align-items: center !important;
    height: var(--headerHeight) !important;
    min-height: 0 !important;
    padding: 0 0 0 20px !important;   /* replaces the old text-indent: 20px */
    margin: 0 !important;
    width: var(--logoMaxWidth);
    font-size: 0 !important;          /* kills the inherited 24px line box */
    line-height: 0 !important;
}

.header .navbar-brand img,
#main_divHeader .header-inner .navbar-brand .img-responsive {
    display: block !important;        /* ← the actual fix */
    max-width: var(--logoMaxWidth) !important;
    max-height: var(--logoMaxHeight) !important;
    height: auto !important;
    width: auto !important;
}

/* Standalone / invoice logos elsewhere in the portal */
.logo {
    max-width: var(--logoMaxWidth) !important;
    margin: 0 auto !important;
    text-align: center !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

.logo img,
.invoice-logo img {
    display: block !important;
    max-width: var(--logoMaxWidth) !important;
    height: auto !important;
    margin: 0 auto !important;
}

/* --------------------------------------------------------------------------
   4. Sidebar
   -------------------------------------------------------------------------- */
#main_sidebar,
.page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu {
    background-color: var(--sidebarBackground) !important;
}

/* Search field: white, so the typed query stays readable.
   (Previously this selector list appeared TWICE — once set to
   --primaryAccent, then again to --sidebarFontColor. Same specificity,
   both !important, so the second silently won and the first was dead
   code. Split into two intentional rules below.) */
.page-sidebar .sidebar-search input {
    background-color: var(--sidebarFontColor) !important;
    color: #333333 !important;
}

/* Top-bar dropdowns: accent green on hover / open */
.login-status .navbar-nav .site-feedback-link:hover,
.login-status .navbar-nav .dropdown-toggle:hover,
.login-status .navbar-nav .dropdown.open .dropdown-toggle,
.login-status .navbar-nav .dropdown span.open .dropdown-toggle,
.login-status .navbar-nav > li.dropdown .dropdown-toggle.current-page:hover {
    background-color: var(--primaryAccent) !important;
    color: var(--sidebarFontColor) !important;
}

/* Sidebar text + icons */
ul.page-sidebar-menu li > ul.sub-menu > li > a,
ul.page-sidebar-menu li > span > ul.sub-menu > li > a,
ul.page-sidebar-menu > li > ul.sub-menu a .arrow:before,
ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open:before,
ul.page-sidebar-menu > li > span > ul.sub-menu a .arrow:before,
ul.page-sidebar-menu > li > span > ul.sub-menu a .arrow.open:before,
ul.page-sidebar-menu > li a i {
    color: var(--sidebarFontColor) !important;
}

/* Active / hover / open states.
   The original had `li.active > a` in this block set to --secondaryAccent,
   then repeated at the bottom of the file set to --primaryAccent. Both
   values are #33735b so it rendered identically, but the duplicate is
   removed here — one rule, one source of truth. */
ul.page-sidebar-menu > li.active > a,
ul.page-sidebar-menu > li.active > span > a,
ul.page-sidebar-menu > li.open > a,
ul.page-sidebar-menu > li.open > span > a,
ul.page-sidebar-menu > li > a:hover,
ul.page-sidebar-menu > li:hover > a,
ul.page-sidebar-menu > li > span > a:hover,
ul.page-sidebar-menu > li:hover > span > a,
ul.page-sidebar-menu > li > ul.sub-menu > li.active > a,
ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover,
ul.page-sidebar-menu > li > span > ul.sub-menu > li.active > a,
ul.page-sidebar-menu > li > span > ul.sub-menu > li > a:hover,
ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li.active > a,
ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a:hover,
ul.page-sidebar-menu > li > ul.sub-menu li.open > a,
ul.page-sidebar-menu > li > span > ul.sub-menu li > ul.sub-menu > li.active > a,
ul.page-sidebar-menu > li > span > ul.sub-menu li > ul.sub-menu > li > a:hover {
    background-color: var(--primaryAccent) !important;
}

/* --------------------------------------------------------------------------
   5. Footer
   -------------------------------------------------------------------------- */
#main_footer {
    background-color: var(--footerBackground) !important;
}

/* --------------------------------------------------------------------------
   6. Responsive — collapse the header on small screens
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    :root {
        --headerHeight: 70px;
        --logoMaxHeight: 50px;
    }

    .header .navbar-brand {
        padding-left: 12px !important;
    }
}