/* Blooming Prep header — hand-built nav behavior. Structure lives in Elementor template 29. v1.7.0 — header on the page gutter 15 Sep 2026 */

[data-id="header-logo"] { white-space: nowrap; flex: 0 0 auto; }
[data-id="header-logo"] a { color: inherit; text-decoration: none; }
[data-id="main-nav"] { flex-wrap: nowrap; }
[data-id^="nav-toggle-"], [data-id="nav-link-careers"], [data-id^="plink-"] { white-space: nowrap; }
@media (min-width: 1200px) {
  /* tighter horizontal rhythm between top-level links: 8px nav gap + 10px each side = 28px */
  [data-id^="nav-toggle-"], [data-id="nav-link-careers"] { padding-left: 10px !important; padding-right: 10px !important; }
  /* items size to their label (Elementor's atomic width:100% loads later, hence !important);
     with content-sized items the row no longer fills the bar, so centre the group */
  [data-id^="nav-item-"] { width: auto !important; flex: 0 0 auto !important; }
  [data-id="main-nav"] { justify-content: center; }
}

/* Dropdown open: hover + keyboard focus (desktop) */
@media (min-width: 1200px) {
  /* :focus-within:not(.bp-esc) — Escape closes the panel while focus is still inside the item
     (restored to its toggle); without the guard :focus-within re-opened it instantly (14 Sep 2026 review). */
  [data-id^="nav-item-"]:hover > [data-id^="nav-panel-"],
  [data-id^="nav-item-"]:focus-within:not(.bp-esc) > [data-id^="nav-panel-"],
  [data-id^="nav-item-"].bp-open > [data-id^="nav-panel-"] {
    display: block;
  }
  /* mega menu enter/exit (14 Sep 2026): fade + 8px slide down, reversed on exit. Native
     display transition (allow-discrete + @starting-style); browsers without it keep the
     instant swap. Easing = the header's own curve. */
  [data-id^="nav-panel-"] {
    opacity: 1; transform: translateY(0);
    transition: opacity .22s cubic-bezier(.22,.61,.36,1), transform .22s cubic-bezier(.22,.61,.36,1), display .22s allow-discrete;
  }
  [data-id^="nav-item-"]:not(:hover, .bp-open):not(:focus-within:not(.bp-esc)) > [data-id^="nav-panel-"] { opacity: 0; transform: translateY(-8px); pointer-events: none; } /* an exiting panel must not re-catch hover */
  @starting-style {
    [data-id^="nav-item-"]:is(:hover, .bp-open, :focus-within:not(.bp-esc)) > [data-id^="nav-panel-"] { opacity: 0; transform: translateY(-8px); }
  }
}
@media (prefers-reduced-motion: reduce) { [data-id^="nav-panel-"] { transition: none; transform: none; } }

/* Caret on dropdown toggles */
[data-id^="nav-toggle-"]::after {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  flex: 0 0 auto;
}

/* Dropdown panels — white card, hairline border, columns never collide.
   gap is row-gap/column-gap: tight links vertically, roomy columns horizontally. */
@media (min-width: 1200px) {
  [data-id^="nav-panel-"] { width: auto !important; min-width: max-content !important; padding-top: 12px !important; }
  [data-id^="panel-box-"] {
    background: var(--card) !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm,10px) !important; /* radius-sm — was 20px, off-scale (26 Aug audit) */
    padding: 20px 28px !important;
    gap: 8px 40px !important;
    min-width: max-content !important;
  }
  /* atomic div-blocks default to width:100%; columns must shrink to content */
  [data-id^="programs-col-"] { flex: 0 0 auto; width: auto !important; gap: 8px !important; }
  /* panel links are hover pills: negative margin keeps labels flush with the panel padding */
  a[data-id^="plink-"] {
    padding: 6px 10px !important;
    margin: 0 -10px;
    border-radius: var(--radius-sm,10px) !important; /* radius-sm */
    transition: background-color .2s, color .2s;
  }
  [data-id^="plink-"]:hover,
  [data-id^="plink-"]:focus-visible { background: var(--band-sage) !important; color: var(--accent) !important; }
}

/* Banner link — plain underlined text link, matching the banner message's size at every
   breakpoint (client, 18 Aug 2026). The arrow chip was removed in the same pass. */
