/* ==========================================================================
   Centaur Trails | global.css
   Bron: Figma "Centaur Trails - Website", sectie v4 + pagina "Design System".

   Werkwijze: Bootstrap 5.3.8 doet layout, spacing, display, flex, grid en
   componenten via zijn eigen classes. Hier staan alleen:
   1. Lato SemiBold (niet op Google Fonts)
   2. Figma-tokens, gekoppeld aan Bootstrap's eigen --bs-* variabelen
   3. Typografie die Bootstrap niet kent (Figma-groottes)
   4. Container van 1280px
   5. Aanvullingen op Bootstrap voor Figma-waarden buiten zijn schaal
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Font: Lato SemiBold (600) lokaal; overige gewichten via Google Fonts
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../assets/fonts/lato-semibold.woff2") format("woff2"),
         url("../assets/fonts/lato-semibold.woff") format("woff");
}

/* --------------------------------------------------------------------------
   2. Tokens
   De --bs-* regels zorgen dat Bootstrap-utilities Figma-waarden opleveren:
   text-primary / bg-primary      = groen #7BB534
   text-secondary / bg-secondary  = oranje #E07322 (Figma "Accent")
   text-body-secondary            = bodytekst (#363636 op 80%)
   text-body-tertiary             = placeholder (#363636 op 60%)
   bg-body-tertiary               = beige #F5F2ED (BG #1)
   bg-body-secondary              = paneel #EBE5DD
   rounded-1..5                   = 8 / 12 / 16 / 24 / 32px
   -------------------------------------------------------------------------- */
