/* Dutch App Patches Brand Kit 1.0, adapted to Material for MkDocs.
   Artwork and font sources: ../brand/SOURCES.md. All fonts are self-hosted. */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk.woff") format("woff");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("../fonts/Inter.woff") format("woff");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --dap-font-display: "Space Grotesk", Inter, system-ui, sans-serif;
  --dap-font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --dap-font-data: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --dap-radius-control: 8px;
  --dap-radius-card: 16px;
  --dap-focus-duration: 120ms;
  --md-text-font: var(--dap-font-body);
  --md-code-font: var(--dap-font-data);
}

/* Semantic colours match 05-tokens/brand-tokens.css from the supplied kit. */
:root,
[data-md-color-scheme="default"] {
  --dap-bg: #f8f5ee;
  --dap-surface: #fff;
  --dap-raised: #eef2f5;
  --dap-text: #162d44;
  --dap-muted: #546577;
  --dap-accent: #a64212;
  --dap-primary: #a64212;
  --dap-onPrimary: #fff;
  --dap-secondary: #315ccf;
  --dap-border: #718399;
  --dap-divider: #d6dfe5;
  --dap-focus: #315ccf;
  --dap-selection: #fff0e5;
  --dap-success: #176946;
  --dap-warning: #805000;
  --dap-danger: #af3340;
  --dap-accent-transparent: #a6421214;
}

[data-md-color-scheme="slate"] {
  --md-hue: 209;
  --dap-bg: #101d2b;
  --dap-surface: #182b3e;
  --dap-raised: #22394e;
  --dap-text: #f4f6f8;
  --dap-muted: #b4c2d0;
  --dap-accent: #ffae7a;
  --dap-primary: #f06a28;
  --dap-onPrimary: #142333;
  --dap-secondary: #a8c0ff;
  --dap-border: #7890a8;
  --dap-divider: #3e5369;
  --dap-focus: #a8c0ff;
  --dap-selection: #49301f;
  --dap-success: #8bd4b5;
  --dap-warning: #f0cb87;
  --dap-danger: #ffb3b9;
  --dap-accent-transparent: #ffae7a14;
}

[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #162d44;
  --md-primary-fg-color--light: #22394e;
  --md-primary-fg-color--dark: #101d2b;
  --md-primary-bg-color: #f4f6f8;
  --md-primary-bg-color--light: #b4c2d0;
  --md-default-bg-color: var(--dap-bg);
  --md-default-bg-color--light: var(--dap-surface);
  --md-default-bg-color--lighter: var(--dap-raised);
  --md-default-fg-color: var(--dap-text);
  --md-default-fg-color--light: var(--dap-muted);
  --md-default-fg-color--lighter: var(--dap-border);
  --md-default-fg-color--lightest: var(--dap-divider);
  --md-accent-fg-color: var(--dap-accent);
  --md-accent-fg-color--transparent: var(--dap-accent-transparent);
  --md-accent-bg-color: var(--dap-bg);
  --md-typeset-color: var(--dap-text);
  --md-typeset-a-color: var(--dap-secondary);
  --md-code-bg-color: var(--dap-raised);
  --md-code-fg-color: var(--dap-text);
  --md-typeset-table-color: var(--dap-divider);
  --md-typeset-table-color--light: var(--dap-accent-transparent);
  --md-typeset-mark-color: var(--dap-selection);
  --md-footer-bg-color: #162d44;
  --md-footer-bg-color--dark: #101d2b;
  --md-footer-fg-color: #f4f6f8;
  --md-footer-fg-color--light: #b4c2d0;
  --md-footer-fg-color--lighter: #b4c2d0;
}

