/* =============================================================
   LoodgieterCentraal — assets/css/theme.css  v2.0
   Design system + global component styles for Kadence child theme
   ============================================================= */

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
    --lc-navy:          #0D2240;
    --lc-navy-mid:      #1A3A6B;
    --lc-orange:        #F05A1A;
    --lc-orange-light:  #FF7A3D;
    --lc-white:         #FFFFFF;
    --lc-off-white:     #F4F6F9;
    --lc-gray-light:    #E8ECF2;
    --lc-gray-text:     #5A6579;
    --lc-green:         #1A8A4A;
    --lc-green-light:   #4AE08A;

    --lc-font-display:  'Barlow Condensed', sans-serif;
    --lc-font-body:     'Barlow', sans-serif;

    --lc-radius-sm:     6px;
    --lc-radius-md:     8px;
    --lc-radius-lg:     10px;
    --lc-radius-pill:   20px;

    --lc-shadow-bar:    0 2px 8px rgba(0, 0, 0, 0.30);
    --lc-sticky-height: 56px;
}

/* ── GLOBAL RESETS & BASE ───────────────────────────────────── */
body {
    font-family: var(--lc-font-body);
    color: var(--lc-navy);
}

/* Push page content below sticky bar */
.site,
#page,
.kadence-page-wrap {
    padding-top: var(--lc-sticky-height);
}


/* ─────────────────────────────────────────────────────────────
   STICKY CALL BAR
   Injected via wp_body_open in functions.php
───────────────────────────────────────────────────────────── */
.lc-sticky-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    height: var(--lc-sticky-height);
    background: var(--lc-orange);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    box-shadow: var(--lc-shadow-bar);
    gap: 10px;
}

/* Animated availability dot */
.lc-sticky-bar__pulse {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    background: var(--lc-green-light);
    border-radius: 50%;
    animation: lc-pulse 1.6s ease-in-out infinite;
}

@keyframes lc-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.6; transform: scale(1.4); }
}

.lc-sticky-bar__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.lc-sticky-bar__location {
    font-family: var(--lc-font-body);
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.80);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lc-sticky-bar__tagline {
    font-family: var(--lc-font-body);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lc-sticky-bar__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: var(--lc-white);
    color: var(--lc-orange);
    font-family: var(--lc-font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: var(--lc-radius-sm);
    transition: background 0.15s ease, color 0.15s ease;
}

.lc-sticky-bar__cta:hover {
    background: var(--lc-navy);
    color: #fff;
}

/* Desktop: widen bar */
@media (min-width: 768px) {
    .lc-sticky-bar {
        padding: 0 32px;
    }
    .lc-sticky-bar__location { font-size: 13px; }
    .lc-sticky-bar__tagline  { font-size: 16px; }
    .lc-sticky-bar__cta      { font-size: 18px; padding: 10px 20px; }

    /* WP admin bar is 32px tall on desktop */
    .admin-bar .lc-sticky-bar {
        top: 32px;
    }
    .admin-bar .site,
    .admin-bar #page,
    .admin-bar .kadence-page-wrap {
        padding-top: calc(var(--lc-sticky-height) + 32px);
    }
}


/* ─────────────────────────────────────────────────────────────
   KADENCE BUTTON OVERRIDES
   Map Kadence's primary button to our orange CTA style
───────────────────────────────────────────────────────────── */
.wp-block-button.lc-btn-primary .wp-block-button__link,
.kb-button.lc-btn-primary,
.lc-btn-primary {
    background: var(--lc-orange) !important;
    color: #fff !important;
    font-family: var(--lc-font-display) !important;
    font-size: clamp(18px, 4vw, 22px) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    border-radius: var(--lc-radius-md) !important;
    padding: 16px 24px !important;
    transition: background 0.2s ease, transform 0.1s ease;
}

.wp-block-button.lc-btn-primary .wp-block-button__link:hover,
.kb-button.lc-btn-primary:hover,
.lc-btn-primary:hover {
    background: #D04A0A !important;
    transform: translateY(-1px);
}

.wp-block-button.lc-btn-secondary .wp-block-button__link,
.kb-button.lc-btn-secondary,
.lc-btn-secondary {
    background: transparent !important;
    color: #fff !important;
    font-family: var(--lc-font-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: var(--lc-radius-md) !important;
    padding: 12px 20px !important;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.wp-block-button.lc-btn-secondary .wp-block-button__link:hover,
.lc-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.60) !important;
}


/* ─────────────────────────────────────────────────────────────
   PHONE LINK — used by [phone_number format="link"] shortcode
───────────────────────────────────────────────────────────── */
.lc-phone-link {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

.lc-phone-link:hover {
    text-decoration: underline;
}


/* ─────────────────────────────────────────────────────────────
   SECTION DIVIDER — orange gradient bar
   Add class .lc-divider to any wp:separator block
───────────────────────────────────────────────────────────── */
.lc-divider,
hr.lc-divider {
    height: 4px !important;
    background: linear-gradient(90deg, var(--lc-orange), #FF9F6B) !important;
    border: none !important;
    margin: 0 !important;
}


/* ─────────────────────────────────────────────────────────────
   URGENCY BANNER
   Use as a Kadence Row with class .lc-urgency-banner
───────────────────────────────────────────────────────────── */
.lc-urgency-banner,
.lc-urgency-banner .wp-block-group__inner-container {
    background: #FFF3EC !important;
    border-left: 4px solid var(--lc-orange) !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13px !important;
    color: #7A2A00 !important;
    font-weight: 500 !important;
    margin: 0 !important;
}


/* ─────────────────────────────────────────────────────────────
   GUARANTEE BAR
   Kadence Row or group with class .lc-guarantee-bar
───────────────────────────────────────────────────────────── */
.lc-guarantee-bar {
    background: rgba(26, 138, 74, 0.10) !important;
    border: 1px solid rgba(26, 138, 74, 0.30) !important;
    border-radius: var(--lc-radius-md) !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0D5C2F !important;
    margin-bottom: 20px !important;
}


/* ─────────────────────────────────────────────────────────────
   SERVICE CARDS
   Kadence Cards with class .lc-service-card and .lc-service-card--urgent
───────────────────────────────────────────────────────────── */
.lc-service-card.kb-block-info-box-wrap,
.lc-service-card {
    background: var(--lc-off-white) !important;
    border: 1px solid var(--lc-gray-light) !important;
    border-radius: var(--lc-radius-lg) !important;
    padding: 14px 12px !important;
    transition: border-color 0.2s ease;
}

.lc-service-card:hover {
    border-color: var(--lc-orange) !important;
}

.lc-service-card--urgent.kb-block-info-box-wrap,
.lc-service-card--urgent {
    background: #FFF3EC !important;
    border-color: #F5B89A !important;
}

/* Spoed tag above card title */
.lc-spoed-tag {
    display: inline-block;
    background: var(--lc-orange);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}

/* Card icon container */
.lc-service-icon {
    width: 36px;
    height: 36px;
    background: var(--lc-navy);
    border-radius: var(--lc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.lc-service-card--urgent .lc-service-icon {
    background: var(--lc-orange);
}

.lc-service-icon svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
}

/* Card headings via Kadence typography */
.lc-service-card .kb-info-box-title,
.lc-service-card h3 {
    font-family: var(--lc-font-display) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--lc-navy) !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
}

.lc-service-card .kb-info-box-text,
.lc-service-card p {
    font-size: 12px !important;
    color: var(--lc-gray-text) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}


/* ─────────────────────────────────────────────────────────────
   PRICING ROWS
   Use inside a dark (navy) Kadence Row/Section
───────────────────────────────────────────────────────────── */
.lc-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--lc-radius-md);
    padding: 12px 14px;
    margin-bottom: 10px;
    gap: 12px;
}

.lc-price-row__name {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.90);
    font-weight: 500;
}

