/* Components (DESIGN.md §6). */

/* Document */
html,body{background:var(--color-surface)}
body{color:var(--color-text);font-family:var(--font-sans);font-size:var(--fs-base);line-height:var(--lh-body);letter-spacing:var(--ls-body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-heading);color:var(--color-heading);font-feature-settings:"palt" 1}
a{color:var(--color-link);text-underline-offset:.3em}
a:hover{color:var(--color-link-hover)}
:focus-visible{outline:var(--focus-ring-width) solid var(--color-focus-ring);outline-offset:var(--focus-ring-offset)}

.skip-link{padding:12px 20px;border-radius:var(--radius-pill);background:var(--color-heading);color:var(--color-action-text);font-size:var(--fs-small);text-decoration:none}
.skip-link:hover{color:var(--color-action-text)}

/* Layout helpers */
.container{width:100%;max-width:calc(var(--container-max) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:calc(var(--container-narrow) + var(--gutter) * 2)}
.section{padding-block:var(--section-pad)}
.section[tabindex="-1"]:focus{outline:none}

/* Button — single colour, no gradients */
.button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--font-sans);font-weight:var(--fw-bold);letter-spacing:var(--ls-ui);line-height:1;border-radius:var(--radius-pill);border:var(--border-width) solid transparent;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
.button--md{min-height:48px;padding:0 30px;font-size:var(--fs-ui)}
.button--lg{min-height:58px;padding:0 44px;font-size:var(--fs-body-lg)}
.button--block{width:100%}
.button--solid{background:var(--color-action);color:var(--color-action-text)}
.button--solid:hover{background:var(--color-action-hover);color:var(--color-action-text)}
.button--outline{background:transparent;color:var(--color-heading);border-color:var(--color-border)}
.button--outline:hover{background:var(--color-bg);color:var(--color-heading);border-color:var(--color-heading)}
.button--alt{background:var(--color-link);color:var(--color-action-text)}
.button--alt:hover{background:var(--color-link-hover);color:var(--color-action-text)}
.button:active:not(:disabled):not([aria-disabled="true"]){transform:translateY(1px)}
.button:focus-visible{outline:var(--focus-ring-width) solid var(--color-focus-ring);outline-offset:var(--focus-ring-offset)}
.button:disabled,.button[aria-disabled="true"]{background:var(--color-disabled-bg);color:var(--color-disabled-text);border-color:transparent;cursor:not-allowed}
.button__arrow{display:inline-block;font-family:var(--font-latin);transition:transform 200ms var(--ease-standard)}
.button:hover .button__arrow{transform:translateX(3px)}
.button-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(32px,4vw,48px)}

/* Section heading */
.section-heading{max-width:820px;margin:0 auto var(--heading-gap);text-align:center}
.section-heading--left{margin-left:0;text-align:left}
.section-heading__title{margin:0;font-size:var(--fs-section);font-weight:var(--fw-medium);line-height:1.45;letter-spacing:var(--ls-heading);text-wrap:balance;word-break:auto-phrase}
.section-heading__lead{margin:clamp(20px,2.2vw,28px) 0 0;font-size:var(--fs-body);font-weight:var(--fw-regular);line-height:var(--lh-relaxed);letter-spacing:var(--ls-heading);color:var(--color-text);text-wrap:pretty;word-break:auto-phrase}
.section-heading--rule .section-heading__title::after{content:"";display:block;width:48px;height:3px;margin:clamp(14px,1.6vw,20px) auto 0;background:var(--color-link)}

/* Badge / tags */
.badge{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--radius-pill);font-size:var(--fs-caption);font-weight:var(--fw-bold);letter-spacing:.08em;line-height:1;background:var(--color-pending-bg);color:var(--color-pending-text);white-space:nowrap}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:var(--radius-tag);font-family:var(--font-sans);font-size:var(--fs-caption-xs);font-weight:var(--fw-bold);letter-spacing:.06em;line-height:1}
.tag--required{background:var(--color-required-bg);color:var(--color-required-text)}
.tag--optional{background:var(--color-surface);color:var(--color-text-sub);box-shadow:inset 0 0 0 1px var(--color-border)}

