/* honeydogmedia.com — tokens from docs/HONEYDOGMEDIA-DESIGN.md §2. Fonts are self-hosted (no third-party requests). */

@font-face { font-family: "Nixie One"; src: url("../fonts/nixie-one-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Antic"; src: url("../fonts/antic-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* brand palette */
  --forest: #153B35;  --sage: #9FA57D;  --mist: #C2D0BA;
  --honey: #CC8733;   --honey-light: #E9BE72;  --honey-deep: #8A5E1F;
  --earth: #69391D;   --sand: #F2EBDD;  --sand-light: #FAF6EE;
  --linen: #E4D4B7;   --night: #0F2622;
  --drip: #EB9E20;    --cream: #FAEBD4;

  /* semantic (light) */
  --surface: var(--sand);
  --surface-raised: var(--sand-light);
  --surface-sunken: var(--linen);
  --ink: var(--forest);
  --ink-muted: var(--earth);
  --accent-text: var(--honey-deep);
  --action: var(--forest);
  --on-action: var(--sand);
  --action-hover: #0F2C27;
  --line: #D8C9AD;
  --control-border: #8A7354;
  --focus: var(--honey-deep);

  /* type */
  --font-display: "Nixie One", "Courier Prime", Georgia, serif;
  --font-title: "Antic", "Outfit", system-ui, sans-serif;
  --font-body: "Garet", "Outfit", system-ui, sans-serif;

  /* space & shape */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 28px; --radius-pill: 999px;
  --shadow-soft: 0 1px 2px rgb(21 59 53 / .08), 0 8px 24px rgb(21 59 53 / .08);
  --ease: cubic-bezier(.2, .7, .2, 1);

  --gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: var(--night); --surface-raised: var(--forest); --surface-sunken: #14302A;
    --ink: var(--sand); --ink-muted: var(--mist); --accent-text: var(--honey-light);
    --action: var(--honey-light); --on-action: var(--forest); --action-hover: #F0CD8E;
    --line: #2B4A42; --control-border: #7A9A8C; --focus: var(--honey-light);
    --shadow-soft: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .3);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 400 16px/1.625 var(--font-body);
}
img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p, li { text-wrap: pretty; }
p { margin: 0 0 var(--space-4); }

a { color: var(--accent-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  background: var(--action); color: var(--on-action);
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-md);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: 680px; }

/* type scale (phone first) */
.display-xl { font: 400 44px/48px var(--font-display); letter-spacing: -0.01em; }
.display-md { font: 400 30px/38px var(--font-display); }
.title-lg  { font: 400 30px/38px var(--font-title); }
.title-md  { font: 400 22px/30px var(--font-title); }
.eyebrow {
  display: block; margin-bottom: var(--space-3);
  font: 700 13px/18px var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-text);
}
.lead { font-size: 18px; line-height: 30px; }
.muted { color: var(--ink-muted); }
.small { font-size: 14px; line-height: 22px; }

/* header */
.site-header {
  position: sticky; top: env(safe-area-inset-top); z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 72px;
}
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand img { height: 44px; width: auto; }
.site-nav ul { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-3);
  font: 400 18px/26px var(--font-title); color: var(--ink); text-decoration: none;
}
.site-nav a:hover { text-decoration: underline; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--honey); text-decoration-thickness: 2px; }
.site-nav .nav-cta { display: none; }

/* buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); white-space: nowrap;
  min-height: 44px; padding: 12px 24px; border-radius: var(--radius-md);
  font: 700 15px/20px var(--font-body); letter-spacing: .02em; text-decoration: none;
  border: 1.5px solid transparent;
}
.button-primary { background: var(--action); color: var(--on-action); }
.button-primary:hover { background: var(--action-hover); }
.button-secondary { background: transparent; color: var(--ink); border-color: var(--control-border); }
.button-secondary:hover { background: var(--surface-sunken); }
.site-nav .button { font: 700 15px/20px var(--font-body); padding: 12px 20px; margin-left: var(--space-2); }
.site-nav .button-primary, .site-nav .button-primary:hover { color: var(--on-action); text-decoration: none; }

/* sections */
.section { padding: var(--space-12) 0; }
.section-sunken { background: var(--surface-sunken); }
.section h2 { margin-bottom: var(--space-4); }

/* hero: diagonal split (signature) — logo panel in place of a photo until real photos of Honey exist */
.hero { padding: 0 0 var(--space-12); overflow: hidden; }
.hero-grid { display: grid; gap: var(--space-8); }
.hero-art {
  position: relative; order: -1;
  margin: 0 calc(-1 * var(--gutter));
  padding: var(--space-8) var(--gutter) var(--space-12);
  background: var(--sand-light);
}
.hero-art::after {
  /* short angled sage strip on phones */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px;
  background: var(--sage);
  clip-path: polygon(0 60%, 100% 0, 100% 100%, 0 100%);
}
.hero-art img { width: min(260px, 70%); margin: 0 auto; }
.hero-copy h1 { margin-bottom: var(--space-6); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* in dark mode the logo panel keeps its light ground so the full-colour lockup reads */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-art { background: var(--sand-light); }
}

