/* ==========================================================================
   ehyong.com — navigation, decrowded
   Loads AFTER style.css and only overrides what it must.

   The problem: eleven flat top-level links. Past about seven, people stop
   scanning and start hunting — and every new page made it worse.

   The fix: six top-level items, three of which open a grouped menu. Every
   destination that was in the nav is still one or two moves away, plus
   Case Studies and the AI Radar, which had no nav entry at all.

   Desktop: hover or focus opens. Touch and keyboard: the trigger toggles.
   Mobile: the same menus become inline accordions inside the existing panel,
   so script.js's open/close behaviour keeps working untouched.
   ========================================================================== */

.site-nav {
  gap: clamp(18px, 1.8vw, 30px);   /* fewer items, so give them room */
}

/* ------------------------------------------------------------ top level */

.nav-item { position: relative; }

.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(248, 244, 238, .8);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s ease;
}

.nav-trigger:hover,
.nav-item:hover > .nav-trigger,
.nav-trigger[aria-expanded="true"] { color: var(--gold-soft); }

.nav-trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 3px; }

.nav-caret {
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
  flex: none;
}

.nav-trigger[aria-expanded="true"] .nav-caret { transform: translateY(1px) rotate(-135deg); }

/* --------------------------------------------------------------- panel */

.nav-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 232px;
  padding: 8px;
  margin: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(12, 12, 12, .97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 60;
}

/* A hover bridge — without it the pointer crosses a dead 14px gap and the
   menu closes on the way down. Classic dropdown bug; cheap to prevent. */
.nav-menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -16px;
  height: 16px;
}

html:not(.nav-ready) .nav-item:hover > .nav-menu,
html:not(.nav-ready) .nav-item:focus-within > .nav-menu,
.nav-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-menu a {
  display: block;
  padding: 10px 13px;
  border-radius: var(--r-sm);
  font-size: .82rem;
  font-weight: 600;
  color: rgba(248, 244, 238, .82);
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}

.nav-menu a:hover,
.nav-menu a:focus-visible { background: rgba(214, 174, 103, .12); color: var(--gold-soft); }

.nav-menu a small {
  display: block;
  margin-top: 2px;
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--text-muted);
}

.nav-menu .is-accent { color: var(--gold-soft); }

.nav-sep {
  height: 1px;
  margin: 6px 9px;
  background: var(--line-soft);
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu { transition: none; }
  .nav-caret { transition: none; }
}

/* ------------------------------------------------------- mobile panel */
/* style.css turns .site-nav into a fixed column at ≤1350px — note 1350, not
   the 1000 you'd guess: the hamburger appears far earlier than usual on this
   site because the nav was so wide. Match that number exactly, or between the
   two breakpoints the absolutely-positioned dropdowns escape the panel and
   render off the side of the screen. */

@media (max-width: 1350px) {
  .site-nav {
    gap: 2px;
    /* style.css sets rgba(7,7,7,.97) + backdrop-filter on this panel. In
       practice the hero headline reads straight through it — menu text over
       page text, which is the one thing a menu must never do. An opaque
       background costs nothing here: at 97% the blur was invisible anyway. */
    background-color: #070707;
  }

  .nav-item { width: 100%; }

  .nav-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 12px 2px;
    font-size: 1rem;
  }

  /* SPECIFICITY, the whole reason this block is written the long way:
     a media query adds no specificity. The desktop rules above include
     `.nav-item:hover > .nav-menu` (0,3,0), which out-ranks a plain
     `.nav-menu` (0,1,0) no matter which block comes later — so the absolute
     positioning and the translateX(-50%) survive into the mobile panel and
     the menu renders off the left edge of the screen. Every selector here is
     therefore written to at least match it. */
  .site-nav .nav-item > .nav-menu,
  .site-nav .nav-item:hover > .nav-menu,
  .site-nav .nav-item:focus-within > .nav-menu,
  .site-nav .nav-item > .nav-menu.is-open {
    position: static;
    transform: none;
    min-width: 0;
    width: 100%;
    padding: 0 0 6px 12px;
    border: 0;
    border-left: 1px solid var(--line-soft);
    margin-left: 4px;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav-menu::before { display: none; }

  /* Closed by default; hover must not open anything on a touch screen. */
  .site-nav .nav-item > .nav-menu,
  .site-nav .nav-item:hover > .nav-menu,
  .site-nav .nav-item:focus-within > .nav-menu { display: none; }

  .site-nav .nav-item > .nav-menu.is-open { display: block; }

  .nav-menu a { padding: 11px 10px; font-size: .95rem; }
  .nav-menu a small { display: none; }
}

