/*
Theme Name: Alveus
Theme URI: https://alveus-v2.test
Author: Alveus Therapeutics
Description: Custom theme voor Alveus Therapeutics. Dynamisch scroll-achtergrondsysteem, flexibele ACF-contentblokken, Barba/GSAP/Lenis.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 8.1
Text Domain: alveus
*/

/* =========================================================
   DESIGN TOKENS — derived from Figma "Alveus" variables
   ========================================================= */
:root {
  /* Brand palette */
  --c-white:            #ffffff;
  --c-blue-10:          #e8f0ff;  /* Blue 10 Fresh */
  --c-blue-30:          #a9bddf;  /* Brand 30 Fresh */
  --c-blue-light:       #479ff3;  /* Numab Blue */
  --c-action:           #3660eb;  /* Action */
  --c-brand:            #042e7b;  /* Brand Blue */
  --c-vibrant:          #09007b;  /* Blue Vibrant */
  --c-navy:             #02225e;  /* Brand Blue NEW */
  --c-navy-dark:        #00114c;  /* Brand Blue Dark */
  --c-turquoise:        #00ffec;  /* Ice Turquoise (accent) */
  --c-grey-10:          #c9cbd1;

  /* Semantic */
  --text-on-light:      var(--c-navy-dark);
  --text-on-dark:       var(--c-white);
  --accent:             var(--c-turquoise);

  /* Dynamic scroll background (driven by JS, see scroll-bg.js) */
  --bg: var(--c-white);
  --fg: var(--text-on-light);

  /* Typography */
  --font-sans: "Wix Madefor Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale (Figma desktop sizes as the max) */
  --fs-h1:    clamp(2.75rem, 1.6rem + 4.6vw, 3.75rem);   /* 60 */
  --fs-h2:    clamp(2.1rem,  1.5rem + 2.4vw, 2.625rem);  /* 42 */
  --fs-h3:    clamp(1.75rem, 1.4rem + 1.6vw, 2.125rem);  /* 34 */
  --fs-h4:    clamp(1.5rem,  1.3rem + 0.9vw, 1.75rem);   /* 28 */
  --fs-h5:    clamp(1.25rem, 1.15rem + 0.5vw, 1.375rem); /* 22 */
  --fs-lead:  clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);    /* 24 */
  --fs-body:  1.125rem;   /* 18 */
  --fs-small: 0.875rem;   /* 14 */
  --fs-sub:   0.6875rem;  /* 11 */
  --fs-btn:   0.75rem;    /* 12 */

  /* Spacing & layout */
  --container:    1314px; /* Figma content width (1600 - 2*143) */
  --gutter:       clamp(1.25rem, 4vw, 143px);
  --section-pad:  clamp(4rem, 9vw, 9rem);
  --radius:       16px;
  --radius-pill:  100px;

  --ease-osmo:    cubic-bezier(0.625, 0.05, 0, 1);
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
  /* Kill the grey/blue flash on tap across the whole site (property inherits). */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-weight: 400;
  color: var(--fg);
  background-color: var(--bg);
  /* The dynamic background lives on a fixed layer (.bg-canvas); body stays
     transparent-ish but we keep a fallback colour for no-JS. */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: color 0.4s linear;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-h1); line-height: 1; }
h2 { font-size: var(--fs-h2); line-height: 1.19; }
h3 { font-size: var(--fs-h3); line-height: 1.29; }
h4 { font-size: var(--fs-h4); line-height: 1.43; }
h5 { font-size: var(--fs-h5); line-height: 1.18; }
p  { margin: 0 0 1em; }
strong, b { font-weight: 700; }

.lead { font-size: var(--fs-lead); line-height: 1.33; }
.small { font-size: var(--fs-small); line-height: 1.57; }

/* Rich text (WYSIWYG output via alveus_rich()). Inherits the block's font size
   and colour from the wrapper class it is given, and styles the inline markup
   editors can add anywhere: paragraphs, links, bold/italic, and bulleted or
   numbered lists. Links inherit the surrounding colour + underline so they read
   on both light and dark sections. */
.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text p { margin: 0 0 1em; }
.rich-text strong, .rich-text b { font-weight: 700; }
.rich-text em, .rich-text i { font-style: italic; }
.rich-text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  transition: opacity 0.2s ease;
}
.rich-text a:hover { opacity: 0.65; }
.rich-text ul, .rich-text ol { margin: 0 0 1em; padding-left: 1.35em; }
.rich-text ul { list-style: disc; }
.rich-text ol { list-style: decimal; }
.rich-text li { margin: 0 0 0.4em; }
.rich-text li:last-child { margin-bottom: 0; }
.rich-text li > ul, .rich-text li > ol { margin: 0.4em 0 0; }
/* Headings, quotes and inline images an editor may add anywhere. Colour is
   inherited so they read on both light and dark sections; sizes are relative
   to the wrapper's font-size so they scale with whatever block they sit in. */
.rich-text h2, .rich-text h3, .rich-text h4 {
  margin: 1.4em 0 0.5em;
  color: inherit;
  font-weight: 500;
  line-height: 1.25;
}
.rich-text h2 { font-size: 1.5em; }
.rich-text h3 { font-size: 1.25em; }
.rich-text h4 { font-size: 1.1em; }
.rich-text blockquote {
  margin: 1.2em 0;
  padding-left: 1em;
  border-left: 3px solid currentColor;
  opacity: 0.85;
  font-style: italic;
}
.rich-text img { max-width: 100%; height: auto; border-radius: 8px; margin: 1.2em 0; }
.cards-item__text { opacity: 0.8; }

/* Eyebrow / subtitle */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--fs-sub);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.27em;
  text-transform: uppercase;
}
/* Real elements (not ::before) so JS can draw the line then fade in the text. */
.eyebrow__line {
  width: 40px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  flex: none;
  transform-origin: left center; /* draws left -> right */
}
.eyebrow__text { display: inline-block; }

/* =========================================================
   LAYOUT
   ========================================================= */
/* The Barba container must always fill at least the viewport, otherwise a
   short page (e.g. an inner page whose footer sits outside <main>) does not
   cover the screen while it slides during the page transition, revealing the
   outgoing page / background behind it. */
main[data-barba="container"] {
  display: block;
  min-height: 100svh;
}

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

.section {
  position: relative;
  padding-block: var(--section-pad);
}

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