/* product tile */
.product-tile {
  display: grid; gap: var(--space-6); align-items: center;
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow-soft);
}
.product-tile .product-logo {
  background: #0E1013; border-radius: var(--radius-md); padding: var(--space-6);
  display: flex; justify-content: center;
}
.product-tile .product-logo img { width: min(220px, 100%); }
.product-tile h3 { margin-bottom: var(--space-2); }
.product-tile p { color: var(--ink-muted); }

/* forest band with motif */
.band-forest { background: var(--forest); color: var(--sand); position: relative; overflow: hidden; }
.band-forest .eyebrow { color: var(--honey-light); }
.band-forest a { color: var(--honey-light); }
.band-forest .motif { display: none; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 300px; pointer-events: none; }
.band-forest .container { position: relative; }

/* contact card */
.cards { display: grid; gap: var(--space-6); }
.card {
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.card h3 { margin-bottom: var(--space-2); }
.card p:last-child { margin-bottom: 0; }
.card .big-link { font: 400 20px/28px var(--font-title); word-break: break-word; }
address { font-style: normal; }

/* inner pages and policy */
.page-head { padding: var(--space-12) 0 var(--space-6); }
.page-head h1 { margin-bottom: var(--space-4); }
.prose { max-width: 680px; padding-bottom: var(--space-16); }
.prose h2 { font: 400 26px/34px var(--font-title); margin: var(--space-12) 0 var(--space-3); }
.prose h3 { font: 400 20px/28px var(--font-title); margin: var(--space-6) 0 var(--space-2); }
.prose ul { padding-left: 1.25em; margin: 0 0 var(--space-4); }
.prose li { margin-bottom: var(--space-2); }
.draft-banner {
  border-left: 4px solid var(--honey); background: var(--surface-raised);
  padding: var(--space-3) var(--space-4); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-weight: 700; margin-bottom: var(--space-4);
}
.meta { font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.confirm { background: #FFF1C2; color: #3D2A0A; padding: 0 3px; border-radius: 3px; font-weight: 700; }

/* footer: night in both themes */
.site-footer { background: var(--night); color: var(--sand); padding: var(--space-12) 0 var(--space-8); font-size: 14px; line-height: 22px; }
.site-footer a { color: var(--honey-light); }
.site-footer .footer-logo img { width: 220px; }
.site-footer .footer-grid { display: grid; gap: var(--space-6); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.site-footer ul a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer .legal { margin: 0; color: var(--mist); }

/* tablet */
@media (min-width: 640px) {
  :root { --gutter: 32px; }
  .brand img { height: 60px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .product-tile { grid-template-columns: 220px 1fr; padding: var(--space-8); }
}

/* desktop */
@media (min-width: 960px) {
  :root { --gutter: 48px; }
  .display-xl { font-size: 72px; line-height: 76px; }
  .display-md { font-size: 36px; line-height: 44px; }
  .section { padding: var(--space-16) 0; }
  .brand img { height: 64px; }
  .hero { padding: 0; }
  .hero-grid { grid-template-columns: 7fr 5fr; gap: 0; align-items: stretch; min-height: 520px; }
  .hero-copy { padding: var(--space-16) var(--space-12) var(--space-16) 0; align-self: center; }
  .hero-art {
    order: 0; margin: 0 calc(-1 * (var(--gutter) + max(0px, (100vw - 1200px) / 2))) 0 0; padding: var(--space-16) var(--space-12) var(--space-16) 30%;
    display: flex; align-items: center;
    clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  }
  .hero-art::after {
    /* sage band leaning ~22° off vertical */
    top: 0; bottom: 0; left: 0; right: auto; width: 34%; height: auto;
    clip-path: polygon(64% 0, 100% 0, 36% 100%, 0 100%);
  }
  .hero-art img { width: 100%; max-width: 300px; }
  .page-head { padding: var(--space-16) 0 var(--space-8); }
  .site-footer .footer-grid { grid-template-columns: 1fr auto; align-items: end; }
  .band-forest .motif { display: block; right: max(48px, calc((100vw - 1200px) / 2 + 48px)); }
}

@media (prefers-reduced-motion: no-preference) {
  .button, .site-nav a { transition: background-color 200ms var(--ease), color 200ms var(--ease); }
}
.prose a { overflow-wrap: anywhere; }
/* honey-deep is only approved on sand / sand-light (§3); use earth on linen bands */
.section-sunken .eyebrow { color: var(--ink-muted); }

/* ---- Home hero and "Supporting youth sports" section, from the Canva mockup (2026-10-26) ---- */
@font-face { font-family: "Bebas Neue"; src: url("../fonts/bebas-neue-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --clay: #965A45;        /* ribbon; deepened from the mockup's #A96A54 for contrast */
  --clay-light: #FDE9D2;  /* "connecting communities" on clay (4.6:1) */
  --cream: #FFFDF7;       /* supporters section ground */
  --charcoal: #201E1F;    /* supporters section text */
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.hero-photo { background: #2a2116; }
.hero-photo h1 { margin: 0; line-height: 0; }
.hero-photo img { width: 100%; height: auto; aspect-ratio: 1366 / 768; object-fit: cover; }

/* the supporters section keeps its light ground in both themes, as in the mockup */
.supporters { background: var(--cream); color: var(--charcoal); padding: var(--space-8) 0 var(--space-12); }
.supporters :focus-visible { outline-color: #8A5E1F; }

.ribbon {
  position: relative; display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center;
  column-gap: var(--space-2);
  background: var(--clay); color: var(--cream);
  padding: var(--space-3) 32px var(--space-4);
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%, 18px 50%);
  margin: 0 calc(-1 * var(--gutter) + 8px) var(--space-8);
  text-transform: uppercase; text-align: center;
}
.ribbon-top {
  grid-column: 1 / -1;
  font: 400 clamp(17px, 3.4vw, 34px)/1 var(--font-body); letter-spacing: -0.01em; color: var(--clay-light);
}
.ribbon-arrow { width: clamp(24px, 3.6vw, 48px); height: auto; color: var(--cream); justify-self: end; }
.ribbon-bottom { font: 400 clamp(26px, 4.6vw, 46px)/1 "Bebas Neue", "Oswald", "Arial Narrow", sans-serif; letter-spacing: .01em; justify-self: start; }

.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); justify-items: center; text-align: center; }
.flow-step p { margin: 0 0 var(--space-3); font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; max-width: 18em; }
.flow-step strong { font-weight: 700; }
.flow-logo { display: inline-block; border-radius: 22%; }
.flow-logo img { width: 170px; }
.flow-supporter img { width: min(360px, 88vw); }
.flow-grow img { width: min(280px, 80vw); }
.flow-arrow { height: 52px; display: flex; align-items: center; justify-content: center; }
.flow-arrow svg { width: 44px; height: 22px; fill: #0D0D0D; transform: rotate(90deg); }

.flow-cta { text-align: center; margin: var(--space-8) 0 0; }
.button-pill {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 240px;
  padding: 10px 32px; border: 1px solid var(--forest); border-radius: var(--radius-pill);
  color: var(--forest); text-decoration: none; text-transform: uppercase; letter-spacing: .02em; font: 400 17px/1 var(--font-body);
}
.button-pill:hover { background: var(--forest); color: var(--cream); }

@media (min-width: 960px) {
  .ribbon { margin-left: 0; margin-right: 0; grid-template-columns: auto auto auto; justify-content: space-between; padding: var(--space-3) 48px var(--space-4); }
  .ribbon-top { grid-column: auto; align-self: start; text-align: left; }
  .ribbon-arrow { align-self: center; margin-top: 8px; }
  .ribbon-bottom { align-self: end; }

  .flow {
    grid-template-columns: 1fr auto 1.35fr auto 1fr; align-items: end; justify-items: stretch; gap: var(--space-4);
    min-height: 380px;
  }
  .flow-step { display: flex; flex-direction: column; }
  .flow-families { align-items: flex-end; text-align: right; align-self: end; }
  .flow-families p { margin-bottom: var(--space-2); }
  .flow-families .flow-logo { align-self: center; }
  .flow-supporter { align-self: start; align-items: center; }
  .flow-supporter p { align-self: flex-end; text-align: right; margin-right: 18%; }
  .flow-supporter img { width: 100%; max-width: 440px; }
  .flow-grow { align-self: end; align-items: center; text-align: right; }
  .flow-grow p { align-self: flex-end; }
  .flow-arrow { align-self: center; height: auto; margin-top: 140px; }
  .flow-arrow svg { width: 56px; height: 28px; }
  .flow-arrow-up svg { transform: rotate(-36deg); }
  .flow-arrow-down svg { transform: rotate(36deg); }
  .flow-cta { margin-top: calc(-1 * var(--space-12)); position: relative; }
}

@media (prefers-reduced-motion: no-preference) {
  .button-pill { transition: background-color 200ms var(--ease), color 200ms var(--ease); }
}
.about-cta { margin-top: var(--space-8); }
@media (min-width: 768px) { .site-nav .nav-cta { display: list-item; } }
.page-head + .prose { margin-top: calc(-1 * var(--space-4)); }