/* cfc-2026: CrossFit Chiltern website theme. Mobile first.
   Colour rules (WCAG AA, measured):
   - Logo green #73CE42 is never text on cream or white (1.8:1). It is a background behind charcoal
     text (8.8:1), or text on charcoal (8.8:1) and deep green (4.6:1).
   - Body text is charcoal on cream (15.6:1). Links are deep green on cream (8.2:1).
   - Focus ring: charcoal on light sections, logo green on dark sections. */

/* ---------- Fonts (self-hosted, no external calls) ---------- */
@font-face {
    font-family: "Anton";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/anton-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Hanken Grotesk";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/hanken-grotesk-latin-400-italic.woff2") format("woff2");
}
@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/hanken-grotesk-latin-700-normal.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
    --green: #73CE42;
    --deep-green: #2D4F3D;
    --charcoal: #1A1A1A;
    --cream: #F5F2EC;
    --white: #FFFFFF;

    --text: var(--charcoal);
    --link: var(--deep-green);
    --focus: var(--charcoal);

    --font-heading: "Anton", "Arial Narrow", Impact, sans-serif;
    --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

    --gutter: 1.25rem;
    --measure: 42rem;
    --wide: 72rem;
    --tap: 44px;
    --radius: 6px;
}

.on-dark {
    --text: var(--white);
    --link: var(--white);
    --focus: var(--green);
    color: var(--text);
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 1rem;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background: var(--cream);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
}

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

h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.01em;
    margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.25rem, 8vw, 4rem); }
h2 { font-size: clamp(1.75rem, 5vw, 2.5rem); }
h3 { font-size: 1.375rem; }
h4, h5, h6 { font-weight: 700; margin: 0 0 0.5em; }

p, ul, ol, figure, blockquote { margin: 0 0 1.25em; }

a { color: var(--link); text-decoration-thickness: 0.08em; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 0.16em; }

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.skip-link {
    position: absolute;
    left: var(--gutter);
    top: -10rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    background: var(--charcoal);
    color: var(--white);
    --focus: var(--green);
}
.skip-link:focus { top: 0.5rem; }

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

[hidden] { display: none !important; }

/* ---------- Buttons ---------- */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    padding: 0.625rem 1.25rem;
    border: 2px solid var(--charcoal);
    border-radius: var(--radius);
    background: var(--green);
    color: var(--charcoal);
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.2;
    cursor: pointer;
}
.button:hover { background: var(--charcoal); color: var(--green); }
.on-dark .button { border-color: var(--green); }
.on-dark .button:hover { background: var(--cream); color: var(--charcoal); border-color: var(--cream); }

.button--quiet { background: transparent; color: var(--deep-green); border-color: var(--deep-green); }
.button--quiet:hover { background: var(--deep-green); color: var(--white); }

/* ---------- Header and navigation ---------- */
.site-header {
    background: var(--charcoal);
}
.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    max-width: var(--wide);
    margin: 0 auto;
    padding: 0.5rem var(--gutter);
}
.site-header__logo {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    margin-right: auto;
    text-decoration: none;
}
.site-header__logo img { height: 40px; width: auto; }
.site-header__title { font-family: var(--font-heading); font-size: 1.5rem; color: var(--white); }

.site-header__members {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0 0.5rem;
    font-size: 0.875rem;
}

