/*
Theme Name: Rules by Rosita
Author: Rosita Rampertaap
Author URI: https://rulesbyrosita.nl
Theme URI: https://rulesbyrosita.nl
Description: Het Rules by Rosita thema is een custom WordPress-thema ontwikkeld als leerproject, met focus op toegankelijkheid, responsief design, dark mode-ondersteuning en moderne webtechnieken. Gebouwd met HTML, CSS, JavaScript en PHP, en bedoeld als persoonlijke blog met een minimalistische uitstraling en gebruiksvriendelijke ervaring.
Version: 1.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rules-by-rosita
Tags: blog, accessibility-ready, featured-images, footer-widgets, right-sidebar
Copyright: Copyright (c) 2025 Rosita Rampertaap
Tested up to: 6.8
Requires PHP: 7.4
*/
/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* line-height: 1.5; */
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas {
  display: block;
  max-width: 100%;
}

svg {
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

#root,
#__next {
  isolation: isolate;
}
/* CSS Fallback when no JS is available */

html.no-js {
  /* lightmode fallback */
  --color-text: #192324;
  --color-text-dark: rgba(255, 255, 255, 0.87);
  --color-primary: #d7233e;
  --color-accent: #f8c9d7;
  --color-accent-2: #ebebeb;
  --color-footer: #cbeef3;
  --color-contrast: #49b3c1;
  --color-background: #f8f4f5;
  --color-bg-dark: #f8f4f5;
  --color-menu-button-hover: #f8c9d7;
  --color-button-hover: #e38ca6;
  --color-button-text: #f8f4f5;
  --color-page-hero-bg: #f8c9d7;
}

@media (prefers-color-scheme: dark) {
  html.no-js {
    --color-text: rgba(255, 255, 255, 0.87);
    --color-primary: #f7636f;
    --color-accent: #e38ca6;
    --color-accent-2: #293a3d;
    --color-footer: #103c42;
    --color-contrast: #45a4b0;
    --color-background: #192324;
    --color-bg-light: #192324;
    --color-card-bg: #293a3d;
    --color-menu-button-hover: #293a3d;
    --color-button-hover: #e38ca6;
    --color-button-text: #192324;
    --color-page-hero-bg: #103c42;
    color-scheme: dark;
  }
}

.no-js body.admin-bar #site-header {
  margin-top: 32px !important;
}

html.no-js .skip-link--accessibility {
  display: none;
}

/* Search fallback */
.no-js .search-form-fallback {
  display: block;
}

/* Mobile menu fallback */

/* Algemene fallback stijlen voor als geen JS beschikbaar is */
html.no-js #open-sidebar-button,
html.no-js #close-sidebar-button,
html.no-js #menu-open-toggle-no-js,
html.no-js #menu-close-toggle-no-js,
html.no-js .back-to-top,
html.no-js #theme-switch,
html.no-js #overlay {
  display: none;
}

.no-js .has-submenu > button.submenu-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0;
  margin: 0 1.5rem;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  color: var(--color-text);
  border-bottom: 2px solid transparent;
  transition:
    border-bottom 150ms ease,
    background-color 150ms ease;
}

.has-submenu > button.submenu-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0;
  margin: 0 1.5rem;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  color: var(--color-text);
  border-bottom: 2px solid transparent;
}

.no-js .has-submenu > .submenu {
  display: none;
}

.no-js .has-submenu:hover > .submenu,
.no-js .has-submenu:focus-within > .submenu {
  display: block;
}

.no-js .accessibility-btn {
  display: none;
}

.no-js #accessibility-settings {
  display: none;
}

@media screen and (max-width: 1024px) {
  html.no-js #menu-open-toggle-no-js {
    display: block;
  }

  html.no-js #menu-close-toggle-no-js {
    display: none;
  }

  html.no-js
    .site-header__nav:has(#header-nav.is-open)
    #menu-open-toggle-no-js {
    display: none;
  }

  html.no-js
    .site-header__nav:has(#header-nav.is-open)
    #menu-close-toggle-no-js {
    display: block;
  }

  html.no-js #header-nav {
    display: none;
  }

  html.no-js #header-nav.is-open {
    display: block;
    position: absolute !important; /* override fixed / right -100% */
    top: 3rem;
    right: 1rem;
    width: min(18rem, 90vw);
    height: fit-content;
    background: var(--color-background);
    border: 1px solid var(--color-accent);
    border-radius: 0.25rem;
    z-index: 10;
  }

  html.no-js #header-nav ul {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  html.no-js #header-nav a,
  html.no-js .submenu-toggle {
    padding: 1em 2.5em;
  }

  /* Submenu: hide by default, overriding the flex from #header-nav ul */
  html.no-js #header-nav .submenu {
    display: none;
    position: static;
    width: 100%;
    flex-direction: column;
    border: none;
    border-left: 2px solid var(--color-accent);
    border-radius: 0;
    background: transparent;
    margin: 0;
    gap: 0;
  }

  /* Show on mouse hover or keyboard focus-within */
  html.no-js #header-nav .has-submenu:hover > .submenu,
  html.no-js #header-nav .has-submenu:focus-within > .submenu {
    display: flex;
  }

  /* Button: match link styling */
  html.no-js .has-submenu > button.submenu-toggle {
    margin: 0;
    width: 100%;
    padding: 1em 2.5em;
    margin: 0;
    border-bottom: none;
    transition: background-color 150ms ease;
  }

  html.no-js .has-submenu > button.submenu-toggle:hover {
    background-color: var(--color-contrast);
    color: var(--color-bg-light);
  }

  html.no-js .has-submenu > button.submenu-toggle:focus-visible {
    background-color: var(--color-text);
    color: var(--color-background);
    outline: 2px solid var(--color-text);
    border-radius: 0;
  }

  html.no-js .site-header__container #open-sidebar-button {
    display: none !important;
  }

  html.no-js .site-header__container #close-sidebar-button {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  html.no-js .site-header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  html.no-js .site-header__nav {
    display: flex;
    align-items: center;
  }
}

@media screen and (max-width: 768px) {
  .no-js body.admin-bar #site-header {
    margin-top: 46px; /* op mobiel is de adminbar hoger */
  }
}
/* Colors and Fonts */
:root {
  /* Font weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Fonts */
  --font-body: "Nunito", sans-serif;
  --font-heading: "Zilla Slab", serif;

  --font-size-regular: 1rem;

  /* Sitewidth */
  --site-max-width: 90rem;

  /* Lightmode */
  --color-text: #192324;
  --color-text-dark: rgba(255, 255, 255, 0.87);
  --color-primary: #d7233e;
  --color-accent: #f8c9d7;
  --color-accent-2: #ebebeb;
  --color-footer: #cbeef3;
  --color-contrast: #49b3c1;
  --color-background: #f8f4f5;
  --color-bg-dark: #f8f4f5;
  --color-bg-light: #192324;
  --color-placeholder: #6E6E6E;
  --color-menu-button-hover: #f8c9d7;
  --color-primary-btn-text: #f8f4f5;
  --color-plumbob: #7ecf3a; /* originele Sims-groen */
  --color-plumbob-hover: #aaff66;

  /* WordPress preset colors */
  --wp--preset--color--primary: var(--color-primary);
  --wp--preset--color--accent: var(--color-accent);
  --wp--preset--color--accent-2: var(--color-accent-2);
  --wp--preset--color--footer: var(--color-footer);
  --wp--preset--color--contrast: var(--color-contrast);
  --wp--preset--color--background: var(--color-background);
  --wp--preset--color--placeholder: var(--color-placeholder);
}

/* Darkmode */

.darkmode {
  --color-text: rgba(255, 255, 255, 0.87);
  --color-text-dark: rgba(255, 255, 255, 0.87);
  --color-primary: #f7636f;
  --color-accent: #e38ca6;
  --color-accent-2: #293a3d;
  --color-footer: #103c42;
  --color-contrast: #45a4b0;
  --color-background: #192324;
  --color-bg-light: #192324;
  --color-card-bg: #293a3d;
  --color-placeholder: #8A8A8A;
  --color-menu-button-hover: #293a3d;
  --color-primary-btn-text: #192324;
  --color-plumbob: #7ecf3a;
  --color-plumbob-hover: #b6ff7e;
}

