/*
Theme Name: Swimmable
Theme URI: https://www.swimmable.co.za
Author: SalesHive
Description: Custom lightweight theme for Swimmable — Cape Town swim school. Hand-built, mobile-first, brand palette from the Swimmable brand kit (canonical hex values from the live-site CSS). Swim · Learn · Play.
Version: 1.0.0
Requires PHP: 7.4
License: Proprietary — built for Swimmable by SalesHive
Text Domain: swimmable
*/

/* ==========================================================================
   1. Design tokens — exact hex values from the Swimmable brand kit
   ========================================================================== */
:root {
  /* Brand */
  --c-blue: #0073BD;      /* Swimmable Blue — core brand */
  --c-sky: #63CAF2;       /* Primary 1 — light aqua */
  --c-mint: #99F2F2;      /* Primary 3 — pale aqua */
  --c-red: #F42432;       /* Primary 2 — accent (CTAs) */
  --c-grad-blue: #94B1DD; /* gradient blue */
  /* Neutrals */
  --c-ink: #222525;       /* near-black text */
  --c-muted: #62636B;     /* body muted */
  --c-border: #ECEBEA;    /* light border */
  --c-bg: #F8F6F4;        /* off-white background */
  --c-white: #FFFFFF;
  /* WhatsApp (deep teal — passes contrast with white text) */
  --c-whatsapp: #25D366;
  /* Type */
  --f-body: "Hanken Grotesk", "Segoe UI", Arial, sans-serif; /* substitute for Neue Haas Unica (Typekit licence not carried over) */
  --f-slab: "Zilla Slab", Georgia, serif;
  --f-hand: "Caveat", cursive;
  /* Rhythm */
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 10px 30px rgba(34, 37, 37, .08);
  --shadow-lg: 0 18px 50px rgba(0, 115, 189, .16);
  --container: 1140px;
  --header-h: 72px;
}

/* ==========================================================================
   2. Reset / base — mobile-first
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* The header is position:sticky, so without this every in-page anchor lands
	   underneath it. Clicking "Enquire Now" put the "Send an Enquiry" heading and
	   the first form field behind the header bar, which is the last thing you want
	   on the only conversion path the site has. */
	scroll-padding-top: calc(var(--header-h) + 1.25rem);
}
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-white);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-blue); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--c-red); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-body);
  font-weight: 800;
  line-height: 1.15;
  color: var(--c-ink);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5.5vw, 3.375rem); }   /* ~54px desktop */
