/*
 * Éclore Aesthetics — Global Stylesheet
 * ─────────────────────────────────────────────────────────────────────────────
 * Modern CSS reset + base typography (VISUAL-DESIGN §3) + layout/section
 * utilities (§2, §4) + locked focus ring (§8) + reveal motion utility (§6)
 * + cross-document view transitions (§6).
 * Fonts and tokens are enqueued separately via inc/enqueue.php.
 * Do not @import other files here — WP enqueue handles load order.
 * Component styles live in assets/css/components/*.css.
 *
 * Breakpoints (literal — media queries cannot read custom properties):
 *   sm  480px   large phones
 *   md  768px   tablet / small laptop — nav collapses below this
 *   lg  1024px  laptop — editorial two-column splits engage
 *   xl  1280px  desktop
 * Mobile-first: author for the smallest screen, layer up with min-width.
 *
 * WCAG 2.1 AA contrast (against Bone / Stone grounds, §4):
 *   Ink        (#16140F) — ~13.5:1 / ~12.5:1  all type and headings
 *   Muted (Ink 72%)      — ~6.5:1 / ~6:1       secondary/meta, 14px+ only
 *   Terracotta (#D44B19) — ~4.0:1 / ~3.5:1     large/bold text and UI only
 *   Hairline   (ink 14% on bone) — non-text only (borders, grid lines, dividers)
 */

/* ─── Modern CSS Reset ───────────────────────────────────────────────────────── */

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

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
}

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

body {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.1vw, 1.125rem); /* Body — 16–18px */
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--color-text);
  /* The greige artboard is the site-wide ground (owner, 2026-07-22): the
     frosted header floats over the same color on every page, and content
     sections declare their own surfaces via .section-bg--*. */
  background-color: var(--color-ground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* App shell — sticky footer.
     body is the real flex container: its direct children are <header>,
     <main id="main-content">, and <footer> (the .skip-to-content link is
     position:absolute and out of flow). main grows to fill short pages so the
     footer sits flush at the viewport bottom with no Bone gap below it; on long
     pages everything flows naturally and the footer keeps its content height. */
  min-height: 100vh;   /* fallback for browsers without dvh support */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

ul, ol {
  list-style: none;
}

/* ─── Reduced Motion ─────────────────────────────────────────────────────────────
 * The former §6 "locked global fallback" (a universal animation/transition
 * flattener under prefers-reduced-motion) was REMOVED by owner decision
 * (2026-07-22) — Claw's motion rules are being redefined. Any reduced-motion
 * behavior is now opt-in per component; nothing is flattened globally. */

/* ─── Skip to Content ────────────────────────────────────────────────────────── */

.skip-to-content {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  z-index: 9999;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-terracotta);
  color: var(--color-bone);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  text-decoration: none;
  transition: top var(--dur-micro) var(--ease-standard);
}

.skip-to-content:focus {
  top: var(--space-sm);
}

/* Programmatically-focused landmark (skip-link target): no focus ring on the
   wrapper itself; interactive elements keep their compound ring. */
#main-content:focus,
[tabindex="-1"]:focus {
  outline: none;
}
/* Offset the skip target below the sticky header so content isn't hidden. */
#main-content {
  scroll-margin-top: var(--space-2xl, 6rem);
  flex: 1 0 auto; /* the growing element — fills short pages (sticky footer) */
}

/* The footer keeps its natural content height — never grows or shrinks. */
.site-footer {
  flex-shrink: 0;
}

/* ─── Focus States (§8 — Locked compound ring) ───────────────────────────────── */

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-terracotta) 28%, transparent);
}

/* Dark grounds: swap the outline to Bone so it stays visible. */
.section-bg--ink :where(a, button, input, textarea, select, [tabindex]):focus-visible,
.section-bg--terracotta :where(a, button, input, textarea, select, [tabindex]):focus-visible,
.site-footer :where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline-color: var(--color-bone);
}

/* ─── Typography Scale (§3) ──────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-heading);
}

/* H1 — Familjen 700 (page title; one per page) */
h1 {
  font-size: clamp(2.25rem, 5.4vw, 4rem); /* 36–64px */
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.025em;
}

/* H2 — Familjen 700 (section head) */
h2 {
  font-size: clamp(1.75rem, 3.6vw, 3rem); /* 28–48px */
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* H3 — Familjen 600 (subsection) */
h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem); /* 20–28px */
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* H4–H6 — Familjen 600 (size by class, not by jumping heading levels) */
h4, h5, h6 {
  font-size: 1.25rem; /* 20px */
  font-weight: 600;
  line-height: var(--lh-snug);
}

p {
  margin-bottom: var(--space-sm);
}

p:last-child {
  margin-bottom: 0;
}

/* Prose links — Ink text (Terracotta fails AA at body size); the underline is the
   affordance, the hover only recolours the underline to the Terracotta accent so
   the link text itself never drops below AA. */
a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-hairline);
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-micro) var(--ease-standard);
}

