/* ==========================================================================
   Base: reset, typography, layout primitives, buttons, forms, shared
   utilities. Everything block-specific lives in components/.
   ========================================================================== */

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

* {
  margin: 0;
}

/* Match the live theme's responsive root-font scaling: it shrinks the rem base
   in the 1025–1510px range (html 44% / 53% of a 62.5% base) so type + rem
   spacing render smaller on mid-size desktops, then returns to full size at
   ≥1510px. Our tokens are relative to a 16px (100%) base, so apply the same
   ratios (44÷62.5≈70.4%, 53÷62.5≈84.8%). Below 1025px it stays full size. */
/* THE ROOT LIVES IN `src/styles/foundation/scale.css` — one value, 100%, every
   surface. It used to step here: 100% -> 70.4% at 1025px -> 84.8% at 1200px ->
   100% at 1510px, so `1rem` meant 11.26px on an 1100px screen, 13.57px on a
   1280px one and 16px on a 1600px one.

   That is why this storefront is ~8% rem and 92% px: rem could not be used for
   structure when the root moved under it. It also made the type non-monotonic —
   `--text-h1` computed to 30px below 768, 44px from 768-1024, 31px from
   1025-1199, 37px from 1200-1509 and 44px again at 1510+, i.e. a heading LARGER
   on an 800px tablet than on a 1280px laptop.

   The responsive shrink the step-down provided is not lost: it moved into the
   type and spacing scales as clamp(), where it is continuous. Do not reinstate
   a root step here. */

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
}

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

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

/* --- Typography ------------------------------------------------------------ */
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  line-height: 1.25;
  color: var(--color-heading);
}

/* Headings are coloured by the rule above, which BEATS inheritance — so a
   surface that sets its own text colour (a purple card, a brand band) would
   still get a black heading on it. `.on-band` is the one opt-out: put it on the
   coloured surface and everything inside, headings included, goes to the
   on-band colour. Added after the black-heading change put a black
   "Travelling soon?" on a purple card. */
.on-band,
.on-band h1,
.on-band h2,
.on-band h3,
.on-band h4,
.on-band h5 {
  color: var(--color-on-band);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-lg); }

p {
  margin-block: 0 1em;
}

/* THEME RULE (owner, 2026-08-14): a link is NEVER underlined — not at rest, not
   on hover, not on focus. Stated once here so no component has to cancel it. */
a,
a:hover,
a:focus,
a:active {
  color: var(--color-action);
  text-decoration: none;
}

/* THEME RULE (owner, 2026-08-14): a label is always clickable-looking. It is
   nearly always tied to a control, so the pointer is the honest cursor. */
label {
  cursor: pointer;
}

ul,
ol {
  padding-left: 1.4em;
  margin-block: 0 1em;
}

/* --- Section titles --------------------------------------------------------- */
.section-title {
  text-align: center;
  margin-bottom: var(--space-5);
}

/* Left-aligned variant (e.g. the split article section). */
.section-title--left {
  text-align: left;
}

/* Master styles for section headings + sub-titles — used site-wide so every
   section reads consistently (Speak ships 400 only, so size gives presence). */
.section-title h2 {
  font-size: var(--text-h2);
  margin-bottom: var(--space-2);
}

.section-title em {
  color: var(--color-accent);
  font-style: inherit;
}

.section-title .section-sub {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
}

/* --- Layout ------------------------------------------------------------------ */
/* Container widths INCLUDE the side padding (content = width − 2×pad),
   matching the reference (content 1448px inside the 1480 container). */
/* Matches the live theme's Bootstrap container: 1170px up to a 1510px
   viewport, 1480px above (four plan cards fit at the wide tier, three below). */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

@media (min-width: 1510px) {
  .container {
    max-width: var(--container-xxl);
  }
}

.container--narrow {
  max-width: calc(var(--container-lg) + var(--container-pad) * 2);
}

.section {
  padding-block: var(--space-7);
}

.section--alt {
  background-color: var(--color-bg-alt);
}

/* --- Gradient band (hero + footer) -------------------------------------------
   The theme's recipe: noise texture, organic blob pattern, vertical gradient,
   plus a 6% primary overlay via ::before. Children need position/z-index.
   Per-SITE override hooks (multi-site): a partner tokens.css may restate
   --band-bg / --band-bg-size / --band-bg-position / --band-tint /
   --color-on-band to swap the whole band treatment (e.g. the partnerships'
   flat light band + ellipse) without touching these rules. Defaults = the
   main site's look. */
.band-gradient {
  position: relative;
  z-index: 1;
  overflow: hidden;
  color: var(--color-on-band);
  background: var(
    --band-bg,
    url("../img/transparent-noise.png"),
    url("../img/pattern-dark-logo.svg") no-repeat,
    linear-gradient(var(--band-grad-start), var(--band-grad-end))
  );
  background-size: var(--band-bg-size, auto, 100%, auto);
  background-position: var(--band-bg-position, top left, 280px -240px, top left);
  background-repeat: var(--band-bg-repeat, repeat, no-repeat, repeat);
}

