/***************************************************************
* DARK SKIN  (origineel ongewijzigd) 
***************************************************************/
body { /* General background and text color */
 color:#aaa;
}
#topnavi,
.menu-responsive,
.slicknav_nav,
#slide-bg,
#content {
    background-color: rgba(34,34,34,0.97);
    }
/* border-color */
.comment-topborder,
.primary article,
table th,
table tr,
.divider_hr {
 border-color: #333;
}
h1, h2, h3, h4, h5, h6,
h1 a, h1 a:link, h1 a:visited,
h2 a, h2 a:link, h2 a:visited,
h3 a, h3 a:link, h3 a:visited,
h4 a, h4 a:link, h4 a:visited,
h5 a, h5 a:link, h5 a:visited,
h6 a, h6 a:link, h6 a:visited { /* headline links color*/
 color: #fff;
}
.socialicons a {
    color: #fff;
    }
h6.infotitle,
li.infotitle {
 color: #aaa;
}
a:hover,
a:active { /* General links color on mouse hover */
 color: #aaa;
}
#top-bar {
 background-color: #222;
}
.post-date, .post-date a {
 color: #fff !important;
}
pre, code {
 color: #ccc;
}
/* NEWS ON HOMEPAGE / NEWS WIDGET**************************************/
.time-ago,
.time-ago a,
.time-ago a:link,
.time-ago a:visited,
.comment-nr {
 color: #777;
}
/* MUSIC */
.music-link {
    border-top: 1px solid #444;
    }
.music-link:first-of-type {
    border: 0;
    }     
.music-link:hover {
    background-color: rgba(50,50,50,0.4);
    }
.music-link i.fab {
    color: #fff;
    }
.wp-playlist {
    border-top: 1px solid #444 !important;
    border-bottom: 1px solid #444 !important;
    }
/* BUTTONS **************************************************************/
button,
.button,
a.button,
.button1 span,
.buttonS span,
.button1,
.buttonS,
.button2,
input.submit,
input[type='submit'],
li.comment .reply a {
 color: #fff !important;
}
.button:hover,
.button1:hover,
.buttonS:hover,
.button2:hover,
li.comment .reply:hover {
 background-color: #808080;
}
.cancelled {
 color: #fff;
 background-color: #555;
}
.soldout {
 color: #fff;
 background-color: #808080;
}

/* SELECTION ************************************************************/
::-moz-selection {
 color: #222;
 background: #fff;
}
::-webkit-selection {
 color: #222;
 background: #fff;
}
::selection {
 color: #222;
 background: #fff;
}
/* FORMS ****************************************************************/
textarea, input {
 background-color: #444;
 color: #aaa;
}
/* NOTIFICATION *********************************************************/
.error,
.moderation {
 color: #bf5665;
}

/* WIDGETS **************************************************************/
/* news widget */
.news-widget-title h1 {
 color: #eee;
}
.post-info-w {
 color: #777;
}
/* calendar widget */
#wp-calendar tbody {
 color: #888;
}
#wp-calendar tbody td {
 background: #292929;
 border: 2px solid #222;
}
/* NAVIGATION ***********************************************************/
#navi-icon,
.sf-menu a,
.sf-menu a:visited,
.sf-menu li a,
.sf-menu li a:active,
.slicknav_menu ul li a { /* navigation link color */
 color: #fff;
}
.sf-menu li:hover,
.sf-menu li.sfHover,
.sf-menu a:focus,
.sf-menu a:hover,
.sf-menu a:active,
.slicknav_menu ul li a { /* navigation link color on mouseover */
 color: #fff;
}
.sf-menu ul,
.sf-menu ul a,
.sf-menu ul a:visited,
.sf-menu ul li a,
.sf-menu ul li a:active { /* dropdown */
 background-color: #222;
 color: #fff;
}
.slicknav_nav li,
.slicknav_nav ul.sub-menu li:first-child {
    border-top: 1px solid #444;
    }         
/* COMMENTS *************************************************************/
.single-comment {
    background: rgba(0,0,0,0.2);
    }
