/* ==========================================================================
   Nursery Room — theme component + layout styles
   Values lifted verbatim from the design system's React screens
   (design-system/ui_kits/website/*.jsx and components/*). Reads the --nr-* /
   --text-* / --space-* / --radius-* / --shadow-* tokens from styles.css.
   Mobile-first: multi-column grids collapse to one column under 860px.
   ========================================================================== */

/* --- base helpers ------------------------------------------------------- */
img { max-width: 100%; height: auto; }

.nr-container { max-width: var(--container-max); margin: 0 auto; padding: 0 32px; }

/* Gap at the top of every page, 2026-09-19. Three things were stacking under the header:
   the section's own vertical padding, an inline `padding-top:16px` each screen pattern puts
   on its first container, and the top margin of the first paragraph inside it (WordPress's
   flow layout / default paragraph margin). Together that read as a dead band under the nav
   on every page.
   The inline 16px is baked into all seven pages' STORED content, so it can only be undone
   from CSS — hence the !important, which is doing real work here rather than papering over
   a specificity mistake. Zeroing the first child's top margin removes the rest. */
.nr-section > .nr-container:first-child { padding-top: 0 !important; }
/* Setting and Gallery nest one level deeper than the other screens — their header group sits
   inside a .nr-container rather than being one — so the rule above missed the inline 16px and
   those two pages started 16px lower than every other. Scoped to the centred header group so
   it can't strip padding from a card that happens to lead a section. */
.nr-section > .nr-container:first-child > .nr-center.nr-measure:first-child { padding-top: 0 !important; }
.nr-section > :first-child,
.nr-container > :first-child { margin-block-start: 0; }

/* ...and a fourth thing, found 2026-09-19 after the above only half-fixed it: WordPress's
   root flow layout puts `margin-block-start: var(--wp--style--block-gap)` (24px by default)
   between every top-level block, including between the site header and the first section.
   Zero it at the root and give the first section a deliberately small top padding, so a page
   starts just under the nav instead of a fifth of a screen below it. */
.wp-site-blocks > * { margin-block-start: 0; }
.nr-section:first-child { padding-top: 20px; }

/* 2026-09-19: was 72px, which meant 144px of dead space wherever two sections meet (the
   vertical padding of adjacent sections adds up — it doesn't collapse). On the home page
   especially that read as the page being broken rather than airy. 48px keeps the sections
   distinct while closing the gaps down to a deliberate-looking 96px at a boundary. */
.nr-section { padding: 48px 0; }
.nr-section.is-green  { background: var(--surface-band-green); border-radius: 48px 48px 0 0; }
.nr-section.is-blue   { background: var(--surface-band-blue);  border-radius: 48px 48px 0 0; }
.nr-section.is-cream  { background: var(--surface-sunken);     border-radius: 48px 48px 0 0; }

.nr-center  { text-align: center; }
.nr-lead    { font-size: var(--text-lead); }
.nr-hero-title { font-size: clamp(40px, 6vw, 64px); line-height: var(--leading-display); }
.nr-note    { font-size: 14px; color: var(--text-muted); }
.nr-measure { margin-left: auto; margin-right: auto; }

