/* Gedeelde frontend-layout: admin-thema + navigatie. */
:root {
  --site-bg-base: #f6f4f0;
  --bg: var(--site-bg-base);
  --card: #fff;
  --text: #1a1a1a;
  --muted: #555;
  --border: #ccc;
  --accent: #c41230;
  --grid: #e2e2e2;
  --row-alt: #f5f5f5;
  /* Legacy-aliassen in pagina-inline-styles */
  --page-bg: var(--bg);
  --paper: var(--card);
  --lo-red: var(--accent);
  --link: var(--accent);
  --site-accent: var(--accent);
  --site-muted: var(--muted);
  --site-nav-height: 3.5rem;
  --site-nav-top: 0.875rem;
  --site-nav-offset: calc(var(--site-nav-height) + var(--site-nav-top) + 1.25rem);
  --site-logo-layout: 2rem;
  --site-logo-size: 3.75rem;
  /* Ambient page wash (bos, rood, goud, hemel — Efteling-palet) */
  --ambient-green: rgba(61, 107, 79, 0.048);
  --ambient-red: rgba(196, 18, 48, 0.028);
  --ambient-gold: rgba(224, 181, 72, 0.044);
  --ambient-blue: rgba(46, 104, 148, 0.036);
  --ambient-cream: rgba(255, 250, 242, 0.3);
}

html {
  min-height: 100%;
  background-color: var(--site-bg-base);
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  position: relative;
  background: transparent;
  color: var(--text);
  isolation: isolate;
}

/* Zachte mesh-achtergrond (Triplebird-achtig: levendig maar rustig) */
body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: -1;
}

body::before {
  inset: -32%;
  background:
    radial-gradient(ellipse 42% 36% at 18% 14%, var(--ambient-green) 0%, transparent 58%),
    radial-gradient(ellipse 38% 34% at 84% 10%, var(--ambient-red) 0%, transparent 56%),
    radial-gradient(ellipse 40% 34% at 72% 82%, var(--ambient-gold) 0%, transparent 58%),
    radial-gradient(ellipse 44% 38% at 10% 78%, var(--ambient-blue) 0%, transparent 58%),
    radial-gradient(ellipse 36% 32% at 52% 48%, var(--ambient-cream) 0%, transparent 62%),
    linear-gradient(155deg, #f6f4f0 0%, #f4f2ee 50%, #f3f4f5 100%);
  background-size: 110% 110%;
  animation: site-ambient-drift-a 34s ease-in-out infinite alternate;
  will-change: transform, background-position;
}

body::after {
  inset: -28%;
  opacity: 0.34;
  background:
    radial-gradient(ellipse 36% 32% at 62% 28%, rgba(240, 212, 138, 0.05) 0%, transparent 56%),
    radial-gradient(ellipse 34% 30% at 28% 62%, rgba(196, 18, 48, 0.02) 0%, transparent 54%),
    radial-gradient(ellipse 32% 28% at 88% 72%, rgba(61, 107, 79, 0.028) 0%, transparent 52%);
  background-size: 112% 112%;
  animation: site-ambient-drift-b 42s ease-in-out infinite alternate;
  will-change: transform, background-position;
}

@keyframes site-ambient-drift-a {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    background-position: 22% 44%;
  }
  100% {
    transform: translate3d(3%, -2.5%, 0) scale(1.02);
    background-position: 62% 52%;
  }
}

@keyframes site-ambient-drift-b {
  0% {
    transform: translate3d(0, 0, 0) scale(1.008);
    background-position: 72% 32%;
  }
  100% {
    transform: translate3d(-3%, 2.5%, 0) scale(1);
    background-position: 38% 62%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none;
  }
}

.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--site-nav-offset) 1rem 2rem;
}

.wrap > a:not(.site-back),
.wrap .card a,
.wrap .panel a,
.wrap .meta a,
.wrap .status a,
.wrap .hint a {
  color: var(--accent);
}

/* Outline-knoppen (terug + sectie-acties, gelijk aan admin-secundair) */
.site-back,
.back-link:not(a),
.back {
  margin: 0 0 1rem;
}

.section-more {
  margin: 1rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid #eee;
}

.journal-archive-link {
  margin: 1rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid #eee;
}

.posts-more {
  margin: 0.85rem 0 0;
}

.posts-more--back {
  margin: 0 0 1rem;
}

.park-closed-updates-link {
  margin: 0 0 0.75rem;
}

a.site-back,
.site-back a,
.back-link > a,
.back > a,
a.back-link,
a#back-link:not(.md-btn-outline),
a#back-news:not(.md-btn-outline),
a#back-archive,
a#back-year,
a#back,
a#back-archief,
.wrap .card .section-more a,
.wrap .card .journal-archive-link a,
.posts-more a:not(.md-btn-outline),
.park-closed-updates-link a:not(.md-btn-outline),
a#posts-more-link:not(.md-btn-outline),
a#park-closed-updates-link-a:not(.md-btn-outline),
a#journals-archive-link:not(.md-btn-outline),
a#radar-archive-link:not(.md-btn-outline),
a#radar-contribute-link:not(.md-btn-outline),
a#park-archive-day-link-anchor,
a.site-outline-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--card);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.25;
  transition:
    color 0.12s ease,
    border-color 0.12s ease,
    background 0.12s ease;
}