/* Colorpalette theme.json */
 .has-text-color {
  color: var(--color-text) !important;
}
 .has-text-background-color {
  color: var(--color-text) !important;
}

 .has-primary-color {
  color: var(--color-primary) !important;
}
 .has-primary-background-color {
  color: var(--color-primary) !important;
}

 .has-accent-color{
  color: var(--color-accent) !important;
}
 .has-accent-background-color {
  background-color: var(--color-accent) !important;
}

 .has-accent-2-color {
  color: var(--color-accent-2) !important;
}
 .has-accent-2-background-color {
  background-color: var(--color-accent-2) !important;
}

 .has-footer-color {
  color: var(--color-footer) !important;
}
 .has-footer-background-color {
  background-color: var(--color-footer) !important;
}

 .has-contrast-color {
  color: var(--color-contrast) !important;
}
 .has-contrast-background-color {
  background-color: var(--color-contrast) !important;
}

 .has-background-color {
  color: var(--color-background) !important;
}
 .has-background-background-color {
  background-color: var(--color-background) !important;
}

 .has-placeholder-color{
  color: var(--color-placeholder) !important;
}
.has-placeholder-background-color {
  background-color: var(--color-placeholder) !important;
}

/* Global styles */

html {
  scroll-behavior: smooth;
  font-size: 16px;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  background-color: var(--color-background);
  font-size: var(--font-size-regular);
  color: var(--color-text);
  max-width: 100%;
  margin: 0 auto;
  height: 100%;
  min-height: 100%;
}


main {
  flex: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
}

p {
  font-family: var(--font-body);
  font-size: var(--font-size-regular);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  line-height: 1.5em;
}

/* Algemene linkstijl in tekst */
a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 0.3s ease, text-decoration 0.3s ease;
}

/* Hover: underline verdwijnt subtiel */
a:hover {
  text-decoration: none;
}

/* Focus: duidelijke focusstijl */
a:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

h1 {
  font-size: clamp(2rem, 5vw + 1rem, 3rem);
  line-height: 1.2em;
}

h2 {
  font-size: clamp(1.5rem, 4vw + 1rem, 2.5rem);
  line-height: 1.2em;
}

h3 {
  font-size: clamp(1.25rem, 3vw + 1rem, 2rem);
  line-height: 1.2em;
}

h4 {
  font-size: clamp(1rem, 2.5vw + 1rem, 1.5rem);
  line-height: 1.3em;
}

h5 {
  font-size: clamp(0.9rem, 2vw + 1rem, 1.25rem);
  line-height: 1.4em;
}

h6 {
  font-size: clamp(0.8rem, 1.8vw + 1rem, 1.125rem);
  line-height: 1.4em;
}

/* WordPress styles */
.wp-caption {
    padding: 0.5em;
    background: transparent;
    max-width: 100%;
    margin-bottom: 1.5em;
}

.wp-caption-text {
    font-size: var(--font-size-regular);
    line-height: 1.5;
    padding: 0.5em 0;
    color: var(--color-text);
}

.sticky {
    position: relative;
    background-color: var(--color-accent-2);
}

.gallery-caption {
    font-style: italic;
    font-size: var(--font-size-regular);
    color: var(--color-text);
}

.bypostauthor {
    font-weight: bold;
}

.alignright {
    float: right;
    margin-left: 1.5em;
}

.alignleft {
    float: left;
    margin-right: 1.5em;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* General Layout styles */
.site-header__container,
.page-hero__content,
.container-main,
.site-footer__container {
  max-width: var(--site-max-width);
  padding: 0 clamp(1rem, 2vw, 2.5rem);
  margin: 0 auto;
}

/* Main content */
.container-main {
  display: flex;
  flex-direction: column;
  padding: 5rem clamp(1rem, 2vw, 2.5rem);
  gap: 4rem;
}

section h1,
article h1,
nav h1,
aside h1 {
  font-size: clamp(2rem, 5vw + 1rem, 3rem);
}

.entry-content {
  width: 100%;
  overflow-x: hidden;
   overflow-wrap: break-word;
  word-wrap: break-word;
}

.entry-content img,
.entry-content iframe,
.entry-content table,
.entry-content pre {
  max-width: 100%;
  height: auto;
  display: block;
  overflow-x: auto;
}

.entry-content iframe {
  height: 25rem;
  margin-bottom: 2rem;
}

.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content p,
.entry-content ul,
.entry-content ol {
  margin-bottom: 1rem;
}

.entry-content video {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.entry-content figure {
  max-width: 100%;
  margin: 2rem auto;
  text-align: center;
}

.entry-content figure img {
  margin: 0;
  display: block;
  height: auto;
}

.entry-content figure figcaption {
  font-size: 0.875rem;
  color: var(--color-text);
  margin-top: 0.5rem;
}

svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke: var(--color-text);
}

img,
video,
iframe {
  max-width: 100%;
  height: auto;
}
pre,
code,
p {
  overflow-wrap: break-word;
}
.post-content {
  max-width: 60ch;
  margin: auto;
  padding: 0 1rem;
}

.wp-block-pullquote {
  border-left: 4px solid var(--color-primary);
  padding: 2rem 1.5rem !important;
  margin: 0;
  background-color: var(--color-accent-2);
  color: var(--color-text);
  text-align: left !important;
  font-family: var(--font-heading) !important;
  font-size: 1.5rem;
  font-style: italic;
  border-radius: 0.25rem;
}

.wp-block-pullquote p {
  margin: 0;
}

.wp-block-pullquote cite {
  display: block;
  margin-top: 0.8em;
  font-style: normal;
  font-weight: bold;
  color: var(--color-contrast);
}

/* Inline code */
code {
  background-color: var(--color-accent-2);
  color: var(--color-primary);
  font-family: "Courier New", Courier, monospace;
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
  font-size: 0.95em;
}

/* Code blocks */
pre code {
  border-left: 4px solid var(--color-primary);
  display: block;
  background-color: var(--color-accent-2);
  color: var(--color-text);
  padding: 2rem 1.5rem;
  margin: 2rem 0;
  border-radius: 0.25rem;
  overflow-x: auto;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.9em;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Button styles */
button {
  all: unset;
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
}

.btn,
.wp-block-button__link,
.comment-form input[type="submit"],
.forminator-ui .forminator-button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.25rem;
  width: fit-content;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-primary-btn-text);
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.btn--secondary,
.wp-block-button__link,
.comment-form input[type="submit"],
.forminator-ui .forminator-button {
  background-color: var(--color-contrast);
  color: var(--color-bg-light);
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.btn--secondary:hover,
.wp-block-button__link:hover,
.comment-form input[type="submit"]:hover,
.forminator-ui .forminator-button:hover {
  background-color: var(--color-footer);
  color: var(--color-text);
}

.btn--secondary:focus-visible,
.wp-block-button__link:focus-visible,
.comment-form input[type="submit"]:focus-visible,
.forminator-ui .forminator-button:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.btn--icon-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: var(--color-text);
  cursor: pointer;

  &:hover {
    background-color: var(--color-menu-button-hover);
    color: var(--color-text);
  }
}

.btn--footer {
  border: 2px solid var(--color-contrast);
  white-space: nowrap;

  &:hover {
    border: 2px solid var(--color-text);
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  }

  &:focus-visible {
    outline: 2px solid var(--color-text);
    border-radius: 0.25rem;
  }
}

.btn--icon-large:focus-visible {
  color: var(--color-background);
  background-color: var(--color-text);
}

.btn--icon-large:focus-visible svg {
  stroke: var(--color-background);
}

.btn--icon-large[aria-current="page"],
.btn--icon-large[aria-pressed="true"] {
  background-color: var(--color-contrast);
  color: var(--color-bg-light);
  font-weight: 700;
}

.btn--icon-large[aria-pressed="true"] svg {
  stroke: var(--color-bg-light);
}

.btn--icon-large[aria-current="page"] {
  pointer-events: none;
}

a.btn--icon-large {
  color: var(--color-text)
}

.btn--icon-small {
  padding: 0.5em;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;

  &:hover {
    background-color: var(--color-menu-button-hover);
  }
}

.btn--icon-small:focus-visible {
  background-color: var(--color-text);
  color: var(--color-background);
  border-radius: 50%;
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.btn--icon-small:focus-visible svg {
  stroke: var(--color-background);
}

#close-accessibility,
#close-search {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.button-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

/* Style effects */

.hover-shadow-pink:hover {
  box-shadow: 0.5rem 0.5rem 0 0 var(--color-accent);
}

.hover-shadow-blue:hover {
  box-shadow: 0.5rem 0.5rem 0 0 var(--color-contrast);
}

.dotted-background-pink {
  background-image: radial-gradient(var(--color-accent) 2px, transparent 2px);
  background-size: 20px 20px;
}

.dotted-background-blue {
  background-image: radial-gradient(var(--color-contrast) 2px, transparent 2px);
  background-size: 20px 20px;
}

/* Pagination */

/* Single pagination */

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
  background-color: var(--color-background);
}

.post-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  background-color: var(--color-background);
}