h2 { font-size: clamp(1.625rem, 4vw, 2.5rem); }   /* ~40px */
h3 { font-size: clamp(1.25rem, 3vw, 2rem); }      /* ~32px */
h4 { font-size: 1.375rem; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul, ol { padding-left: 1.3em; margin: 0 0 1.1em; }
:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 2px; border-radius: 2px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
/* No flat white anywhere — plain sections carry faint aqua glows */
.section {
  padding: clamp(3rem, 8vw, 5.5rem) 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(153, 242, 242, .22) 0, transparent 32%),
    radial-gradient(circle at 0% 100%, rgba(99, 202, 242, .16) 0, transparent 34%),
    #FFFFFF;
}
/* Tinted sections — soft aqua gradient with bubble accents (livelier than flat grey) */
.section-tint {
  background:
    radial-gradient(circle at 6% 12%, rgba(153, 242, 242, .45) 0, transparent 30%),
    radial-gradient(circle at 94% 85%, rgba(99, 202, 242, .35) 0, transparent 36%),
    linear-gradient(180deg, #F2FBFE 0%, #DFF3FC 100%);
}
.section-mint {
  background:
    radial-gradient(circle at 88% 15%, rgba(255, 255, 255, .55) 0, transparent 38%),
    radial-gradient(circle at 10% 90%, rgba(0, 115, 189, .12) 0, transparent 42%),
    linear-gradient(135deg, var(--c-mint) 0%, #7EDDF4 55%, var(--c-sky) 100%);
}
.center { text-align: center; }

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--c-blue); color: #fff; padding: .75rem 1.25rem; z-index: 999;
}
.skip-link:focus { left: 0; color: #fff; }

/* Eyebrow + handwriting accents */
.eyebrow {
  font-family: var(--f-slab);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .85rem;
  color: var(--c-blue);
  display: block;
  margin-bottom: .75rem;
}
.hand { font-family: var(--f-hand); font-size: 1.5rem; color: var(--c-blue); font-weight: 600; }

/* ==========================================================================
   3. Buttons — white text only on blue / red / whatsapp-teal (contrast rule)
   ========================================================================== */
.btn {
  display: inline-block;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: 1rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-red { background: var(--c-red); color: #fff; }
.btn-red:hover { background: #d81e2b; color: #fff; }
.btn-blue { background: var(--c-blue); color: #fff; }
.btn-blue:hover { background: #005e9a; color: #fff; }
.btn-outline { background: transparent; color: var(--c-blue); border-color: var(--c-blue); }
.btn-outline:hover { background: var(--c-blue); color: #fff; }
.btn-white { background: #fff; color: var(--c-blue); }
.btn-white:hover { color: var(--c-blue); }
.btn-whatsapp { background: var(--c-whatsapp); color: #fff; }
.btn-whatsapp:hover { background: #1DA851; color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.btn-row.center-row { justify-content: center; }

/* ==========================================================================
   4. Header + navigation
   ========================================================================== */
/* Sticky glass header — semi-transparent with backdrop blur over hero imagery */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(34, 37, 37, .07);
  box-shadow: 0 1px 20px rgba(0, 115, 189, .06);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: rgba(255, 255, 255, .97); }
}
.header-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: var(--header-h);
}
.brand-link { display: inline-flex; align-items: center; text-decoration: none; }
.brand-link img { width: 180px; height: auto; }

/* Animated hamburger (bars morph into an X) */
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  background: none; border: 1px solid var(--c-border); border-radius: 12px;
  cursor: pointer; transition: border-color .2s ease;
}
.nav-toggle:hover { border-color: var(--c-blue); }
.nav-toggle .bars { display: inline-block; width: 20px; height: 2px; background: var(--c-ink); position: relative; transition: background .2s ease; }
.nav-toggle .bars::before, .nav-toggle .bars::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--c-ink);
  transition: transform .25s ease, top .25s ease;
}
.nav-toggle .bars::before { top: -6px; }
.nav-toggle .bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { top: 0; transform: rotate(-45deg); }

/* Mobile menu panel */
.site-nav { display: none; }
.site-nav.open {
  display: block;
  position: absolute; left: 0; right: 0; top: 100%;
  background: rgba(255, 255, 255, .99);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--shadow);
  padding: 1rem 20px 1.5rem;
  max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  animation: swim-menu-in .22s ease both;
}
@keyframes swim-menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.nav-list > li > a, .nav-drop-btn {
  display: flex; align-items: center; gap: .35rem; width: 100%; text-align: left;
  padding: .7rem .5rem; font-weight: 600; font-size: 1.05rem; letter-spacing: .012em;
  color: var(--c-ink); text-decoration: none;
  background: none; border: 0; font-family: inherit; cursor: pointer;
  transition: color .18s ease;
}
.nav-list > li > a:hover, .nav-drop-btn:hover { color: var(--c-blue); }

/* Rotating SVG caret */
.nav-drop-btn .caret { flex: none; transition: transform .25s ease; color: currentColor; }
.nav-drop-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }

.nav-sub { list-style: none; margin: 0; padding: .25rem 0 .5rem 1rem; display: none; }
.nav-drop.open .nav-sub { display: block; }
.nav-sub a {
  display: block; padding: .55rem .6rem; color: var(--c-muted); text-decoration: none; font-weight: 500;
  border-radius: var(--radius-sm);
  transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.nav-sub a:hover { background: #EAF4FB; color: var(--c-blue); padding-left: .85rem; }
.nav-cta { margin-top: .75rem; }

/* Header CTA — solid brand blue, lifts and deepens on hover (red reserved for page CTAs) */
.nav-list > li.nav-cta > a.nav-cta-btn {
  background: var(--c-red); color: #fff; padding: .6rem 1.3rem; text-align: center;
  justify-content: center; border-radius: 999px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 4px 14px rgba(0, 115, 189, .28);
  transition: background .2s ease, transform .18s ease, box-shadow .2s ease;
}
.nav-list > li.nav-cta > a.nav-cta-btn:hover {
  background: #d81e2b; color: #fff; transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(244, 36, 50, .34);
}

@media (min-width: 981px) {
  .nav-toggle { display: none; }
  .site-nav, .site-nav.open {
    display: block; position: static; box-shadow: none; border: 0; padding: 0;
    overflow: visible; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    animation: none;
  }
  .nav-list { flex-direction: row; align-items: center; gap: .35rem; }
  .nav-list > li { position: relative; }
  .nav-list > li > a, .nav-drop-btn { width: auto; padding: .55rem .9rem; font-size: .98rem; }

  /* Animated underline on desktop links */
  .nav-list > li > a, .nav-drop-btn { position: relative; }
  .nav-list > li:not(.nav-cta) > a::after, .nav-drop-btn::after {
    content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .2rem;
    height: 2px; border-radius: 2px; background: var(--c-blue);
    transform: scaleX(0); transform-origin: left center; transition: transform .22s ease;
  }
  .nav-list > li:not(.nav-cta) > a:hover::after, .nav-drop-btn:hover::after,
  .nav-drop.open .nav-drop-btn::after { transform: scaleX(1); }

  /* Smooth-sliding dropdown */
  .nav-sub {
    display: block; position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid var(--c-border); border-radius: var(--radius-sm);
    box-shadow: 0 16px 40px rgba(0, 63, 104, .14); padding: .5rem;
    z-index: 50;
    opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  }
  .nav-drop.open .nav-sub, .nav-drop:focus-within .nav-sub {
    opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
    transition: opacity .22s ease, transform .22s ease, visibility 0s;
  }
  @media (hover: hover) {
    .nav-drop:hover .nav-sub {
      opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
      transition: opacity .22s ease, transform .22s ease, visibility 0s;
    }
    .nav-drop:hover .nav-drop-btn .caret { transform: rotate(180deg); }
  }
  .nav-cta { margin: 0 0 0 .9rem; }
}

/* Sticky mobile CTA bar */
.mobile-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96); border-top: 1px solid var(--c-border);
  backdrop-filter: blur(4px);
}
.mobile-cta .btn { flex: 1; text-align: center; padding: .9rem .5rem; font-size: .95rem; }
body { padding-bottom: 70px; } /* clear the fixed bar */
@media (min-width: 981px) {
  .mobile-cta { display: none; }
  body { padding-bottom: 0; }
}

/* ==========================================================================
   5. Hero
   ========================================================================== */
.hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--c-mint) 0%, var(--c-sky) 55%, var(--c-grad-blue) 100%); }
.hero-inner { position: relative; z-index: 2; padding: clamp(3.5rem, 10vw, 7rem) 0 clamp(4.5rem, 11vw, 8rem); max-width: 780px; }
.hero h1 { color: var(--c-ink); }
.hero .hero-sub { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--c-ink); max-width: 620px; }
.hero-wave { position: absolute; bottom: -1px; left: 0; width: 100%; z-index: 1; line-height: 0; }
.hero-wave svg { width: 100%; height: 60px; display: block; }