.lc-price-row__price {
    font-family: var(--lc-font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--lc-orange);
    text-align: right;
    flex-shrink: 0;
    line-height: 1.1;
}

.lc-price-row__price small {
    display: block;
    font-family: var(--lc-font-body);
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.2;
}

/* No-hidden-costs confirmation strip */
.lc-no-hidden {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(26, 138, 74, 0.20);
    border: 1px solid rgba(26, 138, 74, 0.40);
    border-radius: var(--lc-radius-md);
    padding: 10px 14px;
    margin-top: 12px;
    font-size: 13px;
    color: #5AE08A;
    font-weight: 500;
    line-height: 1.5;
}

.lc-no-hidden svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}


/* ─────────────────────────────────────────────────────────────
   NEIGHBORHOOD CHIPS
   Used in the local/Breda section
───────────────────────────────────────────────────────────── */
.lc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 16px;
}

.lc-chip {
    display: inline-block;
    background: var(--lc-white);
    border: 1px solid var(--lc-gray-light);
    border-radius: var(--lc-radius-pill);
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--lc-navy);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lc-chip:hover,
.lc-chip.is-active {
    background: var(--lc-navy);
    border-color: var(--lc-navy);
    color: #fff;
}


/* ─────────────────────────────────────────────────────────────
   LOCAL CALLOUT BOX
   Kadence Advanced Text block inside a group with .lc-local-callout
───────────────────────────────────────────────────────────── */
.lc-local-callout {
    background: var(--lc-white) !important;
    border: 1px solid var(--lc-gray-light) !important;
    border-left: 4px solid var(--lc-navy-mid) !important;
    border-radius: var(--lc-radius-md) !important;
    padding: 14px !important;
    font-size: 13px !important;
    color: var(--lc-gray-text) !important;
    line-height: 1.6 !important;
}

.lc-local-callout strong,
.lc-local-callout b {
    display: block;
    font-size: 14px;
    color: var(--lc-navy);
    margin-bottom: 4px;
}


/* ─────────────────────────────────────────────────────────────
   CERTIFICATION BADGES
───────────────────────────────────────────────────────────── */
.lc-cert-badge {
    background: var(--lc-off-white);
    border: 1px solid var(--lc-gray-light);
    border-radius: var(--lc-radius-md);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--lc-navy);
}

.lc-cert-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--lc-radius-sm);
    background: var(--lc-navy);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lc-cert-icon svg {
    width: 14px;
    height: 14px;
    stroke: #fff;
}