.post-nav .post-nav__prev,
.post-nav .post-nav__next {
  flex: 1;
}

.post-nav .chevron {
  font-size: 1.5rem;
  line-height: 1;
}

.post-nav__prev {
  text-align: left;
}

.post-nav__next {
  text-align: right;
}

.pagination ul {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  padding: 0;
}

.pagination li {
  display: inline-flex;
}

/* Forms */

.form,
.forminator-ui {
  display: flex;
  gap: 1rem;
  width: 100%;
  flex-direction: column;
}

.comment-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1rem;
  max-width: 40rem;
}

.form label,
.comment-form label,
.search-label,
.forminator-label,
#forminator-field-consent-1_68b6d1726b718-label.forminator-label,
.forminator-required {
  font-family: var(--font-body);
  font-size: var(--font-size-regular);
  font-weight: bold;
  color: var(--color-text) !important;
}

.form__group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0;
  width: 100%;
}

.search-input:focus {
  outline: 1px solid var(--color-text);
  border-radius: 0.25rem;
}

.form__group--row {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  margin-bottom: 0;
}

.form__group.url-field {
  margin-bottom: 0.5rem;
}

.form__group:last-child {
  margin-bottom: 0;
}

.form__submit {
  margin: 0.5rem 0;
}

.form input[type="email"],
.form input[type="text"],
.form input[type="password"],
.form input[type="search"],
.form input[type="url"],
.form textarea,
.comment-form input,
.comment-form textarea,
.search-input,
.forminator-ui textarea,
.forminator-ui input {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0.75rem 1.5rem;
  border-radius: 0.25rem;
  border: 1px solid var(--color-text);
  flex: 1 1 auto;
  background-color: var(--color-background);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
}

.form__checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-regular);
}

.privacy-link {
  font-size: 0.875rem;
  font-weight: 500;
}

.form__checkbox input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.5rem;
  cursor: pointer;
  flex-shrink: 0;
}

.form__checkbox label {
  cursor: pointer;
  user-select: none;
  line-height: 1.2;
  margin: 0;
}

.form__field-error,
.forminator-ui .forminator-error-message {
  display: none;
  color: var(--color-primary) !important;
  background-color: var(--color-background) !important;
  font-size: 0.9rem !important;
  margin-top: 0.25rem !important;
}

.form__field-error.active {
  display: block;
}

.search-form {
  margin-top: 1rem;
}

/* Back to top button */
.back-to-top {
  display: none;
}

.back-to-top.show {
  display: block; /* of inline-block, wat je wilt */
}

/* Media Queries */

@media screen and (max-width: 1024px) {
  .dotted-background-pink,
  .dotted-background-blue {
    background-size: 15px 15px;
  }

  .entry-content iframe {
    height: 20rem;
  }
}

@media screen and (max-width: 768px) {
 .container-main {
  display: flex;
  flex-direction: column;
  padding: 5rem 1rem;
  gap: 4rem;
}

  .dotted-background-pink,
  .dotted-background-blue {
    background-size: 10px 10px;
  }

  .pagination {
    margin: 2rem 0;
  }

  .page-numbers {
    flex-wrap: wrap;
  }

  .pagination__list li {
    justify-content: center;
  }

  .post-nav {
    flex-direction: column;
  }

  .post-nav .post-nav__prev,
  .post-nav .post-nav__next {
    width: 100%;
    text-align: left;
  }

  .btn--icon-large {
    min-width: 2.5rem; /* voor touch targets */
    white-space: nowrap; /* voorkomt afbreken van woorden */
    text-align: center;
  }

  .form__group--row {
    display: flex;
    flex-direction: column;
  }
  .form__group--row button {
    width: 100%;
    text-align: center;
  }

    .entry-content figure {
    display: block;
    max-width: 100%;
    margin: 2rem auto;
    text-align: center;
  }

  .entry-content iframe {
    height: auto;
  }

  .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
    margin-bottom: 2rem;
    width: 100%;
  }
}
.screen-reader-text,
.skip-link {
  position: absolute;
  top: -5rem;
  background-color: var(--color-background);
  color: var(--color-text);
  padding: 0.75rem 1.5rem;
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
}

.screen-reader-text:focus,
.skip-link:focus {
  top: 2.5rem;
  left: 1rem;
  z-index: 100;
}

.skip-link-inline {
  display: inline-block;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

.accessibility-btn,
.back-to-top {
  position: fixed !important;
  bottom: 2rem;
  background-color: var(--color-contrast);
  color: var(--color-bg-light);
  border: 2px solid var(--color-contrast);
  border-radius: 50%;
  padding: 0.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.3s ease,
    transform 0.2s ease;
  z-index: 100;
}

.back-to-top {
  position: relative;
  opacity: 0;
  pointer-events: auto;
  right: 6rem;
}

.back-to-top.show {
  opacity: 1;
  pointer-events: auto;
}

.accessibility-btn {
  position: relative;
  opacity: 1 !important;
  pointer-events: auto;
  right: 2rem;
}

#accessibility-toggle[aria-expanded="true"] .accessibility-btn__tooltip {
  display: none;
}

.accessibility-btn svg,
.back-to-top svg {
  stroke: var(--color-bg-light);

  transition: stroke 0.3s ease;
}

.accessibility-btn:hover,
.back-to-top:hover {
  background-color: var(--color-footer);
  color: var(--color-text);
  border-color: var(--color-text);
  transform: translateY(-4px);
}

.accessibility-btn:hover svg,
.back-to-top:hover svg {
  stroke: var(--color-text);
}

.accessibility-btn:focus-visible,
.back-to-top:focus-visible {
  outline: 2px solid var(--color-text);
  background-color: var(--color-text);
  color: var(--color-background);
  border: 2px solid var(--color-text);
}

.accessibility-btn:focus-visible svg,
.back-to-top:focus-visible svg {
  stroke: var(--color-background);
}

.accessibility-btn__tooltip,
.back-to-top__tooltip {
  visibility: hidden;
  background-color: var(--color-background);
  color: var(--color-text);
  text-align: center;
  font-size: 0.8rem;
  border-radius: 0.3rem;
  border: 1px solid var(--color-accent);
  padding: 0.3rem 0.6rem;
  margin-bottom: 0.3rem;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -5rem;
}

.accessibility-btn:hover .accessibility-btn__tooltip,
.back-to-top:hover .back-to-top__tooltip {
  visibility: visible !important;
  opacity: 1;
  pointer-events: auto;
}

#accessibility-settings {
  position: fixed;
  right: 2rem;
  bottom: calc(4rem + 2rem);
  width: 20rem;
  max-width: 90%;
  max-height: calc(100dvh - 8rem);
  overflow-y: auto;
  height: auto;
  background: var(--color-background);
  color: var(--color-text);
  border: 2px solid var(--color-accent);
  border-radius: 0.5rem;
  padding: 1rem;
  z-index: 1000;
  display: none;
}

#accessibility-settings.show {
  display: block;
}

#accessibility-settings h2 {
  font-size: 1.5rem;
  margin: 0;
}

.accessibility-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.accessibility-panel__group {
  margin-top: 1rem;
}

.accessibility-panel__group h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  border-bottom: 1px solid var(--color-accent-2);
  padding-bottom: 0.25rem;
}

.accessibility-panel__group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.accessibility-panel__group li + li {
  margin-top: 0.5rem;
}

/* Accessibility settings */

/* Dislexie font  */
body.dyslexic-font,
body.dyslexic-font h1,
body.dyslexic-font h2,
body.dyslexic-font h3,
body.dyslexic-font h4,
body.dyslexic-font h5,
body.dyslexic-font h6,
body.dyslexic-font p,
body.dyslexic-font span,
body.dyslexic-font li,
body.dyslexic-font a,
body.dyslexic-font #header-nav a,
body.dyslexic-font button,
body.dyslexic-font input,
body.dyslexic-font textarea,
body.dyslexic-font label,
body.dyslexic-font #search-overlay label,
body.dyslexic-font strong,
body.dyslexic-font em,
body.dyslexic-font blockquote,
body.dyslexic-font td,
body.dyslexic-font th,
body.dyslexic-font .accessibility-btn__tooltip,
body.dyslexic-font .back-to-top__tooltip,
body.dyslexic-font .btn,
body.dyslexic-font .form__field-error,
body.dyslexic-font .comment-error,
body.dyslexic-font .page-hero__title nav p,
body.dyslectic-font #cmplz-cookiebanner-container .cmplz-btn {
  font-family: "Atkinson Hyperlegible", Arial, sans-serif;
}

