/* KWCS base styles — extracted from _assets/kwcs-homepage-v4.html */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* KWCS brand palette */
    --gold: #F5A623;
    --gold-deep: #E89612;
    --gold-light: #FFC15C;
    --gold-pale: #FFE9B8;
    --gold-tint: #FFF3DB;

    --navy: #1E4B8F;
    --navy-deep: #14376B;
    --navy-mid: #2A5FA8;
    --navy-tint: #EAF0FA;

    --cream: #FFF8EC;
    --warm-white: #FFFCF6;
    --text: #15223A;
    --muted: #5F6B82;
    --border: rgba(30, 75, 143, 0.12);
  }

html { scroll-behavior: smooth; }

body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--warm-white);
    color: var(--text);
    overflow-x: hidden;
    font-weight: 500;
    line-height: 1.6;
  }

/* Chewy for all headings + brandmarks */
  h1, h2, h3, h4, .chewy { font-family: 'Chewy', cursive; font-weight: 400; letter-spacing: 0.005em; }

img { max-width: 100%; display: block; }

/* ─── FACE PATTERN (subtle tonal kids-face tile) ─── */
  .face-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 1;
    z-index: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='none' stroke='%23E89612' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.22'><circle cx='42' cy='46' r='22'/><path d='M22 38 L62 38'/><circle cx='36' cy='48' r='1.6' fill='%23E89612' stroke='none'/><circle cx='48' cy='48' r='1.6' fill='%23E89612' stroke='none'/><path d='M36 54 Q42 58 48 54'/><circle cx='92' cy='46' r='22'/><path d='M74 34 Q80 28 92 28 Q104 28 110 34'/><circle cx='86' cy='48' r='1.6' fill='%23E89612' stroke='none'/><circle cx='98' cy='48' r='1.6' fill='%23E89612' stroke='none'/><path d='M86 54 Q92 58 98 54'/><circle cx='140' cy='130' r='22'/><path d='M120 122 L160 122'/><circle cx='134' cy='132' r='1.6' fill='%23E89612' stroke='none'/><circle cx='146' cy='132' r='1.6' fill='%23E89612' stroke='none'/><path d='M134 138 Q140 142 146 138'/></g></svg>");
    background-size: 180px 180px;
  }

.face-pattern--blue {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='none' stroke='%232A5FA8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.55'><circle cx='42' cy='46' r='22'/><path d='M22 38 L62 38'/><circle cx='36' cy='48' r='1.6' fill='%232A5FA8' stroke='none'/><circle cx='48' cy='48' r='1.6' fill='%232A5FA8' stroke='none'/><path d='M36 54 Q42 58 48 54'/><circle cx='92' cy='46' r='22'/><path d='M74 34 Q80 28 92 28 Q104 28 110 34'/><circle cx='86' cy='48' r='1.6' fill='%232A5FA8' stroke='none'/><circle cx='98' cy='48' r='1.6' fill='%232A5FA8' stroke='none'/><path d='M86 54 Q92 58 98 54'/><circle cx='140' cy='130' r='22'/><path d='M120 122 L160 122'/><circle cx='134' cy='132' r='1.6' fill='%232A5FA8' stroke='none'/><circle cx='146' cy='132' r='1.6' fill='%232A5FA8' stroke='none'/><path d='M134 138 Q140 142 146 138'/></g></svg>");
  }

/* ─── Doodle utility (hand-drawn spark/heart accents) ─── */
  .doodle { position: absolute; pointer-events: none; z-index: 2; }

.doodle svg { display: block; width: 100%; height: 100%; }

.kwcs-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
  }

.kwcs-logo-mark {
    width: 62px;
    height: 34px;
    flex-shrink: 0;
  }

.kwcs-logo-text {
    font-family: 'Chewy', cursive;
    font-size: 22px;
    line-height: 0.95;
    color: var(--navy);
  }

