/* Bootstrap iconen laden */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css");

/*Font opmaak */
html {
    font-size: 100%; /* Dit zet 1rem gelijk aan de browserstandaard, meestal 16px */
}

body {
    font-size: 1rem;
    line-height: 1.5; /* Voor de broodnodige witruimte tussen regels */
}

/* Koppen verschalen op basis van de 1rem basiswaarde */
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
/* Groeperen van beide secties */
.page-header h2 a,
.blog-items h2 a {
    text-decoration: none;
}

/* Optioneel: voeg een hover-effect toe voor de gebruiksvriendelijkheid */
.page-header h2 a:hover,
.blog-items h2 a:hover {
    text-decoration: underline; /* De lijn verschijnt pas als je eroverheen beweegt */
    opacity: 0.8;
}


/* Het menu (vaak een struikelblok in Joomla templates) */
.nav-menu a, .menu-item a {
    font-size: 1rem; 
}
/* ========= ========= ========= ========= ========= ========= ========= ========= ========= ========= ========= */
@media (max-width: 61.99rem) { /* 991.98px naar rem */
    /* 1. De knop fixeren op 45x45px omgerekend naar rem */
    .navbar-toggler {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 2.8125rem !important;  /* 45px / 16 */
        height: 2.8125rem !important; /* 45px / 16 */
        background-color: #f47d24 !important;
        border: none !important;
        border-radius: 0.25rem;
        padding: 0 !important;
        cursor: pointer;
    }

    /* 2. Het icoon schalen met em (relatief aan de knop) */
    .navbar-toggler-icon {
        background-image: none !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .navbar-toggler-icon::before {
        content: "\f0c9";
        font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "font-awesome";
        font-weight: 900;
        color: #ffffff !important;
        /* 1.375em zorgt dat het icoon schaalt als de parent font-size verandert */
        font-size: 1.375em; 
        line-height: 1;
    }
}
/* ========= ========= ========= ========= ========= ========= ========= ========= ========= ========= ========= */
/* font resize option */
/* Fixeer de font resizer rechtsboven */
.font-resizer-container,#font-resizer {
background:#fff;
border:0 solid #ddd;
border-radius:0;
box-shadow:0 2px 10px #0000001a;
display:flex;
padding:5px;
position:fixed;
right:15px;
top:15px;
z-index:9999
}
/* De knoppen binnen de gefixeerde container stylen */
:root {
font-size:var(--cassiopeia-font-size-root,1rem)
}

.font-resizer {
background:#fffffff2;
border:1px solid #ddd;
border-radius:0;
box-shadow:0 4px 15px #0003;
display:flex;
margin-bottom:15px;
padding:0;
position:fixed;
right:10px;
top:10px;
z-index:9999
}

.font-resizer .btn {
align-items:center;
border:none!important;
border-radius:0;
color:#fff!important;
display:flex;
font-weight:700;
height:33px;
justify-content:center;
padding:2px 8px;
transition:transform .1s ease;
width:33px
}

.font-resizer .btn[onclick*="1"] {
background-color:#f47d24!important
}

.font-resizer .btn[onclick*="-1"] {
background-color:#fab75c!important
}

.font-resizer .btn[onclick*="reset"] {
background-color:#6c757d!important
}

.font-resizer .btn:hover {
filter:brightness(1.1);
transform:scale(1.05)
}
/* ========= ========= ========= ========= ========= ========= ========= ========= ========= ========= ========= */
/* Alleen toepassen op schermen kleiner dan 992px (tablets/telefoons) */
@media (max-width: 991px) {
    .elementor-location-header {
        transition: transform 0.3s ease-in-out !important;
        position: fixed !important;
        width: 100%;
        top: 0;
        z-index: 9999;
    }

    /* Deze class wordt door JavaScript toegevoegd bij het naar beneden scrollen */
    .header-hidden {
        transform: translateY(-100%);
    }
}
/* ========= ========= ========= ========= ========= ========= ========= ========= ========= ========= ========= */
/*Lees meer knoppen*/
/* Richt zich specifiek op de link binnen de .readmore paragraaf */
p.readmore > a {
  display: inline-flex;
  align-items: center;
  gap: 12px; /* De ruimte tussen de tekst en de chevron */
  
  padding: 10px 20px;
  background-color: #eeeeee; /* De gevraagde kleur in hex */
  color: #333333; /* De tekst blijft donker */
  
  border: none; /* Het lelijke randje is nu weg */
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Hover effect: Zoom en Drop Shadow */
p.readmore > a:hover {
  transform: scale(1.05); /* Subtiele zoom */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Zachte drop shadow */
  background-color: #e5e5e5; /* Iets donkerder grijs op hover voor diepte */
  text-decoration: none;
}

/* Actieve staat voor een klik-gevoel */
p.readmore > a:active {
  transform: scale(1.02);
}