/*
Theme Name: Leflite child
Theme URI: https://lefcreative.nl/
Author: Lef Creative
Author URI: https://lefcreative.nl/
Description: Child thema van het thema Leflite — Veenstra Montage & Afbouw
Version: 1.0.0
License: /
License URI: /
Template: leflite
*/

/* ---------- tokens (design literals that have no theme token) ---------- */
:root {
    --vs-green-dark: #6F7550;   /* CTA buttons */
    --vs-green-light: #A9B083;  /* accents on dark */
    --vs-line: #E4E0D6;         /* hairlines on light */
    --vs-line-dark: rgba(255,255,255,.12);
    --vs-border: #DFDACC;       /* outline buttons on light */
    --vs-angle: 44px;           /* diagonal cut height */
    --vs-notch: polygon(0 0, 100% 0, 100% calc(100% - 26px), 28% 100%, 0 calc(100% - 26px)); /* the design's photo corner cut */
    --vs-frame: clamp(18px, 2.6vw, 34px); /* white frame around media sections + footer */
}

/* ---------- basis ---------- */
body { -webkit-font-smoothing: antialiased; }
h1, h2 { letter-spacing: -.02em; }
h1 strong, h2 strong {
    font-weight: inherit;
    background: var(--secondary);
    color: var(--black);
    padding: 0 .2em .06em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
h6 {
    font-family: var(--subtitle-font);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .7;
}
p, li { color: var(--darkgray); }
.bg-black p, .bg-black li, .bg-primary p, .bg-primary li,
.full-background-overlay p, .full-background-overlay li { color: rgba(255,255,255,.78); }
a { color: var(--vs-green-dark); }
a:hover { color: var(--black); }

/* WYSIWYG lists: square green bullets (design "waarom" list) */
.content-wrapper ul { list-style: none; padding-left: 0; border-top: 1px solid var(--vs-line); }
.content-wrapper ul li { position: relative; padding: 13px 0 13px 24px; border-bottom: 1px solid var(--vs-line); line-height: 1.55; }
.content-wrapper ul li::before { content: ""; position: absolute; left: 0; top: 22px; width: 9px; height: 9px; background: var(--secondary); }
.content-wrapper ul li strong { color: var(--black); }

/* ---------- buttons ---------- */
.btn { letter-spacing: 0; }
.btn.bg-secondary { background: var(--vs-green-dark); color: var(--white); }
.btn.bg-secondary:hover { background: var(--secondary); color: var(--black); }
.btn.bg-transparent { border: 1px solid var(--vs-border); color: var(--black); }
.btn.bg-transparent:hover { border-color: var(--black); background: transparent; color: var(--black); }
.bg-black .btn.bg-transparent, .full-background-overlay .btn.bg-transparent { border-color: rgba(255,255,255,.32); color: var(--white); }
.bg-black .btn.bg-transparent:hover, .full-background-overlay .btn.bg-transparent:hover { border-color: var(--white); color: var(--white); }
.btn.bg-white { background: var(--white); color: var(--black); border: 1px solid var(--vs-line); }
.btn.bg-white:hover { background: var(--gray); color: var(--black); }

/* ---------- header ---------- */
body header.navigation { border-bottom: 1px solid var(--gray); }
body header.navigation .nav-holder-primary-1 { margin-left: 34px; }
body header.navigation .main-navigation > li > a { color: var(--black); }
body header.navigation .main-navigation .btn { margin-left: 10px; }
body header.navigation .main-navigation .btn.bg-transparent { border-color: var(--vs-border); }
body header.navigation .sub-menu { box-shadow: var(--general-box-shadow); border: 1px solid var(--gray); }

/* ---------- media sections (hero / CTA): inset frame + diagonal bottom edge ---------- */
section.lef-section.full-background-overlay {
    margin: 0 var(--vs-frame);
    padding-bottom: calc(var(--section-padding) + var(--vs-angle));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--vs-angle)), 28% 100%, 0 calc(100% - var(--vs-angle)));
    color: var(--white);
}
section.lef-section.full-background-overlay h1, section.lef-section.full-background-overlay h2,
section.lef-section.full-background-overlay h6 { color: var(--white); }
section.lef-section .background-image-wrapper { opacity: 1 !important; transform: none !important; animation: none !important; }
section.lef-section .background-image-wrapper::after {
    opacity: 1;
    background: linear-gradient(180deg, rgba(37,40,42,.14) 0%, rgba(37,40,42,.4) 48%, rgba(37,40,42,.86) 100%);
}
/* dark sections: diagonal top-right corner like the design's subsidie/CTA blocks */
section.lef-section.no-background.bg-black {
    clip-path: polygon(0 0, calc(100% - 120px) 0, 100% var(--vs-angle), 100% 100%, 0 100%);
    padding-top: calc(var(--section-padding) + var(--vs-angle) / 2);
}
section.lef-section.no-background.bg-black h2, section.lef-section.no-background.bg-black h3 { color: var(--white); }