.comment-date,
.comment-date a {
 color: #777;
}
.comment-date a:hover {
 color: #777
}
a.page-numbers {
 color: #fff;
 background-color: #333;
}
span.page-numbers,
a.page-numbers:hover {
 color: #fff;
}
.fn {color: #eee;}
.depth-2 .comment-arrow,
.comment-counter {
 color: #666;
}

/* PAGINATION ***********************************************************/
.pagination_main span, .pagination_main a {
 color: #fff !important;
 background-color: #333;
}
/* FOOTER ***************************************************************/
#footer {/* Footer background color */
 background-color: #222;
}
#footer h3 { /* Footer headlines */
 color: #fff;
}
#footer-widget-area { /* Footer general color */
 color: #777;
}
#footer-widget-area a,
#footer-widget-area a:link,
#footer-widget-area a:visited { /* Footer links color */
 color: #fff;
}
.flickr_badge_image img
 {
 background: #1a1a1a;
}
#social,
#copyright {
 background-color: #292929;
 color: #666;
}
/* SHORTCODES ***********************************************************/
/* Toggle */
.toggle_container .block {
 background-color: #181818;
}
/* Tabs */
.redsun-tab    {
 background-color: #181818;
    border-color: #191919;
 color: #eee;
    }     
.redsun-tabs .ui-tabs-active a {
 background-color: #181818;
 color: #eee !important;
 border-color: #191919;
}
/* Highlight */
.highlight1 {
 color: #222;
    }


/* =====================================================================
   OVERRIDES (palette) — afgeleid uit screenshot (donker + rood accent)
   ===================================================================== */

/* 1) Variabelen */
:root {
  --bg-900: #212121;
  --bg-800: #21211F;
  --bg-700: #212124;

  --text-100: #FFFFFF; /* primaire tekst */
  --text-400: #BDB1B2; /* secundair */
  --accent-500: #E53C48; /* rood */
  --accent-600: #C2333D; /* rood hover (donkerder) */
}

