/* ==========================================================================
   nav-aed.css  —  AED-parity navigation for Rutledge
   --------------------------------------------------------------------------
   1. Desktop (>1130px): header pins on scroll; horizontal menu collapses to a
      hamburger that opens a right-side charcoal pop-out.
   2. Pop-out panel (mobile + desktop-collapsed): semi-transparent charcoal
      (#323232bf) sidebar sliding in from the right, full height.

   TYPOGRAPHY: matches the ORIGINAL site exactly — menu text is m5 / 14px /
   uppercase / centered / line-height 30px / white (verified against
   rutledgejewelry.com). This file changes the CONTAINER (position, colour,
   width) and recolours, but never the menu fonts.

   ICONS: the hamburger (3 bars) and the dropdown down-chevrons are drawn in
   pure CSS — NOT the `icf` icon font — so they render in every browser
   regardless of font-cache state (the icf webfont caches stale in Firefox).

   Loaded AFTER scss/main.css (see include/core.php). Hand-maintained: the
   theme's SCSS build is non-functional after the WooCommerce removal.

   Scoping: every collapse/panel rule is gated by `@media (max-width:1130px)`
   (mobile) OR `body.nav-collapsed` (desktop-scrolled). Desktop-at-top is
   unchanged.
   ========================================================================== */

/* ---- FONT CACHE-BUST -----------------------------------------------------
   Re-declare the theme webfonts with versioned URLs. main.css references them
   with un-versioned paths, so a browser that cached a stale/failed font keeps
   serving tofu (icons) and a wider fallback (which wraps the desktop menu).
   These later declarations win the cascade → force a fresh fetch. Bump the
   ?v= token whenever a font file changes. Paths are relative to css/ → ../scss. */
@font-face { font-family: 'm1';  font-weight: 400; font-style: normal;
  src: url('../scss/fonts/museosanscyrl_100-webfont.woff?v=20260624e') format('woff'),
       url('../scss/fonts/museosanscyrl_100-webfont.ttf?v=20260624e') format('truetype'); }
@font-face { font-family: 'm3';  font-weight: 400; font-style: normal;
  src: url('../scss/fonts/museosanscyrl_300-webfont.woff?v=20260624e') format('woff'),
       url('../scss/fonts/museosanscyrl_300-webfont.ttf?v=20260624e') format('truetype'); }
@font-face { font-family: 'm5';  font-weight: 400; font-style: normal;
  src: url('../scss/fonts/museosanscyrl_500-webfont.woff?v=20260624e') format('woff'),
       url('../scss/fonts/museosanscyrl_500-webfont.ttf?v=20260624e') format('truetype'); }
@font-face { font-family: 'm5i'; font-weight: 400; font-style: normal;
  src: url('../scss/fonts/museosanscyrl_500_italic-webfont.woff?v=20260624e') format('woff'),
       url('../scss/fonts/museosanscyrl_500_italic-webfont.ttf?v=20260624e') format('truetype'); }
@font-face { font-family: 'ovo'; font-weight: 400; font-style: normal;
  src: url('../scss/fonts/ovo-regular-webfont.woff?v=20260624e') format('woff'),
       url('../scss/fonts/ovo-regular-webfont.ttf?v=20260624e') format('truetype'); }
/* icf: declare under a NEW family name the browser has never cached, then
   redirect every icf-* icon to it. A same-name re-declaration didn't reliably
   override the stale cached 'icf' face in Firefox; a new family forces a fresh
   fetch. (The CSS-drawn hamburger/arrows keep font-family:inherit via more-
   specific rules, so they're unaffected.) */
@font-face { font-family: 'icf2'; font-weight: 400; font-style: normal;
  src: url('../scss/fonts/icf.woff?v=20260624g') format('woff'),
       url('../scss/fonts/icf.ttf?v=20260624g') format('truetype'); }
[class^='icf-']:before, [class*=' icf-']:before { font-family: 'icf2' !important; }

/* ---- pop-out panel item TYPOGRAPHY (original values; active only via .o_menu,
   which can only be set on mobile or desktop-collapsed — never desktop-at-top) */
