/* ---------------------------------------------------------------------------
   Gedeelde stijl voor de juridische pagina's (cookiebeleid, privacybeleid).

   Bewust losgekoppeld van index.html: die pagina houdt zijn eigen inline
   <style>, zodat deze extractie de live homepage niet kan breken. De tokens
   hieronder zijn overgenomen uit index.html en moeten daarmee meebewegen.
--------------------------------------------------------------------------- */
@font-face{
    font-family:'Inter';
    src:url('../fonts/Inter-Variable.woff2') format('woff2-variations'), url('../fonts/Inter-Variable.woff2') format('woff2');
    font-weight:100 900; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'Merriweather';
    src:url('../fonts/Merriweather-Light.woff2') format('woff2');
    font-weight:300; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'Merriweather';
    src:url('../fonts/Merriweather-Regular.woff2') format('woff2');
    font-weight:400; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'Merriweather';
    src:url('../fonts/Merriweather-Bold.woff2') format('woff2');
    font-weight:700; font-style:normal; font-display:swap;
  }

  :root{
    --ink:#243135;
    --ink-40: rgba(36,49,53,.4);
    --green:#113D35;
    --green-light:#CFD8D7; /* Den 20% tint (brand steunkleur) */
    --green-hover:#243135; /* Houtskool zwart — hover shift stays within the palette */
    --cream:#EFECE9;
    --mustard:#C59E2D; /* Mosterd goud — the only activatiekleur */
    --white:#FFFFFF;
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  body{ background:var(--white); color:var(--ink); }

  .h1{font-family:'Merriweather',serif; font-weight:400; font-size:32px; line-height:1.2; letter-spacing:0; color:var(--ink);}
  .h2{font-family:'Merriweather',serif; font-weight:400; font-size:28px; line-height:1.2; letter-spacing:0; color:var(--ink);}
  .h3{font-family:'Merriweather',serif; font-weight:400; font-size:24px; line-height:1.3; letter-spacing:0; color:var(--ink);}
  .h6{font-family:'Inter',sans-serif; font-weight:500; font-size:12.5px; line-height:1.3; letter-spacing:.1em; text-transform:uppercase;}
  .body-txt{font-family:'Inter',sans-serif; font-weight:400; font-size:16px; line-height:1.6; color:var(--ink);}
  @media (min-width: 768px){
    .h1{font-size:48px;}
    .h2{font-size:34px;}
    .h3{font-size:28px;}
    .h6{font-size:13px; letter-spacing:.12em;}
    .body-txt{font-size:17px;}
  }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.9rem 1.9rem; border-radius:200px;
    font-family:'Inter',sans-serif; font-weight:600; font-size:14px; letter-spacing:.03em;
    transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-spring), background-color .25s ease, color .25s ease;
    will-change: transform;
    border:0; cursor:pointer;
  }
  .btn:active{ transform: scale(.97); }
  .btn-primary{ background:var(--green); color:#fff; }
  .btn-primary:hover{ background:var(--green-hover); transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(17,61,53,.55); }
  .btn-primary:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

  .prose-link{ color:var(--green); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
  .prose-link:hover{ color:var(--ink); }
  .prose-link:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

  /* Footerlinks: gedempt wit, naar zuiver wit bij hover. */
  .footer-link{ color:rgba(255,255,255,.7); transition:color .3s ease; }
  .footer-link:hover{ color:#fff; }
  .footer-link:focus-visible{ color:#fff; outline:2px solid #fff; outline-offset:3px; }

  /* Zelfde stijl als de menu-items in de topnav, in hun lichte-header-staat. */
  .nav-serif{ font-family:'Merriweather',serif; font-weight:300; font-size:17px; letter-spacing:0; }

  .link-underline{ position:relative; }
  .link-underline::after{
    content:''; position:absolute; left:0; right:100%; bottom:-4px; height:1.5px; background:var(--green-light);
    transition: right .35s var(--ease-spring);
  }
  .link-underline:hover::after{ right:0; }

  .browser-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.75rem; }

  /* ---------------------------------------------------------------------
     Audit-tabel van CookieYes.

     Het script voegt deze markup pas ná het renderen in en injecteert
     daarbij zelf een <style id="cky-audit-table-style"> in de head. Die
     staat later in de cascade, dus class-selectors met gelijke
     specificiteit verliezen ervan. Daarom hangt alles hieronder aan de
     id #cky-tabel, die wint ongeacht de volgorde.

     Die stylesheet wordt pas at runtime opgehaald en staat niet in script.js,
     dus we weten niet of hij zelf !important gebruikt. Zou dat zo zijn, dan
     verliest een gewone id-selector alsnog — en met een witte th-achtergrond
     onder witte tekst wordt de kop onleesbaar. Vandaar !important hier: samen
     met de id-selector wint dit hoe dan ook.
  --------------------------------------------------------------------- */
  #cky-tabel .cky-cookie-des-table{ list-style:none !important; padding:0 !important; margin:0 !important; }
  #cky-tabel .cky-cookie-des-table > li{ margin:0 0 3rem 0 !important; }
  #cky-tabel .cky-cookie-des-table > li:last-child{ margin-bottom:0 !important; }

  #cky-tabel h3{
    font-family:'Merriweather',serif !important; font-weight:400 !important; font-size:24px !important;
    line-height:1.3 !important; color:var(--ink) !important; margin:0 0 .5rem 0 !important;
    text-transform:capitalize !important;
  }
  #cky-tabel .cky-category-des{
    font-family:'Inter',sans-serif !important; font-weight:400 !important; font-size:16px !important;
    line-height:1.6 !important; color:var(--ink) !important; margin:0 0 1.25rem 0 !important; max-width:65ch;
  }
  #cky-tabel .cky-empty-cookies-text{
    font-family:'Inter',sans-serif !important; font-size:16px !important; line-height:1.6 !important;
    color:var(--ink) !important; margin:0 !important;
  }

  #cky-tabel .cky-table-wrapper{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    border:1px solid rgba(36,49,53,.15) !important; border-radius:14px !important;
  }
  #cky-tabel table, #cky-tabel .cky-cookie-audit-table{
    width:100% !important; border-collapse:collapse !important; margin:0 !important;
    font-family:'Inter',sans-serif !important; font-size:15px !important; line-height:1.55 !important;
    background:var(--white) !important;
  }
  #cky-tabel th, #cky-tabel .cky-cookie-audit-table th{
    background:var(--green) !important; color:#fff !important;
    font-family:'Inter',sans-serif !important; font-weight:600 !important; font-size:12.5px !important;
    letter-spacing:.08em !important; text-transform:uppercase !important;
    text-align:left !important; padding:14px 18px !important; white-space:nowrap !important; border:0 !important;
  }
  #cky-tabel td, #cky-tabel .cky-cookie-audit-table td{
    color:var(--ink) !important; background:transparent !important;
    font-family:'Inter',sans-serif !important; font-size:15px !important; line-height:1.55 !important;
    padding:14px 18px !important; vertical-align:top !important;
    border:0 !important; border-top:1px solid rgba(36,49,53,.12) !important;
  }
  #cky-tabel tbody tr:nth-child(even) td{ background:var(--cream) !important; }

  /* CookieYes levert beschrijvingen als <p> en style die apart (td p → 12px).
     Zonder deze regels vallen de alinea's terug op hun opmaak. */
  #cky-tabel .cky-category-des p{
    font-family:'Inter',sans-serif !important; font-size:16px !important; line-height:1.6 !important;
    color:var(--ink) !important; margin:0 0 .75rem 0 !important;
  }
  #cky-tabel .cky-category-des p:last-child{ margin-bottom:0 !important; }
  #cky-tabel td p{
    font-family:'Inter',sans-serif !important; font-size:15px !important; line-height:1.55 !important;
    color:var(--ink) !important; margin:0 0 .5rem 0 !important;
  }
  #cky-tabel td p:last-child{ margin-bottom:0 !important; }

  @media (min-width: 768px){
    #cky-tabel h3{ font-size:28px; }
    #cky-tabel .cky-category-des,
    #cky-tabel .cky-category-des p{ font-size:17px !important; }
  }