.kwcs-logo-text span { display: block; }

.kwcs-logo--white .kwcs-logo-text { color: white; }

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: var(--navy);
    color: white;
    padding: 18px 38px;
    border-radius: 100px;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: background 0.2s ease;
    font-family: 'Nunito', sans-serif;
  }

.btn-primary:hover { background: var(--navy-deep); }

.btn-primary .arrow-icon { width: 22px; height: 18px; flex-shrink: 0; }

.btn-primary .arrow-icon path { fill: currentColor; }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: white;
    color: var(--navy-deep);
    padding: 18px 38px;
    border-radius: 100px;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease;
    font-family: 'Nunito', sans-serif;
  }

.btn-secondary:hover { background: var(--cream); }

.btn-secondary .arrow-icon { width: 22px; height: 18px; flex-shrink: 0; }

.btn-secondary .arrow-icon path { fill: currentColor; }

/* ─── ORANGE BACKGROUND WITH FACES ─── */
  .orange-background-with-faces {
    background-color: #f5a624;
    background-image:
    radial-gradient(ellipse at 60% 50%, #ffc80b 0%, transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_2' data-name='Layer 2' viewBox='0 0 74.88 31.18'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpath d='M59.12.07c11.2.68 17.09 14.24 11.51 23.49-.57 1.43.98 1.08 1.69.45.86-.14 2.19 1.61 2.55 2.36v.31c-2.13 1.8-4.97 2.29-6.96 0-5.77 5.84-15.38 5.94-21.11 0-1.39 1.49-3.5 2.01-5.38 1.1-.22-.11-1.44-.96-1.51-1.09-.12-.22-.03-.23.08-.39.12-.18 1.87-1.93 2-1.99.3-.15 1.44 1.12 2.25.35.74-.7-.42-1.99-.75-2.76-3.71-8.73.76-18.38 9.66-21.28l2.29-.54h3.67ZM48.57 7.71c2.56 1.7 6.08 1.03 6.96-2.14.24-.85.64-1.95-.57-1.8-2.26.27-4.97 2.21-6.39 3.94m17.44 0c-1.6-2.19-4.45-3.8-7.19-3.98-.24 2.77 1.8 5.14 4.66 4.89.95-.08 1.67-.6 2.52-.92m-8.56 1.39s-.14.02-.22 0c-2.45 3.15-7.06 3.54-10.25 1.23-3.54 6.35.47 15.1 7.42 16.9 8.79 2.27 16.18-5.84 14.27-14.43-.19-.85-.55-1.65-.82-2.47-1.39.68-2.79 1.4-4.37 1.51-2.03.14-4.28-.78-5.72-2.19-.21-.2-.27-.52-.3-.54' class='cls-1'/%3E%3Cpath d='M60.81 22.24c-.37 4.18-6.51 4.23-6.88 0zM61.54 15.24c2.51-.29 3.03 3.62.56 3.93-2.92.37-3.03-3.65-.56-3.93M52.67 15.24c2-.27 3.07 2.45 1.34 3.64-2.7 1.86-4.54-3.2-1.34-3.64M25.02.07c6.22.57 11.67 6.02 13.05 11.96C41.1 25.02 26.93 36.26 15.34 28.8c-3.15-2.03-7.14-7.36-7.14-11.21v-2.68L.4 15.97 0 12.6l8.78-1.4c1.45-4.95 5.24-8.97 10.2-10.52.62-.19 1.78-.55 2.37-.61.91-.1 2.75-.09 3.67 0m7.03 7.8c.19-.16-1.28-1.53-1.46-1.68-5.96-4.96-14.91-2.62-17.81 4.43zM11.72 14.3c-.7 5.38 2.9 11.15 8.1 12.76 8.67 2.7 16.46-5.06 14.95-13.72-.09-.52-.41-2.16-.96-2.26z' class='cls-1'/%3E%3Cpath d='M21.65 21.63c.02 1.05.59 2.03 1.75 1.98 1.46-.06 1.49-1.98 1.7-1.98h2.37c.27 4.87-6.71 6.22-8.15 1.5-.07-.24-.37-1.5-.03-1.5h2.37ZM27.43 15.24c2.54-.35 3.1 3.57.71 3.94-2.86.44-3.17-3.6-.71-3.94M18.71 15.24c2.34-.27 3.05 3.58.56 3.94-2.82.41-3.22-3.63-.56-3.94' class='cls-1'/%3E%3C/g%3E%3C/svg%3E");
    background-size: auto, 75px 32px;
    background-repeat: no-repeat, repeat;
    background-position: center, 0 0;
  }

.blue-background-with-faces {
  position: relative;
  background: radial-gradient(ellipse at 60% 50%, #1e4b8f 0%, #0d2a54 100%);
}

.orange-background-with-faces {
  position: relative;
  background: radial-gradient(ellipse at 60% 50%, #ffc80b 0%, #f5a624 100%);
}

.faces-pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.21
}

.orange-background-with-faces .faces-pattern {
  opacity: .5;
}

/* ─── SECTIONS ─── */
  .section { padding: 100px 80px; position: relative; }

.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 48px;
    gap: 24px;
    flex-wrap: wrap;
  }

.section-eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

.section-eyebrow::before {
    content: '';
    display: block;
    width: 22px;
    height: 3px;
    background: var(--gold);
    border-radius: 2px;
  }

.section-title {
    font-size: clamp(40px, 4.2vw, 62px);
    color: var(--navy-deep);
    line-height: 1;
    max-width: 700px;
  }

.section-title .gold { color: var(--gold-deep); }

.section-title .wh { color: white; }

/* Standfirst under a section heading. */
.section-intro {
    font-size: 18.5px;
    line-height: 1.6;
    font-weight: 500;
    color: var(--muted);
    max-width: 640px;
    margin-top: 18px;
  }

.section-intro--light { color: rgba(255,255,255,0.78); }

.section-intro p:last-child { margin-bottom: 0; }

/* Single call-to-action closing a section. */
.section-cta {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    margin-top: 56px;
  }

.section-header--centred {
    justify-content: center;
    text-align: center;
  }

.section-header--centred .section-title,
.section-header--centred .section-intro { margin-left: auto; margin-right: auto; }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--navy);
    font-size: 14.5px;
    font-weight: 800;
    text-decoration: none;
    border: 2px solid var(--navy);
    border-radius: 100px;
    padding: 11px 22px;
    transition: background 0.2s, color 0.2s, transform 0.15s;
    font-family: 'Nunito', sans-serif;
  }

