/* ws-template -- structural and accessibility layer.
 *
 * WHAT BELONGS IN THIS FILE: layout primitives, responsive behaviour,
 * and accessibility floors. Things that are true of every WS site
 * regardless of what it looks like.
 *
 * WHAT DOES NOT: colours, font choices, visual personality, anything
 * decorative. Every colour reference below is a var() pointing at
 * tokens.css, never a literal -- this file must not be able to express
 * a design opinion even by accident.
 *
 * The accessibility floors here are not per-site preferences. 16px body
 * text, a visible focus state, a working skip link and honoured
 * prefers-reduced-motion are the floor on every site in the program.
 * Design goes above them, never through them.
 */

/* -- Reset, minimal ------------------------------------------------- */

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

body, h1, h2, h3, h4, p, figure, blockquote, ol, ul {
  margin: 0;
  padding: 0;
}

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

img { max-width: 100%; height: auto; display: block; }

/* -- Document ------------------------------------------------------- */

body {
  font-family: var(--font-body);
  /* 16px floor. Below this, body text fails the standard. */
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  /* Deliberately no size or weight here: hierarchy is a per-site design
   * decision, expressed through the tokens. */
  line-height: 1.2;
}

/* Reading measure. Long lines are a legibility problem at every visual
 * style, so this is structural rather than decorative. */
p, li { max-width: var(--measure); }

a { color: inherit; }

/* -- Skip link ------------------------------------------------------
 * Off-screen until focused, then unmistakably visible. A skip link that
 * stays hidden on focus is worse than none: it exists in the tab order
 * and does nothing a keyboard user can see.
 */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: var(--space-sm);
  background: var(--color-surface);
  color: var(--color-text);
  z-index: 100;
}

.skip-link:focus {
  left: 0;
}

/* -- Focus ----------------------------------------------------------
 * Never remove the focus ring. If a per-site design replaces it, the
 * replacement must be at least as visible as this one.
 */

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* main carries tabindex="-1" so the skip link can move focus to it;
 * that would otherwise draw a focus ring on click, which is noise. */
main:focus { outline: none; }

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

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

/* Vertical rhythm between sections. A per-site design will vary these
 * deliberately -- design rule 1 requires sections NOT to share identical
 * structure, and uniform spacing is half of what makes them look alike. */
.section { padding-block: var(--space-lg); }

.stack > * + * { margin-top: var(--space-sm); }

/* Single-column by default, columns only where there is room. Mobile
 * first because most local-service traffic is mobile. */
.grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

@media (min-width: 40em) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 60em) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Full-bleed escape hatch, for the section that breaks the page's
 * rhythm (design rule 3). Structural because it is a layout mechanism;
 * whether and where to use it is a per-site decision. */
.full-bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* -- Answer blocks --------------------------------------------------
 * Structural only. The visual treatment of an answer box is per site;
 * what matters here is that the answer reads as a distinct unit
 * attached to its question.
 */

.answer-unit { margin-block: var(--space-md); }

.answer-block {
  border-left: var(--border-width) solid var(--color-border);
  padding-left: var(--space-sm);
}

/* -- Breadcrumbs ---------------------------------------------------- */

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
}

.breadcrumbs li + li::before {
  content: "/";
  margin-right: var(--space-xs);
}

/* -- Forms ----------------------------------------------------------
 * Structural sizing only. 16px on inputs specifically prevents iOS
 * Safari zooming the viewport on focus, which is a usability bug that
 * looks like a design choice.
 */

input, textarea, select, button {
  font: inherit;
  font-size: max(16px, 1rem);
  max-width: 100%;
}

label { display: block; }

/* The honeypot field. Must be reachable by a bot and invisible to a
 * human, INCLUDING a screen-reader user -- hence aria-hidden in the
 * markup and off-screen positioning here rather than display:none,
 * which some bots detect and skip. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* -- Motion ---------------------------------------------------------
 * Honoured globally, not per effect. A per-site animation that ignores
 * this is a bug, not a flourish.
 */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -- Cross-document View Transitions ---------------------------------
 * Native, zero-JavaScript crossfade between same-origin navigations
 * (Craft Standard WS-004 §5). Degrades to today's instant navigation
 * everywhere unsupported -- no feature check needed, unknown at-rules
 * are simply ignored.
 *
 * Gated on prefers-reduced-motion explicitly: the global reduced-motion
 * block above silences CSS animation/transition durations, but a
 * UA-driven view-transition crossfade is neither, so it is not caught
 * by that rule and needs its own gate.
 */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}