/*
Theme Name: Stride UK
Theme URI: https://wwebdesign.co.uk/
Author: W Web Design & Hosting
Author URI: https://wwebdesign.co.uk/
Description: Lean custom theme for Stride UK — code-registered ACF blocks, no page builder, no build step.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: strideuk
*/

/* ==========================================================================
   Montserrat, self-hosted.

   Google serves Montserrat as a VARIABLE font: the css2 API returns the same
   woff2 for every weight you ask for, so there is one file per subset and the
   weight comes from the variable axis. Do not "fix" this by downloading a file
   per weight — they are byte-identical (verified by md5).

   Self-hosted rather than fonts.googleapis.com: one less third-party
   connection, no CDN round-trip before text can paint, and no visitor IP sent
   to Google from a charity's website.
   ========================================================================== */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/montserrat-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/montserrat-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Design tokens — the ONLY place cross-block values live.
   Anything used by more than one block belongs here. Anything used by exactly
   one block belongs in that block's own style.css.
   ========================================================================== */

:root {
  /* Brand — from the Elementor global kit (post 5) on the old site. */
  --strideuk-brand:        #014960;  /* deep teal — header, footer, dark bands */
  --strideuk-brand-dark:   #013343;
  --strideuk-accent:       #ff21ad;  /* pink — buttons, stat tiles, pills */
  --strideuk-accent-dark:  #d81791;
  --strideuk-sky:          #16c0fd;  /* light blue, used sparingly */

  /* Surfaces.
     NEVER set a section background to #fff — leave sections transparent so
     they inherit --strideuk-bg, and fill --strideuk-card-bg on inner cards. */
  --strideuk-bg:           #ffffff;
  --strideuk-bg-alt:       #edf2f7;  /* the pale band alternated between sections */
  --strideuk-card-bg:      #f7fafc;
  --strideuk-border:       #e1e6ec;

  /* Text */
  --strideuk-text:         #1a202c;
  --strideuk-text-muted:   #4a5568;
  --strideuk-text-invert:  #ffffff;

  /* Type */
  --strideuk-font:         "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --strideuk-font-heading: var(--strideuk-font);

  /* Layout */
  --strideuk-content-max:  1200px;
  --strideuk-gutter:       24px;
  --strideuk-section-y:    clamp(48px, 7vw, 104px);
  --strideuk-radius:       6px;
  --strideuk-header-height: 88px;

  /* Motion */
  --strideuk-ease:         cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--strideuk-bg);
  color: var(--strideuk-text);
  font-family: var(--strideuk-font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--strideuk-font-heading);
  line-height: 1.15;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Shared layout primitives — used by chrome AND blocks.
   -------------------------------------------------------------------------- */

.strideuk-wrap {
  width: 100%;
  max-width: var(--strideuk-content-max);
  margin-inline: auto;
  padding-inline: var(--strideuk-gutter);
}

.strideuk-section { padding-block: var(--strideuk-section-y); }

.strideuk-section__head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 48px); }
.strideuk-section__head--center { margin-inline: auto; text-align: center; }

.strideuk-eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--strideuk-accent);
  margin-bottom: .75em;
}

.strideuk-lede { font-size: 1.1rem; color: var(--strideuk-text-muted); }

/* Buttons */
.strideuk-btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .85em 1.6em;
  border: 1px solid transparent;
  border-radius: var(--strideuk-radius);
  background: var(--strideuk-brand);
  color: var(--strideuk-text-invert);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s var(--strideuk-ease), transform .25s var(--strideuk-ease);
}
.strideuk-btn:hover { background: var(--strideuk-brand-dark); transform: translateY(-1px); }

.strideuk-btn--ghost {
  background: transparent;
  color: var(--strideuk-text);
  border-color: var(--strideuk-border);
}
.strideuk-btn--ghost:hover { background: var(--strideuk-card-bg); }

/* The pink CTA. This is the site's primary action colour — every "Partner With
   Us" / "Get In Touch" / "Donate" button on the old site was this. */
.strideuk-btn--accent { background: var(--strideuk-accent); }
.strideuk-btn--accent:hover { background: var(--strideuk-accent-dark); }

/* --------------------------------------------------------------------------
   Section bands.

   Sections stay transparent by default and inherit --strideuk-bg. These two
   modifiers are the only exceptions, and they are page RHYTHM (the old site
   alternated white and pale grey down every page), not per-block decoration.
   -------------------------------------------------------------------------- */

.strideuk-section--alt  { background: var(--strideuk-bg-alt); }
.strideuk-section--dark {
  background: var(--strideuk-brand);
  color: var(--strideuk-text-invert);
}
.strideuk-section--dark .strideuk-lede,
.strideuk-section--dark p { color: rgba(255, 255, 255, .88); }

/* Headings sit in brand teal everywhere except on a dark band. */
h2, h3 { color: var(--strideuk-brand); }
.strideuk-section--dark h1,
.strideuk-section--dark h2,
.strideuk-section--dark h3 { color: var(--strideuk-text-invert); }

/* Body copy is muted grey — matches the old site, where only headings were
   full-strength. */
.strideuk-section p { color: var(--strideuk-text-muted); }
.strideuk-section--dark p { color: rgba(255, 255, 255, .88); }

/* Rich text coming out of a WYSIWYG field. */
.strideuk-rte > *:last-child { margin-bottom: 0; }
.strideuk-rte ul { margin: 0 0 1.15em; padding-left: 1.2em; }
.strideuk-rte li { margin-bottom: .5em; color: var(--strideuk-text-muted); }
.strideuk-rte strong { color: var(--strideuk-text); font-weight: 700; }
.strideuk-section--dark .strideuk-rte li,
.strideuk-section--dark .strideuk-rte strong { color: inherit; }
.strideuk-rte a { color: var(--strideuk-accent); }

/* Cards — the ONLY place --strideuk-card-bg should appear. */
.strideuk-card {
  background: var(--strideuk-card-bg);
  border: 1px solid var(--strideuk-border);
  border-radius: var(--strideuk-radius);
  padding: clamp(20px, 2.5vw, 32px);
}

/* Screen-reader only */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* WP core alignment classes */
.alignfull { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }
.alignwide { max-width: calc(var(--strideuk-content-max) + 160px); margin-inline: auto; }
.aligncenter { margin-inline: auto; }