/*
 * Eigen stylesheet voor de publieke Plandrox-site.
 *
 * Vervangt het Arcana-sjabloon van HTML5 UP. De opzet (donkere menubalk, brede hero, kolomfooter)
 * is een gangbaar patroon, maar alle regels hieronder zijn zelf geschreven — er is geen CSS uit dat
 * sjabloon overgenomen of hernoemd.
 *
 * Font Awesome (assets/css/fontawesome-all.min.css) is een los project met een eigen licentie en
 * blijft gewoon in gebruik voor de iconen.
 */

:root {
    --plx-donker: #262a31;
    --plx-donker-diep: #1b1e24;
    --plx-accent: #2eb8e6;
    --plx-accent-diep: #1a97c2;
    --plx-tekst: #4a4f57;
    --plx-tekst-zacht: #868d97;
    --plx-titel: #2f333a;
    --plx-lijn: #e3e6ea;
    --plx-vlak: #f5f6f8;
    --plx-wit: #ffffff;

    --plx-breedte: 72rem;
    --plx-radius: 0.3rem;
    --plx-schaduw: 0 1px 3px rgba(0, 0, 0, .07);
}

/* ---------- basis ---------- */

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

html { font-size: 16px; }

body {
    margin: 0;
    background: var(--plx-wit);
    color: var(--plx-tekst);
    font-family: "Source Sans Pro", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .6em;
    color: var(--plx-titel);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

h1 { font-size: 2.4rem; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1.4em; }

a {
    color: var(--plx-accent-diep);
    text-decoration: none;
    transition: color .15s ease;
}

a:hover { color: var(--plx-accent); }

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

hr {
    border: 0;
    border-top: 1px solid var(--plx-lijn);
    margin: 2.5rem 0;
}

.plx-container {
    width: 100%;
    max-width: var(--plx-breedte);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ---------- knoppen ----------
   ".button" heet bewust zo: die klasse zit in bestaande CMS-inhoud en in vrije HTML-blokken. */

.button,
.plx-knop {
    display: inline-block;
    padding: .7em 1.8em;
    border: 0;
    border-radius: var(--plx-radius);
    background: var(--plx-accent);
    color: var(--plx-wit);
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}

.button:hover,
.plx-knop:hover {
    background: var(--plx-accent-diep);
    transform: translateY(-1px);
}

.button.primary { background: var(--plx-accent-diep); }
.button.primary:hover { background: var(--plx-accent); }

/* ---------- kop van de site ---------- */

.plx-merkbalk {
    background: var(--plx-wit);
    border-bottom: 1px solid var(--plx-lijn);
    padding: 1.1rem 0;
}

.plx-merkbalk__inhoud {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.plx-merkbalk__naam {
    margin: 0;
    font-size: 1.6rem;
    letter-spacing: .02em;
}

.plx-merkbalk img { max-height: 3rem; }

/* ---------- menubalk ---------- */

.plx-menubalk {
    background: var(--plx-donker);
    border-bottom: 3px solid var(--plx-accent);
}

.plx-menubalk__inhoud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: .3rem;
    padding-bottom: .3rem;
}

.plx-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.plx-menu > li { position: relative; }

.plx-menu > li > a {
    display: block;
    padding: .6rem 1rem;
    color: rgba(255, 255, 255, .78);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.plx-menu > li > a:hover,
.plx-menu > li.is-actief > a {
    color: var(--plx-wit);
    background: rgba(255, 255, 255, .07);
}

/* Uitklapmenu zonder JavaScript: het submenu hangt aan hover en toetsenbordfocus. */
.plx-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    min-width: 14rem;
    margin: 0;
    padding: .4rem 0;
    list-style: none;
    background: var(--plx-donker-diep);
    border-radius: 0 0 var(--plx-radius) var(--plx-radius);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
}

.plx-menu > li:hover > .plx-submenu,
.plx-menu > li:focus-within > .plx-submenu {
    opacity: 1;
    visibility: visible;
}

.plx-submenu a {
    display: block;
    padding: .5rem 1rem;
    color: rgba(255, 255, 255, .78);
    font-size: 1rem;
}

.plx-submenu a:hover {
    color: var(--plx-wit);
    background: rgba(255, 255, 255, .07);
}

/* Menuschakelaar: op brede schermen onzichtbaar, op smalle schermen de hamburgerknop. */
.plx-menu-schakelaar { display: none; }

.plx-menu-knop {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: .28rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: .6rem;
    cursor: pointer;
}

.plx-menu-knop span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .85);
}

/* ---------- hero ---------- */

.plx-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 24rem;
    color: var(--plx-wit);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Doorschijnende band over de volle breedte, onderin de banner. */
.plx-hero__balk {
    width: 100%;
    padding: 1.4rem 0;
    background: rgba(0, 0, 0, .65);
}

