/* Starter theme. globals.css (generated: node ~/CODE/FRONTPRESS/design/generate.js --config design/site.json
   --theme site/themes/<theme>) owns the palette, fluid type/space scale, reset and utilities in its layers.
   This file: site tokens on :root (UNLAYERED, so they win over the generated tokens layer), element base in
   @layer base, components in @layer custom (last layer, so it beats globals' base/components without !important).
   Class names: ACSS/AutoBEM, no project prefix, rem, tokens only. */

@layer reset, primitives, tokens, base, layout, components, utilities, custom;

/* ---------------------------------------------------------------- tokens (unlayered) */
:root {
  --ink: var(--text);
  --ink-soft: var(--text-soft);
  --paper: var(--surface);
  --paper-raised: var(--surface-raised);
  --line: var(--border);
  --line-strong: color-mix(in oklch, var(--text) 45%, var(--surface));
  --brand: var(--primary);
  --brand-hover: var(--primary-hover);
  --on-brand: oklch(99% 0 0);
  --error: var(--danger);

  --gutter: clamp(1rem, 0.6667rem + 1.4815vw, 2rem);      /* 16 at 360, 32 at 1440 */
  --header-h: 0px;                                         /* live header height, written by site.js */
  --anchor-gap: 0px;                                       /* extra gap under the header for hash targets */
  --control-h: 3rem;
  --control-pad: 0.75rem 1rem;
  --radius: var(--radius-m);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-shift: 1.5rem;
}

/* ---------------------------------------------------------------- base */
@layer base {
  /* scroll-padding = header height ONLY; the gap lives in the target's scroll-margin (they add). */
  html { scroll-padding-top: var(--header-h); }
  :where([id]), :target { scroll-margin-block: var(--anchor-gap) 0; }
  @media (prefers-reduced-motion: no-preference) {
    html:not(.lenis) { scroll-behavior: smooth; }
  }

  /* Paint the page on html, not body: body's sticky header would read as empty inner space to the rhythm guard. */
  html { background: var(--paper); }
  body { display: flex; flex-direction: column; min-block-size: 100svh; background: transparent; color: var(--ink); }
  main { flex: 1 0 auto; outline: none; }

  :where(p, li, figcaption, blockquote, dd) { text-wrap: pretty; }
  :where(p, li, figcaption, blockquote, dd):has(br) { text-wrap: wrap; }   /* WebKit crash guard */
  :where(h1, h2, h3, h4) { text-wrap: balance; }
  :where(h1, h2, h3) + * { margin-block-start: var(--space-s); }
  a { color: var(--brand); }
  @media (hover: hover) { a:hover { color: var(--brand-hover); } }
  :where(a[href^="tel:"], a[href^="mailto:"]) { white-space: nowrap; }
}

/* ---------------------------------------------------------------- Lenis (its own classes only: it strips any custom lenis-* class) */
@layer custom {
  html.lenis { scroll-behavior: auto; }
  html.lenis, html.lenis body { block-size: auto; }
  .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
  .lenis [data-lenis-prevent] { overscroll-behavior: contain; }
  .lenis.lenis-smooth iframe { pointer-events: none; }
}