/* card columns (hero contact card, 4,9 review box) */
.col-card { padding: var(--general-padding); }
.col-card.bg-white { box-shadow: none; }
.col-card.bg-white h6 { opacity: 1; font-size: 14px; text-transform: none; letter-spacing: 0; }
.col-card.bg-black { clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 22px, 100% 100%, 0 100%); }
.col-card.bg-black h2 { font-size: clamp(52px, 6vw, 76px); line-height: .9; letter-spacing: -.04em; margin-bottom: 8px; }
.col-card.bg-black a { color: var(--vs-green-light); font-weight: 700; }

/* ---------- components ---------- */
/* counters (12+ / 30% / 1) */
.counter-outer .top-layer { font-family: var(--heading-font); font-size: 27px; font-weight: 700; color: var(--black); }
.counter-outer .counter-ondertitle { font-size: var(--small-font-size); color: var(--darkgray); }

/* icon block: black square with light-green icon (USP bar) */
.icon-outer.color-black { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--black); margin-bottom: 12px; }
.icon-outer.color-black .icon { color: var(--vs-green-light); font-size: 15px; }
.bg-tertiary h4 { margin-bottom: 4px; }

/* cards (diensten) */
.card.card-default { border: 0; border-bottom: 3px solid var(--gray); transition: border-color .25s ease; background: transparent; }
.card.card-default:hover { border-bottom-color: var(--vs-green-dark); }
.card.card-default .image-holder img, .card.card-default .card-image img { clip-path: var(--vs-notch); }
.card.card-default h3, .card.card-default h4 { font-size: 19px; }
.card.card-default .btn { padding-left: 0; padding-right: 0; border: 0; color: var(--vs-green-dark); }

/* reviews */
.card.card-reviews { background: var(--gray); clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 22px, 100% 100%, 0 100%); border: 0; min-height: 260px; }
.card.card-reviews .star-count { color: var(--yellow); letter-spacing: 3px; }
.card.card-reviews .excerpt-holder p { font-family: var(--heading-font); font-weight: 600; font-size: 17.5px; line-height: 1.5; color: var(--black); }
.card.card-reviews h4 { font-size: 15px; padding-top: 16px; border-top: 1px solid var(--vs-border); }

/* split list (subsidie table) */
ul.list-split { list-style: none; padding: 0 clamp(18px, 2.4vw, 30px); margin: 0; background: #313537; }
ul.list-split li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; padding: 16px 0; border-bottom: 1px solid var(--vs-line-dark); }
ul.list-split li .li-content { font-family: var(--heading-font); font-weight: 700; font-size: 18px; color: var(--white); }
ul.list-split li .li-content-right { color: rgba(255,255,255,.85); }

/* buttons block used as a chip grid (werkgebied) */
.bg-gray .buttons-holder .btn.bg-white { min-width: 150px; justify-content: space-between; }

/* ---------- footer ---------- */
body #footer, body footer.footer { margin: 0 var(--vs-frame) var(--vs-frame); background: #1B1D1F; clip-path: polygon(0 0, 72% var(--vs-angle), 100% 0, 100% 100%, 0 100%); padding-top: var(--vs-angle); }
body #footer h6, body footer.footer h6 { color: var(--white); font-size: 15px; letter-spacing: .06em; opacity: 1; margin-bottom: 16px; }
body #footer p, body footer.footer p { color: rgba(255,255,255,.72); font-size: 15.5px; }
body #footer .widget-menu ul, body footer.footer .widget-menu ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
body #footer .widget-menu a, body footer.footer .widget-menu a { color: var(--vs-green-light); font-size: 15.5px; }
body #footer .widget-menu a:hover, body footer.footer .widget-menu a:hover { color: var(--white); }
body #footer img, body footer.footer img { width: auto; max-width: 202px; }
.socket .socket-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; font-size: 14px; }
.socket .socket-half { display: flex; gap: 20px; align-items: center; }
.socket #socket-menu ul { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; }
.socket a { color: var(--vs-green-light); }

/* whatsapp button (theme option) */
.whatsapp-button { background: var(--succes); border-radius: 0; }

/* ---------- mobile ---------- */
@media (max-width: 991px) {
    section.lef-section.full-background-overlay { margin: 0; }
    body #footer, body footer.footer { margin: 0; }
    :root { --vs-angle: 24px; }
}

