/* ========================================
   PROOFLOAD Guide Theme Custom CSS
   ======================================== */

:root {
  --pl-red: #C44B5A;
  --pl-gray: #8C8C8C;
  --pl-dark: #1a1a1a;
  --pl-light: #f8f8f8;
}

/* --- Logo im Header --- */
.brand a,
.logo a,
.site-title a {
  background-image: url('/media/proofload-logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  width: 220px;
  height: 60px;
  text-indent: -9999px;
}

/* --- Header --- */
.site-header,
header {
  background-color: #ffffff;
  border-bottom: 3px solid var(--pl-red);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* --- Navigation --- */
.main-nav a,
.nav-item a {
  color: var(--pl-dark);
  font-weight: 500;
}
.main-nav a:hover,
.nav-item a:hover {
  color: var(--pl-red);
}

/* --- Aktiver Menüpunkt --- */
.nav-item.active a,
.navigation .active,
.nav-item.current a {
  background-color: var(--pl-red);
  color: #ffffff;
}

/* --- Links --- */
a {
  color: var(--pl-red);
}
a:hover {
  color: var(--pl-gray);
}

/* --- Sidebar / TOC --- */
.sidebar,
.toc,
nav.toc {
  border-left: 3px solid var(--pl-red);
  background-color: var(--pl-light);
}

/* --- Überschriften --- */
h1, h2, h3, h4 {
  color: var(--pl-dark);
}
h1 {
  border-bottom: 2px solid var(--pl-red);
  padding-bottom: 0.3em;
}

/* --- Buttons --- */
button,
.button,
.btn,
.submit {
  background-color: var(--pl-red);
  color: white;
  border: none;
  border-radius: 3px;
}
button:hover,
.button:hover {
  background-color: var(--pl-gray);
}

/* --- Footer --- */
.site-footer,
footer {
  border-top: 3px solid var(--pl-red);
  background-color: var(--pl-light);
  color: var(--pl-gray);
}