@charset "UTF-8";
/* ============================================================
 *  THE PARENT STRIKE — brand tokens & components
 *  Source: The Parent Strike Brand Guidelines.
 *  Palette: Emergency Orange (primary bg), Electric Yellow (headlines/
 *  dates/URLs), Charcoal (emphasis + body), Dirty White (light panels),
 *  Toxic Green (sparing accent). Protest / screen-print aesthetic.
 * ============================================================ */

/* ── Fonts ──────────────────────────────────────────────── */
@font-face {
  font-family: "Long Haired Freaky People";
  src: url("/fonts/LongHairedFreakyPeople.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  /* Bespoke Parent Strike face (logo typeface) — this version includes
     numerals, so it can set dates etc. */
  font-family: "Parent Strike";
  src: url("/fonts/ParentStrike-Bespoke.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Brand palette */
  --ps-orange: #FF5A36;        /* Emergency Orange — primary background (confirmed from brand .ai) */
  --ps-orange-deep: #E04324;   /* pressed/hover on orange CTAs */
  --ps-yellow: #EBFA2A;        /* Electric Yellow — headlines, dates, URLs */
  --ps-green: #67F04F;         /* Toxic Green — sparing accent */
  --ps-white: #ECE7DC;         /* Dirty White — light panels/cards */
  --ps-black: #141414;         /* Charcoal — emphasis + body text */
  --ps-black-pure: #000000;

  /* Semantic */
  --ps-bg: var(--ps-orange);
  --ps-headline: var(--ps-yellow);
  --ps-on-orange: var(--ps-black);
  --ps-panel: var(--ps-white);
  --ps-ink: var(--ps-black);

  /* Type */
  --ps-font-display: "Long Haired Freaky People", "Arial Narrow", Impact, sans-serif;
  --ps-font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Spacing (8pt) */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.25rem;
  --s6: 1.5rem; --s8: 2rem; --s10: 2.5rem; --s12: 3rem; --s16: 4rem;

  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px;
  --maxw: 1080px;
  --ps-hero-col: min(33rem, 86vw);   /* shared width: hero logo + lead paragraph */
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--ps-font-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ps-ink);
  background: var(--ps-bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  /* Subtle grain — screen-print feel. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ── Layout ─────────────────────────────────────────────── */
.ps-container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s5); }
.ps-page { min-height: 100vh; display: flex; flex-direction: column; }

/* ── Type scale ─────────────────────────────────────────── */
.ps-display {
  font-family: var(--ps-font-display);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.ps-display--xxl { font-size: clamp(3.2rem, 12vw, 8rem); }
.ps-display--xl  { font-size: clamp(2.6rem, 8vw, 5.5rem); }
.ps-display--l   { font-size: clamp(2rem, 5vw, 3.4rem); }

.ps-yellow { color: var(--ps-yellow); }
.ps-black  { color: var(--ps-black); }
.ps-green  { color: var(--ps-green); }

/* Tilted protest tag — slight rotation per brand guidance. */
.ps-tilt { display: inline-block; transform: rotate(-2deg); }
.ps-tilt--r { transform: rotate(1.5deg); }

.ps-eyebrow {
  font-family: var(--ps-font-body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ps-lead { font-size: clamp(1.05rem, 2.2vw, 1.35rem); line-height: 1.5; max-width: var(--ps-hero-col); }

/* Read-more expander */
.ps-readmore { max-width: var(--ps-hero-col); margin-bottom: var(--s8); }
.ps-readmore > summary {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.85rem; color: var(--ps-black);
  cursor: pointer; list-style: none; width: fit-content;
  border-bottom: 3px solid var(--ps-yellow); padding-bottom: 2px;
}
.ps-readmore > summary::-webkit-details-marker { display: none; }
.ps-readmore > summary::after {
  content: "+"; font-size: 1.1em; line-height: 1; font-weight: 700;
}
.ps-readmore[open] > summary::after { content: "\2212"; }   /* minus sign (escape avoids encoding issues) */
.ps-readmore__body { margin-top: var(--s4); }
.ps-readmore__body p { margin-bottom: var(--s3); line-height: 1.55; }
.ps-readmore__body p:last-child { margin-bottom: 0; }

/* ── Buttons ────────────────────────────────────────────── */
.ps-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--ps-font-body);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: var(--s4) var(--s6);
  border: 3px solid var(--ps-black);
  border-radius: var(--r-sm);
  cursor: pointer;
  text-decoration: none;
  transition: transform .08s, background-color .15s, color .15s;
  -webkit-appearance: none; appearance: none;
}
.ps-btn:active { transform: translateY(2px); }
.ps-btn:disabled { opacity: .5; cursor: not-allowed; }
/* Yellow CTA on orange — the loud one. */
.ps-btn--primary { background: var(--ps-yellow); color: var(--ps-black); box-shadow: 4px 4px 0 var(--ps-black); }
.ps-btn--primary:hover:not(:disabled) { background: #fff; }
.ps-btn--primary:active { box-shadow: 2px 2px 0 var(--ps-black); }
/* Black CTA. */
.ps-btn--dark { background: var(--ps-black); color: var(--ps-yellow); box-shadow: 4px 4px 0 rgba(0,0,0,.25); }
.ps-btn--dark:hover:not(:disabled) { background: #000; }
/* Ghost / secondary on light panel. */
.ps-btn--ghost { background: transparent; color: var(--ps-black); }
.ps-btn--block { width: 100%; }

/* ── Form fields ────────────────────────────────────────── */
.ps-field { margin-bottom: var(--s4); }
.ps-label {
  display: block; font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: var(--s2); color: var(--ps-black);
}
.ps-input, .ps-textarea {
  width: 100%; padding: var(--s4);
  font: inherit; font-size: 1.05rem; color: var(--ps-black);
  background: #fff; border: 3px solid var(--ps-black); border-radius: var(--r-sm);
  outline: none; transition: box-shadow .12s;
}
.ps-input:focus, .ps-textarea:focus { box-shadow: 4px 4px 0 var(--ps-black); }
.ps-input--xl { font-size: 1.3rem; padding: var(--s5); font-weight: 700; }
.ps-hint { font-size: 0.82rem; opacity: 0.8; margin-top: var(--s2); }
.ps-error-text { font-size: 0.9rem; color: var(--ps-black); background: var(--ps-yellow); padding: var(--s2) var(--s3); border: 2px solid var(--ps-black); display: none; margin-top: var(--s2); font-weight: 700; }
.ps-field--invalid .ps-error-text { display: block; }

/* ── Panels / cards ─────────────────────────────────────── */
.ps-panel {
  background: var(--ps-panel); color: var(--ps-ink);
  border: 3px solid var(--ps-black); border-radius: var(--r-lg);
  padding: var(--s8); box-shadow: 6px 6px 0 var(--ps-black);
}

/* ── Progressive-reveal slides ──────────────────────────── */
.ps-slide { display: none; }
.ps-slide--active { display: block; animation: psIn .3s ease both; }
@keyframes psIn { from { opacity: 0; transform: translateY(12px);} to { opacity:1; transform:none; } }

/* ── Landing hero ───────────────────────────────────────── */
.ps-hero__inner { position: relative; z-index: 2; padding-block: var(--s10) var(--s12); }

/* Masthead: the full horizontal logo (fist + wordmark, one unit at native
 * proportions). Logo in black for max contrast on orange; the date is a
 * tight yellow "date-stamp" in clean bold sans (keeps the brand yellow in
 * play without the display-font clash). */
/* Hero content column — centred on the page (desktop), left-aligned within. */
.ps-hero__col { width: 100%; max-width: var(--ps-hero-col); margin-inline: auto; }

.ps-masthead { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding-top: 2.2rem; margin-bottom: var(--s4); }
.ps-masthead__logo {
  display: block;
  width: var(--ps-hero-col);               /* matches the lead paragraph width */
  aspect-ratio: 2381.91 / 548.98;          /* native ratio of the horizontal logo */
  background-color: var(--ps-black);
  -webkit-mask: url("/assets/ps-logo-horizontal-black.svg") no-repeat left center / contain;
          mask: url("/assets/ps-logo-horizontal-black.svg") no-repeat left center / contain;
}
/* Date as a tilted label-maker badge, top-right of the logo. LHFP (full glyph
   set; the bespoke logo face only carries the wordmark's own letters). Yellow
   fill + hard shadow gives the sticker / screen-print feel the brand calls for. */
.ps-date {
  position: absolute;
  top: 0;                                  /* sits in the masthead's top padding, above the logo */
  right: 0;
  z-index: 3;
  font-family: var(--ps-font-display);     /* Long Haired Freaky People — clearer for the date */
  font-size: clamp(0.8rem, 1.4vw, 1rem);
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--ps-black);
  background: var(--ps-yellow);
  border: 2px solid var(--ps-black);
  padding: 4px 9px 2px;
  transform: rotate(-5deg);
  box-shadow: 2px 2px 0 var(--ps-black);
}

/* ── Sign-up form extras ────────────────────────────────── */
.ps-join-title {
  font-family: var(--ps-font-display);
  text-transform: uppercase;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 0.95;
  color: var(--ps-black);
  margin: var(--s5) 0 var(--s4);
}
.ps-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.ps-optin { margin: var(--s5) 0; }
.ps-optin__q { font-weight: 700; margin-bottom: var(--s2); }
.ps-optin__sub { font-size: 0.92rem; opacity: 0.85; margin-bottom: var(--s3); }
.ps-radio-row { display: flex; gap: var(--s6); }
.ps-radio { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 700; cursor: pointer; }
.ps-radio input { width: 20px; height: 20px; accent-color: var(--ps-black); cursor: pointer; }

/* ── Map + finder layout ────────────────────────────────── */
.ps-finder { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s6); align-items: stretch; }
#ps-map {
  min-height: 460px; border: 3px solid var(--ps-black); border-radius: var(--r-lg);
  box-shadow: 6px 6px 0 var(--ps-black); background: var(--ps-white); z-index: 0;
}
.ps-nearest-label { font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
.ps-nearest-name { font-family: var(--ps-font-display); font-size: clamp(2rem,4vw,3rem); line-height: 1; margin: var(--s1) 0 var(--s2); text-transform: uppercase; }
.ps-distance-pill { display: inline-block; background: var(--ps-yellow); color: var(--ps-black); border: 2px solid var(--ps-black); border-radius: var(--r-pill); padding: 2px var(--s3); font-size: 0.8rem; font-weight: 700; }

/* Minimal "suggest a location" link (shown only when nearest strike is far) */
.ps-too-far { margin-top: var(--s3); }
.ps-suggest-link {
  display: inline-block; white-space: nowrap;   /* never wraps to two lines */
  font-weight: 700; font-size: clamp(0.82rem, 2.4vw, 0.95rem); color: var(--ps-black);
  text-decoration: underline; text-decoration-color: var(--ps-yellow);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.ps-suggest-link:hover { text-decoration-color: var(--ps-black); }

/* Location chooser list */
.ps-loc-list { list-style: none; max-height: 180px; overflow-y: auto; margin-top: var(--s3); border: 2px solid var(--ps-black); border-radius: var(--r-md); background: #fff; }
.ps-loc-item { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); cursor: pointer; border-bottom: 1px solid rgba(0,0,0,.12); font-weight: 600; }
.ps-loc-item:last-child { border-bottom: 0; }
.ps-loc-item:hover { background: var(--ps-yellow); }
.ps-loc-item[aria-selected="true"] { background: var(--ps-yellow); }
.ps-loc-item__dist { opacity: 0.7; font-weight: 400; font-variant-numeric: tabular-nums; }

/* ── Leaflet marker tweaks ──────────────────────────────── */
.ps-pin { font-family: var(--ps-font-body); font-weight: 700; }

/* ── Footer ─────────────────────────────────────────────── */
.ps-footer { margin-top: auto; background: var(--ps-black); color: var(--ps-white); padding: var(--s8) 0; }
.ps-footer__logos { display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap; }
.ps-footer__ps { height: 40px; width: auto; }
.ps-footer__by { opacity: 0.7; }
.ps-footer__partner { display: inline-flex; align-items: center; text-decoration: none; color: var(--ps-white); transition: opacity .15s; }
.ps-footer__partner:hover { opacity: 0.75; }
.ps-footer__partner img { height: 30px; width: auto; display: block; }
/* MP logo is white-on-black JPG; 'lighten' drops the black block into the
   charcoal footer so only the white artwork shows. */
.ps-footer__mp { mix-blend-mode: lighten; height: 38px !important; }
.ps-footer__partner--text { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.95rem; }

/* ── Theme: light ───────────────────────────────────────────
 * Dirty-white page; Emergency Orange brought in as the emphasis colour
 * (sign-up card, accents). Toggle by adding class "theme-light" to <body>.
 * ----------------------------------------------------------- */
.theme-light { --ps-bg: var(--ps-white); }

/* Sign-up / nearest panel becomes the orange emphasis block. */
.theme-light .ps-panel {
  background: var(--ps-orange);
  color: var(--ps-ink);
}
/* Map + location list need a touch more definition on the pale page. */
.theme-light #ps-map,
.theme-light .ps-loc-list { box-shadow: 6px 6px 0 var(--ps-black); }

/* Slide 1 "find your strike" action sits in an orange focal card (mirrors the
   sign-up card on slide 2) — brings the brand orange into the hero. */
.theme-light .ps-find {
  margin-top: var(--s5);
  background: var(--ps-orange);
  border: 3px solid var(--ps-black);
  border-radius: var(--r-lg);
  box-shadow: 6px 6px 0 var(--ps-black);
  padding: var(--s6);
}
.theme-light .ps-find .ps-label { color: var(--ps-black); letter-spacing: 0.08em; }

/* ── Theme: dark ────────────────────────────────────────────
 * Black page; dirty-white text + shadows; yellow logo. Orange sign-up
 * card kept as the focal point. Toggle with class "theme-dark" on <body>.
 * ----------------------------------------------------------- */
.theme-dark { --ps-bg: var(--ps-black); --ps-ink: var(--ps-white); }

/* Hero text → dirty white (the .ps-black utility is only used in the hero). */
.theme-dark .ps-black,
.theme-dark .ps-readmore > summary { color: var(--ps-white); }

/* Logo → electric yellow. */
.theme-dark .ps-masthead__logo { background-color: var(--ps-yellow); }

/* Orange sign-up card stays the focal point, with dark text. */
.theme-dark .ps-panel { background: var(--ps-orange); color: var(--ps-black); }

/* Hard drop-shadows flip to dirty white so they read on black. */
.theme-dark .ps-btn--primary,
.theme-dark .ps-input:focus { box-shadow: 4px 4px 0 var(--ps-white); }
.theme-dark .ps-date { box-shadow: 2px 2px 0 var(--ps-white); }
.theme-dark .ps-panel,
.theme-dark #ps-map,
.theme-dark .ps-loc-list { box-shadow: 6px 6px 0 var(--ps-white); }

/* Location list is a white card, so keep its text dark (not the page's
   dirty-white body colour). */
.theme-dark .ps-loc-list { color: var(--ps-black); }

/* Map keeps a black border (defines its edge against the light tiles); the
   white drop-shadow lifts it off the black page. */
.theme-dark #ps-map { border-color: var(--ps-black); }

/* Postcode field: black border is invisible on black, so frame it in yellow. */
.theme-dark #ps-postcode { border-color: var(--ps-yellow); }

/* Subtle separation for the (also-dark) footer. */
.theme-dark .ps-footer { border-top: 2px solid rgba(236, 231, 220, 0.22); }

/* ── Theme: orange ──────────────────────────────────────────
 * Emergency Orange page with the logo/title in Electric Yellow. Black text,
 * black shadows, dirty-white sign-up card (the original look, yellow title).
 * Toggle with class "theme-orange" on <body>.
 * ----------------------------------------------------------- */
.theme-orange { --ps-bg: var(--ps-orange); }
.theme-orange .ps-masthead__logo { background-color: var(--ps-yellow); }

/* ── Responsive ─────────────────────────────────────────── */
/* Desktop: scale the hero up (it was only using a slice of the page) and add
   more breathing room at the top. */
@media (min-width: 880px) {
  :root { --ps-hero-col: 48rem; }
  .ps-hero__inner { padding-block: var(--s16) var(--s16); }
  .ps-lead { font-size: 1.4rem; }            /* width follows --ps-hero-col, matching the logo */
  .ps-masthead { padding-top: 2.8rem; }
  .ps-date { font-size: 1.1rem; padding: 5px 11px 3px; }
}

@media (max-width: 820px) {
  .ps-finder { grid-template-columns: 1fr; }
  #ps-map { min-height: 340px; }
}
@media (max-width: 540px) {
  .ps-panel { padding: var(--s5); }
}