/* ─────────────────────────────────────────────────────────────
   GOOGLE SCORE BLOCK
───────────────────────────────────────────────────────────── */
.lc-google-score {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--lc-off-white);
    border: 1px solid var(--lc-gray-light);
    border-radius: var(--lc-radius-md);
    padding: 12px 14px;
    margin-bottom: 16px;
}

.lc-google-score__number {
    font-family: var(--lc-font-display);
    font-size: 36px;
    font-weight: 800;
    color: var(--lc-navy);
    line-height: 1;
}

.lc-google-score__stars {
    color: #F5A623;
    font-size: 16px;
    letter-spacing: 2px;
}

.lc-google-score__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--lc-navy);
    display: block;
    margin-bottom: 2px;
}

.lc-google-score__count {
    font-size: 12px;
    color: var(--lc-gray-text);
}


/* ─────────────────────────────────────────────────────────────
   REVIEW CARDS
───────────────────────────────────────────────────────────── */
.lc-review-card {
    background: var(--lc-white);
    border: 1px solid var(--lc-gray-light);
    border-radius: var(--lc-radius-lg);
    padding: 14px;
    margin-bottom: 10px;
}

.lc-review-card__stars {
    color: #F5A623;
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.lc-review-card__text {
    font-size: 14px !important; /* was 13px — more comfortable to read */
    color: #3A4455 !important;
    line-height: 1.6 !important;
    font-style: italic;
    margin-bottom: 8px !important;
}

.lc-review-card__meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--lc-gray-text);
}

.lc-review-card__meta strong {
    color: var(--lc-navy);
    font-style: normal;
}

.lc-review-card__source {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--lc-gray-text);
}

.lc-review-card__source svg {
    flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────
   DARK SECTION (navy background rows)
   Add class .lc-section-dark to Kadence Row/Section
───────────────────────────────────────────────────────────── */
.lc-section-dark,
.lc-section-dark.wp-block-group {
    background-color: var(--lc-navy) !important;
    color: #fff;
}

.lc-section-dark h1,
.lc-section-dark h2,
.lc-section-dark h3 {
    color: #fff !important;
}

.lc-section-dark p,
.lc-section-dark .wp-block-paragraph {
    color: rgba(255, 255, 255, 0.75) !important;
}


/* ─────────────────────────────────────────────────────────────
   DISPLAY HEADINGS
   Apply .lc-heading-display to any Heading block for Barlow Condensed uppercase
───────────────────────────────────────────────────────────── */
.lc-heading-display,
.lc-heading-display.wp-block-heading {
    font-family: var(--lc-font-display) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    line-height: 1.05 !important;
    letter-spacing: 0.5px;
}

.lc-heading-display span.lc-accent {
    color: var(--lc-orange);
}

/* Section-title style (H2 variant) */
.lc-section-title {
    font-family: var(--lc-font-display) !important;
    font-size: clamp(24px, 5vw, 32px) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
    margin-bottom: 16px !important;
}


/* ─────────────────────────────────────────────────────────────
   HERO SECTION
   Kadence Row with class .lc-hero
───────────────────────────────────────────────────────────── */
.lc-hero.wp-block-group,
.lc-hero {
    background-color: var(--lc-navy) !important;
    position: relative;
    overflow: hidden;
}

/* Hero background photo with navy gradient overlay.
   The gradient preserves text readability; the photo adds atmosphere.
   Fallback: --lc-navy solid colour (already set above). */
.lc-hero.wp-block-group,
.lc-hero {
    background:
        linear-gradient(
            160deg,
            rgba(13, 34, 64, 0.88) 0%,
            rgba(13, 34, 64, 0.75) 60%,
            rgba(13, 34, 64, 0.82) 100%
        ),
        url('https://images.unsplash.com/photo-1584622650111-993a426fbf0a?w=1400&q=80&auto=format&fit=crop')
        center / cover no-repeat !important;
}

/* All text inside the hero must be white — Kadence's global h1 colour
   (#1A202C dark) would otherwise override the display heading on navy. */
.lc-hero h1,
.lc-hero h2,
.lc-hero h3,
.lc-hero h4,
.lc-hero h5,
.lc-hero h6 {
    color: #ffffff !important;
}

.lc-hero p,
.lc-hero .has-large-font-size,
.lc-hero .has-medium-font-size {
    color: rgba(255, 255, 255, 0.88) !important;
}

/* Diagonal background accent */
.lc-hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: -60px;
    width: clamp(160px, 40%, 260px);
    height: 100%;
    background: var(--lc-navy-mid);
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
    opacity: 0.5;
    pointer-events: none;
}

/* Hero stats row */
.lc-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 20px 0;
}

.lc-hero-stat {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--lc-radius-md);
    padding: 10px 8px;
    text-align: center;
}

.lc-hero-stat__number {
    display: block;
    font-family: var(--lc-font-display);
    font-size: 24px;
    font-weight: 800;
    color: var(--lc-orange);
    line-height: 1;
    white-space: nowrap; /* prevents "9." breaking from "6" on narrow screens */
}

.lc-hero-stat__label {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.80); /* was 0.60 — raised for WCAG contrast */
    margin-top: 3px;
    line-height: 1.3;
}

/* Hero availability badge */
.lc-availability-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(240, 90, 26, 0.20);
    border: 1px solid var(--lc-orange);
    color: var(--lc-orange-light);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--lc-radius-pill);
    margin-bottom: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.lc-availability-badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--lc-green-light);
    border-radius: 50%;
    animation: lc-pulse 1.6s ease-in-out infinite;
}

