/* Cookiebanner: exacte kopie van de banner op era.be (Drupal EU Cookie Compliance, thema rocketship_theme_starter).
   Maten en kleuren gemeten op de live site. Alles zit onder .ec, dus dit bestand raakt de rest van de pagina niet.
   Verwijderen: zie de opmerking in index.html bij "COOKIEBANNER + TRACKING". */

.ec{position:fixed;inset:0;z-index:99999;display:flex;justify-content:center;align-items:center;overflow-y:auto;padding:20px 0;font-family:"Gotham",Arial,sans-serif;font-size:1rem;line-height:1.5625rem;color:var(--era-text,#6E6F72);text-align:left}
.ec[hidden]{display:none}
.ec::before{content:"";position:fixed;inset:0;background:#000;opacity:.5}
html.ec-lock{overflow:hidden}

.ec__dialog{position:relative;z-index:1;box-sizing:border-box;width:calc(100vw - 40px);max-width:37.5rem;margin:auto 20px;padding:3.75rem 1.875rem 1.875rem;overflow:hidden;background:#fff}
.ec__dialog:focus{outline:none}

/* Blauwe kop die tot de rand van het venster loopt */
.ec__head{position:relative;margin-bottom:1.875rem;padding-bottom:1.875rem;color:#fff}
.ec__head::before{content:"";position:absolute;z-index:-1;top:-3.75rem;bottom:0;left:-50px;width:calc(100% + 100px);background:var(--era-blue,#000085)}
.ec__title{margin:0 0 1.875rem;font-size:1.625rem;font-weight:800;line-height:1.3;text-transform:uppercase;hyphens:none;color:#fff}
.ec__text{margin:0}
.ec__text a{color:#fff;text-decoration:underline;text-decoration-thickness:1px}

/* Categorieën (verschijnen na "Cookies beheren") */
.ec__cats{margin:0}
.ec__cats[hidden]{display:none}
.ec__cat{display:flex;justify-content:space-between;margin-bottom:20px}
.ec__cat--locked{opacity:.5}
.ec__cat-label{display:flex;align-items:center;font-weight:700}
.ec__state{display:none;margin-left:10px;font-size:10px;text-transform:uppercase;color:#00B99B}
.ec__state.is-on{display:inline-block}
.ec__cat-desc{margin:0}
.ec__switch{position:relative;display:inline-block;flex-shrink:0;width:45px;height:23px;margin-left:20px}
.ec__switch input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;opacity:0}
.ec__toggle{position:absolute;inset:0;border-radius:23px;background:#ADADAD;cursor:pointer;transition:.2s}
.ec__toggle::before{content:"";position:absolute;bottom:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:.2s}
.ec__switch input:checked + .ec__toggle{background:#00B99B}
.ec__switch input:checked + .ec__toggle::before{transform:translateX(22px)}
.ec__switch input:disabled + .ec__toggle{pointer-events:none}
.ec__switch input:focus-visible + .ec__toggle{outline:2px solid #000;outline-offset:2px}

/* Knoppen: rood met donker hoekje dat bij hover uitschuift (era.be .button) */
.ec__buttons{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:1.875rem}
.ec__btn{position:relative;z-index:0;display:block;width:100%;box-sizing:border-box;overflow:hidden;border:0;border-radius:0;padding:.9375rem 1.5625rem;background:var(--era-red,#D60A29);color:#fff;font:700 1rem/1.5625rem "Gotham",Arial,sans-serif;text-align:center;text-decoration:none;cursor:pointer;transition:background .75s cubic-bezier(.4,0,0,1),color .75s cubic-bezier(.4,0,0,1)}
.ec__btn::before{content:"";position:absolute;z-index:-1;inset:0;width:2.5rem;background:linear-gradient(215deg,var(--era-red-dark,#950E34) 7.5%,var(--era-red,#D60A29) 53%);clip-path:polygon(0 0,0 100%,100% 0);transition:all .75s cubic-bezier(.4,0,0,1)}
.ec__btn:hover::before,.ec__btn:active::before,.ec__btn:focus-visible::before{bottom:-7.5rem;width:6.25rem}
.ec__btn:focus-visible{outline:2px solid #000}
.ec__btn[hidden]{display:none}

/* Link in de voettekst om de keuze later te wijzigen */
/* Ziet eruit als de andere links op de pagina (rood, onderlijnd) */
.ec-open{padding:0;border:0;background:none;color:var(--era-red,#D60A29);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:color .75s cubic-bezier(.4,0,0,1)}
.ec-open:hover{color:var(--era-red-dark,#950E34)}
.ec-open:focus-visible{outline:3px solid var(--era-blue,#000085);outline-offset:2px}

@media (prefers-reduced-motion:reduce){.ec__btn,.ec__btn::before,.ec__toggle,.ec__toggle::before{transition:none}}