/**
 * @file theme.css
 * shadcn/ui-compatible theme variables for Mercury.
 *
 * You can customize these values without rebuilding the compiled CSS.
 * Tools like https://tweakcn.com can help generate these values. Copy this
 * file to your web root, so it sits next to index.php, and clear Drupal's
 * cache. Then, any changes you make in this file should be reflected right away.
 */

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.13 0.043 265.132);
  --card: oklch(0.967 0.003 264.542);
  --card-foreground: oklch(0.21 0.032 264.665);
  --primary: oklch(0.547 0.246 262.866);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.9219 0 0);
  --secondary-foreground: oklch(0.28 0.041 260.329);
  --muted: oklch(0.967 0.003 264.542);
  --muted-foreground: oklch(0.373 0.031 259.733);
  --accent: oklch(0.932 0.032 255.585);
  --accent-foreground: var(--foreground);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.872 0.009 258.338);
  --input: oklch(0.872 0.009 258.338);
  --font-sans: "Outfit", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-sm: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 4px 6px -2px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 8px 10px -2px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 12px 14px -3px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 16px 18px -3px hsl(0 0% 0% / 0.1);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Set navbar height for hero billboard overlay */
  --navbar-height: calc(var(--spacing) * 15);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 18);
  }
}

.dark {
  --background: oklch(0.13 0.043 265.132);
  --foreground: oklch(1 0 89.876);
  --card: oklch(0.208 0.042 266.359);
  --card-foreground: var(--foreground);
  --primary: oklch(0.547 0.246 262.866);
  --primary-foreground: var(--foreground);
  --secondary: oklch(0.704 0.04 256.993);
  --secondary-foreground: oklch(0.13 0.043 265.132);
  --muted: oklch(0.28 0.041 260.329);
  --muted-foreground: oklch(0.967 0.003 264.542);
  --accent: oklch(0.932 0.032 255.585);
  --accent-foreground: oklch(0.13 0.043 265.132);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.373 0.031 259.733);
  --input: oklch(0.373 0.031 259.733);
  --font-sans: "Outfit", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 12px 14px -1px hsl(0 0% 0% / 0.1);
}

/* Smooth scroll */
html { scroll-behavior: smooth; }
h2, h3 { scroll-margin-top: 10px; }

/* TOC default (desktop/tablet) */
.vw-toc {
  position: sticky;
  top: 10px;
  align-self: start;
  border-left: 1px solid rgba(0,0,0,0.08);
  padding-left: 10px;
  font-size: 12px;
  line-height: 1.2;
}

.vw-toc-title { font-weight: 600; margin: 0 0 10px 0; }
.vw-toc ul { list-style: none; padding: 0; margin: 0; }
.vw-toc li { margin: 6px 0; }

.vw-toc a {
  text-decoration: none;
  transition: color 0.2s ease, text-decoration-color 0.2s ease, opacity 0.2s ease;
}

.vw-toc .lvl-h3 { padding-left: 12px; font-size: 11px; opacity: 0.60; }

/* Actieve TOC link */
.vw-toc a.is-active {
  color: color-mix(in oklab,var(--primary)100%,transparent);
}

/* Hover boven TOC link */
.vw-toc a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: color-mix(in oklab,var(--primary)100%,transparent);
}

/* Mobile: niet sticky, gewoon boven artikel */
@media (max-width: 767px) {
  .vw-toc {
    position: static;
    top: auto;
    border-left: 0;
    padding-left: 0;
    margin-bottom: 16px;
  }
}

/* logo stretcht horizontaal op safari oplossen */
  .branding img {
    width: 200px;
    max-width: 100%;
    height: auto;
  }


/* Header border below */ 
.region-header {
  border-bottom: 1px solid rgba(0,0,0,0.08);
}



/* Header: fixed position 
@media (min-width: 767px) {
.region-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
}
.region-header .navbar {
  background: #fff;
}
body {
  padding-top: 76px;
}

}
*/

/*lettergroottes aanpassen */
@theme {

 

  --text-9xl: 4.5rem; /* 72px */
  --text-9xl--line-height: 1; /* 72px */

  --text-8xl: 3.75rem; /* 60px */
  --text-8xl--line-height: 1; /* 60px */

  --text-7xl: 3rem; /* 48px */
  --text-7xl--line-height: 1.083333; /* 52px */

  --text-6xl: 2.5rem; /* 40px */
  --text-6xl--line-height: 1.2; /* 48px */

  --text-5xl: 2rem; /* 32px */
  --text-5xl--line-height: 1.3125; /* 42px */

  --text-4xl: 1.5rem; /* 24px */
  --text-4xl--line-height: 1.3333; /* 32px */

  --text-3xl: 1.25rem; /* 20px */
  --text-3xl--line-height: 1.35; /* 30px */

  --text-2xl: 1.125rem; /* 18px */
  --text-2xl--line-height: 1.5; /* 27px */

  --text-xl: 1rem; /* 16px */
  --text-xl--line-height: 1.5; /* 24px */

  --text-lg: 1rem; /* 16px */
  --text-lg--line-height: 1.5; /* 24px */

  --text-base: 1rem; /* 16px */
  --text-base--line-height: 1.5; /* 24px */

  --text-md: var(--text-base);
  --text-md--line-height: var(--text-base--line-height);

  --text-sm: 0.875rem; /* 14px */
  --text-sm--line-height: 1.5; /* 21px */

  --text-xs: 0.75rem; /* 12px */
  --text-xs--line-height: 1.5; /* 18px */

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --spacing: 4px;
}