a:hover {
  text-decoration-color: var(--color-terracotta);
}

address {
  font-style: normal;
}

/* ─── Editorial Type Utilities ───────────────────────────────────────────────── */

/* Eyebrow / label — Familjen uppercase caps, Ink (§3) */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem; /* 13px */
  line-height: 1.2;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text);
}

/* Lede / body-large */
.lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem); /* 18–21px */
  line-height: 1.55;
}

/* Pull-quote — Familjen 600, set in the display face (not italic, §3) */
.pull-quote {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.625rem, 3.4vw, 2.75rem); /* 26–44px */
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Caption / small print */
.caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.75rem, 1vw, 0.875rem); /* 12–14px */
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* ─── Accent word — the one serif (editorial layer) ──────────────────────────────
 * The single distinctive device: the emotional word inside a heading swaps to
 * Fraunces italic. Mark it up as <em> (semantic + accessible) or add .accent-serif.
 * Discipline: ONE word per heading (two at most), never a whole phrase, never body.
 * Colour is INHERITED — the serif differentiates by form, never by Terracotta
 * (Terracotta stays reserved for CTAs, eyebrows, and the accent dot). Fraunces
 * italic runs optically small, so it is nudged up ~5% to align x-heights with the
 * surrounding Familjen. Negative display tracking is cancelled — serifs need room.
 */
h1 em, h2 em, h3 em, h4 em,
.accent-serif {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05em;
  letter-spacing: 0;
  color: inherit;
}

/* ─── Editorial media (editorial layer) ──────────────────────────────────────────
 * Monochrome gallery treatment applied in CSS so real colour photography can drop
 * in later by flipping --img-filter to `none`. Placeholders and real <img>/<video>
 * alike carry it via .editorial-img. */
.editorial-img,
.editorial-media img,
.editorial-media video {
  filter: var(--img-filter);
}

/* ─── Layout & Sections (§2, §4) ─────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }

.section        { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--alt   { background-color: var(--color-bg-alt); }

/* Section grounds — alternate to create the gallery cadence (§4).
   The Ink inverse band and the Terracotta CTA band each appear at most once per
   page; their scarcity is the effect. */
.section-bg--bone { background: var(--color-bg);         color: var(--color-text); }
.section-bg--stone  { background: var(--color-bg-alt);     color: var(--color-text); }
.section-bg--ink        { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
.section-bg--terracotta { background: var(--color-terracotta); color: var(--color-text-inverse); }

/* The first bone section after any editorial hero rises over the greige
   artboard as a rounded floating panel — the house "panel over the ground"
   move (cf. cl-specialty on the homepage), applied site-wide. */
.hero--page + .section-bg--bone,
.hero--archive + .section-bg--bone,
.hero--service + .section-bg--bone,
.quick-facts + .section-bg--bone { /* single treatment: facts card sits between */
  border-radius: clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px) 0 0;
}

/* On inverse grounds, headings and inline links flip to Bone. */
.section-bg--ink :is(h1, h2, h3, h4, h5, h6),
.section-bg--terracotta :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-text-inverse);
}

.section-bg--ink a:not(.btn),
.section-bg--terracotta a:not(.btn) {
  color: var(--color-text-inverse);
  text-decoration-color: color-mix(in srgb, var(--color-bone) 50%, transparent);
}

/* ─── Reveal Motion Utility (§6) ─────────────────────────────────────────────── */
/*
 * Hidden start state applies ONLY when JS has armed it (.reveal-ready on <html>)
 * AND motion is allowed. Without JS, or under reduced motion, content stays
 * fully visible — reveals decorate, they never gate content.
 */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .reveal {
    opacity: 0;
    transform: translateY(var(--reveal-shift));
    transition: opacity var(--dur-reveal) var(--ease-reveal),
                transform var(--dur-reveal) var(--ease-reveal);
    /* Grouped children stagger via an inline --reveal-i index set by the JS. */
    transition-delay: calc(var(--reveal-i, 0) * var(--stagger-step));
  }

  .reveal-ready .reveal.reveal--in {
    opacity: 1;
    transform: none;
  }
}

/* ─── Cross-document View Transitions (§6) ───────────────────────────────────── */
/*
 * Same-origin navigations cross-fade at the root instead of hard-swapping.
 * Pure opacity fade on the default root group — no slide, no scale, no
 * transform. Browsers without @view-transition support ignore this entirely
 * and keep the instant swap.
 */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--dur-short);
  animation-timing-function: var(--ease-standard);
}

/* Component-level reduced-motion rule (kept when the global flattener was
   removed): the root cross-fade is disabled explicitly — reduced motion gets
   the instant swap. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* ─── Screen Reader Utility ──────────────────────────────────────────────────── */

.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;
}

/* ─── WordPress Core Alignments ──────────────────────────────────────────────── */

.alignleft   { float: left;  margin-right: var(--space-md); }
.alignright  { float: right; margin-left: var(--space-md); }
.aligncenter { margin-inline: auto; display: block; }