/* ------------------------- Colors ------------------------- */
:root {
  /* Accent */
  --color-accent: #9ece59;
  --color-accent-hover: #b4e070;
  --color-accent-dark: #7fb03d;
  --color-accent-soft: rgba(158, 206, 89, 0.12);

  /* Backgrounds */
  --color-bg: #0b0f0a; /* page background - near black with green undertone */
  --color-bg-alt: #12180f; /* alt sections */
  --color-surface: #1a2114; /* cards, panels */
  --color-surface-2: #232b1c; /* elevated surfaces, hover states */
  --color-surface-3: #2f3826; /* higher elevation */

  /* Borders */
  --color-border: #2a331e;
  --color-border-strong: #3b4a28;

  /* Text */
  --color-text: #f2f5ec; /* primary text */
  --color-text-muted: #a8b29a; /* secondary text */
  --color-text-dim: #6e7862; /* tertiary / captions */
  --color-text-on-accent: #0b0f0a; /* text on accent bg */

  /* Semantic */
  --color-success: #9ece59;
  --color-warning: #f5b301;
  --color-danger: #e5484d;
  --color-info: #4cc2ff;

  /* Premium / casino accents */
  --color-gold: #e8c466;
  --color-gold-dark: #b8963f;

  /* Radius */
  --radius-s: 0.25em;
  --radius-m: 0.5em;
  --radius-l: 1em;
  --radius-xl: 1.5em;
  --radius-pill: 999px;

  /* Spacing (em based - scales with root font) */
  --space-2xs: 0.25em;
  --space-xs: 0.5em;
  --space-s: 0.75em;
  --space-m: 1em;
  --space-l: 1.5em;
  --space-xl: 2em;
  --space-2xl: 3em;
  --space-3xl: 4.5em;
  --space-4xl: 6em;

  /* Section rhythm */
  --section-pad-y: clamp(2.5em, 5vw, 5em);
  --section-gap: clamp(1em, 2vw, 2em);

  /* Typography */
  --font-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --font-display:
    "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs: 0.75em;
  --fs-s: 0.875em;
  --fs-m: 1em;
  --fs-l: 1.125em;
  --fs-xl: 1.375em;
  --fs-2xl: 1.75em;
  --fs-3xl: 2.25em;
  --fs-4xl: 3em;
  --fs-5xl: 3.75em;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  /* Shadows */
  --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-m: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-l: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-accent-glow: 0 0 0 3px var(--color-accent-soft);
  --shadow-accent-strong: 0 8px 24px rgba(158, 206, 89, 0.25);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.25s;
  --dur-slow: 0.4s;

  /* Z-index */
  --z-header: 100;
  --z-toc: 50;
  --z-modal: 1000;
}

/* ------------------------- Scaling System by Osmo [https://osmo.supply/] -------------------------  */
/* Desktop */
:root {
  --size-unit: 16; /* body font-size in design - no px */
  --size-container-ideal: 1440; /* screen-size in design - no px */
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --size-container: clamp(
    var(--size-container-min),
    100vw,
    var(--size-container-max)
  );
  --size-font: calc(
    var(--size-container) / (var(--size-container-ideal) / var(--size-unit))
  );
}
/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834; /* screen-size in design - no px */
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}
/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 550; /* screen-size in design - no px */
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}
/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390; /* screen-size in design - no px */
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}
.container {
  max-width: var(--size-container);
}
.container.medium {
  max-width: calc(var(--size-container) * 0.85);
}
.container.small {
  max-width: calc(var(--size-container) * 0.7);
}
@media screen and (max-width: 767px) {
  .container.medium {
    max-width: 100%;
  }
}
body {
  font-size: var(--size-font);
  background-color: var(--color-bg);
  color: var(--color-text);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover {
  color: var(--color-accent-hover);
}

button {
  font: inherit;
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6,
p.h1,
p.h2,
p.h3,
p.h4,
p.h5,
p.h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-m);
  color: var(--color-text);
}
h1,
p.h1 {
  font-size: var(--fs-4xl);
}
h2,
p.h2 {
  font-size: var(--fs-3xl);
}
h3,
p.h3 {
  font-size: var(--fs-2xl);
}
h4,
p.h4 {
  font-size: var(--fs-xl);
}
h5,
p.h5 {
  font-size: var(--fs-l);
}
h6,
p.h6 {
  font-size: var(--fs-m);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

p {
  margin: 0 0 var(--space-m);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

ul,
ol {
  margin: 0 0 var(--space-m);
  padding-left: 1.25em;
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-xl) 0;
}

::selection {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

.container {
  margin-inline: auto;
  padding-inline: var(--space-l);
  width: 100%;
}

/*
 * .container inside ACF InnerBlocks — no horizontal padding.
 * ACF's `.acf-innerblocks-container` wraps inner blocks in the editor, and
 * the outer block already provides horizontal spacing, so a nested .container
 * shouldn't add its own — otherwise content gets double-indented in the guide.
 */
.acf-innerblocks-container .container,
.acf-innerblocks-container > .container,
.wp-block .acf-innerblocks-container .container,
.prose .container,
.prose > .container {
  padding-left: 0;
  padding-right: 0;
}

/* Any heading (h2/h3/h4) or .section-title nested in an ACF InnerBlocks
   container — or inside a .prose region — drops its top margin so it
   aligns with the block boundary. */
.acf-innerblocks-container .section-title,
.acf-innerblocks-container h2,
.acf-innerblocks-container h3,
.acf-innerblocks-container h4,
.wp-block .acf-innerblocks-container .section-title,
.wp-block .acf-innerblocks-container h2,
.wp-block .acf-innerblocks-container h3,
.wp-block .acf-innerblocks-container h4,
.prose .section-title,
.prose h2,
.prose h3,
.prose h4 {
  margin-top: 0 !important;
}

/* Nested .section inside an ACF InnerBlocks container gets half the vertical padding. */
.acf-innerblocks-container .section,
.wp-block .acf-innerblocks-container .section,
.prose .section {
  padding-top: calc(var(--section-pad-y) * 0.5);
  padding-bottom: calc(var(--section-pad-y) * 0.5);
}

/* Comparison tables inside an ACF InnerBlocks container drop their trailing margin. */
.acf-innerblocks-container .compare,
.wp-block .acf-innerblocks-container .compare {
  margin-bottom: 0;
}

.section {
  padding-block: var(--section-pad-y);
}
.section--tight {
  padding-block: calc(var(--section-pad-y) * 0.5);
}
.section--alt {
  background: var(--color-bg-alt);
}

.section-title {
  /* 90% of the --fs-3xl token, to sit below .hero__title. */
  font-size: calc(var(--fs-3xl) * 0.8);
  margin-bottom: var(--space-s);
  /* Long German compounds overrun the line box here too — see .hero__title. */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
/* A section title that is a <p class="h2 section-title"> instead of a real
   heading: `p.h2` is more specific than `.section-title`, so the size has to be
   restated or the paragraph renders a notch larger than every h2 sibling. */
p.h2.section-title {
  font-size: calc(var(--fs-3xl) * 0.8);
}

.section-eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-s);
}
.section-lead {
  font-size: var(--fs-l);
  color: var(--color-text-muted);
  max-width: 60ch;
  margin-bottom: var(--space-xl);
}

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