/**
 * Reset, element defaults and browser surfaces.
 *
 * Graphique's look (12 October 2026 design): Fredoka One headings in navy with
 * pink accent words, each heading outlined in its section's background colour
 * and given a soft offset shadow, on warm paper backgrounds.
 */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-s));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--hairline-strong) var(--surface);
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--text-line-height);
  color: var(--ink);
  background: var(--surface);
  text-wrap: pretty;
  -webkit-tap-highlight-color: transparent;
  caret-color: var(--brand-secondary);
}

::selection {
  background: var(--brand-tint-pink);
  color: var(--brand-primary);
}

/* --- Headings ------------------------------------------------------------
   <em> inside any heading is the pink accent, never italic. Editors write
   "What are you <em>celebrating?</em>". */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-tracking);
  color: var(--brand-primary);
  text-wrap: balance;
}

h1 em, h2 em, h3 em, h4 em,
h1 .accent, h2 .accent, h3 .accent, h4 .accent {
  font-style: normal;
  color: var(--brand-pop);
}

/* Small headings get the accent colour at the AA-safe pink. */
h3 em, h4 em, h3 .accent, h4 .accent {
  color: var(--brand-accent);
}

h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-h1);
}
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

p {
  color: var(--ink-muted);
}

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

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

/* Inline SVG icons (inc/icons.php): outline by default, brand marks filled. */
.icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon.icon-fill {
  fill: currentColor;
  stroke: none;
}

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.08em;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

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

ul, ol {
  list-style: none;
}

table,
.price,
.amount,
[data-price] {
  font-variant-numeric: tabular-nums;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
}

.sr-only,
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Form fields ----------------------------------------------------------
   One field style for every form on the site, WooCommerce included. */
.field-input,
.field select,
.field input:not([type="checkbox"]):not([type="radio"]),
.field textarea {
  width: 100%;
  min-height: var(--tap-target);
  padding: var(--space-2xs) var(--space-xs);
  background-color: var(--white);
  color: var(--ink);
  border: var(--border-thin) solid var(--brand-tint);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.field textarea {
  min-height: calc(var(--tap-target) * 3);
  resize: vertical;
}

.field-input::placeholder,
.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-muted);
}

.field-input:hover,
.field select:hover,
.field input:hover,
.field textarea:hover {
  border-color: var(--hairline-strong);
}

.field-input:focus,
.field select:focus,
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand-secondary);
  box-shadow: 0 0 0 3px var(--hairline-soft);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--brand-danger);
}

/* WebKit gives date and file inputs an intrinsic width that ignores
   `width: 100%`, which pushed the page wider than a phone screen. */
input[type="date"],
input[type="file"] {
  min-width: 0;
  max-width: 100%;
}

input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
}

input[type="date"]::-webkit-date-and-time-value {
  text-align: start;
}

/* iOS Safari zooms the page into any field whose text is under 16px and
   leaves it zoomed, so the page overflows until the shopper pinches out.
   On touch screens every text field gets at least --text-input. !important
   because WooCommerce and gateway selectors outrank the theme's own. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="file"]),
  select,
  textarea {
    font-size: var(--text-input) !important;
  }
}

/* Every select drops the native chevron (rules/web/form-controls.md). */
select {
  -webkit-appearance: none;
  appearance: none;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right var(--space-xs) center;
  background-size: var(--select-chevron-size) auto;
  padding-inline-end: var(--space-l);
}

select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (forced-colors: active) {
  select {
    appearance: auto;
    background-image: none;
  }
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--brand-secondary);
}

/* --- Skip link ------------------------------------------------------------ */
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  top: var(--space-2xs);
  left: var(--space-2xs);
  z-index: 100;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--space-2xs) var(--space-s);
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  background: var(--white);
  color: var(--brand-primary);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-strong);
  box-shadow: var(--shadow-md);
}

/* --- Plain page template (legal and long-form content) ------------------- */
.page-plain {
  padding-block: var(--section-space-m);
  padding-inline: var(--space-gutter);
}

.page-plain > .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.page-plain-body {
  max-width: 72ch;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.page-plain-body h2 { font-size: var(--text-h2); padding-top: var(--space-m); }
.page-plain-body h3 { font-size: var(--text-h3); padding-top: var(--space-s); }

.page-plain-body ul,
.page-plain-body ol {
  padding-left: var(--space-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.page-plain-body ul { list-style: disc; }
.page-plain-body ol { list-style: decimal; }

.page-plain-body a {
  color: var(--brand-accent);
  text-decoration: underline;
}

.page-plain-body a:hover { color: var(--brand-accent-hover); }

/* Focus visibility, globally. Purple reads on every surface in the palette. */
:focus-visible {
  outline: 3px solid var(--brand-secondary);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* Honour a reduced-motion preference across every animation the theme runs. */
@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;
    scroll-behavior: auto !important;
  }
}