/* ==========================================================================
   Bright Rainbow Child Care — site stylesheet
   --------------------------------------------------------------------------
   Every visual decision lives here. Blocks only carry layout + a `brc-` class.
   Nothing in this file depends on the Blocksy palette being configured
   correctly — the --brc-* tokens below are the single source of truth.

   1.  Tokens
   2.  Base + typography
   3.  Layout helpers
   4.  Buttons
   5.  Signature: rainbow arc + waves
   6.  Components
   7.  Contact + WPForms
   8.  Footer
   9.  Editor / theme integration
   10. Responsive
   11. Reduced motion
   ========================================================================== */


/* 1. TOKENS ================================================================ */

:root {
  /* Rainbow — mirrors Blocksy global palette slots 1–6 */
  --brc-red:     #FF6B6B;
  --brc-orange:  #FF9F45;
  --brc-yellow:  #FFD23F;
  --brc-green:   #5FBF76;
  --brc-blue:    #4D96FF;
  --brc-violet:  #9B72CF;

  /* Darker text-safe pairs — the rainbow is too light for body-size type */
  --brc-red-ink:    #C0392B;
  --brc-orange-ink: #C96F14;
  --brc-yellow-ink: #B8901A;
  --brc-green-ink:  #2F8A4A;
  --brc-blue-ink:   #2F6FD0;
  --brc-violet-ink: #7A52AD;

  /* Neutrals + support */
  --brc-teal:     #2E9E8F;
  --brc-cream:    #FFFBF3;
  --brc-cream-2:  #FFF3E2;
  --brc-ink:      #2C2A4A;
  --brc-ink-soft: #5B5878;
  --brc-white:    #FFFFFF;
  --brc-line:     #EDE7DC;

  /* Type */
  --brc-font-display: 'Baloo 2', 'Trebuchet MS', system-ui, cursive;
  --brc-font-body:    'Nunito', system-ui, -apple-system, sans-serif;

  /* Elevation */
  --brc-shadow:    0 18px 40px -20px rgba(44, 42, 74, .28);
  --brc-shadow-lg: 0 30px 70px -30px rgba(44, 42, 74, .40);

  /* Geometry */
  --brc-radius:    22px;
  --brc-radius-lg: 32px;
  --brc-wrap:      1120px;

  /* Default card accent — every --* modifier overrides these two */
  --c:      var(--brc-blue);
  --c-ink:  var(--brc-blue-ink);
}

/* Accent modifiers. Set the accent once; components read --c / --c-ink.
   Usable on .brc-pillar, .brc-subject, .brc-ic, .brc-tag — anything. */
.brc-red    { --c: var(--brc-red);    --c-ink: var(--brc-red-ink); }
.brc-orange { --c: var(--brc-orange); --c-ink: var(--brc-orange-ink); }
.brc-yellow { --c: var(--brc-yellow); --c-ink: var(--brc-yellow-ink); }
.brc-green  { --c: var(--brc-green);  --c-ink: var(--brc-green-ink); }
.brc-blue   { --c: var(--brc-blue);   --c-ink: var(--brc-blue-ink); }
.brc-violet { --c: var(--brc-violet); --c-ink: var(--brc-violet-ink); }


/* 2. BASE + TYPOGRAPHY ===================================================== */

.brc-page {
  font-family: var(--brc-font-body);
  color: var(--brc-ink);
  background: var(--brc-cream);
  line-height: 1.6;
  overflow-x: clip;
}

.brc-page h1,
.brc-page h2,
.brc-page h3,
.brc-page h4 {
  font-family: var(--brc-font-display);
  line-height: 1.1;
  letter-spacing: -.01em;
  font-weight: 800;
}

.brc-page img { max-width: 100%; height: auto; display: block; }

/* Eyebrow — the small caps label above every section heading. */
.brc-eyebrow {
  font-family: var(--brc-font-display);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .78rem;
  font-weight: 600;
  color: var(--c, var(--brc-ink-soft));
  margin: 0 0 .2rem;
}