/* 2) Basiskleuren */
body { color: var(--text-400); }
#topnavi, .menu-responsive, .slicknav_nav, #slide-bg, #content {
  background-color: rgba(33,33,33,0.97);
}
.comment-topborder, .primary article, table th, table tr, .divider_hr { border-color: #2B2B2B; }
h6.infotitle, li.infotitle { color: var(--text-400); }

/* Topbar + dropdowns */
#top-bar { background-color: var(--bg-800); }
.sf-menu ul, .sf-menu ul a, .sf-menu ul a:visited,
.sf-menu ul li a, .sf-menu ul li a:active {
  background-color: var(--bg-800);
  color: #fff;
}

/* Widgets / Calendar */
#wp-calendar tbody td { border: 2px solid var(--bg-800); }

/* Forms */
textarea, input { color: var(--text-400); }

/* Buttons – accent rood */
button, .button, a.button, .button1 span, .buttonS span,
.button1, .buttonS, .button2, input.submit, input[type='submit'],
li.comment .reply a {
  background-color: var(--accent-500);
  color: #FFFFFF !important;
}
.button:hover, .button1:hover, .buttonS:hover, .button2:hover,
li.comment .reply:hover {
  background-color: var(--accent-600);
}

/* Footerbanden */
#footer { background-color: var(--bg-800); }
#social, #copyright { background-color: var(--bg-700); color: #666; }

/* Menu – optioneel actieve tab rood (let op echte '>' i.p.v. >) */
.sf-menu > li.current-menu-item > a,
.sf-menu > li.current-menu-parent > a { background-color: var(--accent-500); color:#fff; }
.sf-menu > li > a:hover,
.sf-menu > li.sfHover > a { background-color: var(--accent-600); color:#fff; }

/* 3) LINKS – sitebreed (geen buttons) */
#content a:not(.button):not(.button1):not(.button2):not(.buttonS),
.primary a:not(.button):not(.button1):not(.button2):not(.buttonS),
.sidebar a:not(.button):not(.button1):not(.button2):not(.buttonS),
.widget a:not(.button):not(.button1):not(.button2):not(.buttonS),
#footer-widget-area a:not(.button):not(.button1):not(.button2):not(.buttonS),
.entry-content a:not(.button):not(.button1):not(.button2):not(.buttonS) {
  color: var(--text-100);
  text-decoration: none;
}

/* Hover/focus naar rood – ook als thema li:hover > a gebruikt */
#content a:hover:not(.button):not(.button1):not(.button2):not(.buttonS),
.primary a:hover:not(.button):not(.button1):not(.button2):not(.buttonS),
.sidebar a:hover:not(.button):not(.button1):not(.button2):not(.buttonS),
.widget a:hover:not(.button):not(.button1):not(.button2):not(.buttonS),
#footer-widget-area a:hover:not(.button):not(.button1):not(.button2):not(.buttonS),
.entry-content a:hover:not(.button):not(.button1):not(.button2):not(.buttonS),
#content a:focus:not(.button):not(.button1):not(.button2):not(.buttonS),
.primary a:focus:not(.button):not(.button1):not(.button2):not(.buttonS) {
  color: var(--accent-500) !important;
  outline: none;
}

/* Bezocht = wit (niet terug naar zwart) */
#content a:visited:not(.button):not(.button1):not(.button2):not(.buttonS),
.primary a:visited:not(.button):not(.button1):not(.button2):not(.buttonS),
.sidebar a:visited:not(.button):not(.button1):not(.button2):not(.buttonS),
.widget a:visited:not(.button):not(.button1):not(.button2):not(.buttonS),
#footer-widget-area a:visited:not(.button):not(.button1):not(.button2):not(.buttonS),
.entry-content a:visited:not(.button):not(.button1):not(.button2):not(.buttonS) {
  color: var(--text-100);
}


/* 4) Pages widget – wit default, rood hover/focus (inclusief li:hover > a) */
.widget_pages ul li a {
  color: var(--text-100);
  text-decoration: none;
}
.widget_pages ul li a:hover,
.widget_pages ul li a:focus,
.widget_pages ul li:hover > a,
.widget_pages li.page_item:hover > a,
.widget_pages li.current_page_item > a {
  color: var(--accent-500) !important;
  outline: none;
}
.widget_pages ul li a:visited { color: var(--text-100) !important; }


/* === DESKTOP (≥1200px): full-width justified + active indicator === */
@media (min-width: 1200px) {
  #topnavi .sf-menu {
    display: flex;
    flex-wrap: wrap;            /* hele items mogen doorwrapen als het moet */
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 8px 16px;
  }
  #topnavi .sf-menu > li { flex: 0 1 auto; }
  #topnavi .sf-menu > li > a {
    padding: 10px 14px;
    line-height: 1.1;
    white-space: nowrap;
    position: relative;         /* voor de indicator */
  }
  /* actieve onderstreep */
  #topnavi .sf-menu > li.current-menu-item > a::after,
  #topnavi .sf-menu > li.current-menu-parent > a::after {
    content: '';
    position: absolute;
    left: 8px; right: 8px;
    bottom: -6px;
    height: 3px;
    background: var(--accent-500);
    border-radius: 2px;
  }
  /* hover states (jouw kleuren) */
  #topnavi .sf-menu > li > a:hover,
  #topnavi .sf-menu > li.sfHover > a {
    background-color: var(--accent-600);
    color: var(--text-100);
  }
  /* submenus onaangeroerd */
  #topnavi .sf-menu > li > ul { display: block; }
}

/* === TABLET (900–1199px): gecentreerd, nette ritmiek === */
@media (min-width: 900px) and (max-width: 1199px) {
  #topnavi .sf-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
  }
  #topnavi .sf-menu > li { flex: 0 0 auto; }
  #topnavi .sf-menu > li > a {
    padding: 10px 12px;
    line-height: 1.1;
    white-space: nowrap;
  }
  #topnavi .sf-menu > li > ul { display: block; }
}

