/* ==========================================================================
   header.css — nav / language switcher / mobile overlay
   Chopsticks Studio theme partial.
   :root tokens consolidated into style.css (single source of truth).
   'Mr Dafoe' + 'Elms Sans' fonts are enqueued in functions.php.
   ========================================================================== */

   /* ═══════════════════════════════════════════════════════════
      NAV
   ══════════════════════════════════════════════════════════ */
       /* orangeDivider.svg — sits flush at the bottom edge of the fixed nav bar */
   .nav-divider {
     position: absolute;
     top: 100%;
     left: -10px;    /* bleed: closes sub-pixel side gap without overflow:hidden */
     right: -10px;
     width: auto;
     line-height: 0;
     font-size: 0;
     pointer-events: none;
   }
   .nav-divider img {
     display: block;
     width: 100%;
     height: auto;
   }

   nav {
     position: fixed; top: 0; left: 0; right: 0; z-index: 100;
     display: flex; justify-content: space-between; align-items: center;
     padding: max(1.1rem, env(safe-area-inset-top, 1.1rem)) 1.5rem 1rem;
     transition: transform 0.45s cubic-bezier(.16,1,.3,1);
     background: #5399a5;
   }
   /* slides fully off-screen upward when user scrolls */
   nav.nav-hidden { transform: translateY(-110%); }
   .nav-logo {
     font-family: 'Mr Dafoe', cursive; font-size: 1.6rem; letter-spacing: 0.02em;
     color: var(--white); text-decoration: none;
     display: flex; align-items: flex-end; gap: 0.55rem;
   }
   .nav-icon {
     height: 2rem; width: auto; display: block;
     filter: drop-shadow(0px 4px 8px rgba(26,26,26,0.35))
             drop-shadow(0px 1px 3px rgba(26,26,26,0.2));
   }
   /* ── Language switcher — sits beside the logo, left-aligned ── */
   .nav-left { display: flex; align-items: flex-end; gap: 0.95rem; }
   .nav-lang {
     display: flex; align-items: center; gap: 0.5rem;
     list-style: none;
   }
   .nav-lang li { display: flex; align-items: center; }
   .nav-lang li + li::before {
     content: ""; display: block;
     width: 1px; height: 0.7rem; margin-right: 0.5rem;
     background: var(--white30);
   }
   .lang-link {
     position: relative;
     font-weight: 100; font-size: 0.68rem; letter-spacing: 0.1em;
     text-transform: uppercase; white-space: nowrap;
     color: var(--white); text-decoration: none;
     opacity: 0.55; padding-bottom: 2px;
     transition: opacity 0.2s;
   }
   .lang-link:hover { opacity: 0.9; }
   .lang-link[aria-current="true"] { opacity: 1; font-weight: 100; cursor: default; }
   .lang-link[aria-current="true"]::after {
     content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
     height: 1.5px; background: var(--white); border-radius: 2px;
   }
   /* Compact codes (ES/EN…) on small screens, full names on desktop */
   .lang-full { display: none; }
@media (max-width: 420px) {
     .nav-left { gap: 0.7rem; }
     .nav-lang { gap: 0.4rem; }
     .nav-lang li + li::before { margin-right: 0.4rem; }
}
@media (min-width: 768px) {
     .nav-lang { gap: 0.6rem; }
     .nav-lang li + li::before { margin-right: 0.6rem; }
     .lang-link { font-size: 0.7rem; }
     .lang-full { display: inline; }
     .lang-code { display: none; }
}
.nav-desktop { display: none; list-style: none; align-items: center; gap: 2.5rem; }
   .nav-desktop > li { position: relative; }
   .nav-desktop > li.nav-dropdown { padding-bottom: 0 rem; }
   .nav-desktop > li > a,
   .nav-desktop > li > span {
     font-weight: 700; font-size: 0.95rem; letter-spacing: 0.12em;
     text-transform: uppercase; color: var(--white); text-decoration: none;
     opacity: 0.85; cursor: pointer; transition: opacity 0.2s;
   }
   .nav-desktop > li.nav-dropdown { padding-bottom: 0 rem; }
   .nav-dropdown-menu {
     position: absolute; top: 100%; left: 50%;
     transform: translateX(-50%); list-style: none;
     background: rgba(255,255,255,0.15);
     backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
     padding: 0.9rem 1.2rem 0.8rem; min-width: 175px;
     border-top: 2px solid rgba(255,255,255,0.25);
     border-radius: 0 0 6px 6px;
     box-shadow: 0 8px 24px rgba(160,50,52,0.22);
     display: flex; flex-direction: column; gap: 0.6rem;
     opacity: 0; pointer-events: none; transition: opacity 0.22s ease;
     z-index: 1;
   }
   .nav-dropdown:hover .nav-dropdown-menu,
   .nav-dropdown-menu.dd-open { opacity: 1; pointer-events: auto; }
   .nav-dropdown-menu li a {
     font-weight: 300; font-size: 0.85rem; letter-spacing: 0.1em;
     color: var(--white); text-decoration: none; opacity: 0.8; white-space: nowrap;
   }
   .nav-menu-btn {
     background: none; border: none; cursor: pointer;
     display: flex; flex-direction: column; gap: 5px; padding: 4px;
   }
   .nav-menu-btn span {
     display: block; width: 24px; height: 1.5px;
     background: var(--white); border-radius: 2px;
     transition: transform 0.3s, opacity 0.3s;
   }
   .nav-menu-btn.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
   .nav-menu-btn.open span:nth-child(2) { opacity: 0; }
   .nav-menu-btn.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
   .menu-overlay {
     position: fixed; inset: 0; background: var(--bg); z-index: 99;
     display: flex; flex-direction: column;
     justify-content: center; align-items: center; gap: 2rem;
     opacity: 0; pointer-events: none;
     transition: opacity 0.4s cubic-bezier(.16,1,.3,1);
   }
   .menu-overlay.open { opacity: 1; pointer-events: auto; }
   .menu-overlay > a,
   .menu-overlay > .menu-group {
     opacity: 0; transform: translateY(20px);
     transition: opacity 0.4s, transform 0.4s;
   }
   .menu-overlay.open > a,
   .menu-overlay.open > .menu-group { opacity: 1; transform: translateY(0); }
   .menu-overlay.open > *:nth-child(1) { transition-delay: 0.05s; }
   .menu-overlay.open > *:nth-child(2) { transition-delay: 0.15s; }
   .menu-overlay.open > *:nth-child(3) { transition-delay: 0.22s; }
   .menu-overlay > a {
     font-weight: 300; font-size: 2.2rem;
     color: var(--white); text-decoration: none; letter-spacing: 0.06em;
   }
   .menu-group { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
   .menu-group-label { font-weight: 300; font-size: 2.2rem; color: var(--white); letter-spacing: 0.06em; opacity: 0.5; }
   .menu-group a { font-weight: 300; font-size: 1.3rem; letter-spacing: 0.1em; color: var(--white); text-decoration: none; opacity: 0.85; transition: opacity 0.2s; }
   .nav-desktop > li > a:hover,
   .nav-desktop > li > span:hover,
   .nav-dropdown-menu li a:hover,
   .menu-group a:hover { opacity: 1; }
@media (min-width: 768px) {
     .nav-desktop  { display: flex; }
     .nav-menu-btn { display: none; }
     .menu-overlay { display: none !important; }
}