/* Empowered Minds shared colours and layout values.
   Keep these consistent across all future pages. */
:root {
  --pink: #ed2b81;
  --pink-deep: #bf135c;
  --pink-soft: #fff0f6;
  --navy: #082e43;
  --muted: #607380;
  --line: #eadfe5;
  --paper: #ffffff;
  --content: 1170px;

  /* Pink footer (adapted from the original site's #de297c footer: deeper pink so white text passes AA). */
  --footer-pink: #bf135c;       /* white on this = about 6:1 */
  --footer-pink-dark: #a60f50;  /* gradient end */
  --footer-text: #fff5f9;       /* body copy on the pink: checked at 4.5:1 or better even where two blobs overlap */
  --footer-wave-height: clamp(34px, 5vw, 64px);
}

/* ==========================================================================
   Shared pink header banner (same pink family as the footer, flat edge, no blobs).
   Use on every page:  <header class="... site-banner"> ... </header>
   Desktop: white links, white button with deep-pink text.
   Mobile (800px and below): the bar is pink but the opened menu panel stays white
   with its original dark links, so those rules are deliberately desktop-only.
   ========================================================================== */
header.site-banner{
  /* Deeper at the ends, a touch brighter in the middle (lightest stop still gives white text about 5.5:1). */
  --banner-sweep:linear-gradient(90deg,#a60f50 0%,#bf135c 28%,#cb1665 58%,#bf135c 82%,#a60f50 100%);
  --banner-shade:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.14) 100%);
  --pink-ribbon:linear-gradient(90deg,var(--pink) 0%,#ff6aa8 50%,var(--pink) 100%);
  background:
    radial-gradient(ellipse 420px 130px at 16% -12%,rgba(255,255,255,.12),transparent 70%),
    /* Rings are real SVG circle strokes (proper edge anti-aliasing), not gradient lines, which look dotted/stair-stepped
       on normal-density screens. The image is 430x250 with the circle centre at 46% across and on its bottom edge, and
       is placed so that centre sits 46% across the bar, 31px below it (same position as before). */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='430' height='250' viewBox='0 0 430 250'%3E%3Ccircle cx='197.8' cy='250' r='127.5' fill='none' stroke='%23fff' stroke-opacity='.2' stroke-width='1.25'/%3E%3Ccircle cx='197.8' cy='250' r='207.5' fill='none' stroke='%23fff' stroke-opacity='.13' stroke-width='1.25'/%3E%3C/svg%3E") left 46% bottom -31px/430px 250px no-repeat,
    var(--banner-shade),
    var(--banner-sweep);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
  border-bottom:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
header.site-banner .brand:focus-visible,
header.site-banner .menu:focus-visible,
header.site-banner .menu-toggle:focus-visible{outline-color:#fff}

/* Wavy lower edge (echoes the footer). Sits behind the header's content (z-index:-1),
   so the opened mobile menu panel always covers it. Decorative only. */
header.site-banner{--banner-wave-height:22px;--banner-ribbon-phase:75px}
header.site-banner::after{
  content:"";position:absolute;z-index:-1;left:0;right:0;
  top:calc(100% - 1px);height:var(--banner-wave-height);
  /* Same sweep as the bar, darkened by the same amount as the bar's bottom edge, so the two join seamlessly. */
  background:linear-gradient(rgba(0,0,0,.14),rgba(0,0,0,.14)),var(--banner-sweep);pointer-events:none;
  /* The edge is a seamless 600px-wide wave tile that repeats sideways, so it can drift forever without a jump.
     The tile's start and end heights and slopes match (checked), and it drifts exactly one tile per loop.
     600px wide and about 12px tall, one tile per 12s (ribbon 18s): slow enough to feel calm, fast enough to be seen
     (a flatter, slower version looked like it was not moving at all). */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 22' preserveAspectRatio='none'%3E%3Cpath d='M0 0V11C100 3 200 3 300 11S500 19 600 11V0Z'/%3E%3C/svg%3E") 0 0/600px 100% repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 22' preserveAspectRatio='none'%3E%3Cpath d='M0 0V11C100 3 200 3 300 11S500 19 600 11V0Z'/%3E%3C/svg%3E") 0 0/600px 100% repeat-x;
  animation:banner-wave 12s linear infinite;
}
/* Lighter-pink ribbon peeking out beneath the wave: a second, phase-shifted wave in the brand's bright pink. */
header.site-banner::before{
  content:"";position:absolute;z-index:-1;left:0;right:0;
  top:100%;height:calc(var(--banner-wave-height) + 9px);
  background:var(--pink-ribbon);pointer-events:none;
  /* Same kind of seamless tile, started 45 degrees out of phase with the wave (--banner-ribbon-phase: 75px of the
     600px tile = 45deg) and a little slower, so the ribbon's thickness gently shifts. The offset is exact at page
     load; because the two layers run at different speeds it slowly drifts, as before. */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 31' preserveAspectRatio='none'%3E%3Cpath d='M0 0V22C100 15.3 200 15.3 300 22S500 28.7 600 22V0Z'/%3E%3C/svg%3E") var(--banner-ribbon-phase) 0/600px 100% repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 31' preserveAspectRatio='none'%3E%3Cpath d='M0 0V22C100 15.3 200 15.3 300 22S500 28.7 600 22V0Z'/%3E%3C/svg%3E") var(--banner-ribbon-phase) 0/600px 100% repeat-x;
  animation:banner-ribbon 18s linear infinite;
}
/* Each keyframe moves the mask by exactly one tile (600px), so the loop is invisible. */
@keyframes banner-wave{
  from{-webkit-mask-position:0 0;mask-position:0 0}
  to{-webkit-mask-position:600px 0;mask-position:600px 0}
}
@keyframes banner-ribbon{
  from{-webkit-mask-position:var(--banner-ribbon-phase) 0;mask-position:var(--banner-ribbon-phase) 0}
  to{-webkit-mask-position:calc(var(--banner-ribbon-phase) + 600px) 0;mask-position:calc(var(--banner-ribbon-phase) + 600px) 0}
}
/* Respect "reduce motion": the waves stay as a still shape. */
@media (prefers-reduced-motion:reduce){
  header.site-banner::before,header.site-banner::after{animation:none}
}

/* The original white-border logo sits in its own rounded white pill, artwork unchanged
   (shown whole, scaled to fit, never cropped, recoloured or stretched). */
header.header.site-banner .brand,
header.site-header.site-banner .logo-window{
  width:204px;height:64px;min-width:0;
  background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 2px 0 rgba(0,0,0,.08);
}
header.site-header.site-banner .brand{min-width:0;height:auto}
header.site-header.site-banner .logo-window img,
header.header.site-banner .brand img{width:100%;height:100%;object-fit:contain}

@media(max-width:580px){
  header.site-banner{--banner-wave-height:14px}
  header.header.site-banner .brand,
  header.site-header.site-banner .logo-window{width:190px;height:56px}
}

@media(min-width:801px){
  header.site-banner .header-inner,
  header.site-banner .nav-row{height:88px}
  header.site-banner :focus-visible{outline-color:#fff}
  header.site-banner .links a:not(.button),
  header.site-banner .nav-links a:not(.button){color:#fff}
  header.site-banner .links a:not(.button):hover,
  header.site-banner .nav-links a:not(.button):hover{color:#fff;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
  header.site-banner .links .button,
  header.site-banner .nav-links .button{background:#fff;color:var(--pink-deep);box-shadow:none}
  header.site-banner .links .button:hover,
  header.site-banner .nav-links .button:hover{background:var(--pink-soft);color:var(--footer-pink-dark);box-shadow:0 8px 18px rgba(0,0,0,.18)}
}

/* ==========================================================================
   Shared pink footer: wavy top edge + soft blobs, white text.
   Use on every page:  <footer class="site-footer"> ... </footer>
   Selectors are footer.site-footer so they win over each page's older plain-footer rules.
   Layout and copy stay in each page's own CSS/HTML; this only restyles colour, edge and fine print.
   ========================================================================== */
footer.site-footer{
  position:relative;isolation:isolate;z-index:1;
  /* Layers, top to bottom: two fine rings (echo the homepage hero rings), a soft glow, two faint blobs, then the
     vertical gradient. The top edge stays plain --footer-pink so it matches the wave strip above it.
     White overlays total at most about 14% where they overlap (text contrast checked at that worst case). */
  background:
    /* SVG circle strokes (see header note). Image 330x565 with the circle centre at 52% across / 26% down its own box,
       so `52% 26%` puts that centre 52% across / 26% down the footer at any footer size. */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='330' height='565' viewBox='0 0 330 565'%3E%3Ccircle cx='171.6' cy='146.9' r='147' fill='none' stroke='%23fff' stroke-opacity='.17' stroke-width='1.25'/%3E%3Ccircle cx='171.6' cy='146.9' r='87' fill='none' stroke='%23fff' stroke-opacity='.12' stroke-width='1.25'/%3E%3C/svg%3E") 52% 26%/330px 565px no-repeat,
    radial-gradient(ellipse 620px 240px at 28% 92%,rgba(255,255,255,.07),transparent 72%),
    radial-gradient(circle at 0% 100%,rgba(255,255,255,.07) 0 25.6%,transparent 26.3%),
    radial-gradient(circle at 100% 82%,rgba(255,255,255,.07) 0 19.6%,transparent 20.3%),
    linear-gradient(180deg,var(--footer-pink) 0%,var(--footer-pink-dark) 100%);
  border-top:0;
  padding-top:clamp(52px,6vw,76px);
  color:#fff;
}

/* Wavy top edge: a pink strip masked into a wave, sitting on top of the previous section.
   The mask is an inline SVG so it also works when the page is opened straight from disk. */
footer.site-footer::before{
  content:"";position:absolute;z-index:-1;left:0;right:0;
  bottom:calc(100% - 1px);height:var(--footer-wave-height);
  background:var(--footer-pink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 64V30C150 2 290-4 430 14c210 28 370 44 580 30 170-12 310-32 430-20v40Z'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 64V30C150 2 290-4 430 14c210 28 370 44 580 30 170-12 310-32 430-20v40Z'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat;
  pointer-events:none;
}

/* Lighter-pink ribbon peeking out above the wave (z-index:-2 puts it behind the main wave). Matches the header ribbon. */
footer.site-footer::after{
  content:"";position:absolute;z-index:-2;left:0;right:0;
  bottom:100%;height:calc(var(--footer-wave-height) + 10px);
  background:linear-gradient(90deg,var(--pink) 0%,#ff6aa8 50%,var(--pink) 100%);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 74' preserveAspectRatio='none'%3E%3Cpath d='M0 74V36C190 8 330 2 500 18c230 24 400 42 640 24 140-10 220-24 300-14v46Z'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 74' preserveAspectRatio='none'%3E%3Cpath d='M0 74V36C190 8 330 2 500 18c230 24 400 42 640 24 140-10 220-24 300-14v46Z'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat;
  pointer-events:none;
}

/* When the footer stacks on narrow screens there is no empty middle, so drop the rings (glow and blobs stay). */
@media(max-width:800px){
  footer.site-footer{
    background:
      radial-gradient(ellipse 620px 240px at 28% 92%,rgba(255,255,255,.07),transparent 72%),
      radial-gradient(circle at 0% 100%,rgba(255,255,255,.07) 0 25.6%,transparent 26.3%),
      radial-gradient(circle at 100% 82%,rgba(255,255,255,.07) 0 19.6%,transparent 20.3%),
      linear-gradient(180deg,var(--footer-pink) 0%,var(--footer-pink-dark) 100%);
  }
}

footer.site-footer h3,
footer.site-footer h4,
footer.site-footer strong{color:#fff}
footer.site-footer h4{font-size:12px}
footer.site-footer p,
footer.site-footer small{color:var(--footer-text)}
footer.site-footer a{color:#fff}
footer.site-footer a:hover{text-decoration:underline;text-underline-offset:3px}
footer.site-footer :focus-visible{outline-color:#fff}
footer.site-footer .footer-bottom,
footer.site-footer .foot-bottom{border-top-color:rgba(255,255,255,.3)}
/* Legal text was 10-11px; 12px is the design system's preferred minimum for fine print. */
footer.site-footer .footer-bottom p,
footer.site-footer .footer-bottom small,
footer.site-footer .foot-bottom p,
footer.site-footer .foot-bottom small{font-size:12px}