/* base.css -- element defaults and the reset. Layer 2 of 4.
 *
 * Selects only bare elements. The moment a class appears, the rule belongs in
 * layout.css or components.css instead; keeping that line sharp is what stops
 * this file growing into the 77 KB style.default.css it replaces.
 *
 * Every value here comes from tokens.css. No literals except 0, 1, 100% and
 * the handful of structural constants that are not design decisions.
 */

/* ── Reset ──────────────────────────────────────────────────────────────
 * Small on purpose. A full normalize.css spends most of its bytes on
 * browsers this app does not support; these are the rules that actually
 * change something in an evergreen browser. */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchored headings clear the sticky site header rather than hiding under
   * it. Paired with scroll-margin-top on the headings themselves. */
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--ink-2);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

img {
  height: auto;
}

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

/* Long unbroken strings -- a pasted URL in a lead message, a base64 blob in an
 * admin table -- must not push a layout sideways. */
p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
td,
th,
dd {
  overflow-wrap: break-word;
}

/* ── Motion ─────────────────────────────────────────────────────────────
 * Every transition and animation in this codebase reads its duration from a
 * token, so overriding the two tokens turns all of them off at once. The
 * 0.01ms rather than 0s is deliberate: it lets transitionend/animationend
 * listeners still fire, so JS that waits for one does not hang. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur: 0.01ms;
    --dur-slow: 0.01ms;
  }
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Type ──────────────────────────────────────────────────────────────── */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ink);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance; /* no orphaned last word in a headline */
  scroll-margin-top: calc(var(--header-height) + var(--space-5));
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-3);
}

/* Size without level. The footer's "About" and "Contact" blocks are section
 * headings -- an h2 in a landmark, which is what a screen reader's heading
 * list should show -- but visually they must sit at h5/h6 scale or they shout
 * over the page's own h1. Restyling the element would break every other h2 on
 * the site, so the class carries the size and the tag keeps the meaning. This
 * is the only reason these exist; do not use them to skip a heading level. */
.h1 { font-size: var(--text-4xl); }
.h2 { font-size: var(--text-3xl); }
.h3 { font-size: var(--text-2xl); }
.h4 { font-size: var(--text-xl); }
.h5 { font-size: var(--text-lg); }
.h6 {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-3);
}

p {
  text-wrap: pretty;
}

/* Flow spacing. Every direct sibling after the first gets a top margin, so
 * prose from the database -- about_us_html, details_html, privacy_policy_html --
 * is spaced without the admin needing to think about it, and no rule has to
 * strip a trailing margin off the last child. */
p + p,
p + ul,
p + ol,
ul + p,
ol + p,
p + h3,
ul + h3,
ol + h3,
p + h4,
ul + h4 {
  margin-top: var(--space-4);
}

h2 + p,
h3 + p,
h4 + p,
h3 + ul,
h4 + ul {
  margin-top: var(--space-3);
}

small {
  font-size: var(--text-sm);
}

strong,
b {
  font-weight: 700;
  color: var(--ink);
}

/* ── Links ─────────────────────────────────────────────────────────────
 * Underline offset and thickness rather than a border-bottom hack, so the
 * underline skips descenders and inherits the text colour. */
a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent-muted);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease),
    text-decoration-color var(--dur-fast) var(--ease);
}

a:hover {
  color: var(--accent-strong);
  text-decoration-color: var(--brand-accent);
}

/* ── Focus ─────────────────────────────────────────────────────────────
 * :focus-visible rather than :focus, so a mouse click on a button does not
 * paint a ring but a Tab press does. The ring is drawn in --ink with an
 * accent halo rather than in the accent alone, because an admin is free to
 * set --brand-accent to something with no contrast against the page and the
 * keyboard-navigation affordance must survive that. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 5px var(--accent-ring);
}

/* ── Lists ─────────────────────────────────────────────────────────────── */

ul,
ol {
  padding-left: var(--space-5);
}

li + li {
  margin-top: var(--space-2);
}

/* ── Misc elements ─────────────────────────────────────────────────────── */

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin-block: var(--space-6);
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

code {
  background: var(--surface-3);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

blockquote {
  border-left: 3px solid var(--brand-accent);
  padding-left: var(--space-4);
  color: var(--ink-3);
}

table {
  border-collapse: collapse;
  width: 100%;
}

fieldset {
  border: 0;
  padding: 0;
}

legend {
  padding: 0;
}

::selection {
  background: var(--accent-muted);
  color: var(--ink);
}

/* ── Utilities the markup genuinely needs ───────────────────────────────
 * Deliberately three, not a utility framework. Anything beyond this belongs
 * to a named component. */

/* Visible to screen readers, not to eyes. Used for form labels that a visual
 * design communicates by placement, and for the skip link before it is
 * focused. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The honeypot on the contact form. display:none is the one thing that will
 * NOT work here -- some bots skip hidden fields, and some browsers skip them
 * for autofill. Off-screen and inert keeps it fillable by a naive bot and
 * unreachable by a person. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

[hidden] {
  display: none !important;
}