/* Trust strip below hero */
.lc-trust-strip {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 20px;
    flex-wrap: wrap;
    gap: 8px;
}

.lc-trust-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px; /* was 11px — more readable */
    color: rgba(255, 255, 255, 0.82); /* was 0.65 — raised for WCAG contrast */
    font-weight: 500;
}

.lc-trust-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    stroke: var(--lc-green-light);
}


/* ─────────────────────────────────────────────────────────────
   HERO CTA BUTTONS ROW
───────────────────────────────────────────────────────────── */
.lc-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0 0;
}

.lc-hero-ctas .lc-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--lc-orange);
    color: #fff;
    font-family: var(--lc-font-display);
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    border: none;
    border-radius: var(--lc-radius-md);
    padding: 16px 24px;
    transition: background 0.2s ease, transform 0.1s ease;
}

.lc-hero-ctas .lc-btn-primary:hover {
    background: #D04A0A;
    transform: translateY(-1px);
}

.lc-hero-ctas .lc-btn-secondary {
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: #fff;
    font-family: var(--lc-font-body);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--lc-radius-md);
    padding: 12px 20px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.lc-hero-ctas .lc-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.60);
}


/* ─────────────────────────────────────────────────────────────
   FORMINATOR FORM OVERRIDES
   Style Forminator forms inside dark navy .lc-section-dark areas
   and on light backgrounds
───────────────────────────────────────────────────────────── */

/* ── Dark section (navy) form styles ── */
.lc-section-dark .forminator-custom-form .forminator-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.60) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 5px !important;
}

.lc-section-dark .forminator-custom-form input[type="text"],
.lc-section-dark .forminator-custom-form input[type="email"],
.lc-section-dark .forminator-custom-form input[type="tel"],
.lc-section-dark .forminator-custom-form input[type="number"],
.lc-section-dark .forminator-custom-form select,
.lc-section-dark .forminator-custom-form textarea {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--lc-radius-md) !important;
    color: #fff !important;
    font-family: var(--lc-font-body) !important;
    font-size: 15px !important;
    padding: 12px 14px !important;
}

.lc-section-dark .forminator-custom-form input::placeholder,
.lc-section-dark .forminator-custom-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.30) !important;
}

.lc-section-dark .forminator-custom-form input:focus,
.lc-section-dark .forminator-custom-form select:focus,
.lc-section-dark .forminator-custom-form textarea:focus {
    border-color: var(--lc-orange) !important;
    outline: none !important;
    box-shadow: none !important;
}

.lc-section-dark .forminator-custom-form .forminator-button-submit,
.lc-section-dark .forminator-custom-form button[type="submit"] {
    width: 100% !important;
    background: var(--lc-orange) !important;
    color: #fff !important;
    font-family: var(--lc-font-display) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 16px !important;
    border: none !important;
    border-radius: var(--lc-radius-md) !important;
    cursor: pointer !important;
    letter-spacing: 0.5px !important;
    transition: background 0.2s ease !important;
}

.lc-section-dark .forminator-custom-form .forminator-button-submit:hover,
.lc-section-dark .forminator-custom-form button[type="submit"]:hover {
    background: #D04A0A !important;
}

/* Dark section validation */
.lc-section-dark .forminator-custom-form .forminator-error-message {
    color: #FF9F9F !important;
    font-size: 12px !important;
}

.lc-section-dark .forminator-custom-form .forminator-has_error input,
.lc-section-dark .forminator-custom-form .forminator-has_error select,
.lc-section-dark .forminator-custom-form .forminator-has_error textarea {
    border-color: #FF6B6B !important;
}

/* ── Light section form styles ── */
.forminator-custom-form .forminator-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--lc-navy);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 5px;
}

.forminator-custom-form input[type="text"],
.forminator-custom-form input[type="email"],
.forminator-custom-form input[type="tel"],
.forminator-custom-form input[type="number"],
.forminator-custom-form select,
.forminator-custom-form textarea {
    background: var(--lc-white) !important;
    border: 1px solid var(--lc-gray-light) !important;
    border-radius: var(--lc-radius-md) !important;
    color: var(--lc-navy) !important;
    font-family: var(--lc-font-body) !important;
    font-size: 15px !important;
    padding: 12px 14px !important;
}

.forminator-custom-form input:focus,
.forminator-custom-form select:focus,
.forminator-custom-form textarea:focus {
    border-color: var(--lc-orange) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(240, 90, 26, 0.15) !important;
}

.forminator-custom-form .forminator-button-submit,
.forminator-custom-form button[type="submit"] {
    width: 100%;
    background: var(--lc-orange) !important;
    color: #fff !important;
    font-family: var(--lc-font-display) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 16px !important;
    border: none !important;
    border-radius: var(--lc-radius-md) !important;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: background 0.2s ease;
}

.forminator-custom-form .forminator-button-submit:hover,
.forminator-custom-form button[type="submit"]:hover {
    background: #D04A0A !important;
}