/* Tekst en knop naast elkaar. flex-wrap staat uit: wordt de tekst te lang, dan breekt die binnen
   zichzelf af en blijft de knop ernaast staan. Pas onder de mobiele grens komen ze onder elkaar. */
.plx-hero__inhoud {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1.5rem;
    width: 100%;
    max-width: var(--plx-breedte);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.plx-hero h2 {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    color: inherit;
    font-size: 1.7rem;
}

.plx-hero .button { flex: 0 0 auto; }

.plx-uitlijn--links { justify-content: flex-start; }
.plx-uitlijn--midden { justify-content: center; }
.plx-uitlijn--rechts { justify-content: flex-end; }

.plx-hero h2 em { font-style: normal; font-weight: 400; }

/* ---------- vlakken ---------- */

.plx-vlak { padding: 4rem 0; }
.plx-vlak--grijs { background: var(--plx-vlak); }
.plx-vlak--strak { padding-top: 2rem; padding-bottom: 2rem; }

/* ---------- kenmerken-grid ---------- */

.plx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 2.5rem;
}

.plx-kenmerk { text-align: center; }
.plx-kenmerk h3 { margin-bottom: .4em; }
.plx-kenmerk p { color: var(--plx-tekst-zacht); margin-bottom: 0; }

/* Ronde icoonknop. ".icon major solid fa-…" staat als tekst in bestaande CMS-inhoud, dus die
   klassennamen blijven ondersteund; de opmaak eronder is van onszelf. */
.plx-kenmerk .icon,
.plx-kenmerk i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 1.2rem;
    border-radius: 50%;
    background: var(--plx-accent);
    color: var(--plx-wit);
    font-size: 1.6rem;
}

/* Font Awesome verwacht zelf een stijl-klasse (fas/far). Oudere inhoud schrijft "icon solid",
   dus die combinatie wijzen we hier naar het juiste lettertype. */
.icon.solid::before,
.icon.solid {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

/* ---------- afbeelding met tekst ---------- */

.plx-duo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 2.5rem;
}

.plx-duo__item {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.plx-duo__item img {
    flex: 0 0 8rem;
    width: 8rem;
    border-radius: var(--plx-radius);
}

.plx-duo__item h3 { margin-bottom: .3em; }
.plx-duo__item p { margin-bottom: 0; color: var(--plx-tekst-zacht); }

/* ---------- grote titel ---------- */

.plx-titelblok { text-align: center; }

.plx-titelblok h2 {
    font-size: 2.2rem;
    font-weight: 300;
    color: var(--plx-titel);
}

.plx-titelblok p {
    max-width: 46rem;
    margin: 0 auto;
    padding-top: 1.5rem;
    border-top: 1px solid var(--plx-lijn);
    color: var(--plx-tekst-zacht);
    font-size: 1.15rem;
    font-weight: 300;
}

/* ---------- oproepbalk ---------- */

.plx-oproep { padding: 1.75rem 0; }

.plx-oproep__inhoud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
}

.plx-oproep h2 {
    margin: 0;
    color: inherit;
    font-size: 1.7rem;
}

/* ---------- formulieren ---------- */

/* Smaller dan de container, maar links uitgelijnd op dezelfde kolomrand als het menu. */
.plx-formulier { max-width: 40rem; }

.plx-veld { margin-bottom: 1.35rem; }

.plx-veld__label {
    display: block;
    margin-bottom: .4rem;
    color: var(--plx-titel);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.4;
}

.plx-verplicht {
    margin-left: .15rem;
    color: var(--plx-accent-diep);
}