/* Script — the italic aside under a heading. */
.brc-script {
  font-family: var(--brc-font-body);
  font-style: italic;
  font-weight: 400;
  color: var(--brc-ink-soft);
  font-size: 1.15rem;
}

.brc-lead {
  max-width: 640px;
  margin-inline: auto;
  color: var(--brc-ink-soft);
  font-size: 1.12rem;
  font-weight: 600;
}


/* 3. LAYOUT HELPERS ======================================================== */

.brc-wrap {
  width: min(var(--brc-wrap), 92%);
  margin-inline: auto;
}

/* Section background surfaces. */
.brc-surface-cream   { background: var(--brc-cream); }
.brc-surface-cream-2 { background: var(--brc-cream-2); }
.brc-surface-teal    { background: var(--brc-teal); color: #fff; }
.brc-surface-teal :is(h1, h2, h3, h4) { color: #fff; }

/* Section rhythm. Padding is owned here, never by the block editor, so
   sections can't drift apart from each other page to page. */
.brc-section    { padding-block: 4rem; }
.brc-section--sm { padding-block: 2.5rem; }
.brc-section--lg { padding-block: 5.5rem; }
/* A section that sits directly under a wave has no top padding — the wave
   already supplies the breathing room. */
.brc-section--capped { padding-top: 1rem; }

.brc-center { text-align: center; }

.brc-section-head {
  max-width: 680px;
  margin: 0 auto 3rem;
  text-align: center;
}
.brc-section-head h2 {
  font-size: clamp(1.9rem, 4.5vw, 2.9rem);
  margin: .3rem 0;
}
.brc-section-head p { color: var(--brc-ink-soft); font-weight: 600; }
.brc-surface-teal .brc-section-head p { color: rgba(255, 255, 255, .85); }


/* 4. BUTTONS =============================================================== */

/* Two shapes have to be served here:
     1. a standalone link ..... <a class="brc-btn brc-btn--ghost">
     2. a core button block ... <div class="wp-block-button brc-btn"><a class="wp-block-button__link">
   In case 2 WordPress puts our class on the WRAPPER, not the link. So the bare
   .brc-btn must exclude .wp-block-button — otherwise the wrapper gets painted
   as a button and the link inside is painted as a second one on top of it,
   which shows up as a doubled outline. */

.brc-btn:not(.wp-block-button),
.wp-block-button.brc-btn > .wp-block-button__link {
  display: inline-block;
  font-family: var(--brc-font-display);
  font-weight: 700;
  font-size: 1rem;
  padding: .7rem 1.5rem;
  border-radius: 999px;
  background: var(--brc-ink);
  color: var(--brc-white);
  border: none;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--brc-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.brc-btn:not(.wp-block-button):hover,
.wp-block-button.brc-btn > .wp-block-button__link:hover {
  transform: translateY(-2px);
  color: var(--brc-white);
  box-shadow: var(--brc-shadow-lg);
}

/* The rainbow button — the primary action on any page. */
.brc-btn--rainbow:not(.wp-block-button),
.wp-block-button.brc-btn--rainbow > .wp-block-button__link {
  background: linear-gradient(90deg,
    var(--brc-red), var(--brc-orange), var(--brc-yellow),
    var(--brc-green), var(--brc-blue), var(--brc-violet));
  color: #fff;
}

.brc-btn--ghost:not(.wp-block-button),
.wp-block-button.brc-btn--ghost > .wp-block-button__link {
  background: var(--brc-white);
  color: var(--brc-ink);
  border: 2px solid var(--brc-ink);
}
.brc-btn--ghost:not(.wp-block-button):hover,
.wp-block-button.brc-btn--ghost > .wp-block-button__link:hover {
  color: var(--brc-ink);
}

/* For use on the teal / gradient bands. */
.brc-btn--white:not(.wp-block-button),
.wp-block-button.brc-btn--white > .wp-block-button__link {
  background: var(--brc-white);
  color: var(--brc-ink);
}
.brc-btn--white:not(.wp-block-button):hover,
.wp-block-button.brc-btn--white > .wp-block-button__link:hover {
  color: var(--brc-ink);
}

/* The wrapper is a container, never a surface. Belt and braces: if a stray
   class does land on it, it still can't paint itself. */
.wp-block-button.brc-btn,
.wp-block-button.brc-btn--rainbow,
.wp-block-button.brc-btn--ghost,
.wp-block-button.brc-btn--white {
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
}


/* 5. SIGNATURE: RAINBOW ARC + WAVES ======================================== */

.brc-hero {
  position: relative;
  padding: 4.5rem 0 7rem;
  text-align: center;
  overflow: hidden;
}
.brc-hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  margin: .4rem 0 .6rem;
}

/* Ambient clouds. Purely decorative, hidden from AT. */
.brc-clouds span {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  opacity: .7;
  filter: blur(2px);
  pointer-events: none;
}

/* The arc: six concentric strokes drawn on load, red → violet. */
.brc-arc-stage {
  position: relative;
  width: min(560px, 90%);
  margin: 0 auto 1.5rem;
  aspect-ratio: 2 / 1.15;
}
.brc-arc-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.brc-arc path {
  fill: none;
  stroke-linecap: round;
  stroke-width: 16;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: brc-draw 2.2s ease forwards;
}
.brc-arc path:nth-child(1) { stroke: var(--brc-red);    animation-delay: .05s; }
.brc-arc path:nth-child(2) { stroke: var(--brc-orange); animation-delay: .18s; }
.brc-arc path:nth-child(3) { stroke: var(--brc-yellow); animation-delay: .31s; }
.brc-arc path:nth-child(4) { stroke: var(--brc-green);  animation-delay: .44s; }
.brc-arc path:nth-child(5) { stroke: var(--brc-blue);   animation-delay: .57s; }
.brc-arc path:nth-child(6) { stroke: var(--brc-violet); animation-delay: .70s; }
@keyframes brc-draw { to { stroke-dashoffset: 0; } }

.brc-sun {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #FFE38A, var(--brc-yellow));
  box-shadow: 0 0 40px 8px rgba(255, 210, 63, .5);
  animation: brc-pulse 4s ease-in-out infinite;
}
@keyframes brc-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.08); }
}

