/* ============================================================================
   Ansofie Reeders — site styles.
   Colours, type and spacing all come from theme.css; edit colours there.
   ========================================================================= */

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

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

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

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: 0 0 var(--space-2);
    text-wrap: balance;
}

h1 { font-size: clamp(38px, 5.2vw, 64px); line-height: 1.05; }
h2 { font-size: clamp(28px, 3.4vw, 40px); }
h3 { font-size: 22px; }
h4 { font-size: 20px; }

p { margin: 0 0 var(--space-3); text-wrap: pretty; }

a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent); }

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.text-muted { color: var(--color-neutral-700); }

/* Softens a photograph so it sits inside the palette rather than fighting it. */
.washed { filter: saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94); }


/* --- Layout ------------------------------------------------------------- */

.wrap {
    max-width: var(--width-page);
    margin: 0 auto;
    padding-inline: var(--space-6);
}

/* Inner wrapper for the plain text pages (about, contact, testimonials): a
   narrower measure so long paragraphs stay readable. It sits flush left inside
   .wrap, so the text lines up with the brand in the header. */
.page {
    max-width: var(--width-prose);
    padding-block: var(--space-8);
}

.page p,
.page li { max-width: 65ch; }

.section { padding-block: var(--space-8); }


/* --- Navigation --------------------------------------------------------- */

.nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    padding-block: var(--space-6) var(--space-4);
}

.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: clamp(22px, 2.2vw, 27px);
    line-height: 1;
    letter-spacing: -0.01em;
    margin-right: auto;
    color: inherit;
    text-decoration: none;
}

.nav-brand:hover { color: var(--color-accent); }

/* The arc mark beside the name — the same mark as favicon.svg. Delete the
   <svg> in base.twig if a plain wordmark is preferred; nothing else depends
   on it. It takes its colours from the text, so it moves with the theme. */
.nav-brand-mark { width: 1.15em; height: 1.15em; flex: none; }

.nav-links { display: flex; gap: var(--space-6); align-items: center; }

.nav-links a { color: inherit; text-decoration: none; font-size: 15px; padding-block: 10px; }
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--color-accent); }


/* --- Buttons ------------------------------------------------------------ */

.btn,
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 15px;
    line-height: 1.2;
    color: var(--color-text);
    background: transparent;
    border: 1px solid transparent;
    padding: var(--space-3) calc(var(--space-6) * 0.8);
    border-radius: 999px;
}

.btn:disabled, button:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary,
button[type="submit"] {
    background: var(--color-accent-700);
    color: var(--color-bg);
}
.btn-primary:hover,
button[type="submit"]:hover { background: var(--color-accent-800); color: var(--color-bg); }
.btn-primary:active,
button[type="submit"]:active { background: var(--color-accent-900); }

.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }


/* --- Forms -------------------------------------------------------------- */

form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 520px;
}

form > div,
.field { display: flex; flex-direction: column; }

label,
.field-label {
    display: block;
    font-size: 13px;
    margin-bottom: 5px;
    color: var(--color-neutral-700);
}

/* Radios are laid out by hand below, so they opt out of the text-field look. */
.input,
input:not([type="radio"]):not([type="checkbox"]), textarea, select {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    font: inherit;
    font-size: 15px;
    color: var(--color-text);
    caret-color: var(--color-accent);
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: 999px;
}

textarea, textarea.input {
    min-height: 110px;
    resize: vertical;
    border-radius: var(--radius-lg);
}

input:hover, textarea:hover, select:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--color-accent); outline-offset: 0; }

/* Validation messages under a field */
form small { margin-top: var(--space-1); font-size: 13px; color: var(--color-accent-700); }

form button { align-self: flex-start; }

/* Radio group — a custom dot, since the native control cannot be recoloured. */
.radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding-top: var(--space-1);
}

.radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    cursor: pointer;
    font-size: 15px;
    color: var(--color-text);
}

.radio input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.radio .dot {
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 50%;
    border: 1.5px solid var(--color-divider);
}

.radio:hover .dot { border-color: var(--color-accent); }

.radio input:checked + .dot {
    border-color: var(--color-accent);
    background: var(--color-accent);
    box-shadow: inset 0 0 0 4px var(--color-bg);
}

.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }


/* --- Cards, tags, quotes ------------------------------------------------ */

.card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6);
    border-radius: calc(var(--radius-lg) * 1.15);
    background: var(--color-surface);
}

.card-kicker {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent-700);
}

.card-title {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 22px;
    line-height: 1.2;
    margin: var(--space-1) 0 var(--space-2);
}

