/* Base: reset, typography, container, focus. No hex literals — see tokens.css. */

@font-face {
  font-family: Archivo;
  src: url("../fonts/archivo-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Archivo;
  src: url("../fonts/archivo-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Archivo;
  src: url("../fonts/archivo-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Archivo;
  src: url("../fonts/archivo-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Archivo;
  src: url("../fonts/archivo-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Archivo;
  src: url("../fonts/archivo-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

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

  /* Radius is 0 on absolutely everything — handoff, "Espaçamento". */
  border-radius: var(--st-radius);
}

html {
  /* stylelint-disable-next-line property-no-vendor-prefix -- iOS Safari ignores the unprefixed property. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--st-bg);
  color: var(--st-ink);
  font-family: var(--st-font);
  font-size: var(--st-size-body);
  font-weight: var(--st-weight-regular);
  line-height: var(--st-lh-body);
}

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

/* Author-origin `svg { display: block }` above beats the UA stylesheet's
   `[hidden] { display: none }`, which would otherwise hide the icon sprite.
   Restore it explicitly — `[hidden]` (0,1,0) outranks `svg` (0,0,1), so no
   !important is needed. Without this the sprite renders as a 300×150 block
   at the top of every page. */
[hidden] {
  display: none;
}

img {
  height: auto;
}

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

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  text-align: left;
  text-wrap: balance;
}

h1 {
  font-size: var(--st-size-h1);
  font-weight: var(--st-weight-black);
  letter-spacing: var(--st-track-h1);
  line-height: 1.05;
}

h2 {
  font-size: var(--st-size-h2);
  font-weight: var(--st-weight-extrabold);
  letter-spacing: var(--st-track-h2);
  line-height: 1.1;
}

a {
  color: var(--st-ink);
  transition: color var(--st-transition);
}

a:hover,
a:active {
  color: var(--st-accent-deep);
}

/* The browser's blue ring never appears. Handoff, "Foco de teclado". */
:focus-visible {
  outline: var(--st-focus-width) solid var(--st-accent);
  outline-offset: var(--st-focus-offset);
}

.st-container {
  width: 100%;
  max-width: var(--st-container);
  margin-inline: auto;
  padding-inline: var(--st-gutter);
}

/*
 * `index.php:16` prints the WordPress page's own title
 * (`the_title( '<h1 class="st-page-title">', '</h1>' )`) above the shortcode
 * content on every page falling through to that generic template — this
 * includes `/minha-conta/` and its endpoints, since there is no dedicated
 * page-myaccount.php. Left unstyled it runs full-bleed above the properly
 * contained content below it (e.g. `.st-account`'s own centred shell).
 *
 * Task 7B (my-account plan, added mid-execution). Shares `.st-container`'s
 * own exact measure — max-width/margin-inline/padding-inline, same
 * tokens — rather than inventing a new one: this is the same "constrain to
 * the site's standard measure" job, just on an `<h1>` instead of a `<div>`.
 * Vertical rhythm borrows `.st-section`'s own padding-block tokens for the
 * same reason (`--st-section-y` desktop, `--st-section-y-mobile` at/under
 * 599px, matched below) — no new spacing number invented either. Typography
 * is untouched: the generic `h1` rule above already sets the font-size/
 * weight/letter-spacing/line-height this element inherits.
 *
 * `.woocommerce-checkout .st-page-title` (checkout.css, thankyou.css) is
 * more specific (0,2,0 vs this rule's 0,1,0) and keeps winning on those two
 * screens' own narrower 1160px measure — this rule is a base default
 * underneath them, not a replacement.
 */
.st-page-title {
  max-width: var(--st-container);
  margin-inline: auto;
  padding-inline: var(--st-gutter);
  padding-block: var(--st-section-y);
}

.st-section {
  padding-block: var(--st-section-y);
}

.st-eyebrow {
  margin: 0;
  color: var(--st-muted-2);
  font-size: var(--st-size-eyebrow);
  font-weight: var(--st-weight-extrabold);
  letter-spacing: var(--st-track-eyebrow);
  text-transform: uppercase;
}

.st-eyebrow--accent {
  color: var(--st-accent-deep);
}

/* H2 left, "Ver tudo" right, 2px rule beneath. Used by every titled section. */
.st-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--st-gutter);
  padding-bottom: 14px;
  border-bottom: var(--st-rule);
  margin-bottom: var(--st-grid-gap);
}

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

/* Range-notation media features (e.g. "width <= 599px") are dropped whole by engines
   before Safari 16.4 — a silent failure, not a false negative. The old comparison syntax
   degrades safely, so it stays even though it trips stylelint's range-notation rule
   (.stylelintrc.json allows "prefix" notation for this reason). Do not "modernise" this
   back. */
@media (max-width: 599px) {
  .st-section,
  .st-page-title {
    padding-block: var(--st-section-y-mobile);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

/* WordPress core's block stylesheet rounds button links, which the design
   forbids everywhere. Editorial pages are built from core blocks, so an editor
   adding a button anywhere would otherwise reintroduce a radius the base
   spec test then fails on — caught exactly that way when the front page
   gained its first buttons. Give them the theme's own button look too, so
   block-editor content matches the components around it. */
.wp-block-button__link {
  border: var(--st-border-width) solid var(--st-ink);
  border-radius: 0;
  background: var(--st-accent);
  color: var(--st-surface);
  font-weight: var(--st-weight-extrabold);
}

.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--st-ink);
}