:root {
  --bg: #f8f9fa;
  --text: #2c3e50;
  --muted: #7c8c9e;
  --primary: #2f92e4;
  --primary-ink: #ffffff;
  --accent: #007de4;
  --card: #ffffff;
  --border: #e0e4e8;
  --shadow: 0 2px 8px rgba(47,146,228,.08);
  --shadow-lg: 0 8px 24px rgba(47,146,228,0.15);
  --radius: 8px;
  --highlight-1: #ff000034;
  --highlight-2: #0fc41835;
  --highlight-3: #4ca6ff51;
}

/* Globale vaste achtergrond + overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('../stylesheets/wygc-bg.svg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  z-index: -2;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.88) 40%, rgba(255,255,255,0.94) 100%);
  z-index: -1;
}

/* Material theme overrides */
.md-main {
  background: transparent;
}

.md-content {
  background: transparent;
}

/* Increase base font size for all pages except startpage */
body:not(.startpage) .md-typeset {
  font-size: 0.9rem;
}

body:not(.startpage) .md-typeset p {
  font-size: 0.9rem;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  color: var(--text);
  font-weight: bold;
}

.md-typeset h1 {
  margin-bottom: 0.1em;
}

.md-typeset a {
  color: var(--primary);
}

/* Topbar color */
.md-header {
  background-color: rgb(25, 118, 210);
}

/* Keep header title bold */
.md-header__title {
  font-weight: 700 !important;
}

.md-header__title--active {
  font-weight: 700 !important;
}

/* Hide topbar on homepage */
body.startpage .md-header {
  display: none !important;
}

body.startpage .md-main {
  margin-top: 0 !important;
}

/* Logo styling - white circle background */
.md-header__button.md-logo img,
.md-logo img {
  background-color: white;
  border-radius: 50%;
  padding: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  width: 48px;
  height: 48px;
}

/* Sidebar navigation header color - only left sidebar */
.md-sidebar--primary .md-nav--primary .md-nav__title {
  background-color: transparent !important;
}

.md-sidebar--primary .md-nav__title {
  background-color: transparent !important;
}

/* Blue background for sidebar title on medium and small screens */
@media screen and (max-width: 76.1875em) {
  .md-sidebar--primary .md-nav--primary .md-nav__title {
    background-color: rgb(25, 118, 210) !important;
  }

  .md-sidebar--primary .md-nav__title {
    background-color: rgb(25, 118, 210) !important;
  }
}

/* Table of contents - transparent background */
.md-sidebar--secondary .md-nav__title {
  background-color: transparent !important;
}

/* Card styling for content */
.md-typeset .admonition,
.md-typeset details {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Info box styling */
.md-typeset .admonition.info {
  border-left: 4px solid var(--primary);
}

/* Make table of contents visible by default (except on startpage) */
@media screen and (min-width: 60em) {
  body:not(.startpage) .md-sidebar--secondary {
    display: block !important;
  }

  body:not(.startpage) .md-sidebar--secondary .md-sidebar__scrollwrap {
    display: block !important;
  }
}

/* Footer styling */
.md-footer {
  background-color: rgb(25, 118, 210);
}

.md-footer-meta {
  background-color: rgb(25, 118, 210);
}

.md-footer-copyright a {
  color: var(--md-footer-fg-color--light);
  text-decoration: none;
}

.md-footer-copyright a:hover {
  color: var(--md-footer-fg-color);
  text-decoration: underline;
}