/* Address chip under the hero headline. */
.brc-addr {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #fff;
  border: 1px solid rgba(44, 42, 74, .08);
  padding: .45rem 1.1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  color: var(--brc-ink-soft);
  box-shadow: var(--brc-shadow);
  text-decoration: none;
}
.brc-addr svg { width: 16px; height: 16px; flex: none; }
.brc-addr-group {
  display: flex;
  gap: .6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}

/* Waves: the transition between every two surfaces.
   A wave needs BOTH colours, not one. The SVG path paints half the box; the
   other half is the div's own background. Leave the backdrop unset and it
   falls through to the page background, which only looks right by luck.
   So: --fill-* is the path, --bg-* is the backdrop. Always set both.
     hero(cream) -> about(cream-2):  .brc-wave--fill-cream-2 .brc-wave--bg-cream
   With --flip the path paints the TOP, so fill is the section above. The
   names describe paint, not position, so they stay true either way. */
.brc-wave {
  display: block;
  width: 100%;
  height: auto;
  margin-top: -1px;
  line-height: 0;
}
.brc-wave svg { display: block; width: 100%; height: auto; }

.brc-wave--fill-cream   path { fill: var(--brc-cream); }
.brc-wave--fill-cream-2 path { fill: var(--brc-cream-2); }
.brc-wave--fill-teal    path { fill: var(--brc-teal); }
.brc-wave--fill-white   path { fill: var(--brc-white); }

.brc-wave--bg-cream   { background: var(--brc-cream); }
.brc-wave--bg-cream-2 { background: var(--brc-cream-2); }
.brc-wave--bg-teal    { background: var(--brc-teal); }
.brc-wave--bg-white   { background: var(--brc-white); }

.brc-wave--flip { transform: scaleY(-1); }