/* Photo hero (homepage) */
.hero-photo { position: relative; background: var(--c-ink); }
.hero-photo .hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .92;
}
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(0, 28, 48, .76) 0%,
    rgba(0, 28, 48, .60) 22%,
    rgba(0, 28, 48, .38) 38%,
    rgba(0, 28, 48, .18) 52%,
    rgba(0, 28, 48, .05) 64%,
    rgba(0, 28, 48, 0) 74%);
}
.hero-photo .hero-inner { position: relative; z-index: 2; }
.hero-photo h1, .hero-photo .hero-sub { color: #fff; } /* white on navy-blue scrim — passes contrast rule */

/* ==========================================================================
   6. Cards, grids, components
   ========================================================================== */
.grid { display: grid; gap: 1.25rem; }
@media (min-width: 641px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 981px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: 0 2px 10px rgba(34,37,37,.04);
}
.lesson-card { display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.lesson-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.lesson-card h3 { font-size: 1.2rem; margin-bottom: .35rem; }
.lesson-card p { color: var(--c-muted); font-size: .97rem; flex: 1; }
.lesson-card .card-link { font-weight: 700; text-decoration: none; }
.lesson-card .card-link::after { content: " →"; }
.lesson-card .card-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--c-mint); display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: 1rem;
}

/* Photo-tile lesson cards (reference pattern: photo/illustration tile + tag + title) */
.lesson-card.has-media { padding: 0; overflow: hidden; }
.lesson-media { aspect-ratio: 8 / 5; overflow: hidden; }
.lesson-media svg, .lesson-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}
.lesson-card.has-media:hover .lesson-media svg,
.lesson-card.has-media:hover .lesson-media img { transform: scale(1.05); }
.lesson-card.has-media .lesson-body {
  padding: 1.35rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1;
}
.lesson-tag {
  font-family: var(--f-slab);
  font-weight: 600; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-blue); margin-bottom: .5rem;
}

