/* =======================================
   Willy's Theme Stylesheet - theme.css
   ======================================= */

:root {
  /* Brand / Primair */
  --color-brand: #011078;

  /* Neutrale tinten */
  --color-neutral-900: #6D769A;
  --color-neutral-700: #A3A9AB;
  --color-neutral-500: #BEC2B4;
  --color-neutral-300: #CCCFB8;
  --color-neutral-100: #D3D5BA;

  /* Semantische toewijzingen */
  --color-bg: #F2F3EB;
  --color-text: var(--color-neutral-900);
  --color-accent: var(--color-neutral-500);
  --color-surface: var(--color-neutral-300);
  --color-border: var(--color-neutral-500);
  
  /*.Dimensions */
  --content-width: 90vw;
  --content-max-width: 1000px;
}

/* Algemeen uiterlijk */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: "IBM Plex Mono", monospace;
	font-size: 1rem;
	line-height: 1.6;
	padding: 2rem;
}

/* Header styling */
header {
	width: 100%; /* var(--content-width); */
	max-width: calc(var(--content-max-width) * 1.2);
	margin: 0 auto;
	background-color: var(--color-brand);
	color: var(--color-neutral-500);
	padding: 1.5rem 2rem;
}

.header-content-wrapper {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

header h1 {
  margin: 0;
  font-size: 1.8rem;
  text-align: center;
  color: var(--color-neutral-500);
}	

/* Centrale layout wrapper */
.main-content-wrapper {
	flex: 1;
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: 2rem;
}

/* Links */
a {
  color: var(--color-brand);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Headings */
h1, h2, h3, h4 {
  color: var(--color-brand);
  line-height: 1.2;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

/* Alleen voor tekstinhoud */
article, .text-block {
  max-width: 80ch;
  margin: 0 auto;
}

/* Code blocks */
code {
  background: var(--color-surface);
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-family: "IBM Plex Mono", monospace;
}


/* Breadcrumb Wrapper */

nav.breadcrumb {
  background: transparent; /* of desnoods een subtiele tint als je dat ooit wil */
}

.breadcrumb-content {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--color-neutral-900);
}

.breadcrumb-content a {
  color: var(--color-brand);
  text-decoration: none;
}

.breadcrumb-content a:hover {
  text-decoration: underline;
}

.breadcrumb a + a::before {
  content: "/";
  padding: 0 0.25em;
  color: var(--color-neutral-700);
}

.breadcrumb {
  font-size: 0.9rem;
  margin-bottom: 1rem;
  color: var(--color-neutral-900);
}

.breadcrumb a {
  color: var(--color-brand);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb code {
  background: none;
  padding: 0;
}

footer {
  padding: 1rem;
  font-size: 0.9em;
  color: var(--color-neutral-900);
  text-align: center;
}