/*
 * geoffleask.com — the theme. Plain CSS, tokens first (Design Standards): the raw palette
 * is the WordPress site's (Elementor's global colours), expressed in OKLCH; components use
 * only the semantic tokens below it. No hardcoded colours past this block.
 *
 * The site is dark by design, in either colour scheme: the brand is a dark pixel-art
 * page, carried across like for like (docs/features/geoffleask.md, "Key decisions").
 */

:root {
  /* Raw palette — the brand as it was on WordPress. */
  --gl-ink:     oklch(0.243 0.019 262);  /* #1b2029 — the page */
  --gl-night:   oklch(0.179 0.004 286);  /* #111113 — the logo's own ground */
  --gl-ice:     oklch(0.971 0.041 193);  /* #d7fffd — Elementor's "primary" */
  --gl-gold:    oklch(0.861 0.176 92);   /* #fbcc05 — the logo's gold */
  --gl-violet:  oklch(0.543 0.290 299);  /* #8d05fb — the Adeptive card */
  --gl-white:   oklch(1 0 0);

  /* Semantic tokens — the only names components use. Validated pairs (WCAG 2.2):
     --text on --surface 16.3:1 · --text-quiet on --surface 15.3:1 ·
     --text on --surface-card 5.9:1 · --link and --focus on --surface 10.7:1.
     Text over a card's picture carries --text-halo, a dark glow under each glyph. */
  --surface:       var(--gl-ink);
  --surface-logo:  var(--gl-night);
  --surface-card:  var(--gl-violet);   /* a card with no picture */
  --text:          var(--gl-white);
  --text-quiet:    var(--gl-ice);
  --link:          var(--gl-gold);
  --focus:         var(--gl-gold);
  --card-wash:     oklch(0.660 0 0 / 0.075);  /* WordPress's #92929226 hover overlay at 0.5 */
  --text-halo:     0 0 0.12em oklch(0 0 0 / 0.9), 0 0 0.5em oklch(0 0 0 / 0.7);

  --wide:          71.25rem;  /* Elementor's 1140px container */
  --measure:       44rem;
  --gutter:        0.625rem;  /* its 10px container padding */
  --gap:           1.25rem;   /* its 20px widget spacing */
  --card-height:   37.5rem;   /* 600px */
  --section-space: 4.375rem;  /* 70px above each section heading */

  --motion-base:   200ms;
  --ease-out:      cubic-bezier(0.2, 0, 0, 1);

  --font-mono:      "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-condensed: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-serif:     "Roboto Serif", Georgia, "Times New Roman", serif;

  /* The gem's Markdown styles, on a dark page. */
  --rc-text:          var(--text);
  --rc-text-muted:    var(--text-quiet);
  --rc-accent:        var(--link);
  --rc-accent-strong: var(--gl-ice);
  --rc-border:        oklch(0.45 0.02 262);
  --rc-border-subtle: oklch(0.35 0.02 262);
  --rc-surface-alt:   oklch(0.29 0.02 262);
  --rc-font-mono:     var(--font-mono);
  --rc-info:          oklch(0.78 0.11 245);
  --rc-success:       oklch(0.80 0.14 150);
  --rc-warning:       var(--gl-gold);
  --rc-error:         oklch(0.75 0.15 25);
}

/* The WordPress site's faces, self-hosted: Roboto Mono, Roboto Condensed and Roboto Serif
   (SIL Open Font License — OFL.txt beside the files), Google's Latin subsets at the
   weights the theme uses; Roboto Condensed is the variable font. Nothing is fetched from
   a font service. WordPress also loaded Roboto Slab for body text the page never showed. */
@font-face {
  font-family: "Roboto Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/sites/geoffleask/roboto-mono-400-c740b844.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Condensed"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/sites/geoffleask/roboto-condensed-9cc6f7e9.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/sites/geoffleask/roboto-serif-400-c5a132cb.woff2") format("woff2");
}

/* --- base ---------------------------------------------------------------- */

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

html { color-scheme: dark; background: var(--surface); }

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

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

.gl-container { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }

.gl-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.gl-skip-link {
  position: absolute; z-index: 1; left: var(--gutter); top: var(--gutter);
  padding: 0.5rem 0.75rem; background: var(--surface); color: var(--link);
  font-family: var(--font-mono);
  translate: 0 -200%;
}
.gl-skip-link:focus { translate: 0 0; }