.band-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-primary);
  opacity: var(--band-tint, 0.06);
}

.band-gradient h1,
.band-gradient h2,
.band-gradient h3 {
  color: var(--color-on-band);
}

/* --- Buttons -------------------------------------------------------------------
   SimOptions theme (owner, 2026-08-13): the solid action button carries THE brand
   gradient (--brand-gradient). Hover brightens rather than swapping a colour —
   a background-color cannot show through a gradient background-image. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75em 2.2em;
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: var(--text-btn);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}

.btn:hover {
  text-decoration: none;
}

.btn-action {
  background: var(--brand-gradient);
  /* .btn carries a 2px transparent border; background-origin defaults to
     padding-box while the clip is border-box, so that 2px fell outside the
     gradient and tiled its opposite end — a stripe at each cap. Span the whole
     border box instead. */
  background-origin: border-box;
  color: #fff;
}

.btn-action:hover {
  filter: brightness(1.06);
  color: #fff;
}

.btn-outline {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: #fff;
}

/* --- Forms ------------------------------------------------------------------- */
/* What a visitor TYPES is black, whatever the brand colour is (owner,
   2026-09-18) — their own words read as content, not as brand. */
.field {
  display: block;
  width: 100%;
  padding: 0.65em 1em;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-input);
  background-color: var(--color-surface);
  color: var(--ink-900);
  font-size: var(--text-body);
}

.field::placeholder {
  color: var(--color-text-soft);
}

.field:focus {
  outline: 2px solid var(--color-action);
  outline-offset: -1px;
  border-color: var(--color-action);
}

textarea.field {
  min-height: 170px;
  resize: vertical;
}

/* --- Prices --------------------------------------------------------------------- */
.price {
  font-weight: 600;
}

.price--sale {
  color: var(--color-sale);
}

.price--struck {
  color: var(--color-primary);
  text-decoration: line-through;
  font-weight: 400;
}

/* --- Utilities -------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

.band-gradient :focus-visible {
  outline-color: var(--color-on-band);
}

/* Content blocks — the general `[content-block]` section. Deliberately plain:
   an optional title + sub-title, then the body across the full column. Anything
   richer is composed by nesting shortcodes inside the body, not by styling
   variants here. */
.cblock { margin: 2rem 0; }
.cblock__head { margin-bottom: 1rem; }
.cblock__title { margin: 0 0 0.25rem; }
.cblock__sub { margin: 0; color: var(--color-text-muted, #667); }
.cblock__body > *:first-child { margin-top: 0; }
.cblock__body > *:last-child { margin-bottom: 0; }

/* Shortcode grid — `[row][col width="n"]`. Twelve columns, widths on a data
   attribute so the rules live here and nothing is written inline. The admin's
   fullscreen editor loads this same file, which is the whole reason its preview
   matches the published page. */
.sc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.sc-col { flex: 1 1 100%; min-width: 0; }
.sc-col > *:first-child { margin-top: 0; }
.sc-col > *:last-child { margin-bottom: 0; }
@media (min-width: 768px) {
  .sc-col[data-w="1"]  { flex-basis: calc(8.3333% - 1.375rem); }
  .sc-col[data-w="2"]  { flex-basis: calc(16.6666% - 1.25rem); }
  .sc-col[data-w="3"]  { flex-basis: calc(25% - 1.125rem); }
  .sc-col[data-w="4"]  { flex-basis: calc(33.3333% - 1rem); }
  .sc-col[data-w="5"]  { flex-basis: calc(41.6666% - 0.875rem); }
  .sc-col[data-w="6"]  { flex-basis: calc(50% - 0.75rem); }
  .sc-col[data-w="7"]  { flex-basis: calc(58.3333% - 0.625rem); }
  .sc-col[data-w="8"]  { flex-basis: calc(66.6666% - 0.5rem); }
  .sc-col[data-w="9"]  { flex-basis: calc(75% - 0.375rem); }
  .sc-col[data-w="10"] { flex-basis: calc(83.3333% - 0.25rem); }
  .sc-col[data-w="11"] { flex-basis: calc(91.6666% - 0.125rem); }
  .sc-col[data-w="12"] { flex-basis: 100%; }
}

/* ---- storefront section headings -----------------------------------------
   ONE definition for the heading pair every ported section draws. It replaces
   four identical inline `secTitle`/`secSub` objects that had been copied into
   the home, sales and shared-band components — changing the section heading
   meant editing four files, and they had already begun to drift (36px in two,
   34px in two more). Sizes come from the type scale, so the whole storefront
   moves together. */
.sec-title {
  font-size: var(--text-h2);
  font-weight: var(--weight-medium);
  letter-spacing: -0.3px;
  margin: 0;
  line-height: 1.15;
  color: var(--color-heading);
}

.sec-sub {
  font-size: var(--text-lg);
  font-weight: var(--weight-body);
  color: var(--color-text-soft);
  margin: 12px 0 0;
  line-height: 1.3;
}