/* ==========================================================================
   base.css: fonts, reset, element defaults, typography, focus, a11y helpers
   Loaded second (after tokens.css). Everything here lives in a cascade layer.

   Contents
   1. @layer base
      - @font-face: Archivo (variable), Instrument Serif italic, metric-matched fallback
      - reset, html/body, links, lists, images, forms defaults
      - heading scale, .accent, selection, focus ring
      - .skip-link, .scroll-sentinel, cross-page transition names
   2. @view-transition (top level: it is an at-rule, not a style rule, so it sits outside layers)
   3. @layer utilities (highest layer): [hidden], .visually-hidden, forced-colors safety.
      Utilities live in the top layer so that [hidden] beats component display rules
      without !important.
   ========================================================================== */

@layer base {
  /* ---- 1. Fonts ---- */
  @font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo-variable-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Instrument Serif";
    src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  /* Metric-matched stand-in: keeps line boxes stable while Archivo loads (CLS). */
  @font-face {
    font-family: "Archivo Fallback";
    src: local("Arial");
    size-adjust: 97%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
  }

  /* ---- 2. Reset ---- */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    color-scheme: light;
    /* The design is drawn for a 1920x1000 viewport. Above 1920px wide (QHD, ultrawide, 4K) the root font size grows
       with the smaller of width and height, so every rem-based length scales with the whole layout. Below that the
       clamp floor (100%) keeps the user's default size. Media queries use rem too, but they are not affected: their
       px-equivalent breakpoints use the browser default, so the breakpoints never move. */
    font-size: clamp(100%, min(0.8333vw, 1.6vh), 187.5%);
    background: var(--color-bg);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Anchor targets land below the condensed fixed header. */
    scroll-padding-top: calc(var(--header-h-condensed) + var(--space-4));
    interpolate-size: allow-keywords;
  }

  @media (max-width: 63.9375rem) {
    html {
      scroll-padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom) + var(--space-4));
    }
  }

  a,
  button,
  summary,
  [tabindex] {
    -webkit-tap-highlight-color: transparent;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  body {
    min-block-size: 100vh;
    min-block-size: 100dvh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    /* Keeps the fallback face the same visual size as Archivo (no layout shift on swap). */
    font-size-adjust: from-font;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
  }

  img,
  picture,
  video,
  canvas {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
  }

  /* .btn display lives in base, not components: layout and sections must be able to hide
     individual buttons per breakpoint, and a components-layer display would win over them. */
  .btn {
    display: inline-flex;
  }

  button {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
  }

  input,
  select,
  textarea {
    max-inline-size: 100%;
  }

  ul[class],
  ol[class] {
    list-style: none;
    padding: 0;
  }

  dd {
    margin: 0;
  }

  figure {
    margin: 0;
  }

  summary {
    cursor: pointer;
    list-style: none;
  }

  summary::-webkit-details-marker {
    display: none;
  }

  p {
    text-wrap: pretty;
  }

  /* ---- 3. Links ---- */
  a {
    color: inherit;
    text-decoration-skip-ink: auto;
  }

  /* Plain links in running text only; classed links are styled by their component. */
  a:where(:not([class])) {
    color: var(--color-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  /* ---- 4. Typography ---- */
  h1,
  h2,
  h3,
  h4 {
    color: var(--color-heading);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--fs-display);
    font-weight: var(--fw-black);
    font-stretch: var(--stretch-display);
    letter-spacing: var(--tracking-display);
    line-height: var(--lh-tight);
  }

  h2 {
    font-size: var(--fs-h2);
    font-weight: 760;
    font-stretch: var(--stretch-display);
    letter-spacing: var(--tracking-heading);
    line-height: 1.08;
  }

  h3 {
    font-size: var(--fs-h3);
    font-weight: 700;
    font-stretch: 94%;
    letter-spacing: -0.012em;
    line-height: 1.2;
  }

  h4 {
    font-size: var(--fs-h4);
    font-weight: 650;
    line-height: 1.3;
  }

  /* Accent word inside a heading: exactly one per heading. */
  .accent {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-stretch: 100%;
    letter-spacing: -0.01em;
    font-size: 1.08em;
    color: var(--color-accent);
  }

  ::selection {
    background: var(--amber-300);
    color: var(--ink-900);
  }

  /* ---- 5. Focus ---- */
  /* :where() keeps specificity at zero so components can restyle focus rings if needed. */
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
  }

  :where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
    outline: none;
  }

  /* Skip-link target: focusable so the skip link moves focus into main, but it is not a control: no ring. */
  main[tabindex="-1"]:focus {
    outline: none;
  }

  /* ---- 6. Skip link and scroll sentinel ---- */
  .skip-link {
    position: fixed;
    z-index: var(--z-dialog);
    inset-block-start: var(--space-3);
    inset-inline-start: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--r-sm);
    background: var(--white);
    color: var(--ink-900);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--shadow-lg);
    translate: 0 -250%;
  }

  .skip-link:focus-visible {
    translate: 0 0;
    outline-color: var(--color-focus);
  }

  @media (prefers-reduced-motion: no-preference) {
    .skip-link {
      transition: translate var(--dur-1) var(--ease-out);
    }
  }

  /* Invisible 24px strip at the top of the page; header.js watches it for the scrolled state. */
  .scroll-sentinel {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 1.5rem;
    pointer-events: none;
  }

  /* ---- 7. Cross-page transitions ---- */
  main {
    view-transition-name: main;
  }

  .site-header {
    view-transition-name: site-header;
  }

  @media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(main),
    ::view-transition-new(main) {
      animation-duration: 280ms;
    }
  }
}

/* Top level on purpose: @view-transition cannot be nested in a cascade layer. */
@view-transition {
  navigation: auto;
}

@layer utilities {
  /* Beats every component display rule (components/sections are lower layers). */
  [hidden] {
    display: none;
  }

  /* Visually hidden but readable by assistive tech (honeypots, icon labels). */
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Forced colors: keep controls and cards visible when the OS overrides palettes. */
  @media (forced-colors: active) {
    .btn,
    .chip,
    .badge,
    .card,
    .icon-tile,
    .field__control,
    .site-social-link,
    .menu-toggle,
    .estimate-card,
    .dialog {
      border: 1px solid CanvasText;
      forced-color-adjust: auto;
    }

    .btn {
      forced-color-adjust: auto;
    }

    :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
      outline-color: Highlight;
    }

    .hero__scrim,
    .site-header__progress {
      display: none;
    }
  }
}