/* === MOBIEL (<900px): wrap of scroll — kies één van de twee === */

/* Variant 1: WRAP (makkelijk, betrouwbaar) */
@media (max-width: 899px) {
  #topnavi .sf-menu {
    display: flex;
    flex-wrap: wrap;            /* breekt in nette rijen */
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 10px;
  }
  #topnavi .sf-menu > li > a { padding: 8px 10px; }
  #topnavi .sf-menu > li > ul { display: block; }
}

/* Variant 2 (alternatief): HORIZONTAAL SCROLLEN, geen wrap
   - haal de bovenstaande @media (max-width: 899px) weg als je deze wilt
@media (max-width: 899px) {
  #topnavi .sf-menu {
    display: flex;
    flex-wrap: nowrap;          //  geen tweede rij
    overflow-x: auto;
    gap: 10px;
    padding:    padding: 8px 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;      //  Firefox
  }
  #topnavi .sf-menu > li { flex: 0 0 auto; }
  #topnavi .sf-menu > li > a { padding: 8px 10px; white-space: nowrap; }
  #topnavi .sf-menu > li > ul { display: block; }
}


/* === NAV: vul de bovenkant volledig met het rode tab-achtergrond === */

/* 1) Haal verticale padding van de menubalk weg (desktop & tablet) */
@media (min-width: 900px) {
  #topnavi .sf-menu {
    padding-top: 0;
    padding-bottom: 0;
  }
  /* Zorg dat lijstitems geen eigen marge hebben */
  #topnavi .sf-menu > li { margin: 0; }
}

/* 2) Laat het anchor zelf de hoogte bepalen en mooi centreren */
#topnavi .sf-menu > li > a {
  display: block;          /* zorgt dat background de volle hoogte pakt */
  padding: 12px 14px;      /* verticale lucht binnen de tab */
  line-height: 1.15;       /* nette verticale uitlijning van de tekst */
}

/* 3) Actief/hover: jouw bestaande kleuren blijven van kracht */
#topnavi .sf-menu > li.current-menu-item > a,
#topnavi .sf-menu > li.current-menu-parent > a {
  background-color: var(--accent-500);
  color: var(--text-100);
}
#topnavi .sf-menu > li > a:hover,
#topnavi .sf-menu > li.sfHover > a {
  background-color: var(--accent-600);
  color: var(--text-100);
}

/* 4) Mocht er nog/* 4) Mocht er nog een 1px lijn zichtbaar blijven: haal eventuele top-border weg */
#topnavi, #topnavi .sf-menu {
  border-top: 0;
  box-shadow: none; /* voor themes die een schaduw op de menubalk zetten */


/* === EDGE/IE-mode SAFE: tab vulkleur op <li> i.p.v. alleen op <a> === */

/* 1) Container: geen verticale padding; items 'stretch' voor gelijke hoogte */
#topnavi .sf-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;   /* laat elk li even hoog zijn */
  padding: 0;             /* voorkomt een donkere strook boven/onder */
}

/* 2) Lijstitems en anchors */
#topnavi .sf-menu > li { margin: 0; position: relative; }
#topnavi .sf-menu > li > a {
  display: flex;                 /* zorg dat de background van LI zichtbaar blijft */
  align-items: center;           /* verticale centrering van tekst */
  padding: 12px 14px;
  line-height: 1.15;
  background: transparent;       /* belangrijk: laat LI-achtergrond zichtbaar */
  white-space: nowrap;
  color: var(--text-100);
}

/* 3) Actief item en hover op het LI zelf (met fallback zonder var()) */
#topnavi .sf-menu > li.current-menu-item,
#topnavi .sf-menu > li.current-menu-parent {
  background-color: #E53C48;           /* legacy fallback */
  background-color: var(--accent-500); /* modern */
}
#topnavi .sf-menu > li:hover,
#topnavi .sf-menu > li.sfHover {
  background-color: #C2333D;           /* legacy fallback */
  background-color: var(--accent-600); /* modern */
}
#topnavi .sf-menu > li:hover > a,
#topnavi .sf-menu > li.sfHover > a,
#topnavi .sf-menu > li.current-menu-item > a,
#topnavi .sf-menu > li.current-menu-parent > a {
  background: transparent;             /* hou anker zelf transparant */
  color: var(--text-100);
}