/* Card surface */
.card{background:var(--color-bg);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}

/* Site header */
.site-header{position:relative;z-index:20;background:var(--color-surface)}
.site-header--overlay{position:absolute;top:0;left:0;right:0;background:transparent}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--header-h);padding-inline:var(--gutter-header)}
.site-header__brand{font-size:var(--fs-brand);font-weight:var(--fw-medium);color:var(--color-heading);text-decoration:none;letter-spacing:.05em;white-space:nowrap}
.site-header__brand:hover{color:var(--color-heading)}
.site-header__nav{display:flex;align-items:center;gap:clamp(22px,2.6vw,44px)}
.site-header__links{display:flex;align-items:center;gap:clamp(22px,2.6vw,44px);list-style:none;margin:0;padding:0}
.site-header__link{font-size:var(--fs-nav);font-weight:var(--fw-regular);letter-spacing:.1em;color:var(--color-text);text-decoration:none;padding:10px 0;background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size var(--dur-base) var(--ease-standard)}
.site-header__link:hover,.site-header__link[aria-current="page"]{color:var(--color-heading);background-size:100% 1px}
.site-header__toggle{display:none;align-items:center;gap:10px;height:44px;padding:0 16px;border:var(--border-width) solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface);font-family:inherit;font-size:var(--fs-small);font-weight:var(--fw-bold);letter-spacing:.06em;color:var(--color-text);cursor:pointer}
.burger{position:relative;display:inline-block;width:16px;height:10px}
.burger::before,.burger::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform var(--dur-base) var(--ease-standard),top var(--dur-base),bottom var(--dur-base)}
.burger::before{top:0}.burger::after{bottom:0}
.site-header__toggle[aria-expanded="true"] .burger::before{top:4.25px;transform:rotate(45deg)}
.site-header__toggle[aria-expanded="true"] .burger::after{bottom:4.25px;transform:rotate(-45deg)}
.site-header__panel{position:absolute;top:100%;left:0;right:0;background:var(--color-surface);border-top:var(--border-width) solid var(--color-border);box-shadow:var(--shadow-panel);padding:4px var(--gutter) 28px}
.site-header__panel ul{list-style:none;margin:0;padding:0}
.site-header__plink{display:flex;align-items:center;min-height:58px;border-bottom:var(--border-width) solid var(--color-border);color:var(--color-text);text-decoration:none;font-weight:var(--fw-medium);letter-spacing:.05em}
.site-header__plink:hover,.site-header__plink[aria-current="page"]{color:var(--color-heading)}
.site-header__panel .button{margin-top:24px}
@media (max-width:899px){.site-header__nav{display:none}.site-header__toggle{display:inline-flex}}
@media (min-width:900px){.site-header__panel{display:none!important}}