.btn-ghost:hover { background: var(--navy); color: white; transform: translateY(-2px); }

.btn-ghost-white {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-size: 14.5px;
    font-weight: 800;
    text-decoration: none;
    border: 2px solid rgba(255,255,255,0.6);
    border-radius: 100px;
    padding: 11px 22px;
    transition: background 0.2s, border-color 0.2s;
    font-family: 'Nunito', sans-serif;
  }

.btn-ghost-white:hover { background: white; color: var(--navy-deep); border-color: white; }

/* ─── ANIMATIONS ─── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }

@media (max-width: 1024px) {
  .section { padding: 72px 32px; }
}

@media (max-width: 768px) {
  .btn-primary, .btn-secondary { justify-content: center; }
  .section { padding: 56px 20px; }
  .section-header { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* Image placeholders, shared by the event and champion cards. */

.comm-card-placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
  }

.comm-card-placeholder-label {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: white;
    background: rgba(0,0,0,0.22);
    padding: 6px 12px;
    border-radius: 7px;
    border: 1.5px dashed rgba(255,255,255,0.5);
    text-transform: uppercase;
  }

.comm-card-visual--gold .comm-card-placeholder-label {
    color: var(--navy-deep); background: rgba(255,255,255,0.55); border-color: rgba(30,75,143,0.4);
  }

