/*
 * Base CSS
 * Minimal, accessible foundation derived from Dutch government design.
 * Uses Inter from Google Fonts - swap --sans-font-family to customize.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Colors - Core */
  --white: #ffffff;
  --black: #000000;

  /* Colors - Brand */
  --sky-blue: #007bc7;
  --dark-blue: #01689b;
  --logo-blue: #154273;
  --green: #39870c;
  --dark-yellow: #ffb612;
  --red: #d52b1e;
  --orange: #e17000;
  --cadillac-red: #884488;

  /* Colors - Grays */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* Colors - Semantic (using color-mix for lighter variants) */
  --error: color-mix(in lch, var(--red) 15%, white);
  --warning: color-mix(in lch, var(--dark-yellow) 15%, white);
  --confirmation: color-mix(in lch, var(--green) 15%, white);
  --information: color-mix(in lch, var(--sky-blue) 15%, white);

  /* Typography - Font families */
  --sans-font-family: 'Inter', Calibri, Verdana, Arial, sans-serif;
  --mono-font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
  --font-family: var(--sans-font-family);


  /* Typography - Type scale (stepped sizes with matching line heights) */
  --font-size-step-negative-2: 12px;
  --line-height-step-negative-2: 20px;
  --line-height-step-negative-2-body-text: 21px;

  --font-size-step-negative-1: 14px;
  --line-height-step-negative-1: 21px;
  --line-height-step-negative-1-body-text: 24px;

  --font-size-step-0: 16px;
  --line-height-step-0: 23px;
  --line-height-step-0-body-text: 26px;

  --font-size-step-1: 18px;
  --line-height-step-1: 25px;
  --line-height-step-1-body-text: 28px;

  --font-size-step-2: 20px;
  --line-height-step-2: 27px;
  --line-height-step-2-body-text: 30px;

  --font-size-step-3: 22px;
  --line-height-step-3: 29px;
  --line-height-step-3-body-text: 32px;

  --font-size-step-4: 24px;
  --line-height-step-4: 31px;
  --line-height-step-4-body-text: 34px;

  --font-size-step-5: 28px;
  --line-height-step-5: 34px;
  --line-height-step-5-body-text: 38px;

  --font-size-step-6: 32px;
  --line-height-step-6: 37px;
  --line-height-step-6-body-text: 42px;

  --font-size-step-7: 36px;
  --line-height-step-7: 41px;
  --line-height-step-7-body-text: 46px;

  --font-size-step-8: 40px;
  --line-height-step-8: 45px;
  --line-height-step-8-body-text: 51px;

  /* Typography - Shorthand (font-size/line-height) */
  --typography-step-negative-2: 12px/20px;
  --typography-step-negative-2-body-text: 12px/21px;
  --typography-step-negative-1: 14px/21px;
  --typography-step-negative-1-body-text: 14px/24px;
  --typography-step-0: 16px/23px;
  --typography-step-0-body-text: 16px/26px;
  --typography-step-1: 18px/25px;
  --typography-step-1-body-text: 18px/28px;
  --typography-step-2: 20px/27px;
  --typography-step-2-body-text: 20px/30px;
  --typography-step-3: 22px/29px;
  --typography-step-3-body-text: 22px/32px;
  --typography-step-4: 24px/31px;
  --typography-step-4-body-text: 24px/34px;
  --typography-step-5: 28px/34px;
  --typography-step-5-body-text: 28px/38px;
  --typography-step-6: 32px/37px;
  --typography-step-6-body-text: 32px/42px;
  --typography-step-7: 36px/41px;
  --typography-step-7-body-text: 36px/46px;
  --typography-step-8: 40px/45px;
  --typography-step-8-body-text: 40px/51px;

  /* Theme colors (easily swappable) */
  --headings-font-weight: 600;
  --headings-color: var(--logo-blue);
  --default-text-color: var(--gray-900);
  --line-color: var(--gray-200);

  /* Links */
  --default-link-color: var(--sky-blue);
  --alt-link-color: var(--dark-blue);
  --visited-link-color: var(--cadillac-red);
  --hover-factor: 70%;
  --default-link-hover-color: color-mix(in lch, var(--default-link-color) var(--hover-factor), black);
  --alt-link-hover-color: color-mix(in lch, var(--alt-link-color) var(--hover-factor), black);

  /* Text decoration */
  --text-decoration-thickness-regular: 1px;
  --default-text-underline-offset: 0.15em;

  /* Buttons */
  --default-button-color: var(--dark-blue);
  --default-button-text-color: var(--white);
  --default-button-text-hover-color: var(--white);
  --default-button-height: 48px;
  --default-button-padding: 0 16px;
}
*,*::before,*::after,html{box-sizing:border-box}html{overflow-y:scroll;min-height:100%;scroll-behavior:smooth;line-height:1.15;-webkit-text-size-adjust:100%}body{font:var(--typography-step-0-body-text) var(--font-family);font-variant-ligatures:none;color:var(--default-text-color);margin:0;padding:0}blockquote,body,caption,dd,dl,fieldset,figure,form,h1,h2,h3,h4,h5,h6,hr,legend,ol,p,pre,table,td,th,ul{margin:0;padding:0}address,blockquote,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,ol,p,pre,table,ul{margin-block-end:12px}dd,ol,ul{margin-inline-start:16px}img,picture,video,canvas,svg{display:block;max-width:100%}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-0.25em}sup{top:-0.5em}abbr[title],dfn[title]{cursor:help;text-decoration:underline dotted}code,kbd,samp,pre{font-family:var(--mono-font-family);font-size:1em}h1,h2,h3,h4,h5,h6{font-weight:var(--headings-font-weight);font-family:var(--font-family);color:var(--headings-color);text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:clamp(var(--font-size-step-6),2.985vw + 1.194rem,var(--font-size-step-8));line-height:clamp(var(--line-height-step-6),2.985vw + 1.507rem,var(--line-height-step-8))}h2{font-size:clamp(var(--font-size-step-4),2.985vw + 0.694rem,var(--font-size-step-6));line-height:clamp(var(--line-height-step-4),2.239vw + 1.333rem,var(--line-height-step-6));margin-block-end:clamp(8px,1.493vw + 0.097rem,12px)}h3{font-size:clamp(var(--font-size-step-3),0.746vw + 1.174rem,var(--font-size-step-4));line-height:clamp(var(--line-height-step-3),0.746vw + 1.611rem,var(--line-height-step-4));margin-block-start:clamp(12px,4.478vw - 0.459rem,24px);margin-block-end:clamp(8px,1.493vw + 0.097rem,12px)}h4{font-size:clamp(var(--font-size-step-1),0.746vw + 0.924rem,var(--font-size-step-2));line-height:clamp(var(--line-height-step-1),0.746vw + 1.361rem,var(--line-height-step-2));margin-block-start:clamp(4px,4.478vw - 0.959rem,16px);margin-block-end:clamp(4px,1.493vw - 0.153rem,8px)}h5,h6{font-size:var(--font-size-step-1);line-height:var(--line-height-step-1)}p,li,dt,dl{font-size:clamp(var(--font-size-step-1),0.746vw + 0.924rem,var(--font-size-step-2));line-height:clamp(var(--line-height-step-1-body-text),0.746vw + 1.549rem,var(--line-height-step-2-body-text));font-weight:400;color:var(--default-text-color)}p{margin-block-end:clamp(12px,1.493vw + 0.347rem,16px)}p:last-child{margin-block-end:0}a{--link-color:var(--default-link-color);--link-hover-color:var(--default-link-hover-color);color:var(--link-color);text-decoration:underline;text-decoration-thickness:var(--text-decoration-thickness-regular);text-underline-offset:var(--default-text-underline-offset);cursor:pointer}a:hover{color:var(--link-hover-color);text-decoration:none}a:visited{color:var(--visited-link-color)}a:focus{position:relative;z-index:1010;outline:2px dashed var(--default-text-color);outline-offset:3px}ol,ul{margin-block-end:clamp(16px,1.493vw + 0.597rem,20px)}ol:last-child,ul:last-child{margin-block-end:0}li{position:relative;hyphens:auto}li:not(:last-child){margin-block-end:8px}li ol,li ul{margin-block-start:8px;margin-block-end:8px}ul{margin-inline-start:clamp(18px,0.746vw + 0.924rem,20px)}ol{margin-inline-start:clamp(27px,1.119vw + 1.385rem,30px)}ol li{padding-inline-start:clamp(5px,1.119vw + 0.01rem,8px)}hr{height:1px;background-color:var(--line-color);border:none;margin-block:clamp(16px,2.985vw + 0.194rem,24px)}blockquote{padding-inline-start:20px;border-inline-start:4px solid var(--gray-300);margin-block:24px;font-style:italic}blockquote p:last-child{margin-block-end:0}code{font-size:clamp(var(--font-size-step-negative-1),0.746vw + 0.674rem,var(--font-size-step-0));background-color:var(--gray-100);padding:0.125em 0.375em;border-radius:3px}pre{background-color:var(--gray-100);padding:16px;overflow-x:auto;margin-block-end:clamp(16px,1.493vw + 0.597rem,20px)}pre code{background:none;padding:0}table{margin-block-start:clamp(20px,1.493vw + 0.847rem,24px);margin-block-end:clamp(20px,1.493vw + 0.847rem,24px);width:100%;border-collapse:collapse;background-color:var(--gray-100)}table:last-child{margin-block-end:0}caption,th,td,li p{font-size:clamp(var(--font-size-step-negative-1),0.746vw + 0.674rem,var(--font-size-step-0));line-height:clamp(var(--line-height-step-negative-1),0.746vw + 1.111rem,var(--line-height-step-0));font-weight:400;text-align:start}caption{margin-block-end:12px;color:var(--gray-600)}th,td{padding:12px;border-inline-end:2px solid var(--white);border-block-end:2px solid var(--white);vertical-align:top}th:last-child,td:last-child{border-inline-end:none}th{background-color:var(--gray-200);font-weight:var(--headings-font-weight);hyphens:manual}table a{--link-color:var(--alt-link-color);--link-hover-color:var(--alt-link-hover-color)}:where(button),input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type="button"],[type="reset"],[type="submit"],button{-webkit-appearance:button}fieldset{display:block;margin-inline-start:unset;margin-inline-end:unset;padding:unset;min-inline-size:unset;border:unset;margin-block-end:clamp(32px,5.97vw + 0.388rem,48px)}fieldset:last-child{margin-block-end:0}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;font-size:clamp(var(--font-size-step-3),0.746vw + 1.174rem,var(--font-size-step-4));line-height:clamp(var(--line-height-step-3),0.746vw + 1.611rem,var(--line-height-step-4));font-weight:var(--headings-font-weight);margin-block-end:clamp(8px,1.493vw + 0.097rem,12px)}label{font-size:clamp(var(--font-size-step-1),0.746vw + 0.924rem,var(--font-size-step-2));line-height:clamp(var(--line-height-step-1),0.746vw + 1.361rem,var(--line-height-step-2));font-weight:400;color:var(--default-text-color);margin-bottom:0;display:block}label:not(:has(+ input,+ select,+ textarea)){margin-block-end:8px}input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="tel"],input[type="url"],input[type="search"],input[type="date"],input[type="datetime-local"],textarea{--input-padding:16px;display:block;width:100%;font-family:var(--font-family);font-size:clamp(var(--font-size-step-1),0.746vw + 0.924rem,var(--font-size-step-2));line-height:clamp(var(--line-height-step-1),0.746vw + 1.361rem,var(--line-height-step-2));font-weight:400;color:var(--default-text-color);background-color:var(--white);background-clip:padding-box;border:1px solid var(--gray-500);border-radius:0;padding:0 var(--input-padding);height:48px}textarea{height:auto;min-height:120px;padding:12px var(--input-padding);resize:vertical}input:focus,textarea:focus,select:focus{position:relative;z-index:1010;outline:2px dashed var(--default-text-color);outline-offset:3px}input::placeholder,textarea::placeholder{color:var(--gray-400)}select{display:flex;align-items:stretch;justify-content:space-between;height:48px;width:100%;font-family:var(--font-family);font-size:clamp(var(--font-size-step-0),0.746vw + 0.799rem,var(--font-size-step-1));line-height:clamp(var(--line-height-step-0),0.746vw + 1.236rem,var(--line-height-step-1));font-weight:400;padding-inline:16px;padding-block:0;border-radius:0;border:1px solid var(--gray-500);background-color:var(--white);cursor:pointer}input[type="checkbox"],input[type="radio"]{width:24px;height:24px;margin:0;cursor:pointer;accent-color:var(--default-button-color)}:where(.button){--button-color:var(--default-button-color);--button-text-color:var(--default-button-text-color);--button-text-hover-color:var(--default-button-text-hover-color);position:relative;margin:0;text-align:left;text-decoration:none;vertical-align:top;border:0;border-radius:0;outline:none;cursor:pointer;display:inline-flex;flex-shrink:0;align-items:center;justify-content:space-between;width:fit-content;min-height:40px;height:var(--default-button-height);padding:var(--default-button-padding);font:var(--typography-step-2) var(--font-family);background-color:var(--button-color);color:var(--button-text-color)}:where(.button):hover,:where(.button):active{background-color:color-mix(in lch,var(--button-color) var(--hover-factor),black);color:var(--button-text-hover-color)}:where(.button):focus{position:relative;z-index:1010;outline:2px dashed var(--default-text-color);outline-offset:3px}:where(.button):focus::after{content:"";position:absolute;z-index:-1;inset:-5px;border:2px solid var(--white)}:where(.button):disabled{background:var(--gray-200);color:var(--gray-400);box-shadow:none;outline:none;cursor:not-allowed}:where(.button).has-icon{display:flex;gap:8px}.button--ghost{background-color:transparent;color:var(--button-color);border:1px solid var(--button-color)}.button--ghost:hover,.button--ghost:active{background-color:color-mix(in lch,var(--button-color) var(--hover-factor),white);color:var(--white);border-color:transparent}.sr-only,.screen-reader-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}