.card-body { margin: 0; font-size: 15px; color: var(--color-neutral-800); flex: 1; }

.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

.tag {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    letter-spacing: 0.02em;
    padding: 4px 12px;
    border-radius: 999px;
}
.tag-accent   { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral  { background: var(--color-neutral-100); color: var(--color-neutral-800); }

/* Bare <blockquote>, as used on the testimonials page */
blockquote {
    margin: 0 0 var(--space-6);
    padding: var(--space-6);
    background: var(--color-neutral-200);
    border-radius: calc(var(--radius-lg) * 1.15);
    color: var(--color-neutral-800);
}
blockquote p:last-of-type { margin-bottom: var(--space-2); }


/* --- Grids -------------------------------------------------------------- */

.grid { display: grid; gap: var(--space-6); }
.grid-3   { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-fig { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-2   { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }


/* --- Home: hero --------------------------------------------------------- */

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-8);
    align-items: center;
    padding-block: var(--space-8) 0;
}

.hero .tag { margin-bottom: var(--space-4); }
.hero h1 { margin: 0 0 var(--space-4); }
.hero p { font-size: 19px; max-width: 46ch; margin: 0 0 var(--space-4); }
.hero p:last-of-type { margin-bottom: var(--space-6); }

.hero-portrait { position: relative; }

/* The soft sage shape sitting behind the photograph. */
.hero-portrait::before {
    content: "";
    position: absolute;
    inset: -6% -4% 12% 8%;
    background: var(--color-accent-2-200);
    border-radius: 999px;
}

/* The portrait file is already cropped to 7:10 (616x880 WebP), so `cover` has
   nothing to trim — the frame just restates the shape and keeps the layout
   stable if a differently-proportioned photo is ever swapped in. */
.hero-portrait img {
    position: relative;
    width: 100%;
    aspect-ratio: 7 / 10;
    object-fit: cover;
    border-radius: calc(var(--radius-lg) * 1.4);
    box-shadow: var(--shadow-md);
}


/* --- Home: figures ------------------------------------------------------ */

.figures {
    border-top: 1px solid var(--color-divider);
    padding-top: var(--space-6);
}

.figure-value {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 34px;
    line-height: 1.1;
    color: var(--color-accent-700);
}

.figure-note {
    margin: var(--space-1) 0 0;
    font-size: 15px;
    color: var(--color-neutral-700);
}


/* --- Home: section headings --------------------------------------------- */

.section-title { margin: 0 0 var(--space-6); max-width: 24ch; }
.section-title.tight { margin-bottom: var(--space-3); }

.section-lede {
    margin: 0 0 var(--space-6);
    max-width: 52ch;
    font-size: 17px;
    color: var(--color-neutral-700);
}


/* --- Home: the two-up highlight panel ----------------------------------- */

.panel {
    padding: var(--space-8);
    background: var(--color-accent-2-200);
}

/* Two-up panels centre their columns against each other, whether the grid is
   the panel itself (home) or nested inside it (the book waiting list). */
.grid.panel,
.panel > .grid { align-items: center; }

.panel h2 { font-size: clamp(26px, 3vw, 34px); margin: var(--space-2) 0 var(--space-3); }
.panel p  { margin: 0 0 var(--space-4); max-width: 44ch; }
.panel p.flush { margin-bottom: 0; }
.panel form { max-width: none; }
.panel-done { max-width: 46ch; }
.panel-done p { margin: 0; }


/* --- Home: testimonials ------------------------------------------------- */

.quote {
    padding: var(--space-6);
    background: var(--color-neutral-200);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    border-radius: calc(var(--radius-lg) * 1.15);
}

.quote-mark {
    font-family: var(--font-heading);
    font-size: 44px;
    line-height: 0.5;
    color: var(--color-accent-300);
}

.quote blockquote {
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-neutral-800);
}

.quote figcaption {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-accent-700);
}

/* One tile tinted sage, so the grid does not read as four identical blocks. */
.quote-alt { background: var(--color-accent-2-100); }
.quote-alt .quote-mark { color: var(--color-accent-2-400); }
.quote-alt figcaption { color: var(--color-accent-2-700); }


/* --- Footer ------------------------------------------------------------- */

.site-footer {
    padding-block: var(--space-6) var(--space-8);
    margin-top: var(--space-8);
    border-top: 1px solid var(--color-divider);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    justify-content: space-between;
    align-items: start;
}

.footer-brand { display: grid; gap: var(--space-1); }

