/* Easton Automations — megamenu styles.
   Kept in its OWN file (not nav-unify.css) because index.html and the 18 -apple pages
   style their header INLINE and never load nav-unify.css — the megamenu has to reach
   every page that has the markup, so it must not depend on that stylesheet. Purely
   additive: it styles .nav__item / .megapanel only and touches no existing header rule. */
/* ============================================================================
   MEGAMENU (added 2026-08-01)
   40 pages used to be reachable only from the footer. They now live behind three
   hover panels, and the top level DROPPED from 8 links to 5 — so this buys header
   width back rather than spending it (the bar was measured at only 9px of slack
   at 1024px before this).
   Desktop: full-width panel under the bar, opens on hover AND on keyboard focus.
   Phone/tablet (<=1099px): the panels flatten into accordions inside the existing
   slide-down menu, so the hamburger keeps behaving exactly as it did.
   ========================================================================== */
header.nav .nav__inner{ position:relative; }
header.nav .nav__links{ position:static; }
.nav__item{ position:static; display:flex; align-items:center; }
.nav__item > .nav__link{ display:inline-flex; align-items:center; gap:5px; background:none; border:0;
  font:inherit; cursor:pointer; color:#1d1d1f; }
.nav__caret{ width:9px; height:9px; flex:0 0 auto; opacity:.5; transition:transform .22s ease, opacity .2s ease; }
.nav__item[data-open="true"] > .nav__link .nav__caret{ transform:rotate(180deg); opacity:.9; }
.nav__item[data-open="true"] > .nav__link{ background:rgba(0,0,0,.055); opacity:1; }

.megapanel{
  position:absolute; left:50%; top:calc(100% + 9px); transform:translate(-50%,-8px);
  width:min(1180px, calc(100vw - 40px));
  background:#fff;
  border:1px solid rgba(0,0,0,.07); border-radius:18px;
  box-shadow:0 30px 70px -24px rgba(2,12,40,.32), 0 2px 8px rgba(0,0,0,.05);
  padding:30px 34px 28px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, transform .24s cubic-bezier(.2,.8,.3,1), visibility .2s;
  z-index:60;
}
.nav__item[data-open="true"] .megapanel{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }
.megagrid{ display:grid; gap:26px 34px; }
.megagrid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.megagrid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.megagrid--svc{ grid-template-columns:repeat(3,minmax(0,1fr)) 268px; }
.megacol h4{ margin:0 0 12px; font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:#8a8a8f; }
.megacol a{ display:block; padding:7px 9px; margin-left:-9px; border-radius:8px; font-size:14.5px; font-weight:500;
  line-height:1.35; color:#1d1d1f; text-decoration:none; transition:background-color .15s ease, color .15s ease; }
.megacol a:hover{ background:rgba(0,0,0,.055); color:#0071e3; }
.megacol a small{ display:block; font-size:12.5px; font-weight:400; color:#86868b; margin-top:2px; }

/* promoted card (the live builder) */
.megafeat{ display:block; padding:20px; border-radius:14px; text-decoration:none; color:#fff;
  background:linear-gradient(160deg,#12203c 0%,#0a1120 100%);
  box-shadow:0 18px 40px -20px rgba(3,20,60,.6); transition:transform .2s ease, box-shadow .2s ease; }
.megafeat:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 24px 50px -20px rgba(3,20,60,.72); }
.megafeat .mf-kick{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#7fb2ff; }
.megafeat .mf-h{ display:block; margin-top:8px; font-size:17.5px; font-weight:650; letter-spacing:-.01em; }
.megafeat .mf-s{ display:block; margin-top:7px; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.72); }
.megafeat .mf-go{ display:inline-block; margin-top:13px; font-size:13.5px; font-weight:600; color:#fff; }

@media (max-width:1180px) and (min-width:1100px){
  .megapanel{ padding:26px 26px 24px; }
  .megagrid{ gap:22px 24px; }
  .megagrid--svc{ grid-template-columns:repeat(3,minmax(0,1fr)) 230px; }
}

/* ---- phone / tablet: panels become accordions in the slide-down menu ---- */
@media (max-width:1099px){
  header.nav .nav__links{ position:fixed; background:#fff;
    -webkit-backdrop-filter:none; backdrop-filter:none; }
  .nav__item{ display:block; width:100%; border-bottom:1px solid rgba(0,0,0,.06); }
  .nav__item > .nav__link{ width:100%; justify-content:space-between; font-size:18px; font-weight:500;
    padding:15px 4px; border-radius:0; }
  .nav__caret{ width:11px; height:11px; opacity:.45; }
  .megapanel{ position:static; transform:none; width:auto; padding:0 0 6px; margin:0;
    background:none; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
    opacity:1; visibility:visible; pointer-events:auto;
    display:none; }
  .nav__item[data-open="true"] .megapanel{ display:block; transform:none; }
  .nav__item[data-open="true"] > .nav__link{ background:transparent; }
  .megagrid,.megagrid--3,.megagrid--4,.megagrid--svc{ grid-template-columns:1fr; gap:14px; }
  .megacol h4{ margin:10px 0 4px; font-size:10.5px; }
  .megacol a{ font-size:16px; padding:10px 6px; margin-left:-6px; }
  .megafeat{ margin:6px 0 10px; }
}
@media (prefers-reduced-motion: reduce){
  .megapanel{ transition:none; }
  .nav__caret{ transition:none; }
}

/* ============================================================================
   PHONE HEADER FIT (2026-08-02) — lives in THIS file because index.html and the
   18 -apple pages style their header inline and never load nav-unify.css, so a fix
   there would miss the homepage entirely (the page Adam screenshotted).
   Measured cause: the bar is a FIXED 62px and the brand was 25px text + a 32px logo,
   which left a 7px gap to the hamburger at 375px and ZERO gap at 360px and 320px.
   iOS renders -apple-system wider and taller than headless Chrome, so on a real
   iPhone the brand collides with the toggle and the fixed-height bar amputates it.
   Three defences: the bar can GROW instead of clipping, the brand's box height is
   explicit rather than font-metric dependent, and it scales down on narrow phones.
   ========================================================================== */
@media (max-width:1099px){
  header.nav{ height:auto; min-height:62px; }
  header.nav .nav__inner{ height:auto; min-height:62px; }
  header.nav .nav__brand{ font-size:21px; line-height:1.15; }
  header.nav .nav__brand img{ height:28px; }
}
@media (max-width:390px){
  header.nav .nav__brand{ font-size:18.5px; gap:8px; }
  header.nav .nav__brand img{ height:25px; }
}

/* ---- CLOSED mobile menu must never paint over the header --------------------
   The slide-down panel hides itself with transform:translateY(-110%). That only
   clears the viewport when the panel is TALLER THAN 620px: its post-transform
   bottom is (62 - 0.10 x height), so a 379px panel still hangs 24px DOWN into the
   62px header. Harmless while the panel was translucent; the moment it was given an
   opaque background it began painting a white band over the top of the brand text,
   which reads exactly like a clipped logo (Adam's iPhone, 2026-08-02).
   visibility makes the overlap impossible at ANY panel height, and transitioning it
   means it stays painted for the whole slide-out before switching off. */
@media (max-width:1099px){
  header.nav .nav__links{
    visibility:hidden;
    transition:transform .3s cubic-bezier(0.28,0.11,0.32,1), visibility .3s;
  }
  header.nav .nav__links.is-open{ visibility:visible; }
}