/* =========================================================================
   BASE. Element defaults only. Anything with a name is in components.css.
   ========================================================================= */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--space-m));
  /* The admin bar pushes the page down; the sticky nav has to follow it. */
  --nav-offset: 0px;
}
body.admin-bar { --nav-offset: 32px; }
@media screen and (max-width: 782px) { body.admin-bar { --nav-offset: 46px; } }

/* No horizontal overflow on any page or device is a hard house rule, so it is
   enforced here once rather than chased per section. */
html, body { overflow-x: clip; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-0);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--track-tight);
  text-wrap: balance;
  font-optical-sizing: auto;
}
h1 { font-size: var(--text-6); }
h2 { font-size: var(--text-5); }
h3 { font-size: var(--text-3); }
h4 { font-size: var(--text-2); }
h5 { font-size: var(--text-1); }
h6 { font-size: var(--text-0); }

p, li { text-wrap: pretty; }
p + p { margin-top: 1em; }

a { color: inherit; text-decoration: none; }
a:where(.entry-content a, .woocommerce-privacy-policy-text a, p a) {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-line-strong);
  transition: text-decoration-color var(--dur-ui) var(--ease-out);
}
a:where(.entry-content a, p a):hover { text-decoration-color: currentColor; }

/* CONTRACT RULE 3, enforced globally. An image fills the width it is given and
   takes whatever height its own proportions ask for: no object-fit: cover, no
   aspect-ratio box, nothing cropped. A section grows to fit its photograph
   rather than trimming the photograph to fit the section. The WooCommerce
   image sizes are registered uncropped in inc/woocommerce.php for the same
   reason, so a product photo is never centre-cropped into a square either.
   An element that genuinely needs a fixed ratio (a video embed, a map, a logo
   wall, the .wash texture) opts in locally and says so in DESIGN.md. */
img { display: block; width: 100%; height: auto; }
svg, video, canvas, iframe { display: block; max-width: 100%; }

figure { margin: 0; }
ul, ol { padding-left: 1.2em; }

/* Every price, SKU, order number, quantity and measured figure is mono with
   tabular-nums. On a shop that is most of the interface. */
:where(.price, .amount, .woocommerce-Price-amount, .sku, .quantity input, .order-number, .woocommerce-order-overview__order, .stat__n, .figure) {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

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

:focus-visible {
  outline: 2px solid var(--color-accent-9);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
::selection { background: var(--color-accent-4); color: var(--color-accent-12); }

/* A decorative layer at a negative z-index inside a section joins the ROOT
   stacking context without this and paints under the opaque body background,
   so the wash or the hero overlay silently disappears. One stacking context
   per section fixes it once for the whole site. */
section, header, footer, main, .hw-section { isolation: isolate; }

/* The browser's `hidden` must beat any component's own display rule, or a
   [hidden] panel whose class sets display:grid shows at rest. */
[hidden] { display: none !important; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: var(--space-s); left: var(--space-s);
  z-index: 100;
  width: auto; height: auto; clip-path: none; margin: 0;
  padding: var(--space-xs) var(--space-s);
  background: var(--color-btn); color: var(--color-btn-text);
  border-radius: var(--radius-sm);
}

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