/* ==================================================================
   Cloud Lift Off: gedeelde opmaak voor alle pagina's
   Wordt als laatste geladen: zoeken, donker thema, toegankelijkheid en aanpassingen.
   ================================================================== */

/* Zoekfunctie cloudliftoff.nl */
.search-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
  margin-left: 6px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: color .2s, background .2s;
}
.search-toggle svg {
  width: 20px;
  height: 20px;
}
.search-toggle:hover, .search-toggle.active {
  color: var(--yellow);
}
header.scrolled .search-toggle {
  color: var(--text);
}
header.scrolled .search-toggle:hover,
header.scrolled .search-toggle.active {
  color: var(--yellow-dark);
}
.search-panel {
  position: fixed;
  top: 86px;
  right: 24px;
  transform: translateY(-8px);
  width: min(420px,calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(10,15,36,.22);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 140;
}
.search-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.search-box>svg {
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex-shrink: 0;
}
.search-box input::-webkit-search-cancel-button {
  display: none;
}
.search-box input {
  flex: 1;
  border: 0;
  outline: 0;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: transparent;
  padding: 4px 0;
  min-width: 0;
}
.search-close {
  background: none;
  border: 0;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.search-close:hover {
  color: var(--text);
}
.search-results {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 60vh;
  overflow-y: auto;
}
.search-results li a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
}
.search-results li a:hover, .search-results li a.active {
  background: var(--bg-alt);
}
.search-results strong {
  font-size: .95rem;
  font-weight: 600;
}
.search-results strong mark {
  background: rgba(247,181,0,.35);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
.search-results span {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.45;
}
.search-empty {
  padding: 14px 12px;
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.5;
}
/* Cookie consent banner (AVG) */
.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: min(380px,calc(100vw - 40px));
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(10,15,36,.18);
  padding: 20px;
  z-index: 200;
  font-family: 'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  display: none;
}
.cookie-banner.visible {
  display: block;
}
.cookie-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cookie-banner p {
  margin: 0;
  font-size: .9rem;
  color: var(--text);
  line-height: 1.5;
}
.cookie-banner a {
  color: var(--yellow-dark);
  text-decoration: underline;
}
.cookie-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cookie-btn {
  border: 0;
  border-radius: 10px;
  padding: 10px 18px;
  font-family: 'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  transition: opacity .2s;
  flex: 1;
  min-width: 100px;
}
.cookie-accept {
  background: var(--yellow);
  color: #1a1200;
}
.cookie-deny {
  background: var(--bg-alt);
  color: var(--muted);
  border: 1px solid var(--border);
}
.cookie-btn:hover {
  opacity: .85;
}
@media(max-width:480px) {
  .cookie-banner {
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
  }
  .cookie-inner {
    flex-direction: column;
  }
}
[data-theme="dark"] {
  --bg: #0a0f24;
  --bg-alt: #101737;
  --card: #141b33;
  --border: #2a3050;
  --text: #e8eaf0;
  --muted: #9aa0b5;
  --white: #ffffff;
}
[data-theme="dark"] body {
  background: var(--bg);
}
[data-theme="dark"] .section-alt {
  background: var(--bg-alt);
}
[data-theme="dark"] .search-panel {
  background: var(--card);
  border-color: var(--border);
}
[data-theme="dark"] .search-results li a:hover,
[data-theme="dark"] .search-results li a.active {
  background: var(--bg-alt);
}
[data-theme="dark"] .search-box input {
  color: var(--text);
}
[data-theme="dark"] .cookie-banner {
  background: var(--card);
  border-color: var(--border);
}
[data-theme="dark"] header.scrolled,
[data-theme="dark"] header.menu-open {
  background: rgba(10,15,36,.96);
  backdrop-filter: blur(12px);
}
[data-theme="dark"] header.scrolled {
  box-shadow: 0 4px 20px rgba(0,0,0,.30);
}
[data-theme="dark"] .logo-donker {
  display: none;
}
[data-theme="dark"] .logo-wit {
  display: block;
}
[data-theme="dark"] header.scrolled .logo-wit,
[data-theme="dark"] header.menu-open .logo-wit {
  display: block;
}
[data-theme="dark"] header.scrolled .logo-donker,
[data-theme="dark"] header.menu-open .logo-donker {
  display: none;
}
/* Theme toggle */
.theme-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
  margin-left: 6px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: color .2s, background .2s;
}
.theme-toggle svg {
  width: 20px;
  height: 20px;
}
.theme-toggle:hover {
  color: var(--yellow);
}
header.scrolled .theme-toggle {
  color: var(--text);
}
header.scrolled .theme-toggle:hover {
  color: var(--yellow-dark);
}
/* Theme-toggle altijd zichtbaar + dark mobiel menu */
.menu {
  margin-left: auto;
}
@media(max-width:1080px) {
  .theme-toggle {
    margin-left: auto;
    margin-right: 6px;
  }
  [data-theme="dark"] .menu {
    background: #101737;
    box-shadow: -12px 0 30px rgba(0,0,0,.45);
  }
}
/* Mobiel: logo niet vervormen */
.logo {
  flex-shrink: 0;
}
@media(max-width:1080px) {
  .logo img {
    height: 34px;
  }
}
/* FAQ fixes: openklappen + dark mode */
.faq-item.open .faq-a {
  max-height: 600px;
}
[data-theme="dark"] .faq-item {
  background: var(--card);
  border-color: var(--border);
}

/* Lettertypen: zelf gehost, zodat er geen gegevens naar Google gaan */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/outfit-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/outfit-600.woff2) format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/outfit-700.woff2) format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/outfit-800.woff2) format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/dm-sans-400.woff2) format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/dm-sans-500.woff2) format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/dm-sans-700.woff2) format('woff2');
}
/* Contrast: de donkergele tekstkleur haalt nu 5,4:1 op wit (WCAG AA).
   In het donkere thema juist een lichtere tint, zodat die daar leesbaar blijft. */
