/* ==========================================================================
   Asset Intelligence design tokens
   Centrale kleuren, typografie en motion-waarden voor alle Loile-modules.
   Gebruik altijd deze variabelen in plaats van hardcoded waarden.
   ========================================================================== */

/* Typografische basis: root = 10px, zodat 1rem = 10px (zelfde systeem als loile.com) */
html {
    font-size: 62.5%;
    min-height: 100vh;
    overflow-x: hidden;
}

:root {
    /* Brand-kleuren */
    --loile-blue: #2563EB;
    --loile-blue-hover: #1D4ED8;
    --loile-ink: #1d1d1d;
    --loile-text: #2b2b2b;
    --loile-white: #fafafa;
    --loile-card-gray: #f7f7f7;
    --loile-hover-gray: #f3f3f3;

    /* Motion */
    --loile-transition-fast: 0.2s ease;
    --loile-transition: 0.3s ease;

    /* Vormen */
    --loile-radius: 16px;
    --loile-radius-lg: 25px;

    /* Typografische schaal (root = 10px). De tokens schalen zelf per
       breakpoint — modules hoeven geen eigen mobiele font-sizes te zetten. */
    --loile-font-h1: 9.6rem;
    --loile-font-h2: 4rem;
    --loile-font-h3: 2.4rem;
    --loile-font-h4: 1.8rem;
    --loile-font-lead: 2.1rem;
    --loile-font-body: 1.6rem;
    --loile-font-small: 1.4rem;
    --loile-font-badge: 1.4rem;
    --loile-font-button: 1.4rem;
}

@media (max-width: 768px) {
    :root {
        --loile-font-h1: 4rem;
        --loile-font-h2: 2.8rem;
        --loile-font-h3: 2.2rem;
        --loile-font-lead: 1.8rem;
    }
}

