/**
 * rcr-header-fix-20260819.css
 * 2026-08-19 — PC header repair (loads LAST, overrides custom-colors.css + nav-unified.css)
 *
 * FIXES:
 *  1. Logo hidden on PC — custom-colors.css has `.header .logo img { display:none !important }`
 *     (leftover from abandoned text-logo design; text-logo HTML no longer exists → empty logo cell)
 *  2. Menu overflow — .vertical-align-table computed 1480px @1440 viewport (width:100% + 50px pad,
 *     display:table) → CONTACT item clipped off right edge, margin-right -95px
 *  3. Menu color — all-gold links washed out; now white w/ gold hover/active/underline
 *
 * DESKTOP-SCOPED (min-width:1000px) — mobile header (#rcr-mobile-nav) untouched.
 */

@media screen and (min-width: 1000px) {

    /* ---------- 0. STICKY: keep header pinned on scroll ----------
       Replaces removed js/force-menu-visible.js position:fixed hack (index).
       position:sticky needs no scroll-container ancestor: use overflow-x:clip
       (doesn't create a scroll container, unlike hidden). */
    html body .site-container {
        overflow-x: clip !important;
        overflow-y: visible !important;
    }
    /* body/html overflow-y:auto makes BODY the scroll container while the
       actual scroll offset lives on HTML → sticky never pins. clip+visible
       keeps horizontal clipping without creating a scroll container. */
    html, body {
        overflow-x: clip !important;
        overflow-y: visible !important;
    }
    html body .sticky-header-wrapper {
        position: sticky !important;
        top: 0 !important;
        z-index: 99999 !important;
        background: rgba(10, 22, 40, 0.98) !important;
    }

    /* ---------- 1. LOGO: restore image logo ---------- */
    .header .logo.vertical-align-cell,
    .header .logo {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        padding-right: 28px !important;
        width: auto !important;
        min-width: 0 !important;
    }
    .header .logo a {
        display: flex !important;
        align-items: center !important;
        flex-direction: row !important;
    }
    .header .logo picture {
        display: block !important;
    }
    .header .logo img,
    .header .logo .logo-img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: 54px !important;
        width: auto !important;
        max-width: none !important;
    }

    /* ---------- 2. HEADER GEOMETRY: kill overflow ---------- */
    .header-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    .header-container .vertical-align-table,
    .header-container .vertical-align-table.column-1-1 {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
        padding: 0 24px !important;
        box-sizing: border-box !important;
    }
    .header.clearfix {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 84px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    .menu-container.clearfix.vertical-align-cell {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        overflow: visible !important;
    }
    .menu-container.clearfix.vertical-align-cell > nav {
        display: flex !important;
        width: auto !important;
        max-width: 100% !important;
    }
    ul.sf-menu {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        max-width: 100% !important;
    }

    /* ---------- 3. MENU FIT: 9 items fit 1280–1440px ---------- */
    .sf-menu > li > a,
    ul.sf-menu > li > a {
        padding: 33px 15px !important;
        font-size: 13px !important;
        letter-spacing: 1.4px !important;
        white-space: nowrap !important;
    }
    .sf-menu > li > a::after,
    ul.sf-menu > li > a::after {
        left: 15px !important;
        right: 15px !important;
        bottom: 22px !important;
    }

    /* ---------- 4. COLORS: white links, gold hover/active ----------
       Specificity boosted with html body prefix to beat
       sticky-header-fix.css (.sticky-header-wrapper .sf-menu li a) and
       force-menu-visible.css (html body .sf-menu li a) gold !important rules */
    html body .sf-menu > li > a,
    html body ul.sf-menu > li > a,
    html body .sticky-header-wrapper .sf-menu > li > a,
    html body .header .sf-menu > li > a,
    html body .menu-container .sf-menu > li > a {
        color: #ffffff !important;
    }
    html body .sf-menu > li > a:hover,
    html body .sf-menu > li.sfHover > a,
    html body .sf-menu > li.selected > a,
    html body .sf-menu > li.current > a,
    html body .sticky-header-wrapper .sf-menu > li > a:hover,
    html body .sticky-header-wrapper .sf-menu > li.sfHover > a,
    html body .sticky-header-wrapper .sf-menu > li.selected > a,
    html body .header .sf-menu > li > a:hover,
    html body .header .sf-menu > li.selected > a,
    html body .menu-container .sf-menu > li > a:hover,
    html body .menu-container .sf-menu > li.selected > a {
        color: #c5a47e !important;
    }

    /* ---------- 5. SELECTED ITEM: kill the white box ----------
       custom-colors.css paints li.selected with background:#fff → white box
       with pale-gold text = unreadable. Flat transparent + gold underline. */
    html body .sf-menu > li,
    html body .sf-menu > li.selected,
    html body .sf-menu > li.current,
    html body .sf-menu > li.sfHover,
    html body .header .sf-menu > li.selected,
    html body .menu-container .sf-menu > li.selected {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    html body .sf-menu > li > a {
        outline: none !important;
    }
    /* gold underline stays visible on the active page */
    html body .sf-menu > li.selected > a::after,
    html body .sf-menu > li.current > a::after {
        opacity: 1 !important;
        transform: scaleX(1) !important;
        background: linear-gradient(90deg, #c5a47e, #d4b896) !important;
    }

    /* ---------- 6. TOP BAR: readable contrast ---------- */
    html body .premium-top-bar,
    html body .premium-top-bar a,
    html body .premium-top-bar span {
        color: rgba(255, 255, 255, 0.96) !important;
    }
    html body .premium-top-bar a:hover {
        color: #c5a47e !important;
    }

    /* Dropdowns — PREMIUM navy + gold.
       Root causes of the "shit" look:
         1. superfish.css paints every dropdown LI with background:#AABDE6
            (periwinkle blue) → white text on light blue = unreadable
         2. nav-unified.css applies backdrop-filter:blur(20px) which frosts
            the panel into a sickly purple over the hero video
       Fix: solid navy, no blur, kill the superfish LI bg, white text, gold hover. */
    html body .header .sf-menu li ul,
    html body .sf-menu li ul,
    html body .sf-menu > li > ul,
    html body ul.sf-menu > li > ul {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        min-width: 260px !important;
        z-index: 999999 !important;
        margin: 0 !important;
        padding: 10px 0 !important;
        /* solid navy — NO transparency, NO blur */
        background: #0a1628 !important;
        background-color: #0a1628 !important;
        background-image: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        border: none !important;
        border-top: 3px solid #c5a47e !important;
        border-radius: 0 0 6px 6px !important;
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55) !important;
        list-style: none !important;
    }
    html body .sf-menu > li:hover > ul,
    html body .sf-menu > li.sfHover > ul,
    html body .header .sf-menu > li:hover > ul,
    html body .header .sf-menu > li.sfHover > ul,
    html body ul.sf-menu > li:hover > ul,
    html body ul.sf-menu > li.sfHover > ul {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }
    /* right-edge items (theme marks them .left-flyout): open left-aligned so
       the panel never overflows the viewport at laptop widths */
    html body .sf-menu > li.left-flyout > ul {
        left: auto !important;
        right: 0 !important;
    }
    html body .sf-menu li.left-flyout li:hover > ul,
    html body .sf-menu li.left-flyout li.sfHover > ul {
        left: auto !important;
        right: 100% !important;
        top: 0 !important;
    }

    /* nested (3rd level) flyouts open to the side */
    html body .sf-menu li li:hover > ul,
    html body .sf-menu li li.sfHover > ul {
        display: block !important;
        top: 0 !important;
        left: 100% !important;
    }
    /* KILL superfish default periwinkle (#AABDE6) on every dropdown LI */
    html body .sf-menu li ul li,
    html body .sf-menu > li > ul > li,
    html body ul.sf-menu > li > ul > li,
    html body .menu-container .sf-menu li ul li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: none !important;
        list-style: none !important;
    }
    html body .sf-menu li ul li a,
    html body .sf-menu > li > ul > li > a,
    html body ul.sf-menu > li > ul > li > a,
    html body .menu-container .sf-menu li ul li a,
    html body .header .menu-container.clearfix .sf-menu li ul li a {
        display: block !important;
        padding: 13px 24px !important;
        font-family: Montserrat, Inter, 'Helvetica Neue', Arial, sans-serif !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        letter-spacing: 1.2px !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        line-height: 1.3 !important;
        color: #ffffff !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: none !important;
        border-left: 3px solid transparent !important;
        border-bottom: none !important;
        text-decoration: none !important;
        transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease !important;
    }
    html body .sf-menu li ul li a:hover,
    html body .sf-menu li ul li a:focus,
    html body .sf-menu > li > ul > li > a:hover,
    html body .menu-container .sf-menu li ul li a:hover,
    html body .header .menu-container.clearfix .sf-menu li ul li a:hover {
        color: #c5a47e !important;
        background: rgba(197, 164, 126, 0.12) !important;
        background-color: rgba(197, 164, 126, 0.12) !important;
        border-left-color: #c5a47e !important;
    }
}

