/* ==========================================================================
   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);
}

/* --------------------------------------------------------------------------
   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); }

/* --------------------------------------------------------------------------
   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; }
}

/* --------------------------------------------------------------------------
   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; }
}

@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;
}