:root {
      font-family: "puffin-display", system-ui, sans-serif;
      font-weight: 400;
      font-style: normal;
       
      --tw-shadow: 0 8px 20px rgba(0,0,0,0.08);
      --tw-shadow-colored: 0 8px 20px var(--tw-shadow-color);
    }

    [data-theme="verno"] {
      font-family: "Roboto", sans-serif;
      --color-primary: #FE5F16;
      --color-primary-content: #ffffff;

      --color-secondary: #003CA3;
      --color-secondary-content: #ffffff;

      --color-accent: #fdbfa2;
      --color-accent-content: #FE5F16;

      --color-neutral: #01155A;
      --color-neutral-content: #ffffff;

      --color-base-100: #ffffff;
      --color-base-200: #F1F4FA;
      --color-base-300: #e0e3ea;
      --color-base-content: #003CA3;

      --logo-blue: var(--color-neutral);
      --logo-orange: var(--color-primary);

      --color-info: #3ABFF8;
      --color-success: #4EC45D;
      --color-warning: #FBBF24;
      --color-error: #EF4444;

      --radius-selector: 1rem;
      --radius-field: 1.25rem;
      --radius-box: 0.5rem;
      --size-selector: 0.25rem;
      --size-field: 0.25rem;
      --border: 1px;
      --depth: 1;
      --noise: 0;

     

      --primary-900: color-mix(in srgb, var(--color-secondary) 100%, black);
      --primary-700: color-mix(in srgb, var(--color-secondary) 70%, black);
      --primary-800: color-mix(in srgb, var(--color-secondary) 100%, black);
    }
    [data-theme="verno-dark"] {
      font-family: "Roboto", sans-serif;
      --color-primary: #FE5F16;
      --color-primary-content: #f6cdb9;

      --color-secondary: #001454;
      --color-secondary-content: #b1cdfd;

      --color-accent: #fdbfa2;
      --color-accent-content: #1b0f07;

      --color-neutral: #001e78;
      --color-neutral-content: #e7ecf9;

      --color-base-100: #000929;
      --color-base-200: #000d3b;
      --color-base-300: #000e3f;
      --color-base-content: #d7e2fc;

      --logo-blue: var(--color-neutral-content);
      --logo-orange: var(--color-primary);

      --color-info: #5ec8ff;
      --color-success: #5bd27a;
      --color-warning: #f7c54a;
      --color-error: #f87171;

      --radius-selector: 1rem;
      --radius-field: 1.25rem;
      --radius-box: 1rem;
      --size-selector: 0.25rem;
      --size-field: 0.25rem;
      --border: 1px;
      --depth: 1;
      --noise: 0;

      --primary-900: color-mix(in srgb, var(--color-secondary) 100%, black);
      --primary-700: color-mix(in srgb, var(--color-secondary) 70%, black);
      --primary-800: color-mix(in srgb, var(--color-secondary) 100%, black);
    }
   
    .logo-fill-blue { fill: var(--logo-blue); }
    .logo-fill-orange { fill: var(--logo-orange); }

    .bg-primary-gradient {
      background: linear-gradient(
        135deg,
        var(--primary-900),
        var(--primary-700),
        var(--primary-800)
      );
    }
    nav#menu-source { display: none; }


/* ===== Menu: gedeelde bouwstenen ===== */
.menu-shell { position: relative; }
.menu-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 200ms ease;
}

/* ===== Flyout-lagen (drawer / mega / mobiel) =====
    .open  = laag zichtbaar (display), .shown = animatie-eindstand */
.menu-layer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
}
.menu-layer.open { display: block; }
.menu-overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-neutral) 40%, transparent);
  opacity: 0;
  transition: opacity 200ms ease;
}
.menu-layer.shown .menu-overlay { opacity: 1; }

/* Desktop variant B: drawer onder de header, uitgelijnd met de container.
    Hoogte volgt de inhoud (langste kolom); --header-bottom en
    --container-left worden door JS gemeten. */
#menu-drawer-layer { z-index: 9990; }
#menu-drawer-layer .menu-overlay { top: var(--header-bottom, 0px); }
#menu-drawer-layer .menu-shell {
  position: absolute;
  top: calc(var(--header-bottom, 0px) + 10px);
  left: var(--container-left, 0px);
  height: auto;
  max-height: calc(100% - var(--header-bottom, 0px) - 30px);
  opacity: 0;
  transform: translateX(-24px);
  transition: transform 200ms ease, opacity 200ms ease;
}
#menu-drawer-layer.shown .menu-shell {
  transform: translateX(0);
  opacity: 1;
}

/* Desktop variant C: fullscreen megamenu — slidet van achter de header uit.
    De clip-container knipt het paneel af op de onderkant van de header. */
#menu-mega-layer { z-index: 9990; }
#menu-mega-layer .menu-overlay { top: var(--header-bottom, 0px); }
#menu-mega-layer .menu-mega-clip {
  position: absolute;
  top: var(--header-bottom, 0px);
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
}
#menu-mega-layer .menu-mega-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--header-bottom, 0px) - 40px);
  overflow-y: auto;
  border-radius: 0 0 2rem 2rem;
  pointer-events: auto;
  transform: translateY(-100%);
  transition: transform 250ms ease;
}
#menu-mega-layer.shown .menu-mega-panel { transform: translateY(0); }

/* Mobiel variant A: fullscreen slide panels */
#menu-mobile-layer[data-variant="slide"] .menu-shell {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: min(90vw, 360px);
  border-radius: 0 1rem 1rem 0;
  transform: translateX(-100%);
  transition: transform 200ms ease;
}
#menu-mobile-layer[data-variant="slide"].shown .menu-shell { transform: translateX(0); }

/* Mobiel variant B: bottom sheet */
#menu-mobile-layer[data-variant="sheet"] .menu-shell {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(78vh, 640px);
  border-radius: 1.5rem 1.5rem 0 0;
  transform: translateY(100%);
  transition: transform 250ms ease;
}
#menu-mobile-layer[data-variant="sheet"].shown .menu-shell { transform: translateY(0); }

/* Desktop variant A: dropdown onder de knop */
#menu-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 10001;
  display: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 200ms ease, transform 200ms ease;
}
#menu-dropdown.open { display: block; }
#menu-dropdown.shown {
  opacity: 1;
  transform: translateY(0);
}
/* Backdrop achter de dropdown (header blijft erboven zichtbaar) */
#menu-dropdown-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: none;
  background: color-mix(in srgb, var(--color-neutral) 40%, transparent);
  opacity: 0;
  transition: opacity 200ms ease;
}
#menu-dropdown-backdrop.open { display: block; }
#menu-dropdown-backdrop.shown { opacity: 1; }

/* Backdrop achter het inline menu zodra er niveaus openstaan
    (z-30: boven de pagina, onder de inline-panelen op z-40) */
#menu-inline-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  background: color-mix(in srgb, var(--color-neutral) 40%, transparent);
  opacity: 0;
  transition: opacity 200ms ease;
}
#menu-inline-backdrop.open { display: block; }
#menu-inline-backdrop.shown { opacity: 1; }