/* --- header -------------------------------------------------------------- */

.gl-header { display: flex; justify-content: center; padding-block: var(--gutter); }
.gl-logo { display: inline-block; line-height: 0; background: var(--surface-logo); }
.gl-logo img { width: min(4.25rem, 14vw); height: auto; }

/* --- home: sections of cards -------------------------------------------- */

.gl-main { padding-block: var(--gutter); }
.gl-sections { display: flex; flex-direction: column; gap: var(--gap); }

.gl-section-title {
  margin: var(--section-space) 0 var(--gap);
  font-family: var(--font-mono); font-weight: 400; font-size: 2rem; line-height: 1;
  text-align: center; text-transform: uppercase; text-wrap: balance;
  color: var(--text);
}

.gl-cards { display: flex; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.gl-cards > li { flex: 1 1 0; min-width: 0; }
@media (max-width: 47.9375rem) { .gl-cards { flex-direction: column; } }

.gl-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  min-height: var(--card-height); padding: var(--gutter);
  background: var(--surface); color: var(--text);
  text-align: center; text-decoration: none;
}
.gl-card--no-picture { background: var(--surface-card); }
.gl-card-picture {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
/* WordPress's hover overlay: a faint wash over the picture. */
.gl-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--card-wash); opacity: 0;
}
.gl-card:hover::after, .gl-card:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .gl-card::after { transition: opacity var(--motion-base) var(--ease-out); }
}
.gl-card:focus-visible { outline-offset: -3px; }

.gl-card-body { padding-bottom: 3.75rem; }
.gl-card-title, .gl-card-subtitle {
  margin: 0; font-family: var(--font-mono); font-weight: 400; line-height: 1;
  text-transform: uppercase; text-wrap: balance; text-shadow: var(--text-halo);
}
.gl-card-title { font-size: 2rem; }
.gl-card-subtitle { margin-top: var(--gap); font-size: 1.4rem; }

/* The card styles an item can name in its `style:` key. */
.gl-card--condensed-top { justify-content: flex-start; }
.gl-card--condensed-top .gl-card-body { padding: 3.125rem 0 0; }
.gl-card--condensed-top .gl-card-title { font-family: var(--font-condensed); letter-spacing: 0.02em; }
.gl-card--serif-bottom { justify-content: flex-end; }
.gl-card--serif-bottom .gl-card-body { padding: 0 0 3.125rem; }
.gl-card--serif-bottom .gl-card-title { font-family: var(--font-serif); font-size: 1.8rem; letter-spacing: 0.02em; }

/* --- plain pages --------------------------------------------------------- */

.gl-article { width: min(100% - 2 * var(--gutter), var(--measure)); margin-inline: auto; }
.gl-article h1 {
  margin: var(--section-space) 0 var(--gap);
  font-family: var(--font-mono); font-weight: 400; font-size: 2rem; line-height: 1.15;
  text-align: center; text-transform: uppercase; text-wrap: balance;
}
.gl-prose { margin-block-end: var(--section-space); }

/* --- footer -------------------------------------------------------------- */

.gl-footer {
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  min-height: 56.25rem; margin-top: 5rem; padding: var(--gutter) var(--gutter) var(--gap);
  background: var(--surface) url("/assets/sites/geoffleask/footer-d565197c.webp") center / cover no-repeat;
}
.gl-footer p {
  margin: 0;
  font-family: var(--font-condensed); font-weight: 300; font-size: 1.4rem; line-height: 1;
  letter-spacing: 0.02em; text-align: center; text-transform: uppercase;
  color: var(--text-quiet); text-shadow: var(--text-halo);
}

/* --- styleguide (development only) --------------------------------------- */

.gl-swatches { display: flex; flex-wrap: wrap; gap: var(--gap); margin: 0 0 var(--gap); padding: 0; list-style: none; }
.gl-swatch { display: grid; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.875rem; }
.gl-swatch span { display: block; width: 6rem; height: 3.5rem; border: 1px solid var(--rc-border); }
.gl-swatch--surface span      { background: var(--surface); }
.gl-swatch--surface-logo span { background: var(--surface-logo); }
.gl-swatch--surface-card span { background: var(--surface-card); }
.gl-swatch--text span         { background: var(--text); }
.gl-swatch--text-quiet span   { background: var(--text-quiet); }
.gl-swatch--link span         { background: var(--link); }