/*
Theme Name: Stage for Life
Theme URI: https://www.stageforlife.nl
Author: Johannes
Author URI: https://example.com
Description: Een WordPress-thema met Bootstrap 5 en Font Awesome.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stageforlife
*/
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&display=swap');
@font-face {
  font-family: 'BernhardMod BT';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/Bernhard Modern BT.woff') format('woff');
}
@font-face {
  font-family: 'BernhardMod BT';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/Bernhard Modern Italic BT.woff') format('woff');
}
@font-face {
  font-family: 'BernhardMod BT';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/Bernhard Modern Bold BT.woff') format('woff');
}
@font-face {
  font-family: 'BernhardMod BT';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/Bernhard Modern Bold Italic BT.woff') format('woff');
}
:root {
  --sflwit: rgba(255, 255, 255, 1);
  --sflzwart: rgba(20, 18, 25, 1); /* Een zacht zwart met een hint paars/blauw */
  --transparant: rgba(255, 255, 255, 0.8);
  --sfldonkergijs: rgba(54, 54, 64, 1);
  --sflpaars: rgba(71, 6, 128, 1);
  --sflblauw: rgba(60, 167, 194, 1);
  --sflgroen: rgba(196, 209, 11, 1);
  --sflgroen2: rgba(158, 185, 41, 1);
  --sfloranje: rgba(242, 142, 43, 1);
  --sflgrijs: rgba(220, 220, 220, 1);
  --font-size-base: 1rem;
  --bs-nav-link-font-size: 1.4rem;
  --default-spacing: 2rem;
  --main-font: "Fira Sans", sans-serif;
  --heading-font: "Fira Sans", serif; /* --heading-font: "BernhardMod BT", serif;*/
}
/* Global Styles */
body, html {
  position: relative;
  font-family: var(--main-font);
  
  font-weight: 400;
	 min-height: 100%;
}
html {

  background: linear-gradient(to bottom, rgba(196, 209, 11, 1) 0%, rgba(196, 209, 11, 1) 65%, rgba(158, 185, 41, 1) 82%, rgba(60, 167, 194, 1) 100%);
  background-attachment: fixed; /* Keeps gradient fixed while scrolling */
  background-repeat: no-repeat;
}
body {

 
  background-color: transparent;
}
main {
  
}
footer.pagefooter {
  
}
.comment {
  display: none; /* none of block*/
}
/* Typography */
h1, h2, h3, h4, h5 {
  font-family: var(--heading-font);
  font-optical-sizing: auto;
  color: var(--sfldonkergijs);
  font-weight: 500;

}
h1, h2 {
	color: var(--sflblauw);
	font-weight: 700;
}
.front-page h2 {
	font-size: 3.5rem;
}


.pageContent h3, .pageContent h4, .pageContent h5 {
	 color: var(--sflwit);
	text-shadow: 
    0 0 10px var(--sflgroen2),
    0 0 20px var(--sflgroen2),
    0 0 40px var(--sflgroen2);
}
p, a {
  font-family: var(--main-font);
}
.navbar-brand {}
.bloglogo {
  width: 50px;
  height: auto;
}
.blogname {
  font-family: var(--heading-font);
  color: var(--sflpaars);
  font-weight: 700;
  font-size: 1.8rem;
  padding-left: 1rem;
}

/* Basis link-stijlen */
a {
  color: var(--sflblauw);         /* standaard linkkleur */
  text-decoration: none;  /* geen onderstreping */
  transition: all 0.8s ease; /* animate all properties smoothly */
	font-weight: 600;
}

/* Wanneer je over de link hovert */
a:hover {
  color: var(--sflpaars);          
  text-decoration: underline; /* onderstreping bij hover */
}

/* Wanneer de link is aangeklikt / actief */
a:active {
  color: var(--sflpaars);          
	transform: scale(0.95);   /* small "press down" effect */
}
/* Alleen links binnen .front-page animeren */

.front-page a {
  color: var(--sflblauw);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.5rem;
  display: inline-block;
  animation: linkPulse 8s linear infinite; /* totale cyclus */
}

/* Hover/active mogen animatie stoppen */
.front-page a:hover {
  color: var(--sflpaars);
  text-decoration: underline;
  animation: none;
}
.front-page a:active {
  color: var(--sflpaars);
  animation: none;
}

/* Keyframes: standaard blauw */
@keyframes linkPulse {
  0%, 100% { transform: scale(1); }
  25%, 75% { transform: scale(1.2); }  
  100% { transform: scale(1); }
}

/* Vertraging per link: kwart-cyclus */
.front-page p:nth-of-type(1) a { animation-delay: 0s; }
.front-page p:nth-of-type(2) a { animation-delay: 2s; }
.front-page p:nth-of-type(3) a { animation-delay: 4s; }
.front-page p:nth-of-type(4) a { animation-delay: 6s; }


