/* ============================================================
   ProcesIQ / Zenzo, gedeelde CSS voor alle public-site pagina's

   Bevat alleen rules die op meerdere pagina's voorkomen en eerder
   tot drift leidden:
   - Footer (.foot, .foot-brand, .foot-col, .foot-bottom)
   - Responsive tabellen op legal-pagina's

   Deze file is single source of truth. Pagina's die dit gebruiken
   includen het via <link rel="stylesheet" href="/css/site-shared.css">
   en mogen GEEN eigen .foot* of <table> mobile-CSS meer hebben.

   Aannames over CSS-vars die in elke pagina's <style> gedefinieerd zijn:
     --forest, --forest-70, --forest-55, --forest-14, --forest-08,
     --paper, --bone, --clay, --mono
   ============================================================ */

/* ---------- Footer ---------- */
footer {
    background: var(--bone);
    border-top: 1px solid var(--forest-14);
    padding: 56px 32px 0;
    margin-top: 80px;
}

.foot {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
}

.foot-brand {
    max-width: 340px;
}
.foot-brand .logo {
    margin-bottom: 14px;
}
.foot-brand p {
    font-size: 13.5px;
    color: var(--forest-70);
    line-height: 1.6;
    margin: 10px 0 0;
}
.foot-info-line {
    font-size: 13.5px;
    color: var(--forest-70);
    line-height: 1.6;
    margin-top: 6px;
}

.foot-col .foot-col-title {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--forest);
    margin: 0 0 14px;
    font-weight: 500;
}
.foot-col a {
    display: block;
    color: var(--forest-70);
    font-size: 13.5px;
    margin-bottom: 8px;
    text-decoration: none;
    transition: color .15s;
}
.foot-col a:hover {
    color: var(--forest);
}

.foot-bottom {
    max-width: 1240px;
    margin: 40px auto 0;
    padding: 24px 0 32px;
    border-top: 1px solid var(--forest-14);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--forest-55);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.foot-legal a {
    color: var(--forest-70);
    margin-left: 16px;
    text-decoration: none;
}
.foot-legal a:hover {
    color: var(--forest);
}

@media (max-width: 960px) {
    footer { padding: 48px 24px 0; }
    .foot { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 640px) {
    footer { padding: 40px 20px 0; margin-top: 60px; }
    .foot { grid-template-columns: 1fr; gap: 28px; }
    .foot-bottom {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 32px;
    }
    .foot-legal { margin-top: 4px; }
    .foot-legal a { margin-left: 0; margin-right: 16px; }
}

/* ---------- Responsive tables (legal-pagina's) ----------
   Op mobile collapsen we elke <tr> naar een card waar de eerste
   <td> de titel is en de overige cellen daar onder stacken. Headers
   verbergen we want de eerste-cel-tekst impliceert het onderwerp. */
@media (max-width: 640px) {
    table {
        background: transparent;
        border: none;
        border-radius: 0;
        font-size: 14px;
    }
    table thead { display: none; }
    table, table tbody, table tr, table td { display: block; width: 100%; }
    table tr {
        border: 1px solid var(--forest-14);
        border-radius: 10px;
        padding: 14px 16px;
        margin-bottom: 12px;
        background: var(--paper);
    }
    table td {
        padding: 4px 0 !important;
        border: none !important;
    }
    table td:first-child {
        font-weight: 500;
        color: var(--forest);
        font-size: 15px;
        margin-bottom: 6px;
        padding-bottom: 6px !important;
        border-bottom: 1px solid var(--forest-08) !important;
    }
}

/* ---------- Skip-to-content link (accessibility) ---------- */
/* Verborgen tot keyboard-focus, springt dan zichtbaar in beeld linksboven.
   Voor screenreader + keyboard-navigatie zodat gebruikers de header
   kunnen overslaan en direct naar de hoofdcontent gaan. */
.skip-link {
    position: absolute;
    top: -40px;
    left: 8px;
    background: var(--forest);
    color: var(--bone);
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    z-index: 100;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 8px;
    outline: 2px solid var(--clay);
    outline-offset: 2px;
}

/* ---------- Focus-visible defaults ---------- */
/* Toon focus-ring alleen bij keyboard-navigatie (geen ring bij muis-klik).
   Browsers met :focus-visible support handelen dit automatisch af; we
   versterken de styling. */
:focus-visible {
    outline: 2px solid var(--clay);
    outline-offset: 2px;
    border-radius: 4px;
}
/* Form-elementen hebben hun eigen focus-styling die we niet willen overrulen */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
}

/* ---------- Nav: Mijn Zenzo portal-knop ----------
   .nav-portal = de ghost-button in de header die naar /portal/ linkt.
   white-space:nowrap zodat de label nooit over twee regels wrapt.
   Op viewport <=640px verbergen we 'm: logo + 2 buttons passen anders niet
   binnen 375px zonder overlap, en de primaire CTA blijft prominent.

   !important op de mobile-rule want elke pagina heeft een eigen inline
   <style> block met ".btn{display:inline-flex}" dat in de cascade kan
   winnen van deze gedeelde stylesheet. */
.nav-portal {
    white-space: nowrap;
}
@media (max-width: 640px) {
    .nav-portal {
        display: none !important;
    }
}