.plx-invoer {
    display: block;
    width: 100%;
    padding: .7rem .9rem;
    border: 1px solid #cfd5dc;
    border-radius: var(--plx-radius);
    background: var(--plx-wit);
    color: var(--plx-tekst);
    font: inherit;
    line-height: 1.5;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.plx-invoer:hover { border-color: #b4bdc7; }

.plx-invoer:focus {
    outline: none;
    border-color: var(--plx-accent);
    box-shadow: 0 0 0 3px rgba(46, 184, 230, .2);
}

textarea.plx-invoer {
    min-height: 9rem;
    resize: vertical;
}

.plx-veld__hulp {
    display: block;
    margin-top: .35rem;
    color: var(--plx-tekst-zacht);
    font-size: .85rem;
}

/* Invulveld links, plaatje en vernieuwknop rechts. Op een smal scherm schuift het plaatje eronder. */
.plx-controlecode {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}

.plx-controlecode img {
    flex: 0 0 auto;
    width: 200px;
    height: 64px;
    border: 1px solid var(--plx-lijn);
    border-radius: var(--plx-radius);
}

.plx-controlecode__vernieuw {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid #cfd5dc;
    border-radius: var(--plx-radius);
    background: var(--plx-wit);
    color: var(--plx-tekst);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.plx-controlecode__vernieuw:hover {
    border-color: var(--plx-accent);
    color: var(--plx-accent-diep);
}

.plx-invoer--code {
    flex: 0 1 200px;
    width: 200px;
    height: 64px;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.plx-formulier__acties { margin-top: 1.75rem; }

.plx-formulier__fout {
    padding: .75rem 1rem;
    border-left: 3px solid #d9534f;
    border-radius: var(--plx-radius);
    background: #fdf1f0;
    color: #a33a36;
}

.plx-formulier__bevestiging {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-left: 3px solid #3aa76d;
    border-radius: var(--plx-radius);
    background: #effaf4;
    color: #2d6b49;
}

.plx-formulier__bevestiging i {
    margin-top: .2rem;
    font-size: 1.5rem;
}

/* Het lokveld voor bots: buiten beeld, maar niet display:none (dat slaan sommige bots over). */
.plx-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- inhoud met zijbalk ---------- */

.plx-kolommen {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: start;
}

/* ---------- footer ---------- */

.plx-footer {
    background: var(--plx-vlak);
    border-top: 1px solid var(--plx-lijn);
    padding: 3.5rem 0 0;
    font-size: .95rem;
}

.plx-footer__kolommen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 2.5rem;
}

.plx-footer h3 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--plx-titel);
}

.plx-footer p { color: var(--plx-tekst-zacht); }

.plx-linklijst {
    margin: 0;
    padding: 0;
    list-style: none;
}

.plx-linklijst li { padding: .25rem 0; }

.plx-footer__onderkant {
    margin-top: 3rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--plx-lijn);
    color: var(--plx-tekst-zacht);
    font-size: .875rem;
}

.plx-footer__onderkant ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    justify-content: center;
}

/* ---------- rich text uit de editor ---------- */

/* De 52rem-smalle leeskolom hoort alleen bij de layout mét zijbalk (.plx-kolommen): daar staat
   .plx-inhoud naast de zijbalk in een 2fr-kolom en moet niet edge-to-edge lopen. RichText-/
   CustomHtml-blokken hergebruiken dezelfde klasse voor hun eigen wrapper buiten die layout om (dus
   ook op pagina's zonder zijbalk) — zonder deze scoping zou de max-width daar ten onrechte ook gelden. */
.plx-kolommen .plx-inhoud { max-width: 52rem; }
.plx-inhoud h2 { margin-top: 1.5em; }
.plx-inhoud ul, .plx-inhoud ol { padding-left: 1.4rem; }
.plx-inhoud li { margin-bottom: .4em; }

/* ---------- smalle schermen ---------- */

@media (max-width: 60rem) {
    .plx-kolommen { grid-template-columns: 1fr; }
}

@media (max-width: 48rem) {
    h1 { font-size: 1.9rem; }
    h2 { font-size: 1.55rem; }

    .plx-menubalk__inhoud {
        justify-content: flex-start;
        gap: 0;
        padding-top: .35rem;
        padding-bottom: .35rem;
    }

    .plx-menu-knop { display: flex; }

    /* Beide menu's (pagina's en account) klappen samen open onder de knop. */
    .plx-menu {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .plx-menu-schakelaar:checked ~ .plx-menu { display: flex; }

    .plx-menu > li > a {
        padding: .75rem .25rem;
        border-top: 1px solid rgba(255, 255, 255, .1);
    }

    .plx-submenu a { padding: .55rem .25rem .55rem 1.25rem; }

    .plx-hero { min-height: 15rem; }
    .plx-hero h2 { font-size: 1.35rem; }

    /* Zelfde grens als het hamburgermenu: hier pas gaat de knop onder de tekst. */
    .plx-hero__inhoud { flex-direction: column; gap: 1rem; }
    .plx-uitlijn--links { align-items: flex-start; }
    .plx-uitlijn--midden { align-items: center; }
    .plx-uitlijn--rechts { align-items: flex-end; }
    .plx-oproep__inhoud { gap: 1rem; }
    .plx-vlak { padding: 2.75rem 0; }
    .plx-duo__item { flex-direction: column; }
    .plx-duo__item img { width: 100%; flex-basis: auto; }

    /* Zonder hover op aanraakschermen: submenu's gewoon uitgeklapt tonen. */
    .plx-submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        background: transparent;
        padding: 0 0 .4rem;
    }
}

/* Uitlijning uit tekstblokken die nog met de oude editor (Quill) zijn gemaakt. De stylesheets van Quill zijn weg
   (2026-10-10); deze vier regels houden zulke blokken uitgelijnd tot ze opnieuw opgeslagen zijn. */
.plx-inhoud .ql-align-center { text-align: center; }
.plx-inhoud .ql-align-right { text-align: right; }
.plx-inhoud .ql-align-justify { text-align: justify; }