/* Blog full-bleed hero, variant A (PD 2026-10-23): the white nav pill sits on a blue
   hero that runs to the top of the page. Loaded only by the blog templates (post.html,
   list.html). Scoped by server-side wrapper classes instead of :has() so it also works
   on Safari < 15.4 / Firefox < 121:
     .slb-hero-fullbleed  article pages (blog/post.html)
     .sbi-fullbleed       blog index first page (blog/list.html, .sbi--first)
   The header is static on this site (not sticky), so it scrolls away with the hero and
   never sits over white content. */

:root { --slb-hdr-h: 122px; }                                 /* >=1024: 20px pad + 102px pill */
@media (max-width: 1023px) { :root { --slb-hdr-h: 86px; } }   /* <1024: 30px pad + 56px pill */

/* Header overlays the hero (out of flow) */
.slb-hero-fullbleed > .header,
.sbi-fullbleed > .header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;                    /* above .slb-hero__in (1), below .slb-progress (50) */
  background: transparent;
}
/* Soft navy shadow under the white pill */
.slb-hero-fullbleed > .header .header__wrapper,
.sbi-fullbleed > .header .header__wrapper {
  box-shadow: 0 14px 36px -10px rgba(4, 22, 58, .55), 0 2px 6px rgba(4, 22, 58, .18);
}

/* Article: hero gradient starts at y=0; content inside keeps its position */
.slb-hero-fullbleed .slb-hero { padding-top: var(--slb-hdr-h); }

/* Index: the first-page band breaks out of the 1200px container, square corners */
.sbi-fullbleed .blog-main { overflow-x: clip; }               /* 100vw includes the scrollbar */
.sbi-fullbleed .sbi--first { padding-top: 0; }
.sbi-fullbleed .sbi--first > .sbi-band {
  margin-inline: calc(50% - 50vw);
  border-radius: 0;
  padding-top: calc(var(--slb-hdr-h) + 56px);
  padding-inline: max(56px, calc(50vw - 600px + 56px));       /* text stays at the old x (176px at 1440) */
}
@media (max-width: 1199px) {
  .sbi-fullbleed .sbi--first > .sbi-band { padding-top: calc(var(--slb-hdr-h) + 48px); padding-inline: 40px; }
}
@media (max-width: 767px) {
  .sbi-fullbleed .sbi--first > .sbi-band { padding-top: calc(var(--slb-hdr-h) + 28px); padding-inline: 20px; }
}

@media (max-width: 1023px) {
  /* Mobile menu open: pill + dropdown panel read as one card, so the shadow moves to the panel */
  .slb-hero-fullbleed > .header.opened .header__wrapper,
  .sbi-fullbleed > .header.opened .header__wrapper { box-shadow: none; }
  .slb-hero-fullbleed > .header.opened .main-nav__wrapper,
  .sbi-fullbleed > .header.opened .main-nav__wrapper {
    box-shadow: 0 24px 48px -16px rgba(4, 22, 58, .55);
  }

  /* Burger on the right edge of the pill: logo left, burger right. The 16px icon's
     outer edge sits 22px inside the pill, mirroring the logo (19px pill padding + 3px
     logo offset). 44x44 tap target, vertically centred, pill height unchanged (56px).
     Logical properties so RTL mirrors it. */
  .slb-hero-fullbleed > .header .main-nav,
  .sbi-fullbleed > .header .main-nav {
    display: flex;
    justify-content: flex-end;                                /* the dropdown panel is absolute, unaffected */
    margin-inline-start: auto;
  }
  .slb-hero-fullbleed > .header .main-nav__toggle,
  .sbi-fullbleed > .header .main-nav__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin-block: -9px;                                       /* 44px target inside the 26px content box */
    margin-inline-end: -11px;                                 /* icon edge 22px from the pill edge */
  }
}