/* === SPLIT NAVBAR WITH LOGO TOGGLE === */

/* Mobile NAV label */
.nav-label {
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 1px;
    margin-top: 0px;
}

.mobile-toggle a {
    color: var(--sflwit);
    text-decoration: none !important;
}

/* Logo spin animation */
.spin-3x {
    animation: spin3x 1s ease-in-out forwards;
}

@keyframes spin3x {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(1080deg); } /* 3 full spins */
}

/* Bootstrap collapse speed tweak */
#navbarSplitNav.collapsing {
    transition: height 1s ease-in-out; /* match spin duration */
}
#navbarSplitNav.collapse.show {
    transition: height 1s ease-in-out;
}

/* Center nav items on small screens */
@media (max-width: 991.98px) {
    .navbar-nav {
        align-items: center;
    }
}

/* Normale linkkleur */
.navbar .nav-link {
    color: var(--sflwit);
    font-weight: 700;
}

/* Hover effect */
.navbar .nav-link:hover {
    color: var(--sflpaars);
}

/* Actieve pagina (WordPress voegt .current-menu-item of .current_page_item toe) */
.navbar .nav-link.active,
.navbar .current-menu-item > .nav-link,
.navbar .current_page_item > .nav-link {
    color: var(--sflblauw);
    font-weight: bold;
}

/* Verdeel menu-items gelijkmatig */
.navbar-nav.distribute {
    display: flex;
    justify-content: space-evenly; /* ruimte tussen items gelijkmatig */
    width: 100%;
}

.navbar-nav.distribute .nav-item {
    text-align: center;
}
/* === /NAVBAR === */


.contentBlok {
    background-color: var(--transparant);
	border: 2px solid var(--sflblauw);
}
.blueBorder {
	border: 2px solid var(--sflblauw);
}
.featuredimage-container {
  position: relative;
  height: 0px;
  overflow-y: visible;
  z-index: 0;
}
.pageContent {}
.mainContent {
  position: relative;
  z-index: 2;
}
.bg-image {
  background-image: url(images/bg_image.png);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: contain;
}
/* ----------------LOGOBALK---------------------- */
/* container */
.logo-balk .gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem; /* ruimte tussen logo's */
  margin: 0 auto;
}

/* elk item */
.logo-balk .gallery-item {
  flex: 0 1 120px; /* max breedte van een logo blokje */
  display: flex;
  align-items: center;
  justify-content: center;
	
}

/* logo images */
.logo-balk .gallery-item img {
   height: auto !important;
  width: auto !important;
  max-height: 60px;   /* of wat jij wilt */
  max-width: 120px;   /* optioneel, zodat ze niet te breed worden */
  object-fit: contain;
  filter: grayscale(100%);      /* optioneel: zwart/wit */
  transition: filter .3s ease;
}

.logo-balk .gallery-item img:hover {
  filter: grayscale(0%);        /* kleur bij hover */
}

/* ----------------POST OVERZICHT---------------------- */
.post-card {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.post-card:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  transform: translateY(-4px);
}
.card-img-top {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.card-text{
	font-weight:400;
}
/* ----------------EXTRA---------------------- */
.ds-bottom {
  box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}
/* ----------------WIDGETS---------------------- */
.widgetContent {}
.footerContent {}
.social-icon {
  display: inline-block;
  margin-right: 10px;
  text-decoration: none;
}
.social-icon i {
  margin-right: 5px;
}
.footertext {
	font-size:1rem;
	color: var(--transparant);
}
/* ----------------BACKGROUNDS---------------------- */
.bg-paars {
  background-color: var(--sflpaars);
}
.bg-blauw {
  background-color: var(--sflblauw);
}
.bg-groen {
  background-color: var(--sflgroen);
}
.bg-groen2 {
  background-color: var(--sflgroen2);
}
.bg-oranje {
  background-color: var(--sfloranje);
}
.bg-grijs {
  background-color: var(--sflgrijs);
}
.bg-donkergrijs {
  background-color: var(--sfldonkergrijs);
}
.bg-zwart {
  background-color: var(--sflzwart);
}
.bg-wit {
  background-color: var(--sflwit);
}
/* ----------------TEXT COLOR---------------------- */
.text-paars {
  color: var(--sflpaars);
}
.text-blauw {
  color: var(--sflblauw);
}
.text-groen {
  color: var(--sflgroen);
}
.text-groen2 {
  color: var(--sflgroen2);
}
.text-oranje {
  color: var(--sfloranje);
}
.text-grijs {
  color: var(--sflgrijs);
}
.text-donkergrijs {
  color: var(--sfldonkergrijs);
}
.text-zwart {
  color: var(--sflzwart);
}
.text-wit {
  color: var(--sflwit);
}