/* =============================================================================
   Chrome premium refine — mobile hamburger + nav icons + media (20260816navfix2)
   Loads LAST. Inter + Montserrat, #ed0000. Does not change nav IA.
   ============================================================================= */

/*
  ROOT CAUSE (proven at 390px): blank white menu circle.
  .topbar .menu-toggle is a 48×48 flex-column disc (site.min.css) with padding:8px
  (site-critical-home) + gap:5px. Critical also sets .menu-toggle span{margin:5px 0}.
  Bars are flex items with flex-shrink:1 and empty content (min-height:auto → 0),
  so the 2px preferred height collapses to used height 0 → empty white disc.
  Fix: zero the bar margins, lock flex:0 0 2px + min/max-height:2px, explicit ink bg.
*/

html body .topbar .menu-toggle,
html body button.menu-toggle.menu-toggle{
  display:inline-flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:48px !important;
  height:48px !important;
  min-width:44px !important;
  min-height:44px !important;
  padding:0 !important;
  gap:5px !important;
  box-sizing:border-box !important;
  border-radius:999px !important;
  border:1px solid rgba(16,24,40,.12) !important;
  background:#fff !important;
  background-color:#fff !important;
  color:#101828 !important;
  box-shadow:0 12px 34px rgba(16,24,40,.11) !important;
}

html body .topbar .menu-toggle span,
html body button.menu-toggle.menu-toggle span{
  display:block !important;
  width:18px !important;
  height:2px !important;
  min-height:2px !important;
  max-height:2px !important;
  margin:0 !important;
  padding:0 !important;
  flex:0 0 2px !important;
  flex-shrink:0 !important;
  flex-grow:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:#101828 !important;
  background-color:#101828 !important;
  opacity:1 !important;
  visibility:visible !important;
  transform-origin:center !important;
  box-sizing:border-box !important;
  transition:transform .36s cubic-bezier(.2,.8,.2,1),opacity .24s ease,width .28s ease !important;
}

html body .topbar .menu-toggle[aria-expanded="true"] span:nth-child(1),
html body button.menu-toggle.menu-toggle[aria-expanded="true"] span:nth-child(1){
  transform:translateY(7px) rotate(45deg) !important;
}
html body .topbar .menu-toggle[aria-expanded="true"] span:nth-child(2),
html body button.menu-toggle.menu-toggle[aria-expanded="true"] span:nth-child(2){
  opacity:0 !important;
  transform:scaleX(.2) !important;
}
html body .topbar .menu-toggle[aria-expanded="true"] span:nth-child(3),
html body button.menu-toggle.menu-toggle[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg) !important;
}

/* Drawer carets: keep CSS chevron visible (font-size:0 + ::before) */
html body #primary-nav.navlinks.is-open .nav-caret,
html body .topbar .navlinks.is-open .nav-caret{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:18px !important;
  height:18px !important;
  color:#ed0000 !important;
  font-size:0 !important;
  line-height:0 !important;
  opacity:1 !important;
}
html body #primary-nav.navlinks.is-open .nav-caret::before,
html body .topbar .navlinks.is-open .nav-caret::before{
  content:"" !important;
  display:block !important;
  width:8px !important;
  height:8px !important;
  border-right:2.5px solid currentColor !important;
  border-bottom:2.5px solid currentColor !important;
  transform:rotate(45deg) !important;
  background:transparent !important;
}

/* Sprite must remain paintable: visibility:hidden / display:none / 0×0
   breaks SVG <use> in Safari/iOS (white disc instead of the icon). */
html body svg.icon-sprite,
svg.icon-sprite{
  position:absolute !important;
  width:24px !important;
  height:24px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  visibility:visible !important;
  opacity:0 !important;
  pointer-events:none !important;
  left:-100vw !important;
  top:0 !important;
}

/* Visible red stroke icons — never a blank white disc */
html body .nav-mega-icon,
html body #primary-nav .nav-mega-icon,
html body .navlinks .nav-mega-icon,
.nav-mega-icon{
  color:#ed0000 !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.85 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  overflow:visible !important;
  box-sizing:border-box !important;
  flex:0 0 auto !important;
}
html body .nav-mega-icon use,
html body #primary-nav .nav-mega-icon use,
.nav-mega-icon use,
html body .nav-mega-icon *,
.nav-mega-icon *{
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.85 !important;
  color:inherit !important;
}

@media (min-width:981px){
  html body .nav-menu.nav-mega .nav-mega-icon,
  html body #primary-nav .nav-mega-icon{
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    min-height:22px !important;
    padding:1px !important;
    margin-top:2px !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
  }
}

