/* ==========================================================================
   Base — resets, typography, focus, shared utilities
   ========================================================================== */

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

/*
 * No overflow-x here.
 *
 * `overflow-x: hidden` on html or body silently disables `position: sticky`
 * for everything inside them — the header simply scrolls away with no error to
 * explain why. It was there to catch anything wider than the viewport; the
 * cure was worse than the disease.
 *
 * Overflow is contained at the elements that actually cause it instead: the
 * marquees and rails already clip themselves, and the rule below catches
 * anything else without touching the scroll container.
 */
html {
  scroll-behavior: smooth;
  /* The anchor offset lives with the header, in layout.css, since it is the
     header's height that decides it. */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;

  /*
   * `clip`, not `hidden`.
   *
   * Both stop sideways scrolling, but `hidden` makes the element a scroll
   * container — and a sticky element inside a scroll container sticks to that
   * container, not the viewport, so the header just scrolled away with nothing
   * to explain why. `clip` prevents the overflow without creating the
   * container, so sticky keeps working.
   */
  overflow-x: clip;
  background: var(--ca-cream);
  color: var(--ca-body);
  font-family: var(--ca-font-body);
  font-size: var(--ca-text-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--ca-font-display);
  color: var(--ca-ink);
  line-height: 1.05;
  letter-spacing: var(--ca-tracking-tight);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--ca-text-h1); font-weight: 800; letter-spacing: var(--ca-tracking-tighter); line-height: 0.98; }
h2 { font-size: var(--ca-text-h2); font-weight: 700; }
h3 { font-size: var(--ca-text-h3); font-weight: 700; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ca-orange-dark); text-decoration: none; }
a:hover { color: var(--ca-orange); }

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

button { font: inherit; }

/* Visible keyboard focus everywhere. Mouse users don't see it. */
:focus-visible {
  outline: 3px solid var(--ca-orange);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/*
 * The one measure. Every section on the site — hero, marketing bands, store
 * panels, footer, marquee contents — resolves to this width and this gutter,
 * which is what the prototype used on its own hero: max-width 1200 with a
 * clamp(16px, 4vw, 40px) inset.
 *
 * Anything that needs the same geometry should use .ca-shell or borrow these
 * two custom properties rather than restating numbers.
 */
.ca-shell,
.ca-page-hero,
.ca-hero,
.ca-promos__inner,
.ca-mk-hero,
.ca-mk-media,
.ca-mk-callout,
.ca-mk-cta {
  max-width: var(--ca-width);
  margin-inline: auto;
  padding-inline: var(--ca-gutter);
}

/* Kept as an alias so older markup keeps working; it resolves to the same. */
.ca-shell--tight { max-width: var(--ca-width-tight); }


/* Screen-reader-only, per the WordPress accessibility convention. */
.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;
}

.ca-skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 12px 20px;
  background: var(--ca-ink);
  color: var(--ca-cream);
  border-radius: 0 0 var(--ca-r-sm) 0;
}
.ca-skip-link:focus {
  left: 0; top: 0;
  color: var(--ca-cream);
}

/*
 * Eyebrow — the mono all-caps kicker above a heading.
 *
 * The one definition. It had drifted into three overlapping blocks across two
 * stylesheets, each setting a different size, which is why it kept looking
 * wrong in one place after being fixed in another.
 *
 * The `p.` and `.wp-block-group` variants are here because WordPress's global
 * paragraph styles outrank a single class and were flattening the colour.
 */
.ca-eyebrow,
p.ca-eyebrow,
.wp-block-group .ca-eyebrow {
  font-family: var(--ca-font-mono);
  font-size: var(--ca-text-label);
  /*
   * Not bold. Mono, uppercase and letter-spaced is already emphatic; adding
   * weight on top makes a small label shout over the heading it introduces.
   */
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: var(--ca-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ca-faint);
  margin: 0 0 10px;
}

.ca-eyebrow--teal,
p.ca-eyebrow--teal,
.wp-block-group .ca-eyebrow--teal { color: var(--ca-teal); }

.ca-eyebrow--orange,
p.ca-eyebrow--orange,
.wp-block-group .ca-eyebrow--orange { color: var(--ca-orange-dark); }

.ca-eyebrow--warm,
p.ca-eyebrow--warm,
.wp-block-group .ca-eyebrow--warm { color: var(--ca-faint-warm); }

.ca-meta {
  font-family: var(--ca-font-mono);
  font-size: var(--ca-text-sm);
  color: var(--ca-faint);
}

.ca-lede   { color: var(--ca-muted); font-size: var(--ca-text-base); }
.ca-note   { color: var(--ca-faint); font-size: var(--ca-text-sm); }
.ca-alert  { color: var(--ca-red); font-size: 13px; font-weight: 700; }

.ca-stack > * + * { margin-top: var(--ca-flow, 1rem); }

.ca-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(var(--ca-min, 240px), 1fr));
}

.ca-hr {
  height: 1px;
  background: var(--ca-hairline);
  border: 0;
  margin: 0;
}


/*
 * Shared animations.
 *
 * Kept in base so any stylesheet can use them without depending on load order.
 * The status dot uses ca-twinkle from two different files.
 */
@keyframes ca-twinkle {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}


/*
 * Fallback for browsers without `overflow: clip` (pre-Safari 16).
 *
 * Deliberately NOT overflow-x: hidden on body — that is the thing that broke
 * the sticky header in the first place. Instead the main content region clips
 * itself, which is where any stray wide element actually lives. The header sits
 * outside it, so it is unaffected either way.
 */
@supports not (overflow: clip) {
  #ca-main { overflow-x: hidden; }
}