/* ---------- colour corrections (theme colour tokens vs. design) ---------- */
/* transparent cards inherit --transparent-content (white); design wants dark on light */
body .card.card-default h4,
body .card.card-default .content-date { color: var(--black); }
body .card.card-default .excerpt-holder p { color: var(--darkgray); }

/* card columns keep their own contrast inside media sections */
body section.lef-section .col-card.bg-white,
body section.lef-section .col-card.bg-white p,
body section.lef-section .col-card.bg-white h6,
body section.lef-section .col-card.bg-white li { color: var(--black); }
body section.lef-section .col-card.bg-black,
body section.lef-section .col-card.bg-black p,
body section.lef-section .col-card.bg-black h2,
body section.lef-section .col-card.bg-black h6 { color: var(--white); }

/* header CTA menu buttons */
body header.navigation .menu-item-button { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; color: var(--black); border: 1px solid var(--vs-border); font-weight: 600; }
body header.navigation .menu-item-button .icon { color: var(--secondary); }
body header.navigation .menu-item-button.bg-secondary { background: var(--vs-green-dark); border-color: var(--vs-green-dark); color: var(--white); }
body header.navigation li.menu-item-has-button > a { padding: 0 !important; }
body header.navigation li.menu-item-has-button:last-child { margin-right: var(--menu-items-padding-horizontal); }

/* review cards */
body .card.card-reviews { background: var(--gray); }
body .card.card-reviews .star-count .icon { color: var(--yellow); }

/* footer link decoration */
body #footer a, body footer.footer a, .socket a { text-decoration: none; }
body #footer a:hover, body footer.footer a:hover { text-decoration: none; }

/* hero contact card: green icon square left of the text */
body section.lef-section .col-card.bg-white { display: flex; align-items: center; gap: 14px; }
body section.lef-section .col-card.bg-white .icon-outer.color-secondary { flex: 0 0 auto; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--secondary); margin: 0; }
body section.lef-section .col-card.bg-white .icon-outer.color-secondary .icon { color: var(--black); font-size: 20px; }
body section.lef-section .col-card.bg-white .content-wrapper p { margin: 0; }

/* =========================================================================
   Design parity pass — layouts the design uses that the theme markup allows
   with CSS only (card title over image, horizontal USP, review rhythm,
   link-chip grid).
   ========================================================================= */

/* ---- hero kicker: rating line, not a uppercase eyebrow ---- */
body section.lef-section.full-background-overlay h6 {
    font-family: var(--body-font);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    opacity: 1;
    margin-bottom: 16px;
}
body section.lef-section.full-background-overlay h6 strong { color: var(--yellow); letter-spacing: 2px; font-weight: 400; }

/* ---- USP bar: icon beside the text, not above it ---- */
body section.lef-section.bg-tertiary .wp-block-custom-section-block-col { display: flex; align-items: flex-start; gap: 12px; }
body section.lef-section.bg-tertiary .icon-outer { margin: 0; }
body section.lef-section.bg-tertiary .content-wrapper { flex: 1 1 auto; }
body section.lef-section.bg-tertiary h4 { font-size: 17px; font-weight: 700; line-height: 1.3; margin: 0 0 3px; }
body section.lef-section.bg-tertiary p { margin: 0; line-height: 1.5; }

/* ---- service cards: title sits on the photo, link pinned to the bottom ---- */
body .card.card-default { display: flex; flex-direction: column; height: 100%; }
body .card.card-default .image-outer { margin: 0; }
body .card.card-default .image-holder { position: relative; }
body .card.card-default .image-holder img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; display: block; }
body .card.card-default .image-holder::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(37,40,42,.1) 0%, rgba(37,40,42,.45) 52%, rgba(37,40,42,.9) 100%);
    clip-path: var(--vs-notch);
}
body .card.card-default .content-outer {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 18px;
    padding: 20px 22px 22px;
}
body .card.card-default .content-outer h4 {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: calc(100% + 40px);
    margin: 0;
    z-index: 2;
    color: var(--white);
    line-height: 1.2;
    letter-spacing: -.01em;
    pointer-events: none;
}
body .card.card-default .excerpt-holder { flex: 1; }
body .card.card-default .excerpt-holder p { margin: 0; }
body .card.card-default .buttons-holder { margin: 0; }
body .card.card-default .btn { margin: 0; font-size: 14px; font-weight: 700; }

