/* ─── Modern site ───────────*
 * Carries the approved homepage identity (home_modern.css) to every other
 * Modern page: the shared header and footer, page headlines, controls, forms
 * and the content components. It only restyles the existing class hooks the
 * templates already render, so the markup Classic sees is unchanged. Every
 * selector is scoped to [data-theme="modern"]; the homepage composition uses
 * its own mh-* classes and is not reached by the page rules below. */

/* ─── Header and footer ─── */
[data-theme="modern"] .site-wordmark { font-family: var(--font-display); font-weight: 700; white-space: nowrap; }
[data-theme="modern"] .site-footer .display { font-family: var(--font-display); font-weight: 700; }
/* Plex Mono chips are wider than a system mono: tighten them on phones so the
   header row never pushes the page sideways. */
@media (max-width: 479px) {
  [data-theme="modern"] .site-chip { padding-inline: 0.55rem; letter-spacing: 0.06em; }
  [data-theme="modern"] .site-wordmark { font-size: 1.1rem; }
}

/* Focus is always a solid white ring: on black, it is the one cue that never
   depends on colour or motion. */
[data-theme="modern"] main a:focus-visible,
[data-theme="modern"] main button:focus-visible,
[data-theme="modern"] main summary:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

/* ─── Page headlines ─── */
/* A page title is the one oversized Basteleur moment on each page, the same
   voice as the homepage hero, sized so long titles still fit on a phone. */
[data-theme="modern"] main h1.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 9vw, 8.5rem);
  line-height: 0.86;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* Detail pages (an event, a media category) carry titles of any length. */