/* 6. COMPONENTS ============================================================ */

/* --- Pillar: the four "about" cards, colour-topped ------------------------ */
.brc-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.4rem;
  text-align: left;
}
.brc-pillar {
  background: #fff;
  border-radius: var(--brc-radius);
  padding: 1.6rem;
  box-shadow: var(--brc-shadow);
  border-top: 6px solid var(--c);
  transition: transform .2s ease, box-shadow .2s ease;
}
.brc-pillar:hover { transform: translateY(-6px); box-shadow: var(--brc-shadow-lg); }
.brc-pillar h3 { font-size: 1.2rem; font-weight: 700; margin: 0 0 .4rem; }
.brc-pillar p  { color: var(--brc-ink-soft); font-size: .96rem; font-weight: 600; margin: 0; }

/* Icon chip. */
.brc-ic {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  background: var(--c);
  color: #fff;
}
.brc-ic svg { width: 26px; height: 26px; }

/* --- Subject: the six curriculum cards, colour-banded -------------------- */
.brc-curric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.brc-subject {
  position: relative;
  background: #fff;
  border-radius: 24px;
  padding: 1.8rem;
  overflow: hidden;
  box-shadow: var(--brc-shadow);
  transition: transform .2s ease;
}
.brc-subject:hover { transform: translateY(-6px); }
.brc-subject::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 8px;
  background: var(--c);
}
.brc-subject h3 { font-size: 1.35rem; font-weight: 700; margin: 0 0 .5rem; color: var(--c-ink); }
.brc-subject p  { color: var(--brc-ink-soft); font-weight: 600; font-size: .98rem; margin: 0; }

.brc-tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--brc-font-display);
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #fff;
  background: var(--c);
  padding: .3rem .8rem;
  border-radius: 999px;
  margin-bottom: .9rem;
}
.brc-tag svg { width: 15px; height: 15px; }
/* Yellow is too light for white text — flip to ink. */
.brc-yellow .brc-tag,
.brc-tag.brc-tag--on-light { color: var(--brc-ink); }

.brc-intro {
  max-width: 820px;
  margin: 0 auto 3rem;
  text-align: center;
  color: var(--brc-ink-soft);
  font-weight: 600;
  font-size: 1.02rem;
}

/* --- Video ---------------------------------------------------------------- */
.brc-video {
  position: relative;
  width: min(820px, 100%);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(135deg, #3A3550, #232035);
  box-shadow: var(--brc-shadow-lg);
  border: 6px solid #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.brc-video::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 107, 107, .25), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(77, 150, 255, .25), transparent 40%);
}
.brc-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.brc-play {
  position: relative;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  transition: transform .2s;
}
.brc-video:hover .brc-play { transform: scale(1.08); }
.brc-play::after {
  content: "";
  border-left: 22px solid var(--brc-ink);
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  margin-left: 5px;
}

/* --- Band: the teal philosophy strip ------------------------------------- */
.brc-band-inner {
  padding: 1rem 0 3.5rem;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 2.5rem;
  align-items: center;
}
.brc-band-inner h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 .2rem; }
.brc-band-inner p  { font-size: 1.15rem; font-weight: 600; line-height: 1.7; margin: 0; }
.brc-band-inner .brc-eyebrow { color: rgba(255, 255, 255, .75); }
.brc-band-inner .brc-script  { color: rgba(255, 255, 255, .85); margin-bottom: 1rem; }
.brc-quote { opacity: .9; font-style: italic; margin-top: .8rem !important; }

.brc-glyph { text-align: center; line-height: 1; }
.brc-glyph svg { width: clamp(70px, 13vw, 120px); height: auto; }

/* --- Enroll CTA ---------------------------------------------------------- */
.brc-cta-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--brc-radius-lg);
  padding: 3.5rem 2rem;
  color: #fff;
  text-align: center;
  background: linear-gradient(120deg,
    var(--brc-violet), var(--brc-blue) 35%, var(--brc-green) 62%, var(--brc-orange));
  box-shadow: var(--brc-shadow-lg);
}
.brc-cta-card h2 {
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  margin: 0 auto .6rem;
  max-width: 640px;
  color: #fff;
}
.brc-cta-card p { font-weight: 700; font-size: 1.1rem; margin: 0 0 1.6rem; opacity: .95; }

