/* ═══════════════════════════════════════════════════════════
   NAVIGATION — extends .site-header (already styled in apple-design.css)
   Adds: logo, mobile hamburger, calculator + language dropdowns.
   Uses the theme's existing --ios-blue design tokens throughout
   so the nav matches the rest of the site exactly.
   ═══════════════════════════════════════════════════════════ */

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--ios-blue); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  height:64px; gap:1rem;
}

.site-logo{
  display:flex; align-items:center; gap:.5rem;
  text-decoration:none; white-space:nowrap;
}
.site-logo .logo-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; font-size:1.05rem;
}
.site-logo .logo-text{ display:flex; flex-direction:column; line-height:1.1; }

/* ── Primary nav (desktop) ── */
.primary-nav__list{
  display:flex; align-items:center; gap:1.5rem;
  list-style:none; margin:0; padding:0;
}
.primary-nav__list > li > a,
.primary-nav__list > li > .dropdown-toggle{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.5rem .25rem; font-family:inherit; background:none; border:none; cursor:pointer;
}
.dropdown-caret{ font-size:.65rem; color:rgba(60,60,67,0.45); transition:transform .15s ease; }
.dropdown-toggle[aria-expanded="true"] .dropdown-caret{ transform:rotate(180deg); }

/* ── Dropdown panels ── */
.has-dropdown{ position:relative; }
.dropdown-menu{
  position:absolute; top:calc(100% + .6rem); left:0;
  min-width:260px; max-height:70vh; overflow-y:auto;
  background:var(--glass-bg, #fff);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(0,0,0,0.07);
  border-radius:14px;
  box-shadow:var(--glass-shadow, 0 20px 60px rgba(0,0,0,0.08));
  list-style:none; margin:0; padding:.5rem;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  z-index:1000;
}
.has-dropdown.is-open .dropdown-menu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown-menu--lang{ min-width:280px; }
.dropdown-menu li a{
  display:block; padding:.5rem .75rem; border-radius:8px;
  font-size:.875rem; font-weight:500; color:#3C3C43; text-decoration:none;
  transition:background .2s ease, color .2s ease;
}
.dropdown-menu li a:hover{ background:rgba(0,122,255,0.06); color:var(--ios-blue); }
.dropdown-menu li a.is-current{ background:rgba(0,122,255,0.1); color:var(--ios-blue); font-weight:700; }
.dropdown-menu__group-label{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.06em;
  color:rgba(60,60,67,0.45); font-weight:700; padding:.6rem .75rem .25rem;
}

/* ── Mobile hamburger toggle (hidden on desktop) ── */
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; background:none; border:1px solid rgba(0,0,0,0.08);
  border-radius:8px; cursor:pointer; padding:0;
}
.nav-toggle__bar{
  width:20px; height:2px; margin:0 auto; background:#1C1C1E;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ── Mobile layout ── */
@media (max-width: 860px){
  .nav-toggle{ display:flex; }

  .primary-nav{
    position:fixed; top:64px; left:0; right:0; bottom:0;
    background:#fff; overflow-y:auto;
    transform:translateX(100%);
    transition:transform .25s var(--ease-out, ease);
    padding:1rem;
  }
  .primary-nav.is-open{ transform:translateX(0); }

  .primary-nav__list{ flex-direction:column; align-items:stretch; gap:0; }
  .primary-nav__list > li{ border-bottom:1px solid rgba(0,0,0,0.06); }
  .primary-nav__list > li > a,
  .primary-nav__list > li > .dropdown-toggle{
    width:100%; padding:.9rem .25rem; justify-content:space-between;
    font-size:.95rem; font-weight:600; color:#1C1C1E;
  }

  .dropdown-menu{
    position:static; box-shadow:none; border:none; border-radius:0;
    max-height:none; opacity:1; visibility:visible; transform:none;
    display:none; background:#F8FAFC; margin:0 0 .5rem; backdrop-filter:none;
  }
  .has-dropdown.is-open .dropdown-menu{ display:block; }
}

/* ── Missing layout rule for .calc-link-card grids (shared by
   calculator cross-links AND the language switcher) — added to
   complete the existing .calc-link-card / .calc-links-section system. ── */
.calc-links-grid{
  display:flex; flex-wrap:wrap; gap:10px;
}
.calc-link-card{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.calc-link-card--active{
  border-color:var(--ios-blue) !important;
  background:rgba(0,122,255,0.08) !important;
  color:var(--ios-blue) !important;
  font-weight:700;
}

/* .page-hero ships with only a background treatment in apple-design.css;
   add matching vertical rhythm + centered content, consistent with .hero-section. */
.page-hero{ padding:40px 0 48px; }
.page-hero .hero-content{ text-align:center; max-width:680px; margin:0 auto; }
.page-hero .trust-badges{ justify-content:center; margin-bottom:16px; }
@media (max-width: 640px){ .page-hero{ padding:24px 0 32px; } }

/* Small spacing utilities used across the new calculator/language pages */
.mb-24{ margin-bottom:24px; }
.mt-24{ margin-top:24px; }
.mb-16{ margin-bottom:16px; }
.mt-16{ margin-top:16px; }