a.site-back:hover,
.site-back a:hover,
.back-link > a:hover,
.back > a:hover,
a.back-link:hover,
a#back-link:not(.md-btn-outline):hover,
a#back-news:not(.md-btn-outline):hover,
a#back-archive:hover,
a#back-year:hover,
a#back:hover,
a#back-archief:hover,
.wrap .card .section-more a:hover,
.wrap .card .journal-archive-link a:hover,
.posts-more a:not(.md-btn-outline):hover,
.park-closed-updates-link a:not(.md-btn-outline):hover,
a#posts-more-link:not(.md-btn-outline):hover,
a#park-closed-updates-link-a:not(.md-btn-outline):hover,
a#journals-archive-link:not(.md-btn-outline):hover,
a#radar-archive-link:not(.md-btn-outline):hover,
a#radar-contribute-link:not(.md-btn-outline):hover,
a#park-archive-day-link-anchor:hover,
a.site-outline-btn:hover {
  color: var(--accent);
  border-color: rgba(196, 18, 48, 0.45);
  background: rgba(196, 18, 48, 0.06);
  text-decoration: none;
}

a.site-back:focus-visible,
.site-back a:focus-visible,
.back-link > a:focus-visible,
.back > a:focus-visible,
a.back-link:focus-visible,
.wrap .card .section-more a:focus-visible,
.wrap .card .journal-archive-link a:focus-visible,
.posts-more a:not(.md-btn-outline):focus-visible,
.park-closed-updates-link a:not(.md-btn-outline):focus-visible,
a#posts-more-link:not(.md-btn-outline):focus-visible,
a#park-closed-updates-link-a:not(.md-btn-outline):focus-visible,
a#journals-archive-link:not(.md-btn-outline):focus-visible,
a#radar-archive-link:not(.md-btn-outline):focus-visible,
a#radar-contribute-link:not(.md-btn-outline):focus-visible,
a#park-archive-day-link-anchor:focus-visible,
a.site-outline-btn:focus-visible {
  outline: 2px solid rgba(196, 18, 48, 0.35);
  outline-offset: 2px;
}

.wrap > p.site-back:first-of-type,
.wrap > a.site-back:first-of-type {
  margin-top: 0;
}

/* Verder-links: pijl rechts (terug-links gebruiken ← in de tekst) */
.site-forward-outline::after,
.wrap .card .journal-archive-link a::after,
.posts-more a:not(.md-btn-outline)::after,
.park-closed-updates-link a:not(.md-btn-outline)::after,
a.site-outline-btn::after {
  content: "→";
  font-size: 0.95em;
  line-height: 1;
}