/* Form success message */
.forminator-custom-form .forminator-success {
    background: rgba(26, 138, 74, 0.10) !important;
    border: 1px solid rgba(26, 138, 74, 0.30) !important;
    border-radius: var(--lc-radius-md) !important;
    color: #0D5C2F !important;
    padding: 16px !important;
    font-weight: 600 !important;
}

/* ── Forminator "modern" select (Choices.js) — dark section fix ──────────
   The native <select> is hidden; Choices.js renders its own divs.
   The rules above targeting `select` only style the hidden fallback element.
   These rules target the visible Choices.js UI inside .lc-section-dark.
─────────────────────────────────────────────────────────────────────────── */

/* Visible input box (shows the selected value) */
.lc-section-dark .forminator-custom-form .choices__inner {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--lc-radius-md) !important;
    padding: 10px 14px !important;
    min-height: unset !important;
}

/* Selected item text & placeholder */
.lc-section-dark .forminator-custom-form .choices__list--single .choices__item,
.lc-section-dark .forminator-custom-form .choices__placeholder {
    color: #fff !important;
    opacity: 1 !important;
    font-size: 15px !important;
    padding: 2px 0 !important;
}

/* Placeholder slightly dimmed */
.lc-section-dark .forminator-custom-form .choices__placeholder {
    color: rgba(255, 255, 255, 0.40) !important;
}

/* Dropdown chevron arrow — recolour to white */
.lc-section-dark .forminator-custom-form .choices[data-type*="select-one"]::after {
    border-color: rgba(255, 255, 255, 0.70) transparent transparent transparent !important;
}
.lc-section-dark .forminator-custom-form .choices[data-type*="select-one"].is-open::after {
    border-color: transparent transparent rgba(255, 255, 255, 0.70) transparent !important;
}

/* Dropdown list container */
.lc-section-dark .forminator-custom-form .choices__list--dropdown,
.lc-section-dark .forminator-custom-form .choices__list[aria-expanded] {
    background: #1a3a6b !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: var(--lc-radius-md) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.40) !important;
}

/* Each option in the dropdown */
.lc-section-dark .forminator-custom-form .choices__list--dropdown .choices__item,
.lc-section-dark .forminator-custom-form .choices__list[aria-expanded] .choices__item {
    color: #fff !important;
    font-size: 15px !important;
    padding: 10px 14px !important;
}

/* Hovered / keyboard-focused option */
.lc-section-dark .forminator-custom-form .choices__list--dropdown .choices__item--selectable.is-highlighted,
.lc-section-dark .forminator-custom-form .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: rgba(240, 90, 26, 0.25) !important;
    color: #fff !important;
}

/* "Andere" custom text input that appears inside the dropdown */
.lc-section-dark .forminator-custom-form .choices__input {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.lc-section-dark .forminator-custom-form .choices__input::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

/* Focus ring on the outer Choices wrapper */
.lc-section-dark .forminator-custom-form .choices.is-focused .choices__inner,
.lc-section-dark .forminator-custom-form .choices.is-open .choices__inner {
    border-color: var(--lc-orange) !important;
}

/* ── Offerte form wrapper ── */
.lc-form-section {
    max-width: 480px;
}

.lc-form-section h3 {
    font-family: var(--lc-font-display) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
}

.lc-form-section p {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    margin-bottom: 20px !important;
}


/* ─────────────────────────────────────────────────────────────
   FOOTER OVERRIDES
   Minimal dark footer
───────────────────────────────────────────────────────────── */
.lc-footer.site-footer,
.lc-footer {
    background: #081524 !important;
    color: rgba(255, 255, 255, 0.35) !important;
    text-align: center !important;
    padding: 20px !important;
    font-size: 12px !important;
}

.lc-footer a {
    color: rgba(255, 255, 255, 0.50) !important;
    text-decoration: none !important;
}

.lc-footer a:hover {
    color: rgba(255, 255, 255, 0.80) !important;
}

.lc-footer-logo {
    font-family: var(--lc-font-display);
    font-size: 20px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.70);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.lc-footer-logo span {
    color: var(--lc-orange);
}

/* Hide Kadence WP footer credit — the kadence_credit_text filter removes the
   native credit, but if it appears via a footer widget this CSS is the backup. */
.site-footer .kadence-credit,
.site-footer a[href*="kadencewp.com"],
.footer-credit a[href*="kadencewp.com"] {
    display: none !important;
}


/* ─────────────────────────────────────────────────────────────
   RESPONSIVE — Tablet & Desktop
───────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .lc-hero-stats {
        gap: 12px;
    }
    .lc-hero-stat__number {
        font-size: 28px;
    }
    .lc-hero-stat__label {
        font-size: 12px;
    }
    .lc-price-row__name {
        font-size: 15px;
    }
}

@media (min-width: 1024px) {
    .lc-sticky-bar {
        max-width: 100%;
    }
    /* On desktop, service cards grid handled by Kadence column layout */
    .lc-hero::before {
        width: 35%;
    }
}

/* ═════════════════════════════════════════════════════════════
   GLOBAL LAYOUT & DESIGN SYSTEM FIXES  (v1.5)
   ═════════════════════════════════════════════════════════════
   Applied to ALL pages — not just .home — for consistency.
   ───────────────────────────────────────────────────────────── */

/* ── A. Remove Kadence "boxed content" card on all pages ──────
   content-style-boxed wraps every page in a 2rem padded white
   card with a shadow. Our design uses full-bleed sections, so
   the card padding fights the layout on every page. Remove it. */
.single-entry.entry {
    box-shadow: none !important;
}
.entry-content-wrap {
    padding: 0 !important;
}

/* ── B. Remove excessive content-area margins ─────────────────
   Kadence adds 5rem top/bottom around the content-area. Our
   block hero sections provide their own top spacing on every
   page, so we remove this gap site-wide. */
.content-area {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ── C. Hide the auto-generated Kadence page-title banner ─────
   Kadence renders the WP post title as an h1 banner above the
   block content on every page. We hide it site-wide because:
   - Homepage: our lc-hero block already provides the heading
   - Breda (city pages): same — own hero in block content
   - Diensten / Over Ons: own hero section in block content
   Showing it creates a duplicate/orphaned header with white text
   on a grey background that clashes with our full-bleed design. */
.entry-hero.page-hero-section {
    display: none !important;
}

/* ── D. Full-width page layout ────────────────────────────────
   Breda (city template) outputs content directly in <main> — no
   max-width wrapper. Standard pages go through Kadence's
   .content-container.site-container which has a fixed max-width
   (~1290px) + horizontal padding, creating the "boxed" look with
   space between the content and the browser edges.

   NOTE: Kadence uses <main id="inner-wrap">, NOT #content.
   The ancestor selector must target .content-area or be omitted.
   .content-container only appears in the page content area, NOT
   in the header or footer (which use .site-container alone), so
   the rule below is safely scoped.

   Remove the constraint so all pages match the Breda full-bleed
   layout. Horizontal padding is provided by each block row's
   .kt-row-column-wrap (see rule E below). */
.content-area > .content-container {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Also ensure the site-main and article don't re-introduce width caps */
.content-area,
.content-area .site-main {
    width: 100% !important;
    max-width: none !important;
}

.page .single-entry,
.page article.page {
    width: 100% !important;
    max-width: none !important;
}

/* ── E. Section padding fallbacks ─────────────────────────────
   Kadence normally sets row padding via ID-based inline CSS:
     #kt-layout-idXXX > .kt-row-column-wrap { padding... }
   Those IDs are absent from the stored HTML until the pages are
   re-saved in the Gutenberg editor. These class-based rules
   provide the same spacing in the meantime.

   PERMANENT FIX: Open each page in Gutenberg and click Update.
   Gutenberg re-saves the HTML with the correct id="" attributes
   and these rules become redundant backup.
   ─────────────────────────────────────────────────────────── */

/* All top-level Kadence section rows
   (.single-content = standard pages; .lc-city-page-main = city page template)
   Left/right use !important so they always apply even when Kadence's
   kadence-content.min.css side-padding was stripped by our container fix. */
.single-content > .wp-block-kadence-rowlayout > .kt-row-column-wrap,
.lc-city-page-main > .wp-block-kadence-rowlayout > .kt-row-column-wrap {
    padding-top: 60px;
    padding-right: 1.5rem !important;
    padding-bottom: 60px;
    padding-left: 1.5rem !important;
    box-sizing: border-box;
}

/* Hero: deeper vertical padding */
.lc-hero > .kt-row-column-wrap {
    padding-top: 100px !important;
    padding-bottom: 80px !important;
}

/* ── F. Nested grid rows — reset the inherited 60px ───────────
   Row layouts inside a section (service card grids, pricing rows)
   must NOT inherit 60px padding. Reset them, but keep a small
   column gap so cards breathe. */
.single-content > .wp-block-kadence-rowlayout
    .wp-block-kadence-rowlayout > .kt-row-column-wrap,
.lc-city-page-main > .wp-block-kadence-rowlayout
    .wp-block-kadence-rowlayout > .kt-row-column-wrap {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
}

/* ── G. Service card grid ──────────────────────────────────────
   Cards sit in two separate nested row-layout blocks (one row of
   2 urgent cards, then one row of 2 regular cards). Add vertical
   gap between those rows, and ensure consistent column gap. */
.lc-section-services .kt-inside-inner-col
    > .wp-block-kadence-rowlayout + .wp-block-kadence-rowlayout {
    margin-top: 12px;
}

.lc-section-services .kt-row-column-wrap.kt-has-2-columns {
    gap: 12px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Ensure card cells stretch to equal height within each row */
.kt-inside-inner-col.lc-service-card {
    display: flex !important;
    flex-direction: column !important;
}

/* Linked service cards — "Meer info →" CTA */
.lc-service-card--linked {
    position: relative;
    cursor: pointer;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.lc-service-card--linked:hover {
    box-shadow: 0 4px 16px rgba(13,34,64,0.10) !important;
}

.lc-service-card--linked h3 a {
    color: inherit;
    text-decoration: none;
}

.lc-service-card--linked h3 a:hover {
    color: var(--lc-orange);
}

.lc-service-card__cta {
    display: inline-block;
    margin-top: auto;
    padding-top: 10px;
    font-family: var(--lc-font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--lc-orange) !important;
    text-decoration: none;
    letter-spacing: 0.02em;
}

.lc-service-card__cta:hover {
    color: #c94400 !important;
    text-decoration: underline;
}

/* ── H. Responsive — Mobile (< 768px) ─────────────────────── */
@media (max-width: 767px) {

    /* ── H1. Admin bar offset for logged-in users ── */
    /* WP admin bar is 46px tall on mobile; push our sticky bar down */
    .admin-bar .lc-sticky-bar {
        top: 46px;
    }
    .admin-bar .site,
    .admin-bar #page,
    .admin-bar .kadence-page-wrap {
        padding-top: calc(var(--lc-sticky-height) + 46px);
    }

    /* ── H2. Stack service cards to single column ── */
    .lc-section-services .kt-row-column-wrap.kt-has-2-columns {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* ── H3. Tighter section padding on small screens ── */
    /* Note: removing content-style-boxed body class (functions.php § 7b)
       means Kadence no longer overrides these with higher-specificity rules. */
    .single-content > .wp-block-kadence-rowlayout > .kt-row-column-wrap,
    .lc-city-page-main > .wp-block-kadence-rowlayout > .kt-row-column-wrap {
        padding-top: 40px;
        padding-right: 1rem !important;
        padding-bottom: 40px;
        padding-left: 1rem !important;
    }

    /* ── H4. Hero: tighter vertical padding + scaled-down h1 ── */
    .lc-hero > .kt-row-column-wrap {
        padding-top: 60px !important;
        padding-bottom: 50px !important;
    }
    /* Prevent very large hero headings from overflowing narrow phones */
    .lc-hero h1,
    .lc-hero .wp-block-heading {
        font-size: clamp(26px, 8vw, 36px) !important;
        line-height: 1.1 !important;
    }

    /* ── H5. Hero stat labels: slightly bigger on mobile ── */
    .lc-hero-stat__label {
        font-size: 10px; /* tight columns — keep condensed but readable */
    }

    /* ── H6. CTA buttons: full-width stacked on mobile ── */
    .lc-hero-ctas {
        flex-direction: column;
        gap: 10px;
    }
    .lc-hero-ctas .lc-btn-primary,
    .lc-hero-ctas .lc-btn-secondary {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    /* Reduce the font clamp range so BEL NU fits comfortably */
    .lc-hero-ctas .lc-btn-primary {
        font-size: clamp(18px, 5vw, 20px) !important;
        padding: 18px 24px !important; /* taller tap target on mobile */
    }

    /* ── H7. Trust strip: center-aligned on mobile ── */
    .lc-trust-strip {
        justify-content: center;
    }

    /* ── H8. Price rows: wrap name/price on very narrow screens ── */
    .lc-price-row {
        flex-wrap: wrap;
        gap: 6px;
    }
    .lc-price-row__price {
        font-size: 20px; /* slightly smaller when wrapped */
    }

    /* ── H9. Sticky bar tagline: hide location line on tiny screens ── */
    @media (max-width: 380px) {
        .lc-sticky-bar__location {
            display: none;
        }
    }
}


/* ─────────────────────────────────────────────────────────────
   PHOTO GALLERY SECTION  (.lc-photo-gallery)
   PHP-rendered trust-building section that appears between the
   main page content and the footer on all pages.
   Added via kadence_single_after_content hook + city template.
───────────────────────────────────────────────────────────── */
.lc-photo-gallery {
    background: var(--lc-off-white);
    padding: 64px 1.5rem;
    border-top: 1px solid var(--lc-gray-light);
}

.lc-photo-gallery__inner {
    max-width: 1160px;
    margin: 0 auto;
}

.lc-photo-gallery__header {
    text-align: center;
    margin-bottom: 36px;
}

.lc-photo-gallery__label {
    display: inline-block;
    font-family: var(--lc-font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--lc-orange);
    margin-bottom: 8px;
}

.lc-photo-gallery__title {
    font-family: var(--lc-font-display) !important;
    font-size: clamp(22px, 4vw, 30px) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--lc-navy) !important;
    line-height: 1.1 !important;
    margin: 0 !important;
}

.lc-photo-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.lc-photo-gallery__item {
    position: relative;
    border-radius: var(--lc-radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(13, 34, 64, 0.10);
    margin: 0;
    /* subtle lift on hover */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lc-photo-gallery__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(13, 34, 64, 0.16);
}

.lc-photo-gallery__item img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
    /* Slight warm shift to feel more Dutch/professional */
    filter: saturate(0.92) brightness(1.02);
}

/* Gradient overlay with caption */
.lc-photo-gallery__item figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent 0%, rgba(13, 34, 64, 0.88) 100%);
    color: #fff;
    padding: 48px 16px 18px;
}

.lc-photo-gallery__item figcaption strong {
    display: block;
    font-family: var(--lc-font-display);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.2;
    margin-bottom: 3px;
}

.lc-photo-gallery__item figcaption span {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.4;
}

/* Orange accent bar on the left edge */
.lc-photo-gallery__item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--lc-orange);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.lc-photo-gallery__item:hover::after {
    opacity: 1;
}

/* Trust badge row below the grid */
.lc-photo-gallery__trust {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--lc-gray-light);
    flex-wrap: wrap;
}

.lc-photo-gallery__trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--lc-navy);
}

.lc-photo-gallery__trust-item svg {
    width: 20px;
    height: 20px;
    stroke: var(--lc-orange);
    flex-shrink: 0;
}

/* ── Mobile: stack to single column ── */
@media (max-width: 767px) {
    .lc-photo-gallery {
        padding: 44px 1rem;
    }

    .lc-photo-gallery__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .lc-photo-gallery__item img {
        height: 210px;
    }

    .lc-photo-gallery__trust {
        flex-direction: column;
        gap: 14px;
        align-items: flex-start;
        padding-left: 4px;
    }
}

/* ── Tablet: 2 + 1 layout ── */
@media (min-width: 768px) and (max-width: 1023px) {
    .lc-photo-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lc-photo-gallery__item:last-child {
        grid-column: 1 / -1;
    }

    .lc-photo-gallery__item:last-child img {
        height: 220px;
    }
}


/* ─────────────────────────────────────────────────────────────
   NEARBY CITIES STRIP — [lc_nearby_cities] shortcode output
───────────────────────────────────────────────────────────── */
.lc-nearby-cities {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--lc-gray-light);
}

.lc-nearby-cities__label {
    font-family: var(--lc-font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--lc-gray-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.lc-nearby-cities__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Small chip variant */
.lc-chip--sm {
    font-size: 13px !important;
    padding: 4px 12px !important;
}


/* ─────────────────────────────────────────────────────────────
   NAV PHONE CTA — .lc-nav-phone menu item
───────────────────────────────────────────────────────────── */
.main-navigation .lc-nav-phone > a,
.kadence-navigation .lc-nav-phone > a {
    color: var(--lc-orange) !important;
    font-weight: 700 !important;
    white-space: nowrap;
}

.main-navigation .lc-nav-phone > a:hover,
.kadence-navigation .lc-nav-phone > a:hover {
    color: #c94400 !important;
    text-decoration: none;
}


/* ─────────────────────────────────────────────────────────────
   FAQ SECTION — [lc_city_faq] shortcode output
───────────────────────────────────────────────────────────── */
.lc-faq-section {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 16px;
}

.lc-faq-section__title {
    font-family: var(--lc-font-heading);
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 700;
    color: var(--lc-navy);
    margin-bottom: 24px;
    text-align: center;
}

.lc-faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lc-faq-item {
    background: #fff;
    border: 1px solid #dde3ec;
    border-radius: var(--lc-radius-md);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.lc-faq-item[open] {
    box-shadow: 0 2px 12px rgba(13,34,64,0.08);
}

.lc-faq-item__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    font-family: var(--lc-font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--lc-navy);
    cursor: pointer;
    list-style: none;
    user-select: none;
    gap: 12px;
}

/* Remove default marker in all browsers */
.lc-faq-item__question::-webkit-details-marker { display: none; }
.lc-faq-item__question::marker { display: none; }

/* Chevron via ::after */
.lc-faq-item__question::after {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--lc-orange);
    border-bottom: 2px solid var(--lc-orange);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-top: -4px;
}

.lc-faq-item[open] .lc-faq-item__question::after {
    transform: rotate(-135deg);
    margin-top: 4px;
}

.lc-faq-item__answer {
    padding: 0 20px 16px;
    color: var(--lc-text-muted);
    font-size: 0.95rem;
    line-height: 1.65;
}

.lc-faq-item__answer p {
    margin: 0;
}

/* Dark-section variant (FAQ inside lc-section-dark wrapper) */
.lc-section-dark .lc-faq-item {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
}

.lc-section-dark .lc-faq-item__question {
    color: #fff;
}

.lc-section-dark .lc-faq-item__answer {
    color: rgba(255,255,255,0.82);
}

.lc-section-dark .lc-faq-section__title {
    color: #fff;
}


/* ─────────────────────────────────────────────────────────────
   KENNISBANK — hub card grid + article styles
───────────────────────────────────────────────────────────── */
.lc-kennisbank-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 32px;
}

.lc-kennisbank-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 28px 24px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.2s;
}

.lc-kennisbank-card:hover {
    box-shadow: 0 8px 24px rgba(13,34,64,0.10);
    transform: translateY(-2px);
}

.lc-kennisbank-card__icon {
    font-size: 2rem;
    margin-bottom: 12px;
}

.lc-kennisbank-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0D2240;
    margin: 0 0 10px;
    line-height: 1.3;
}

.lc-kennisbank-card__desc {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.6;
    flex: 1;
    margin: 0 0 16px;
}

.lc-kennisbank-card__cta {
    font-size: 0.85rem;
    font-weight: 700;
    color: #E8520A;
}

/* Article breadcrumb */
.lc-breadcrumb {
    font-size: 0.82rem;
    color: #64748b;
    margin-bottom: 16px !important;
}

.lc-breadcrumb a {
    color: #64748b;
    text-decoration: none;
}

.lc-breadcrumb a:hover {
    color: #E8520A;
}

/* Tip/warning box in articles */
.lc-tip-box {
    background: #fff8e1;
    border-left: 4px solid #f59e0b;
    border-radius: 0 8px 8px 0;
    padding: 16px 20px;
    margin: 24px 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #1e293b;
}

/* ─────────────────────────────────────────────────────────────
   PRINT — hide sticky bar
───────────────────────────────────────────────────────────── */
@media print {
    .lc-sticky-bar { display: none !important; }
    .site, #page, .kadence-page-wrap { padding-top: 0 !important; }
}