body.dyslexic-font h1,
body.dyslexic-font h2,
body.dyslexic-font h3,
body.dyslexic-font h4,
body.dyslexic-font h5,
body.dyslexic-font h6,
body.dyslexic-font .form__field-error,
body.dyslexic-font #search-overlay label,
body.dyslexic-font .comment-error {
  font-weight: 700;
}

body.dyslectic-font {
  --font-body: "Atkinson Hyperlegible", Arial, sans-serif;
  --font-heading: "Atkinson Hyperlegible", Arial, sans-serif;
}

/* Grotere tekst */
/* Normaal */
html {
  font-size: 100%; /* = 16px */
}

/* Bij grote tekst */

html.large-text {
  font-size: 125%; /* Verhoog de basislettergrootte met 25% */
}

/* High Contrast kleuren */
:root {
  --hc-bg: #000000;
  --hc-text: #ffffff;
  --hc-accent: #00ffff; /* cyaan/blauwachtig voor sterke visuele accenten */
  --hc-danger: #ff0000; /* felrood voor fouten/warnings */
  --hc-focus: #ffff00; /* geel voor focus indication */
}

.high-contrast {
  --color-background: var(--hc-bg);
  --color-bg-dark: var(--hc-bg);
  --color-bg-light: var(--hc-bg);
  --color-text: var(--hc-text);
  --color-text-dark: var(--hc-text);
  --color-primary: var(--hc-accent);
  --color-accent: var(--hc-accent);
  --color-accent-2: var(--hc-bg);
  --color-contrast: var(--hc-accent);
  --color-footer: var(--hc-bg);
  --color-placeholder: var(--hc-focus);
  --color-icon-button-hover: var(--hc-accent);
  --color-button-hover: var(--hc-accent);
  --color-primary-btn-text: var(--hc-bg);
  --color-page-hero-bg: var(--hc-bg);
  --color-plumbob: #00ff00;
  --color-plumbob-hover: #7fff00;
}

/* Links in high-contrast */
.high-contrast a,
.high-contrast a:visited {
  color: var(--hc-accent) !important;
}

.high-contrast a:hover {
  color: var(--hc-accent) !important;
}

body.high-contrast .dotted-background-pink,
body.high-contrast .dotted-background-blue {
  background-image: none;
  background-color: var(--color-background);
}
.high-contrast .btn--icon-large:hover,
.high-contrast .btn--icon-small:hover {
  background-color: var(--color-icon-button-hover);
  color: var(--color-background);
}
.high-contrast .btn--icon-large:hover svg,
.high-contrast .btn--icon-small:hover svg {
  stroke: var(--color-background);
}

.high-contrast #open-sidebar-button svg,
.high-contrast #close-sidebar-button svg {
  stroke: var(--color-text);
}

.high-contrast .wp-block-button__link,
.high-contrast a.btn.btn--secondary {
  background-color: var(--hc-accent); /* fel contrasterende kleur */
  color: var(--hc-bg) !important; /* tekst moet afsteken tegen achtergrond */
  display: inline-block;
  text-decoration: none;
}

.high-contrast .wp-block-button__link:hover,
.high-contrast .btn--secondary:hover,
.high-contrast .btn--secondary:focus-visible,
.high-contrast .card__content--page:hover .btn--secondary {
  background-color: var(--color-accent);
  color: var(--color-background) !important;
}
.high-contrast .card {
  border: 1px solid var(--color-text);
}
.high-contrast .card:hover {
  border: 1px solid var(--color-contrast);
}

/* Algemene focusstijl in high contrast modus */
.high-contrast :focus-visible,
.high-contrast a:focus-visible,
.high-contrast #header-nav a:focus-visible,
.high-contrast button:focus-visible,
.high-contrast input:focus-visible,
.high-contrast textarea:focus-visible,
.high-contrast select:focus-visible,
.high-contrast .menu-button:focus-visible,
.high-contrast #open-sidebar-button:focus-visible,
.high-contrast #close-sidebar-button:focus-visible,
.high-contrast #theme-switch:focus-visible,
.high-contrast .site-footer__menu nav a:focus-visible,
.high-contrast .btn--footer:focus-visible,
.high-contrast .has-submenu > button.submenu-toggle:focus-visible,
.high-contrast #accessibility-settings button:focus-visible,
.high-contrast .search-input:focus,
.high-contrast .wp-block-button__link:focus-visible {
  outline: 2px solid var(--hc-focus);
  outline-offset: 2px;
  transition: none; /* Geen animatie voor directe visuele feedback */
}

.high-contrast .has-text-color,
.high-contrast .has-primary-color,
.high-contrast .has-accent-color,
.high-contrast .has-accent-2-color,
.high-contrast .has-footer-color,
.high-contrast .has-contrast-color,
.high-contrast .has-background-color,
.high-contrast .has-placeholder-color {
  color: var(--hc-focus) !important;
}

.high-contrast .has-text-background-color,
.high-contrast .has-primary-background-color,
.high-contrast .has-accent-background-color,
.high-contrast .has-accent-2-background-color,
.high-contrast .has-footer-background-color,
.high-contrast .has-contrast-background-color,
.high-contrast .has-background-background-color,
.high-contrast .has-placeholder-background-color {
  background-color: var(--hc-bg) !important;
}

.high-contrast .logo-red-part {
  fill: var(--hc-danger) !important;
}

.high-contrast .form__field-error {
  color: var(--hc-danger);
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0.5rem;
}

.high-contrast .comment-error {
  color: var(--hc-danger) !important;
  border: 2px solid var(--hc-danger);
  font-size: 1rem;
}

.high-contrast #theme-switch {
  display: none; /* Verberg de themewisselaar in high contrast modus */
}

.reduce-motion * {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

.reduce-motion .submenu-toggle[aria-expanded="true"] .chevron,
.reduce-motion .page-hero__title,
.reduce-motion .back-to-top,
.reduce-motion .accessibility-btn,
.reduce-motion .back-to-top.show,
.reduce-motion .accessibility-btn.show,
.reduce-motion .back-to-top:hover,
.reduce-motion .accessibility-btn:hover {
  transform: none !important;
  opacity: 1 !important;
}

.reduce-motion .page-hero__title {
  animation: none;
  opacity: 1;
  transform: none;
}

.reduce-motion #header-nav a::after,
.reduce-motion .has-submenu > button.submenu-toggle::after,
.reduce-motion.has-submenu > button.submenu-toggle[aria-current="page"]::after,
.reduce-motion #header-nav > ul > li > a::after,
.reduce-motion #header-nav > ul > li > a:hover::after,
.reduce-motion #header-nav > ul > li > a[aria-current="page"]:hover::after {
  transition: none !important;
  animation: none !important;
}

/* Media Queries */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  #header-nav a::after,
  .has-submenu > button.submenu-toggle::after,
  .has-submenu > button.submenu-toggle[aria-current="page"]::after {
    transition: none;
  }

  #header-nav > ul > li > a::after,
  #header-nav > ul > li > a:hover::after,
  #header-nav > ul > li > a[aria-current="page"]:hover::after {
    transition: none !important;
    animation: none !important;
  }

  .has-submenu > button.submenu-toggle::after {
    transition: none !important;
  }

  .submenu-toggle[aria-expanded="true"] .chevron {
    transform: none !important;
  }

  .page-hero__title {
    animation: none;
    opacity: 1 !important;
    transform: none;
  }

  .back-to-top,
  .accessibility-btn {
    transition: none !important;
    scroll-behavior: auto;
    opacity: 1;
  }

  .back-to-top.show,
  .accessibility-btn.show {
    opacity: 1;
  }

  .back-to-top:hover,
  .accessibility-btn:hover {
    transform: none !important;
  }
}

@media screen and (max-width: 768px) {
  #accessibility-settings {
    left: 50%;
    transform: translateX(-50%);
    max-width: 95%;
  }
}
/* Forminator */
/* Custom styling  for the Forminator contactform is in theme.css under 'Forms'. */

 /* Complianz Cookie Banner Styling */

 /* Manage consent */
 body #cmplz-manage-consent .cmplz-manage-consent {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    background-color: var(--color-background);
    border: 2px solid var(--color-accent);
    border-radius: 0.25rem;
    padding: 1rem;
    height: auto;
    right: 10rem;
    box-shadow: none;

    &:focus {
        outline: 2px solid var(--color-text);
        outline-offset: 2px;
    }
 }

/* Banner container */
body #cmplz-cookiebanner-container .cmplz-cookiebanner {
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem;
    border: 2px solid var(--color-accent);
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: none;
}

/* Titel */
body #cmplz-cookiebanner-container .cmplz-title {
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Sluitknop */
body #cmplz-cookiebanner-container .cmplz-close svg {
    stroke: var(--color-text);
    fill: var(--color-text);
    transition: opacity 0.2s ease-in-out;

      &:focus {
        outline: 2px solid var(--color-text);
        outline-offset: 2px;
    }
}
body #cmplz-cookiebanner-container .cmplz-close:hover svg {
    opacity: 0.7;
}