/* --- layout grids ------------------------------------------------------- */
.nr-grid    { display: grid; gap: 20px; }
.nr-cols-2  { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
/* 2026-09-19: centring is right when both columns are similar heights (text beside a photo),
   but wrong when one is a tall form card — the shorter text column then floats down the
   middle and leaves a big empty band under the header. Where a column is a card, align the
   row to the top instead so both start level with the nav. */
.nr-cols-2:has(> .nr-card) { align-items: start; }
.nr-cols-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.nr-cols-4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* Bug fix, 2026-09-19 (the "cards aren't aligned" reports): when a core/group block is
   turned into a CSS Grid by one of the classes above, WordPress *still* emits its own
   flow-layout block-gap rule for that container — `:where(.wp-container-...) > * +
   * { margin-block-start: <blockGap> }`. Inside a grid those margins don't collapse into
   the grid's own `gap`; they offset each item *within its own grid cell*, so the first
   card in a row sat flush while every later card was pushed down ~25px. It read as
   randomly staggered cards (team photos, pricing cards). WordPress's rule is wrapped in
   `:where()` and therefore has zero specificity, so a single class here beats it
   cleanly, no !important needed. Row spacing still comes from `gap`. */
.nr-grid > *, .nr-cols-2 > *, .nr-cols-3 > *, .nr-cols-4 > *, .nr-hero-photos > *,
.nr-stats-row > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* --- eyebrow ------------------------------------------------------------ */
.nr-eyebrow { margin-bottom: 14px; }

/* --- badge (core/Badge) ------------------------------------------------- */
.nr-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 14px; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: 14px; font-weight: 800;
  letter-spacing: 0.02em; white-space: nowrap;
}
.nr-badge--green  { background: #EAF7EE; color: #00913F; }
.nr-badge--orange { background: #FEF2E2; color: #D97C08; }
.nr-badge--blue   { background: #E5F6FD; color: #0090C7; }
.nr-badge--pink   { background: #FDEEF5; color: #D33F86; }
.nr-badge--purple { background: #F6E9F5; color: #761F73; }
.nr-badge--red    { background: #FDECEB; color: #CF2A22; }
.nr-badge--green.is-solid  { background: #2FB457; color: #fff; }
.nr-badge--orange.is-solid { background: #F7941D; color: #fff; }
.nr-badge--blue.is-solid   { background: #00AEEF; color: #fff; }
.nr-badge--pink.is-solid   { background: #EC5FA1; color: #fff; }
.nr-badge--purple.is-solid { background: #92278F; color: #fff; }
.nr-badge--red.is-solid    { background: #EF3E36; color: #fff; }

/* --- button (forms/Button) --------------------------------------------- */
.nr-btn {
  --s: #2FB457; --st: #00913F; --t: #EAF7EE;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 28px; font-size: 17px;
  border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: 700;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  border: 2px solid transparent; background: var(--s); color: #fff;
  transition: all var(--duration-fast) var(--ease-out);
}
.nr-btn:hover { background: var(--st); color: #fff; }
.nr-btn:active { transform: scale(0.98); }
.nr-btn--sm { height: 40px; padding: 0 20px; font-size: 15px; }
.nr-btn--lg { height: 56px; padding: 0 36px; font-size: 18px; }
.nr-btn--green  { --s: #2FB457; --st: #00913F; --t: #EAF7EE; }
.nr-btn--orange { --s: #F7941D; --st: #D97C08; --t: #FEF2E2; }
.nr-btn--blue   { --s: #00AEEF; --st: #0090C7; --t: #E5F6FD; }
.nr-btn--pink   { --s: #EC5FA1; --st: #D33F86; --t: #FDEEF5; }
.nr-btn--purple { --s: #92278F; --st: #761F73; --t: #F6E9F5; }
.nr-btn--red    { --s: #EF3E36; --st: #CF2A22; --t: #FDECEB; }
.nr-btn--secondary { background: transparent; color: var(--st); border-color: var(--s); }
.nr-btn--secondary:hover { background: var(--t); color: var(--st); }
.nr-btn--ghost { background: transparent; color: var(--st); border-color: transparent; }
.nr-btn--ghost:hover { background: var(--t); color: var(--st); }
.nr-btn svg { flex: none; }
/* Bug fix, 2026-09-19: WordPress core styles a button block's inner <a class="wp-block-
   button__link"> on its own (theme.json's button color preset), independent of the
   wrapping <div class="wp-block-button nr-btn ...">. Since .nr-btn is applied to that
   OUTER div, both ended up rendering their own pill — invisible on solid buttons where
   both happened to be the same green, but an obvious "pill inside a pill" on every
   --secondary (bordered, transparent-background) button, where the inner link's own
   solid green core-default pill sat inside our outer bordered one. Reset the inner link
   to inherit the outer .nr-btn's look entirely rather than render its own. */
.nr-btn .wp-block-button__link {
  all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  gap: 8px; width: 100%; height: 100%; color: inherit; cursor: pointer; font: inherit;
}

/* --- card (core/Card) --------------------------------------------------- */
.nr-card {
  background: var(--surface-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: 32px; font-family: var(--font-body);
  transition: all var(--duration-base) var(--ease-out);
}
.nr-card--p0  { padding: 0; }
.nr-card--p24 { padding: 24px; }
.nr-card--p28 { padding: 28px; }
.nr-card--p40 { padding: 40px; }
.nr-card--lift:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.nr-card--accent-green  { border-top: 6px solid var(--nr-green-500); }
.nr-card--accent-blue   { border-top: 6px solid var(--nr-blue-500); }
.nr-card--accent-orange { border-top: 6px solid var(--nr-orange-500); }
.nr-card--accent-pink   { border-top: 6px solid var(--nr-pink-500); }
.nr-card--accent-purple { border-top: 6px solid var(--nr-purple-500); }
.nr-card--accent-red    { border-top: 6px solid var(--nr-red-500); }
.nr-card--featured { border: 3px solid var(--nr-green-500); position: relative; }
.nr-card__pop { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); }

/* --- tag / filter (core/Tag) ------------------------------------------- */
.nr-tag {
  display: inline-flex; align-items: center; padding: 8px 18px;
  border-radius: var(--radius-pill); border: 2px solid var(--border-soft);
  background: var(--surface-card); color: var(--text-body);
  font-family: var(--font-body); font-size: 15px; font-weight: 700;
  cursor: pointer; transition: all var(--duration-fast) var(--ease-out); white-space: nowrap;
}
.nr-tag:hover { background: #FDEEF5; }
.nr-tag.is-active { border-color: #EC5FA1; background: #EC5FA1; color: #fff; }

/* --- accordion (core/Accordion, as <details>) -------------------------- */
.nr-accordion { display: flex; flex-direction: column; gap: 12px; font-family: var(--font-body); }
.nr-acc { background: var(--surface-card); border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden; }
.nr-acc__sum {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 24px; cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 700; color: var(--text-heading);
}
.nr-acc__sum::-webkit-details-marker { display: none; }
.nr-acc__icon {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: var(--nr-green-50); color: var(--nr-green-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; line-height: 1;
  transition: all var(--duration-base) var(--ease-out);
}
.nr-acc[open] .nr-acc__icon { background: var(--nr-green-500); color: #fff; transform: rotate(45deg); }
.nr-acc__body { padding: 0 24px 20px; font-size: 16px; line-height: 1.6; color: var(--text-body); }

/* --- testimonial (content/Testimonial, compact) ------------------------ */
.nr-quote {
  margin: 0; background: var(--surface-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: 24px; font-family: var(--font-body); position: relative;
}
.nr-quote--green  { --q: #2FB457; }
.nr-quote--blue   { --q: #00AEEF; }
.nr-quote--orange { --q: #F7941D; }
.nr-quote--pink   { --q: #EC5FA1; }
.nr-quote--purple { --q: #92278F; }
.nr-quote--red    { --q: #EF3E36; }
.nr-quote__mark { font-family: var(--font-display); font-size: 56px; line-height: 1; color: var(--q, #2FB457); margin-bottom: 4px; }
.nr-quote blockquote { margin: 0 0 16px; font-size: 16px; line-height: 1.6; color: var(--text-body); }
.nr-quote figcaption { display: flex; align-items: center; gap: 12px; }
.nr-quote__avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none; background: var(--q, #2FB457); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
}
.nr-quote__author { display: block; color: var(--text-heading); font-size: 16px; font-weight: 700; }
.nr-quote__meta { font-size: 14px; color: var(--text-muted); }

/* --- stat badge (content/StatBadge) ------------------------------------ */
.nr-stat { text-align: center; font-family: var(--font-body); }
.nr-stat__value { font-family: var(--font-display); font-size: 48px; font-weight: 700; line-height: 1.1; color: #2FB457; }
.nr-stat__label { font-size: 16px; font-weight: 700; color: var(--text-heading); }
.nr-stat--green  .nr-stat__value { color: #2FB457; }
.nr-stat--orange .nr-stat__value { color: #F7941D; }
.nr-stat--blue   .nr-stat__value { color: #00AEEF; }
.nr-stat--pink   .nr-stat__value { color: #EC5FA1; }
.nr-stat--purple .nr-stat__value { color: #92278F; }
.nr-stat--red    .nr-stat__value { color: #EF3E36; }
.nr-stats-row { display: flex; justify-content: center; gap: 48px; margin-top: 48px; flex-wrap: wrap; }

/* --- "right" widget area (WP Review Slider Pro + carried-over legacy widgets) ---------- */
.nr-widget-area { margin-top: 40px; }

/* WP Review Slider Pro: fix the plugin's own broken line-clamp, 2026-09-19.
   The plugin prints its truncation rule as `#wprev-slider-1 .indrevlineclamp { -webkit-line-clamp: 3 }`,
   but the element it actually renders has id `wprev-slider-1_widget` — so the selector never
   matches and no review is ever truncated. The carousel runs with `animateHeight: false`, which
   means unslider measures the TALLEST slide once and pins the container to that height; with the
   clamp dead, the tallest review is ~900 characters, so every shorter review left a screen-high
   band of empty background under it (very obvious on mobile).
   Re-applying the clamp the plugin intended is the fix — it's scoped by our own wrapper class
   rather than by the plugin's id, so it survives the id changing or a second slider being added.
   Do not "simplify" this away as a duplicate of the plugin's inline <style>: that rule is inert. */
.nr-widget-area .indrevlineclamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Keep the cards a consistent, tidy height so the pinned container has little slack left to
   show, and let each slide's card fill whatever height unslider does settle on. */
.nr-widget-area .wprevpro li,
.nr-widget-area .wpproslider_t6_DIV_1a,
.nr-widget-area .indrevdiv { height: 100%; }
.nr-widget-area .indrevdiv { box-sizing: border-box; }
.nr-widget { font-family: var(--font-body); }
.nr-widget + .nr-widget { margin-top: 20px; }
.nr-widget__title { font-family: var(--font-display); font-size: 18px; margin: 0 0 10px; color: var(--text-heading); }

/* --- photo placeholder (shared/Photo) — replace with real <img> --------- */
.nr-photo {
  aspect-ratio: 4 / 3; background: var(--nr-blue-50); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--text-muted); text-align: center; padding: 20px; box-sizing: border-box;
}
.nr-photo--blob { border-radius: 58% 42% 55% 45% / 55% 48% 52% 45%; }
/* Belt-and-braces for the blob variant on a real photo: round the <img> itself too, not
   just the figure, in case a browser doesn't clip a complex organic radius reliably through
   overflow:hidden on the figure alone (e.g. combined with aspect-ratio). */
.nr-photo--blob.wp-block-image img { border-radius: inherit; }
.nr-photo span { font-size: 13px; font-family: var(--font-body); }
.nr-photo svg { color: var(--nr-ink-300); }
/* Real photo variant: a core/image block also carrying .nr-photo (real staff/site photos,
   2026-09-19+) — same frame, but crop-to-fill instead of the placeholder's centered icon/text.
   The aspect-ratio is set directly on the <img> (not just inherited from the .nr-photo figure)
   so every photo crops to the same 4:3 frame regardless of its native dimensions — a portrait
   phone photo and a landscape one both render identically sized, instead of the figure's
   height depending on the browser resolving a percentage height against an auto-height
   ancestor, which some layouts (e.g. a grid item whose height is otherwise content-driven)
   don't reliably give it. object-position keeps faces in shot for portrait-cropped headshots. */
.nr-photo.wp-block-image { overflow: hidden; padding: 0; display: block; aspect-ratio: 4 / 3; }
/* Portrait variant: for a genuinely tall source photo (e.g. the owner's photo of Sevjen
   reading with a child, 1206x1595) the default 4:3 landscape frame would throw away the
   top and bottom of the shot. 4:5 keeps it recognisably the same photo and sits well
   beside a column of text. */
.nr-photo--portrait.wp-block-image,
.nr-photo--portrait.wp-block-image img { aspect-ratio: 4 / 5; }

/* Team headshots (the photo at the top of a .nr-card--p0 people card) are square 200x200
   source files, or in one case a tall portrait. Cropping any of those into the default 4:3
   landscape frame cuts the top of the head and the chin off and leaves the face looking
   stretched wide — reported on Eileen's card, but true of all of them. A 1:1 frame suits a
   headshot, needs no crop at all for the square sources, and keeps every card identical. */
.nr-card--p0 .nr-photo.wp-block-image,
.nr-card--p0 .nr-photo.wp-block-image img { aspect-ratio: 1 / 1; }
.nr-photo.wp-block-image img {
  width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 20%;
  display: block; margin: 0;
}

/* --- checklist / contact detail rows ----------------------------------- */
.nr-checklist { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding: 0; }
.nr-checklist li { display: flex; gap: 10px; align-items: center; font-weight: 700; color: var(--text-heading); list-style: none; }
.nr-checklist .nr-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--nr-green-50); display: inline-flex; align-items: center; justify-content: center; flex: none; }
/* Native-block variant (a plain core/list can't carry a per-item SVG icon) — a
   CSS-drawn checkmark dot standing in for the .nr-dot + nr_icon('check') pairing. */
.nr-checklist--native li::before {
  content: "\2713"; width: 26px; height: 26px; border-radius: 50%; background: var(--nr-green-50);
  color: var(--nr-green-700); display: inline-flex; align-items: center; justify-content: center;
  flex: none; font-size: 14px; font-weight: 700;
}
.nr-contact-list { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; list-style: none; padding: 0; }
.nr-contact-list li { display: flex; gap: 12px; align-items: center; font-weight: 600; color: var(--text-heading); }
.nr-contact-list .nr-dot { width: 40px; height: 40px; border-radius: 50%; background: var(--nr-green-50); display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* --- day-rhythm timeline (Learning) ------------------------------------ */
.nr-timeline { display: flex; flex-direction: column; }
.nr-timeline__row { display: flex; gap: 18px; align-items: flex-start; }
.nr-timeline__col { display: flex; flex-direction: column; align-items: center; flex: none; }
.nr-timeline__time {
  font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--nr-green-700);
  background: var(--nr-green-50); border-radius: var(--radius-pill); padding: 4px 14px; white-space: nowrap;
}
.nr-timeline__line { width: 2px; height: 26px; background: var(--border-soft); }
.nr-timeline__what {
  margin: 6px 0 0; font-weight: 600; color: var(--text-heading);
  display: flex; align-items: center; gap: 10px;
}
.nr-timeline__icon { width: 26px; height: 26px; flex: none; }

/* Card icons (home value cards, EYFS area cards). Drawn as inline SVG in the page content
   rather than loaded from assets/img/illustrations/: the originals there are the design
   system's stock line-art — a certificate, a desktop monitor, a corporate portrait — which
   the owner rightly called out as reading like a business rather than a nursery. */
.nr-icon { display: block; margin-bottom: 12px; }
/* On the EYFS area cards the icon sits inline with the heading rather than above it —
   those cards are short, and a stacked icon pushed the text down far enough to break the
   even card heights across the row. */
.nr-icon--sm { display: inline-block; width: 30px; height: 30px; margin: 0 10px -6px 0; }
/* The Yenlio card uses the app's real logo (Media Library 1448) rather than a drawn icon —
   it is a third-party mark, so approximating it would be wrong. The source is a square JPG
   on white, so it gets a radius and a hairline to sit as a tile beside the drawn icons
   instead of a white square bleeding into the card. */
.nr-icon--logo {
  width: 58px; height: 58px; border-radius: 14px;
  border: 1px solid var(--border-soft); object-fit: contain; background: #fff;
}

/* --- embedded video (Setting page tour) --------------------------------- */
/* Left unconstrained, a core/embed fills the whole card edge-to-edge, which at container
   width renders a ~1000px-wide player — it dominates the page and reads as cheap rather
   than considered. Cap it, centre it, round the corners to match the card system, and pin
   16:9 so the iframe's own width/height attributes can't set the box. */
/* 2026-09-19 revision: capping only the embed left it floating in the middle of a
   full-width card, out of line with the heading above and the button below — the player
   still read as oversized. Cap the whole card instead and centre that, so heading, video
   and button share one left edge inside a compact, deliberate block. */
.nr-card:has(> .wp-block-embed) { max-width: 760px; margin-inline: auto; padding: 28px; }
.nr-card .wp-block-embed { max-width: 100%; margin-inline: auto; width: 100%; }
.nr-card .wp-block-embed__wrapper { border-radius: var(--radius-lg); overflow: hidden; line-height: 0; }
.nr-card .wp-block-embed iframe {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0;
}

/* --- Instagram feed (Gallery page, Smash Balloon) ----------------------- */
/* The feed renders edge-to-edge with square-cornered tiles butted together, which reads as
   a third-party widget bolted onto the page rather than part of the site. Contain it to the
   same width as every other section, give the tiles the theme's corner radius and real
   gutters, and restyle the plugin's own header/follow button in brand colours. */
#sb_instagram {
  max-width: var(--container-max); margin: 0 auto; padding: 0 32px !important; box-sizing: border-box;
}
#sb_instagram #sbi_images { gap: 16px; padding: 0 !important; }
/* 2026-09-19: the plugin butts its Load More / Follow row straight up against the last row
   of photos, and the feed itself straight up against the copy above it. Give both a proper
   breathing gap so the block reads as designed rather than crammed. */
/* margin-top stays small: on the Gallery page the intro sits in a .nr-section whose own
   48px bottom padding already separates it from the feed — 32px on top of that was a gap
   again. The bottom margin is doing real work though (nothing below the feed but the
   footer, and the feed has no section of its own). */
#sb_instagram { margin-top: 8px !important; margin-bottom: 48px !important; }
#sb_instagram #sbi_load { margin-top: 28px !important; padding-top: 0 !important; }
#sb_instagram #sbi_images .sbi_item { padding: 0 !important; }
#sb_instagram .sbi_photo,
#sb_instagram .sbi_photo_wrap,
#sb_instagram .sbi_imgLiquid_bgWrapper {
  border-radius: var(--radius-lg) !important; overflow: hidden;
}
/* 2026-09-19: the plugin's own feed header repeats the site logo as the account avatar, so
   the Gallery page showed the Nursery Room logo twice within 100px — once in the site header,
   once as the Instagram profile picture. Hidden, and the account's real bio line moved into
   the page itself as proper theme copy (see patterns/gallery.php), which also gives the page
   the heading it was missing entirely. */
#sb_instagram .sb_instagram_header,
#sb_instagram #sb_instagram_header { display: none !important; }
#sb_instagram .sbi_header_text { font-family: var(--font-body); }
#sb_instagram .sbi_header_img, #sb_instagram .sbi_header_img img { border-radius: 50%; }
#sb_instagram #sbi_load .sbi_load_btn,
#sb_instagram .sbi_follow_btn a {
  border-radius: var(--radius-pill) !important;
  background: var(--nr-green-500) !important; color: #fff !important;
  font-family: var(--font-body); font-weight: 700; padding: 10px 22px !important;
  box-shadow: none !important; border: 0 !important;
}
#sb_instagram #sbi_load .sbi_load_btn:hover,
#sb_instagram .sbi_follow_btn a:hover { background: var(--nr-green-700) !important; }

/* --- CTA banners -------------------------------------------------------- */
.nr-cta { border-radius: var(--radius-xl); padding: 56px 64px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.nr-cta--orange { background: var(--nr-orange-50); }
.nr-cta--green  { background: var(--nr-green-700); color: #fff; }
.nr-cta--green :is(h2, p) { color: #fff; }
.nr-cta--green p { color: rgba(255,255,255,0.9); }
.nr-cta p { margin: 0; font-size: var(--text-lead); }
.nr-cta > .nr-btn { flex: none; }

/* --- hero (Home, Variant C) -------------------------------------------- */
.nr-hero-photos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-top: 48px; }
.nr-hero-cta { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }

/* --- forms (Contact — content styled; wire submission to a form plugin) - */
.nr-field { display: block; font-family: var(--font-body); }
.nr-field > span.nr-label { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 700; color: var(--text-heading); }
.nr-field input, .nr-field textarea, .nr-field select {
  width: 100%; box-sizing: border-box; border-radius: var(--radius-md);
  border: 2px solid var(--border-soft); outline: none; background: var(--surface-card);
  font-family: var(--font-body); font-size: 16px; color: var(--text-heading);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.nr-field input, .nr-field select { height: 48px; padding: 0 18px; }
.nr-field textarea { min-height: 120px; padding: 14px 18px; resize: vertical; }
.nr-field input:focus, .nr-field textarea:focus, .nr-field select:focus { border-color: var(--focus-ring); }
.nr-field .nr-hint { display: block; margin-top: 6px; font-size: 13px; color: var(--text-muted); }
.nr-field--select { position: relative; }
.nr-field--select select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.nr-field--select .nr-chevron { position: absolute; right: 16px; bottom: 15px; pointer-events: none; color: var(--text-muted); }
.nr-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.nr-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--font-body); font-size: 16px; color: var(--text-body); }
.nr-check input { width: 22px; height: 22px; flex: none; accent-color: var(--nr-green-500); }

/* --- Contact Form 7's own markup, styled to match (patterns/contact.php embeds the real,
   working form via [contact-form-7] rather than a mock — see its file header). CF7 wraps
   each field's input in a .wpcf7-form-control-wrap span (inside our own .nr-field label, so
   the input/select/textarea rules above already apply); these rules cover what CF7 adds on
   top: validation tips, the checkbox's own internal label, and the overall response banner. */
.nr-check .wpcf7-list-item { margin: 0; }
.nr-check .wpcf7-list-item label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.nr-check input[type="checkbox"] { width: 22px; height: 22px; flex: none; accent-color: var(--nr-green-500); }
.wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: 13px; color: var(--nr-red-500); font-family: var(--font-body); }
.wpcf7-form-control.wpcf7-not-valid { border-color: var(--nr-red-500) !important; }
.wpcf7-response-output {
  margin: 16px 0 0; padding: 14px 18px; border-radius: var(--radius-md); font-family: var(--font-body);
  font-size: 15px; border: 2px solid var(--border-soft);
}
.wpcf7-form.sent .wpcf7-response-output { border-color: var(--nr-green-500); color: var(--nr-green-700); background: var(--nr-green-50); }
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output { border-color: var(--nr-red-500); color: var(--nr-red-500); }
.wpcf7-spinner { margin-left: 10px; }

/* Submit button, 2026-09-19: nothing in this stylesheet had ever targeted .wpcf7-submit, so
   both real forms (enquiry + careers) shipped a raw grey browser button underneath an
   otherwise fully branded card. Matches .nr-btn--green so the forms end the way every other
   call to action on the site does. */
.wpcf7-submit {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 28px; margin-top: 4px;
  border: 2px solid transparent; border-radius: var(--radius-pill);
  background: var(--nr-green-500); color: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: 17px;
  cursor: pointer; transition: all var(--duration-fast) var(--ease-out);
}
.wpcf7-submit:hover { background: var(--nr-green-700); }
.wpcf7-submit:active { transform: scale(0.98); }
.wpcf7-submit:disabled { opacity: 0.6; cursor: default; }

/* File input (the careers form's CV upload): the shared .nr-field rule gives inputs a fixed
   48px height and 0 vertical padding, which squashes a native file control — its button sits
   flush against the field border and the filename text is clipped. Give it room to breathe
   and dress the browser's own button so it reads as part of the form rather than an OS
   control dropped into it. */
.nr-field input[type="file"] {
  height: auto; min-height: 48px; padding: 9px 12px;
  display: flex; align-items: center; gap: 12px;
  font-size: 15px; color: var(--text-muted); cursor: pointer;
}
.nr-field input[type="file"]::file-selector-button {
  border: 2px solid var(--border-soft); border-radius: var(--radius-pill);
  background: var(--nr-green-50); color: var(--nr-green-700);
  font-family: var(--font-body); font-weight: 700; font-size: 14px;
  padding: 7px 16px; margin-right: 4px; cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.nr-field input[type="file"]::file-selector-button:hover {
  background: var(--nr-green-500); border-color: var(--nr-green-500); color: #fff;
}
.wpcf7 label { margin: 0; }
.wpcf7 br { display: none; } /* CF7's default layout uses <br> between fields; our own grid/gap handles spacing */
/* CF7 auto-wraps loose lines in <p> tags (its own wpautop-style formatting) — confirmed live
   2026-09-19: it wrapped BOTH labels of a .nr-form-grid row in one shared <p>, which would
   otherwise break the grid (it needs the two <label> elements as direct children, not one
   <p> wrapping both). display:contents makes that <p> invisible to layout while keeping its
   children as real grid/flex items, whatever CF7's exact wrapping turns out to be. */
.nr-form-grid > p, .nr-check > p, .wpcf7-form > p { display: contents; }
.wpcf7 p { margin: 0; }

/* --- site header (shared/SiteHeader) -------------------------------------
   Rebuilt 2026-09-18 on native blocks (Group/Image/Navigation/Buttons) so
   the header is editable from the Site Editor — see decisions-log. Rules
   below use a compound selector (".wp-block-x.nr-y") wherever a core block
   ships its own base layout CSS (columns, buttons), so our layout wins
   regardless of stylesheet load order, without needing !important. */
.nr-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 251, 243, 0.92); backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--border-soft);
}

/* THE reason the mobile menu kept "going blank", found 2026-09-19 after two wrong fixes.
   `backdrop-filter` (like `transform`, `filter` and `perspective`) makes an element a
   CONTAINING BLOCK for any `position: fixed` descendant. The nav overlay lives inside this
   header, so its `position: fixed; inset: 0` was never resolving against the viewport — it
   resolved against `.nr-header`, an 84px-tall bar. The full-screen menu was therefore being
   laid out and clipped inside that bar: a strip across the top of the screen with the page
   still visible below it, which is exactly what the owner's screenshots showed. No amount of
   z-index, background or specificity work could have fixed it, because the box itself was
   the wrong size — the two earlier attempts were treating symptoms.
   `has-modal-open` is put on <html> by nav.js while the overlay is up, so dropping the
   backdrop-filter for exactly that window restores viewport-relative positioning without
   losing the frosted header the rest of the time. The z-index bump goes with it: the sticky
   header's own stacking context would otherwise cap the overlay at 50. */
html.has-modal-open .nr-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 100000;
}
.nr-header__inner { display: flex; align-items: center; gap: 20px; height: 84px; }
.nr-header__logo.wp-block-image { display: flex; flex: none; margin: 0; }
.nr-header__logo img { height: 54px; width: auto; }
/* core/navigation's own markup: nav > .wp-block-navigation__container (ul) > li.wp-block-navigation-item > a.wp-block-navigation-item__content */
.nr-nav.wp-block-navigation { margin-left: auto; --wp--style--block-gap: 2px; min-height: 0; }
/* Bug fix, 2026-09-19: the nav kept wrapping "Contact" onto a second line even on a wide
   monitor. The cause is NOT the viewport — `.nr-container` caps at --container-max
   (1160px), leaving ~1096px of usable header width at ANY screen size, while logo + 8 nav
   items + the CTA button needed ~1114px. That's why the earlier viewport media query
   couldn't fix it: above 1160px the layout is identical no matter how wide the screen.
   Tightened per-item padding and font-size to buy back ~95px so the row genuinely fits,
   and set nowrap so a future extra item gets tight rather than silently breaking the
   header onto two lines again. */
.nr-nav .wp-block-navigation__container { flex-wrap: nowrap; }
.nr-nav .wp-block-navigation-item__content {
  padding: 10px 10px; border-radius: var(--radius-pill); text-decoration: none;
  font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--text-body);
  white-space: nowrap;
}
.nr-nav .wp-block-navigation-item__content:hover { background: var(--nr-green-50); }
.nr-nav .wp-block-navigation-item__content.is-active { color: var(--nr-green-700); background: var(--nr-green-50); }
.nr-header__cta.wp-block-buttons { flex: none; margin: 0; }

/* Mobile menu toggle + overlay, 2026-09-19: this is WordPress core's own real,
   functional navigation overlay (Interactivity API — server-rendered with the
   correct aria/data-wp-* wiring, no custom JS needed), but it ships with
   effectively no visual styling of its own — just a bare 2-line icon sitting in
   open space, no button chrome, no tap-target sizing. On a branded site that
   reads as broken even though it works. Give it real weight and match the
   overlay panel to the design system instead of WordPress's unstyled default. */
.wp-block-navigation__responsive-container-open {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--border-soft);
  background: #fff; color: var(--text-heading); cursor: pointer; padding: 0;
}
.wp-block-navigation__responsive-container-open:hover { background: var(--nr-green-50); border-color: var(--nr-green-500); }

/* Bug fix, 2026-09-19: every rule below MUST be scoped under `.is-menu-open` (the mobile
   overlay's actual open state). WordPress renders the SAME single <ul
   class="wp-block-navigation__container"> nested inside
   `.wp-block-navigation__responsive-container-content` for BOTH desktop and mobile — there
   is no separate desktop-only list. An earlier version of this rule block styled that list
   unconditionally (no `.is-menu-open` in the selector), which forced `flex-direction:
   column` at ALL viewport widths, including full desktop — nav items rendered as a
   vertical stack overlapping into the footer, a real live regression the owner caught
   immediately after uploading. Every selector here now requires `.is-menu-open` so none of
   it touches the normal, WordPress-default horizontal desktop nav. */
/* Second bug fix, 2026-09-19 — "when I click on the menu it goes blank".
   The rules below were originally written as `.wp-block-navigation__responsive-container
   .is-menu-open ...` — TWO classes, exactly the same specificity as WordPress core's own
   navigation stylesheet, which declares:
       .wp-block-navigation__responsive-container.is-menu-open { background-color: inherit; }
   Core's copy loads after this file, so at equal specificity core won the background and the
   overlay inherited the header's near-white background. Our white link colour below is three
   classes deep, so IT kept winning. White text on a white overlay = a blank screen, which is
   precisely what opening the menu looked like.
   Prefixing with `.nr-header` adds a class to every selector here, so the theme wins the
   background without `!important` and without touching core's other defaults. Do not
   "simplify" these selectors back to two classes — that is the bug. */
.nr-header .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--nr-green-700); color: #fff;
  /* Explicit width/height as well as inset, and 100dvh rather than 100vh so the panel is
     the height of the VISIBLE viewport on mobile — 100vh ignores the browser's own toolbars
     on iOS and Android, which would push the last nav item off-screen. */
  position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto;
}
.nr-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  width: 100%; max-width: 420px; padding: 32px;
}
.nr-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  position: absolute; top: 24px; right: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.4);
  background: transparent; color: #fff; cursor: pointer; padding: 0;
}
.nr-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover {
  background: rgba(255,255,255,0.15);
}
.nr-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  display: flex; flex-direction: column; gap: 4px; list-style: none; margin: 0; padding: 0;
}
.nr-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: block; padding: 16px 20px; border-radius: var(--radius-md); text-decoration: none;
  font-family: var(--font-body); font-weight: 700; font-size: 22px; color: #fff;
}
.nr-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.nr-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.is-active {
  background: rgba(255,255,255,0.15);
}
/* The FAQ chat launcher is fixed at z-index 2147483000 — far above any sane value — so it
   would float over the open menu. nav.js puts `has-modal-open` on <html> while the overlay
   is up (the same class core uses to lock background scrolling), so hide it for that window
   rather than fight the z-index. */
html.has-modal-open .nrfaq-root { display: none; }
html.has-modal-open { overflow: hidden; }

/* --- site footer (shared/SiteFooter) ------------------------------------ */
/* 2026-09-19: the footer used to sit 72px below the last section — on top of that section's
   own 48px bottom padding, that read as a ~120px dead band of cream above the green. The
   section padding already provides the separation, so the extra margin is removed and the
   footer's own block is tightened (it was 56px top / 32px bottom + a 40px rule above the
   legal bar, which made the green band taller than some of the content above it). */
.nr-footer { background: var(--nr-green-700); color: #fff; margin-top: 0; border-radius: 48px 48px 0 0; }
/* The descendant selector here is load-bearing, not decoration. This element is
   `class="nr-container nr-footer__inner"`, and the mobile rule `.nr-container { padding: 0 20px }`
   further down the file has the SAME specificity (one class) but comes later — so on phones it
   won the cascade and replaced this padding wholesale, including the top. The footer's top
   padding collapsed to zero and the logo — a white rounded box — sat flush on the green band's
   top edge, breaking straight through the rounded corner. `.nr-footer >` outranks it, so the
   footer keeps its own padding at every width. */
.nr-footer > .nr-footer__inner { padding: 40px 32px 20px; }
.wp-block-columns.nr-footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.nr-footer__logo.wp-block-image { background: #fff; border-radius: 14px; padding: 8px 14px; display: inline-flex; margin: 0; }
.nr-footer__logo img { height: 44px; width: auto; }
.nr-footer p, .nr-footer a, .nr-footer span, .nr-footer strong, .nr-footer h4 { font-family: var(--font-body); }
.nr-footer__blurb { color: rgba(255,255,255,0.85); margin-top: 14px; font-size: 15px; line-height: 1.7; }
.wp-block-buttons.nr-footer__social { gap: 10px; margin-top: 8px; }
.nr-footer__social .wp-block-button__link { border-radius: var(--radius-pill); border-color: rgba(255,255,255,0.4); color: #fff; padding: 6px 16px; font-size: 14px; }
.nr-footer__col h4 { margin: 0 0 8px; font-family: var(--font-display); font-size: 18px; }
.nr-footer__col { font-size: 15px; line-height: 1.7; }
.nr-footer__col p { margin: 0; }
.nr-footer__col a { color: rgba(255,255,255,0.85); text-decoration: none; }
.nr-footer__col a:hover { color: #fff; }
.nr-footer__bar.wp-block-group { border-top: 1px solid rgba(255,255,255,0.2); margin-top: 24px; padding-top: 16px; font-size: 13px; color: rgba(255,255,255,0.7); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.nr-footer__bar p { margin: 0; }
.nr-footer__legal a { color: rgba(255,255,255,0.7); text-decoration: underline; text-underline-offset: 2px; }
.nr-footer__legal a:hover { color: #fff; }

/* --- post-content fallback (templates/page.html) ------------------------
   Used for any page WordPress can't match to one of our custom templates
   (wrong/legacy slug, no template assigned yet, or a page outside the
   6 design-system screens). Keeps un-migrated content on-brand — proper
   type, spacing, image/list/quote treatment — instead of looking bare. */
.nr-post-content > .wp-block-post-title {
  font-family: var(--font-display); font-size: var(--text-h1); line-height: var(--leading-display);
  color: var(--text-heading); margin: 0 0 28px;
}
.nr-post-content .wp-block-post-content > * + * { margin-top: 20px; }
.nr-post-content .wp-block-post-content h1,
.nr-post-content .wp-block-post-content h2,
.nr-post-content .wp-block-post-content h3,
.nr-post-content .wp-block-post-content h4 {
  font-family: var(--font-display); font-weight: 700; line-height: 1.2; color: var(--text-heading);
  margin: 1.4em 0 0.5em;
}
.nr-post-content .wp-block-post-content h2 { font-size: var(--text-h2); }
.nr-post-content .wp-block-post-content h3 { font-size: var(--text-h3); }
.nr-post-content .wp-block-post-content p { font-size: 17px; line-height: 1.7; color: var(--text-body); }
.nr-post-content .wp-block-post-content ul,
.nr-post-content .wp-block-post-content ol { padding-left: 1.4em; line-height: 1.7; color: var(--text-body); }
.nr-post-content .wp-block-post-content li + li { margin-top: 6px; }
.nr-post-content .wp-block-post-content a { color: var(--nr-green-700); font-weight: 700; }
.nr-post-content .wp-block-post-content img { border-radius: var(--radius-lg); }
.nr-post-content .wp-block-post-content blockquote {
  margin: 0; padding: 20px 24px; border-left: 4px solid var(--nr-green-500);
  background: var(--surface-card); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-lead); color: var(--text-heading);
}
.nr-post-content .wp-block-post-content figcaption { font-size: 14px; color: var(--text-muted); margin-top: 8px; }

/* --- responsive: mobile-first collapse --------------------------------- */
@media (max-width: 980px) {
  .wp-block-columns.nr-footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .nr-container { padding: 0 20px; }
  /* 2026-09-19: this was 56px — LARGER than the 48px desktop value, so every gap the
     spacing pass tightened came back bigger on a phone, which is where they were most
     complained about. Mobile wants less air between sections, not more. */
  .nr-section { padding: 40px 0; }
  .nr-footer > .nr-footer__inner { padding: 36px 20px 20px; }
  .nr-cols-2, .nr-cols-3, .nr-cols-4,
  .nr-hero-photos { grid-template-columns: 1fr !important; }
  .nr-form-grid { grid-template-columns: 1fr; }
  .nr-cta { flex-direction: column; align-items: flex-start; padding: 40px 28px; }
  .nr-stats-row { gap: 28px; }
  .nr-header__cta.wp-block-buttons { display: none; }
  .wp-block-columns.nr-footer__cols { grid-template-columns: 1fr; gap: 28px; }
}

/* Switch to the styled overlay toggle before the header runs out of room. WordPress's own
   default breakpoint for this is far narrower (~600px) and takes no account of how many
   items the menu actually holds, so with 8 items the row broke long before then. Paired
   with the tightened nav sizing above, the full row fits comfortably down to ~1100px. */
/* Compact header CTA, injected by nav.js — shown only where the full-width
   "Enquire about places" button is hidden, so the two never appear together. */
.nr-header__mobilecta { display: none; }
@media (max-width: 1100px) {
  .nr-header__mobilecta {
    display: inline-flex; order: 3; margin-left: auto;
    height: 40px; padding: 0 18px; font-size: 15px; flex: none;
  }
  /* Menu button first, logo beside it, CTA pushed to the right — per the owner's request
     for the menu to sit in the top-left corner. `order` does this without touching
     parts/header.html, so the Site Editor markup stays in its natural reading order for
     desktop and for screen readers. */
  .nr-header .nr-nav.wp-block-navigation { order: 1; margin-left: 0; margin-right: 2px; }
  .nr-header__logo.wp-block-image { order: 2; }
}
/* Below ~380px the logo, pill and menu button stop fitting on one row; the pill is the
   thing to drop, since the menu carries the same call to action one tap away. */
@media (max-width: 379px) {
  .nr-header__mobilecta { display: none; }
}

@media (max-width: 1100px) {
  /* Core's container is hidden OUTRIGHT below the breakpoint now — including when it has
     `.is-menu-open`. Its overlay is no longer used at all (nav.js builds our own and appends
     it to <body>), and leaving core's able to open would show a second, unstyled menu behind
     ours. The `:not(.is-menu-open)` qualifier this rule used to carry is deliberately gone. */
  .nr-header .wp-block-navigation__responsive-container { display: none !important; }
  .nr-header .wp-block-navigation__responsive-container-open { display: inline-flex !important; }
}
@media (min-width: 1101px) {
  .nr-header .wp-block-navigation__responsive-container-open { display: none !important; }
}

/* --- heading colour (2026-09-19) ---------------------------------------
   Sevjen asked for headings to be colourful rather than black. `theme.json` sets
   headings to `ink` (#2D2A26) via `:root :where(h1, h2, …)`, which carries ZERO
   specificity, so a plain element selector here overrides it cleanly — no
   `!important`, and no need to fight the block editor's generated stylesheet.

   Green-700 (#00913F) is the deepest colour in the logo-sampled palette. The brighter
   logo colours (blue #00AEEF, orange #F7941D, pink #EC5FA1) were considered and
   deliberately NOT used for headings: measured against the cream page background they
   land around 2:1–2.3:1 contrast, which fails WCAG even for large text. Green-700 clears
   3:1, so it is safe on h1–h3 (all comfortably in the "large text" band).

   h4 and smaller stay ink on purpose: card titles run ~18px, where 3:1 is no longer the
   applicable threshold — they need 4.5:1, and green-700 does not reach it on cream. */
h1, h2, h3,
.nr-post-content > .wp-block-post-title,
.nr-post-content .wp-block-post-content :is(h1, h2, h3) {
  color: var(--nr-green-700);
}

/* Headings that sit ON a colour must not follow the rule above. The footer is a solid
   green band, so a green heading there would be invisible. */
.nr-footer :is(h1, h2, h3, h4, h5, h6),
.nr-cta--green :is(h1, h2, h3),
.wp-block-navigation__responsive-container.is-menu-open :is(h1, h2, h3) {
  color: #fff;
}

/* --- mobile menu (ours, not core/navigation's) --------------------------
   Appended to <body> by assets/js/nav.js, so `position: fixed` resolves against the
   viewport — not against `.nr-header`, whose `backdrop-filter` makes it a containing block
   for fixed descendants and was the original reason core's overlay rendered as an 84px
   strip. Nothing in WordPress core or any plugin styles these class names, so this panel
   cannot lose a cascade fight the way the core overlay repeatedly did.

   Layout follows the reference the owner supplied (Busy Bees): a light panel, call to
   action first, then large colour-coded links. The colours come from the logo's own
   lettering — this brand is multicoloured and a white-on-green menu was working against
   that. nav.js assigns each item its colour as `--nr-item-color`. */

/* The scrim: dims the page, catches taps outside the panel, and fades with it. */
.nr-mobilemenu {
  position: fixed; inset: 0;
  /* Above the FAQ chat launcher, which pins itself at 2147483000. */
  z-index: 2147483001;
  background: rgba(45, 42, 38, 0.45);
  opacity: 0;
  transition: opacity 260ms ease;
}
.nr-mobilemenu.is-open { opacity: 1; }
/* `.nr-mobilemenu` is only positioned, not displayed — but `[hidden]` still has to win over
   anything that sets display, so it is stated explicitly at higher specificity. */
.nr-mobilemenu[hidden] { display: none; }

/* The panel itself, sliding in from the left edge. */
.nr-mobilemenu__panel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: min(88vw, 400px);
  background: var(--surface-page); color: var(--text-heading);
  display: flex; flex-direction: column;
  padding: 16px 24px calc(20px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box; overflow-y: auto;
  box-shadow: 0 0 40px rgba(45, 42, 38, 0.25);
  transform: translateX(-100%);
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nr-mobilemenu.is-open .nr-mobilemenu__panel { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .nr-mobilemenu,
  .nr-mobilemenu__panel { transition: none; }
}

.nr-mobilemenu__top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex: none; min-height: 52px;
}
.nr-mobilemenu__logo { height: 42px; width: auto; display: block; }

.nr-mobilemenu__close {
  flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--border-soft); background: transparent; color: var(--text-heading);
  font-size: 30px; line-height: 1; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}

.nr-mobilemenu__list {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
}
.nr-mobilemenu__list a {
  /* A dot in each item's own colour — small, but it turns a plain list of words into
     something that belongs on a nursery site rather than an office intranet. */
  display: flex; align-items: center; gap: 12px; padding: 11px 0;
  color: var(--nr-item-color, var(--text-heading));
  text-decoration: none;
  font-family: var(--font-display); font-weight: 700;
  /* Deliberately restrained — the colour already does the work of distinguishing each item,
     so oversized type on top of it read as shouty. 21px keeps the row height at ~48px with
     the padding above, which is comfortably above the 44px minimum for a touch target. */
  font-size: clamp(19px, 5.2vw, 21px); line-height: 1.3;
}
/* The current page keeps its colour and gains an underline — a colour change alone would be
   invisible here, since every item is already a different colour. */
.nr-mobilemenu__list a::before {
  content: ""; flex: none;
  width: 10px; height: 10px; border-radius: 50%;
  background: currentColor;
}
.nr-mobilemenu__list a.is-active {
  text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px;
}
.nr-mobilemenu__list a.is-active::before { box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent); }
/* `(hover: hover)` matters here rather than being pedantry: on a touchscreen the :hover
   state STICKS to whatever was last tapped, so an unqualified :hover rule left one or two
   links wearing a highlight for no reason after the menu opened. */
@media (hover: hover) {
  .nr-mobilemenu__list a:hover { opacity: 0.72; }
  .nr-mobilemenu__close:hover { background: var(--surface-sunken); }
}

/* `margin-top: auto` pins the contact details to the bottom on tall screens without
   stretching the link list to meet them. */
.nr-mobilemenu__meta {
  margin-top: auto; padding-top: 24px; flex: none;
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-body); font-size: 15px; font-weight: 700;
}
.nr-mobilemenu__meta a { color: var(--nr-green-700); text-decoration: none; }

/* Lock the page behind the menu, and get the chat bubble out of the way. */
html.nr-menu-open { overflow: hidden; }
html.nr-menu-open .nrfaq-root { display: none; }