/* --- Testimonial --------------------------------------------------------- */
.brc-testi-inner {
  padding: 1rem 0 4rem;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.brc-testi-inner h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: .2rem 0 .3rem; }
.brc-testi-inner .brc-eyebrow { color: rgba(255, 255, 255, .8); }
.brc-stars { font-size: 1.4rem; margin-bottom: 1rem; letter-spacing: .2em; }
.brc-quote-lg {
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  border: none;
  padding: 0;
}
.brc-quote-lg::before { content: "\201C"; font-family: var(--brc-font-display); font-size: 2rem; }
.brc-quote-lg::after  { content: "\201D"; font-family: var(--brc-font-display); font-size: 2rem; }
.brc-cite { display: block; margin-top: 1rem; font-size: .95rem; font-weight: 700; opacity: .8; font-style: normal; }


/* 7. CONTACT + WPFORMS ===================================================== */

.brc-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3rem;
  align-items: start;
}
.brc-contact-info h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: .2rem 0 .6rem; }
.brc-contact-info .brc-script { display: block; margin-bottom: 1.6rem; }

.brc-info-row {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1rem;
  font-weight: 700;
  color: var(--brc-ink);
  text-decoration: none;
}
a.brc-info-row:hover { color: var(--c, var(--brc-blue)); }
.brc-info-row .brc-ic {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  margin-bottom: 0;
  flex: 0 0 auto;
}
.brc-info-row .brc-ic svg { width: 20px; height: 20px; }
.brc-info-row small { display: block; font-weight: 600; font-size: .8rem; color: var(--brc-ink-soft); }

.brc-socials { display: flex; gap: .7rem; margin-top: 1.2rem; }
.brc-socials a {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(44, 42, 74, .08);
  display: grid;
  place-items: center;
  color: var(--brc-ink);
  transition: background .2s, color .2s;
}
.brc-socials a:hover { background: var(--brc-blue); color: #fff; }
.brc-socials svg { width: 18px; height: 18px; }

/* WPForms — scoped to .brc-form so we never restyle forms elsewhere. */
.brc-form {
  background: #fff;
  border-radius: 24px;
  padding: 2rem;
  box-shadow: var(--brc-shadow);
}
.brc-form .wpforms-field { padding: 0 0 1rem; }
.brc-form .wpforms-field-label { display: none; }
.brc-form input[type="text"],
.brc-form input[type="email"],
.brc-form input[type="tel"],
.brc-form input[type="url"],
.brc-form select,
.brc-form textarea {
  width: 100%;
  max-width: 100%;
  border: 2px solid var(--brc-line);
  border-radius: 14px;
  padding: .85rem 1rem;
  font-family: var(--brc-font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--brc-ink);
  background: var(--brc-cream);
  transition: border-color .2s, box-shadow .2s;
}
.brc-form input:focus,
.brc-form select:focus,
.brc-form textarea:focus {
  outline: none;
  border-color: var(--brc-blue);
  box-shadow: 0 0 0 4px rgba(77, 150, 255, .15);
}
.brc-form textarea { resize: vertical; min-height: 120px; }
.brc-form .wpforms-submit {
  width: 100%;
  border: none;
  cursor: pointer;
  font-family: var(--brc-font-display);
  font-weight: 700;
  font-size: 1rem;
  padding: .8rem 1.5rem;
  border-radius: 999px;
  color: #fff;
  box-shadow: var(--brc-shadow);
  background: linear-gradient(90deg,
    var(--brc-red), var(--brc-orange), var(--brc-yellow),
    var(--brc-green), var(--brc-blue), var(--brc-violet));
  transition: transform .18s ease;
}
.brc-form .wpforms-submit:hover { transform: translateY(-2px); }
.brc-form .wpforms-error { color: var(--brc-red-ink); font-size: .85rem; font-weight: 700; }


/* 8. FOOTER =============================================================== */

/* Drop `.brc-foot-rainbow` on a Blocksy footer row, or use the HTML block. */
.brc-foot-rainbow {
  height: 6px;
  background: linear-gradient(90deg,
    var(--brc-red), var(--brc-orange), var(--brc-yellow),
    var(--brc-green), var(--brc-blue), var(--brc-violet));
}

/* Brand lockup — the four dots. Reusable in header + footer. */
.brc-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--brc-font-display);
  font-weight: 800;
  font-size: 1.15rem;
  text-decoration: none;
  color: inherit;
}
.brc-brand .brc-dots { display: flex; gap: 3px; }
.brc-brand .brc-dots i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.brc-brand .brc-dots i:nth-child(1) { background: var(--brc-red); }
.brc-brand .brc-dots i:nth-child(2) { background: var(--brc-yellow); }
.brc-brand .brc-dots i:nth-child(3) { background: var(--brc-green); }
.brc-brand .brc-dots i:nth-child(4) { background: var(--brc-blue); }