::selection { background: var(--dap-selection); color: var(--dap-text); }
html { scroll-padding-top: 6rem; }
body { font-family: var(--dap-font-body); }
.md-grid { max-width: 76rem; }
.md-header { box-shadow: none; border-bottom: 3px solid #f06a28; }
.md-header__title { font-family: var(--dap-font-display); font-weight: 600; }
.md-header__button.md-logo img,
.md-header__button.md-logo svg { width: 1.6rem; height: 1.6rem; }
.md-tabs { background: #162d44; }
.md-tabs__link { opacity: 1; color: #b4c2d0; }
.md-tabs__link:is(:hover, :focus),
.md-tabs__link--active { color: #f4f6f8; }
.md-search__form { border-radius: var(--dap-radius-control); }
.md-nav { font-size: .7rem; }
.md-nav__title { font-family: var(--dap-font-display); }
.md-nav__item .md-nav__link--active { font-weight: 600; }
/* On desktop, category children must read as children of their parent page.
   Mobile uses Material's separate navigation panels for these levels. */
@media screen and (min-width: 76.25em) {
  .md-nav--primary .md-nav[data-md-level="2"] { margin-inline-start: 0; }
  .md-nav--primary .md-nav[data-md-level="2"] > .md-nav__list {
    margin-inline-start: .15rem;
    padding-inline-start: .7rem;
    border-inline-start: 1px solid var(--dap-divider);
  }
}
.md-typeset { font-size: .8rem; line-height: 1.75; }
.md-typeset :is(h1, h2, h3, h4) { font-family: var(--dap-font-display); font-weight: 600; color: var(--dap-text); }
.md-typeset h1 { font-size: 2.15rem; line-height: 1.17; letter-spacing: -.035em; }
.md-typeset h2 { margin-top: 2em; font-size: 1.4rem; line-height: 1.3; letter-spacing: -.02em; }
.md-typeset h3 { line-height: 1.4; }
.md-typeset p { max-width: 50rem; }
.md-typeset a { text-underline-offset: .18em; }
.md-typeset p a:not(.md-button),
.md-typeset li a:not(.md-button) { text-decoration: underline; text-decoration-thickness: .06em; }
.md-typeset a:is(:hover, :focus) { color: var(--dap-accent); }
.md-typeset :is(code, pre, kbd) { font-family: var(--dap-font-data); }
.md-typeset :not(pre) > code { padding: .1em .35em; border-radius: 4px; overflow-wrap: anywhere; }
.md-typeset hr { border-color: var(--dap-divider); }
.md-typeset blockquote { color: var(--dap-muted); border-color: var(--dap-border); }

/* Table wrappers keep exact versions and package identifiers usable on phones. */
.md-typeset .md-typeset__table { display: block; max-width: 100%; }
.md-typeset .md-typeset__scrollwrap { overflow-x: auto; overscroll-behavior-x: contain; }
.md-typeset table:not([class]) { display: table; width: 100%; border: 1px solid var(--dap-divider); border-radius: 10px; font-size: .72rem; }
.md-typeset table:not([class]) th { min-width: 5rem; color: var(--dap-text); background: var(--dap-raised); font-family: var(--dap-font-display); font-weight: 600; }
.md-typeset table:not([class]) :is(th, td) { padding: .7em .9em; }
.md-typeset table:not([class]) td { vertical-align: top; }
.md-typeset table:not([class]) td code { white-space: normal; overflow-wrap: anywhere; }
.md-typeset table:not([class]) tr:hover { background: var(--dap-accent-transparent); }

/* Home: restrained editorial layout; the supplied lockups retain proportions. */
.dap-hero { margin: .4rem 0 2rem; padding: 1.6rem 0 1.8rem; border-bottom: 1px solid var(--dap-divider); }
.dap-hero__logo { display: block; width: min(100%, 23rem); height: auto; margin-bottom: 1.6rem; }
.md-typeset .dap-hero h1 { margin: 0 0 .7rem; max-width: 25ch; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.12; }
.md-typeset .dap-lead { max-width: 43rem; font-size: 1rem; line-height: 1.6; color: var(--dap-muted); }
.dap-eyebrow { margin: 0 0 .6rem; color: var(--dap-accent); font-family: var(--dap-font-data); font-size: .65rem; letter-spacing: .06em; text-transform: uppercase; }
.dap-logo--dark { display: none; }
[data-md-color-scheme="slate"] .dap-logo--light { display: none; }
[data-md-color-scheme="slate"] .dap-logo--dark { display: block; }
.md-typeset .md-button { margin: .3rem .4rem .3rem 0; padding: .6em 1em; color: var(--dap-accent); border: 1px solid currentColor; border-radius: var(--dap-radius-control); font-weight: 600; line-height: 1.5; transition: background-color var(--dap-focus-duration), color var(--dap-focus-duration); }
.md-typeset .md-button--primary { color: var(--dap-onPrimary); background: var(--dap-primary); border-color: var(--dap-primary); }
.md-typeset .md-button:is(:hover, :focus) { color: var(--dap-text); background: var(--dap-selection); border-color: var(--dap-accent); }
.md-typeset .md-button--primary:is(:hover, :focus) { color: var(--dap-onPrimary); background: var(--dap-primary); border-color: var(--dap-primary); text-decoration: underline; }

.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card { padding: 1.1rem; background: var(--dap-surface); border: 1px solid var(--dap-divider); border-radius: var(--dap-radius-card); box-shadow: none; transition: border-color var(--dap-focus-duration); }
.md-typeset .grid.cards > ul > li:is(:hover, :focus-within) { border-color: var(--dap-accent); box-shadow: none; }
.md-typeset .grid.cards hr { margin: .8rem 0; }
.md-typeset .grid.cards .lg { color: var(--dap-accent); }
.md-typeset .grid.cards > ul > li > :first-child { margin-top: 0; }
.md-typeset .grid.cards > ul > li > :last-child { margin-bottom: 0; }
.dap-data { font-family: var(--dap-font-data); font-variant-numeric: tabular-nums; }
.dap-notice { padding: .8rem 1rem; border-inline-start: 3px solid var(--dap-accent); background: var(--dap-surface); border-radius: 0 var(--dap-radius-control) var(--dap-radius-control) 0; }

.md-typeset :is(.admonition, details) { border-radius: var(--dap-radius-control); }
.md-typeset :is(.admonition, details).note { border-color: var(--dap-secondary); }
.md-typeset :is(.admonition, details).warning { border-color: var(--dap-warning); }
.md-typeset :is(.admonition, details).danger { border-color: var(--dap-danger); }
:focus-visible { outline: 3px solid var(--dap-focus); outline-offset: 3px; }
.md-header :focus-visible,
.md-tabs :focus-visible,
.md-footer :focus-visible { outline-color: #a8c0ff; }

@media screen and (max-width: 76.234375em) {
  .md-nav--primary .md-nav__title[for="__drawer"] { background-color: #162d44; color: #f4f6f8; }
}
@media screen and (max-width: 44.984375em) {
  .md-typeset h1 { font-size: 1.7rem; }
  .dap-hero { padding-top: .5rem; }
  .dap-hero__logo { width: min(100%, 19rem); margin-bottom: 1.2rem; }
  .md-typeset .dap-lead { font-size: .9rem; }
  .md-typeset .grid { grid-template-columns: minmax(0, 1fr); }
  .md-typeset .md-button { max-width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dap-focus-duration: 0ms; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
  .dap-logo--dark { display: none !important; }
  .dap-logo--light { display: block !important; }
  .md-typeset .grid.cards > ul > li { break-inside: avoid; }
}