.main_nav_container.o_menu {
    font-size: 14px;
    text-align: center;          /* original mobile menu is centred */
}
.main_nav_container.o_menu .main-nav > li.menu-item-depth-0 {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
}
.main_nav_container.o_menu .main-nav > li.menu-item-depth-0 > a {
    display: block;
    height: auto;
    padding: 6px 34px;           /* side room for the right-edge chevron */
    font-family: "m5", Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400;
    line-height: 30px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    overflow: visible;
    white-space: normal;
}
.main_nav_container.o_menu .main-nav > li.menu-item-depth-0 > a:hover {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: none;
}
/* hide the current-page indicator glyph (icf \e850 → tofu) inside the panel */
.main_nav_container.o_menu .current-menu-item > a:before {
    display: none !important;
}

/* sub-menus: original m5/14px/centred/white; collapsed, init.js slideToggles */
.main_nav_container.o_menu .sub-menu.menu-depth-1 {
    display: none;
    position: static;
    width: 100%;
    padding: 0;
    background: rgba(0, 0, 0, 0.22);
    box-shadow: none;
    text-align: center;
}
.main_nav_container.o_menu .sub-menu.menu-depth-1 > li {
    display: block;
    width: 100%;
    padding: 0;
}
.main_nav_container.o_menu .sub-menu.menu-depth-1 > li > a {
    display: block;
    padding: 5px 34px;
    font-family: "m5", Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 30px;
    text-align: center;
    text-transform: uppercase;
    color: #e8e8e8;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.main_nav_container.o_menu .sub-menu.menu-depth-1 > li > a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

/* ---- HAMBURGER: 3 CSS bars, no "MENU" word, no icf dependency ---- */
.toogle_nav.icf-menu {
    font-size: 0 !important;       /* hide the "MENU" text */
    width: 46px;
    height: 38px;
    text-indent: 0;
}
.toogle_nav.icf-menu:before {
    content: "" !important;        /* cancel the icf \e842 glyph */
    font-family: inherit !important;
    position: absolute;
    top: 12px;
    right: 10px;
    display: block;
    width: 26px;
    height: 3px;
    border-radius: 1px;
    background: #333;
    box-shadow: 0 7px 0 #333, 0 14px 0 #333;   /* → 3 bars total */
    -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
}
.toogle_nav.icf-menu:after {       /* second × stroke — only visible when active */
    content: "";
    position: absolute;
    top: 19px;
    right: 10px;
    width: 26px;
    height: 3px;
    border-radius: 1px;
    background: transparent;
    -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
}
/* when open, the bars morph into a white × (close affordance, upper-right over panel) */
.toogle_nav.is-active.icf-menu:before {
    top: 19px;
    background: #fff;
    box-shadow: none;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}
.toogle_nav.is-active.icf-menu:after {
    background: #fff;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

/* ---- DROPDOWN down-chevrons (CSS-drawn, replace the icf \e837 glyph) ---- */
.main_nav_container.o_menu .menu-item-has-children > i {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 46px;
    height: 42px;
    font-size: 0;
    background: none;
    cursor: pointer;
}
.main_nav_container.o_menu .menu-item-has-children > i:before {
    content: "" !important;        /* cancel the icf glyph */
    font-family: inherit !important;
    position: absolute;
    top: 13px;
    left: 50%;
    margin-left: -6px;
    width: 9px;
    height: 9px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    -webkit-transform: rotate(45deg);   /* points DOWN */
            transform: rotate(45deg);
    -webkit-transition: -webkit-transform 0.2s ease;
            transition: transform 0.2s ease;
}
/* init.js toggles .icf-up on the <i> when expanded → flip the chevron up */
.main_nav_container.o_menu .menu-item-has-children > i.icf-up:before {
    top: 18px;
    -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
}

/* body scroll-lock while the panel is open (matches AED) */
body.menu-open {
    overflow: hidden;
}

/* ======================= MOBILE  (≤1130px) ============================= */
@media screen and (max-width: 1130px) {
    /* charcoal right sidebar — overrides the teal top-slide in 99_responsive */
    .main_nav_container {
        position: fixed;
        z-index: 1001;
        top: 0;
        right: 0;
        left: auto;
        width: 55%;                  /* widened so centred labels clear the dropdown arrow */
        max-width: none;
        height: 100vh;
        padding: 60px 0 24px;
        margin: 0;
        border-bottom-left-radius: 0;
        background: #323232bf;
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
        -webkit-transition: -webkit-transform 0.4s ease;
                transition: transform 0.4s ease;
        overflow-y: auto;
    }
    /* shadow only when open (at rest it would bleed a strip into the viewport) */
    .main_nav_container.o_menu {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        box-shadow: -4px 0 18px rgba(0, 0, 0, 0.25);
    }
}

/* ======================= DESKTOP  (≥1131px) =========================== */
@media screen and (min-width: 1131px) {
    /* header pinned so the collapsed hamburger stays reachable on scroll.
       #wrap padding compensates → at-top layout is unchanged. */
    header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: #fff;
        -webkit-transition: height 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
                transition: height 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
    }
    #wrap {
        padding-top: 168px;
    }

    /* keep the horizontal menu on ONE line — its natural width sits ~2px from
       the row edge, so real-browser font/scrollbar variance would wrap "EVENTS"
       onto a second line. nowrap forbids that; sub-menus reset to normal. */
    .main_nav_container .main-nav { white-space: nowrap; }
    .main_nav_container .menu-depth-1 { white-space: normal; }

    /* collapsed compact bar */
    body.nav-collapsed header {
        height: 64px;
        padding-top: 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
    body.nav-collapsed header #logo {
        max-width: 132px;
        padding-top: 6px;
    }

    /* show the hamburger only when collapsed; park it top-right of the bar */
    body.nav-collapsed .toogle_nav {
        display: block;
        position: fixed;
        z-index: 1002;
        top: 13px;
        right: 22px;
        width: 46px;
        height: 38px;
        padding: 0;
    }

    /* desktop-collapsed pop-out panel (30%) */
    body.nav-collapsed .main_nav_container {
        position: fixed;
        z-index: 1001;
        top: 0;
        right: 0;
        left: auto;
        width: 30%;
        height: 100vh;
        margin-top: 0;
        padding: 80px 0 24px;
        border: 0;
        background: #323232bf;
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
        -webkit-transition: -webkit-transform 0.4s ease;
                transition: transform 0.4s ease;
        overflow-y: auto;
    }
    body.nav-collapsed .main_nav_container.o_menu {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        box-shadow: -4px 0 18px rgba(0, 0, 0, 0.25);
    }
    /* sub-menus inside the panel are click-toggled, never hover-revealed */
    body.nav-collapsed .main_nav_container .menu-item-has-children:hover > .sub-menu.menu-depth-1 {
        display: none;
    }
}