/* 4) Flex-gap fallback voor oudere Edge/IE-mode */
@supports not (gap: 1rem) {
  #topnavi .sf-menu { margin: 0 -7px; }
  #topnavi .sf-menu > li { margin: 0 7px; }
}
/* Als je elders 'gap' hebt staan voor de nav, laat dat gerust staan:
   de @supports-fallback pakt alleen browsers zonder gap-ondersteuning


/* === EDGE normalisatie voor Superfish topmenu === */

/* 0) Haal restjes padding/marge/border weg op de containers */
#topnavi {
  padding-top: 0;
  padding-bottom: 0;
  border-top: 0;
  box-shadow: none;
}
#topnavi .sf-menu {
  padding: 0;
  margin: 0;
  border: 0;
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;     /* alle kolommen even hoog */
}

/* 1) Schakel oude float-gedrag van Superfish uit op top-level */
#topnavi .sf-menu > li {
  float: none;              /* Edge/legacy fix: geen floats */
  display: flex;            /* laat het <a> de kolomhoogte vullen */
  align-items: stretch;
  margin: 0;
  padding: 0;
  position: relative;
}

/* 2) Anchor vult kolom en centreert content verticaal */
#topnavi .sf-menu > li > a {
  display: flex;            /* i.p.v. block: betere vertical align in Edge */
  align-items: center;
  justify  justify-content: center;  /* optioneel: tekst netjes midden */
  padding: 12px 14px;       /* verticale lucht in de tab */
  line-height: 1.15;
  background: transparent;  /* laat LI-achtergrond zichtbaar */
  white-space: nowrap;
  color: var(--text-100);
  height: 100%;             /* anchor neemt de volledige LI-hoogte */
  box-sizing: border-box;
}

/* 3) Actieve/hover kolomkleur op het LI zelf (met fallback voor var()) */
#topnavi .sf-menu > li.current-menu-item,
#topnavi .sf-menu > li.current-menu-parent {
  background-color: #E53C48;           /* fallback */
  background-color: var(--accent-500); /* modern */
}
#topnavi .sf-menu > li:hover,
#topnavi .sf-menu > li.sfHover {
  background-color: #C2333D;           /* fallback */
  background-color: var(--accent-600); /* modern */
}
#topnavi .sf-menu > li:hover > a,
#topnavi .sf-menu > li.sfHover > a,
#topnavi .sf-menu > li.current-menu-item > a,
#topnavi .sf-menu > li.current-menu-parent > a {
  background: transparent;
  color: var(--text-100);
}

/* 4) Submenu's ongemoeid laten (Superfish dropdowns blijven block) */
#topnavi .sf-menu > li > ul { display: block; }

/* 5) Flex-gap fallback voor browsers zonder gap-ondersteuning */
@supports not (gap: 1rem) {
  #topnavi .sf-menu { margin: 0 -7px; }
  #topnavi .sf-menu > li { margin: 0 7px; }



/* Cross-browser centreren met inline-block top-level items */
@media (min-width: 1200px) {
  #topnavi .sf-menu {
    display: block;       /* geen flex nodig; simpele centrering */
    text-align: center;   /* centreert inline-block items */
    margin: 0;
    padding: 0;
  }
  #topnavi .sf-menu > li {
    display: inline-block;
    float: none;          /* zet eventuele floats uit */
    vertical-align: middle;
    margin: 0 7px;        /* horizontale spacing */
  }
  #topnavi .sf-menu > li > a {
    display: inline-block;
    padding: 12px 14px;
    white-space: nowrap;
  }
  /* dropdowns ongemoeid laten (Superfish) */
  #topnavi .sf-menu > li > ul { display: block; }
}