/* ==========================================================================
   SealedUp — base: tokens, fonts, reset, typography, layout, color schemes
   Brand source: Manual de Marca (cores p. 09, combinações p. 10, tipografia p. 12–13)
   ========================================================================== */

/* Tondu © Jonathan Hill / The Northern Block — commercial web licence, single Regular weight.
   Do not redistribute the font file outside this site. */
@font-face {
  font-family: "SealedUp Display";
  src: url("/assets/fonts/tondu.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sofia Sans";
  src: url("/assets/fonts/sofia-sans-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand palette — exact HEX values from the brand manual */
  --color-teal: #036360;
  --color-dark-teal: #002d33;
  --color-amber: #ffb000;
  --color-aquamarine: #aeedd5;
  --color-off-white: #fffbf3;
  --color-tangerine: #ff7748;
  --color-white: #ffffff;

  /* Product photo surface: a deeper tint of off-white (not a new brand colour), so packshots
     separate from cream sections and stay neutral next to every game's packaging. */
  --color-product-surface: #f3ecdf;
  --product-shadow: drop-shadow(0 16px 18px rgb(0 45 51 / 0.16)) drop-shadow(0 3px 4px rgb(0 45 51 / 0.12));

  --font-display: "SealedUp Display", "Arial Black", "Helvetica Neue", sans-serif;
  --font-heading: "Sofia Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;

  /* Brand typography rules (manual p. 12–13):
     Tondu — capitals, tracking 0 · Sofia Sans Bold — capitals, tracking −25 · Manrope Regular — sentence case, tracking 0 */
  --font-display-weight: 400;
  --font-heading-weight: 700;
  --font-body-weight: 400;
  --tracking-display: 0;
  --tracking-heading: -0.025em;
  --tracking-body: 0;

  /* Tondu accented capitals (Á, É, Ó, Ã…) reach 0.92em above the baseline, so editable headings
     use 0.95 to keep accents clear of the line above. The tight 0.85 of the manual is reserved
     for fixed brand phrases with no accented capitals (hero, brand quote, marquee). */
  --leading-display: 0.95;
  --leading-display-tight: 0.85;

  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-xl: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  --text-2xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  --text-3xl: clamp(1.875rem, 1.1rem + 3.6vw, 4rem);
  --text-4xl: clamp(2.75rem, 1.6rem + 5vw, 6.25rem);
  --text-5xl: clamp(3.25rem, 1.5rem + 8vw, 9.5rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-section: clamp(3.5rem, 2rem + 6vw, 7.5rem);

  --page-width: 1320px;
  --page-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --header-height: 76px;
  --announcement-height: 38px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration: 280ms;

  --shadow-sticker: 0 4px 0 0 var(--color-dark-teal);
  --shadow-soft: 0 18px 40px -18px rgb(0 45 51 / 0.35);
  --focus-ring: 0 0 0 3px var(--color-off-white), 0 0 0 6px var(--color-teal);
}

/* --------------------------------------------------------------------------
   Color schemes — only the pairings approved on p. 10 of the brand manual.
   -------------------------------------------------------------------------- */
.scheme-cream,
:root {
  --bg: var(--color-off-white);
  --fg: var(--color-dark-teal);
  --heading: var(--color-teal);
  --accent: var(--color-tangerine);
  --muted: rgb(0 45 51 / 0.68);
  --line: rgb(0 45 51 / 0.14);
  --surface: rgb(3 99 96 / 0.06);
  --btn-bg: var(--color-teal);
  --btn-fg: var(--color-off-white);
  --btn-shadow: var(--color-dark-teal);
  --highlight: var(--color-aquamarine);
}

.scheme-teal {
  --bg: var(--color-teal);
  --fg: var(--color-off-white);
  --heading: var(--color-off-white);
  --accent: var(--color-aquamarine);
  --muted: rgb(255 251 243 / 0.78);
  --line: rgb(255 251 243 / 0.2);
  --surface: rgb(0 45 51 / 0.22);
  --btn-bg: var(--color-aquamarine);
  --btn-fg: var(--color-dark-teal);
  --btn-shadow: var(--color-dark-teal);
  --highlight: var(--color-dark-teal);
}

.scheme-dark {
  --bg: var(--color-dark-teal);
  --fg: var(--color-off-white);
  --heading: var(--color-off-white);
  --accent: var(--color-amber);
  --muted: rgb(255 251 243 / 0.72);
  --line: rgb(255 251 243 / 0.16);
  --surface: rgb(255 251 243 / 0.06);
  --btn-bg: var(--color-amber);
  --btn-fg: var(--color-dark-teal);
  --btn-shadow: var(--color-tangerine);
  --highlight: var(--color-teal);
}

.scheme-aqua {
  --bg: var(--color-aquamarine);
  --fg: var(--color-dark-teal);
  --heading: var(--color-teal);
  --accent: var(--color-dark-teal);
  --muted: rgb(0 45 51 / 0.72);
  --line: rgb(0 45 51 / 0.16);
  --surface: rgb(255 251 243 / 0.5);
  --btn-bg: var(--color-teal);
  --btn-fg: var(--color-off-white);
  --btn-shadow: var(--color-dark-teal);
  --highlight: var(--color-off-white);
}

.scheme-tangerine {
  --bg: var(--color-tangerine);
  --fg: var(--color-dark-teal);
  --heading: var(--color-off-white);
  --accent: var(--color-dark-teal);
  --muted: rgb(0 45 51 / 0.8);
  --line: rgb(0 45 51 / 0.2);
  --surface: rgb(255 251 243 / 0.18);
  --btn-bg: var(--color-dark-teal);
  --btn-fg: var(--color-off-white);
  --btn-shadow: rgb(0 45 51 / 0.45);
  --highlight: var(--color-off-white);
}

.scheme-amber {
  --bg: var(--color-amber);
  --fg: var(--color-dark-teal);
  --heading: var(--color-dark-teal);
  --accent: var(--color-off-white);
  --muted: rgb(0 45 51 / 0.8);
  --line: rgb(0 45 51 / 0.2);
  --surface: rgb(255 251 243 / 0.22);
  --btn-bg: var(--color-dark-teal);
  --btn-fg: var(--color-off-white);
  --btn-shadow: rgb(0 45 51 / 0.45);
  --highlight: var(--color-off-white);
}

[class*="scheme-"] {
  background-color: var(--bg);
  color: var(--fg);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Tondu ships a single weight; never let the browser fake a bold. */
  font-synthesis-weight: none;
  scroll-behavior: smooth;
  /* Keeps in-page anchor targets clear of the sticky header. */
  scroll-padding-top: calc(var(--header-height) + 1.5rem);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-off-white);
  color: var(--color-dark-teal);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-body-weight);
  letter-spacing: var(--tracking-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Decorative stickers may bleed past the viewport edge; `clip` (unlike `hidden`) keeps position: sticky working. */
  overflow-x: clip;
}

body.is-locked {
  overflow: hidden;
}

main {
  flex: 1;
}

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

img {
  height: auto;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

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

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

::selection {
  background: var(--color-aquamarine);
  color: var(--color-dark-teal);
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--color-dark-teal);
  color: var(--color-off-white);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  transform: translateY(-150%);
  transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   Typography (manual p. 13: Tondu caps · Sofia Sans caps −25 · Manrope regular)
   -------------------------------------------------------------------------- */
.display,
.h1,
.h2 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  color: var(--heading);
  text-wrap: balance;
  /* Last resort for long Portuguese words on very narrow screens. */
  overflow-wrap: break-word;
}

.display {
  font-size: var(--text-5xl);
}

.h1 {
  font-size: var(--text-4xl);
}

.h2 {
  font-size: var(--text-3xl);
}

.h3,
.h4,
.eyebrow,
.subheading {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  line-height: 1.1;
}

.h3 {
  font-size: var(--text-xl);
  color: var(--heading);
}

.h4 {
  font-size: var(--text-md);
}

.subheading {
  font-size: var(--text-lg);
}

/* `fit-content` + `justify-self` keep the marker hugging the text inside grid/flex parents. */
.eyebrow {
  display: inline-block;
  justify-self: start;
  align-self: flex-start;
  width: fit-content;
  font-size: var(--text-sm);
  color: var(--fg);
}

/* Highlighter-marker eyebrow used across the social content */
.eyebrow--marker {
  padding: 0.05em 0.35em;
  background: linear-gradient(transparent 18%, var(--highlight) 18%, var(--highlight) 88%, transparent 88%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.accent {
  color: var(--accent);
}

.lead {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--muted);
  max-width: 56ch;
}

.rte > * + * {
  margin-top: 1em;
}

.rte h2,
.rte h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  color: var(--heading);
  line-height: 1.15;
}

.rte h2 {
  font-size: var(--text-xl);
  margin-top: 2em;
}

.rte ul {
  padding-left: 1.25em;
}

.rte li + li {
  margin-top: 0.4em;
}

.rte a {
  color: var(--color-teal);
}

.rte strong {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.page-width {
  width: 100%;
  max-width: calc(var(--page-width) + var(--page-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.page-width--narrow {
  max-width: calc(820px + var(--page-gutter) * 2);
}

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

.section--tight {
  padding-block: calc(var(--space-section) * 0.6);
}

/* Consecutive sections on the same background share a single gap instead of stacking two paddings.
   Unschemed sections sit on the page's cream, the same as scheme-cream. In the Shopify theme each
   section gets a `.shopify-section` wrapper, so this pairing moves to that wrapper level. */
.section:is(:not([class*="scheme-"]), .scheme-cream) + .section:is(:not([class*="scheme-"]), .scheme-cream),
.section.scheme-teal + .section.scheme-teal,
.section.scheme-dark + .section.scheme-dark,
.section.scheme-aqua + .section.scheme-aqua,
.section.scheme-tangerine + .section.scheme-tangerine,
.section.scheme-amber + .section.scheme-amber {
  padding-top: 0;
}

.section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  margin-bottom: clamp(1.75rem, 1rem + 2vw, 3rem);
}

.section-header__text {
  display: grid;
  gap: var(--space-3);
  max-width: 720px;
}

.stack > * + * {
  margin-top: var(--stack-space, var(--space-4));
}

/* Giant outlined wordmark used as background texture (stories, banner, cards) */
.wordmark-texture {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.wordmark-texture svg {
  position: absolute;
  width: max(140%, 900px);
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  opacity: 0.22;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}