/**
 * Alp Lift — SEO-landingspagina body-styling
 * Wordt geenqueued vanuit includes/alplift-landing.php
 * (frontend op single 'landingspagina' + Elementor-preview tijdens bouwen).
 *
 * Gebruik:
 *   Zet in Elementor de CSS-class .alplift-landing-body op de container
 *   waarin de "Post Content"-widget staat. Alles wat de SEO'er in de
 *   WordPress editor plakt (h2, h3, p, a, ul, ol, blockquote, table)
 *   wordt dan automatisch opgemaakt in de Alp Lift huisstijl.
 *
 * Kleuren (Alp Lift design system):
 *   rood        = #CD171A   (link-underline, bullets, ol-cijfers, blockquote-rand, tabel-header)
 *   zwart-grijs = #2B2B2B   (alternerende tabel-header-cellen, niet hel-zwart)
 *   titelkleur  = #1E1E1A   (h2, h3, tabel rij-labels)
 *   body-tekst  = #54595F   (paragrafen, li, tabel-cellen)
 *   streep      = #E8D5D6   (grijs-rood; ol-items en tabel-rijen)
 */


/* --- Scope & design tokens ------------------------------------------------
   Alle vervolg-selectors zijn descendants van .alplift-landing-body. De
   CSS-variabelen worden hier één keer gedefinieerd; pas hier de kleuren
   aan als de huisstijl wijzigt.
   -------------------------------------------------------------------- */
.alplift-landing-body {
    --alplift-rood:        #CD171A;
    --alplift-zwart-grijs: #2B2B2B;
    --alplift-titel:       #1E1E1A;
    --alplift-body:        #54595F;
    --alplift-streep:      #E8D5D6;

    font-family: 'Roboto', sans-serif;
    color: var(--alplift-body);
}


/* --- Typografie: paragraaf + kop-spacing ----------------------------------
   Kop-kleur en font-size staan centraal in style.css (.item-tekst /
   .alplift-landing-body). De margin-bottom hieronder is landingspagina-
   specifiek: extra ademruimte tussen blokken zodat lange SEO-content
   prettig leest.
   -------------------------------------------------------------------- */
.alplift-landing-body h2 {
    margin-bottom: 20px;
}

.alplift-landing-body h3 {
    margin-bottom: 16px;
}

.alplift-landing-body p {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--alplift-body);
    margin: 0 0 22px 0;
}


/* --- Link: vet + dikke rode underline -------------------------------------
   Geen standaard blauwe link-kleur. De tekst zelf erft de body/heading-
   kleur (zwart in de praktijk), alleen de underline is rood (3px). Bij
   hover wordt de tekst-kleur subtiel lichter — geen ander effect.
   -------------------------------------------------------------------- */
.alplift-landing-body a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--alplift-rood);
    text-decoration-thickness: 3px;
    text-underline-offset: 3px;
    transition: color 0.15s ease;
}

.alplift-landing-body a:hover {
    color: #4A4A4A;
}


/* --- Ongeordende lijst (ul): rode bolletjes -------------------------------
   Bullet is een echte CSS-cirkel (8px), verticaal gecentreerd op de
   eerste tekstregel. Geen streepjes tussen items — voor visuele
   ademruimte wordt margin-bottom tussen items gebruikt. Streepjes
   reserveren we voor de OL (genummerd), die heeft het wel nodig om
   nummers visueel te groeperen.
   -------------------------------------------------------------------- */
.alplift-landing-body ul {
    list-style: none;
    margin: 0 0 28px 0;
    padding-left: 0;
}

.alplift-landing-body ul > li {
    position: relative;
    padding-left: 18px;       /* 8px bullet + 10px gap */
    margin-bottom: 11px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--alplift-body);
}

.alplift-landing-body ul > li:last-child {
    margin-bottom: 0;
}

.alplift-landing-body ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.575em;             /* midden van eerste regel: (line-height 1.65 op 16px = 26.4px) / 2 − halve bullet */
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--alplift-rood);
}


/* --- Geordende lijst (ol): rode nummers -----------------------------------
   1, 2, 3 ... via CSS counter, rode cijfers links van elk item, grijs-rood
   lijntje tussen items. Werkt op gewone <ol><li>...</li></ol> uit de WP
   editor — geen ACF repeater nodig.
   Nummer-line-height = 1.65 (gelijk aan parent) zodat de baseline van het
   nummer netjes uitlijnt met de eerste tekstregel, ook bij multi-line items.
   -------------------------------------------------------------------- */
.alplift-landing-body ol {
    list-style: none;
    counter-reset: alplift-ol;
    margin: 0 0 32px 0;
    padding-left: 0;
}