/* ---------------------------------------------------------------- utilities + layout primitives */
@layer custom {
  .visually-hidden, .lead__trap, .lead__trap > * {
    position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .nowrap { white-space: nowrap; }

  .skip-link {
    position: fixed; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; z-index: 100;
    display: inline-flex; align-items: center; min-block-size: 2.75rem; padding-inline: 1rem;
    background: var(--ink); color: var(--paper); border-radius: var(--radius);
    text-decoration: none; transform: translateY(-200%);
  }
  .skip-link:focus-visible { transform: none; outline: 2px solid var(--brand); outline-offset: 2px; }
  .skip-link__text { display: inline-block; text-box: trim-both cap alphabetic; }

  :where(.hero__inner, .features__inner, .page, .prose-section, .site-footer__inner, .site-header__inner) {
    inline-size: min(100% - 2 * var(--gutter), var(--width-wide));
    margin-inline: auto;
  }
}

/* ---------------------------------------------------------------- buttons (label span trimmed: never trim a flex box) */
@layer custom {
  .button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
    min-block-size: 2.75rem; padding: 0 var(--space-m);
    border: 1px solid transparent; border-radius: var(--radius);
    font-weight: 600; text-decoration: none; cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .button__label { display: inline-block; text-box: trim-both cap alphabetic; white-space: nowrap; }
  .button--primary { background: var(--brand); color: var(--on-brand); }
  .button--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
  @media (hover: hover) {
    .button--primary:hover { background: var(--brand-hover); color: var(--on-brand); }
    .button--ghost:hover { border-color: var(--ink); color: var(--ink); }
  }
  .button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .button--ghost:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
  .button:disabled { cursor: progress; opacity: 0.7; }
}

/* ---------------------------------------------------------------- header + menu */
@layer custom {
  .site-header {
    position: sticky; inset-block-start: 0; z-index: 50;
    background: color-mix(in oklch, var(--paper) 92%, transparent);
    border-block-end: 1px solid var(--line);
    -webkit-backdrop-filter: blur(0.5rem);
    backdrop-filter: blur(0.5rem);
  }
  .site-header__inner { display: flex; align-items: center; gap: var(--space-m); min-block-size: 4rem; }
  .site-header__brand { margin-inline-end: auto; color: var(--ink); font-weight: 700; font-size: var(--text-l); text-decoration: none; }
  .site-nav { display: none; }
  .site-nav__list, .lang-switch { display: flex; gap: var(--space-s); margin: 0; padding: 0; }
  .site-nav__link, .lang-switch__link {
    display: inline-flex; align-items: center; min-block-size: 2.75rem; padding-inline: 0.5rem;
    color: var(--ink); text-decoration: none; border-radius: var(--radius-s);
  }
  .site-nav__label, .lang-switch__label { display: inline-block; text-box: trim-both cap alphabetic; }
  .site-nav__link[aria-current], .lang-switch__link[aria-current] { color: var(--brand); text-decoration: underline; text-underline-offset: 0.35em; }
  @media (hover: hover) { .site-nav__link:hover, .lang-switch__link:hover { color: var(--brand); } }
  .site-nav__link:focus-visible, .lang-switch__link:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }

  .site-header__menu-button, .menu__close {
    display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; padding: 0;
    background: transparent; color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer;
  }
  /* Bordered controls: ONE focus line (border to ink + hugging 1px shadow), never border + offset outline. */
  .site-header__menu-button:focus-visible, .menu__close:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
  .site-header__menu-icon, .menu__close-icon { inline-size: 1.5rem; block-size: 1.5rem; }

  @media (width >= 48rem) {
    .site-nav { display: block; }
    .site-header__menu-button { display: none; }
  }

  .menu {
    inline-size: 100%; max-inline-size: none; block-size: 100dvh; max-block-size: none; margin: 0; padding: 0;
    background: var(--paper); color: var(--ink); border: 0; overflow: clip;
    opacity: 0; transition: opacity 0.2s ease, display 0.2s allow-discrete, overlay 0.2s allow-discrete;
  }
  .menu[open] { opacity: 1; }
  @starting-style { .menu[open] { opacity: 0; } }
  .menu::backdrop { background: transparent; }
  .menu__bar { display: flex; align-items: center; justify-content: space-between; min-block-size: 4rem; padding-inline: var(--gutter); border-block-end: 1px solid var(--line); }
  .menu__brand { color: var(--ink); font-weight: 700; font-size: var(--text-l); text-decoration: none; }
  .menu__list { display: grid; gap: var(--space-2xs); margin: 0; padding: var(--space-m) var(--gutter); }
  .menu__link { display: block; padding-block: var(--space-xs); color: var(--ink); font-size: var(--text-xl); font-weight: 600; text-decoration: none; }
  .menu__link[aria-current] { color: var(--brand); }
  .menu__link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
}

/* ---------------------------------------------------------------- home */
@layer custom {
  /* Sections own their top space only, the last one in main closes the page: stacked paddings never double. */
  :where(.hero, .features, .prose-section) { padding-block: var(--section-space) 0; }
  main > :last-child { padding-block-end: var(--section-space); }
  .hero__inner { display: grid; gap: var(--space-xl); align-items: center; }
  @media (width >= 64rem) { .hero__inner:has(.hero__media) { grid-template-columns: 1fr 1fr; } }
  .hero__heading { font-size: var(--h1); max-inline-size: 20ch; }
  .hero__heading em { color: var(--brand); font-style: normal; }
  .hero__text { font-size: var(--text-l); color: var(--ink-soft); max-inline-size: 50ch; }
  .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-block-start: var(--space-l); }
  .hero__image { inline-size: 100%; block-size: auto; border-radius: var(--radius-l); }

  .features__heading { font-size: var(--h2); }
  .features__grid {
    display: grid; gap: var(--space-l); align-items: start; margin: var(--space-l) 0 0; padding: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  }
  .feature { padding: var(--space-l); background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-l); }
  .feature__heading { font-size: var(--h4); }
  .feature__text { color: var(--ink-soft); }
}