[data-id="banner-link"] {
  display: inline-flex;
  align-items: center;
  font-size: 14px !important; /* matches the banner message's p */
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* Header states — transparent at top; hides on scroll-down; scroll-up reveals it fixed
   on a blurred white ground so it never blends into content (client, 18 Aug 2026; white + 3px blur, 18 Aug 2026) */
[data-id="site-header"] { transition: transform .35s cubic-bezier(.22,.61,.36,1), background-color .3s; }
@media (min-width: 1200px) {
  [data-id="site-header"].bp-head-fixed {
    position: fixed !important;
    inset-block-start: 0 !important;
    /* 18 Sep 2026: the 3px blur was a veil, not a material. Apple's own baseline
       (SKILL-apple-extended.md 12) is blur + saturate, with content reading through
       it, plus the floating-chrome shadow so the bar sits above the page. */
    background: rgba(255,255,255,.72) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--shadow-md);
  }
  [data-id="site-header"].bp-head-hidden { transform: translateY(-120%); }
}
@media (prefers-reduced-motion: reduce) {
  [data-id="site-header"] { transition: none; }
}

/* §12c nav underline — 2px bar, clipped, revealed on hover/focus. nav-link-careers is the one plain
   top-level link (Enrichment since 29 Sep 2026; these selectors named the retired Blog link before). */
[data-id^="nav-toggle-"],
[data-id="nav-link-careers"] {
  position: relative;
  overflow: clip;
  cursor: pointer;
}
[data-id^="nav-toggle-"]::before,
[data-id="nav-link-careers"]::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 2px;
  height: 2px;
  background: currentColor;
  transform: translateY(4px);
  transition: transform 0.3s;
}
[data-id^="nav-toggle-"]:hover::before,
[data-id^="nav-toggle-"]:focus-visible::before,
[data-id="nav-link-careers"]:hover::before,
[data-id="nav-link-careers"]:focus-visible::before {
  transform: translateY(0);
}

a[data-id^="plink-"] { text-align: left !important; justify-content: flex-start; }

/* Burger ≤1199 — compact nav per the design system (Navbar.jsx): icon-only 44px circle,
   cream sheet, hairline rows at 13px/2px weight 500, bar CTA relocated into the sheet
   by bp-header.js. */
@media (max-width: 1199px) {
  /* panel links keep the quiet color swap on the sheet */
  [data-id^="plink-"]:hover,
  [data-id^="plink-"]:focus-visible { color: var(--accent); }

  [data-id="nav-burger"] {
    display: inline-flex !important;
    position: relative;
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 auto;
    padding: 0 !important;
    border: 1px solid rgba(33,52,38,.18) !important; /* border-strong */
    border-radius: var(--radius-full,100%) !important;
    background: transparent !important;
    color: var(--ink);
    font-size: 0 !important; /* hides the "Menu" label visually; it stays the accessible name */
  }
  [data-id="nav-burger"]::before,
  [data-id="nav-burger"]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 2.4px;
    background: currentColor;
    transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s;
  }
  [data-id="nav-burger"]::before { transform: translate(-50%,-50%) translateY(-6.5px); box-shadow: 0 6.5px 0 currentColor; }
  [data-id="nav-burger"]::after  { transform: translate(-50%,-50%) translateY(6.5px); }
  .bp-nav-open [data-id="nav-burger"]::before { transform: translate(-50%,-50%) rotate(45deg); box-shadow: none; }
  .bp-nav-open [data-id="nav-burger"]::after  { transform: translate(-50%,-50%) rotate(-45deg); }

  /* the sheet is absolute against the header, not the 1330px inner row, so it spans
     the full viewport width — drop the inner row's positioning at this breakpoint */
  [data-id="header-inner"] { position: static !important; }
  [data-id="main-nav"] {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    background: var(--band-tan); /* cream-100 — the system's sheet ground */
    border-bottom: 1px solid rgba(33,52,38,.10);
    padding: 8px 20px 20px !important;
    gap: 0 !important;
  }
  .bp-nav-open [data-id="main-nav"] { display: flex !important; }
  [data-id^="nav-toggle-"],
  [data-id="nav-link-careers"] {
    color: var(--ink);
    justify-content: space-between;
    width: 100%;
    text-align: left;
    font-weight: 500 !important;
    padding: 13px 2px !important;
    border-bottom: 1px solid rgba(33,52,38,.10) !important; /* border-subtle hairline rows */
  }
  [data-id^="nav-panel-"] {
    position: static !important;
    padding: 0 0 0 20px !important;
  }
  [data-id^="nav-item-"] { padding: 0 !important; }
  [data-id^="nav-item-"].bp-open > [data-id^="nav-panel-"] { display: block; }
  /* !important throughout: Elementor's atomic .s-panel-box-* class (butter ground,
     40px padding, 220px min-width) loads after this sheet */
  [data-id^="panel-box-"] {
    background: transparent !important;
    padding: 8px 0 16px !important;
    min-width: 0 !important;
  }
  a[data-id^="plink-"] { padding: 0 !important; margin: 0 !important; }
  [data-id="panel-box-programs"] { flex-direction: column; gap: 14px; }
  /* the relocated bar CTA closes the sheet, pill kept at its natural size */
  [data-id="main-nav"] a[data-id="header-cta"] {
    display: inline-flex !important;
    margin-top: 16px;
    align-self: flex-start;
  }
}