@media (max-width:980px){
  html body #primary-nav.navlinks.is-open .nav-mega-icon,
  html body .topbar .navlinks.is-open .nav-mega-icon,
  #primary-nav.navlinks.is-open .nav-mega-icon,
  .topbar .navlinks.is-open .nav-mega-icon{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
    padding:7px !important;
    border-radius:10px !important;
    background:#fff8f8 !important;
    background-color:#fff8f8 !important;
    border:1px solid rgba(237,0,0,.18) !important;
    color:#ed0000 !important;
    display:inline-grid !important;
    place-items:center !important;
  }

  html body #primary-nav.navlinks.is-open .nav-mega-link,
  html body .topbar .navlinks.is-open .nav-mega-link{
    min-height:48px !important;
    align-items:center !important;
    gap:14px !important;
    padding:12px var(--zatra-mobile-gutter,18px) !important;
  }
  html body #primary-nav.navlinks.is-open .nav-mega-link strong,
  html body .topbar .navlinks.is-open .nav-mega-link strong{
    display:block !important;
    margin:0 !important;
    font-size:1rem !important;
    line-height:1.28 !important;
  }
  html body #primary-nav.navlinks.is-open .nav-mega-link small,
  html body .topbar .navlinks.is-open .nav-mega-link small{
    display:block !important;
    margin:.15rem 0 0 !important;
    line-height:1.4 !important;
  }
  html body #primary-nav.navlinks.is-open .nav-plain-link,
  html body #primary-nav.navlinks.is-open .nav-hub-link,
  html body #primary-nav.navlinks.is-open .nav-caret-btn{
    min-height:44px !important;
  }

  /* No horizontal overflow in drawer */
  html body #primary-nav.navlinks.is-open,
  html body .topbar .navlinks.is-open{
    overflow-x:hidden !important;
    max-width:100vw !important;
  }

  /* Type clearance under sticky header */
  html body main#main,
  html body .it-split-hero,
  html body .page-hero-fill,
  html body .legal-hero,
  html body.post-page .migrate-article h1{
    scroll-margin-top:88px;
  }

  /* Footer usable */
  html body .zatra-premium-footer .zatra-footer-grid{
    grid-template-columns:1fr !important;
    gap:22px !important;
  }
  html body .zatra-premium-footer a,
  html body .zatra-premium-footer button{
    min-height:44px;
  }
}

/* Media fills its box — do not override Home art-directed object-position */
html body .it-split-hero-media,
html body .it-split-hero-media picture,
html body figure.post-cover,
html body .migrate-cover,
html body .it-preview-window,
html body .it-lead-photo,
html body .it-person-photo,
html body .team-portrait,
html body .hero-lcp-figure,
html body .setup-desk-shot,
html body .about-story-beat-media{
  overflow:hidden !important;
}
html body .it-split-hero-media img,
html body figure.post-cover img,
html body .migrate-cover img,
html body .it-preview-window img,
html body .it-lead-photo img,
html body .it-person-photo img,
html body .team-portrait img,
html body .about-story-beat-media img,
html body .page-hero-fill img,
html body .legal-hero img,
html body .ie-card-media img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  display:block !important;
}

html body:not(.home-page) .it-split-hero-media img,
html body:not(.home-page) .page-hero-fill img,
html body.post-page .migrate-cover img,
html body.post-page figure.post-cover img{
  object-position:center 28% !important;
}

@media (max-width:980px){
  html body .it-split-hero-media{
    aspect-ratio:4 / 3 !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
  }
  html body.post-page .migrate-cover,
  html body.post-page figure.post-cover,
  html body.post-page .migrate-article > figure:first-of-type{
    aspect-ratio:16 / 9 !important;
    max-height:none !important;
  }
  html body .ie-card-media{
    aspect-ratio:16 / 9 !important;
    overflow:hidden !important;
  }
}

/* Typographic / colour block when a unique photo is not available */
.media-type-block,
.hero-type-block,
.post-cover-type,
.ie-card-media.is-photo-missing,
.ie-card-media:empty{
  display:block;
  width:100%;
  min-height:160px;
  aspect-ratio:16 / 9;
  background:
    radial-gradient(ellipse 70% 80% at 12% 20%, rgba(237,0,0,.16), transparent 55%),
    linear-gradient(160deg, #f7f7f8 0%, #ececef 52%, #f3e8e8 100%);
  border:0;
}

html body .it-split-hero-media .media-type-block,
html body .it-split-hero-media .hero-type-block{
  height:100%;
  min-height:240px;
  aspect-ratio:auto;
}

/* Page-fill fallback: never reuse the About office photo */
html body:not(.about-page) .page-hero-fill{
  --about-hero-photo:none;
}
html body:not(.about-page) .page-hero-fill::before{
  background-image:var(--hero-fill-wash, linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.52))), var(--hero-fill-image, none) !important;
  background-color:#dbe4ee !important;
  background-size:cover !important;
  background-position:center 28% !important;
}