:root {
  --yellow-dark: #8f6200;
}
[data-theme="dark"] {
  --yellow-dark: #f0b429;
}
/* Het label in de donkere hero van de homepage houdt de felle merkkleur */
.hero .eyebrow {
  color: var(--yellow);
}
/* Pakketnamen: de merkkleuren blijven voor randen en vinkjes, de tekst krijgt
   een donkerdere tint zodat die op wit goed leesbaar is */
:root:not([data-theme="dark"]) .plan.ignition h3,
:root:not([data-theme="dark"]) table.compare thead th:nth-child(2) {
  color: #935a2a;
}
:root:not([data-theme="dark"]) .plan.orbit h3,
:root:not([data-theme="dark"]) table.compare thead th:nth-child(3) {
  color: #5c6570;
}
:root:not([data-theme="dark"]) .plan.velocity h3,
:root:not([data-theme="dark"]) table.compare thead th:nth-child(4) {
  color: #8a6400;
}
[data-theme="dark"] table.compare thead th:nth-child(2) {
  color: #d9915a;
}
[data-theme="dark"] .plan.ignition h3 {
  color: #d9915a;
}
[data-theme="dark"] .plan.orbit h3,
[data-theme="dark"] table.compare thead th:nth-child(3) {
  color: #b8c1cc;
}
[data-theme="dark"] .plan.velocity h3,
[data-theme="dark"] table.compare thead th:nth-child(4) {
  color: #e8c14a;
}
/* Naar de inhoud springen (zichtbaar zodra je met Tab door de pagina gaat) */
.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 1000;
  background: var(--yellow);
  color: #1a1400;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  transition: top .15s;
}
.skip-link:focus {
  top: 12px;
}
/* Duidelijke focusrand voor toetsenbordgebruikers (niet bij klikken met de muis) */
:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible,
.cta-button:focus-visible,
.nis2-btn:focus-visible,
.cookie-btn:focus-visible,
.scan-fab:focus-visible {
  outline-offset: 4px;
  border-radius: 999px;
}
.form input:focus-visible, .form textarea:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 1px;
  border-radius: 10px;
}
main:focus {
  outline: none;
}
/* Donker thema: witte knoppen en kaders op de dienstpagina's */
[data-theme="dark"] .rel-links a {
  background: var(--card);
  border-color: var(--border);
}
[data-theme="dark"] .rel-links a:hover {
  border-color: var(--yellow);
}
[data-theme="dark"] .testimonial {
  background: var(--card);
  border-color: var(--border);
}
/* "Over deze check" is nu een echte knop (bereikbaar met toetsenbord) */
button.nis2-disclaimer-link {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
}
/* NIS2: de uitleg staat nu onder de intro */
.nis2-intro+.nis2-uitleg {
  margin: 36px 0 0;
}
/* Nieuwe pagina's gebruiken h2 in kaders (nette kopvolgorde), met dezelfde opmaak als h3 */
.box h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.cta-navy h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #fff;
}
.bronnen {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.7;
}
.bronnen a {
  color: var(--yellow-dark);
  font-weight: 600;
}
.auteur {
  font-size: .9rem;
  color: var(--muted);
  margin-top: -8px;
  margin-bottom: 28px;
}
/* Links in lopende tekst: goed zichtbaar in licht en donker */
.section-body a,
.check-table a,
.faq-a a,
.nis2-uitleg-note a,
.step-content a {
  color: var(--yellow-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Brede tabellen scrollen op mobiel in plaats van af te snijden */
.tabel-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tabel-scroll .check-table {
  min-width: 600px;
}
/* Mobiel menu open in het lichte thema: de header wordt wit, dus de
   thema- en zoekknop worden donker (net als het kruisje) */
:root:not([data-theme="dark"]) header.menu-open .theme-toggle,
:root:not([data-theme="dark"]) header.menu-open .search-toggle {
  color: var(--text);
}
:root:not([data-theme="dark"]) header.menu-open .theme-toggle:hover,
:root:not([data-theme="dark"]) header.menu-open .search-toggle:hover,
:root:not([data-theme="dark"]) header.menu-open .search-toggle.active {
  color: var(--yellow-dark);
}
/* Smalle telefoons: logo, thema-, menu- en zoekknop passen naast elkaar */
@media (max-width:440px) {
  header .container.nav {
    padding: 0 16px;
    gap: 8px;
  }
}
@media (max-width:400px) {
  header .logo img {
    height: 30px;
  }
}
/* Minder beweging als de bezoeker dat in het besturingssysteem heeft ingesteld */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
    scroll-behavior: auto!important;
  }
  html {
    scroll-behavior: auto;
  }
}
/* Hero: nadruk in de intro */
.hero p.lead strong {
  color: #fff;
  font-weight: 600;
}
/* Pakketkaarten: geen extra witruimte tussen de rijen */
@supports (grid-template-rows:subgrid) {
  .plan {
    row-gap: 0;
  }
}

/* Contactformulier in het donkere thema: donkere velden met lichte tekst */
[data-theme="dark"] .form input,
[data-theme="dark"] .form textarea {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
  color-scheme: dark;
}
[data-theme="dark"] .form input::placeholder,
[data-theme="dark"] .form textarea::placeholder {
  color: var(--muted);
}
[data-theme="dark"] .form input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  box-shadow: 0 0 0 1000px var(--bg) inset;
}

/* Tabellen in het donkere thema: kopregel in navy in plaats van grijsbruin */
[data-theme="dark"] .check-table th {
  background: var(--bg-alt);
}