/* Bannertekst */
body #cmplz-cookiebanner-container .cmplz-message,
body #cmplz-cookiebanner-container .cmplz-message p {
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.5;
}

/* Links */
body #cmplz-cookiebanner-container .cmplz-link {
    font-size: 1rem;
    color: var(--color-primary);
    text-decoration: underline;

      &:focus {
        outline: 2px solid var(--color-text);
        outline-offset: 2px;
    }
}
body #cmplz-cookiebanner-container .cmplz-link:hover {
    text-decoration: none;
}

/* Buttons */
body #cmplz-cookiebanner-container .cmplz-btn {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    height: auto;
    border-radius: 0.25rem;
    padding: 0.75rem 1.5rem;

      &:focus {
        outline: 2px solid var(--color-text);
        outline-offset: 2px;
    }
}

/* Accept, Deny & preferences */
body #cmplz-cookiebanner-container .cmplz-btn.cmplz-accept,
body #cmplz-cookiebanner-container .cmplz-btn.cmplz-deny {
    background-color: var(--color-primary);
    color: var(--color-background);
    border: none;
}
body #cmplz-cookiebanner-container .cmplz-btn.cmplz-accept:hover,
body #cmplz-cookiebanner-container .cmplz-btn.cmplz-deny:hover {
    background-color: var(--color-accent);
    color: var(--color-bg-light);
}

body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
  font-weight: 500;
  background-color: var(--color-background);
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;;
  color: var(--color-text);
  border: none;

  &:hover {
    background-color: var(--color-accent-2);
  }
}

/* Manage Consent modal */
body #cmplz-manage-consent-container {
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-body);
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-text);
}

/* Dropdown titles */
body #cmplz-manage-consent-container summary {
    background-color: var(--color-background);
    color: var(--color-text);
    font-weight: 500;
    cursor: pointer;
}

/* Category sections */
body .cmplz-cookiebanner .cmplz-categories .cmplz-category {
    background-color: var(--color-accent-2);
}

body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active {
    color: var(--color-text);
}

body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title {
    color: var(--color-text);
    font-weight: 600;
}
body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description{
    color: var(--color-text);
    font-size: 0.9rem;
}

/* Iconen (sluitknop, pijltjes, switches) */
body #cmplz-cookiebanner-container .cmplz-icon svg,
body #cmplz-manage-consent-container .cmplz-icon svg,
body .cmplz-cookiebanner .cmplz-close svg,
.cmplz-cookiebanner .cmplz-close path {
    stroke: var(--color-text);
    fill: var(--color-text);
}
body #cmplz-cookiebanner-container .cmplz-dropdown summary::after,
body #cmplz-manage-consent-container .cmplz-switch::after {
    color: var(--color-text);
}

/* Toggles */
body #cmplz-manage-consent-container .cmplz-switch {
    background-color: var(--color-primary);
}

.cmplz-btn:focus,
.cmplz-link:focus,
.cmplz-switch:focus {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

/* Jetpack subscription widget */
.footer-widgets-container p {
  margin-bottom: 1rem;
}

#subscribe-email input[type="email"] {
  padding: 0.75rem 1rem;
  font-size: 1rem;
  background-color: var(--color-background);
  border: 2px solid var(--color-text) !important;
  border-radius: 0.25rem;
  width: 100%;
  font-family: var(--font-body);
}

#subscribe-submit button[type="submit"] {
  background-color: var(--color-contrast);
  color: var(--color-bg-light) !important;
  padding: 0.75rem 1.5rem;
  border-radius: 0.25rem;
  font-size: 1.125rem;
  font-weight: 500;
  border: 2px solid var(--color-contrast);
  width: 100%;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  font-family: var(--font-body);
}

/* Hover & focus states */
#subscribe-submit button[type="submit"]:hover {
  background-color: var(--color-footer);
  border: 2px solid var(--color-footer);
  color: var(--color-text) !important;
}

footer #subscribe-submit button[type="submit"]:hover {
  border: 2px solid var(--color-text);
}

#subscribe-submit button[type="submit"]:focus-visible {
  outline: 2px solid var(--color-text) !important;
  outline-offset: 2px;
}

.wp-block-jetpack-subscriptions__form-elements {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 40rem;
}
/* Header component styles */
.site-header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.site-header__logo {
  max-width: 10rem;
  margin-right: 2rem;
  width: 100%;
  height: auto;
}

a #top:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 4px;
  border-radius: 0.25rem;
}

.site-header__nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Header Navigation */

#header-nav {
  background-color: var(--color-background);
}

#header-nav > ul {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}

#header-nav > li {
  display: flex;
  padding: 0;
}

#header-nav a {
  display: flex;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-text);
  padding: 1em 0;
  margin: 0 1.5rem;
  position: relative;
  transition: background-color 150ms ease;

  &:focus-visible {
    outline: 2px solid var(--color-text);
    border-radius: 0.25rem;
    padding: 1em 0;
  }
}

#header-nav > ul > li > a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

/* Lijn onder alle links */
#header-nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.2em;
  width: 100%;
  height: 2px;
  background-color: var(--color-contrast);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-in-out, background-color 150ms ease;
}

/* Hover animatie */
#header-nav > ul > li > a:hover::after {
  transform: scaleX(1);
}

/* Actieve link: standaard streep zichtbaar */
#header-nav > ul > li > a[aria-current="page"]::after {
  transform: scaleX(1);
  background-color: var(--color-primary);
}

/* Hover op actieve link: herstart animatie */
#header-nav > ul > li > a[aria-current="page"]:hover::after {
  animation: underline-reappear 0.6s forwards;
  background-color: var(--color-primary);
}

/* Keyframe voor het link-naar-rechts effect */
@keyframes underline-reappear {
  from {
    transform: scaleX(0);
    transform-origin: left;
  }
  to {
    transform: scaleX(1);
    transform-origin: left;
  }
}

.site-header__buttons {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

/* Mobile Menu */

#open-sidebar-button {
  display: none;
  background: none;
  margin-left: auto;
  padding: 0.5em;
  margin-right: 0.25rem;
}

#open-sidebar-button:focus-visible {
  background-color: var(--color-text);
  color: var(--color-background);
  border-radius: 50%;
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

#open-sidebar-button:focus-visible svg {
  stroke: var(--color-background);
}

#close-sidebar-button {
  display: none;
  background: none;
  padding: 0.5em;
}

#menu-open-toggle-no-js,
#menu-close-toggle-no-js {
  display: none;
}

#overlay {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  width: 100%;
  height: 100%;
  inset: 0;
  transition: rgba(0, 0, 0, 0.5) 0.3s ease-in-out;
  z-index: 9;
  display: none;
}

/* Theme switcher */
#theme-switch svg:first-child {
  display: block;
}

#theme-switch svg:last-child {
  display: none;
}

.darkmode #theme-switch svg:first-child {
  display: none;
}

.darkmode #theme-switch svg:last-child {
  display: block;
}

/* Submenu */
.has-submenu {
  position: relative;
}

.has-submenu > button.submenu-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0;
  margin: 0 1.5rem;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  color: var(--color-text);
  border-bottom: 2px solid transparent;
}

.has-submenu > button.submenu-toggle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-contrast);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-in-out, background-color 150ms ease;
  pointer-events: none;
}

/* Visuele feedback bij hover/focus */
.has-submenu > button.submenu-toggle:hover::after {
  transform: scaleX(1);
}

.has-submenu.open > button.submenu-toggle::after,
.has-submenu > button.submenu-toggle[aria-current="page"]::after {
  transform: scaleX(1);
  background-color: var(--color-primary);
  transition: none;
}

.has-submenu > button.submenu-toggle:focus-visible {
  outline: 2px solid var(--color-text);
  border-radius: 0.25rem;
  padding: 1em 0;
}

/* Submenu standaard verborgen */
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;

  flex-direction: column;
  background-color: var(--color-background);
  border-radius: 0.25rem;
  border: 1px solid var(--color-accent);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 10rem;
  z-index: 9;
}

/*Toon submenu als de parent 'open' is  */
.has-submenu.open .submenu {
  display: flex;
}