:root {
    /* Fonts */
    --font-primary: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Merkkleuren en schalen (Figma primitives #JHA v6.0) */
    --color-primary: #7BB534;   --color-primary-dark: #5B8C24;
    --color-accent: #E07322;    --color-accent-light: #F1C280;
    --pc-50: #F5FAEB;  --pc-200: #D1EBAB;
    --gs-200: #E6E6E6; --gs-300: #D3D3D3; --gs-400: #A3A3A3; --gs-500: #727272; --gs-600: #535353;

    --color-text: #363636;
    --color-text-body: rgba(54, 54, 54, 0.8);
    --color-text-muted: rgba(54, 54, 54, 0.6);
    --color-text-light: rgba(255, 255, 255, 0.75);
    --color-bg-1: #F5F2ED;
    --color-bg-panel: #EBE5DD;
    --color-border: rgba(54, 54, 54, 0.15);
    --color-border-dark: rgba(207, 248, 235, 0.15);
    --color-overlay-dark: rgba(54, 54, 54, 0.9);

    /* Radius die Bootstrap niet heeft */
    --radius-3xl: 48px;

    /* Schaduwen (Figma effect styles) */
    --shadow-3: 0 8px 20px -4px rgba(17, 12, 34, 0.08);
    --shadow-4: 0 18px 40px -8px rgba(0, 0, 0, 0.08);

    /* Layout */
    --container-max: 1280px;
    --container-pad: 16px;

    /* ---- Bootstrap koppeling ---- */
    --bs-body-font-family: var(--font-primary);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.5;
    --bs-body-color: #363636;
    --bs-body-color-rgb: 54, 54, 54;
    --bs-body-bg: #FFFFFF;
    --bs-emphasis-color: #363636;
    --bs-secondary-color: rgba(54, 54, 54, 0.8);
    --bs-tertiary-color: rgba(54, 54, 54, 0.6);
    --bs-secondary-bg: #EBE5DD;
    --bs-secondary-bg-rgb: 235, 229, 221;
    --bs-tertiary-bg: #F5F2ED;
    --bs-tertiary-bg-rgb: 245, 242, 237;
    --bs-heading-color: #363636;

    --bs-primary: #7BB534;
    --bs-primary-rgb: 123, 181, 52;
    --bs-secondary: #E07322;
    --bs-secondary-rgb: 224, 115, 34;
    --bs-link-color: #363636;
    --bs-link-color-rgb: 54, 54, 54;
    --bs-link-decoration: none;
    --bs-link-hover-color: #7BB534;
    --bs-link-hover-color-rgb: 123, 181, 52;

    --bs-border-color: rgba(54, 54, 54, 0.15);
    --bs-border-radius-sm: 8px;
    --bs-border-radius: 12px;
    --bs-border-radius-lg: 16px;
    --bs-border-radius-xl: 24px;
    --bs-border-radius-xxl: 32px;
    --bs-border-radius-pill: 500px;

    --bs-box-shadow: 0 18px 40px -8px rgba(0, 0, 0, 0.08);
    --bs-focus-ring-color: rgba(123, 181, 52, 0.3);
}

/* --------------------------------------------------------------------------
   3. Basis en typografie (Figma text styles)
   -------------------------------------------------------------------------- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Bootstrap 5.3 onderstreept alle links; Figma niet */
a {
    text-decoration: none;
    transition: color 0.2s ease;
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: 0;
    font-family: var(--font-heading);
    font-weight: 600;
    text-wrap: balance;
}

.display-ct { font-size: 60px; line-height: 1.16; letter-spacing: -0.04em; }  /* Display */
h1, .h1 { font-size: 44px; line-height: 1.18; letter-spacing: -0.035em; }     /* H1 */
h2, .h2 { font-size: 40px; line-height: 1.20; letter-spacing: -0.03em; }      /* H2 */
h3, .h3 { font-size: 36px; line-height: 1.22; letter-spacing: -0.025em; }     /* H3 */
h4, .h4 { font-size: 28px; line-height: 1.24; letter-spacing: -0.02em; }      /* H4 */
h5, .h5 { font-size: 24px; line-height: 1.26; letter-spacing: -0.015em; }     /* H5 */
h6, .h6 { font-size: 20px; line-height: 1.28; letter-spacing: -0.01em; }      /* H6 */

p {
    margin-bottom: 0;
    text-wrap: pretty;
}

/* Paragraph-stijlen met Figma-regelhoogte (Bootstrap heeft geen 14/18/20px) */
.text-lg { font-size: 18px; line-height: 1.44; }
.text-sm { font-size: 14px; line-height: 1.46; }
.text-xs { font-size: 12px; line-height: 1.36; }

/* Overline / button-tekst: 14px, +2% spatiëring, hoofdletters */
.overline {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.36;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   4. Container: max 1280px content, minimaal 16px marge (Figma)
   -------------------------------------------------------------------------- */
.container {
    max-width: calc(var(--container-max) + (var(--container-pad) * 2));
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

/* Voor sliders die tot de schermrand doorlopen: binnenruimte = containermarge */
.bleed-pad {
    padding-left: max(var(--container-pad), calc((100% - var(--container-max)) / 2));
    padding-right: max(var(--container-pad), calc((100% - var(--container-max)) / 2));
    scroll-padding-left: max(var(--container-pad), calc((100% - var(--container-max)) / 2));
}

/* --------------------------------------------------------------------------
   5. Aanvullingen op Bootstrap (Figma-waarden buiten de Bootstrap-schaal)
   Bootstrap: 1=4px 2=8px 3=16px 4=24px 5=48px. Figma gebruikt ook 12/32/64.
   -------------------------------------------------------------------------- */
.g-12 { --bs-gutter-x: 12px; --bs-gutter-y: 12px; }
.gx-12 { --bs-gutter-x: 12px; }
.g-32 { --bs-gutter-x: 32px; --bs-gutter-y: 32px; }
.gap-12 { gap: 12px !important; }
.gap-32 { gap: 32px !important; }
.gap-64 { gap: 64px !important; }
.rounded-6 { border-radius: var(--radius-3xl) !important; }
.bg-panel { background-color: var(--color-bg-panel) !important; }

/* Icoon via CSS-mask: neemt de tekstkleur over (Figma kleurt iconen per plek) */
.ico {
    display: inline-block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: var(--ico) center / contain no-repeat;
    mask: var(--ico) center / contain no-repeat;
}

.ico-12 { width: 12px; height: 12px; }
.ico-16 { width: 16px; height: 16px; }
.ico-18 { width: 18px; height: 18px; }
.ico-24 { width: 24px; height: 24px; }

.ico-arrow-down     { --ico: url("../assets/icons/arrow-down.svg"); }
.ico-arrow-right    { --ico: url("../assets/icons/arrow-right.svg"); }
.ico-arrow-right-solid { --ico: url("../assets/icons/arrow-right-solid.svg"); }
.ico-arrow-up-right { --ico: url("../assets/icons/arrow-up-right-white.svg"); }
.ico-caret-down     { --ico: url("../assets/icons/caret-down-20.svg"); }
.ico-caret-down-sm  { --ico: url("../assets/icons/caret-down.svg"); }
.ico-caret-left     { --ico: url("../assets/icons/caret-left-white.svg"); }
.ico-caret-right    { --ico: url("../assets/icons/caret-right-white.svg"); }
.ico-calendar       { --ico: url("../assets/icons/calendar-dots.svg"); }
.ico-check          { --ico: url("../assets/icons/check-circle.svg"); }
.ico-close          { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 5l10 10M15 5L5 15' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }