/* ==========================================================================
   eGateweb — Page Design System (base primitives)
   --------------------------------------------------------------------------
   Shared building blocks used by every custom page template (front-page.php
   and the service pages). Page-specific layout lives in css/eg-{page}.css.

   RULE: no hardcoded colors in this file. Every color is a var(--eg-*) token
   defined by inc/eg-colors.php and editable in Customizer > Site Colors.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens that are NOT colors (spacing, radius, shadow, motion).
   Colors are injected into :root separately by eg_colors_css().
   -------------------------------------------------------------------------- */
:root {
    --eg-radius-sm: 10px;
    --eg-radius: 16px;
    --eg-radius-lg: 24px;
    --eg-radius-pill: 999px;

    --eg-shadow-sm: 0 1px 2px rgba(var(--eg-heading-rgb), .04),
                    0 2px 8px rgba(var(--eg-heading-rgb), .04);
    --eg-shadow: 0 4px 12px rgba(var(--eg-heading-rgb), .05),
                 0 12px 32px rgba(var(--eg-heading-rgb), .06);
    --eg-shadow-lg: 0 8px 24px rgba(var(--eg-heading-rgb), .08),
                    0 24px 64px rgba(var(--eg-heading-rgb), .10);
    --eg-shadow-brand: 0 8px 24px rgba(var(--eg-brand-rgb), .28);

    --eg-gap: 24px;
    --eg-section-y: 88px;
    --eg-container: 1240px;

    --eg-ease: cubic-bezier(.22, 1, .36, 1);

    /*
     * Hero height — the FALLBACK only.
     *
     * Every hero section now carries its own height in the Customizer (Hero →
     * Height — desktop / tablet / mobile), printed inline by eg_hero_style()
     * as --eg-hh-d / --eg-hh-t / --eg-hh-m. The rules read those first and land
     * here only when a page has no value set, so this is a safety net rather
     * than the thing to edit. To change one page, use its panel; to change the
     * shipped defaults for new pages, edit eg_hero_size_fields().
     *
     * These numbers are what the background-photo heroes used before the
     * controls existed: the home hero's measured height above 900px, then a
     * deliberately shorter tablet and phone value. The home hero stacks below
     * 900px — its mini quote form drops under the copy and pushes it past
     * 1000px — but a service hero holding a title, one line and a button has
     * nothing to put in that space, so it would read as a huge empty photo.
     * min-height is a floor, so the home still grows to fit its form.
     */
    --eg-hero-h: 640px;
}

@media (max-width: 1100px) { :root { --eg-hero-h: 665px; } }
@media (max-width: 900px)  { :root { --eg-hero-h: 560px; } }
@media (max-width: 600px)  { :root { --eg-hero-h: 640px; } }

/* --------------------------------------------------------------------------
   Page shell
   Neutralises the narrow 900px article layout from content.css so custom
   templates can run full-bleed. Scoped to .eg-main only.
   -------------------------------------------------------------------------- */
#primary.site-main.eg-main,
.site-main.eg-main {
    max-width: none;
    margin: 0;
    padding: 0;
    background: var(--eg-bg);
    color: var(--eg-text);
    overflow-x: clip;
}

.eg-main *,
.eg-main *::before,
.eg-main *::after {
    box-sizing: border-box;
}

.eg-main img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.eg-container {
    width: 100%;
    max-width: var(--eg-container);
    margin-inline: auto;
    padding-inline: 24px;
}

.eg-section {
    padding-block: var(--eg-section-y);
    position: relative;
}

.eg-section--tight { padding-block: 56px; }
.eg-section--alt   { background: var(--eg-bg-alt); }

/* <picture> wrapper printed by eg_responsive_picture() for the desktop /
   tablet / mobile hero backgrounds. No box of its own, so the <img> inside is
   positioned exactly as if it stood alone. */
.eg-picture { display: contents; }

/*
 * Hero background photos must FILL their hero, at any hero height.
 *
 * They already say `height: 100%`, but `.eg-main img { height: auto }` above is
 * specificity (0,1,1) and a single `.eg-hero__bg` / `.eg-dhero__bg` class is
 * only (0,1,0) — so `auto` was winning. For an absolutely positioned replaced
 * element, `height: auto` means "use the intrinsic height and ignore `bottom`",
 * so the photo rendered as a width-wide strip anchored at the top of the hero
 * with the dark fallback colour showing underneath. On a wide desktop the strip
 * happened to be taller than the hero, which is why it was never noticed.
 *
 * The extra `.eg-main` here makes these (0,2,1) and restores the intended
 * object-fit: cover fill. Do not drop it.
 */
.eg-main .eg-hero__bg,
.eg-main .eg-dhero__bg {
    height: 100%;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.eg-main :where(h1, h2, h3, h4) {
    color: var(--eg-heading);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 0;
    border: 0;
    padding: 0;
}

/*
 * Base paragraph defaults.
 *
 * Wrapped in :where() ON PURPOSE. Written plainly, `.eg-main p` has specificity
 * (0,1,1) — one class + one element — which silently BEATS every single-class
 * rule such as `.eg-hero__sub` or `.eg-dhero__text` (0,1,0), no matter which
 * file loads last. That made page rules unable to recolor their own text: the
 * Diensten hero's white text kept reverting to dark grey on a photo.
 *
 * :where() drops this to (0,0,1), so it behaves as a true default that any
 * component rule can override. Do not "simplify" this back.
 */
:where(.eg-main) p {
    margin: 0;
    color: var(--eg-text);
    line-height: 1.65;
}

/* Brand-colored part of a heading. Produced by eg_highlight() from a | marker. */
.eg-hl { color: var(--eg-brand); }

.eg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--eg-brand);
    background: var(--eg-brand-soft);
    border-radius: var(--eg-radius-pill);
    padding: 7px 14px;
    margin-bottom: 18px;
}

/* Centered section intro: eyebrow + title + subtitle */
.eg-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
}

.eg-head h2 {
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
}

.eg-head p {
    margin-top: 14px;
    font-size: 1.05rem;
    color: var(--eg-muted);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.eg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: var(--eg-radius-pill);
    font-size: .98rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .25s var(--eg-ease), box-shadow .25s var(--eg-ease),
                background-color .25s var(--eg-ease), color .25s var(--eg-ease),
                border-color .25s var(--eg-ease);
}

.eg-btn:hover { transform: translateY(-2px); }
.eg-btn .eg-icon { transition: transform .25s var(--eg-ease); }
.eg-btn:hover .eg-icon { transform: translateX(3px); }

.eg-btn--primary {
    background: var(--eg-brand);
    color: var(--eg-brand-ink);
    box-shadow: var(--eg-shadow-brand);
}
.eg-btn--primary:hover {
    background: var(--eg-brand-dark);
    color: var(--eg-brand-ink);
}

.eg-btn--ghost {
    background: var(--eg-card);
    color: var(--eg-heading);
    border-color: var(--eg-border);
    box-shadow: var(--eg-shadow-sm);
}
.eg-btn--ghost:hover {
    border-color: var(--eg-brand);
    color: var(--eg-brand);
}

.eg-btn--accent {
    background: var(--eg-accent);
    color: #fff;
}
.eg-btn--accent:hover { background: var(--eg-accent-dark); color: #fff; }

/* Solid white button — for use on brand/accent/dark panels */
.eg-btn--on-dark {
    background: var(--eg-card);
    color: var(--eg-heading);
}
.eg-btn--on-dark:hover { color: var(--eg-brand); }

/* Inline text link with a trailing arrow */
.eg-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: .95rem;
    color: var(--eg-brand);
    text-decoration: none;
    border: 0;
}
.eg-link .eg-icon { transition: transform .25s var(--eg-ease); }
.eg-link:hover .eg-icon { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.eg-card {
    background: var(--eg-card);
    border: 1px solid var(--eg-border);
    border-radius: var(--eg-radius);
    padding: 28px;
    transition: transform .3s var(--eg-ease), box-shadow .3s var(--eg-ease),
                border-color .3s var(--eg-ease);
}

/* --------------------------------------------------------------------------
   Icon chip — a rounded tile holding an inline SVG icon
   -------------------------------------------------------------------------- */
.eg-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
    background: var(--eg-brand-soft);
    color: var(--eg-brand);
}

.eg-chip--solid {
    background: var(--eg-brand);
    color: var(--eg-brand-ink);
}

.eg-chip--accent {
    background: var(--eg-accent-soft);
    color: var(--eg-accent);
}

.eg-chip--lg { width: 60px; height: 60px; border-radius: 18px; }

/* --------------------------------------------------------------------------
   Checklist
   -------------------------------------------------------------------------- */
.eg-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.eg-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    font-size: .98rem;
    font-weight: 600;
    color: var(--eg-heading);
}

.eg-list li::marker { content: none; }

.eg-list .eg-icon {
    flex-shrink: 0;
    color: var(--eg-brand);
}

.eg-list--accent .eg-icon { color: var(--eg-accent); }

/* --------------------------------------------------------------------------
   Star rating
   -------------------------------------------------------------------------- */
.eg-stars {
    display: inline-flex;
    gap: 2px;
    color: var(--eg-star);
}

.eg-stars .eg-icon {
    fill: currentColor;
    stroke: none;
}

/* ==========================================================================
   FAQ ACCORDION (shared component)
   ========================================================================== */
.eg-faq__list {
    max-width: 820px;
    margin-inline: auto;
    display: grid;
    gap: 12px;
}

.eg-faq__item {
    background: var(--eg-card);
    border: 1px solid var(--eg-border);
    border-radius: var(--eg-radius);
    overflow: hidden;
    transition: border-color .3s var(--eg-ease), box-shadow .3s var(--eg-ease);
}

.eg-faq__item[open] {
    border-color: rgba(var(--eg-brand-rgb), .4);
    box-shadow: var(--eg-shadow-sm);
}

.eg-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    color: var(--eg-heading);
    list-style: none;
    transition: color .25s var(--eg-ease);
}

/* Hide the native <details> triangle */
.eg-faq__q::-webkit-details-marker { display: none; }
.eg-faq__q::marker { content: ''; }

.eg-faq__q:hover { color: var(--eg-brand); }

.eg-faq__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--eg-brand-soft);
    color: var(--eg-brand);
    transition: transform .3s var(--eg-ease), background-color .3s var(--eg-ease),
                color .3s var(--eg-ease);
}

.eg-faq__item[open] .eg-faq__icon {
    transform: rotate(45deg);
    background: var(--eg-brand);
    color: var(--eg-brand-ink);
}

.eg-faq__a {
    padding: 0 24px 22px;
    font-size: .94rem;
    color: var(--eg-muted);
    line-height: 1.7;
    max-width: 68ch;
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   Sits directly under the header, above the hero. Rendered from the same data
   as the BreadcrumbList JSON-LD (see inc/eg-seo.php).
   -------------------------------------------------------------------------- */
.eg-crumbs {
    background: transparent;
    padding-block: 16px 0;
}

/* Breadcrumbs sit INSIDE the hero: on pages with a known hero we lift the trail
   out of the flow and float it over the top of the hero, so the hero rises to
   meet the header (no white strip between them) and the trail reads as part of
   the hero. Utility pages without one of these heroes (single, 404) keep the
   trail in normal flow above their content. */
.eg-main:has(.eg-dhero),
.eg-main:has(.eg-phero),
.eg-main:has(.eg-ohero) { position: relative; }

.eg-main:has(.eg-dhero) .eg-crumbs,
.eg-main:has(.eg-phero) .eg-crumbs,
.eg-main:has(.eg-ohero) .eg-crumbs {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    padding-block: 20px 0;
}

/* Dark full-bleed hero (services + diensten): the trail goes light on the photo. */
.eg-main:has(.eg-dhero) .eg-crumbs a { color: rgba(var(--eg-dark-ink-rgb), .72); }
.eg-main:has(.eg-dhero) .eg-crumbs a:hover { color: var(--eg-brand-light); }
.eg-main:has(.eg-dhero) .eg-crumbs [aria-current="page"] { color: var(--eg-dark-ink); }
.eg-main:has(.eg-dhero) .eg-crumbs .eg-crumbs__sep { color: rgba(var(--eg-dark-ink-rgb), .4); }

.eg-crumbs ol {
    list-style: none;
    margin: 0;
    /* A glass pill so the trail reads as an intentional element on the hero. */
    padding: 9px 18px;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--eg-border);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}

/* On the dark full-bleed hero the pill goes translucent-dark instead. */
.eg-main:has(.eg-dhero) .eg-crumbs ol {
    background: rgba(14, 16, 36, .34);
    border-color: rgba(255, 255, 255, .16);
    box-shadow: none;
}

.eg-crumbs li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    /* Long article titles must not push the trail off screen. */
    min-width: 0;
}

.eg-crumbs a {
    color: var(--eg-muted);
    text-decoration: none;
    transition: color .2s var(--eg-ease);
}

.eg-crumbs a:hover { color: var(--eg-brand); }

.eg-crumbs [aria-current="page"] {
    color: var(--eg-heading);
    font-weight: 700;
    /* The last crumb is the page title — truncate rather than wrap. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 42ch;
}

.eg-crumbs__sep {
    color: var(--eg-border);
    flex-shrink: 0;
}

/* A full-bleed dark hero sits right below: the trail needs light text there. */
.eg-crumbs--on-dark {
    background: var(--eg-dark);
    padding-block: 14px 0;
}

.eg-crumbs--on-dark a { color: rgba(var(--eg-dark-ink-rgb), .7); }
.eg-crumbs--on-dark a:hover { color: var(--eg-brand-light); }
.eg-crumbs--on-dark [aria-current="page"] { color: var(--eg-dark-ink); }
.eg-crumbs--on-dark .eg-crumbs__sep { color: rgba(var(--eg-dark-ink-rgb), .35); }

@media (max-width: 600px) {
    .eg-crumbs ol { font-size: .78rem; }
    .eg-crumbs [aria-current="page"] { max-width: 20ch; }
    .eg-main:has(.eg-dhero) .eg-crumbs,
    .eg-main:has(.eg-phero) .eg-crumbs,
    .eg-main:has(.eg-ohero) .eg-crumbs { padding-block: 12px 0; }
}

/* ==========================================================================
   COMPARISON TABLE + GREEN CARD (shared component)
   --------------------------------------------------------------------------
   "Vergelijking & Duurzaam": a two-column block — a Sterren-vs-other-movers
   table on the left, a green "we plant a tree" card on the right.

   Lives in eg-base.css because BOTH the home page and the service pages use
   it, and those two load different stylesheets (eg-home.css vs
   eg-page.css + eg-service.css). eg-base.css is the only file they share.
   Do not move it back into eg-home.css — the service pages would lose it.

   Colours are all tokens: --eg-brand for the comparison, --eg-accent for the
   eco card, so a re-skin recolours the whole block.
   ========================================================================== */
/*
 * Keep the page's light/tinted rhythm. The block asks for the tinted band, but
 * the services put it after whatever section that page happens to end its
 * content with — on several of them that is already a tinted one, and two
 * tinted bands in a row read as one very long grey block. When that happens,
 * fall back to the plain background so the alternation survives.
 */
.eg-section--alt + .eg-cmp-sec.eg-section--alt { background: var(--eg-bg); }

.eg-cmp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--eg-gap);
    align-items: stretch;
}

/* ---- Left: comparison ---- */
.eg-cmp {
    background: var(--eg-card);
    border: 1px solid var(--eg-border);
    border-radius: var(--eg-radius-lg);
    padding: 34px;
    box-shadow: var(--eg-shadow-sm);
}
.eg-cmp h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; margin-top: 8px; }
.eg-cmp__intro { margin-top: 12px; color: var(--eg-muted); }
.eg-cmp__table { margin-top: 24px; }

.eg-cmp__head,
.eg-cmp__row {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 12px;
    align-items: center;
}
.eg-cmp__head { margin-bottom: 8px; }
.eg-cmp__head-us,
.eg-cmp__head-them {
    padding: 9px 14px;
    border-radius: var(--eg-radius);
    font-weight: 800;
    font-size: .82rem;
    text-align: center;
}
.eg-cmp__head-us { background: var(--eg-brand); color: var(--eg-brand-ink); }
.eg-cmp__head-them { background: var(--eg-bg-alt); color: var(--eg-muted); }

.eg-cmp__row {
    padding: 12px 0;
    border-top: 1px solid var(--eg-border);
}
.eg-cmp__us {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 600;
    color: var(--eg-heading);
    font-size: .9rem;
    line-height: 1.35;
}
.eg-cmp__us svg { color: var(--eg-accent); flex: 0 0 auto; }
.eg-cmp__them {
    color: var(--eg-muted);
    font-size: .86rem;
    line-height: 1.35;
}

/* ---- Right: green card ---- */
.eg-green {
    background: var(--eg-accent);
    background-image: linear-gradient(160deg, var(--eg-accent), var(--eg-accent-dark));
    color: #fff;
    border-radius: var(--eg-radius-lg);
    padding: 34px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.eg-green__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .85);
}
.eg-green__title {
    margin-top: 12px;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.15;
    color: #fff;
}
.eg-green__text {
    margin-top: 14px;
    color: rgba(255, 255, 255, .88);
    line-height: 1.6;
}
.eg-green__list {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.eg-green__list li { display: flex; align-items: flex-start; gap: 14px; }
.eg-green__ic {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .22);
    color: #fff;
}
.eg-green__col { display: flex; flex-direction: column; }
.eg-green__item-title { font-weight: 800; }
.eg-green__item-text { font-size: .88rem; color: rgba(255, 255, 255, .8); margin-top: 2px; }
/* Photo fills the bottom of the card, bleeding to its edges, and the green
   fades DOWN into it so there's no hard seam and no empty strip. A width:auto
   block absorbs the negative side margins → true full-bleed (an <img> can't). */
.eg-green__photo {
    position: relative;
    margin: 28px -34px -34px;   /* top gap, then bleed left/right/bottom to the card edges */
    height: 300px;
    overflow: hidden;
}
.eg-green__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.eg-green__photo::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Green at the top of the photo fading to clear ~halfway down. */
    background: linear-gradient(to bottom,
                rgba(var(--eg-accent-dark-rgb), 1) 0%,
                rgba(var(--eg-accent-dark-rgb), .6) 22%,
                rgba(var(--eg-accent-dark-rgb), 0) 55%);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .eg-main *,
    .eg-main *::before,
    .eg-main *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    :root { --eg-section-y: 64px; }

    /* Comparison + green card stack. Here rather than in eg-home.css, since
       the service pages use the same component. */
    .eg-cmp-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }
}

@media (max-width: 600px) {
    :root { --eg-section-y: 52px; }

    .eg-container { padding-inline: 18px; }
    .eg-head { margin-bottom: 34px; }
    .eg-btn { padding: 14px 22px; }
}

/* --------------------------------------------------------------------------
   LANGUAGE SWITCHER (NL / EN)
   A real link pair — one per language — not a JavaScript translation widget.
   Uses the same colour tokens as the rest of the site, so a re-skin recolours
   it automatically. Lives in the header; also reused in the mobile overlay.
   -------------------------------------------------------------------------- */
.eg-langsw {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--eg-border);
    border-radius: 999px;
    background: var(--eg-bg-alt);
    line-height: 1;
}

.eg-langsw__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
    color: var(--eg-muted);
    transition: color .2s ease, background-color .2s ease;
}

.eg-langsw__item:hover {
    color: var(--eg-heading);
}

.eg-langsw__item.is-active {
    color: var(--eg-brand-ink);
    background: var(--eg-brand);
}

/* Overlay variant (transparent_contact header): larger, centred. */
.eg-langsw--overlay {
    gap: 6px;
    padding: 6px;
}

.eg-langsw--overlay .eg-langsw__item {
    min-width: 64px;
    padding: 12px 20px;
    font-size: 16px;
}