[data-theme="modern"] main h1.display.text-3xl { font-size: clamp(2.5rem, 6.5vw, 6rem); }
/* Account and sign-in panels are narrow: the same face at panel scale. */
[data-theme="modern"] main h1.display.text-2xl { font-size: clamp(2.25rem, 4vw, 3rem); line-height: 0.95; }
/* Section and item headings take the editorial grotesque in capitals. */
[data-theme="modern"] main h2.display,
[data-theme="modern"] main h3.display {
  font-family: var(--font-editorial);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
[data-theme="modern"] main .section-header__title { font-size: clamp(1.75rem, 4.5vw, 3.75rem); }

/* The wayfinding numeral reads as the homepage's light, oblique Basteleur. */
[data-theme="modern"] .section-numeral {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: oblique 12deg;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  color: var(--color-border-strong);
}

[data-theme="modern"] .editorial-row { border-top-color: var(--color-border-strong); }
[data-theme="modern"] .editorial-row:last-child { border-bottom: 1px solid var(--color-border-strong); }

/* ─── Buttons — the homepage CTA: a white slab, label opens up on hover ─── */
[data-theme="modern"] .btn {
  min-height: 3rem;
  padding: 0.75rem 1.25rem;
  font-family: var(--font-editorial);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
[data-theme="modern"] .btn:hover,
[data-theme="modern"] .btn:focus-visible { letter-spacing: 0.08em; }
@media (prefers-reduced-motion: no-preference) {
  [data-theme="modern"] .btn { transition: letter-spacing 450ms var(--ease-editorial), background-color 150ms, color 150ms; }
}
/* Secondary and destructive actions are outlined, so the one filled slab on a
   screen is always the primary action. */
[data-theme="modern"] .btn.bg-secondary,
[data-theme="modern"] .btn.border-destructive { background: transparent; color: #ffffff; border-color: #ffffff; }
[data-theme="modern"] .btn.bg-secondary:hover,
[data-theme="modern"] .btn.border-destructive:hover { background: #ffffff; color: #000000; }

/* ─── Forms ─── */
/* Fields sit on the black page with a 4.7:1 edge (WCAG 1.4.11) and a thick
   white focus ring; invalid fields add a heavier edge on top of the message. */
[data-theme="modern"] main .form-field__input,
[data-theme="modern"] main input[type="text"],
[data-theme="modern"] main input[type="email"],
[data-theme="modern"] main input[type="password"],
[data-theme="modern"] main input[type="url"],
[data-theme="modern"] main input[type="number"],
[data-theme="modern"] main input[type="tel"],
[data-theme="modern"] main input[type="file"],
[data-theme="modern"] main select,
[data-theme="modern"] main textarea {
  background: #000000;
  color: #ffffff;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  min-height: 2.75rem;
}
[data-theme="modern"] main .form-field__input:focus,
[data-theme="modern"] main input:focus-visible,
[data-theme="modern"] main select:focus-visible,
[data-theme="modern"] main textarea:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  border-color: #ffffff;
  box-shadow: none;
}
[data-theme="modern"] main .form-field__input.is-invalid,
[data-theme="modern"] main [aria-invalid="true"] { border: 2px solid #ffffff; }
[data-theme="modern"] main .form-field__label,
[data-theme="modern"] main form label { font-family: var(--font-sans); }
[data-theme="modern"] main .form-field__error::before { content: "Error: "; font-weight: 600; }
[data-theme="modern"] main input[type="checkbox"],
[data-theme="modern"] main input[type="radio"] { accent-color: #ffffff; }

/* Donation amounts: the chosen amount inverts, the native radio stays visible. */
[data-theme="modern"] .donation-amount { background: #000000; border-color: var(--color-border-strong); }
[data-theme="modern"] .donation-amount:has(input:checked) { background: #ffffff; color: #000000; border-color: #ffffff; }
[data-theme="modern"] .donation-amount:has(input:checked) input { accent-color: #000000; }
[data-theme="modern"] .donation-amount span { font-family: var(--font-editorial); font-weight: 700; }

/* ─── Alerts and flash — monochrome, so the message itself names the state ─── */
[data-theme="modern"] .alert {
  background: #000000;
  color: #ffffff;
  border: 1px solid var(--color-border-strong);
  border-left: 4px solid #ffffff;
}
[data-theme="modern"] .alert--alert,
[data-theme="modern"] .alert--warning { border-style: solid; border-color: #ffffff; border-left-width: 4px; }
[data-theme="modern"] .alert--success { background: #ffffff; color: #000000; border-color: #ffffff; }

/* ─── Events ─── */
[data-theme="modern"] .event-card { border-top-color: var(--color-border-strong); }
[data-theme="modern"] .event-card__date-line { color: #ffffff; }
[data-theme="modern"] .event-card__title { font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.05; }
[data-theme="modern"] .event-card__image { filter: grayscale(1) contrast(1.1); }
[data-theme="modern"] .event-card:hover .event-card__image,
[data-theme="modern"] .event-card:focus-visible .event-card__image { filter: grayscale(0) contrast(1); }
[data-theme="modern"] .event-card:hover .event-card__title,
[data-theme="modern"] .event-card:focus-visible .event-card__title { transform: translateX(0.75rem); }
@media (prefers-reduced-motion: no-preference) {
  [data-theme="modern"] .event-card__title { transition: transform 600ms var(--ease-editorial); }
}
[data-theme="modern"] .event-card:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; }
/* Status flags: "happening now" is the loudest, so it is the filled one. */
[data-theme="modern"] .event-flag { background: #000000; color: #ffffff; border: 1px solid #ffffff; }
[data-theme="modern"] .event-flag--active { background: #ffffff; color: #000000; }
[data-theme="modern"] .event-flag--past { color: #cccccc; border-color: var(--color-border-strong); }

[data-theme="modern"] .calendar-grid td,
[data-theme="modern"] .calendar-grid th { border-bottom-color: var(--color-border-strong); }
[data-theme="modern"] .calendar-day.is-today { box-shadow: inset 0 -3px 0 #ffffff; }

/* ─── Board — portraits in the homepage masthead's grayscale ─── */
[data-theme="modern"] .board-card { border-top-color: var(--color-border-strong); }
[data-theme="modern"] .board-card__image { filter: grayscale(1) contrast(1.15); }
[data-theme="modern"] .board-card:hover .board-card__image { filter: grayscale(1) contrast(1.15); }
[data-theme="modern"] .board-card__initial,
[data-theme="modern"] .partner-card__initial { font-family: var(--font-display); font-weight: 700; font-size: 6rem; color: #ffffff; }
[data-theme="modern"] .board-card__name { font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
[data-theme="modern"] .board-card__role { color: #cccccc; }

/* ─── Partners — logos on a white plate, where dark marks stay legible ─── */
[data-theme="modern"] .partner-card { border-top-color: var(--color-border-strong); }
[data-theme="modern"] .partner-card__mark { background: #ffffff; }
[data-theme="modern"] .partner-card__mark:has(.partner-card__initial) { background: var(--color-surface); }
[data-theme="modern"] .partner-card__image,
[data-theme="modern"] .partner-card:hover .partner-card__image { filter: none; }
[data-theme="modern"] .partner-card__name { font-size: clamp(1.4rem, 2.4vw, 2rem); }
[data-theme="modern"] .partner-card__link {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* ─── Media archive — the photos stay in colour; they are the content ─── */
[data-theme="modern"] .media-archive { border-top-color: var(--color-border-strong); }
[data-theme="modern"] .media-group { border-bottom-color: var(--color-border-strong); }
[data-theme="modern"] .media-group__title {
  font-family: var(--font-editorial);
  font-size: clamp(1.4rem, 3.2vw, 2.5rem);
  font-weight: 700;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

/* ─── Hand-Me-Downs and other content rules ─── */
[data-theme="modern"] .hmd-index { border-top-color: var(--color-border-strong); }
[data-theme="modern"] .hmd-course__name { font-family: var(--font-editorial); font-weight: 700; text-transform: uppercase; }

/* ─── Mobile menu — the homepage clip-path wipe with staggered links ─── */
[data-theme="modern"] #mobile-nav > nav {
  width: min(calc(100vw - 2rem), 22rem);
  padding: 0.75rem 1rem 1rem;
  background: #000000;
  border-color: #777777;
}
[data-theme="modern"] #mobile-nav > nav a {
  font-family: var(--font-editorial);
  font-size: 1.35rem;
  text-transform: uppercase;
}
[data-theme="modern"] #mobile-nav > nav a:hover,
[data-theme="modern"] #mobile-nav > nav a:focus-visible { background: transparent; padding-left: 1.25rem; }
[data-theme="modern"] #mobile-nav > nav a:focus-visible { outline: 2px solid #ffffff; outline-offset: -2px; }
@media (prefers-reduced-motion: no-preference) {
  [data-theme="modern"] #mobile-nav::details-content {
    transition: content-visibility 500ms allow-discrete;
  }
  [data-theme="modern"] #mobile-nav > nav {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 500ms var(--ease-editorial);
  }
  [data-theme="modern"] #mobile-nav[open] > nav { clip-path: inset(0 0 0 0); }
  [data-theme="modern"] #mobile-nav > nav a {
    opacity: 0;
    transform: translateY(-0.75rem);
    transition: opacity 300ms var(--ease-editorial), transform 500ms var(--ease-editorial), padding-left 300ms var(--ease-editorial);
  }
  [data-theme="modern"] #mobile-nav[open] > nav a { opacity: 1; transform: none; }
  [data-theme="modern"] #mobile-nav[open] > nav a:nth-child(2) { transition-delay: 30ms, 30ms, 0s; }
  [data-theme="modern"] #mobile-nav[open] > nav a:nth-child(3) { transition-delay: 60ms, 60ms, 0s; }
  [data-theme="modern"] #mobile-nav[open] > nav a:nth-child(4) { transition-delay: 90ms, 90ms, 0s; }
  [data-theme="modern"] #mobile-nav[open] > nav a:nth-child(5) { transition-delay: 120ms, 120ms, 0s; }
  [data-theme="modern"] #mobile-nav[open] > nav a:nth-child(6) { transition-delay: 150ms, 150ms, 0s; }
  [data-theme="modern"] #mobile-nav[open] > nav a:nth-child(7) { transition-delay: 180ms, 180ms, 0s; }
  [data-theme="modern"] #mobile-nav[open] > nav a:nth-child(n + 8) { transition-delay: 210ms, 210ms, 0s; }
  [data-theme="modern"] #mobile-nav summary svg { transition: transform 500ms var(--ease-editorial); }
  [data-theme="modern"] #mobile-nav[open] summary svg { transform: rotate(90deg); }
  @starting-style {
    [data-theme="modern"] #mobile-nav[open] > nav { clip-path: inset(0 0 100% 0); }
    [data-theme="modern"] #mobile-nav[open] > nav a { opacity: 0; transform: translateY(-0.75rem); }
  }
}