.submenu > li a {
  display: block;
  width: 100%;
  padding: 1rem 1.5rem !important;
  color: var(--color-text);
  text-decoration: none;
  margin: 0 !important;

  &:hover {
    border-bottom: none;
    background-color: var(--color-contrast);
    color: var(--color-bg-light) !important;
  }                                               

  &:hover svg {
    stroke: var(--color-text) !important;
  }

  .darkmode &:hover svg {
    stroke: var(--color-background);
  }

  &:focus-visible {
    border-bottom: none !important;
    background-color: var(--color-text);
    color: var(--color-background) !important;
    outline: 2px solid var(--color-text);
    border-radius: 0 !important;
  }
}

.submenu li a:hover {
  background-color: var(--color-contrast);
  color: var(--color-bg-light);
}

.submenu li a[aria-current="page"] {
  background-color: var(--color-primary);
  color: var(--color-background) !important;
}

.submenu-toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.chevron {
  display: inline-block;
  transition: transform 0.25s ease-in-out;
  transform-origin: center;
}

.submenu-toggle[aria-expanded="true"] .chevron {
  transform: rotate(-90deg);
}

/* Media Queries */

@media screen and (max-width: 1024px) {
  .site-header__logo {
    max-width: 7rem;
  }

  body.menu-open {
    overflow: hidden;
  }

  .site-header__buttons {
    display: flex;
    gap: 0.25rem;
  }

  .site-header__container #header-nav {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: min(15em, 100%);
    z-index: 10;
    border-bottom: 0;
    border-left: 1px solid var(--color-accent);
    transition: right 300ms ease-out;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
  }

  .site-header__container #header-nav.show {
    right: 0;
  }

  .site-header__container #header-nav ul {
    width: 100%;
    flex-direction: column;
  }

  .site-header__container #header-nav li {
    padding: 0;
  }

  .site-header__container #header-nav a {
    padding: 1em 2.5em;
    margin: 0;
    width: 100%;
    transition: background-color 150ms ease;

    &:hover {
      border-bottom: none;
      background-color: var(--color-contrast);
      color: var(--color-bg-light);
    }

    &:focus-visible {
      border-bottom: none;
      background-color: var(--color-text);
      color: var(--color-background);
      outline: 2px solid var(--color-text);
      border-radius: 0;
    }
  }

  .site-header__container #header-nav a[aria-current="page"] {
    border-bottom: none;
    background-color: var(--color-primary);
    color: var(--color-background);
  }

  #header-nav a::after,
  .has-submenu.open > button.submenu-toggle::after,
  .has-submenu > button.submenu-toggle[aria-current="page"]::after,
  .has-submenu > button.submenu-toggle::after {
    display: none;
  }

  .site-header__container #open-sidebar-button {
    display: block;
  }

  .site-header__container #close-sidebar-button {
    display: block;
    padding: 0.5em;
    margin: 4em 2em 2em 2em;
  }

  .submenu-toggle:hover .chevron svg {
    stroke: var(--color-bg-light) !important;
  }

  /* Submenu */
  .has-submenu > button.submenu-toggle {
    padding: 1em 2.5em;
    margin: 0;
    width: 100%;
    transition: background-color 150ms ease;

    &:hover {
      border-bottom: none;
      background-color: var(--color-contrast);
      color: var(--color-bg-light) !important;
    }

    &:focus-visible {
      border-bottom: none;
      padding: 1em 2.5em;
      background-color: var(--color-text);
      color: var(--color-background);
      outline: 2px solid var(--color-text);
      border-radius: 0;
    }
  }

  .has-submenu > button.submenu-toggle:focus-visible:hover {
    color: var(--color-background) !important;
    background-color: var(--color-text);
  }

  .has-submenu > button.submenu-toggle svg {
    stroke: currentColor;
  }

  button.submenu-toggle:focus-visible:hover .chevron svg {
    stroke: var(--color-background) !important;
  }

  .has-submenu.open > .submenu-toggle {
    background-color: var(--color-primary);
    color: var(--color-background);
  }

  body:not(.darkmode) .has-submenu.open > .submenu-toggle .chevron svg {
    stroke: var(--color-background);
  }

  .submenu {
    position: static;
    width: 100%;
    border-radius: 0;
    border: none;
    padding: 0;
    margin: 0;
  }

  .submenu > li {
    width: 100%;
  }

  .submenu > li a {
    padding: 1rem 3.5em !important;
    width: 100%;
    transition: background-color 150ms ease;
  }
}

@media screen and (max-width: 768px) {
  .site-header__container {
  padding: 0.25rem 1rem;
}
  .site-header__logo {
    max-width: 5rem;
  }

  #open-sidebar-button {
    margin-right: 0;
  }

  .site-header__buttons {
    gap: 0;
  }
}
/* Footer component styles */
.site-footer {
  background-color: var(--color-footer);
  color: var(--color-text);
}

.site-footer a {
  color: var(--color-text);
}

.site-footer__content {
  display: flex;
  justify-content: space-between;
  padding: 3rem 0;
  gap: 3rem;
}

.site-footer__menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 33%;
}

.site-footer__menu nav ul {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: flex-start;
  list-style-type: none;
  width: 100%;
  padding: 0;
  gap: 1rem;
}

.site-footer__menu nav a {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  padding: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;

  &:hover {
    text-decoration: none;
  }

  &:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
    border-radius: 0.25rem;
  }
}
.site-footer__menu h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  font-family: var(--font-heading);
}

.site-footer__widgets {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 66%;
  gap: 3rem;
}

.site-footer__widgets .widget {
  flex: 1 1 calc(50% - 1.5rem);
  min-width: 15rem;
}

.site-footer__info {
  display: flex;
  justify-content: start;
  align-items: flex-end;
  padding: 0 0 1rem 0;
  width: 100%;
}

/* Plumbob */
.plumbob {
  display: inline-block;
  margin-top: 0.5rem;
  cursor: pointer;
  position: relative;
  width: 2rem;
  height: auto;
}

.plumbob__shape {
  fill: var(--color-plumbob);
  transition: fill 0.3s ease, transform 0.3s ease;
}

.plumbob:hover .plumbob__shape,
.plumbob:focus .plumbob__shape {
  fill: var(--color-plumbob-hover);
  transform: rotate(2deg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.plumbob__easter-egg {
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-background);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  padding: 0.3rem 0.6rem;
  margin-bottom: 0.3rem;
  font-size: 0.8rem;
  border-radius: 0.3rem;
  border: 1px solid var(--color-accent);
  white-space: nowrap;
  z-index: 10;
}

.plumbob:hover .plumbob__easter-egg,
.plumbob:focus .plumbob__easter-egg {
  display: block;
}

/* Plumbob animation */

@media (prefers-reduced-motion: no-preference) {
  .plumbob:hover,
  .plumbob:focus-visible {
    animation: float 3s ease-in-out infinite;
  }

  @keyframes float {
    0% {
      transform: translateY(0) scale(1);
    }
    50% {
      transform: translateY(-8px) scale(1.1);
    }
    100% {
      transform: translateY(0) scale(1);
    }
  }
}

/* Media Queries */

@media screen and (max-width: 1024px) {
  .site-footer__menu {
    display: flex;
    justify-content: flex-start;
    background-color: var(--color-footer);
  }

  .site-footer__menu nav ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    list-style-type: none;
    width: 100%;
    gap: 1rem;
    margin: 0;
    padding: 0;
  }

  .site-footer__menu nav ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    list-style-type: none;
    width: 100%;
    gap: 1rem;
    margin: 0;
    padding: 0;
  }

  .site-footer__widgets {
    justify-content: flex-start;
  }

   .site-footer__widgets .widget {
    flex: 1 1 100%;
  }
}

@media screen and (max-width: 768px) {
  .site-footer__content {
    display: flex;
    flex-direction: column;
    padding: 2rem 0;
  }

  .site-footer__menu {
    width: 100%;
  }

  .site-footer__menu h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-family: var(--font-heading);
  }

  .site-footer__widgets {
  width: 100%;
}

  .site-footer__info {
    align-items: flex-start;
  }
}
/* Hero component styles */

