/* =====================================================================
   IADM — RVO-huisstijl ("Krachtige eenvoud")
   Kleuren-subset uit Huisstijlhandboek RVO v1.0.
   ===================================================================== */

/* --- Officieel lettertype: RijksSans -------------------------------- */
@font-face {
  font-family: "RijksSans";
  src: url("../fonts/RijksSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RijksSans";
  src: url("../fonts/RijksSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Kleuren-subset (100%) */
  --lintblauw: #154273;
  --wit: #ffffff;
  --lichtblauw: #8fcae7;
  --violet: #a90061;
  --hemelblauw: #007bc7;      /* uitsluitend buttons & links */
  --hemelblauw-hover: #005a91;

  /* Toegestane tints (mix met wit) */
  --lintblauw-75: color-mix(in srgb, var(--lintblauw) 75%, #fff);
  --lintblauw-60: color-mix(in srgb, var(--lintblauw) 60%, #fff);
  --lintblauw-30: color-mix(in srgb, var(--lintblauw) 30%, #fff);
  --lintblauw-15: color-mix(in srgb, var(--lintblauw) 15%, #fff);
  --lichtblauw-30: color-mix(in srgb, var(--lichtblauw) 30%, #fff);
  --lichtblauw-15: color-mix(in srgb, var(--lichtblauw) 15%, #fff);
  --violet-15: color-mix(in srgb, var(--violet) 15%, #fff);

  /* Typografie */
  --font: "RijksSans", "RijksoverheidSansWebText", Verdana, Arial, "DejaVu Sans", sans-serif;

  /* Ruimte */
  --s-2xs: 4px; --s-xs: 8px; --s-sm: 12px; --s-md: 16px;
  --s-lg: 24px; --s-xl: 32px; --s-2xl: 48px; --s-3xl: 64px;

  /* Vorm: afgeronde hoek (container) */
  --corner: 28px;
  --corner-sm: 3px;

  --maxwidth: 1200px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--lintblauw);
  background: var(--wit);
}

.rvo-container { width: 100%; max-width: var(--maxwidth); margin: 0 auto; padding: 0 var(--s-lg); }

/* ---- Skiplink -------------------------------------------------------- */
.rvo-skiplink {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--lintblauw); color: #fff; padding: var(--s-sm) var(--s-md);
}
.rvo-skiplink:focus { left: var(--s-sm); top: var(--s-sm); }

/* ---- Koppen ---------------------------------------------------------- */
.rvo-h1 { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.1; font-weight: 700; color: var(--lintblauw); margin: 0 0 var(--s-md); letter-spacing: -0.01em; }
.rvo-h2 { font-size: 1.5rem; line-height: 1.2; font-weight: 700; color: var(--lintblauw); margin: 0 0 var(--s-md); }
.rvo-kicker { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--violet); margin: 0 0 var(--s-xs); }
.rvo-intro { font-size: 1.125rem; line-height: 1.6; max-width: 70ch; color: var(--lintblauw); margin: 0 0 var(--s-xl); }
.rvo-hint { font-size: 0.9375rem; color: var(--lintblauw-75); margin: 0 0 var(--s-md); }

/* ---- Links ----------------------------------------------------------- */
.rvo-link { color: var(--hemelblauw); text-decoration: underline; text-underline-offset: 2px; }
.rvo-link:hover { color: var(--hemelblauw-hover); text-decoration-thickness: 2px; }
.rvo-link--action { font-weight: 700; }

/* ---- Focus (WCAG) ---------------------------------------------------- */
:focus-visible { outline: 2px solid var(--hemelblauw); outline-offset: 2px; border-radius: 2px; }

/* ---- Header ---------------------------------------------------------- */
.rvo-header { border-bottom: 1px solid var(--lintblauw-15); background: var(--wit); }
.rvo-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-lg); min-height: 96px; padding: var(--s-sm) 0; flex-wrap: wrap; }
.rvo-logo { display: inline-flex; align-items: center; text-decoration: none; }
.rvo-logo__img { display: block; width: auto; height: 56px; }       /* basis, beeldmerk ~50px */
.rvo-logo__img--compact { display: none; }
@media (max-width: 900px) { .rvo-logo__img--basis { height: 50px; } } /* tablet */
@media (max-width: 600px) {
  .rvo-logo__img--basis { display: none; }                           /* mobiel: compacte versie */
  .rvo-logo__img--compact { display: block; height: 46px; }
}
.rvo-nav ul { list-style: none; display: flex; gap: var(--s-lg); margin: 0; padding: 0; }
.rvo-nav a { color: var(--lintblauw); text-decoration: none; font-weight: 600; padding: var(--s-2xs) 0; }
.rvo-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--violet); }
.rvo-nav a:hover { color: var(--hemelblauw); }

/* ---- Main ------------------------------------------------------------ */
.rvo-main { padding: var(--s-xl) var(--s-lg) var(--s-3xl); }

.rvo-breadcrumb { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-xs); padding: 0; margin: 0 0 var(--s-xl); font-size: 0.875rem; }
.rvo-breadcrumb__item { display: flex; align-items: center; gap: var(--s-xs); color: var(--lintblauw-75); }
.rvo-breadcrumb__item:not(:last-child)::after { content: "›"; color: var(--lintblauw-30); }

.iadm-section { margin: var(--s-2xl) 0; }

/* ---- Draft banner ---------------------------------------------------- */
.iadm-draft {
  border-radius: 0 var(--corner) 0 0; background: var(--violet-15);
  border: 1px solid color-mix(in srgb, var(--violet) 35%, #fff);
  padding: var(--s-sm) var(--s-md); margin-bottom: var(--s-lg); font-size: 0.9375rem;
}

/* =====================================================================
   Hoofdthema-tegels
   ===================================================================== */
.iadm-themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-md); }
.iadm-theme {
  font-family: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: var(--s-md);
  padding: var(--s-lg); min-height: 150px;
  border: 1px solid var(--lintblauw-30); background: var(--wit);
  border-radius: 0 var(--corner) 0 0;              /* signatuur: één afgeronde hoek */
  color: var(--lintblauw); transition: transform .15s, box-shadow .15s;
}
.iadm-theme__icon svg { width: 40px; height: 40px; }
.iadm-theme__label { font-weight: 700; font-size: 1.0625rem; line-height: 1.2; }
/* Actief (prominent, lichtblauw primair) */
.iadm-theme.is-active { background: var(--lichtblauw); border-color: var(--lichtblauw); }
.iadm-theme.is-active:hover { transform: translateY(-2px); box-shadow: 0 6px 0 -2px var(--lintblauw-15); }
/* Inactief (gedempt, niet klikbaar) */
.iadm-theme.is-inactive { background: var(--wit); color: var(--lintblauw-60); border-style: dashed; cursor: not-allowed; }
.iadm-theme.is-inactive .iadm-theme__icon { opacity: .5; }

