/* Cache bust 2026-09-09-2 */

/*
 * SunMonitor Huisstijl voor Quark 2
 * Bestand: user/themes/quark2/css/custom.css
 */

/* =========================================
   1. Design tokens overschrijven
   ========================================= */
:root,
:root[data-theme="light"] {
  --q2-accent: #E67E22;
  --q2-link: #E67E22;
  --q2-focus-ring: color-mix(in oklab, #E67E22 35%, transparent);

  --pico-primary: #E67E22;
  --pico-primary-hover: #D35400;
  --pico-primary-background: #E67E22;
  --pico-primary-border: #E67E22;
  --pico-primary-inverse: #ffffff;
}

:root[data-theme="dark"] {
  --q2-accent: #E67E22;
  --q2-link: #E67E22;
  --q2-focus-ring: color-mix(in oklab, #E67E22 40%, transparent);
  --pico-primary: #E67E22;
  --pico-primary-hover: #F39C12;
  --pico-primary-background: #E67E22;
  --pico-primary-border: #E67E22;
}

/* =========================================
   2. Header donker
   ========================================= */
#header {
  background-color: #1a1a1a !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Top-level navigatie links (wit) */
#header .navigation > li > a {
  color: #ffffff !important;
  font-weight: 500;
}

#header .navigation > li > a:hover,
#header .navigation > li > a:focus-visible {
  color: #E67E22 !important;
}

/* Actieve pagina */
#header .navigation > li > a.active {
  color: #E67E22 !important;
  font-weight: 600;
}

#header .navbar-brand,
#header .logo {
  color: #ffffff !important;
}

/* =========================================
   3. Dropdowns (fix voor witte tekst)
   ========================================= */
#header .navigation li.has-children > ul,
#header .dropmenu ul ul {
  background: #ffffff !important;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  padding: 0.4rem 0;
  min-width: 240px;
}

/* Links in dropdowns donker maken */
#header .navigation li.has-children > ul a,
#header .dropmenu ul ul a {
  color: #222222 !important;
  padding: 0.55rem 1.15rem;
  font-weight: 400;
  display: block;
}

#header .navigation li.has-children > ul a:hover,
#header .dropmenu ul ul a:hover {
  background-color: #f8f9fa;
  color: #E67E22 !important;
  text-decoration: none;
}

/* =========================================
   4. Knoppen oranje
   ========================================= */
.button,
.btn,
a.button,
button[type="submit"],
input[type="submit"],
.btn-primary,
#header .actions a,
#header .actions button {
  background-color: #E67E22 !important;
  border-color: #E67E22 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  font-weight: 500;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.button:hover,
.btn:hover,
a.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.btn-primary:hover,
#header .actions a:hover,
#header .actions button:hover {
  background-color: #D35400 !important;
  border-color: #D35400 !important;
  color: #ffffff !important;
}

.button:focus-visible,
.btn:focus-visible,
a.button:focus-visible,
button:focus-visible {
  outline: 2px solid #E67E22;
  outline-offset: 2px;
}

/* =========================================
   5. Overige
   ========================================= */
a {
  color: #E67E22;
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: #D35400;
  text-decoration: underline;
}

.card {
  border-radius: 10px;
}

#footer {
  background-color: #1a1a1a;
  color: #e5e7eb;
}
#footer a {
  color: #ffffff;
}
#footer a:hover {
  color: #E67E22;
}