/* Homepage hero & introduction styles */
.hero-section {
  margin: 0 auto;
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.hero__content {
  position: relative;
  width: 100%;
}

.hero__listing {
  display: flex;
  flex-direction: row;
  position: relative;
  list-style-type: none;
  margin: 0 auto;
  max-width: var(--site-max-width);
  padding: 0 clamp(1rem, 2vw, 2.5rem);
}

.hero-card {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: var(--site-max-width);
  max-width: 100%;
  margin: 0 auto;
}

.hero-card__image-wrapper {
  display: flex;
  justify-content: center;
  width: 60%;
}
.hero-card__image-fallback {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60%;
  aspect-ratio: 3 / 2;
  min-height: 15rem;
  max-height: 35rem;
  border: 1px solid var(--color-accent);
  background-color: var(--color-background);
  padding: 8rem;
  margin-top: -2rem;
  margin-bottom: -2rem;
  z-index: 0;
}

.hero-card__image-wrapper img {
  aspect-ratio: 3 / 2;
  width: 100%;
  height: auto;
  min-height: 15rem;
  max-height: 35rem;
  object-fit: cover;
  margin-top: -2rem;
  margin-bottom: -2rem;
  z-index: 0;
}

.hero-card__content-wrapper {
  display: flex;
  align-items: center;
  width: 40%;
  max-width: 100%;
  padding-right: 1.5rem;
}

.hero-card__content {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: space-between;
  max-width: 100%;
  width: calc(100% + 7rem);
  margin-left: -7rem;
  z-index: 1;
  padding: 1.5rem;
  gap: 1rem;
  background-color: var(--color-background);
  border: 1px solid var(--color-accent);
  transition: box-shadow 0.3s ease-in-out;
}

.hero-card__content a {
  font-family: var(--font-heading);
  font-size: var(--font-size-xxxl);
  line-height: var(--line-height-xs);
  color: var(--color-text);
  text-decoration: none;
  outline: none;
}

/* Page hero styles */
.page-hero {
  padding-top: 7rem;
  padding-bottom: 7rem;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
}

.page-hero__title {
  background-color: var(--color-background);
  width: fit-content;
  padding: 0.5rem;
  opacity: 0;
  transform: scale(0.98);
  animation: fadeInScale 0.6s ease-out forwards;
  animation-delay: 0.2s;
}

.breadcrumbs {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.page-hero__title h1 {
  font-size: clamp(2rem, 5vw + 1rem, 3rem);
  margin-top: 1rem;
}

/* Animation */
@keyframes fadeInScale {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Single post hero styles */
.single-post__hero {
  width: 100%;
  padding: 0;
  background-color: var(--color-background);
}

.hero-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 15rem;
  max-height: 35rem;
  object-fit: cover;
}

.hero-featured-image-fallback {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 15rem;
  max-height: 35rem;
}

/* Media Queries */
@media screen and (min-width: 90rem) {
  .single-post__hero {
    width: 100%;
    margin: 0 auto;
    padding: 0 clamp(1rem, 2vw, 2.5rem);
    max-width: var(--site-max-width);
  }
}

@media screen and (max-width: 1024px) {
  .hero-card {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  .hero-card__image-wrapper {
    width: 60%;
    display: flex;
    justify-content: center;
  }

  .hero-card__image-fallback {
    width: 100%;
    min-height: 15rem;
    max-height: 35rem;
    padding: 6rem;
    margin-top: -2rem;
    margin-bottom: -2rem;
  }

  .hero-card__image-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 3 / 2;
    margin-top: -2rem;
    margin-bottom: -2rem;
  }

  .hero-card__content-wrapper {
    display: flex;
    align-items: center;
    width: 70%;
    max-width: 100%;
    margin-left: -5rem;
    z-index: 1;
    padding-right: 1.5rem;
  }

  .hero-card__content {
    width: calc(100% + 5rem);
    margin-left: 0;
    padding: 1.25rem;
    border: 1px solid var(--color-accent);
    background-color: var(--color-background);
  }

  .page-hero {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

@media screen and (max-width: 768px) {
  /* Hero */
  .hero-section {
    padding-top: 0;
    padding-bottom: 0;
  }

  .hero__listing,
  .introduction {
    flex-direction: column;
    padding: 0;
  }

  .hero-card {
    flex-direction: column;
    padding: 0;
  }

  .hero-card__image-fallback {
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 4rem;
    margin: 0;
    height: auto;
    min-height: 15rem;
  }

  .hero-card__image-wrapper {
    width: 100%;
  }

  .hero-card__image-wrapper img {
    aspect-ratio: 16 / 9;
    margin: 0;
    height: auto;
    min-height: 15rem;
  }

  .hero-card__content-wrapper {
    flex-grow: 1;
    justify-content: center;
    padding: 1rem;
    width: 100%;
    margin-left: 0;
  }

  .hero-card__content {
    justify-content: start;
    padding: 1rem;
    margin-top: -3rem;
    margin-left: 0;
    width: 100%;
    max-width: 100%;
  }

  /* Single post */
  .single-post__hero {
    display: flex;
    flex-direction: column;
    position: relative;
  }

  /* Page */

  .page-hero {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
/* Card component styles */

.blog-listing {
  display: flex;
  padding: 2rem 0;
  flex-direction: column;
}

.blog-listing h2 {
  font-family: var(--font-heading);
  color: var(--color-text);
  margin-bottom: 4rem;
}

.blog-listing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21.25rem, 1fr));
  list-style-type: none;
  gap: 2rem;
  margin-bottom: 2rem;
  padding: 0;
}

.card {
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow 0.3s ease-in-out;
}

.hover-shadow:hover {
  box-shadow: 0.5rem 0.5rem 0rem 0rem var(--color-accent);
}

.post-title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
  line-height: 1.2em;
  color: var(--color-text);
  margin: 0;
}

.post-title a {
  font-family: var(--font-heading);
  color: var(--color-text);
  text-decoration: none;
}

section .post-title.h1 {
  font-size: clamp(1.5rem, 4vw + 1rem, 2.5rem);
  width: 100%;
  line-height: 1.1em;
  margin: 0;
}

.post-title.h2 {
  font-size: clamp(1.25rem, 2.5vw + 1rem, 2rem);
  margin-bottom: 0.5rem;
}

.post-title.h3 {
  font-size: clamp(1.25rem, 2.5vw + 1rem, 2rem);
}

.card a {
  color: var(--color-text);
  outline: 0;
}

.hero-card__content a::after,
.card a::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-card__content a:focus-visible::after,
.card a:focus-visible::after {
  outline: 2px solid var(--color-text);
  box-shadow: 0.5rem 0.5rem 0rem 0rem var(--color-text);
}

.hero-card__content:focus-within,
.card:focus-within {
  outline: 2px solid var(--color-text);
  box-shadow: 0.5rem 0.5rem 0 var(--color-text);
}

.user-is-tabbing .card:focus-within {
  outline: 2px solid var(--color-text);
  box-shadow: 0.5rem 0.5rem 0 0 var(--color-text);
}

.user-is-tabbing .hero-card__content:focus-within {
  outline: 2px solid var(--color-text);
  box-shadow: 0.5rem 0.5rem 0 0 var(--color-text);
}

body:not(.user-is-tabbing) .card:focus-within {
  outline: none;
  box-shadow: none;
}

body:not(.user-is-tabbing) .hero-card__content:focus-within {
  outline: none;
  box-shadow: none;
}

.card__content:hover .btn--primary,
.hero-card__content:hover .btn--primary {
  background-color: var(--color-accent);
  color: var(--color-bg-light) !important;
  transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}

.card__content--page:hover .btn--secondary {
  background-color: var(--color-footer);
  color: var(--color-text);
  transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}

.card__image img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  min-height: 15rem;
  object-fit: cover;
  z-index: 0;
}

.card__image-fallback {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 15rem;
  border: 1px solid var(--color-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card__content-wrapper {
  display: flex;
  flex-grow: 1;
  padding: 1rem;
  background-color: var(--color-accent-2);
}

.card__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: 1rem;
  margin-top: -3rem;
  gap: 1rem;
  background-color: var(--color-background);
}

.card__content--page {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: 1rem;
  gap: 1rem;
  background-color: var(--color-background);
}

.card__content--page h2 {
  margin-bottom: 1rem;
}

.post-date {
  font-size: 0.875rem;
  font-family: var(--font-body);
  color: var(--color-text);
  margin: 0.5rem 0 1rem 0;
}

.hero-card__content span.btn.btn--primary,
.card__content span.btn.btn--primary,
.card__content--page span.btn.btn--secondary {
  margin-top: 1rem;
}

/* Media Queries */

@media screen and (max-width: 1024px) {
  .blog-listing__grid {
    gap: 3rem;
  }
}

@media screen and (max-width: 768px) {

  .blog-listing__grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 4rem;
  }
}
/* Reactiesectie */
.comments {
  margin: 0 auto;
    width: min(90%, var(--site-max-width));
    padding: 0 clamp(0.5rem, 5vw, 2rem);
  }

/* Titel reacties */
.comments h2 {
  font-size: 2rem;
}

.comments__title {
  font-size: 1.25rem;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  margin: 0.5rem 0;
}

.comments__list h3 {
  font-size: 1.5rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

/* Lijst met reacties */

ol.comment-list {
  list-style: none !important;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

ol.comment-list > li:not(:last-child) {
  margin-bottom: 2rem;
}

/* Individuele reactie */
.comment {
  margin: 2rem 0;
  padding: 1.5rem 2rem;
  border: 1px solid var(--color-accent);
  border-radius: 0.25rem;
}

.children .comment {
  border: none;
  padding-left: 1.5rem; /* inspringen */
  margin-bottom: 1rem;
  list-style-type: none;
  border-top: 2px dashed var(--color-accent-2);
}

/* Avatar */
.comment .avatar {
  float: left;
  margin: 0 1rem 0 0;
  border-radius: 50%;
  width: 4rem;
  height: 4rem;
  object-fit: cover;
}

/* Reactietekst */
.comment .comment-content {
  overflow: hidden;
}

/* Auteur naam */
.comment .comment-author {
  font-weight: 700;
  margin-bottom: 0.3rem;
  display: block;
  color: var(--color-text);
  font-size: 1.25rem;
}

/* Metadata (datum, etc) */
.comment .comment-meta {
  font-size: 1rem;
  color: var(--color-text);
  margin-bottom: 1rem;
}

/* Antwoordlink */
.comment-reply-link {
  display: inline-block;
  margin: 0.5rem 0 2rem 0;
  font-size: 0.9rem;
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
  transition: color 0.3s ease;
}

a#cancel-comment-reply-link {
  margin-left: 2rem;
  font-family: var(--font-body);
  font-size: 1rem;
}

/* Reactie in afwachting */
.comment-awaiting-moderation {
  font-style: italic;
  margin-top: 0.5rem;
}

.comment-error {
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  margin-top: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Media Queries */

@media screen and (max-width: 768px) {
  .comments {
    width: 100%;
    padding: 0;
  }

  .comment {
    margin: 1.5rem 0;
    padding: 1.5rem;
    border: 1px solid var(--color-accent);
    border-radius: 0.25rem;
  }

  ol.children {
    padding-left: 1rem;
    margin: 0;
  }

  .children .comment {
    border: none;
    padding-left: 0;
    margin-bottom: 1rem;
    list-style-type: none;
    border-top: 2px dashed var(--color-accent-2);
  }
}
.sidebar {
  grid-area: sidebar;
}

.sidebar__inner {
  display: flex;
  flex-direction: column;
  padding-left: clamp(1rem, 5vw, 2rem);
  gap: 2rem;
  border-left: 2px solid var(--color-accent);
}

.widget {
  display: flex;
  flex-direction: column;
}

.widget h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  font-family: var(--font-heading);
}

.widget ul {
  display: flex;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}

.widget p {
  margin-bottom: 1rem;
}

.social-media {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  width: 100%;
}

.social-media ul {
  display: flex;
  width: 100%;
  background-color: transparent;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
  padding: 0;
  gap: 1rem;
  list-style-type: none;
}

.social-media li a {
  padding: 0;
  border-radius: 50%;
  display: flex;
  color: var(--color-text);
  justify-content: center;
  align-items: center;
  min-width: 2.5rem;
  min-height: 2.5rem;

  &:hover {
    background-color: var(--color-contrast);
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  }
}

.social-media li svg:hover {
  stroke: var(--color-text);
  transition: stroke 0.3s ease-in-out, color 0.3s ease-in-out;
}

.social-media li {
  display: inline-block;
  padding: 0;
  cursor: pointer;
}

.social-media li:hover svg {
  stroke: var(--color-bg-light);
  transition: stroke 0.3s ease-in-out;
}

.social-media li:focus svg {
  stroke: var(--color-background);
  transition: stroke 0.3s ease-in-out;
}

.social-media li svg {
  stroke: var(--color-text);
  fill: transparent;
  pointer-events: visiblePainted;
}

.social-media a:focus-visible {
  background-color: var(--color-text);
  color: var(--color-background);
  border-radius: 50%;
  outline: 2px solid var(--color-text);
}

.social-media a:focus-visible svg {
  stroke: var(--color-background);
}

@media screen and (max-width: 768px) {
  .sidebar {
    padding: 2rem 0;
    border-top: 2px solid var(--color-accent);
    border-left: none;
  }

  .sidebar__inner {
    padding-left: 0;
    border-left: none;
  }

  .widget h2 {
  font-size: 1.5rem;
  }

  .social-media {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    width: 100%;
    gap: 1rem;
  }
}
/* Introduction */

.introduction, .not-found-content-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 5rem;
  margin: 0 auto;
}

.introduction__image-wrapper, .not-found-image-wrapper {
  display: flex;
  justify-content: end;
  position: relative;
  width: 60%;
  max-width: 100%;
  padding-left: 2rem;
  margin: 0;
}

.introduction__image img, .not-found-image img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  min-height: 15rem;
  max-height: 35rem;
  object-fit: cover;
  margin: -2rem 2rem 2rem -2rem;
  position: relative;
}

