/* Phase 18: Apple-inspired navigation with Asmaneez's own visual language.
   Works across light / dark / dim themes and respects existing header links. */
@media (min-width: 1080px) {
  .site-header .nav-pill > a.asm-mega-trigger.asm-nav-active,
  .site-header .nav-pill > a.asm-mega-trigger:focus-visible {
    opacity: 1;
  }
  .site-header .nav-pill > a.asm-mega-trigger.asm-nav-active::after {transform:scaleX(1)}
  .asm-mega-scrim {
    position:fixed;
    inset:var(--asm-header-bottom, 76px) 0 0;
    z-index:198;
    background:rgba(4,9,16,.31);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .3s ease, visibility .3s ease;
  }
  .asm-mega-scrim.is-visible {opacity:1;visibility:visible;pointer-events:auto}
  .asm-mega-panel {
    position:fixed;
    z-index:201;
    left:0;
    right:0;
    top:var(--asm-header-bottom, 76px);
    display:block;
    max-height:calc(100dvh - var(--asm-header-bottom, 76px) - 12px);
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    background:var(--paper);
    color:var(--ink);
    box-shadow:0 22px 55px -24px rgba(0,0,0,.24);
    border-bottom:1px solid var(--line);
    cursor:default;
    animation:asm-menu-reveal .26s cubic-bezier(.19,1,.22,1) both;
  }
  .asm-mega-panel[hidden] {display:none!important}
  @keyframes asm-menu-reveal {from {opacity:.2;transform:translateY(-9px)}to{opacity:1;transform:translateY(0)}}
  .asm-mega-inner {
    width:min(100% - 80px, 1180px);
    margin-inline:auto;
    padding:31px 0 28px;
  }
  .asm-mega-heading {display:flex;flex-direction:column;gap:2px;margin:0 0 23px;align-items:flex-start}
  .asm-mega-eyebrow {font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-3)}
  .asm-mega-title {font-size:clamp(22px,2vw,28px);letter-spacing:-.048em;line-height:1.2;font-weight:650}
  .asm-mega-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:35px;row-gap:21px;align-items:start}
  .asm-mega-grid.has-feature {grid-template-columns:1fr 1fr .85fr 1.05fr;column-gap:26px}
  .asm-mega-group {min-width:0}
  .asm-mega-group-title {font-size:11px;font-weight:650;letter-spacing:.012em;color:var(--ink-3);padding:0 0 13px}
  .asm-mega-links {display:flex;flex-direction:column;align-items:flex-start;gap:11px}
  .site-header .nav-pill .asm-mega-links a,
  .site-header .nav-pill .asm-mega-bottom a,
  .site-header .nav-pill a.asm-mega-feature {
    font-size:15px;
    font-weight:570;
    letter-spacing:-.023em;
    line-height:1.28;
    border-radius:0;
    padding:0;
    color:var(--ink);
    opacity:1;
    white-space:normal;
    text-decoration:none;
    transition:color .18s ease,transform .18s ease;
  }
  .site-header .nav-pill .asm-mega-links a::after,
  .site-header .nav-pill .asm-mega-bottom a::after,
  .site-header .nav-pill a.asm-mega-feature::after {display:none}
  .site-header .nav-pill .asm-mega-links a:hover,
  .site-header .nav-pill .asm-mega-bottom a:hover {color:var(--blue);transform:translateX(2px)}
  .site-header .nav-pill a.asm-mega-feature {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    width:100%;
    min-height:210px;
    padding:19px;
    border-radius:17px;
    background:var(--paper-2);
    border:1px solid var(--line);
    white-space:normal;
  }
  .asm-feature-kicker {font-size:11px;font-weight:620;color:var(--ink-3);letter-spacing:.02em}
  .asm-feature-logo {display:grid;place-items:center;width:37px;height:37px;border-radius:11px;background:#147868;color:white;font-size:18px;font-weight:740;letter-spacing:-.05em}
  .asm-feature-title {font-size:19px;letter-spacing:-.038em;font-weight:690;color:var(--ink)}
  .asm-feature-desc {font-size:12px;line-height:1.5;color:var(--ink-2);font-weight:450}
  .asm-feature-action {font-size:12px;line-height:1.3;font-weight:650;color:var(--blue);margin-top:auto}
  .site-header .nav-pill a.asm-mega-feature:hover {background:var(--card);box-shadow:var(--shadow-1)}
  .asm-mega-bottom {margin-top:29px;border-top:1px solid var(--line);padding-top:19px;display:flex;align-items:center;gap:29px}
  .site-header .nav-pill .asm-mega-bottom a {font-size:12px;font-weight:650;color:var(--ink-2)}
  .site-header .nav-pill .asm-mega-bottom a.asm-mega-all {color:var(--blue)}
  /* On the dark home hero, keep the panel fully themed and legible. */
  .site-header.is-over-dark:not(.is-stuck) .asm-mega-panel {color:var(--ink)}
  .site-header.is-over-dark:not(.is-stuck) .asm-mega-panel :focus-visible {outline-color:var(--blue);outline-offset:4px}
}
@media (min-width:1080px) and (max-width:1200px) {
  .asm-mega-inner {width:calc(100% - 60px)}
  .asm-mega-grid.has-feature {gap:16px;grid-template-columns:1fr 1fr .87fr .98fr}
  .site-header .nav-pill .asm-mega-links a {font-size:13px}
  .site-header .nav-pill a.asm-mega-feature {padding:16px}
}
@media (max-width:1079px) {
  .asm-mega-panel,.asm-mega-scrim {display:none!important}
  .mobile-menu nav .asm-mobile-entry {position:relative;border-bottom:1px solid var(--line)}
  .mobile-menu nav .asm-mobile-entry > a {
    padding-right:56px;
    border-bottom:0;
    max-width:100%;
  }
  .mobile-menu nav .asm-mobile-entry > a svg {display:none}
  .asm-mobile-toggle {
    display:grid;place-items:center;
    position:absolute;right:0;top:9px;
    width:48px;height:48px;
    border:0;border-radius:50%;
    color:var(--ink);background:transparent;
    cursor:pointer;
  }
  .asm-mobile-toggle:hover,.asm-mobile-toggle:focus-visible {background:var(--neutral-soft)}
  .asm-mobile-toggle svg {width:19px;height:19px;transition:transform .22s ease}
  .asm-mobile-toggle[aria-expanded="true"] svg {transform:rotate(180deg)}
  .asm-mobile-panel {display:grid;gap:0;padding:0 7px 17px 15px}
  .asm-mobile-panel[hidden] {display:none!important}
  .asm-mobile-caption {font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin:5px 0 10px}
  .mobile-menu nav .asm-mobile-panel a {
    font-size:15px;letter-spacing:-.012em;font-weight:500;
    padding:9px 8px;line-height:1.4;
    border:0;
    color:var(--ink-2);
    display:block;opacity:1;transform:none;
    transition:color .2s ease;
  }
  .mobile-menu nav .asm-mobile-panel a:hover {color:var(--blue)}
  .mobile-menu nav .asm-mobile-panel a.asm-mobile-view-all {color:var(--blue);font-weight:650;margin-top:7px}
  /* Override original immediate-child stagger rule after wrapping anchors. */
  .mobile-menu.is-open nav .asm-mobile-entry > a {opacity:1;transform:none}
  .mobile-menu nav > a {border-bottom:1px solid var(--line)}
}
@media (max-width:400px) {
  .mobile-menu nav .asm-mobile-entry > a {font-size:1.42rem}
  .asm-mobile-toggle {top:5px}
}
@media (prefers-reduced-motion:reduce) {
  .asm-mega-panel,.asm-mega-scrim,.asm-mobile-toggle svg {animation:none!important;transition:none!important}
}
/* Arabic navigation: keep the independent disclosure affordance on the end side. */
[dir="rtl"] .mobile-menu nav .asm-mobile-entry > a {padding-inline-end:56px;padding-inline-start:0}
[dir="rtl"] .asm-mobile-toggle {right:auto;left:0}
[dir="rtl"] .asm-mobile-panel {padding-inline-start:15px;padding-inline-end:7px}
[dir="rtl"] .site-header .nav-pill .asm-mega-links a:hover,
[dir="rtl"] .site-header .nav-pill .asm-mega-bottom a:hover {transform:translateX(-2px)}