/* 9. EDITOR / THEME INTEGRATION =========================================== */

/* Sections own their own rhythm, so nothing may be inserted between them.
   WP core's flow layout adds `margin-block-start: var(--wp--style--block-gap)`
   to every child of a group, which opens a gap between each section and lets
   the page background show through — visible as a stripe of the wrong cream
   above every wave. Core ships that rule wrapped in :where(), which has zero
   specificity, so a single class is enough to overrule it. Blocksy's own
   content spacing lands on .entry-content children and is handled the same way. */
.brc-page > *,
.brc-page > .wp-block-group > *,
.entry-content > .brc-page,
.entry-content > .brc-page > * {
  margin-block: 0;
}

.brc-page .entry-content > .alignfull { margin-inline: 0; }

/* Kill the gap core/columns leaves under the last block in a column. */
.brc-page .wp-block-column > *:last-child { margin-bottom: 0; }

/* Cards are grids/flex containers, not block flow — neutralise core margins. */
.brc-pillar > *,
.brc-subject > *,
.brc-cta-card > * { margin-block: 0; }

/* Mirror the tokens into the editor so the back end matches the front end. */
.editor-styles-wrapper .brc-page { background: var(--brc-cream); }


/* 10. RESPONSIVE ========================================================== */

@media (max-width: 820px) {
  .brc-band-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1rem;
  }
  .brc-contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .brc-hero { padding: 3rem 0 5rem; }
  .brc-section { padding-block: 3rem; }
  .brc-info-row { justify-content: flex-start; text-align: left; }
  .brc-form { padding: 1.4rem; }
}

@media (max-width: 560px) {
  .brc-clouds { display: none; }
  .brc-cta-card { padding: 2.5rem 1.25rem; }
}


/* 11. REDUCED MOTION ===================================================== */

@media (prefers-reduced-motion: reduce) {
  .brc-page *,
  .brc-page *::before,
  .brc-page *::after {
    animation: none !important;
    transition: none !important;
  }
  .brc-arc path { stroke-dashoffset: 0; }
}

/* Keyboard focus — visible everywhere, no exceptions. */
/* Blocksy footer — the 6px rainbow strip from the design, sitewide */
.ct-footer::before {
  content: "";
  display: block;
  height: 6px;
  background: linear-gradient(90deg,
    var(--brc-red), var(--brc-orange), var(--brc-yellow),
    var(--brc-green), var(--brc-blue), var(--brc-violet));
}
.ct-footer .brc-info-row { color: rgba(255,255,255,.75); font-size: .95rem; }
.ct-footer .brc-info-row .brc-ic { width: 34px; height: 34px; border-radius: 10px; }
.ct-footer .brc-socials a { background: rgba(255,255,255,.1); color: #fff; }

.brc-page :is(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--brc-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

:root :where(.is-layout-flow) > :last-child {
    margin-block-end: auto;
}