/*
 * Content pages -- home, FAQ, terms, privacy, contact, reviews, suggestions.
 *
 * These used to render through header.ejs, which shipped its own copy of
 * Bootstrap, its own theme system and a per-page <style> block, so they looked
 * like a different product from the tracker and the theme picker had no effect
 * on them. Everything here is built from the same nine theme tokens as the rest
 * of the app, which is what makes the theme follow across every view.
 */

/* ------------------------------------------------------------- page shells */

/* Prose reads badly at the tracker's full width; cap the measure. */
.page--narrow { max-width: 56rem; }
.page--mid { max-width: 68rem; }

.page__head {
    display: grid;
    gap: .5rem;
    padding: clamp(1.25rem, 4vw, 2.25rem) 0 .25rem;
    text-align: center;
}

.page__eyebrow {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--accent-solid);
}

.page__title {
    font-size: clamp(1.75rem, 4.5vw, 2.5rem);
    letter-spacing: -.025em;
}

.page__lead {
    max-width: 46rem;
    margin: 0 auto;
    color: var(--text-muted);
    font-size: 1.0625rem;
}

.page__stamp { font-size: .8125rem; color: var(--text-faint); }

/* -------------------------------------------------------------------- hero */

.hero {
    display: grid;
    gap: 1rem;
    justify-items: center;
    text-align: center;
    padding: clamp(2.5rem, 8vw, 5rem) clamp(1rem, 4vw, 2.5rem);
    background:
        radial-gradient(90rem 30rem at 50% -30%, color-mix(in srgb, var(--accent-solid) 18%, transparent), transparent 70%),
        var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.hero__title {
    max-width: 20ch;
    font-size: clamp(2rem, 6vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -.035em;
}

/* The accent is a gradient, so the headline picks it up through the text. */
.hero__title em {
    font-style: normal;
    background: var(--accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero__lead {
    max-width: 48ch;
    color: var(--text-muted);
    font-size: clamp(1rem, 2.2vw, 1.1875rem);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
    justify-content: center;
    margin-top: .5rem;
}

.hero__note { font-size: .8125rem; color: var(--text-faint); }

.btn--lg { padding: .75rem 1.375rem; font-size: 1rem; }

/* ---------------------------------------------------------------- features */

.feature-grid {
    display: grid;
    gap: .875rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.feature {
    display: grid;
    gap: .4375rem;
    align-content: start;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    transition: border-color .15s, background .15s;
}

.feature:hover {
    border-color: color-mix(in srgb, var(--accent-solid) 45%, var(--line));
    background: var(--surface-raised);
}

.feature__icon {
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    font-size: 1.125rem;
    background: var(--surface-raised);
    border-radius: var(--r);
}

.feature__title { font-size: 1rem; }
.feature__body { color: var(--text-muted); font-size: .9375rem; }

/* ------------------------------------------------------------------- prose */

/*
 * Terms and privacy. Headings and lists only -- no per-page <style> block and
 * no inline colours, so the whole document re-themes with everything else.
 */
.prose { display: grid; gap: .875rem; }

.prose h2 {
    margin-top: 1.5rem;
    padding-bottom: .4375rem;
    font-size: 1.1875rem;
    border-bottom: 1px solid var(--line);
}

.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: .625rem; font-size: 1rem; color: var(--accent-solid); }
.prose p { color: var(--text-muted); }

.prose ul {
    display: grid;
    gap: .375rem;
    margin: 0;
    padding-left: 1.125rem;
    color: var(--text-muted);
}

.prose li::marker { color: var(--accent-solid); }
.prose strong { color: var(--text); font-weight: 640; }
.prose a { color: var(--accent-solid); }

/* A pulled-out statement at the end of a policy. */
.callout {
    padding: 1rem 1.125rem;
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent-solid);
    border-radius: var(--r);
    color: var(--text-muted);
}

/* --------------------------------------------------------------------- faq */

.faq-group { display: grid; gap: .5rem; }

.faq-group__title {
    margin-top: .75rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-faint);
}

/*
 * <details>, not a div plus an onclick. The disclosure behaviour, the keyboard
 * handling and the accessible name all come free, and the page ships no JS.
 */
.faq-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}

.faq-item[open] { border-color: color-mix(in srgb, var(--accent-solid) 40%, var(--line)); }

.faq-item__q {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1.0625rem;
    font-weight: 620;
    cursor: pointer;
    list-style: none;
    transition: background .15s;
}

.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:hover { background: var(--hover); }
.faq-item__q:focus-visible { outline: none; box-shadow: var(--ring); }

.faq-item__q::after {
    content: "＋";
    margin-left: auto;
    color: var(--accent-solid);
    font-weight: 700;
    transition: transform .18s;
}

.faq-item[open] .faq-item__q::after { content: "－"; }

.faq-item__a {
    display: grid;
    gap: .5rem;
    padding: 0 1.0625rem 1rem;
    color: var(--text-muted);
    font-size: .9375rem;
}

.faq-item__a ul {
    display: grid;
    gap: .25rem;
    margin: 0;
    padding-left: 1.125rem;
}

.faq-item__a li::marker { color: var(--accent-solid); }
.faq-item__a code {
    padding: .0625rem .3125rem;
    font-family: var(--mono);
    font-size: .875em;
    background: var(--surface-raised);
    border-radius: var(--r-sm);
}

/* ------------------------------------------------------------------- split */

/* Form on the left, contact details on the right; stacks on narrow screens. */
.split {
    display: grid;
    gap: 1rem;
    align-items: start;
}

@media (min-width: 60rem) {
    .split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
    .split__aside { position: sticky; top: 4.5rem; }
}

.split__aside { display: grid; gap: .875rem; }

.info-list { display: grid; gap: .125rem; }

.info {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .625rem .5rem;
    border-radius: var(--r);
    color: inherit;
    text-decoration: none;
}

.info:hover { background: var(--hover); }
.info:hover .info__value { color: var(--accent-solid); }
.info__icon { font-size: 1.0625rem; line-height: 1.4; }
/* Label above value -- both are spans, so they need to be told not to sit inline. */
.info__body { display: grid; gap: .0625rem; }
.info__title { font-size: .6875rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }
.info__value { font-size: .9375rem; color: var(--text); }

/* ---------------------------------------------------------------- messages */

/* Inline form feedback, for the pages that show it in place of a toast. */
.msg {
    padding: .6875rem .875rem;
    border-radius: var(--r);
    font-size: .875rem;
    border: 1px solid transparent;
}

.msg--ok {
    color: var(--ok);
    background: color-mix(in srgb, var(--ok) 12%, transparent);
    border-color: color-mix(in srgb, var(--ok) 35%, transparent);
}

.msg--bad {
    color: var(--bad);
    background: color-mix(in srgb, var(--bad) 12%, transparent);
    border-color: color-mix(in srgb, var(--bad) 35%, transparent);
}

.msg--note {
    color: var(--text-muted);
    background: var(--surface-raised);
    border-color: var(--line);
}

/* ----------------------------------------------------------------- reviews */

.rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.375rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.rating__score {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.rating__meta { display: grid; gap: .1875rem; }
.rating__count { font-size: .875rem; color: var(--text-faint); }

.stars { display: inline-flex; gap: .0625rem; font-size: 1.0625rem; color: var(--text-faint); }
.stars--lg { font-size: 1.5rem; }
.star.is-on { color: var(--warn); }

/* The input version: same stars, but focusable and hover-previewed. */
.stars--input { gap: .125rem; font-size: 1.75rem; cursor: pointer; }
.stars--input .star {
    background: none;
    border: 0;
    padding: 0 .0625rem;
    color: var(--text-faint);
    line-height: 1;
    transition: color .12s, transform .12s;
}
.stars--input .star:hover { transform: scale(1.12); }
.stars--input .star:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

.review-list { display: grid; gap: .625rem; }

.review {
    display: grid;
    gap: .4375rem;
    padding: 1rem 1.125rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.review__head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.review__who { font-weight: 650; }
.review__date { margin-left: auto; font-size: .8125rem; color: var(--text-faint); }
.review__text { color: var(--text-muted); white-space: pre-wrap; }

.badge--verified {
    background: color-mix(in srgb, var(--ok) 18%, transparent);
    color: var(--ok);
}

/* -------------------------------------------------------------- site footer */

.sitefoot {
    display: grid;
    gap: .75rem;
    justify-items: center;
    padding: 2rem clamp(.875rem, 3vw, 1.75rem) 2.5rem;
    margin-top: auto;
    text-align: center;
    border-top: 1px solid var(--line);
}

.sitefoot__links {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    justify-content: center;
}

.sitefoot__links a {
    color: var(--text-muted);
    font-size: .875rem;
    text-decoration: none;
}

.sitefoot__links a:hover { color: var(--text); text-decoration: underline; }
.sitefoot__note { font-size: .8125rem; color: var(--text-faint); }

/*
 * The site footer sits at the bottom of a short page rather than mid-screen.
 * Scoped to a body class the content pages opt into -- the tracker and the
 * analytics page have no site footer and must keep their normal block layout.
 */
body.site { display: flex; flex-direction: column; min-height: 100vh; }
body.site > .page { flex: 1 0 auto; }