/* ---- reviews: middle card in brand green, stepped down like the design ---- */
body .featured .row > div:nth-child(2) .card.card-reviews { background: var(--secondary); margin-top: 28px; }
body .featured .row > div:nth-child(2) .card.card-reviews h4 { border-top-color: rgba(37,40,42,.22); }
body .card.card-reviews { display: flex; flex-direction: column; gap: 20px; padding: clamp(24px, 2.4vw, 32px); }
body .card.card-reviews .content-outer { display: flex; flex-direction: column; gap: 20px; flex: 1; }
body .card.card-reviews .excerpt-holder { flex: 1; }
body .card.card-reviews .review-intro { order: -1; }
body .card.card-reviews h4 { margin: 0; }

/* ---- werkgebied: the second column is a grid of link chips ---- */
body section.lef-section.bg-gray .wp-block-custom-section-block-col:last-child .buttons-holder {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin: 0;
}
body section.lef-section.bg-gray .wp-block-custom-section-block-col:last-child .btn.bg-white {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 16px 18px;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid var(--vs-line);
}
body section.lef-section.bg-gray .wp-block-custom-section-block-col:last-child .btn.bg-white::after {
    content: "\2192";
    color: var(--vs-green-dark);
    font-weight: 400;
    order: 3; /* theme gives the label span order:2 for icon-before buttons */
}
body section.lef-section.bg-gray .wp-block-custom-section-block-col:last-child .btn.bg-white:hover { background: var(--gray); }

/* ---- subsidie table: highlight the combined-measure amount ---- */
ul.list-split li .li-content-right strong { color: var(--vs-green-light); font-family: var(--heading-font); font-weight: 700; }

/* ---- section intro rows: heading and lead sit on the same baseline ---- */
body section.lef-section .row.align-top > .wp-block-custom-section-block-col > .content-wrapper > h2 { margin-bottom: 0; }

@media (max-width: 991px) {
    body .card.card-default .content-outer h4 { bottom: calc(100% + 30px); }
    body .featured .row > div:nth-child(2) .card.card-reviews { margin-top: 0; }
}

/* ---- link chips: theme markup leaves whitespace text nodes that become
       anonymous flex items; zero the button font-size to drop them ---- */
body section.lef-section.bg-gray .wp-block-custom-section-block-col:last-child .btn.bg-white { font-size: 0; }
body section.lef-section.bg-gray .wp-block-custom-section-block-col:last-child .btn.bg-white > span,
body section.lef-section.bg-gray .wp-block-custom-section-block-col:last-child .btn.bg-white::after { font-size: 16px; }

/* ---- review cards: quote first, attribution on a rule underneath ---- */
body .card.card-reviews .excerpt-holder { order: 1; }
body .card.card-reviews .review-intro { order: 2; display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 1px solid var(--vs-border); }
body .card.card-reviews h4 { padding-top: 0; border-top: 0; font-weight: 700; }
body .card.card-reviews .excerpt-holder::before {
    content: "\201D";
    display: block;
    font-family: var(--heading-font);
    font-size: 46px;
    font-weight: 800;
    line-height: .6;
    opacity: .3;
    margin-bottom: 16px;
}
body .featured .row > div:nth-child(2) .card.card-reviews .review-intro { border-top-color: rgba(37,40,42,.22); }

/* ---- alternating sections use the design's warm tint, --gray stays the border token ---- */
body section.lef-section.bg-gray { background: #F7F5F0; border-top: 1px solid var(--gray); }

/* ---- every in-section photo gets the design's corner cut ---- */
body section.lef-section .image-outer .image-holder img { clip-path: var(--vs-notch); width: 100%; display: block; }

/* ---- a buttons block that OPENS a column carries no after-text spacing,
       so it lines up with whatever sits beside it ---- */
body .wp-block-custom-section-block-col > .buttons-holder:first-child { margin-top: 0; }

/* ---- counters: design shows one type size, left aligned, shrink-to-fit ----
       (the theme scales .counter to 2em and .counter-surfix to 1.5em of the
       wrapper, so the size has to be set on the leaves) */
body .counter-outer { display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 44px); margin: 0; }
body .counter-outer > [class*="col-"] { flex: 0 0 auto; width: auto; max-width: none; padding: 0; }
body .counter-outer .top-layer { gap: 0; align-items: baseline; justify-content: flex-start; text-align: left; }
body .counter-outer .counter,
body .counter-outer .counter-prefix,
body .counter-outer .counter-surfix {
    font-size: clamp(20.8px, 2.08vw, 27.2px);
    line-height: 1.15;
    margin: 0;
}
body .counter-outer .counter-prefix:empty, body .counter-outer .counter-surfix:empty { display: none; }
body .counter-outer .counter-ondertitle { text-align: left; margin-top: 2px; }
/* counters in a trailing column hug the right edge, like the design's space-between row */
body .row > .wp-block-custom-section-block-col:not(:first-child) > .counter-outer { justify-content: flex-end; }