.trust-grid .card {
  display: flex; gap: .9rem; align-items: center; padding: 1.15rem 1.25rem;
  border: 1px solid var(--c-border);
  box-shadow: 0 4px 16px rgba(34, 37, 37, .06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.trust-grid .card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 115, 189, .12); }
.trust-grid .t-chip {
  flex: none; width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; background: #EAF4FB;
}
.trust-grid .t-text { font-weight: 600; }

/* Split section (text + image) */
.split { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 861px) {
  .split { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .split.flip > .split-media { order: -1; }
}
.split-media img, .split-media svg { border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; }
.split-media-small img { max-width: 420px; margin: 0 auto; display: block; }

/* FAQ accordion — native details/summary, keyboard accessible */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  margin-bottom: .75rem; overflow: hidden;
}
.faq-item summary {
  list-style: none; cursor: pointer; padding: 1.1rem 3rem 1.1rem 1.25rem;
  font-weight: 700; position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; color: var(--c-blue); font-weight: 400;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item[open] summary { color: var(--c-blue); }
.faq-a { padding: 0 1.25rem 1.2rem; color: var(--c-muted); }
.faq-group-heading { max-width: 800px; margin: 2.25rem auto 1rem; font-size: 1.35rem; }
.faq-list-wrap > .faq-group-heading:first-child { margin-top: 0; }

/* CTA banner */
.cta-banner {
  background: linear-gradient(120deg, var(--c-blue), #005e9a);
  color: #fff; border-radius: var(--radius);
  padding: clamp(2rem, 6vw, 3.5rem);
  text-align: center;
}
.cta-banner h2 { color: #fff; }
.cta-banner p { color: #eaf6ff; max-width: 560px; margin-left: auto; margin-right: auto; }

/* Checklist / feature list */
.check-list { list-style: none; padding: 0; }
.check-list li { padding: .4rem 0 .4rem 2rem; position: relative; }
.check-list li::before { content: "✓"; position: absolute; left: .35rem; color: var(--c-blue); font-weight: 800; }

/* Info tables / time lists */
.time-list { list-style: none; padding: 0; max-width: 480px; }
.time-list li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .75rem .25rem; border-bottom: 1px solid var(--c-border);
}
.time-list li span:first-child { font-weight: 700; }

/* Centred info card — keeps narrow content blocks from leaving dead space */
.info-card {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(34, 37, 37, .07);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  max-width: 620px; margin: 2rem auto 0;
}
.info-card .time-list { max-width: none; margin: 0; }
.info-card > :last-child { margin-bottom: 0; }
.info-card.info-card-wide { max-width: 760px; }
.check-list.mb-0 { margin-bottom: 0; }

/* Placeholder chip — for [start date]-style values awaiting client data */
.ph {
  display: inline-block; background: var(--c-bg); border: 1px dashed var(--c-grad-blue);
  border-radius: 6px; padding: 0 .5em; color: var(--c-muted); font-style: italic;
}

/* Contact page */
.contact-grid { display: grid; gap: 2rem; }
@media (min-width: 861px) { .contact-grid { grid-template-columns: 1fr 1.1fr; gap: 3rem; } }
.contact-list { list-style: none; padding: 0; }
.contact-list li { display: flex; gap: .75rem; padding: .55rem 0; align-items: flex-start; }
.contact-list .c-icon { font-size: 1.25rem; line-height: 1.4; }
.contact-list .c-icon svg { display: block; margin-top: .15em; }
.trust-grid .t-chip svg { display: block; }
.map-embed { border: 0; width: 100%; height: 340px; border-radius: var(--radius); box-shadow: var(--shadow); }

/* WPForms — brand styling */
.wpforms-container .wpforms-field { margin-bottom: 1.15rem; }
.wpforms-container .wpforms-field label.wpforms-field-label {
  display: block; font-weight: 700; color: var(--c-ink);
  font-size: .95rem; margin-bottom: .4rem;
}
.wpforms-container .wpforms-required-label { color: var(--c-red); }
.wpforms-container input[type="text"], .wpforms-container input[type="email"],
.wpforms-container input[type="tel"], .wpforms-container select, .wpforms-container textarea {
  display: block; width: 100% !important; max-width: 100% !important;
  border: 2px solid var(--c-border) !important; border-radius: var(--radius-sm) !important;
  padding: .7rem .85rem !important; font-family: var(--f-body) !important; font-size: 1rem !important;
  background: #fff; color: var(--c-ink);
}
.wpforms-container textarea { min-height: 130px; resize: vertical; }
.wpforms-container select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222525' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; background-size: 18px;
  padding-right: 2.6rem !important; cursor: pointer;
}
.wpforms-container input:focus, .wpforms-container select:focus, .wpforms-container textarea:focus {
  border-color: var(--c-blue) !important; box-shadow: 0 0 0 3px rgba(0, 115, 189, .12) !important; outline: none;
}
.wpforms-container .wpforms-submit-container { margin-top: 1.4rem; }
.wpforms-container button[type="submit"] {
  background: var(--c-red) !important; color: #fff !important; border: 0 !important;
  border-radius: 999px !important; font-weight: 700 !important; font-size: 1rem !important;
  padding: 1rem 2.2rem !important; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.wpforms-container button[type="submit"]:hover { background: #d81e2b !important; transform: translateY(-1px); }

/* About page — Our Three Goals */
.goals-section { position: relative; overflow: hidden; padding-bottom: clamp(5rem, 11vw, 8rem); }
.goals-grid { align-items: stretch; }
.goal-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 1.1rem; padding: clamp(1.75rem, 3.5vw, 2.5rem) 1.75rem;
  border: 0; border-radius: 18px;
  box-shadow: 0 2px 10px rgba(0, 63, 104, .08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.goal-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 45px rgba(0, 63, 104, .18);
}
.goal-card p { line-height: 1.55; }
.goal-icon {
  flex: none; width: 64px; height: 64px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #EAF9FD, #D2F0FB);
  color: var(--c-blue);
  box-shadow: inset 0 0 0 1px rgba(0, 115, 189, .12);
  transition: transform .25s ease;
}
.goal-icon svg { width: 30px; height: 30px; }
.goal-card:hover .goal-icon { transform: scale(1.1) rotate(-4deg); }
.goals-wave { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; pointer-events: none; }
.goals-wave svg { width: 100%; height: clamp(36px, 6vw, 70px); display: block; }

/* About page — facility + team */
.facility-card .facility-icon { width: 72px; height: 72px; margin-bottom: .75rem; }
.team-card { padding: 0; overflow: hidden; text-align: left; display: flex; flex-direction: column; }
.team-card img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; }
.team-body { padding: 1.35rem 1.5rem 1.6rem; }
.team-body h3 { font-size: 1.2rem; margin-bottom: .15rem; }
.team-role { color: var(--c-blue); font-weight: 700; font-size: .9rem; margin-bottom: .6rem; }
.team-bio { color: var(--c-muted); font-size: .95rem; margin-bottom: 0; }

/* Reviews section */
.reviews-wrap { max-width: 980px; margin: 0 auto; }

/* Accreditation badges */
.badge-row { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: center; }
.badge-row img { max-height: 74px; width: auto; }
/* STA mark is white artwork — sit it on a brand-blue chip so it stays legible on light backgrounds */
.badge-row img.badge-sta { background: var(--c-blue); padding: 10px 14px; border-radius: var(--radius-sm); }

/* ==========================================================================
   7. Footer
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--c-border);
  background:
    radial-gradient(circle at 92% 8%, rgba(153, 242, 242, .28) 0, transparent 34%),
    radial-gradient(circle at 4% 95%, rgba(99, 202, 242, .18) 0, transparent 36%),
    #FAFCFE;
}
.footer-grid {
  display: grid; gap: 2.75rem;
  padding: clamp(3.25rem, 7vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 641px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 981px) { .footer-grid { grid-template-columns: 1.35fr 1fr 1.25fr; gap: 4rem; } }

/* Column headings — small caps with a short brand accent bar */
.footer-heading {
  font-size: .85rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-ink); margin-bottom: 1.35rem; position: relative; padding-bottom: .65rem;
}
.footer-heading::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 28px; height: 3px; border-radius: 2px; background: var(--c-blue);
}

/* Brand column */
.footer-logo { display: inline-block; }
.footer-logo img { width: 180px; margin-bottom: .9rem; }
.footer-tagline { font-family: var(--f-hand); font-size: 1.5rem; color: var(--c-blue); margin-bottom: .9rem; }
.footer-bio { color: var(--c-muted); max-width: 34ch; line-height: 1.7; }

/* Link list — slide-in hover with animated arrow */
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { padding: 0; }
.footer-links a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .38rem 0; color: var(--c-muted); text-decoration: none;
  transition: color .15s ease, transform .15s ease;
}
.footer-links a::before {
  content: "→"; color: var(--c-blue); font-weight: 700;
  opacity: 0; transform: translateX(-6px); transition: opacity .15s ease, transform .15s ease;
}
.footer-links a:hover { color: var(--c-blue); transform: translateX(4px); }
.footer-links a:hover::before { opacity: 1; transform: translateX(0); }