/* Site footer */
.site-footer{position:relative;z-index:1;border-top:var(--border-width) solid var(--color-border);background:var(--color-surface);color:var(--color-text-sub)}
.site-footer__inner{padding-block:clamp(40px,5vw,64px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px 48px}
.site-footer__main{display:flex;flex-direction:column;gap:20px}
.site-footer__brand{font-size:var(--fs-brand);font-weight:var(--fw-medium);letter-spacing:.05em;color:var(--color-heading);text-decoration:none}
.site-footer__brand:hover{color:var(--color-heading)}
.site-footer__nav ul{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0;padding:0;list-style:none;font-size:var(--fs-small)}
.site-footer__nav a{color:var(--color-text-sub);text-decoration:none}
.site-footer__nav a:hover,.site-footer__nav a[aria-current="page"]{color:var(--color-heading);text-decoration:underline}
.site-footer__copy{margin:0;font-family:var(--font-latin);font-size:var(--fs-caption);color:var(--color-text-sub)}

/* Form */
.form{display:grid;gap:32px}
.form__alert{display:flex;align-items:flex-start;gap:10px;padding:16px 20px;border-radius:var(--radius-input);background:var(--color-bg);border:var(--border-width) solid var(--color-error);color:var(--color-error);font-weight:var(--fw-bold);font-size:var(--fs-small);line-height:1.7}
/* Error mark: a white "!" in a red circle, hidden from assistive technology (the message carries the meaning). */
.form__alert::before,.field__error::before{content:"!";content:"!" / "";flex:none;display:inline-grid;place-items:center;width:1.25em;height:1.25em;margin-top:.15em;border-radius:50%;background:var(--color-error);color:var(--color-action-text);font:700 .8em/1 var(--font-latin),sans-serif}
.form__alert:focus{outline:var(--focus-ring-width) solid var(--color-error);outline-offset:2px}
.form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
@media (max-width:767px){.form__grid{grid-template-columns:minmax(0,1fr)}}
.form__actions{display:flex;justify-content:center}
.form__actions .button{min-width:min(100%,320px)}
.form__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field{display:flex;flex-direction:column;gap:10px;min-width:0}
.field--full{grid-column:1/-1}
.field__label{display:flex;align-items:center;gap:10px;font-size:var(--fs-label);font-weight:var(--fw-medium);letter-spacing:.08em;line-height:1.5;color:var(--color-text)}
.input{width:100%;height:54px;padding:0 16px;font-family:var(--font-sans);font-size:16px;letter-spacing:.03em;color:var(--color-text);background:var(--color-bg);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-input);transition:border-color var(--dur-fast),box-shadow var(--dur-fast);appearance:none}
textarea.input{height:auto;min-height:168px;padding:14px 16px;line-height:1.8;resize:vertical}
.input::placeholder{color:var(--color-text-sub)}
.input:hover{border-color:var(--color-text-sub)}
.input:focus{outline:none;border-color:var(--color-focus-ring);box-shadow:0 0 0 4px var(--color-focus-halo)}
.input[aria-invalid="true"]{border-color:var(--color-error);background:var(--color-bg)}
.input[aria-invalid="true"]:focus{box-shadow:0 0 0 4px var(--color-error-halo)}
.field__hint{margin:0;font-size:var(--fs-caption);line-height:1.6;letter-spacing:.06em;color:var(--color-text-sub)}
.field__error{display:flex;align-items:flex-start;gap:6px;margin:0;font-size:var(--fs-caption);font-weight:var(--fw-bold);line-height:1.6;color:var(--color-error)}
.field--consent{align-items:center;text-align:center}
.check{display:flex;align-items:flex-start;gap:12px;font-size:var(--fs-small);line-height:1.7;letter-spacing:.06em;cursor:pointer}
.check input{flex:none;display:grid;place-items:center;width:22px;height:22px;margin:1px 0 0;border:1.5px solid var(--color-border);border-radius:5px;background:var(--color-bg);appearance:none;cursor:pointer;transition:background-color var(--dur-fast),border-color var(--dur-fast)}
.check input:hover{border-color:var(--color-text-sub)}
.check input:checked{background:var(--color-link);border-color:var(--color-link)}
.check input:checked::after{content:"";width:6px;height:11px;border:solid var(--color-action-text);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.check input:focus-visible{outline:var(--focus-ring-width) solid var(--color-focus-ring);outline-offset:2px}
.check input[aria-invalid="true"]{border-color:var(--color-error);background:var(--color-bg)}
.check .tag{margin-left:10px;vertical-align:2px}

/* Status pages (thanks / 404) */
.status-page{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.status-page__icon{width:64px;height:64px;border-radius:50%;background:var(--color-bg);border:var(--border-width) solid var(--color-border);color:var(--color-text);display:grid;place-items:center}
.status-page__icon .icon{width:28px;height:28px}
.status-page__code{font-family:var(--font-latin);font-size:var(--fs-reason-num);font-weight:var(--fw-semibold);letter-spacing:.12em;color:var(--color-heading)}
.status-page__title{margin:0;font-size:var(--fs-page-title);font-weight:var(--fw-bold);line-height:var(--lh-heading);letter-spacing:.04em;text-wrap:balance;word-break:auto-phrase}
.status-page__body{margin:0;color:var(--color-text-sub)}