/* Datumzoeken (zelfde patroon als admin dagjournaals) */
.admin-date-search label {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.admin-date-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.admin-date-search-row input[type="date"],
.admin-date-search-row input[type="text"] {
  flex: 1 1 10rem;
  max-width: 14rem;
  font: inherit;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.35rem 0.45rem;
}

.admin-date-search-row button {
  margin-top: 0;
}

.admin-date-search-clear {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}

.admin-date-search-clear:hover {
  color: var(--accent);
  text-decoration: underline;
}

.admin-date-search-status {
  margin: 0.5rem 0 0;
  font-size: 12px;
  color: var(--muted);
}

.admin-date-search-status.ok {
  color: #0b4a1e;
}

.admin-date-search-hint {
  margin: 0.35rem 0 0;
  font-size: 12px;
  color: var(--accent);
  font-weight: bold;
}

h1 {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  letter-spacing: normal;
}

h2 {
  font-size: 1.05rem;
  font-weight: 600;
}

.card,
.panel,
.opening-today,
.hero .card,
.area-table-card,
.stale-note,
.day-journal-generated-notice {
  background: var(--card);
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.card,
.panel,
.area-table-card {
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}

.opening-today {
  padding: 0.65rem 0.85rem;
  margin-bottom: 1rem;
}

.hero .card {
  padding: 0.75rem 0.85rem;
  margin-bottom: 0;
}

.stale-note,
.day-journal-generated-notice {
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.75rem;
}

.wrap table {
  font-size: 13px;
}

.wrap th {
  color: var(--muted);
  font-weight: 600;
}

.wrap input[type="text"],
.wrap input[type="password"],
.wrap input[type="number"],
.wrap input[type="date"],
.wrap input[type="search"],
.wrap input[type="email"],
.wrap input[type="url"],
.wrap textarea,
.wrap select {
  font: inherit;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.35rem 0.45rem;
}

.wrap button:not(.site-nav-dropdown-toggle):not(.sort-btn):not(.cal-cell):not(.daily-day):not(.weather-hero__tile):not(.emc-dot):not(.emc-btn):not(.md-parkday-empty__cta):not(.md-btn-outline):not(.md-btn-primary):not(.md-parkday-meta-chip__toggle):not(.md-parkday-days-toggle):not(.chat-send-btn):not(.assistant-send-btn):not(.assistant-starter-chip):not(.assistant-suggestion-btn):not(.assistant-retry-btn):not(.chat-followup-btn):not(.chat-suggestion-btn):not(.kal-month-nav-btn):not(.kal-search-submit):not(.radar-bijdrage-submit):not(.site-nav-mobile-toggle):not(.site-nav-mobile-panel__accordion-expand):not(.dj-pick-card):not(.park-day-section-nav__link) {
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  padding: 0.45rem 1rem;
  border: none;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}

.wrap button:not(.site-nav-dropdown-toggle):not(.sort-btn):not(.cal-cell):not(.daily-day):not(.weather-hero__tile):not(.emc-dot):not(.emc-btn):not(.md-parkday-empty__cta):not(.md-btn-outline):not(.md-btn-primary):not(.md-parkday-meta-chip__toggle):not(.md-parkday-days-toggle):not(.chat-send-btn):not(.assistant-send-btn):not(.assistant-starter-chip):not(.assistant-suggestion-btn):not(.assistant-retry-btn):not(.chat-followup-btn):not(.chat-suggestion-btn):not(.kal-month-nav-btn):not(.kal-search-submit):not(.radar-bijdrage-submit):not(.site-nav-mobile-toggle):not(.site-nav-mobile-panel__accordion-expand):not(.dj-pick-card):not(.park-day-section-nav__link):hover {
  filter: brightness(1.05);
}

.wrap button:not(.site-nav-dropdown-toggle):not(.sort-btn):not(.cal-cell):not(.daily-day):not(.weather-hero__tile):not(.emc-dot):not(.emc-btn):not(.md-parkday-empty__cta):not(.md-btn-outline):not(.md-btn-primary):not(.md-parkday-meta-chip__toggle):not(.md-parkday-days-toggle):not(.chat-send-btn):not(.assistant-send-btn):not(.assistant-starter-chip):not(.assistant-suggestion-btn):not(.assistant-retry-btn):not(.chat-followup-btn):not(.chat-suggestion-btn):not(.kal-month-nav-btn):not(.kal-search-submit):not(.radar-bijdrage-submit):not(.site-nav-mobile-toggle):not(.site-nav-mobile-panel__accordion-expand):not(.dj-pick-card):not(.park-day-section-nav__link):disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
}

.wrap a.btn,
.wrap a.btn-primary {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  padding: 0.45rem 1rem;
  border: none;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.wrap a.btn.btn--with-icon,
.wrap button.btn--with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.wrap a.btn .btn__icon,
.wrap button.btn--with-icon .btn__icon {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
}

.wrap a.btn:hover,
.wrap a.btn-primary:hover {
  filter: brightness(1.05);
  text-decoration: none;
}

.wrap .month-nav button,
.wrap button.btn-secondary,
.wrap a.btn-secondary {
  border: 1px solid var(--accent);
  background: #fff;
  color: var(--accent);
  padding: 0.35rem 0.75rem;
  font-size: 13px;
  filter: none;
}

.wrap a.btn-secondary {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border-radius: 4px;
}

.wrap .month-nav button:hover,
.wrap button.btn-secondary:hover,
.wrap a.btn-secondary:hover {
  background: rgba(196, 18, 48, 0.06);
  filter: none;
  text-decoration: none;
}

.wrap .month-nav button:disabled,
.wrap button.btn-secondary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.site-topbar {
  position: fixed;
  top: var(--site-nav-top);
  left: 50%;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  width: min(94%, 960px);
  max-width: calc(100% - 2rem);
  height: var(--site-nav-height);
  margin: 0;
  padding: 0 0.85rem 0 1rem;
  font-size: 13px;
  overflow: visible;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 4px 24px rgba(15, 23, 42, 0.08),
    0 1px 2px rgba(15, 23, 42, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translateX(-50%);
  transition:
    width 0.3s ease,
    transform 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    backdrop-filter 0.3s ease;
}

.site-topbar.is-scrolled {
  top: 0.625rem;
  width: min(92%, 940px);
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow:
    0 8px 32px rgba(15, 23, 42, 0.12),
    0 2px 8px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateX(-50%) scale(0.98);
}

.site-topbar .site-tabs {
  flex: 1;
  display: flex;
  width: 100%;
  min-width: 0;
  overflow: visible;
  align-items: center;
  gap: 0.45rem;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  order: -4;
  width: var(--site-logo-layout);
  height: var(--site-logo-layout);
  margin-right: 0.2rem;
  padding: 0;
  border: none;
  background: none;
  text-decoration: none;
  line-height: 0;
  overflow: visible;
}

.site-brand img {
  display: block;
  width: var(--site-logo-size);
  height: var(--site-logo-size);
  margin: calc((var(--site-logo-layout) - var(--site-logo-size)) / 2) 0;
  object-fit: contain;
}

.site-tabs > a.site-brand,
.site-tabs > a.site-brand:hover,
.site-tabs > a.site-brand:focus,
.site-tabs > a.site-brand:focus-visible {
  color: inherit;
  background: none;
  text-decoration: none;
}

.site-nav-mobile-brand--logo,
.site-nav-mobile-brand--logo:hover,
.site-nav-mobile-brand--logo:focus,
.site-nav-mobile-brand--logo:focus-visible {
  color: inherit;
  background: none;
  text-decoration: none;
}

/* Opvallende navigatie-entry (persoonlijk dashboard) */
.site-tabs > a.site-nav-mijn-dashboard {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  order: -3;
  flex-shrink: 0;
  padding: 0.42rem 1rem 0.42rem 0.82rem;
  border: 1px solid var(--accent, #c41230);
  border-radius: 9999px;
  background: linear-gradient(180deg, #d41434 0%, var(--accent, #c41230) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(196, 18, 48, 0.28);
  text-decoration: none;
}

.site-topbar > a.site-nav-mobile-dashboard.site-nav-mijn-dashboard {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  flex-shrink: 0;
  padding: 0.42rem 1rem 0.42rem 0.82rem;
  border: 1px solid var(--accent, #c41230);
  border-radius: 9999px;
  background: linear-gradient(180deg, #d41434 0%, var(--accent, #c41230) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(196, 18, 48, 0.28);
  text-decoration: none;
}

.site-tabs > a.site-nav-mijn-dashboard .site-nav-mijn-dashboard-icon,
.site-topbar > a.site-nav-mobile-dashboard.site-nav-mijn-dashboard .site-nav-mijn-dashboard-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.16);
}

.site-tabs > a.site-nav-mijn-dashboard .site-nav-mijn-dashboard-icon svg,
.site-topbar > a.site-nav-mobile-dashboard.site-nav-mijn-dashboard .site-nav-mijn-dashboard-icon svg {
  width: 0.95rem;
  height: 0.95rem;
}

.site-tabs > a.site-nav-mijn-dashboard:hover,
.site-topbar > a.site-nav-mobile-dashboard.site-nav-mijn-dashboard:hover {
  background: linear-gradient(180deg, #b8122c 0%, #a00f28 100%);
  border-color: #a00f28;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 3px 14px rgba(196, 18, 48, 0.34);
}

.site-tabs > a.site-nav-mijn-dashboard.is-active,
.site-topbar > a.site-nav-mobile-dashboard.site-nav-mijn-dashboard.is-active {
  background: linear-gradient(180deg, #9c0c24 0%, #8e0d23 100%);
  border-color: #8e0d23;
  color: #fff;
  box-shadow: 0 2px 10px rgba(196, 18, 48, 0.3);
}

/* Live-updates — subtiel kadertje met pulserend live-rondje */
.site-tabs > a.site-nav-live-updates {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
  padding: 0.3rem 0.78rem;
  border: 1px solid rgba(196, 18, 48, 0.22);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.45);
  transition:
    border-color 0.14s ease,
    background 0.14s ease,
    color 0.14s ease;
}

.site-tabs > a.site-nav-live-updates:hover,
.site-tabs > a.site-nav-live-updates:focus-visible {
  border-color: rgba(196, 18, 48, 0.38);
}

.site-tabs > a.site-nav-live-updates.is-active {
  border: 1px solid rgba(196, 18, 48, 0.48);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.45);
  color: var(--site-accent, #c41230);
  box-shadow: none;
}

.site-tabs > a.site-nav-live-updates .site-nav-live-updates-dot {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--site-accent, #c41230);
  box-shadow:
    0 0 0 1px rgba(196, 18, 48, 0.2),
    0 0 4px rgba(196, 18, 48, 0.35);
}

@media (prefers-reduced-motion: no-preference) {
  .site-tabs > a.site-nav-live-updates .site-nav-live-updates-dot {
    animation: site-nav-live-dot-pulse 2s ease-in-out infinite;
  }

  .site-tabs > a.site-nav-live-updates .site-nav-live-updates-dot::after {
    content: "";
    position: absolute;
    inset: -0.28rem;
    border-radius: 50%;
    background: rgba(196, 18, 48, 0.22);
    animation: site-nav-live-dot-glow 2s ease-in-out infinite;
    pointer-events: none;
  }

  .site-nav-mobile-panel__link.site-nav-live-updates .site-nav-live-updates-dot {
    animation: site-nav-live-dot-pulse 2s ease-in-out infinite;
  }

  .site-nav-mobile-panel__link.site-nav-live-updates .site-nav-live-updates-dot::after {
    content: "";
    position: absolute;
    inset: -0.28rem;
    border-radius: 50%;
    background: rgba(196, 18, 48, 0.22);
    animation: site-nav-live-dot-glow 2s ease-in-out infinite;
    pointer-events: none;
  }
}

.site-nav-mobile-panel__link.site-nav-live-updates {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid rgba(196, 18, 48, 0.22);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.55);
}

.site-nav-mobile-panel__link.site-nav-live-updates:hover {
  border-color: rgba(196, 18, 48, 0.38);
}

.site-nav-mobile-panel__link.site-nav-live-updates.is-active {
  border: 1px solid rgba(196, 18, 48, 0.48);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--site-accent, #c41230);
}

.site-nav-mobile-panel__link.site-nav-live-updates .site-nav-live-updates-dot {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--site-accent, #c41230);
  box-shadow:
    0 0 0 1px rgba(196, 18, 48, 0.2),
    0 0 4px rgba(196, 18, 48, 0.35);
}

/* Vandaag — subtiel kadertje met kalender-icoon (geen live-puls) */
.site-tabs > a.site-nav-vandaag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.3rem 0.78rem;
  border: 1px solid rgba(196, 18, 48, 0.16);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.45);
  transition:
    border-color 0.14s ease,
    background 0.14s ease,
    color 0.14s ease;
}

.site-tabs > a.site-nav-vandaag:hover,
.site-tabs > a.site-nav-vandaag:focus-visible {
  border-color: rgba(196, 18, 48, 0.3);
}

.site-tabs > a.site-nav-vandaag.is-active {
  border: 1px solid rgba(196, 18, 48, 0.4);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.45);
  color: var(--site-accent, #c41230);
  box-shadow: none;
}

.site-tabs > a.site-nav-vandaag .site-nav-vandaag-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 0.95rem;
  height: 0.95rem;
  color: rgba(196, 18, 48, 0.72);
}

.site-tabs > a.site-nav-vandaag .site-nav-vandaag-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.site-nav-mobile-panel__link.site-nav-vandaag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(196, 18, 48, 0.16);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.55);
}