.site-footer .nav-brand { margin-right: 0; font-size: clamp(20px, 2vw, 24px); }

.footer-note {
    margin: 0;
    max-width: 40ch;
    font-size: 14px;
    color: var(--color-neutral-700);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-6);
    font-size: 15px;
}

.footer-links a { color: inherit; text-decoration: none; padding-block: 10px; }
.footer-links a:hover { color: var(--color-accent); }


/* --- Inner pages: shared -------------------------------------------------
   About, Contact and Books use the same wide .wrap as the home
   page rather than the narrow .page measure, because each of them lays out
   in columns rather than as one running column of prose.
   ------------------------------------------------------------------------ */

.section-top    { padding-block: var(--space-8) var(--space-6); }
.section-bottom { padding-block: var(--space-6) var(--space-8); }

.page-title {
    font-size: clamp(36px, 4.8vw, 58px);
    line-height: 1.06;
    margin: 0 0 var(--space-4);
    max-width: 22ch;
}

.lead { font-size: 19px; margin: 0 0 var(--space-4); }
.lead.narrow { max-width: 40ch; margin-bottom: var(--space-6); }

.card-title.flush { margin-top: 0; }
.card-body.tight  { margin-bottom: var(--space-2); flex: none; }
.card-sage { background: var(--color-accent-2-200); }

.section-title.wide { max-width: none; }


/* --- About: intro columns, timeline, closing strip ---------------------- */

.prose-2col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-8);
    max-width: 900px;
}

.prose-2col p { font-size: 19px; margin: 0 0 var(--space-4); }

.timeline {
    display: grid;
    gap: var(--space-4);
    max-width: 860px;
}

.timeline-row {
    display: grid;
    grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
    gap: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-divider);
}

.timeline-row.last { padding-bottom: 0; border-bottom: 0; }

.timeline-when {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    color: var(--color-accent-700);
    font-size: 19px;
}

.timeline-what { margin: 0 0 var(--space-1); font-size: 21px; }
.timeline-note { margin: 0; color: var(--color-neutral-700); }

.cta-strip {
    border-top: 1px solid var(--color-divider);
    padding-top: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    align-items: center;
    justify-content: space-between;
}

.cta-strip p { margin: 0; font-size: 19px; max-width: 40ch; }


/* --- Contact: details column + form card -------------------------------- */

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-8);
    align-items: start;
    padding-block: var(--space-8);
}

.contact-details {
    display: grid;
    gap: var(--space-4);
    max-width: 34ch;
}

.contact-details > div {
    border-top: 1px solid var(--color-divider);
    padding-top: var(--space-3);
}

.contact-label { font-size: 12px; color: var(--color-neutral-700); }

.contact-value {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 19px;
}

.contact-note {
    margin: var(--space-6) 0 0;
    max-width: 36ch;
    font-size: 15px;
    color: var(--color-neutral-700);
}

.form-card { padding: var(--space-8); }
.form-card form { max-width: none; gap: var(--space-4); }


/* --- Books: intro and cover grid ---------------------------------------- */

.books-intro .tag { margin-bottom: var(--space-4); }
.books-intro .lead { max-width: 56ch; }
.books-intro .lead:last-of-type { margin-bottom: var(--space-6); }

/* One column per book. auto-fit rather than a fixed three, so the covers drop
   to two-up and then one-up on their own as the screen narrows. */
.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-8) var(--space-6);
    align-items: start;
}

/* Clears the sticky-free header enough that a /books#slug link does not land
   with the cover flush against the top of the window. */
.book-item { scroll-margin-top: var(--space-6); }

.book-item .card-kicker { display: block; margin-top: var(--space-6); }
.book-item-title { font-size: 22px; margin: var(--space-1) 0 var(--space-2); }
.book-item-body  { margin: 0; color: var(--color-neutral-800); }

.book-cover-frame { position: relative; }

/* The soft shape sitting behind each cover. */
.book-cover-frame::before {
    content: "";
    position: absolute;
    inset: -6% -5% 5% 5%;
    background: var(--color-accent-200);
    border-radius: 999px;
}

.book-cover-frame > * {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 18px;
    box-shadow: var(--shadow-md);
}

.book-cover-frame img { object-fit: contain; background: var(--color-surface); }

/* Stand-in covers, used until the artwork is dropped in. Three tints, so the
   shelf does not read as one book printed three times. */
.book-cover {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-4);
    background: var(--color-accent-700);
    color: var(--color-accent-100);
    text-align: center;
}

.book-cover-2 { background: var(--color-accent-2-800); color: var(--color-accent-2-100); }
.book-cover-3 { background: var(--color-neutral-800); color: var(--color-neutral-100); }