/* ≤767: banner drops its link (hero carries the CTA), shrinks type, and the header
   re-anchors below it. The bar CTA now lives inside the burger sheet at every ≤1199 width. */
@media (max-width: 767px) {
  [data-id="banner-link"] { display: none !important; }
  [data-id="banner-strip"], [data-id="banner-strip"] p, [data-id="banner-link"] { font-size: 12px !important; }
  [data-id="banner-strip"] { padding-top: 8px; padding-bottom: 8px; }
  [data-id="site-header"] { inset-block-start: 52px !important; }
}
a[data-id="header-cta"], a[data-id="hero-cta-primary"], a[data-id="hero-cta-secondary"] { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  [data-id^="nav-toggle-"]::before,
  [data-id="nav-link-careers"]::before,
  [data-id="nav-burger"]::before,
  [data-id="nav-burger"]::after,
  [data-id^="plink-"] { transition: none !important; }
}

/* Header height — the atomic containers each carry Elementor's default 10px block
   padding, so header-inner + main-nav + nav-item stacked 60px on top of the header's
   own 16px (132px bar). Desktop only; the <=1199 burger sheet keeps its own padding. */
@media (min-width: 1200px) {
  [data-id="header-inner"],
  [data-id="main-nav"],
  [data-id^="nav-item-"] { padding-block: 0 !important; }
}

/* ── Desktop mega menu (11 Sep 2026) ─────────────────────────────────────────
   Each parent opens a full-width band anchored to the header, and header + band
   take that parent's own band colour (Barrow Street pattern). Colour swap only,
   no shadow, no transform. CSS-only: hover/focus-within/.bp-open already drive
   display; :has() lifts the tint up to the header. */