.site-nav-mobile-panel__link.site-nav-vandaag:hover {
  border-color: rgba(196, 18, 48, 0.3);
}

.site-nav-mobile-panel__link.site-nav-vandaag.is-active {
  border: 1px solid rgba(196, 18, 48, 0.4);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--site-accent, #c41230);
}

.site-nav-mobile-panel__link.site-nav-vandaag .site-nav-vandaag-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 0.95rem;
  height: 0.95rem;
  color: rgba(196, 18, 48, 0.72);
}

.site-nav-mobile-panel__link.site-nav-vandaag .site-nav-vandaag-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes site-nav-live-dot-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow:
      0 0 0 1px rgba(196, 18, 48, 0.24),
      0 0 5px rgba(196, 18, 48, 0.4);
  }
  50% {
    opacity: 0.78;
    transform: scale(0.88);
    box-shadow:
      0 0 0 1px rgba(196, 18, 48, 0.36),
      0 0 9px rgba(196, 18, 48, 0.62),
      0 0 14px rgba(196, 18, 48, 0.28);
  }
}

@keyframes site-nav-live-dot-glow {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.3);
  }
}

/* Efteling Kompas — zwevende chat-knop rechtsonder (buiten het hoofdmenu) */
.site-assistent-fab {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1.15rem, env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0.78rem;
  border-radius: 9999px;
  border: 1px solid rgba(26, 90, 138, 0.38);
  background: linear-gradient(165deg, #f4f9ff 0%, #dceaf7 100%);
  color: #1a5a8a;
  box-shadow:
    0 8px 28px rgba(26, 90, 138, 0.22),
    0 2px 8px rgba(15, 23, 42, 0.08);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
  text-decoration: none;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    padding 0.45s ease,
    gap 0.45s ease;
}

.site-assistent-fab[hidden] {
  display: none !important;
}

.site-assistent-fab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.site-assistent-fab__icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.site-assistent-fab__label {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow-x: hidden;
  overflow-y: visible;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.3;
  padding-bottom: 0.12em;
}

@media (min-width: 481px) {
  .site-assistent-fab__label {
    animation: site-assistent-fab-label-tease 46s ease-in-out infinite;
  }

  .site-assistent-fab:has(.site-assistent-fab__label) {
    animation: site-assistent-fab-expand 46s ease-in-out infinite;
  }

  .site-assistent-fab:hover,
  .site-assistent-fab:focus-visible {
    animation: none;
    gap: 0.5rem;
    padding: 0.74rem 1.05rem 0.84rem 0.9rem;
  }

  .site-assistent-fab:hover .site-assistent-fab__label,
  .site-assistent-fab:focus-visible .site-assistent-fab__label {
    animation: none;
    max-width: 11rem;
    opacity: 1;
  }
}

/* ~6s zichtbaar, daarna ~40s alleen icoon — subtiele aandacht zonder te storen */
@keyframes site-assistent-fab-label-tease {
  0%,
  82%,
  97%,
  100% {
    max-width: 0;
    opacity: 0;
  }

  84%,
  95% {
    max-width: 11rem;
    opacity: 1;
  }
}

@keyframes site-assistent-fab-expand {
  0%,
  82%,
  97%,
  100% {
    gap: 0;
    padding: 0.78rem;
  }

  84%,
  95% {
    gap: 0.5rem;
    padding: 0.74rem 1.05rem 0.84rem 0.9rem;
  }
}

.site-assistent-fab:hover {
  transform: translateY(-2px);
  border-color: #1a5a8a;
  background: linear-gradient(165deg, #fff 0%, #cfe4f5 100%);
  color: #134870;
  box-shadow:
    0 12px 32px rgba(26, 90, 138, 0.28),
    0 4px 12px rgba(15, 23, 42, 0.08);
  text-decoration: none;
}

.site-assistent-fab:focus-visible {
  outline: 2px solid rgba(26, 90, 138, 0.45);
  outline-offset: 3px;
}

@media (max-width: 480px) {
  .site-assistent-fab {
    padding: 0.78rem;
    gap: 0;
  }

  .site-assistent-fab__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    animation: none;
    max-width: none;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-assistent-fab {
    animation: none;
    transition: none;
    gap: 0.5rem;
    padding: 0.74rem 1.05rem 0.84rem 0.9rem;
  }

  .site-assistent-fab__label {
    animation: none;
    max-width: 11rem;
    opacity: 1;
  }

  .site-assistent-fab:hover {
    transform: none;
  }
}

.site-tabs {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.45rem;
  overflow: visible;
}

.site-tabs > a,
.site-nav-dropdown-toggle {
  font-weight: 600;
  text-decoration: none;
  padding: 0.28rem 0.72rem;
  border-radius: 4px;
  color: var(--site-muted, #555);
}

.site-tabs > a:hover,
.site-tabs > a:focus,
.site-tabs > a:focus-visible,
.site-tabs > a.is-active,
.site-nav-dropdown-toggle:hover,
.site-nav-dropdown-toggle:focus,
.site-nav-dropdown-toggle:focus-visible {
  color: var(--site-accent, #c41230);
  background: rgba(196, 18, 48, 0.06);
  text-decoration: none;
}

.site-tabs > a.is-active,
.site-nav-dropdown-toggle.is-active {
  color: var(--site-accent, #c41230);
  background: rgba(196, 18, 48, 0.1);
}

.site-tabs > a.is-active:not(.site-nav-mijn-dashboard):not(.site-nav-live-updates):not(.site-nav-vandaag),
.site-nav-dropdown-toggle.is-active {
  border-radius: 8px;
}

.site-tabs > a.site-nav-mijn-dashboard.is-active {
  border-radius: 9999px;
}

.site-nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.site-nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0.32rem 0.78rem;
  border-radius: 8px;
  filter: none;
  color: var(--site-muted, #555);
  transition:
    background 0.14s ease,
    color 0.14s ease,
    box-shadow 0.14s ease;
}

.site-nav-dropdown-toggle:hover {
  filter: none;
}

.site-nav-dropdown-caret {
  display: inline-block;
  flex-shrink: 0;
  width: 0.6em;
  height: 0.6em;
  margin-top: -0.12em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.78;
  font-size: 0;
  line-height: 0;
  transition: transform 0.16s ease, opacity 0.16s ease;
}

.site-nav-dropdown.is-open .site-nav-dropdown-caret {
  transform: rotate(225deg);
  opacity: 0.95;
}

.site-nav-dropdown.is-open .site-nav-dropdown-toggle {
  color: var(--site-accent, #c41230);
  background: rgba(196, 18, 48, 0.08);
  box-shadow: 0 0 0 1px rgba(196, 18, 48, 0.1);
}

.site-nav-dropdown-toggle:focus-visible {
  outline: 2px solid rgba(196, 18, 48, 0.35);
  outline-offset: 2px;
}

.site-nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  min-width: 13.75rem;
  padding: 0.5rem;
  background: var(--paper, #fff);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  box-shadow:
    0 16px 40px rgba(15, 23, 42, 0.12),
    0 4px 12px rgba(15, 23, 42, 0.06);
  z-index: 30;
}

.site-topbar .site-nav-dropdown-menu {
  z-index: 70;
  /* Onder de volledige pill-menubalk, niet alleen onder de toggle-knop */
  top: calc(100% + (var(--site-nav-height) - 100%) / 2 + 0.55rem);
}

.site-nav-dropdown.is-open .site-nav-dropdown-menu {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  animation: site-nav-dropdown-in 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes site-nav-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.site-nav-dropdown-menu__label {
  margin: 0.15rem 0 0.25rem;
  padding: 0.35rem 0.55rem 0.4rem;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--site-muted, #8a8f98);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.site-nav-dropdown-menu__label:first-child {
  margin-top: 0;
  border-top: none;
}

.site-nav-dropdown-menu__group {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  padding: 0.2rem 0.15rem 0.3rem;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.025);
}

.site-nav-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
  font-weight: 600;
  font-size: 13px;
  color: var(--text, #333);
  padding: 0.48rem 0.55rem 0.48rem 0.75rem;
  border-radius: 8px;
  line-height: 1.35;
  text-decoration: none;
  transition:
    background 0.12s ease,
    color 0.12s ease,
    transform 0.12s ease;
}

.site-nav-dropdown-menu a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.14);
  flex-shrink: 0;
  transition:
    background 0.12s ease,
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

.site-nav-dropdown-menu a:hover {
  color: var(--site-accent, #c41230);
  background: rgba(196, 18, 48, 0.06);
  text-decoration: none;
  transform: translateX(1px);
}

.site-nav-dropdown-menu a:hover::before {
  background: var(--site-accent, #c41230);
  box-shadow: 0 0 0 3px rgba(196, 18, 48, 0.12);
}

.site-nav-dropdown-menu a.is-active {
  font-weight: 700;
  color: var(--site-accent, #c41230);
  background: rgba(196, 18, 48, 0.1);
  text-decoration: none;
}

.site-nav-dropdown-menu a:focus,
.site-nav-dropdown-menu a:focus-visible,
.site-nav-dropdown-toggle {
  text-decoration: none;
}

.site-nav-dropdown-menu a.is-active::before {
  background: var(--site-accent, #c41230);
  box-shadow: 0 0 0 3px rgba(196, 18, 48, 0.14);
}

/* Mobiel menu (hamburger + paneel onder de pill) */
.site-nav-mobile-toggle {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.92);
  color: rgba(26, 26, 26, 0.68);
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.site-nav-mobile-toggle:hover {
  background: rgba(196, 18, 48, 0.05);
  border-color: rgba(196, 18, 48, 0.14);
  color: rgba(26, 26, 26, 0.78);
}

.site-nav-mobile-toggle:focus-visible {
  outline: 2px solid rgba(196, 18, 48, 0.35);
  outline-offset: 2px;
}

.site-topbar.is-mobile-open .site-nav-mobile-toggle {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(26, 26, 26, 0.68);
}

.site-nav-mobile-brand {
  display: none;
  flex: 0 0 auto;
  min-width: 0;
  padding-left: 0.2rem;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  color: var(--text, #1a1a1a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-nav-mobile-brand--logo {
  display: none;
  align-items: center;
  width: var(--site-logo-layout);
  height: var(--site-logo-layout);
  line-height: 0;
  text-decoration: none;
  overflow: visible;
}

.site-nav-mobile-brand--logo img {
  display: block;
  width: var(--site-logo-size);
  height: var(--site-logo-size);
  margin: calc((var(--site-logo-layout) - var(--site-logo-size)) / 2) 0;
  object-fit: contain;
}

.site-nav-mobile-toggle-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: 1rem;
  height: 12px;
}

.site-nav-mobile-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  min-height: 2px;
  flex: 0 0 2px;
  border-radius: 999px;
  background: currentColor;
}

.site-nav-mobile-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  z-index: 60;
  width: min(calc(100vw - 2rem), 24rem);
  max-height: min(70vh, 32rem);
  overflow: auto;
  padding: 0.85rem;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 16px 40px rgba(15, 23, 42, 0.14),
    0 4px 12px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateX(-50%);
  animation: site-nav-mobile-panel-in 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-nav-mobile-panel[hidden] {
  display: none !important;
}

.site-nav-mobile-panel__section {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.65rem;
}

.site-nav-mobile-panel__section--accordion {
  margin-bottom: 0.4rem;
}

.site-nav-mobile-panel__accordion-head {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
}

.site-nav-mobile-panel__accordion-title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  pointer-events: none;
}

.site-nav-mobile-panel__accordion-expand {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: rgba(26, 26, 26, 0.38);
  cursor: pointer;
  transition:
    background 0.14s ease,
    color 0.14s ease;
}

.site-nav-mobile-panel__accordion-expand:hover,
.site-nav-mobile-panel__accordion-expand:focus-visible {
  color: rgba(26, 26, 26, 0.58);
  background: rgba(0, 0, 0, 0.04);
}

.site-nav-mobile-panel__accordion-expand:focus-visible {
  outline: 1px solid rgba(0, 0, 0, 0.12);
  outline-offset: 1px;
}

.site-nav-mobile-panel__accordion-caret {
  display: inline-block;
  flex-shrink: 0;
  width: 0.38em;
  height: 0.38em;
  margin-top: -0.1em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.75;
  transition: transform 0.18s ease;
}

.site-nav-mobile-panel__section--accordion.is-open .site-nav-mobile-panel__accordion-caret {
  transform: rotate(225deg);
  margin-top: 0.08em;
}

.site-nav-mobile-panel__submenu {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: 0.1rem;
  padding: 0 0 0 0.55rem;
}

.site-nav-mobile-panel__submenu[hidden] {
  display: none !important;
}

.site-nav-mobile-panel__submenu .site-nav-mobile-panel__link {
  font-size: 15px;
  font-weight: 700;
}

.site-nav-mobile-panel__submenu .site-nav-mobile-panel__link::before {
  content: "";
  flex-shrink: 0;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.32;
}

.site-nav-mobile-panel__submenu .site-nav-mobile-panel__link:hover::before,
.site-nav-mobile-panel__submenu .site-nav-mobile-panel__link.is-active::before {
  opacity: 0.5;
}

.site-nav-mobile-panel__section--solo {
  margin-bottom: 0.4rem;
}

.site-nav-mobile-panel__section:last-child {
  margin-bottom: 0;
}

.site-nav-mobile-panel__section--solo .site-nav-mobile-panel__link {
  font-size: 15px;
  font-weight: 700;
}

.site-nav-mobile-panel a,
.site-nav-mobile-panel .site-nav-mobile-panel__link {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  color: var(--text, #1a1a1a);
  text-decoration: none;
  transition:
    background 0.14s ease,
    color 0.14s ease;
}

.site-nav-mobile-panel a:hover,
.site-nav-mobile-panel .site-nav-mobile-panel__link:hover {
  color: var(--site-accent, #c41230);
  background: rgba(196, 18, 48, 0.06);
  text-decoration: none;
}

.site-nav-mobile-panel a.is-active {
  color: var(--site-accent, #c41230);
  background: rgba(196, 18, 48, 0.1);
}

.site-nav-mobile-dashboard {
  display: none;
}

@media (max-width: 1023px) {
  .site-nav-mobile-brand,
  .site-nav-mobile-brand--logo {
    display: flex;
    flex: 0 0 auto;
    order: -1;
  }

  .site-nav-mobile-dashboard:not([hidden]) {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    justify-content: center;
    order: 0;
    z-index: 1;
  }

  .site-topbar > a.site-nav-mobile-dashboard.site-nav-mijn-dashboard {
    flex-shrink: 1;
    gap: 0.38rem;
    max-width: min(12rem, 46vw);
    padding: 0.34rem 0.72rem 0.34rem 0.58rem;
    font-size: 12px;
    box-shadow: 0 1px 8px rgba(196, 18, 48, 0.22);
    order: 0;
    justify-content: center;
  }

  .site-topbar > a.site-nav-mobile-dashboard .site-nav-mijn-dashboard-icon {
    width: 1.15rem;
    height: 1.15rem;
  }

  .site-topbar > a.site-nav-mobile-dashboard .site-nav-mijn-dashboard-icon svg {
    width: 0.82rem;
    height: 0.82rem;
  }

  .site-topbar > a.site-nav-mobile-dashboard .site-nav-mijn-dashboard-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@keyframes site-nav-mobile-panel-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@media (max-width: 1023px) {
  .site-nav-mobile-toggle {
    display: inline-flex;
    flex-shrink: 0;
    order: 1;
    margin-left: auto;
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    border-radius: 9999px;
    background: rgba(196, 18, 48, 0.1);
    color: rgba(26, 26, 26, 0.68);
  }

  .site-nav-mobile-toggle:hover {
    background: rgba(196, 18, 48, 0.14);
    border: none;
    border-radius: 9999px;
  }

  .site-topbar.is-mobile-open .site-nav-mobile-toggle {
    background: rgba(196, 18, 48, 0.1);
    border: none;
    border-radius: 9999px;
  }

  .site-topbar .site-tabs {
    display: none;
  }

  .site-topbar {
    width: min(94%, calc(100% - 1.5rem));
    padding-right: 0.55rem;
  }

  .site-topbar.is-scrolled {
    width: min(92%, calc(100% - 1.75rem));
  }
}

@media (min-width: 1024px) {
  .site-topbar {
    justify-content: center;
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }

  .site-topbar .site-tabs {
    flex: 1;
    justify-content: center;
    gap: 0.55rem;
    --site-nav-cta-shadow-margin-end: 0.58rem;
  }

  /* Pill-knoppen vullen de gap visueel voller; extra marge voor gelijke tussenruimte. */
  .site-tabs > a.site-nav-mijn-dashboard {
    margin-inline-end: var(--site-nav-cta-shadow-margin-end);
  }

  .site-nav-mobile-panel {
    display: none !important;
  }

  .site-nav-mobile-dashboard {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-topbar,
  .site-nav-mobile-toggle,
  .site-nav-mobile-panel__accordion-expand,
  .site-nav-mobile-panel__accordion-caret {
    transition: none;
  }

  .site-nav-mobile-panel {
    animation: none;
  }

  .site-nav-dropdown.is-open .site-nav-dropdown-menu {
    animation: none;
  }

  .site-nav-dropdown-caret,
  .site-nav-dropdown-toggle {
    transition: none;
  }

  .site-nav-dropdown-menu a,
  .site-nav-dropdown-menu a::before {
    transition: none;
  }

  .site-nav-dropdown-menu a:hover {
    transform: none;
  }
}

/* CMS-mededelingen (boven aan de pagina) */
[data-frontend-notices] {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0.45rem 0 0.85rem;
}

[data-frontend-notices][hidden] {
  display: none !important;
}

.frontend-notice {
  margin: 0;
  padding: 0.65rem 0.85rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.frontend-notice__label {
  margin: 0 0 0.25rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.frontend-notice__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.frontend-notice--info {
  border-color: #9eb8d9;
  background: #f2f7fc;
}

.frontend-notice--info .frontend-notice__label {
  color: #1e4a7a;
}

.frontend-notice--beta {
  border-color: #b8a8d9;
  background: #f6f2fc;
}

.frontend-notice--beta .frontend-notice__label {
  color: #4a2d7a;
}

.frontend-notice--technical_outage {
  border-color: #e6c84d;
  background: #fff8e6;
}

.frontend-notice--technical_outage .frontend-notice__label {
  color: #7a5a00;
}