.nav-toggle {
    min-height: var(--tap);
    min-width: var(--tap);
    padding: 0 1rem;
    border: 2px solid var(--white);
    border-radius: var(--radius);
    background: transparent;
    color: var(--white);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.site-nav {
    display: none;
    flex-basis: 100%;
    padding: 0.5rem 0 1rem;
}
.site-nav.is-open,
.no-js .site-nav { display: block; }

.site-nav__groups { list-style: none; margin: 0 0 1rem; padding: 0; }
.site-nav__group { border-top: 1px solid color-mix(in srgb, var(--white) 20%, transparent); }

.site-nav__heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: var(--tap);
    padding: 0.5rem 0;
    border: 0;
    background: none;
    color: var(--white);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.site-nav__heading::after {
    content: "";
    width: 0.5rem; height: 0.5rem;
    margin-right: 0.25rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}
.site-nav__heading[aria-expanded="true"]::after { transform: rotate(-135deg); }

.site-nav__links { list-style: none; margin: 0; padding: 0 0 0.5rem 1rem; }
.js .site-nav__heading[aria-expanded="false"] + .site-nav__links { display: none; }
.site-nav__links a {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    color: var(--white);
    text-decoration: none;
}
.site-nav__links a:hover { text-decoration: underline; }

.site-header__cta { flex: 1 1 auto; }

@media (min-width: 64em) {
    .site-header__inner { flex-wrap: nowrap; }
    .nav-toggle { display: none; }
    .site-header__cta { flex: 0 0 auto; white-space: nowrap; }
    .site-nav,
    .no-js .site-nav {
        display: flex;
        align-items: center;
        flex-basis: auto;
        gap: 1rem;
        padding: 0;
    }
    .site-nav__groups { display: flex; gap: 0.25rem; margin: 0; }
    .site-nav__group { position: relative; border: 0; }
    .site-nav__heading { width: auto; gap: 0.5rem; padding: 0.5rem 0.75rem; }
    .site-nav__links {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 10;
        min-width: 16rem;
        padding: 0.5rem 1rem;
        background: var(--charcoal);
        border-radius: 0 0 var(--radius) var(--radius);
    }
    .no-js .site-nav__links { display: none; }
    .no-js .site-nav__group:hover .site-nav__links,
    .no-js .site-nav__group:focus-within .site-nav__links { display: block; }
}

/* ---------- Main content ---------- */
.site-main { flex: 1 0 auto; outline: none; }

.page,
.post,
.listing,
.error-page {
    max-width: var(--wide);
    margin: 0 auto;
    padding: 2.5rem var(--gutter) 3rem;
}

.page-header { max-width: var(--measure); margin: 0 auto 2rem; }
.listing .page-header { max-width: none; }
.page-lede { font-size: 1.25rem; }
.post-meta { font-size: 0.9375rem; }
.post-meta a { display: inline-flex; align-items: center; min-height: var(--tap); }

.feature-image { margin: 1.5rem 0 0; }
.feature-image img { display: block; width: 100%; border-radius: var(--radius); }
figcaption { font-size: 0.875rem; margin-top: 0.5rem; }

.post-footer { max-width: var(--measure); margin: 2rem auto 0; }
.post-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; }
.post-tags a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 0.75rem; border: 1px solid var(--deep-green); border-radius: var(--radius); text-decoration: none; }

/* ---------- Ghost editor content ---------- */
.gh-content > * { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.gh-content > .kg-width-wide { max-width: var(--wide); }
.gh-content > .kg-width-full { max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.gh-content .kg-width-full img { width: 100%; }
.gh-content img { border-radius: var(--radius); }
.gh-content blockquote {
    padding-left: 1rem;
    border-left: 4px solid var(--deep-green);
    font-size: 1.125rem;
}

/* ---------- Blog listing ---------- */
.post-list {
    display: grid;
    gap: 2rem;
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
}
@media (min-width: 40em) { .post-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .post-list { grid-template-columns: repeat(3, 1fr); } }

.post-card__image { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); margin-bottom: 0.75rem; }
.post-card__title { font-size: 1.5rem; margin-bottom: 0.25rem; }
.post-card__title a { color: var(--charcoal); text-decoration: none; }
.post-card__title a:hover { text-decoration: underline; }
.post-card__meta { font-size: 0.875rem; margin-bottom: 0.5rem; }

.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; }

/* ---------- App widgets, prices and hours ---------- */
/* A sentence that needs a figure from the app stays hidden until cfc-widgets.js has filled it in
   (contract: never a typed figure, never "see the app"). */
[data-cfc-needs] { display: none !important; }
[data-cfc-needs].cfc-ready { display: revert !important; }

.cfc-widget {
    max-width: var(--measure);
    margin: 0 auto;
}
.gh-content .cfc-widget { margin-bottom: 1.25em; }
.cfc-widget iframe { display: block; width: 100%; border: 0; }
.cfc-widget__fallback {
    margin: 0;
    padding: 1.25rem;
    border: 2px solid var(--deep-green);
    border-radius: var(--radius);
    background: var(--white);
}

.cfc-widget__fallback a { display: inline-block; min-height: var(--tap); padding: 0.6rem 0; }

