/* OOO.Tea — base: minimal reset + element defaults + utilities.
   Mobile-first; component styles live in their own files (header.css, ...).
   Global rule: all content stays within the 5% side margins (--gutter);
   full-bleed exceptions must be deliberate, per element. */

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

html {
  /* Fluid root above the 1440 design width: 1.1111vw = 16px at 1440,
     so below that the 1rem floor makes this a no-op; above, every
     rem-sized thing (type, spacing, components) scales together up to
     1.25× at ~1800px. rem floor, not px: an enlarged user default font
     must stay respected (WCAG). Media-query bands are immune by spec —
     they resolve against the initial font-size, not this. */
  font-size: clamp(1rem, 1.1111vw, 1.25rem);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none; /* no rubber-band gap above the header */
}

body {
  overflow-x: clip; /* nothing may extend the page sideways */
  display: flex;
  flex-direction: column;
  min-height: 100dvh; /* footer rests at the bottom even on short pages */
  font-family: "Inter", system-ui, sans-serif;
  font-weight: var(--weight-light);
  font-size: var(--text-body);
  line-height: 1.4;
  color: var(--color-ink);
  background: var(--color-paper);
}

/* Explicit, not the UA's `bolder`: that keyword is a RELATIVE mapping,
   and from the body's 300 it only reaches 400 — editor bold was barely
   visible in any light-weight context (product accordions). */
b,
strong {
  font-weight: var(--weight-bold);
}

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

a {
  color: inherit;
}

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

/* fields sit on drawn artwork (card fills, illustrated underlines and
   boxes) — a UA-white fill would cover it */
input,
textarea,
select {
  background-color: transparent;
}

h1,
h2,
h3,
h4 {
  font-weight: var(--weight-medium);
  line-height: 1.15;
}

h1 { font-size: var(--text-heading); }
h2 { font-size: var(--text-title); }
h3 { font-size: var(--text-body); }

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

/* Text fields drop the ring — it boxes in the drawn underlines and field
   art, and the caret already marks which field is live. Buttons, links
   and checkboxes keep the ring above. */
:is(input:not([type='checkbox']):not([type='radio']), textarea, select):focus-visible {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    /* none, not a 0.01ms duration: any nonzero duration still creates a
       real transition for EVERY property change on EVERY element
       (transition-property defaults to all), which holds the old value
       for one frame — enough for scroll clamping to fire against stale
       layout and for style changes to land frames apart. Nothing here
       listens for transitionend, so suppressing outright is safe. */
    transition: none !important;
    scroll-behavior: auto !important;
  }

  /* The chips' staggered fold survives as a deliberate signature (like
     the drift bubbles): durations collapse to a blink but the per-chip
     delays keep them popping one at a time. The delays are inline
     !important (sticky-chips.js) so they outrank the blanket rule above. */
  .chip {
    transition-property: opacity, max-width, padding, margin, border-width !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Phone-landscape notice ---------- */

/* A real phone held sideways (small height + touch) gets a full-screen
   ask to rotate back — the touch pair keeps short desktop windows out.
   Height bound 480px: the biggest phones top out near 450px in landscape,
   the smallest iPad (mini, 744px) still clears it with Safari's bars open. */
.rotate-notice {
  display: none;
}

@media (orientation: landscape) and (max-height: 30rem) and (hover: none) and (pointer: coarse) {
  .rotate-notice {
    position: fixed;
    inset: 0;
    z-index: 100; /* above everything, the menu overlay (20) included */
    display: grid;
    place-items: center;
    padding: var(--gutter);
    background: var(--color-paper);
    font-size: var(--text-title);
    font-weight: var(--weight-medium);
    text-align: center;
  }
}

/* ---------- Page (main content area) ---------- */

.page {
  flex: 1;
  padding: var(--space-3) var(--gutter) 0;
}

/* ---------- Utilities ---------- */

/* the decoy inside a displayed address (snippets/email-link.php):
   display, not visibility — must be absent from copy and screen readers */
.email-link__decoy {
  display: none;
}

.u-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* out-of-stock: paired with the matching :disabled buy button (below,
   per component) so the label and control dim together instead of only
   the button showing the browser's own inconsistent disabled style */
.u-dimmed {
  opacity: 0.4;
}

/* ---------- Blocks field content (article body, legal pages) ---------- */

/* spacing between separate blocks (text/image/etc), not just paragraphs
   within one block — each Kirby block renders as its own sibling */
.blocks-body > * + * {
  margin-top: 1.5rem;
}

/* the writer field's heading/list nodes (enabled in blocks/text.yml,
   matching the excerpt field's richer toolbar) had no spacing rule yet */
.block-text :is(p, ul, ol, h1, h2, h3, h4) + :is(p, ul, ol, h1, h2, h3, h4) {
  margin-top: 1em;
}

.block-text :is(ul, ol) {
  padding-left: 1.25em;
}

/* iPad band: text blocks step off the right edge — the full stretched
   width is too long a measure to read comfortably — and sit a notch
   tighter than the body's 1.4 leading */
@media (min-width: 46rem) and (max-width: 71.9375rem) {
  .block-text {
    padding-right: 15%;
    line-height: 1.3;
    font-weight: var(--weight-regular); /* up from the body's light */
  }
}

/* Multi-column text (Panel choice per block). Mobile stays single-column
   — the widths here would each hold a couple of words. CSS columns, not
   grid: the text has to flow from one column into the next by itself. */
@media (min-width: 72rem) {
  .block-text--cols-2 { columns: 2; }
  .block-text--cols-3 { columns: 3; }
  .block-text--cols-4 { columns: 4; }

  [class*='block-text--cols-'] {
    column-gap: var(--space-4);
  }

  /* Prose flows across the breaks, as it does in print — holding whole
     paragraphs together instead makes the balancer fit them into fewer
     columns than asked for and leave the last one empty. Headings are
     the exception: kept whole, and never stranded at a column's foot. */
  [class*='block-text--cols-'] :is(h1, h2, h3, h4) {
    break-inside: avoid;
    break-after: avoid;
  }

  [class*='block-text--cols-'] :is(p, ul, ol) {
    orphans: 2; /* never one lone line at a column break */
    widows: 2;
  }
}

/* a pasted YouTube/Vimeo link on its own line becomes the player
   (text_with_embeds() in helpers.php) — it keeps the text column's width
   rather than bleeding full-width like the Video block */
.block-text__video {
  margin: 1.5rem 0 0;
}

.block-text__video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
}