.introduction__content-wrapper, .not-found-content {
  width: 40%;
  max-width: 100%;
}

.introduction__content, .not-found-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.25rem;
  max-width: 100%;
  width: 100%;
}

.introduction__icon-list {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  padding: 0;
  gap: 0.75rem;
}

.introduction__icon-list li {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1rem;
}

.introduction__icon-list .icon {
  stroke: var(--color-text);
  width: 1.5rem;
  flex-shrink: 0;
}

.introduction__label {
  font-weight: bold;
}

/* Media Queries */

@media screen and (max-width: 1024px) {
    .not-found-content-wrapper {
    gap: 4rem;
    flex-direction: column;
  }

  .not-found-image-wrapper {
    justify-content: center;
    padding-left: 1.5rem;
    width: 100%;
  }

  .introduction__image-wrapper {
    justify-content: center;
    padding-left: 1.5rem;
    width: 50%;
  }

  .introduction__image img, .not-found-image img {
    margin: -1.5rem 1.5rem 1.5rem -1.5rem;
  }
}

@media screen and (max-width: 768px) {
  .introduction {
    gap: 4rem;
    flex-direction: column;
  }

  .introduction__content-wrapper, .not-found-content {
    width: 100%;
  }

  .introduction__content, .not-found-content {
    max-width: 100%;
    width: 100%;
  }

  .introduction__image-wrapper, .not-found-image-wrapper {
    padding-left: 1rem;
    width: 100%;
  }

  .introduction__image, .not-found-image {
    width: fit-content;
    padding: 0;
    margin: 0;
  }

  .introduction__image img, .not-found-image img {
    margin: -1rem 1rem 1rem -1rem;
    height: auto;
    width: 100%;
  }
}
.single-post__content {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-areas: "content sidebar";
  gap: clamp(2rem, 5vw, 4rem);
  background-color: var(--color-background);
  margin: 0 auto;
  margin-top: -10rem;
  padding: clamp(0.5rem, 5vw, 2rem);
  width: min(90%, var(--site-max-width));
  z-index: 1;
}

.single-post__content-wrapper {
  grid-area: content;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 100%;
  /* overflow-x: hidden; */
}

.post-meta {
  padding: 2rem 0;
  width: 100%;
}

.post-meta__list {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  list-style-type: none;
  padding: 1rem 0.5rem;
  background-color: var(--color-background);
  flex-wrap: wrap;
}

.post-meta__item ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0.5rem;
}

.post-meta__list li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.post-meta__list li p,
.post-meta__list li p a,
.post-meta__list li svg {
  font-size: 0.875rem;
  margin: 0;
}

/* Media queries */

@media screen and (max-width: 1024px) {
  .single-post__content {
    grid-template-columns: minmax(0, 2.5fr) minmax(120px, 1fr);
  }

  .post-meta {
    padding: 1.5rem 0;
  }

  .related-posts {
    padding: 0 clamp(0.5rem, 5vw, 2rem);
  }
}

@media screen and (max-width: 768px) {
  .single-post {
    gap: 0;
    padding-bottom: 5rem;
  }

  .single-post__content-wrapper {
    overflow-x: hidden;
  }

  .post-meta {
    padding: 1.25rem 0;
  }

  .single-post__content {
    grid-template-columns: 1fr;
    grid-template-areas:
      "content"
      "sidebar";

    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
    margin-top: -7rem;
    border-bottom: 2px solid var(--color-accent);
  }
}
#search-overlay {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--site-max-width) - 2rem);
  max-width: 90%;
  max-height: calc(100dvh - 8rem);
  overflow-y: auto;
  background: var(--color-background);
  color: var(--color-text);
  border: 2px solid var(--color-accent);
  border-radius: 0.5rem;
  padding: 1rem;
  z-index: 10;
  display: none;
}

#search-overlay.show {
  display: block;
}

.search-results-not-found {
  margin-bottom: 1rem;
}

#search-overlay label {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 1rem;
}

.search-form-fallback {
  display: none;
}

.search-input::placeholder {
  color: var(--color-placeholder);
}