/* Contact rows — icon chips + hover */
.footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.footer-contact li { display: flex; gap: .85rem; align-items: flex-start; color: var(--c-muted); }
.footer-contact a { color: var(--c-ink); text-decoration: none; font-weight: 600; transition: color .15s ease; }
.footer-contact a:hover { color: var(--c-blue); text-decoration: underline; text-underline-offset: 3px; }
.fc-icon {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #EAF4FB; color: var(--c-blue);
}
.fc-icon svg { width: 18px; height: 18px; }

/* Socials */
.social-row { display: flex; gap: .75rem; margin-top: 1.4rem; }
.social-row a {
  display: inline-flex; width: 42px; height: 42px; border-radius: 12px;
  background: #EAF4FB; color: var(--c-blue); align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.social-row a:hover { background: var(--c-blue); color: #fff; transform: translateY(-2px); }
.social-row svg { width: 20px; height: 20px; fill: currentColor; }

.footer-badges { margin-top: 1.75rem; }
.footer-badges img { max-height: 56px; }

/* Bottom bar */
.footer-bottom { background: var(--c-blue); color: #fff; padding: 1.1rem 0; font-size: .9rem; }
.footer-bottom .container { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }
.footer-bottom a { color: #fff; text-underline-offset: 3px; }

/* ==========================================================================
   8. Utility
   ========================================================================== */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
}
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.max-prose { max-width: 720px; }
.max-prose.center-prose { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   Proof strip (navy stat band under the hero)
   ========================================================================== */
.proof-strip {
  background: linear-gradient(135deg, #003F68 0%, #00588f 100%);
  padding: 1.6rem 0;
}
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.proof-item { text-align: center; }
.proof-stat {
  display: block;
  font-family: var(--f-slab);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--c-mint);
  line-height: 1.15;
}
.proof-label {
  display: block;
  margin-top: .3rem;
  font-size: .86rem;
  color: #fff;
  opacity: .92;
  line-height: 1.35;
}
@media (max-width: 800px) {
  .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem 1.25rem; }
  .proof-stat { font-size: 1.4rem; }
}

/* ==========================================================================
   Reviews (server-rendered, replaces the Elfsight embed)
   ========================================================================== */
.review-grid { margin-top: 2rem; }
.review-card { position: relative; padding-top: 2.6rem; margin: 0; }
.review-mark {
  position: absolute; top: .4rem; left: 1.1rem;
  font-family: var(--f-slab); font-size: 3rem; line-height: 1;
  color: var(--c-sky);
}
.review-card blockquote { margin: 0 0 1rem; font-style: italic; color: var(--c-ink); }
.review-card figcaption { font-weight: 700; color: var(--c-blue); }
.review-card .review-source { font-weight: 400; color: var(--c-muted); font-size: .85rem; }
.review-cta { margin-top: 2rem; }
.review-lead { max-width: 34rem; margin-left: auto; margin-right: auto; color: var(--c-muted); }

/* ==========================================================================
   Floating WhatsApp button
   ========================================================================== */
.wa-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.wa-float:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, .3); color: #fff; }
.wa-float svg { width: 30px; height: 30px; }
@media (max-width: 800px) {
  .wa-float { right: 14px; bottom: 14px; }
}

/* ==========================================================================
   9. v2 design pass — the waterline identity
   Display type moves to Zilla Slab, Caveat becomes the "teacher's hand",
   and a hand-drawn waterline runs through headings, dividers and links.
   ========================================================================== */

/* Display type: slab headlines carry the personality; card titles stay grotesk */
h1, h2 {
  font-family: var(--f-slab);
  font-weight: 700;
  letter-spacing: -.005em;
}
h1 { font-size: clamp(2.3rem, 6vw, 3.8rem); line-height: 1.08; }
h2 { font-size: clamp(1.75rem, 4.2vw, 2.6rem); line-height: 1.14; }

/* Eyebrows in the teacher's hand — warmer than small-caps labels */
.eyebrow {
  font-family: var(--f-hand);
  text-transform: none;
  letter-spacing: .01em;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--c-blue);
  margin-bottom: .35rem;
}

