/* ==========================================================================
   BASE — Astra integration, reset, typography, layout primitives
   No raw colour values. Everything references tokens.css.
   ========================================================================== */

/* --- Astra integration ---------------------------------------------------
   Astra wraps page content in #content > .ast-container, which carries a
   max-width and horizontal padding. Our sections are full-bleed and handle
   their own width via .shell, so the wrapper is neutralised on the front page.
   Scoped to .kl-front (added by inc/layout.php) so every other template keeps
   Astra's normal layout intact. */

.kl-front #content > .ast-container,
.kl-woo #content > .ast-container {
  display: block;
  max-width: none;
  width: 100%;
  padding-inline: 0;
  margin-inline: 0;
}

/* Header and footer render outside the page wrapper on every template, so the
   chrome gets its own .pl-root. It must not add page padding of its own. */
.pl-root--chrome { display: block; }

.kl-front #content,
.kl-front .ast-plain-container .site-content > .ast-container { padding-block: 0; }

.kl-front #primary,
.kl-front .site-main { margin: 0; padding: 0; width: 100%; max-width: none; }

.kl-front .entry-header,
.kl-front .ast-single-entry-banner,
.kl-front .page-title { display: none; }

/* --- Root ---------------------------------------------------------------- */

.pl-root {
  width: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

.pl-root *,
.pl-root *::before,
.pl-root *::after,
.kl-woo *,
.kl-woo *::before,
.kl-woo *::after { box-sizing: border-box; }

/* WooCommerce templates render outside .pl-root, so the same resets are
   applied via the .kl-woo body class or shop pages inherit browser defaults
   (visible bullet points, unstyled links). */
.pl-root h1, .kl-woo h1,
.pl-root h2, .kl-woo h2,
.pl-root h3, .kl-woo h3,
.pl-root h4, .kl-woo h4 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}

.pl-root p { margin: 0; }
.pl-root ul, .pl-root ol,
.kl-woo .shop-side ul, .kl-woo .shop-side ol { margin: 0; padding: 0; list-style: none; }
.pl-root img, .pl-root svg { max-width: 100%; display: block; }
.pl-root img { height: auto; }
.kl-woo .shop-side svg { display: block; }

.pl-root a, .kl-woo .shop-side a { color: inherit; text-decoration: none; }
.pl-root a:hover { color: var(--brand); }

/* Focus must always be visible. Never remove without a replacement. */
.pl-root a:focus-visible,
.pl-root button:focus-visible,
.pl-root input:focus-visible,
.pl-root summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Layout primitives ---------------------------------------------------- */

.shell {
  width: 100%;
  /* max-width covers the padding so the CONTENT box equals --shell-max,
     matching the reference's 1240px of usable width. */
  max-width: calc(var(--shell-max) + var(--shell-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

.sec { padding-block: var(--pad-sec); }
.sec--flush { padding-block: 0; }
.sec--tight { padding-block: clamp(28px, 3.4vw, 46px); }
.sec--wash { background: var(--wash); }

/* --- Type helpers --------------------------------------------------------- */

.eyebrow {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

/* --- Scroll reveal --------------------------------------------------------
   Final state is set here, and JS animates away from it, so the page is
   correct even when JavaScript never runs. */

.rv {
  opacity: 0;
  transform: translateY(var(--amp));
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.rv.is-in { opacity: 1; transform: none; }

/* Mandatory. Not "less animation" — none, with content fully visible. */
@media (prefers-reduced-motion: reduce) {
  .pl-root *,
  .pl-root *::before,
  .pl-root *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .rv { opacity: 1; transform: none; }
}