/* Global background for entire site */
body {
    background: radial-gradient(circle at var(--gradient-1-x, 5%) var(--gradient-1-y, 5%), var(--loile-bg-g1a, #ffffff) 0%, var(--loile-bg-g1b, #f8fafc) 25%, transparent 40%),
                radial-gradient(circle at var(--gradient-2-x, 10%) var(--gradient-2-y, 98%), var(--loile-bg-g2a, #dbeafe) 0%, var(--loile-bg-g2b, #bfdbfe) 15%, transparent 30%),
                radial-gradient(circle at var(--gradient-3-x, 90%) var(--gradient-3-y, 95%), var(--loile-bg-g3a, #ffffff) 0%, var(--loile-bg-g3b, #f1f5f9) 30%, transparent 50%),
                radial-gradient(circle at var(--gradient-4-x, 85%) var(--gradient-4-y, 75%), var(--loile-bg-g4a, #e0f2fe) 0%, var(--loile-bg-g4b, #ffffff) 25%, transparent 45%),
                radial-gradient(circle at var(--gradient-5-x, 5%) var(--gradient-5-y, 95%), var(--loile-bg-g5a, #ffffff) 0%, var(--loile-bg-g5b, #f8fafc) 25%, transparent 40%),
                radial-gradient(circle at var(--gradient-6-x, 70%) var(--gradient-6-y, 50%), var(--loile-bg-g6a, #f0f9ff) 0%, transparent 45%),
                radial-gradient(circle at var(--gradient-7-x, 50%) var(--gradient-7-y, 100%), var(--loile-bg-g7a, #f1f5f9) 0%, var(--loile-bg-g7b, #e2e8f0) 70%);
    background-attachment: fixed;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    /* Vangnet tegen horizontale overflow van decoratieve elementen */
    overflow-x: clip;
    transition: all 0.1s ease-out;
}

/* ==========================================================================
   Consistente gridlijn
   Beaver Builder geeft modules per pagina wisselende standaardmarges,
   waardoor de linkerlijn per pagina verspringt. Hier worden de horizontale
   marges voor alle Loile-modules genormaliseerd (verticaal blijft per module).
   ========================================================================== */
.fl-builder-content .fl-row-content-wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Pagina's waarvan de layout genest zit in een Themer post-content module:
   de buitenlagen mogen geen extra inspringing optellen */
.fl-module-fl-post-content > .fl-module-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.fl-module-fl-post-content .fl-row-content-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ==========================================================================
   Breedte
   Desktop volgt de eigen maatvoering van de modules, zoals op productie
   (pagina-intro en team 1440px, FAQ en werkproces 1100px, hero's op de
   rijbreedte). Mobiel (≤768px) houdt de eigen tekstlijn, geregeld in het
   mobiele blok verderop.
   ========================================================================== */
@media (max-width: 768px) {
    .fl-module[class*="fl-module-loile-"] > .fl-module-content,
    .fl-module[class*="fl-module-hero"] > .fl-module-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ==========================================================================
   Tekstafbreking
   Koppen breken gebalanceerd (geen eenzaam laatste woord), paragrafen
   vermijden weduwen. Browsers zonder ondersteuning negeren dit gewoon.
   ========================================================================== */
h1, h2, h3, h4,
.loile-oplossingen__title,
.loile-tabs__title,
.content-card-title,
.loile-steps__item-title,
.loile-ptabs__item-title,
.loile-faq__question-text {
    text-wrap: balance;
}

p,
.hero-focus-grid__intro,
.hero-focus-grid-v2__paragraph,
.loile-page-intro__description,
.loile-oplossingen__description,
.content-card-description,
.loile-steps__item-description,
.loile-ptabs__content,
.loile-faq__answer-inner {
    text-wrap: pretty;
}

/* ==========================================================================
   Typografielaag
   Eén centrale mapping van alle module-typografie naar de schaal-tokens.
   De !important is bewust: module-CSS bevat historisch gegroeide, afwijkende
   font-sizes (incl. mobiele overrides) die hier worden genormaliseerd.
   Nieuwe modules: gebruik direct de var(--loile-font-*) tokens.
   ========================================================================== */

/* H1 — paginahero's */
.hero-focus-grid__title,
.loile-hero-title,
.loile-hero-top__title {
    font-size: var(--loile-font-h1) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
}

/* Homepage-hero: langere titel, een maat kleiner zodat hij op twee regels valt */
@media (min-width: 769px) {
    .home .hero-focus-grid__title {
        font-size: 7.2rem !important;
        max-width: 85%;
    }
}

/* Contact-hero: H1 in een subkolom, dus een maat kleiner dan de paginahero */
.hero-focus-grid-mapbox__title {
    font-size: 5.6rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
}

@media (max-width: 768px) {
    .hero-focus-grid-mapbox__title {
        font-size: 4rem !important;
    }
}

/* H2 — sectiekoppen */
.hero-focus-grid-v2__title,
.loile-oplossingen__section-title,
.loile-tabs__section-title,
.loile-cases__section-title,
.case-overview-section-title,
.loile-team__section-title,
.loile-culture__section-title,
.loile-text-split__title,
.loile-focus-grid__title,
.content-title,
.loile-steps__title,
.loile-faq__title,
.loile-ptabs__title {
    font-size: var(--loile-font-h2) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

/* H3 — kaart- en subkoppen */
.loile-oplossingen__title,
.loile-tabs__title,
.loile-berichten__title,
.content-card-title,
.case-title,
.loile-cases__case-title,
.loile-team__member-name,
.loile-steps__item-title {
    font-size: var(--loile-font-h3) !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
}

/* H4 — accordeontitels en kleine koppen (footer e.d.) */
.loile-faq__question-text,
.loile-ptabs__item-title,
.footer-content h3,
.loile-legal-page h4 {
    font-size: var(--loile-font-h4) !important;
    font-weight: 600 !important;
}

/* Intro-module: eigen maten, los van de tokens */
.loile-page-intro h1.loile-page-intro__title {
    font-size: 4.8rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
}

.loile-page-intro h2.loile-page-intro__title {
    font-size: 4rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

@media (max-width: 768px) {
    .loile-page-intro h1.loile-page-intro__title {
        font-size: 3.2rem !important;
    }

    .loile-page-intro h2.loile-page-intro__title {
        font-size: 2.8rem !important;
    }
}

/* Lead — paragrafen direct bij koppen */
.hero-focus-grid__intro,
.hero-focus-grid__intro p,
.hero-focus-grid-v2__paragraph,
.hero-focus-grid-mapbox__paragraph,
.loile-page-intro__description,
.loile-oplossingen__section-description,
.loile-text-split__content,
.loile-team__section-description,
.loile-culture__section-description,
.content-subtitle,
.loile-steps__description,
.loile-faq__description,
.loile-ptabs__description {
    font-size: var(--loile-font-lead) !important;
    line-height: 1.55 !important;
}

/* Body — lopende tekst, kaartbeschrijvingen, footer */
.loile-oplossingen__description,
.loile-tabs__description,
.content-card-description,
.loile-steps__item-description,
.loile-ptabs__content,
.loile-faq__answer-inner,
.footer-links a {
    font-size: var(--loile-font-body) !important;
    line-height: 1.55 !important;
}

/* Small — meta, breadcrumbs, juridisch */
.loile-page-intro__breadcrumbs,
.bottom-left a,
.bottom-middle p,
.bottom-right a {
    font-size: var(--loile-font-small) !important;
}

/* Badges en labels */
.loile-oplossingen__label,
.hero-focus-grid-v2__card-label,
.hero-focus-grid-mapbox__card-label,
.loile-focus-grid__card-label,
.loile-cases__case-label,
.case-label,
.loile-hero-image-label,
.loile-ptabs__nr {
    font-size: var(--loile-font-badge) !important;
}

/* Knoppen */
.text-container,
.loile-page-intro__btn,
.loile-ptabs__button {
    font-size: var(--loile-font-button) !important;
}

/* ==========================================================================
   GSAP motion-laag: word-split masker voor hero-titels
   ========================================================================== */
.loile-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    /* Ruimte voor staartletters (g, j, p): het masker knipt anders de
       onderkant af. De negatieve marge compenseert de regelhoogte. */
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
}

.loile-word__inner {
    display: inline-block;
    will-change: transform;
}

/* ==========================================================================
   Scroll-reveal & paginatransitie
   Klassen worden door js/scroll-reveal.js gezet; zonder JS blijft alles
   gewoon zichtbaar. prefers-reduced-motion schakelt alles uit.
   ========================================================================== */
.loile-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: var(--reveal-delay, 0s);
}

.loile-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: no-preference) {
    body {
        animation: loile-page-in 0.4s ease;
    }

    body.loile-page-leaving {
        opacity: 0;
        transition: opacity 0.18s ease;
    }
}

@keyframes loile-page-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .loile-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   Mobiele grid
   De footer is de referentie: content op 40px van de schermrand
   (20px rijpadding + 20px containerpadding). Modules zonder eigen
   containerpadding krijgen die hier alsnog.
   ========================================================================== */
@media (max-width: 768px) {
    .loile-berichten,
    .loile-contact {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Oplossingen-kaarten: box op de 20px-lijn, alleen de sectiekop
       op de 40px-tekstlijn (zelfde patroon als de tabs) */
    .loile-oplossingen__section-title,
    .loile-oplossingen__section-description {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Tabs: sectiekop op de 40px-tekstlijn, de kaart zelf op de
       20px-boxlijn (zelfde patroon als footer en werkproces-kader) */
    .loile-tabs__top {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Deze containers verliezen op mobiel hun eigen zijpadding: hier
       terugzetten zodat de tekst op de 40px-gridlijn valt (ook wanneer
       een breedtevariant gekozen is, vandaar de dubbele selector). */
    .hero-focus-grid-v2__container,
    .loile-text-split__container,
    .fl-module[class*="loile-breedte-"] .hero-focus-grid-v2__container,
    .fl-module[class*="loile-breedte-"] .loile-text-split__container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Zwevende menubalk valt over de eerste sectie: extra topruimte.
       BB zet de topmarge van de intro op mobiel terug naar 20px. */
    .fl-builder-content .fl-row:first-child .fl-module-loile-page-intro > .fl-module-content {
        margin-top: 110px !important;
    }

    .fl-builder-content .fl-row:first-child .fl-module-hero-focus-grid > .fl-module-content,
    .fl-builder-content .fl-row:first-child .fl-module-hero-focus-grid-v2 > .fl-module-content,
    .fl-builder-content .fl-row:first-child .fl-module-hero-focus-grid-mapbox > .fl-module-content {
        margin-top: 70px !important;
    }
}

/* ==========================================================================
   Juridische pagina's (algemene voorwaarden, privacybeleid)
   ========================================================================== */
.loile-legal-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 180px 20px 80px;
    color: var(--loile-text);
    font-size: 16px;
    line-height: 1.7;
}

.loile-legal-page h1,
.loile-legal-page h2,
.loile-legal-page h3,
.loile-legal-page h4 {
    color: var(--loile-ink);
    line-height: 1.3;
    margin: 40px 0 15px;
}

.loile-legal-page h1 {
    font-size: 42px;
    margin: 0 0 30px;
}

.loile-legal-page h2 {
    font-size: 26px;
}

.loile-legal-page h3 {
    font-size: 20px;
}

.loile-legal-page p {
    margin: 0 0 15px;
}

.loile-legal-page ul,
.loile-legal-page ol {
    margin: 0 0 15px;
    padding-left: 22px;
}

.loile-legal-page li {
    margin-bottom: 8px;
}

.loile-legal-page a {
    color: var(--loile-blue);
    text-decoration: none;
    transition: color var(--loile-transition);
}

.loile-legal-page a:hover {
    color: var(--loile-blue-hover);
    text-decoration: underline;
}

.loile-legal-page table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 20px;
    font-size: 14px;
}

.loile-legal-page th,
.loile-legal-page td {
    border: 1px solid rgba(29, 29, 29, 0.15);
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}

@media (max-width: 768px) {
    .loile-legal-page {
        padding: 140px 20px 60px;
    }

    .loile-legal-page h1 {
        font-size: 32px;
    }

    .loile-legal-page h2 {
        font-size: 22px;
    }
}