/* The waterline — wavy underline for one key word per headline */
.h-wave { position: relative; }
.h-wave::after {
  content: "";
  position: absolute; left: 2%; right: 2%; bottom: -.14em; height: .3em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q 12 2, 24 7 T 46 7 T 68 7 T 90 7 T 116 6' fill='none' stroke='%2363CAF2' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* Waterline flourish under centred section headings */
.section > .container > h2.center::after,
.section > .container h2.center::after,
.section > .container.center > h2::after {
  content: "";
  display: block;
  width: 88px; height: 10px;
  margin: .6rem auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q 12 2, 24 7 T 46 7 T 68 7 T 90 7 T 116 6' fill='none' stroke='%2363CAF2' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* Hero: bigger presence, handwritten note */
.hero-photo .hero-inner { max-width: 560px; }
.hero-note {
  display: inline-block;
  font-family: var(--f-hand);
  font-size: clamp(1.35rem, 2.8vw, 1.8rem);
  font-weight: 600;
  color: var(--c-mint);
  transform: rotate(-2deg);
  margin: .1rem 0 .9rem;
}
.hero-photo .hero-sub { font-size: clamp(1.02rem, 2vw, 1.18rem); line-height: 1.6; opacity: .96; }

/* Proof strip becomes a floating stat card overlapping the hero */
.proof-strip {
  background: transparent;
  padding: 0;
  position: relative;
  z-index: 5;
  margin-top: clamp(-3rem, -4vw, -2rem);
}
.proof-grid {
  background: linear-gradient(135deg, #003F68 0%, #00588f 100%);
  border-radius: var(--radius);
  box-shadow: 0 22px 55px rgba(0, 63, 104, .30);
  padding: clamp(1.3rem, 3vw, 1.8rem) clamp(1.1rem, 3vw, 2rem);
}
.proof-stat { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
@media (max-width: 800px) {
  .proof-strip { margin-top: -1.25rem; }
}

/* Trust cards: glassier, calmer — the tint section provides the colour */
.trust-grid .card {
  border: 0;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: 0 2px 8px rgba(0, 63, 104, .05);
}
.trust-grid .t-chip { background: #E3F6FB; border-radius: 50%; }

/* Lesson cards: tag becomes a soft pill, link arrow swims on hover */
.lesson-tag {
  display: inline-block;
  align-self: flex-start;
  background: #E3F6FB;
  color: #00588f;
  padding: .24rem .65rem;
  border-radius: 999px;
  font-size: .72rem;
  letter-spacing: .07em;
}
.lesson-card .card-link::after { content: " \2192"; display: inline-block; transition: transform .18s ease; }
.lesson-card:hover .card-link::after { transform: translateX(5px); }
.lesson-card.has-media { border: 0; box-shadow: 0 4px 18px rgba(0, 63, 104, .08); }

/* CTA banner: deep pool navy with a faint waterline running through it */
.cta-banner {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,70 C240,110 480,30 720,60 C960,90 1200,40 1440,70 L1440,120 L0,120 Z' fill='%23FFFFFF' opacity='.07'/%3E%3C/svg%3E") bottom center / 110% auto no-repeat,
    radial-gradient(circle at 85% 10%, rgba(99, 202, 242, .25) 0, transparent 45%),
    linear-gradient(120deg, #003F68 0%, #0073BD 100%);
}

/* Info cards lose their hard border */
.info-card { border: 0; box-shadow: 0 10px 30px rgba(0, 63, 104, .10); }

/* Header: transparent letterform logo sits flush on the glass bar */
.brand-link img { width: 196px; height: auto; }
.footer-logo img { width: 186px; margin-bottom: .9rem; }

/* Floating WhatsApp: desktop only — the mobile CTA bar already carries WhatsApp */
@media (max-width: 980px) {
  .wa-float { display: none; }
}

/* Quality floor: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Draft 4 (19 Aug 2026), approved by Marcelle Esterhuizen.
   Ported from the review preview. main[data-file="..."] was a
   preview-only selector and becomes body.home here.
   ============================================================ */

/* Marcelle, 17 Aug: "the picture at the top is too transparent".
   The wash was a full-width blue overlay, which is what killed the
   colour. Home now darkens only the text zone and clears the subject
   entirely by 64% across. */
body.home .hero-photo .hero-bg { opacity: 1; }
body.home .hero-photo::after {
	background: linear-gradient(90deg,
    rgba(0, 28, 48, .70) 0%,
    rgba(0, 28, 48, .52) 20%,
    rgba(0, 28, 48, .30) 34%,
    rgba(0, 28, 48, .12) 46%,
    rgba(0, 28, 48, .02) 56%,
    rgba(0, 28, 48, 0) 64%);
}
.hero-photo .hero-note { text-shadow: 0 2px 10px rgba(0, 20, 35, .5); }

/* Stops a hyphenated compound breaking across lines and stranding
   "Learn-to-" on its own. */
.nb { white-space: nowrap; }

/* Marcelle, 17 Aug: a jellyfish, a starfish and a turtle across the three
   baby levels, "to add some colour and warmth to the page". The badge
   overlaps the photo edge so it reads as part of the card. */
.creature-badge {
	width: 66px; height: 66px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	margin: -54px 0 .85rem; position: relative; z-index: 2;
	border: 3px solid #fff; box-shadow: 0 5px 16px rgba(0, 63, 104, .18);
}
.creature-badge svg { width: 40px; height: 40px; display: block; }
.cb-jelly  { background: #FFE1F0; }
.cb-star   { background: #FFE9D2; }
.cb-turtle { background: #D8F3E6; }

/* Marcelle, 18 Aug: "extend the baby lessons across the top and then have
   the other three below it". Four cards in a three-column grid always left
   one stranded on its own row. */
.lesson-grid .lesson-card.featured { grid-column: 1 / -1; }
@media (min-width: 641px) {
	.lesson-grid .lesson-card.featured { flex-direction: row; align-items: stretch; }
	.lesson-grid .lesson-card.featured .lesson-media {
		width: 46%; flex: 0 0 46%; aspect-ratio: auto; min-height: 260px;
	}
	.lesson-grid .lesson-card.featured .lesson-body {
		justify-content: center; padding: 2rem 2.4rem;
	}
	.lesson-grid .lesson-card.featured h3 { font-size: 1.55rem; margin-bottom: .5rem; }
	/* p carries flex:1 on the stacked cards to align the links. In the wide
	   card that just opens a dead gap, so the group centres instead. */
	.lesson-grid .lesson-card.featured p { font-size: 1.04rem; max-width: 46ch; flex: 0 0 auto; }
	.lesson-grid .lesson-card.featured .card-link { margin-top: 1.1rem; align-self: flex-start; }
}