/* ---------------------------------------------------------------- pages, prose, lists */
@layer custom {
  .page { padding-block: var(--section-space); }
  .page__header { display: grid; gap: var(--space-s); margin-block-end: var(--space-l); }
  .page__heading { font-size: var(--h1); max-inline-size: 24ch; }
  .page__heading em { color: var(--brand); font-style: normal; }
  .page__meta, .page__lede { color: var(--ink-soft); }
  .page__lede { font-size: var(--text-l); }
  .page__image { inline-size: 100%; block-size: auto; border-radius: var(--radius-l); }
  .page__figure { margin-block-end: var(--space-l); }

  .prose { max-inline-size: var(--width-content); }
  .prose > * + * { margin-block-start: var(--space-s); }
  .prose > :is(h2, h3) { margin-block-start: var(--space-l); }
  .prose :is(ul, ol) { padding-inline-start: 1.25em; }

  .post-list { display: grid; gap: var(--space-m); margin: 0; padding: 0; }
  .post-list__item { padding-block-end: var(--space-m); border-block-end: 1px solid var(--line); }
  .post-list__link { font-size: var(--h4); font-weight: 600; }
  .post-list__text { margin-block-start: var(--space-2xs); color: var(--ink-soft); }
}

/* ---------------------------------------------------------------- contact + lead form */
@layer custom {
  .contact { display: grid; gap: var(--space-xl); align-items: start; }
  @media (width >= 56rem) { .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } }
  .contact__facts { display: grid; gap: var(--space-m); margin: 0; }
  .contact__label { color: var(--ink-soft); font-size: var(--text-s); font-weight: 600; }
  .contact__value { margin: max(0.5rem, var(--space-2xs)) 0 0; }

  .lead { padding: var(--space-l); background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-l); }
  .lead__form { display: grid; gap: var(--space-m); }
  .lead__form[hidden], .lead__success[hidden], .lead__error[hidden], .lead__status[hidden] { display: none; }
  .lead__field { display: grid; gap: var(--space-2xs); min-inline-size: 0; }
  .lead__label { font-weight: 600; }
  .lead__optional { color: var(--ink-soft); font-weight: 400; }
  .lead__control {
    box-sizing: border-box; inline-size: 100%; min-block-size: var(--control-h); margin: 0; padding: var(--control-pad);
    background: var(--paper); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    font: inherit; font-size: max(1rem, var(--text-m)); line-height: 1.5;
    appearance: none; outline: none; box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .lead__control--area { min-block-size: 8rem; resize: vertical; field-sizing: content; }
  /* ONE focus line: the border turns ink and a hugging 1px shadow thickens it (never border + offset ring). */
  .lead__control:focus, .lead__control:focus-visible { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); outline: none; }
  .lead__control[aria-invalid="true"], .lead__control[aria-invalid="true"]:focus { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
  .lead__error, .lead__status { margin: 0; color: var(--error); font-size: var(--text-s); font-weight: 600; }
  /* Turnstile: the iframe is a fixed-px box (flexible = 65 px tall, compact under 300 px = 140 px), reserved up
     front so the widget never shifts the layout. site.js picks the size by the same 300 px threshold. */
  .lead__form { container: lead-form / inline-size; }
  .lead__captcha { display: grid; gap: var(--space-2xs); min-inline-size: 0; }
  /* line-height/font-size 0: the widget's inline iframe would otherwise sit on a text baseline and grow the box. */
  .lead__captcha-widget { min-block-size: 65px; line-height: 0; font-size: 0; }
  @container lead-form (width < 300px) { .lead__captcha-widget { min-block-size: 140px; } }
  .lead__submit { justify-self: start; }
  .lead__success { margin: 0; font-size: var(--text-l); outline: none; }
  .lead__trap { inset-inline-start: -100vw; }
}

/* ---------------------------------------------------------------- footer */
@layer custom {
  .site-footer { margin-block-start: auto; padding-block: var(--space-xl); border-block-start: 1px solid var(--line); outline: none; }
  .site-footer__inner { display: grid; gap: var(--space-m); }
  @media (width >= 48rem) { .site-footer__inner { grid-template-columns: 1fr auto; align-items: start; } }
  .site-footer__brand { font-weight: 700; font-size: var(--text-l); }
  .site-footer__list { display: flex; flex-wrap: wrap; gap: var(--space-s); margin: 0; padding: 0; }
  .site-footer__link { color: var(--ink); }
  .site-footer__contact { display: grid; gap: var(--space-xs); font-style: normal; color: var(--ink-soft); }
  .site-footer__fact { color: inherit; }
  .site-footer__copy { color: var(--ink-soft); font-size: var(--text-s); }
}

/* ---------------------------------------------------------------- reveal on scroll (hook: data-reveal, set by site.js) */
@layer custom {
  @media (prefers-reduced-motion: no-preference) {
    .js [data-reveal] {
      opacity: 0; translate: 0 var(--reveal-shift);
      transition: opacity 0.6s var(--ease-out) var(--reveal-delay, 0ms), translate 0.6s var(--ease-out) var(--reveal-delay, 0ms);
    }
    .js [data-reveal].is-revealed { opacity: 1; translate: none; }
  }
}