/* =====================================================================
   Filtergroepen + opties
   ===================================================================== */
.iadm-filters { display: flex; flex-direction: column; gap: var(--s-xl); }
.iadm-group__title { font-size: 1.125rem; font-weight: 700; color: var(--lintblauw); margin: 0 0 var(--s-sm); }
.iadm-group__options { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s-sm); }

.iadm-option {
  font-family: inherit; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: var(--s-sm);
  padding: var(--s-sm) var(--s-md); min-height: 60px;
  background: var(--wit); color: var(--lintblauw);
  border: 1.5px solid var(--lintblauw-30); border-radius: var(--corner-sm);
  transition: border-color .12s, background .12s, color .12s;
}
.iadm-option__icon { flex: 0 0 auto; display: inline-flex; }
.iadm-option__icon svg { width: 26px; height: 26px; }
.iadm-option__label { font-weight: 600; font-size: 0.9375rem; line-height: 1.15; min-width: 0; overflow-wrap: break-word; }
.iadm-option:hover { border-color: var(--hemelblauw); color: var(--hemelblauw); }
/* Geselecteerd = violet accent (krachtige primaire kleur) */
.iadm-option.is-on { background: var(--violet); border-color: var(--violet); color: #fff; }
.iadm-option.is-on:hover { background: var(--violet); color: #fff; }

/* =====================================================================
   Buttons
   ===================================================================== */
.rvo-btn {
  font-family: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
  padding: var(--s-xs) var(--s-md); border-radius: var(--corner-sm);
  border: 1.5px solid var(--hemelblauw); background: var(--hemelblauw); color: #fff;
}
.rvo-btn:hover { background: var(--hemelblauw-hover); border-color: var(--hemelblauw-hover); }
.rvo-btn--secondary { background: #fff; color: var(--hemelblauw); }
.rvo-btn--secondary:hover { background: #fff; color: var(--hemelblauw-hover); }
.rvo-btn--tertiary { background: transparent; border-color: transparent; color: var(--hemelblauw); text-decoration: underline; padding-inline: 0; }

/* =====================================================================
   Resultaten
   ===================================================================== */
.iadm-results__bar { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-md); flex-wrap: wrap; }
.iadm-results__meta { display: flex; align-items: center; gap: var(--s-md); }
.iadm-count { font-size: 0.9375rem; color: var(--lintblauw-75); font-weight: 600; }
.iadm-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-sm); margin-top: var(--s-sm); }
.iadm-result {
  font-family: inherit; cursor: pointer; text-align: left;
  padding: var(--s-md); min-height: 76px;
  background: var(--wit); color: var(--lintblauw); font-weight: 600; font-size: 0.9375rem; line-height: 1.3;
  border: 1px solid var(--lintblauw-30); border-radius: 0 var(--corner) 0 0;
  transition: background .12s, border-color .12s, transform .12s;
}
.iadm-result:hover { background: var(--lichtblauw-15); border-color: var(--lichtblauw); transform: translateY(-2px); }
.iadm-empty { color: var(--lintblauw-75); background: var(--lintblauw-15); padding: var(--s-md); border-radius: var(--corner-sm); }

/* =====================================================================
   Detail-dialog (afgeronde-hoek container)
   ===================================================================== */
.iadm-dialog { border: none; padding: 0; max-width: 640px; width: calc(100% - 32px); background: transparent; }
.iadm-dialog::backdrop { background: color-mix(in srgb, var(--lintblauw) 55%, transparent); }
.iadm-dialog__inner { background: var(--wit); border-radius: 0 var(--corner) 0 0; overflow: hidden; box-shadow: 0 20px 50px -20px rgba(21,66,115,.55); }
.iadm-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-md); background: var(--lintblauw); color: #fff; padding: var(--s-lg); }
.iadm-dialog__title { margin: 0; font-size: 1.375rem; line-height: 1.2; font-weight: 700; }
.iadm-dialog__close { background: transparent; border: none; color: #fff; font-size: 1.75rem; line-height: 1; cursor: pointer; padding: 0 var(--s-2xs); }
.iadm-dialog__close:hover { color: var(--lichtblauw); }
.iadm-dialog__body { padding: var(--s-lg); }
.iadm-dialog__body p { margin: 0 0 var(--s-md); }
.iadm-dialog__contact { color: var(--lintblauw-75); }
.iadm-dialog__tags { display: flex; flex-wrap: wrap; gap: var(--s-xs); padding: 0 var(--s-lg) var(--s-lg); }
.iadm-tag { display: inline-flex; align-items: center; gap: var(--s-2xs); font-size: 0.8125rem; padding: var(--s-2xs) var(--s-xs); border: 1px solid var(--lintblauw-30); border-radius: 999px; color: var(--lintblauw); }
.iadm-tag__icon svg { width: 16px; height: 16px; }

/* =====================================================================
   Footer
   ===================================================================== */
.rvo-footer { margin-top: var(--s-3xl); }
.rvo-footer__ribbon { height: 8px; background: var(--violet); }
.rvo-footer__inner { background: var(--lintblauw); color: #fff; padding: var(--s-xl) var(--s-lg); }
.rvo-footer__inner p { margin: 0 0 var(--s-2xs); font-size: 0.9375rem; }
.rvo-footer__inner .rvo-link { color: #fff; }
.rvo-footer__inner .rvo-link:hover { color: var(--lichtblauw); }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 600px) {
  .rvo-main { padding-left: var(--s-md); padding-right: var(--s-md); }
  .rvo-container { padding: 0 var(--s-md); }
  .iadm-results { grid-template-columns: 1fr 1fr; }
  .rvo-nav ul { gap: var(--s-md); }
}
@media (max-width: 400px) {
  .iadm-results { grid-template-columns: 1fr; }
}