/* =====================================================================
   assets/css/header.css — CHANGED: menu structure taken from algodelta.com v2
   (Products mega menu, Services / Learn / Company dropdowns) but styled with
   the blog's own tokens from site.css (--accent, --card, --line, pill .btn).
   Classes are prefixed "ah-" so they never clash with site.css.
   ===================================================================== */
.ah{position:sticky;top:0;z-index:50;background:rgba(17,17,17,.86);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid rgba(255,255,255,.06);font-family:var(--h)}
.ah .icon{line-height:1;display:inline-block}
.ah-bar{display:flex;align-items:center;gap:24px;height:72px}
.ah-brand{flex:none}
.ah-brand img{width:150px;height:auto;display:block}

.ah-nav{display:flex;align-items:center;gap:4px;margin:0 auto;font:500 15px var(--h)}
.ah-nav>a,.ah-dd-btn{position:relative;white-space:nowrap;color:#e8e8e8;padding:8px 12px;border-radius:10px;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font:inherit;transition:.15s}
.ah-nav>a:hover,.ah-dd-btn:hover,.ah-dd.open>.ah-dd-btn{color:#fff}
.ah-dd-btn .icon{font-size:.75em;transition:transform .2s}
.ah-dd:hover>.ah-dd-btn .icon,.ah-dd.open>.ah-dd-btn .icon{transform:rotate(180deg);color:var(--accent)}

/* active tab (Blogs): white text + orange underline, same as before */
.ah-nav>a[aria-current="page"]{color:#fff}
.ah-nav>a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;background:var(--accent);border-radius:2px}

/* dropdowns */
.ah-dd{position:relative}
.ah-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:280px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 20px 50px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;z-index:60}
.ah-small{min-width:250px}
.ah-dd:hover .ah-menu,.ah-dd:focus-within .ah-menu,.ah-dd.open .ah-menu{opacity:1;visibility:visible;transform:none}
.ah-menu a{display:block;padding:10px 12px;border-radius:9px;transition:.15s}
.ah-menu a:hover{background:var(--accent-soft)}
.ah-menu strong{display:block;font-size:14px;color:#fff;font-weight:600}
.ah-menu span{font-size:12.5px;color:var(--muted)}
.ah-menu a:hover strong{color:var(--accent)}

/* Products mega menu (Platform | Connections) */
.ah-mega{display:grid;grid-template-columns:minmax(0,1fr);gap:6px 24px;padding:16px}
.ah-group{margin:0 0 6px;padding:0 12px;color:var(--muted);font:700 11px var(--h);letter-spacing:1.5px;text-transform:uppercase}
.ah-menu a.ah-item{display:flex;align-items:flex-start;gap:12px;padding:9px 12px}
.ah-ico{flex:none;margin-top:2px;color:var(--accent);font-size:1rem}
.ah-tx{min-width:0}
.ah-tx>span{display:block;margin-top:2px}
.ah-menu a.ah-foot{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:10px 12px;white-space:nowrap;color:var(--accent);font-size:13.5px;font-weight:600}
.ah-menu a.ah-foot:hover{background:none;text-decoration:underline}
@media (min-width:1025px){.ah-mega{grid-template-columns:repeat(2,minmax(0,1fr));width:700px;left:-20px}}

/* right side: phone + previous pill buttons (.btn from site.css) */
.ah-right{display:flex;align-items:center;gap:12px;position:relative;z-index:61}
.ah .phone{width:44px;height:44px;border-radius:50%;background:var(--blue);display:grid;place-items:center;color:#fff;transition:.2s}
.ah .phone:hover{transform:scale(1.06)}
.ah-icon-btn{display:none;background:none;border:0;color:#fff;padding:6px;cursor:pointer}
.ah-icon-btn .icon{font-size:1.5rem}
.ah-icon-btn .i-close{display:none}
body.nav-open .ah-icon-btn .i-menu{display:none}
body.nav-open .ah-icon-btn .i-close{display:inline-block}
.ah-cta-m{display:none}

@media (max-width:1180px){.ah-bar{gap:14px}.ah-nav>a,.ah-dd-btn{padding:8px 9px}.ah-right .btn{padding:12px 18px}}

/* mobile (≤1024px): full-height slide-in panel, accordion dropdowns */
@media (max-width:1024px){
  /* FIXED: backdrop-filter makes the header the containing block of the fixed menu panel — drop it on mobile */
  .ah{background:#111;backdrop-filter:none;-webkit-backdrop-filter:none}
  .ah-icon-btn{display:block}
  .ah-hide-m{display:none!important}
  .ah-right{margin-left:auto}
  body.nav-open{overflow:hidden}
  .ah-nav{position:fixed;top:72px;left:0;right:0;bottom:0;flex-direction:column;align-items:stretch;gap:2px;background:#111;padding:16px 20px 0;margin:0;overflow-y:auto;-webkit-overflow-scrolling:touch;font-size:17px;visibility:hidden;transform:translateX(100%);transition:transform .25s,visibility .25s;z-index:55}
  body.nav-open .ah-nav{visibility:visible;transform:none}
  .ah-nav>a,.ah-dd-btn{width:100%;justify-content:space-between;padding:14px 8px;border-bottom:1px solid var(--line);border-radius:0}
  .ah-nav>a[aria-current="page"]{color:var(--accent)}
  .ah-nav>a[aria-current="page"]::after{display:none}
  .ah-dd:hover>.ah-dd-btn .icon{transform:none;color:inherit}
  .ah-dd.open>.ah-dd-btn .icon{transform:rotate(180deg);color:var(--accent)}
  .ah-menu,.ah-menu.ah-mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:none;padding:4px 0 8px 12px;min-width:0;width:auto;display:none}
  .ah-dd:hover .ah-menu,.ah-dd:focus-within .ah-menu{display:none}
  .ah-dd.open>.ah-menu{display:block}
  .ah-mega .ah-col+.ah-col{margin-top:10px}
  .ah-group{padding:6px 10px 4px}
  .ah-menu a.ah-item{gap:10px;padding:8px 10px}
  .ah-menu a.ah-foot{white-space:normal;padding:8px 10px}
  .ah-cta-m{display:flex;flex-direction:column;gap:12px;position:sticky;bottom:0;margin-top:auto;padding:18px 0 calc(18px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,#111 18px)}
  .ah-cta-m .btn{width:100%;min-height:48px}
}
@media (max-width:640px){
  .ah-bar{height:64px;gap:12px}
  .ah-nav{top:64px}
  .ah-brand img{width:128px}
  .ah .phone{width:40px;height:40px}
}
@media (max-width:1024px) and (prefers-reduced-motion:reduce){.ah-nav{transition:none}}