/* OpenStad Cloud default theme (NL Design System tokens as used by openstad-headless).
   Organisations can replace this with their own theme URL under Projectinstellingen → Vormgeving. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap');

:root {
  --oc-primary: #1b3a8a;
  --oc-primary-dark: #142c6a;
  --oc-accent: #e3001b;
  --oc-light: #9bd3f5;
  --oc-bg: #eef4f8;
  --oc-ink: #111111;

  /* document */
  --utrecht-document-font-family: 'Manrope', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --utrecht-document-font-size: 17px;
  --utrecht-document-line-height: 1.5;
  --utrecht-document-color: var(--oc-ink);
  --utrecht-document-background-color: #fff;
  --nlds-default-background-color: #fff;
  --utrecht-color-white: #fff;
  --utrecht-color-black: var(--oc-ink);

  /* headings & paragraphs */
  --utrecht-heading-font-family: var(--utrecht-document-font-family);
  --utrecht-heading-color: var(--oc-ink);
  --utrecht-heading-font-weight: 800;
  --utrecht-heading-1-font-size: 2.6rem;
  --utrecht-heading-1-line-height: 1.1;
  --utrecht-heading-2-font-size: 1.9rem;
  --utrecht-heading-2-line-height: 1.15;
  --utrecht-heading-3-font-size: 1.4rem;
  --utrecht-heading-4-font-size: 1.15rem;
  --utrecht-paragraph-font-family: var(--utrecht-document-font-family);
  --utrecht-paragraph-color: var(--oc-ink);
  --utrecht-paragraph-font-size: 17px;
  --utrecht-paragraph-line-height: 1.55;
  --utrecht-paragraph-lead-font-size: 20px;

  /* links */
  --utrecht-link-color: var(--oc-primary);
  --utrecht-link-hover-color: var(--oc-primary-dark);
  --utrecht-link-text-decoration: underline;
  --utrecht-link-social-color: var(--oc-primary);

  /* buttons */
  --utrecht-button-font-family: var(--utrecht-document-font-family);
  --utrecht-button-font-weight: 700;
  --utrecht-button-border-radius: 999px;
  --utrecht-button-padding-inline-start: 20px;
  --utrecht-button-padding-inline-end: 20px;
  --utrecht-button-padding-block-start: 10px;
  --utrecht-button-padding-block-end: 10px;
  --utrecht-button-primary-action-background-color: var(--oc-primary);
  --utrecht-button-primary-action-color: #fff;
  --utrecht-button-primary-action-hover-background-color: var(--oc-primary-dark);
  --utrecht-button-primary-action-hover-color: #fff;
  --utrecht-button-secondary-action-background-color: #fff;
  --utrecht-button-secondary-action-color: var(--oc-primary);
  --utrecht-button-secondary-action-border-color: var(--oc-primary);
  --utrecht-button-secondary-action-border-width: 2px;
  --utrecht-button-subtle-color: var(--oc-primary);

  /* focus */
  --utrecht-focus-outline-color: var(--oc-accent);
  --utrecht-focus-outline-style: solid;
  --utrecht-focus-outline-width: 3px;
  --utrecht-focus-outline-offset: 2px;

  /* header / menu (openstad-headless cms) */
  --nlds-header-compact-background-color: var(--oc-primary);
  --nlds-header-compact-height: 64px;
  --nlds-main-menu-item-color: var(--oc-ink);
  --nlds-footer-before-height: 24px;

  /* forms */
  --utrecht-form-control-border-color: #767676;
  --utrecht-form-control-focus-border-color: var(--oc-primary);
  --utrecht-form-control-border-radius: 10px;
  --utrecht-form-control-font-family: var(--utrecht-document-font-family);
  --utrecht-form-label-font-weight: 700;

  /* spacing helpers used by the widgets */
  --utrecht-space-around: 1rem;
  --utrecht-space-inline-default: 1rem;
}

body {
  font-family: var(--utrecht-document-font-family);
  color: var(--utrecht-document-color);
  -webkit-font-smoothing: antialiased;
}

/* site header: white bar with a clear, bold menu */
.main-header-container { padding-block: 12px; }
.header-top-bar { background: #fff !important; border-bottom: 1px solid #e6e6e6 !important; }
.header_navbar-container, .topmenu-static-container, .topmenu-dynamic-container {
  background: #fff;
}
.topmenu-static-container a, .topmenu-dynamic-container a {
  font-weight: 700;
  color: var(--oc-ink);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 999px;
}
.topmenu-static-container a:hover, .topmenu-dynamic-container a:hover,
.topmenu-static-container a[aria-current], .topmenu-dynamic-container a[aria-current] {
  background: var(--oc-bg);
  color: var(--oc-primary);
}
.extra-menu-buttons .utrecht-button, .extra-menu-buttons a.utrecht-button-link {
  background: var(--oc-primary);
  color: #fff;
  border-radius: 999px;
}

/* content */
h1, .utrecht-heading-1 { font-weight: 800; letter-spacing: -.03em; }
h2, .utrecht-heading-2 { font-weight: 800; letter-spacing: -.02em; }
.utrecht-button--primary-action, .osc .utrecht-button--primary-action { border-radius: 999px; }

/* footer */
footer, .footer { background: var(--oc-bg); }

/* --- header & menu ------------------------------------------------------- */
.main-header-container { padding-block: 18px 10px; }
.main-header-container .logo-main-container { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.main-header-container .header-subtitle {
  margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--oc-ink); line-height: 1.1;
}
.main-header-container .logo-default img { max-height: 44px; width: auto; }
.header-side-container.without-site-title { display: none; }

#navbar { background: var(--oc-primary) !important; padding: 0 !important; margin: 0; }
#navbar .container { padding: 0 24px; }
#navbar #main-menu, #navbar ul { display: flex !important; flex-wrap: wrap; gap: 4px; align-items: center; list-style: none; margin: 0; padding: 6px 0; }
#navbar #main-menu a, #navbar ul a {
  display: inline-block !important; color: #fff !important; font-size: 16px !important; font-weight: 700 !important;
  padding: 10px 14px !important; border-radius: 999px; text-decoration: none !important; line-height: 1.2;
}
#navbar #main-menu a:hover, #navbar ul a:hover, #navbar #main-menu a[aria-current], #navbar ul a[aria-current] {
  background: rgba(255,255,255,.16); color: #fff !important;
}
#navbar #main-menu .submenu { background: var(--oc-primary-dark); border-radius: 0 0 12px 12px; }
.cta-buttons .utrecht-button, .cta-buttons a { border-radius: 999px; }
.logo-default.logo-main-container { width: auto !important; max-width: 70%; }
.header-subtitle--default { white-space: nowrap; }
@media (max-width: 600px) { .header-subtitle--default { white-space: normal; font-size: 22px; } }