.book-section,
.class-times {
    max-width: var(--wide);
    margin: 3rem auto 0;
    padding: 2rem var(--gutter);
    border-radius: var(--radius);
}
.book-section { background: var(--deep-green); }
.book-section .cfc-widget__fallback { border-color: var(--green); color: var(--charcoal); }

/* Buttons in the page copy (Ghost button cards) use the theme's button. */
.gh-content .kg-button-card { display: flex; margin-top: 1.5rem; margin-bottom: 1.5rem; }
.gh-content .kg-button-card.kg-align-center { justify-content: center; }
.gh-content .kg-btn {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0.625rem 1.25rem;
    border: 2px solid var(--charcoal);
    border-radius: var(--radius);
    background: var(--green) !important;
    color: var(--charcoal) !important;
    font-weight: 700;
    text-decoration: none;
}
.gh-content .kg-btn:hover { background: var(--charcoal) !important; color: var(--green) !important; }

/* ---------- Custom page templates ---------- */
/* Home: a larger hero. */
.page--home .page-header { max-width: var(--wide); }
.page--home .page-title { font-size: clamp(2.5rem, 9vw, 5rem); max-width: 18ch; }
.page--home .page-lede { font-size: clamp(1.25rem, 3vw, 1.5rem); max-width: var(--measure); }

/* A headline written into the page itself (#own-headline) looks like the normal title. */
.gh-content > h1.page-title { max-width: var(--measure); font-size: clamp(2.25rem, 8vw, 4rem); }

/* Coaches: each coach (an h2 in the copy) starts a clearly separated block. */
.page--coaches .gh-content > h2 {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 2px solid var(--deep-green);
}
.page--coaches .gh-content > blockquote { font-style: italic; }

/* Timetable: the widget and its text use the full width. */
.page--timetable .gh-content > .kg-html-card,
.page--timetable .gh-content > .cfc-widget { max-width: var(--wide); }

/* Pricing: the price lists from the app read as a short list. */
.cfc-price-list { list-style: none; padding: 0; }
.cfc-price-list li { padding: 0.5rem 0; border-bottom: 1px solid color-mix(in srgb, var(--charcoal) 15%, transparent); }

/* ---------- Blog sign-up (Ghost members form) ---------- */
.blog-signup {
    max-width: var(--measure);
    margin: 3rem auto 0;
    padding: 1.5rem;
    border: 2px solid var(--deep-green);
    border-radius: var(--radius);
    background: var(--white);
}
.blog-signup__heading { font-size: 1.75rem; margin-bottom: 0.25rem; }
.blog-signup__lede { margin-bottom: 1rem; }
.blog-signup__label { display: block; font-weight: 700; margin-bottom: 0.25rem; }
.blog-signup__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.blog-signup__input {
    flex: 1 1 14rem;
    min-height: var(--tap);
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--charcoal);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--charcoal);
    font: inherit;
}
.blog-signup__button { flex: 0 0 auto; }
.blog-signup__messages { margin-top: 0.75rem; }
.blog-signup__message { display: none; margin: 0; font-weight: 600; }
.blog-signup__form.success .blog-signup__message--success,
.blog-signup__form.error .blog-signup__message--error { display: block; }
.blog-signup__form.loading .blog-signup__button { opacity: 0.7; cursor: progress; }
.blog-signup__form.success .blog-signup__row,
.blog-signup__form.success .blog-signup__label { display: none; }
.blog-signup__message a { display: inline-block; min-height: var(--tap); padding: 0.6rem 0; }

/* In the footer it sits on deep green, under the other footer columns. */
.site-footer .blog-signup {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    padding: 1.5rem 0 0;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--white) 25%, transparent);
    border-radius: 0;
    background: transparent;
}
.site-footer .blog-signup__input { border-color: var(--white); }

/* ---------- Footer ---------- */
.site-footer { background: var(--deep-green); }
.site-footer__inner {
    display: grid;
    gap: 1.5rem;
    max-width: var(--wide);
    margin: 0 auto;
    padding: 2.5rem var(--gutter);
}
@media (min-width: 48em) { .site-footer__inner { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer__name { font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: 0.5rem; }
.site-footer address { font-style: normal; margin-bottom: 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a,
.site-footer__contact a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
    .button, .site-nav__heading::after { transition: background-color 0.15s, color 0.15s, transform 0.15s; }
}