/* ============================ CONTACT FORM ============================
   Required-field red asterisks + "* required" legend + validation popup.
   (Markup lives in the CF7 form; these only style it.) */
.req-field { position: relative; display: block; }
.req-star { color: #cc0000; font-style: normal; font-weight: 700; }
.req-field .req-star {
    position: absolute; top: 12px; right: 14px;
    font-size: 16px; line-height: 1; pointer-events: none; z-index: 2;
}
.required-note { margin: 6px 0 16px; font-size: 13px; color: #666; }
.wpcf7-form .wpcf7-not-valid { border-color: #cc0000 !important; }

/* validation popup */
#rj-form-popup {
    display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10001;
    background: rgba(0, 0, 0, 0.5); align-items: center; justify-content: center;
}
#rj-form-popup.is-open { display: flex; }
#rj-form-popup .rj-fp-box {
    background: #fff; max-width: 360px; margin: 0 20px; padding: 28px 26px;
    border-radius: 4px; text-align: center; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.3);
}
#rj-form-popup .rj-fp-msg { font-size: 15px; color: #333; margin: 0 0 18px; line-height: 1.45; }
#rj-form-popup .rj-fp-close {
    background: #cc0000; color: #fff; border: 0; padding: 10px 30px;
    font-size: 14px; cursor: pointer; border-radius: 3px;
}