@media (min-width: 1200px) {
  /* transition comes from the base rule above (line ~87) only — redeclaring it here used to sit
     after the prefers-reduced-motion guard in source order and silently re-enabled the header's
     scroll transform for reduced-motion users at desktop widths (14 Sep audit A7, found 15 Sep). */
  [data-id="site-header"] { position: absolute; }
  /* panels anchor to the header, not the nav item */
  [data-id="header-inner"], [data-id="main-nav"], [data-id^="nav-item-"] { position: static !important; }
  [data-id^="nav-panel-"] {
    left: 0 !important; right: 0 !important; top: 100% !important; /* full-bleed band (user, 11 Sep) */
    width: auto !important; min-width: 0 !important;
    /* hover bridge: the panel starts 24px up inside the header's bottom padding so the pointer
       never leaves the nav item between toggle and panel. (A ::before bridge fails — Elementor's
       atomic CSS forces content:none on div-block pseudo-elements.) Colour lives on panel-box. */
    top: calc(100% - 24px) !important;
    padding: 24px 0 0 !important;
    background: var(--bp-mega, var(--band-tan)) !important; /* full page-width tint; content box stays on the 1330 rail */
  }
  [data-id^="panel-box-"] {
    display: grid !important;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    justify-content: start; align-content: start;
    gap: 6px 48px !important;
    position: relative;
    max-width: 1330px; margin-inline: auto !important; /* content on the 1330 rail */
    /* px indent, not % — % resolved against the full-width panel. The right-hand photo was removed
       29 Sep 2026 (client mark-up: "remove images from drop down menu"), so the right padding is
       just the 10px edge. */
    padding: 24px 10px 40px clamp(160px, 100vw - 1130px, 200px) !important;
    background: var(--bp-mega, var(--band-tan)) !important;
    border: 0 !important; border-radius: 0 !important; /* full-bleed band, no corners */
    transition: background-color .25s;
    min-width: 0 !important;
  }
  /* Revision plan P2-01 (29 Sep 2026): About and Academics carry 4 links -> one column; Programs and
     Our Community 6 -> 3+3 on the default repeat(3); Admissions 3 -> one column. */
  [data-id="panel-box-about"], [data-id="panel-box-academics"] { grid-template-rows: repeat(4, auto); }
  [data-id^="programs-col-"] { display: contents; }
  /* columns are minmax(0, max-content): labels wrap instead of overflowing the content box. */
  [data-id^="panel-box-"] { grid-auto-columns: minmax(0, max-content); }
  a[data-id^="plink-"] { font-size: 18px !important; padding: 8px 12px !important; margin: 0 -12px; white-space: normal; min-width: 0; }
  /* CTA sits above the panel's 24px hover bridge, which otherwise tints over the pill */
  a[data-id="header-cta"] { position: relative; z-index: 1002; } /* panels are 1001 */
  /* same for the logo: the panel's bridge starts at y=99, over the logo's green sub-text (ends ~111) */
  [data-id="header-logo"] { position: relative; z-index: 1002; }
  [data-id^="plink-"]:hover, [data-id^="plink-"]:focus-visible { background: rgba(255,255,255,.7) !important; }

  /* per-parent tint — one family per panel, header follows via :has() */
  [data-id="nav-item-about"]     { --bp-mega: var(--band-tan); }
  [data-id="nav-item-programs"]  { --bp-mega: var(--band-sage); }
  [data-id="nav-item-academics"] { --bp-mega: var(--band-teal); }
  [data-id="nav-item-admission"] { --bp-mega: var(--band-coral); }
  [data-id="nav-item-community"] { --bp-mega: var(--butter); }
  [data-id="site-header"]:has([data-id="nav-item-about"]:is(:hover, .bp-open, :focus-within:not(.bp-esc)))     { background: var(--band-tan) !important; }
  [data-id="site-header"]:has([data-id="nav-item-programs"]:is(:hover, .bp-open, :focus-within:not(.bp-esc)))  { background: var(--band-sage) !important; }
  [data-id="site-header"]:has([data-id="nav-item-academics"]:is(:hover, .bp-open, :focus-within:not(.bp-esc))) { background: var(--band-teal) !important; }
  [data-id="site-header"]:has([data-id="nav-item-admission"]:is(:hover, .bp-open, :focus-within:not(.bp-esc))) { background: var(--band-coral) !important; }
  [data-id="site-header"]:has([data-id="nav-item-community"]:is(:hover, .bp-open, :focus-within:not(.bp-esc))) { background: var(--butter) !important; }
  [data-id="site-header"]:has([data-id^="nav-item-"]:is(:hover, .bp-open, :focus-within:not(.bp-esc))) {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: reduce) { [data-id^="panel-box-"] { transition: none; } }

/* Announcement bar was 12px on phones — the first line a visitor reads (14 Sep 2026 audit). */
@media (max-width:767px){ html body .elementor .s-banner-text { font-size:14px !important; line-height:1.4 !important; } }

/* Header sits on the page gutter, not 10px inside it: header-inner carried Elementor's
   default 10px inline padding, and the header's own 32px never stepped down with the
   section gutters (24 at <=1199, 16 at <=767). 15 Sep 2026 */
[data-id="header-inner"] { padding-inline: 0 !important; }
@media (max-width: 1199px) { [data-id="site-header"] { padding-inline: 24px !important; } }
@media (max-width: 767px)  { [data-id="site-header"] { padding-inline: 16px !important; } }

/* Mobile sheet tap target (17 Sep 2026). The one plain top-level link renders 40px tall against
   the 51px panel toggles beside it, under the 44px minimum. Since 29 Sep 2026 (P2-01) that link
   is "Enrichment" — it reuses the old Careers element, so its id is still nav-link-careers. Home
   was removed from the nav (the logo links home). Row height only; the desktop bar is untouched. */
@media (max-width: 1199px) {
  html body .elementor [data-id="main-nav"] > [data-id="nav-link-careers"] {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* Translucency is a material, not a requirement: with reduced transparency the
   header goes solid and the blur comes off (SKILL-apple-extended.md 14). */
@media (prefers-reduced-transparency: reduce) {
  [data-id="site-header"].bp-head-fixed {
    background: var(--bg,#FFFFFF) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* P2-13 (29 Sep 2026): client asked the announcement bar to "stand out more — pop of color,
   bolder text". Bolder now; the colour pop waits for the new palette (P2-02). */
html body .elementor .s-banner-text{font-weight:700 !important;}