.book-cover-title {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: clamp(19px, 2.1vw, 25px);
    line-height: 1.15;
    margin-top: auto;
    text-wrap: balance;
}

.book-cover-author {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: auto;
}


/* --- Skip link ---------------------------------------------------------- */

/* Off-screen until it is tabbed to, then the first stop on every page. */
.skip-link {
    position: fixed;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 20;
    transform: translateY(calc(-100% - var(--space-6)));
    padding: var(--space-2) var(--space-4);
    background: var(--color-accent-700);
    color: var(--color-bg);
    border-radius: 999px;
    font-size: 15px;
    text-decoration: none;
}

.skip-link:focus-visible { transform: none; color: var(--color-bg); }

/* The skip link's target — focusable, but it should not draw a ring. */
main:focus { outline: none; }


/* --- Forms: error summary and fieldsets --------------------------------- */

/* Sits at the top of a form that failed validation and takes focus on load,
   so the problem is announced rather than left to be spotted. The inline
   messages under each field stay as well — this is in addition, not instead. */
.form-errors {
    padding: var(--space-3) var(--space-4);
    background: var(--color-accent-100);
    border: 1px solid var(--color-accent-700);
    border-left-width: 4px;
    border-radius: var(--radius-md);
}

.form-errors-title {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    margin: 0 0 var(--space-1);
    color: var(--color-accent-800);
}

.form-errors ul { margin: 0; padding-left: var(--space-4); font-size: 14px; }
.form-errors li + li { margin-top: 2px; }
.form-errors a { color: var(--color-accent-800); }

/* A fieldset is not a dependable flex container, so the radio group — which
   is the only one on the site — opts back into ordinary block flow. */
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.field { display: block; }
legend { padding: 0; }


/* --- Confirmation and error pages --------------------------------------- */

/* Narrower than the full page width: one card and a short list read better
   at this measure. Declared after .wrap so it wins on the shared element. */
.confirm {
    display: grid;
    gap: var(--space-8);
    max-width: 860px;
    padding-block: var(--space-8);
}

.confirm-card { padding: var(--space-8); align-items: start; }

.confirm-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--space-2);
    border-radius: 50%;
    background: var(--color-accent-2-200);
    color: var(--color-accent-2-800);
}

.confirm-mark svg { width: 26px; height: 26px; }

.confirm-title {
    font-size: clamp(32px, 4vw, 46px);
    margin: var(--space-1) 0 var(--space-3);
}

.confirm-card .lead { max-width: 46ch; margin-bottom: var(--space-6); }

.confirm-next .section-title { font-size: 26px; }

/* A card that is itself a link — used for the onward routes off a thank-you
   page, so the whole tile is the target rather than a few words of it. */
.card-link { text-decoration: none; color: inherit; }
.card-link:hover { color: inherit; box-shadow: var(--shadow-md); }
.card-link:hover .card-title { color: var(--color-accent-700); }


/* --- Testimonials page --------------------------------------------------- */

.quote-grid { align-items: start; }

.empty-note {
    margin: 0;
    font-size: 17px;
    color: var(--color-neutral-700);
}


/* --- Motion -------------------------------------------------------------- */

/* Hover and focus states used to snap. Short enough not to feel laggy on a
   click, and skipped entirely for anyone who has asked for less movement. */
@media (prefers-reduced-motion: no-preference) {
    a, .btn, button, .card-link, .radio .dot,
    input, textarea, select {
        transition: background-color 140ms ease, color 140ms ease,
                    border-color 140ms ease, box-shadow 140ms ease;
    }
}


/* --- Responsive --------------------------------------------------------- */

@media (max-width: 860px) {
    .hero,
    .contact-layout {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    .hero-portrait { max-width: 420px; }
    .panel, .form-card { padding: var(--space-6); }

    /* Dates sit above the role rather than beside it. */
    .timeline-row { grid-template-columns: 1fr; gap: var(--space-2); }
}

@media (max-width: 560px) {
    .wrap { padding-inline: var(--space-4); }
    .nav { gap: var(--space-3); }
    .nav-links { gap: var(--space-4); flex-wrap: wrap; }
    .hero p, .lead, .prose-2col p, .cta-strip p { font-size: 17px; }
    .site-footer { flex-direction: column; gap: var(--space-3); }
    .footer-links { flex-direction: column; gap: var(--space-2); }
    .radio-row { flex-direction: column; gap: var(--space-2); }
    .cta-strip { gap: var(--space-4); }
}