/* uaclub.org.uk — base: fonts, type scale, resets, layout, bilingual switching */

/* ---------------------------------------------------------------
 * FONTS
 * Self-hosted: see assets/fonts/fonts.css, which is enqueued ahead of
 * this file. The prototypes' Google Fonts @import is gone — it was a
 * third-party request on every page view and, sitting inside this
 * stylesheet, it could not even start until this file had parsed.
 * --------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-voice);
  font-size: var(--text-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--brand-link); text-underline-offset: .18em; text-decoration-thickness: .07em; }
a:hover { color: var(--brand-strong); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

::selection { background: var(--accent); color: var(--brand-strong); }

.skip-link {
  position: absolute; left: var(--space-4); top: calc(-1 * var(--space-8));
  z-index: 100; background: var(--accent); color: var(--brand-strong);
  font-family: var(--font-ui); font-weight: 600; font-size: var(--text-small);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-button);
  transition: top .12s ease;
}
.skip-link:focus { top: var(--space-4); color: var(--brand-strong); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Type scale ---------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-voice); color: var(--brand-strong); margin: 0; text-wrap: balance; }
@media (prefers-color-scheme: dark) { h1, h2, h3, h4 { color: var(--ink); } }

.display { font-size: var(--text-display); line-height: 1.08; font-weight: 700; letter-spacing: -.022em; }
h1, .h1  { font-size: var(--text-h1); line-height: 1.15; font-weight: 700; letter-spacing: -.018em; }
h2, .h2  { font-size: var(--text-h2); line-height: 1.2;  font-weight: 700; letter-spacing: -.014em; }
h3, .h3  { font-size: var(--text-h3); line-height: 1.3;  font-weight: 600; }
h4, .h4  { font-size: 20px; line-height: 1.3; font-weight: 600; }

p { margin: 0 0 var(--space-4); orphans: 3; widows: 3; }
p:last-child { margin-bottom: 0; }

.lede { font-size: var(--text-lede); line-height: 1.55; color: var(--ink-soft); max-width: 46ch; }
.small { font-size: var(--text-small); line-height: 1.6; }
.caption { font-family: var(--font-ui); font-size: var(--text-caption); line-height: 1.5; color: var(--ink-soft); }
.measure { max-width: var(--measure); }

.overline {
  font-family: var(--font-ui);
  font-size: var(--text-overline);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--thread-red);
  margin: 0 0 var(--space-3);
}
.overline--gold { color: var(--accent); }
.overline--quiet { color: var(--ink-soft); letter-spacing: .1em; }

/* Anything the site *does* rather than *says* is set in the sans. */
.ui, nav, button, label, input, select, textarea, th, td, time, .badge, .btn, .meta {
  font-family: var(--font-ui);
}

.meta { font-size: var(--text-caption); font-weight: 600; color: var(--ink-soft); }

/* ---- Layout -------------------------------------------------- */
.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---- Header, main, footer sit flush ---------------------------
 * WordPress puts `--wp--style--block-gap` (24px) as a margin between every top-level block in
 * .wp-site-blocks, so a cream strip appeared under the header and again above the footer — most
 * visible on the home page, where the hero should run straight off the navigation. The design gives
 * every band its own padding; nothing is meant to sit between these three.
 * --------------------------------------------------------------- */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer { margin-block-start: 0; margin-block-end: 0; }
.wrap--narrow { max-width: 780px; }

.band { padding-block: var(--space-8); }
.band--quiet { background: var(--surface-quiet); }
.band--deep { background: var(--surface-deep); color: var(--ink-inverse); }
.band--deep h1, .band--deep h2, .band--deep h3 { color: var(--ink-inverse); }
.band--deep a { color: var(--ink-inverse); }

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

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

.row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.row--between { justify-content: space-between; align-items: baseline; }

.section-head { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; align-items: baseline; margin-bottom: var(--space-5); }

hr.rule { border: 0; border-top: 1px solid var(--line); margin: var(--space-7) 0; }

/* Desktop: content column beside a sub-navigation sidebar */
/* minmax(0, 1fr), not the implicit `auto`: an auto column is sized by its widest unbreakable
 * content, so one long Ukrainian link label stretched the single-column phone layout to 423px
 * inside a 375px screen and gave the whole page a horizontal scrollbar. */
.with-subnav { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .with-subnav { grid-template-columns: 250px minmax(0, 1fr); gap: var(--space-8); }
}

/* ---- Bilingual switching -------------------------------------
 * Scoped under body on purpose: <html> itself carries lang="uk"
 * when Ukrainian is active, so an unscoped [lang="uk"] would match
 * <html> and hide the whole document.
 * -------------------------------------------------------------- */
body [lang="uk"] { display: none; }
html[data-lang="uk"] body [lang="en"] { display: none; }
html[data-lang="uk"] body [lang="uk"] { display: revert; }

/* Show a block only in one language WITHOUT lying about the lang of the
 * text inside it — used for tier-2 pages: English body, Ukrainian summary. */
body [data-show-when="uk"] { display: none; }
html[data-lang="uk"] body [data-show-when="en"] { display: none; }
html[data-lang="uk"] body [data-show-when="uk"] { display: revert; }
html[data-lang="uk"] body [data-show-when="uk"] [lang="uk"] { display: revert; }
body [data-show-when="en"] [lang="uk"] { display: revert; }

/* ---- Print ---------------------------------------------------- */
@media print {
  .site-header, .lang-switch, .skip-link { display: none; }
  body { background: #fff; }
  a { text-decoration: none; }
}