/* ============================================
   OWMV OVERRIDES CSS
   Op weg met verhalen — kleur- en branding overrides
   
   Gebruik: voeg toe NA zvo.css in de layout
   
   VERSIE WISSELEN:
   - Versie A (regenboog-header): standaard actief
   - Versie B (donkere navbar): comment versie A uit, 
     uncomment versie B onderaan dit bestand
   ============================================ */

/* ---------- Kleurvariabelen ---------- */
:root {
  --owmv-rood: #e61e5f;
  --owmv-rood-dark: #c4184f;
  --owmv-oranje: #f68b2a;
  --owmv-oranje-dark: #d97520;
  --owmv-groen: #8dc63f;
  --owmv-groen-dark: #74a832;
  --owmv-blauw: #20b6e7;
  --owmv-blauw-dark: #0088d4;
  --owmv-paars: #77459a;
  --owmv-paars-dark: #613880;
  --owmv-dark: #1a3a4a;
  --owmv-text: #1d1f24;
  --owmv-white: #ffffff;
}

/* ===========================================
   VERSIE A: REGENBOOG-AQUAREL HEADER
   =========================================== */

/* -- Navbar achtergrond -- */
#mainNav {
  background: url('/assets/img/owmv-header-bg.jpg') center center / cover no-repeat;
  padding-bottom: 20px;
}

#mainNav.navbar-shrink {
  background: url('/assets/img/owmv-header-bg.jpg') center center / cover no-repeat;
}

/* -- Navbar tekst wit op regenboog -- */
#mainNav a {
  color: var(--owmv-white);
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

#mainNav a:hover {
  color: var(--owmv-white);
  text-decoration: underline;
  text-shadow: 0 1px 5px rgba(0,0,0,0.5);
}

/* -- Logo in navbar -- */
.navbar-brand {
  color: var(--owmv-white) !important;
}

.navbar-brand a {
  color: var(--owmv-white);
}

.logo {
  display: block;
  width: 260px;
  padding-top: 5px;
}

/* -- Hamburger menu afgerond -- */
.navbar-toggler {
  border-radius: 50px !important;
  padding: 8px 24px !important;
  border: 2px solid var(--owmv-white) !important;
  background-color: transparent !important;
  color: var(--owmv-white);
  margin-left: auto;
  margin-right: 1rem;
}

.navbar-toggler .fa-bars {
  color: var(--owmv-white);
}

/* -- Dropdown menu rechts uitlijnen -- */
#navbarResponsive {
  text-align: right;
}

#navbarResponsive .navbar-nav {
  align-items: flex-end;
}

/* -- Hamburger dropdown: items links uitlijnen -- */
@media (max-width: 1199px) {
  #navbarResponsive .navbar-nav {
    align-items: flex-start;
    padding: 1rem 0 1rem 15px;
  }
  
  #navbarResponsive {
    text-align: left;
  }
}

/* ===========================================
   ALGEMENE KLEUR OVERRIDES
   =========================================== */

/* -- Headings -- */
/* TEST 2 actief: grote koppen rood, kleine koppen paars */
h1, h2, h3 {
  color: var(--owmv-rood);
}

#pagina-heading h1 {
  color: var(--owmv-rood) !important;
}

h4, h5, h6 {
  color: var(--owmv-paars);
}

.card-title, .inspiratie h4 {
  color: var(--owmv-paars);
}

/* -- Links: paars (tags blijven blauw) -- */
a {
  color: var(--owmv-paars);
}

a:focus, a:hover {
  color: var(--owmv-rood);
}

.tag {
  color: var(--owmv-blauw);
}

a.paars {
  color: var(--owmv-paars);
}

a:hover.paars {
  color: var(--owmv-rood);
}

/* -- Alle primaire knoppen blauw -- */
.btn.btn-primary,
.btn.btn-primary.login,
.card-footer .btn,
a.btn.btn-primary {
  background-color: var(--owmv-blauw) !important;
  border-color: var(--owmv-blauw) !important;
  color: var(--owmv-white) !important;
}

.btn.btn-primary:hover,
.btn.btn-primary.login:hover,
.card-footer .btn:hover,
a.btn.btn-primary:hover {
  background-color: var(--owmv-paars) !important;
  border-color: var(--owmv-paars) !important;
  color: var(--owmv-white) !important;
}

/* -- Kaart buttons kleiner -- */
.card .btn.btn-block {
  padding: 6px 16px;
  font-size: 0.8rem;
}

/* -- Jaarkalender knop: wit met rode tekst + hover -- */
.btn.btn-primary.jaarkalender {
  background-color: var(--owmv-white) !important;
  color: var(--owmv-rood) !important;
  border-color: var(--owmv-white) !important;
}
.btn.btn-primary.jaarkalender:hover {
  background-color: var(--owmv-rood) !important;
  color: var(--owmv-white) !important;
  border-color: var(--owmv-rood) !important;
}

/* -- Navbar login knop: wit (MOET na algemene knoppen staan) -- */
.btn.btn-primary.navbar-login,
button.btn.btn-primary.navbar-login {
  background-color: var(--owmv-white) !important;
  color: var(--owmv-blauw) !important;
  border: 2px solid var(--owmv-white) !important;
  font-weight: 700;
  box-shadow: none;
}