/* Click-to-play YouTube poster (helpers.php's facade + js/video-facade.js).
   The play circle speaks the site's bubble language — white circle, thin
   ink border, journal yellow on hover, like the Read circles. */
.video-facade {
  position: relative;
  display: block;
}

.video-facade__poster {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover; /* hqdefault fallbacks arrive 4:3 — cropped, not squashed */
}

.video-facade__play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
}

.video-facade__play::after {
  content: '';
  margin-left: 0.3rem; /* optical centre — a triangle's mass sits left of its box */
  border-left: 1.25rem solid var(--color-ink);
  border-block: 0.8rem solid transparent;
}

.video-facade:focus-visible .video-facade__play {
  background: #fdff90; /* the Journal pill's yellow, as on the Read circles */
}

@media (hover: hover) {
  .video-facade:hover .video-facade__play {
    background: #fdff90;
  }
}

/* Writer text-color mark (site/plugins/writer-colors) — a fixed palette,
   not an open color picker: CSP (style-src 'self') drops inline styles,
   so the mark applies one of these classes instead. Kept in sync by
   hand with site/plugins/writer-colors/index.css (mirrors these classes
   for the Panel, which doesn't load this stylesheet). */
.text-red {
  color: #fb2424;
}

.text-orange {
  color: #ff8a1e;
}

.text-green {
  color: #50ac6d;
}

.text-green-bright {
  color: #3fff0a;
}

.text-teal {
  color: #1cafa3;
}

.text-blue {
  color: #3b7ce3;
}

.text-purple {
  color: #9b4fde;
}

.text-pink {
  color: #ff3d9a;
}

/* Load-more pill — shop's More Products, journal's More Reads, gatherings'
   More Past Events. JS-revealed once there are more matches than the page
   cap (the *-filter.js scripts); the [hidden] rule is explicit because
   author styles beat the browser's own default. */
.load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* tap-target minimum */
  margin: var(--space-4) auto var(--space-3);
  padding: 0.25em 1.25em;
  border: var(--border-thin);
  border-radius: var(--radius-l);
  background: var(--accent-yellow);
  font: inherit;
  font-size: var(--text-ui);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.load-more[hidden] {
  display: none;
}

/* the click waits for the next page's images (load-more.js) */
.load-more[aria-busy='true'] {
  cursor: progress;
  opacity: 0.6;
}

.load-more:focus-visible {
  background: var(--color-ink);
  color: var(--accent-yellow);
}

@media (hover: hover) {
  .load-more:hover {
    background: var(--color-ink);
    color: var(--accent-yellow);
  }
}

/* Bordered pill section heading — gatherings' Upcoming/Past dividers and
   the home page's Shop/Gathering/Journal section titles share this
   recipe; per-page modifiers add only the background color. */
.divider-pill {
  display: block;
  width: 10.5rem; /* fixed so siblings share one footprint */
  margin: 2rem auto 1.5rem;
  padding: 0.3em 2em;
  border: var(--border-thin);
  border-radius: var(--radius-l);
  font-size: var(--text-ui); /* 16px */
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  text-align: center;
}