/* ==========================================================================
   Touch targets and a minimum type size

   index.html closes its <head> with an INLINE <style> block, so it wins over
   this file at equal specificity — the same trap that once rendered the
   footer icons at 355px. Every override below is therefore written one level
   more specific than the rule it is correcting, not merely later in the file.

   44px is the comfortable thumb target. The header keeps its height (a taller
   bar on a phone costs more than it fixes, so the language switcher grows an
   invisible hit area instead); the footer is at the bottom of the page, where
   a few extra pixels are free.
   ========================================================================== */

@media (hover: none), (max-width: 768px) {

  /* Language switcher: 42×26. An invisible ::after hit area does NOT work
     here — .lang-toggle is overflow:hidden (that is what rounds the pill), so
     it clips the pseudo-element and the extra area is never tappable. Hit-
     tested with elementFromPoint to confirm. Real padding it is: the pill
     grows to 40px, and the header does not, because the 65px logo already
     sets its height. */
  .site-header .lang-toggle .lang-btn { padding-block: 14px; }

  /* The separator has to grow with it or it reads as a stray tick mark. */
  .site-header .lang-toggle .lang-sep { height: 26px; }

  /* WhatsApp button in the header — the site's primary conversion path, so
     the last control that should be fiddly to hit. It is 38px with an
     explicit height and border-box sizing, so padding alone does nothing;
     the height has to be released first. This lives in nav.css rather than
     radar.css because it is header chrome — Style Lab does not load
     radar.css, and that is exactly how it got missed the first time. */
  .site-header .wa-btn {
    height: auto;
    min-height: 44px;
    min-width: 44px;
  }

  /* "Play Showreel" hint under the video. */
  .showreel-frame .showreel-hint span { font-size: 12px; }

  /* Footer social icons: 34×34 circles, and the icon inside stays 18px. */
  .site-footer .footer-social a { width: 44px; height: 44px; }

  /* Footer links: 23px tall in a wrapping row with a 14px gap, so growing
     them keeps clear space between neighbours instead of merging targets. */
  .site-footer .footer-links a { display: inline-block; padding-block: 11px; }

  /* "Learn more" links inside the programme cards: 19px of bare text. */
  .program-grid .program-card a { display: inline-block; padding-block: 11px; }
}

/* --------------------------------------------------------------------------
   One correction outside the touch block, because it is wrong at every width.

   style.css has `.trust-row span::before { content: "✦" }`, and the markup is
   a span nested inside a span — so the selector matches both and every line in
   the credibility row renders "✦ ✦ 25+ years…". Silencing the inner one is
   enough; the outer keeps its bullet.
   -------------------------------------------------------------------------- */

.trust-row span span::before { content: none; margin-right: 0; }

/* Refined navigation: visible current location, predictable disclosures and a scrollable mobile panel. */
.nav-trigger { min-height:44px; }
.nav-trigger.is-current { color:#f0d7a1; }
.site-nav .nav-menu a[aria-current] { background:#2a2419; color:#f0d7a1; box-shadow:inset 2px 0 #d6ae67; }
.nav-menu a:focus-visible { outline:2px solid #f0d7a1; outline-offset:-2px; }
.nav-menu a small { white-space:normal; line-height:1.5; }
@media (min-width:1351px) {
  .nav-menu { min-width:290px; top:calc(100% + 6px); }
  .nav-menu::before { top:-10px; height:10px; }
  .nav-menu a { padding:12px 14px; }
}
@media (max-width:1350px) {
  .nav-ready .site-nav { visibility:hidden; max-height:calc(100vh - var(--ux-hdr,70px) - 24px); max-height:calc(100dvh - var(--ux-hdr,70px) - 24px); overflow-y:auto; overscroll-behavior:contain; }
  .nav-ready .site-nav.open { visibility:visible; }
  .site-nav .nav-item > .nav-menu { width:calc(100% - 4px); }
  .site-nav .nav-menu a { white-space:normal; min-height:44px; }
  .site-nav .nav-trigger { padding:13px 14px; }
  .site-nav .nav-trigger.is-current { border-radius:8px; background:rgba(214,174,103,.08); }
  .nav-toggle { position:relative; }
  .nav-toggle span { position:absolute; top:50%; left:50%; margin:0; }
  .nav-toggle span:first-child { transform:translate(-50%,calc(-50% - 4px)); }
  .nav-toggle span:last-child { transform:translate(-50%,calc(-50% + 4px)); }
  .nav-toggle[aria-expanded="true"] span:first-child { transform:translate(-50%,-50%) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform:translate(-50%,-50%) rotate(-45deg); }
}