/* ==========================================================================
   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. */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

@media (min-width: 1025px) {
  html {
    font-size: 70.4%;
  }
}

@media (min-width: 1200px) {
  html {
    font-size: 84.8%;
  }
}

@media (min-width: 1510px) {
  html {
    font-size: 100%;
  }
}

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: 400;
  line-height: 1.25;
  color: var(--color-primary);
}

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;
}

a {
  color: var(--color-action);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

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: 2.75rem;
  margin-bottom: var(--space-2);
}

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

.section-title .section-sub {
  font-size: 1.125rem;
  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 -------------------------------------------------------------------
   Flat colors per the shipped theme CSS — the old gradient is retired. */
.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-color: var(--color-action);
  color: #fff;
}

.btn-action:hover {
  background-color: var(--color-action-hover);
  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 ------------------------------------------------------------------- */
.field {
  display: block;
  width: 100%;
  padding: 0.65em 1em;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-btn);
  background-color: var(--color-surface);
  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);
}