.champion-visual--gold .comm-card-placeholder-label {
    color: var(--navy-deep); background: rgba(255,255,255,0.55); border-color: rgba(30,75,143,0.4);
  }

/* ── Fixed-header clearance ──────────────────────────────────────────────
   The nav is position:fixed, so page content has to start below it. The hero
   already builds a 200px top padding in for this, so zero it out there.

   The hero is not a direct child of <main>: block themes wrap page content in
   .entry-content, so the selector has to allow for that wrapper. */

/* WordPress's global styles space the top-level blocks apart with
   `:where(.wp-site-blocks) > * { margin-block-start: 24px }`. Every one of them
   here is a full-bleed band that must butt up against its neighbours, and the
   header part is position:fixed so its share of that gap has nothing to
   separate — it just pushes main 24px past the nav clearance below. */
:where(.wp-site-blocks) > main,
:where(.wp-site-blocks) > .wp-block-template-part {
  margin-block-start: 0;
}

main {
  padding-top: 76px;
}

main:has(> .hero:first-child),
main:has(> :first-child > .hero:first-child) {
  padding-top: 0;
}

/* When the announcement bar is switched on it takes the top 44px and the nav
   and logo badge slide down to sit under it. */
.announcement-bar ~ .kwcs-nav { top: 44px; }
.announcement-bar ~ .kwcs-logo-badge { top: 44px; }

/* The bar lives inside the header template part, so main isn't its sibling —
   reach across from the body instead. */
body:has(.announcement-bar) main { padding-top: 120px; }
body:has(.announcement-bar) main:has(> .hero:first-child),
body:has(.announcement-bar) main:has(> :first-child > .hero:first-child) {
  padding-top: 44px;
}

@media (max-width: 1024px) {
  main { padding-top: 68px; }
  main:has(> .hero:first-child),
  main:has(> :first-child > .hero:first-child) { padding-top: 0; }
}

/* ── Admin bar ───────────────────────────────────────────────────────────
   WordPress clears the admin bar with `html { margin-top: 32px }`, but that
   does nothing for position:fixed elements — they resolve against the
   viewport — so the nav and logo badge have to be pushed down by hand. */

.admin-bar .kwcs-nav,
.admin-bar .kwcs-logo-badge,
.admin-bar .announcement-bar { top: 32px; }

.admin-bar .announcement-bar ~ .kwcs-nav,
.admin-bar .announcement-bar ~ .kwcs-logo-badge { top: 76px; }

@media screen and (max-width: 782px) {
  .admin-bar .kwcs-nav,
  .admin-bar .kwcs-logo-badge,
  .admin-bar .announcement-bar { top: 46px; }

  .admin-bar .announcement-bar ~ .kwcs-nav,
  .admin-bar .announcement-bar ~ .kwcs-logo-badge { top: 90px; }
}

@media screen and (max-width: 600px) {
  /* Below 600px WordPress un-fixes the admin bar and it scrolls away, so the
     header goes back to sitting at the top of the viewport. */
  .admin-bar .kwcs-nav,
  .admin-bar .kwcs-logo-badge,
  .admin-bar .announcement-bar { top: 0; }

  .admin-bar .announcement-bar ~ .kwcs-nav,
  .admin-bar .announcement-bar ~ .kwcs-logo-badge { top: 44px; }
}

/* Screen-reader-only labels for the event filter controls. */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* The KWCS sections are full-bleed bands that must butt up against each other.
   WordPress's default block gap puts 24px of page background between them. */
:root :where(.entry-content, .wp-block-post-content) > [class*="wp-block-kwcs-"] {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Shared by the event cards and the single-event header. */

.event-date-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gold);
    color: var(--navy-deep);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 100px;
    margin-bottom: 14px;
    width: fit-content;
  }