.alplift-landing-body ol > li {
    counter-increment: alplift-ol;
    position: relative;
    padding: 14px 0 14px 36px;
    border-top: 1px solid var(--alplift-streep);
    font-size: 16px;
    line-height: 1.65;
    color: var(--alplift-body);
}

.alplift-landing-body ol > li:first-child {
    border-top: none;        /* geen streep boven het eerste item */
    padding-top: 0;
}

.alplift-landing-body ol > li:last-child {
    padding-bottom: 0;
}

.alplift-landing-body ol > li::before {
    content: counter(alplift-ol);
    position: absolute;
    left: 0;
    top: 14px;               /* gelijk aan padding-top — nummer lijnt met eerste regel tekst */
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
    font-size: 18px;
    line-height: 1.65;       /* match parent line-height = baseline-uitlijning eerste regel */
    color: var(--alplift-rood);
}

.alplift-landing-body ol > li:first-child::before {
    top: 0;                  /* gelijk aan first-child padding-top */
}


/* --- Lijsten: max-breedte + krimp naar inhoud -----------------------------
   Op desktop krimpt de lijst-breedte naar de langste regel (tot max 70%
   van de container), zodat de streepjes tussen items net zo breed zijn
   als de langste tekst — niet langer. Op tablet en mobiel (< 768px) terug
   naar volledige breedte — zie de Responsive-sectie.
   -------------------------------------------------------------------- */
.alplift-landing-body ul,
.alplift-landing-body ol {
    max-width: 70%;
    width: fit-content;
}


/* --- Blockquote: rood lijntje links + lichte rose-grijze achtergrond ------
   Voor "Let wel op..."-tekstjes. Achtergrond is een hele lichte tint —
   licht grijs met een vleugje rood — zodat de quote een subtiel blok
   wordt zonder hard te schreeuwen. Laatste alinea binnen de quote krijgt
   geen onder-marge zodat de hoogte mooi sluit.
   -------------------------------------------------------------------- */
.alplift-landing-body blockquote {
    border-left: 4px solid var(--alplift-rood);
    background-color: #FBF3F3;
    padding: 14px 18px;
    margin: 0 0 24px 0;
    color: var(--alplift-body);
    font-style: normal;
}

.alplift-landing-body blockquote > *:last-child {
    margin-bottom: 0;
}


/* --- Tabel: alternerend rood/zwart-grijs header ---------------------------
   Header-cellen wisselen per kolom: 1e rood, 2e zwart-grijs, 3e rood, ...
   Witte letters op beide. Body-rijen krijgen alleen een horizontale
   grijs-rode lijn als scheidingsstreep. !important nodig om Hello
   Elementor / browser-defaults (zebra-rijen, celranden) te overschrijven.
   -------------------------------------------------------------------- */
.alplift-landing-body table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
    margin: 0 0 24px 0;
    font-family: 'Roboto', sans-serif;
    background: transparent !important;
}

/* Reset theme/browser defaults: geen zebra-rijen, geen verticale celranden */
.alplift-landing-body table tr {
    background: transparent !important;
}

.alplift-landing-body table th,
.alplift-landing-body table td {
    border: 0 !important;
    background-color: transparent !important;
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
}

/* Header-cellen: standaard rood (oneven kolommen) */
.alplift-landing-body table thead th {
    background-color: var(--alplift-rood) !important;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 15px;
    border-bottom: 0 !important;
}

/* Even kolommen krijgen zwart-grijs (rood, zwart, rood, zwart ...) */
.alplift-landing-body table thead th:nth-child(even) {
    background-color: var(--alplift-zwart-grijs) !important;
}

/* Body-cellen: transparant, alleen een horizontale lijn onder elke rij */
.alplift-landing-body table tbody th,
.alplift-landing-body table tbody td {
    border-bottom: 1px solid var(--alplift-streep) !important;
    font-size: 15px;
    line-height: 1.5;
    color: var(--alplift-body);
}

/* Rij-labels (eerste kolom in body, mocht de SEO'er <th scope="row"> gebruiken) */
.alplift-landing-body table tbody th {
    font-weight: 700;
    color: var(--alplift-titel);
    text-align: left;
}


/* --- Responsive: horizontale scroll op kleine schermen --------------------
   Op smalle viewports wordt de tabel een scroll-blok zodat brede tabellen
   niet uit de container breken. -webkit-overflow-scrolling voor soepel
   scrollen op iOS Safari.
   -------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Lijsten: volledig breed op tablet/mobiel — fit-content uitschakelen */
    .alplift-landing-body ul,
    .alplift-landing-body ol {
        max-width: 100%;
        width: auto;
    }
}

@media (max-width: 600px) {
    .alplift-landing-body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}