/* Slightly tighter at laptop widths so nothing wraps/clips */
@media screen and (min-width: 1000px) and (max-width: 1299px) {
    .sf-menu > li > a,
    ul.sf-menu > li > a {
        padding: 31px 9px !important;
        font-size: 12px !important;
        letter-spacing: 0.9px !important;
    }
    .sf-menu > li > a::after,
    ul.sf-menu > li > a::after {
        left: 9px !important;
        right: 9px !important;
    }
    .header .logo img,
    .header .logo .logo-img {
        height: 46px !important;
    }
    .header .logo.vertical-align-cell,
    .header .logo {
        padding-right: 16px !important;
    }
}

/* ==========================================================================
   MOBILE DUPLICATE-HEADER KILL — 2026-08-19 (Nisso report: duplicate header)
   The OLD template header (.header.clearfix) still renders on mobile below
   the new hamburger bar: its .mobile-menu-container (legacy off-canvas drawer)
   gets a JS/viewport height of ~844px, creating a huge empty second header
   zone that pushes ALL content down. The new #rcr-mobile-nav hamburger +
   #rcr-mobile-dropdown drawer are fully self-contained (inline JS), so the
   entire legacy header is dead weight on mobile. Hide it completely.
   ========================================================================== */
@media (max-width: 1024px) {
    .header.clearfix,
    .header-container .header.clearfix,
    .menu-container.clearfix,
    .mobile-menu-container {
        display: none !important;
        height: 0 !important;
        max-height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
    }

    /* The legacy header container keeps an explicit height:60px even when its
       children are hidden — collapse it so no phantom strip remains.
       (Do NOT display:none it: #rcr-mobile-nav lives inside it and is fixed.) */
    .header-container,
    .header-container.sticky-disabled {
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        overflow: visible !important;
    }

    /* The sticky wrapper carries an identity transform + will-change:transform
       which turns it into a containing block for the FIXED hamburger nav,
       pinning it to the wrapper's flow position instead of the viewport.
       Strip those so #rcr-mobile-nav is fixed to the viewport (top:0). */
    .sticky-header-wrapper {
        transform: none !important;
        will-change: auto !important;
    }

    /* The fixed hamburger bar (#rcr-mobile-nav) is position:fixed (height ~118px).
       Previously the phantom legacy header provided the scroll offset; now give it
       back so the hero/first content is never hidden behind the bar. */
    .site-container {
        padding-top: 118px !important;
    }
}