/* Reusable components: buttons, nav, cards, counters, forms, section headers. */

/* === Logo / wordmark === */
.wordmark {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-lg);
    color: var(--ink);
    text-decoration: none;
    letter-spacing: 0.02em;
}

.wordmark:hover { text-decoration: none; }
.wordmark span { color: var(--signal); }

/* === Nav links === */
.nav-link {
    color: var(--ink);
    text-decoration: none;
    padding-block: var(--space-2);
    border-bottom: 2px solid transparent;
}

.nav-link:hover,
.nav-link[aria-current='page'] {
    border-bottom-color: var(--signal);
}

/* === Mobile nav disclosure === */
.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: var(--border-width) solid var(--rule);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

@media (min-width: 900px) {
    .nav-toggle { display: none; }
}

.mobile-nav {
    display: none;
    flex-direction: column;
    gap: 0;
    border-top: var(--border-width) solid var(--rule);
    padding-block: var(--space-3);
}

.mobile-nav[data-open='true'] { display: flex; }

.mobile-nav .nav-link {
    padding-block: var(--space-3);
    border-bottom: var(--border-width) solid var(--rule);
    font-family: var(--font-mono);
}

@media (min-width: 900px) {
    .mobile-nav { display: none !important; }
}

/* === Theme toggle === */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--surface);
    border: var(--border-width) solid var(--rule);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--ink);
}

.theme-toggle svg { width: 18px; height: 18px; }

/* === Language switcher === */
.lang-switcher {
    position: relative;
}

.lang-switcher__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding-inline: var(--space-3);
    background: var(--surface);
    border: var(--border-width) solid var(--rule);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.lang-switcher__toggle:hover { border-color: var(--signal); }

.lang-switcher__menu {
    display: none;
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + var(--space-2));
    z-index: 20;
    min-width: 10rem;
    margin: 0;
    padding: var(--space-2);
    list-style: none;
    background: var(--surface);
    border: var(--border-width) solid var(--rule);
    border-radius: var(--radius-md);
}

.lang-switcher__menu.is-open { display: block; }

.lang-switcher__menu a {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--ink);
    text-decoration: none;
    font-size: var(--text-sm);
}

.lang-switcher__menu a:hover,
.lang-switcher__menu a:focus-visible { background: var(--paper); }
.lang-switcher__menu a[aria-current='true'] { color: var(--link); font-weight: 600; }

/* Hidden on the mobile nav's own inline language row (below), shown only for
   the desktop dropdown trigger — the mobile disclosure lists all locales
   inline instead of behind a second menu. */
@media (max-width: 899.98px) {
    .lang-switcher { display: none; }
}

.mobile-nav__langs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-block: var(--space-3);
    border-top: var(--border-width) solid var(--rule);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.mobile-nav__langs a { color: var(--ink); text-decoration: none; }
.mobile-nav__langs a[aria-current='true'] { color: var(--link); font-weight: 600; text-decoration: underline; }

@media (min-width: 900px) {
    .mobile-nav__langs { display: none; }
}

/* === Buttons === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
    border-radius: var(--radius-sm);
    border: var(--border-width) solid transparent;
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}

.btn:hover { transform: translateY(-2px); }

.btn--primary {
    background: var(--signal);
    color: var(--signal-ink);
}

.btn--secondary {
    background: transparent;
    color: var(--ink);
    border-color: var(--rule);
}

.btn--secondary:hover { border-color: var(--signal); }

.btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* === Section header ("ledger rule") — the secondary signature motif === */
.section-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.section-header__tag {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--link);
    white-space: nowrap;
    letter-spacing: 0.05em;
}

.section-header__rule {
    flex: 1;
    height: var(--border-width);
    background: var(--rule);
}

.section-header h2, .section-header h3 { margin: 0; }

/* === Cards === */
.card {
    background: var(--surface);
    border: var(--border-width) solid var(--rule);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.card:hover {
    transform: translateY(-4px);
    border-color: var(--signal);
}

.card__meta {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--muted);
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.card__title {
    font-size: var(--text-lg);
}

.card__title a {
    color: var(--ink);
    text-decoration: none;
}

.card__title a:hover { color: var(--signal); }

.card__pitch { color: var(--muted); font-size: var(--text-sm); }

.badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    padding: 2px var(--space-2);
    border: var(--border-width) solid var(--rule);
    border-radius: var(--radius-sm);
    color: var(--muted);
}

.badge--confidential { border-color: var(--signal); color: var(--link); }

/* === Tally counter — the primary signature element === */
.counter-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.counter {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    background: var(--paper);
    border: var(--border-width) solid var(--rule);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    min-width: 88px;
}

.counter__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.counter__value {
    font-family: var(--font-mono);
    font-weight: 700; /* bold, so its size+weight clears the WCAG "large text" 3:1 threshold at --signal's contrast */
    font-size: var(--text-md);
    color: var(--signal);
    font-variant-numeric: tabular-nums;
}

/* === Tag filter chips === */
.chip {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--rule);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}

.chip[aria-pressed='true'] {
    border-color: var(--signal);
    color: var(--link);
}

/* === FAQ === */
.faq-item {
    border-bottom: var(--border-width) solid var(--rule);
    padding-block: var(--space-4);
}

.faq-item summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: '+';
    font-family: var(--font-mono);
    color: var(--signal);
}

.faq-item[open] summary::after { content: '−'; }

.faq-item p { margin-top: var(--space-3); color: var(--muted); }

/* === Forms === */
.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-field label {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
}

.form-field input,
.form-field select,
.form-field textarea {
    background: var(--surface);
    border: var(--border-width) solid var(--rule);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    font-size: var(--text-base);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--signal);
}

.form-field textarea { resize: vertical; min-height: 8em; }

.form-field__hint { font-size: var(--text-xs); color: var(--muted); }

.form-field__error {
    font-size: var(--text-xs);
    color: #B3261E;
    font-family: var(--font-mono);
}

:root[data-theme='dark'] .form-field__error { color: #FF6B5E; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .form-field__error { color: #FF6B5E; }
}

[aria-invalid='true'] { border-color: #B3261E !important; }

/* honeypot field — visually hidden, still reachable by bots, not by screen readers via the accessible-hidden pattern */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* === Wizard progress ===
   The wizard is a JS progressive enhancement. Without JS, .js-wizard is never
   added, so the progress bar stays hidden and every fieldset stays visible —
   one long, still-submittable form. */
.wizard-progress { display: none; }

.js-wizard .wizard-progress {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--muted);
}

.js-wizard fieldset[data-step] { display: none; }
.js-wizard fieldset[data-step].is-active { display: block; }

.wizard-nav {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.wizard-progress__step {
    flex: 1;
    padding-bottom: var(--space-2);
    border-bottom: 3px solid var(--rule);
}

.wizard-progress__step[data-active='true'],
.wizard-progress__step[data-done='true'] {
    border-bottom-color: var(--signal);
    color: var(--ink);
}

/* === Breadcrumbs === */
.breadcrumbs {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--muted);
    margin-bottom: var(--space-5);
}

.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--link); }

/* === CTA band === */
.cta-band__text { max-width: 40ch; }

.cta-band {
    background: var(--surface);
    border: var(--border-width) solid var(--rule);
    border-radius: var(--radius-md);
    padding: var(--space-7);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

/* === Reveal-on-scroll (progressive enhancement, see reveal.js) === */
[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

[data-reveal='true'] {
    opacity: 1;
    transform: translateY(0);
}

.no-js [data-reveal] {
    opacity: 1;
    transform: none;
}