/* =====================================================================
   Navigation (grouped dropdown menu) + dedicated MOBILE experience
   ===================================================================== */
.ico{width:22px;height:22px;flex:0 0 auto}
.brand-avatar{width:44px !important;height:44px !important;border-radius:50% !important;object-fit:cover;background:var(--navy) !important;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--sky-2);display:inline-block !important;padding:0;transition:transform .4s var(--ease),box-shadow .3s}
.brand:hover .brand-avatar{transform:scale(1.06);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--steel)}
.site-footer .brand-avatar{box-shadow:0 0 0 2px rgba(255,255,255,.15)}
@media (max-width:440px){ .brand-avatar{display:inline-block !important;width:36px !important;height:36px !important} }
.ico-sm{width:18px;height:18px}

/* ---------- desktop dropdown menu ---------- */
.menu{align-items:center;gap:2px !important}
.mi{position:relative}
.mi-top{display:inline-flex;align-items:center;gap:6px;padding:10px 12px !important;border-radius:6px;font:inherit;font-weight:600 !important;font-size:15px !important;color:var(--ink) !important;background:none;border:0;cursor:pointer;text-decoration:none;white-space:nowrap}
.mi-top:hover,.mi.active>.mi-top,a.mi-top[aria-current="page"]{color:var(--navy) !important;background:var(--alt)}
.menu a.mi-top::after{display:none}
.caret{width:7px;height:7px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:rotate(45deg) translateY(-2px);opacity:.6;transition:transform .25s}
.sub{position:absolute;top:calc(100% + 8px);inset-inline-start:0;min-width:240px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 22px 50px rgba(6,18,42,.14);padding:8px;display:grid;gap:2px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s;z-index:60}
.sub::before{content:"";position:absolute;inset-inline:0;top:-10px;height:10px}
.sub a{display:flex !important;align-items:center;gap:10px;padding:10px 12px !important;border-radius:8px;color:var(--ink) !important;text-decoration:none;font-size:14.5px;border:0 !important}
.sub a::after{display:none}
.sub a .ico{color:var(--steel)}
.sub a:hover,.sub a[aria-current="page"]{background:var(--sky);color:var(--navy) !important}
@media (hover:hover) and (min-width:1101px){
  .has-sub:hover>.sub,.has-sub:focus-within>.sub{opacity:1;visibility:visible;transform:none}
  .has-sub:hover .caret{transform:rotate(225deg) translateY(-1px)}
}
.has-sub.open>.sub{opacity:1;visibility:visible;transform:none}
.has-sub.open .caret{transform:rotate(225deg)}

/* the new menu is short → keep it inline on desktop (both languages) */
@media (min-width:1101px){
  .burger,html[lang="en"] .burger{display:none !important}
  .menu,html[lang="en"] .menu{display:flex !important;position:static !important;flex-direction:row !important;box-shadow:none !important;border:0 !important;padding:0 !important;background:transparent !important}
  .menu .menu-only,html[lang="en"] .menu .menu-only{display:none !important}
}

/* ---------- tablet/mobile drawer ---------- */
@media (max-width:1100px){
  .burger,html[lang="en"] .burger{display:inline-flex !important;align-items:center;justify-content:center}
  .menu,html[lang="en"] .menu{display:none !important;position:fixed !important;top:0;bottom:0;inset-inline-end:0;inset-inline-start:auto !important;width:min(360px,88vw);flex-direction:column !important;align-items:stretch !important;background:#fff !important;padding:76px 16px 100px !important;overflow-y:auto;z-index:90;box-shadow:-20px 0 60px rgba(6,18,42,.25) !important;border:0 !important;gap:2px !important}
  .menu.open,html[lang="en"] .menu.open{display:flex !important}
  .mi-top{width:100%;justify-content:space-between;padding:14px 12px !important;font-size:16px !important;border-bottom:1px solid var(--line) !important;border-radius:0}
  .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:4px 0 8px;display:none;min-width:0;background:var(--alt);border-radius:10px;margin:6px 0}
  .has-sub.open>.sub{display:grid}
  .menu .menu-only{display:flex !important}
  body.menu-open::after{content:"";position:fixed;inset:0;background:rgba(6,18,42,.45);z-index:80}
  body.menu-open .site-header{z-index:100}
  body.menu-open{overflow:hidden}
  body.menu-open .burger{position:relative;z-index:95}
}

/* ---------- mobile tab bar ---------- */
.tabbar{display:none}
@media (max-width:760px){
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;inset-inline:0;z-index:70;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -8px 24px rgba(6,18,42,.08)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--muted);text-decoration:none;padding:4px 2px;position:relative;border-radius:10px}
  .tabbar a .ico{width:23px;height:23px}
  .tabbar a[aria-current="page"]{color:var(--navy)}
  .tabbar a[aria-current="page"] .ico{color:var(--steel)}
  .tabbar a[aria-current="page"]::before{content:"";position:absolute;top:-6px;width:28px;height:3px;border-radius:3px;background:var(--steel)}
  .tab-count{position:absolute;top:0;inset-inline-end:calc(50% - 22px);min-width:18px;height:18px;border-radius:999px;background:var(--accent);color:#fff;font-size:10.5px;display:flex;align-items:center;justify-content:center;padding:0 4px}
  /* mobile version: compact header, hidden duplicates */
  .topbar{display:none}
  .nav-tools .icon-btn,.btn-cta{display:none !important}
  .wa-float{bottom:calc(80px + env(safe-area-inset-bottom));inset-inline-end:14px;width:50px;height:50px}
  .to-top{display:none}
  .site-header .nav{padding-block:10px}
  .brand-text small{display:none}
  /* typography & spacing tuned for phones */
  body{font-size:16px}
  .sec{padding-block:56px}
  .h2{font-size:27px !important}
  .lead{font-size:16px;margin-bottom:28px}
  .page-head .wrap{padding-block:44px 36px}
  .page-head h1{font-size:30px !important}
  .page-head p{font-size:16px}
  .hero-text,html[dir="ltr"] .hero-text{text-align:center;align-items:center;padding:20px 18px 120px}
  .hero-kicker{align-self:center}
  .hero h1{font-size:30px !important}
  .hero-intro{font-size:16px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .hero-cta{justify-content:center;width:100%}
  .hero-cta .btn{flex:1 1 100%}
  .float-badge{display:none}
  .numbers .wrap{grid-template-columns:repeat(3,1fr) !important;gap:8px 0;padding:18px 6px}
  .numbers .wrap>div:nth-child(n+4){display:none}
  .num{font-size:26px !important}
  .num-label{font-size:12px;line-height:1.4}
  .grid.g-170{grid-template-columns:repeat(2,1fr);gap:16px}
  .grid.g-220,.grid.g-240,.grid.g-260,.grid.g-300,.grid.g-320{grid-template-columns:1fr;gap:14px}
  .hscroll{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:-16px;padding-inline:16px;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .hscroll::-webkit-scrollbar{display:none}
  .hscroll>*{flex:0 0 72%;scroll-snap-align:start}
  .hscroll.books>*{flex-basis:42%}
  .card{padding:20px}
  a.card{padding-inline-end:52px}
  .cta-band .wrap{padding-block:48px}
  .cta-band h2{font-size:28px}
  .foot-giant{display:none}
  .sec-head{margin-bottom:24px}
  .sec-head .btn{width:100%}
  .alerts{bottom:calc(84px + env(safe-area-inset-bottom))}
}