.btn.btn-primary.navbar-login:hover,
button.btn.btn-primary.navbar-login:hover {
  background-color: var(--owmv-blauw) !important;
  color: var(--owmv-white) !important;
  border: 2px solid var(--owmv-white) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

/* -- Zoek overlay knoppen: blauw -- */
.overlaysearch .btn.btn-primary {
  background-color: var(--owmv-blauw) !important;
  border-color: var(--owmv-blauw) !important;
  color: var(--owmv-white) !important;
  border: 1px solid white;
}

.overlaysearch .btn.btn-primary:hover {
  background-color: var(--owmv-blauw-dark) !important;
  border-color: var(--owmv-blauw-dark) !important;
}

/* -- Footer: blauw -- */
.footer {
  background-color: var(--owmv-blauw);
}

.footertext {
  color: var(--owmv-white);
}

.footerlink {
  color: var(--owmv-white);
}

.footerlink:hover {
  color: var(--owmv-white);
  text-decoration: underline;
}

/* -- Gedenkdagen blok: rood -- */
.card-body.gedenkdagen {
  background-color: var(--owmv-rood);
  border-radius: 0.25rem 0.25rem 0rem 0rem;
}

.card-body.gedenkdagen h4 {
  color: var(--owmv-white);
}

.card-body.gedenkdagen p {
  color: var(--owmv-white);
}
.card-footer.gedenkdagen-footer {
  background-color: var(--owmv-rood);
  border-top: none;
  border-radius: 0 0 0.25rem 0.25rem;
}
/* -- Les van de maand footer: oranje -- */
.card-footer.lesvandemaand {
  background-color: var(--owmv-oranje);
}
.card-footer.lesvandemaand .btn {
  background-color: var(--owmv-white) !important;
  border-color: var(--owmv-white) !important;
  color: var(--owmv-oranje) !important;
}
.card-footer.lesvandemaand .btn:hover {
  background-color: var(--owmv-oranje-dark) !important;
  border-color: var(--owmv-white) !important;
  color: var(--owmv-white) !important;
}

/* -- Gedenkdagen card-footer button: wit met rode tekst + hover -- */
.card-footer.gedenkdagen-footer .btn {
  background-color: var(--owmv-white) !important;
  border-color: var(--owmv-white) !important;
  color: var(--owmv-rood) !important;
}
.card-footer.gedenkdagen-footer .btn:hover {
  background-color: var(--owmv-rood-dark) !important;
  border-color: var(--owmv-white) !important;
  color: var(--owmv-white) !important;
}

/* -- Jaarplannen: gekleurde (gele) cards terug naar wit -- */
.card.geel {
  background: var(--owmv-white);
}
/* -- Geel verloop behouden met oranje -- */
.geelverdieping, .geel {
  background: linear-gradient(180deg, var(--owmv-oranje) 0%, var(--owmv-oranje) 10%, rgba(255,255,255,1) 80%);
}

/* -- Zoek overlay: rood -- */
.overlaysearch {
  background-color: var(--owmv-rood)!important;
}

h2.zoekheader {
  color: var(--owmv-white);
}

h4.kolomkop {
  color: var(--owmv-white);
}

/* -- Breadcrumb spacing -- */
.breadcrumb {
  margin-top: 140px;
}

/* -- Home start tekst links -- */
#home-start .home {
  text-align: left;
}


/* ===========================================
   VERSIE B: DONKERE NAVBAR (uncomment om te activeren)
   Comment dan VERSIE A navbar-regels hierboven uit
   =========================================== 

#mainNav {
  background: var(--owmv-dark);
  padding-bottom: 20px;
}

#mainNav.navbar-shrink {
  background-color: var(--owmv-dark);
}

#mainNav a {
  color: var(--owmv-white);
  text-shadow: none;
}

#mainNav a:hover {
  color: var(--owmv-oranje);
  text-decoration: underline;
  text-shadow: none;
}

*/


/* ===========================================
   TEST 1: grote koppen paars, kleine koppen rood
   (uncomment om te testen, comment TEST 2 hierboven uit)
   ===========================================*/

h1, h2, h3 {
  color: var(--owmv-rood);
}
#pagina-heading h1 {
  color: var(--owmv-rood) !important;
}
h4, h5, h6 {
  color: var(--owmv-paars);
}
.card-title, .inspiratie h4 {
  color: var(--owmv-paars);
}



/* -- Welkomstblok home -- */
.owmv-welkomst {
  background: var(--owmv-white);
  /* later toevoegen: url('/assets/img/owmv-voetstapjes.png') right bottom no-repeat */
  border: 1px solid var(--owmv-rood);
  border-radius: 12px;
}

/* -- Welkomstblok home: knop rood -- */
.owmv-welkomst .btn.btn-primary {
  background-color: var(--owmv-rood) !important;
  border-color: var(--owmv-rood) !important;
  color: var(--owmv-white) !important;
}
.owmv-welkomst .btn.btn-primary:hover {
  background-color: var(--owmv-rood-dark) !important;
  border-color: var(--owmv-rood-dark) !important;
  color: var(--owmv-white) !important;
}

/* -- Font: Lato (huisstijl) -- 
body {
  font-family: 'Lato', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Lato', sans-serif;
}

.btn {
  font-family: 'Lato', sans-serif !important;
}

*/