/* Code aangepast op 19/10/2025 door Flipske om de navbar scrollable te maken.
Daarnaast ook formatting van CSS schappelijk gemaakt door dingen samen te voegen.
Functionaliteit zou hetzelfde moeten zijn gebleven, zo niet heb ik een back-up gemaakt.
Daarnaast text underline toegevoegd op hover i.p.v. dat het verdwijnt.
*/

/* ========================================
   CSS Variables
   ======================================== */
:root {
  --header-footer-bg-color: #1F427F;
  --header-footer-text-color: white;
  --header-title-bg-color: #FFF200;
}

/* ========================================
   Global Styles
   ======================================== */
.col-md-3.col-md-push-9.margin-bottom-20 img {
  height: auto !important;
}

.breadcrumb > .active {
  color: #1F2937;
  font-size: 28px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

section#content .content-header h2 {
  display: none;
}

header-menu navbar-collapse collapse navbar-responsive-collapse {
  margin-top: revert-layer;
}

.sf-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
}

div.top, 
div.top .login p a, 
header, 
header .sf-menu a, 
footer {
  color: var(--header-footer-text-color);
  background-color: var(--header-footer-bg-color) !important;
}

/* Keep navbar link text visible on hover */
header .sf-menu a:hover,
header .sf-menu a:focus {
  color: rgba(255, 255, 255, 0.9) !important; /* slightly dimmer white for feedback */
  text-decoration: underline; /* visual hover cue */
}

.img-16by9-cover img {
  object-fit: contain;
}

div.col-xs-6.col-sm-4.col-md-3.col-md-offset-1.col-md-push-8 img {
  object-fit: contain;
  object-position: top;
}

div.col-xs-12.col-sm-12.col-md-8.col-md-pull-4 img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

section#content {
  background-image: url(https://home.simonstev.in/_media/2951016/dbafc6c8d48842e8848c1975f8ec924e/view);
  background-repeat: no-repeat;
  background-position: 108% 420px;
}

/* ========================================
   Header Styles
   ======================================== */
header .container .header-nav .header-logo a h1 {
  background-image: url("https://simonstev.congressus.site/_media/2940987/5c7baddb9f0441e6965187c4350c8f3d/view");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  width: 500%;
  height: 500%;
  max-width: 500%;
  max-height: 200%;
  margin: 0 50px 16px;
}

header.hide-navbar {
  transform: translateY(-150%) !important;
}

header .navbar-collapse {
  margin-top: revert-layer;
}

section#content .content-header.content-header-background .breadcrumb {
  display: none;
}

section#content .content-header.content-header-background h2 {
  position: absolute;
  bottom: 0em;
}

section .da-slider {
  height: 40vh;
  background-position: 50% 50%;
}

section#content .content-header.content-header-background {
  height: 25vh;
  background-position: 50% 40%;
}

@media screen and (-webkit-min-device-pixel-ratio: 2), 
       screen and (max--moz-device-pixel-ratio: 2) {
  header .navbar-brand h1 {
    background-image: url("https://simonstev.congressus.site/_media/2940987/5c7baddb9f0441e6965187c4350c8f3d/view") !important;
  }
}

/* ========================================
   Board Banner
   ======================================== */
body.template-content-wide.webpage-65643 section#content div.content-header.content-header-background {
  height: 50vh;
  background-color: white;
}

body.template-content-wide.webpage-65643 section#content div.content-header.content-header-background:after {
  background: rgba(0, 0, 0, 0);
}

/* ========================================
   Homepage 3 Column Service Section
   ======================================== */
.service_section .box {
  margin-top: 30px;
  text-align: center;
  background-color: white;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.15);
  padding: 25px 15px;
  transition: all .3s;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service_section .boxpd {
  width: 90%;
  margin-top: 30px;
  text-align: left;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.15);
  padding: 25px 4em;
  transition: all .3s;
  display: flex;
  align-items: center;
}

.service_section .box .img-box {
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.service_section .box .img-box img {
  max-height: 100%;
  max-width: 100%;
  transition: all .3s;
}

.service_section .box .detail-box {
  margin-top: 10px;
  margin-left: 15px;
  margin-right: 15px;
}

.service_section .box .detail-box h5 {
  font-weight: bold;
  font-size: 25px;
}

.service_section .box .detail-box p, 
.service_section .box .link-box p {
  margin: 0;
}

.service_section .box:hover {
  background-color: #1F427F;
  color: #ffffff;
}

.service_section .boxpd:hover {
  background-color: #1F427F;
  color: #ffffff;
}

.service_section .boxpd:hover a {
  border-bottom: 1px solid #ffffff !important;
  color: #ffffff;
}

.service_section .box:hover .img-box img {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

.service_section .btn-box {
  display: flex;
  justify-content: center;
  margin-top: 45px;
}

.service_section .btn-box a {
  display: inline-block;
  text-transform: uppercase;
  padding: 10px 45px;
  background-color: #0355cc;
  border: 1px solid #0355cc;
  border-radius: 0;
  color: #ffffff;
}

.service_section .btn-box a:hover {
  background-color: transparent;
  color: #0355cc;
}

/* ========================================
   Footer Styles
   ======================================== */
.social-icons li a {
  background-color: rgba(255, 255, 255, .2);
}

dl.headlines.headlines-footer dd .text-muted {
  color: rgba(255, 255, 255, .5);
}

header .container .header-nav-top .login p a,
header .container .header-nav-top a,
footer a,
dl.headlines.headlines-footer dd a {
  color: #ddd;
  color: rgba(255, 255, 255, .7);
}

header .container .header-nav-top .login p a:hover,
header .container .header-nav-top .login p a:focus,
header .container .header-nav-top a:hover,
header .container .header-nav-top a:focus {
  color: rgba(255, 255, 255, .9);
}

footer .headline h2, 
footer .headline h3, 
footer .headline h4, 
footer .headline h5, 
footer .headline h6 {
  border-color: rgba(255, 242, 0);
}

footer a:focus,
footer a:hover,
dl.headlines.headlines-footer dd a:focus,
dl.headlines.headlines-footer dd a:hover {
  color: #fff;
}

.form-control uneditable-input {
  content: "test";
}

/* ========================================
   Media Queries - Max Width 524px
   ======================================== */
@media (max-width: 524px) {
  .service_section .boxpd {
    text-align: center;
    background-image: unset !important;
  }
  
  .service_section .link-box {
    width: 100% !important;
  }
  
  .service_section .link-box img {
    width: 14em !important;
  }
}

/* ========================================
   Media Queries - Max Width 767px
   ======================================== */
@media (max-width: 767px) {
  header .container .header-nav .header-logo a h1 {
    margin: -10px 0 0;
  }
  
  header .container .header-nav .header-logo {
    margin-bottom: 30px;
  }
  
  body.template-content-wide.webpage-65643 section#content div.content-header.content-header-background {
    height: 20vh;
    background-color: white;
  }
}

/* ========================================
   Media Queries - Max Width 768px
   ======================================== */
@media (max-width: 768px) {
  .service_section .boxpd {
    width: 100%;
    padding: 25px 2em;
  }
}

/* ========================================
   Media Queries - Max Width 990px
   ======================================== */
@media (max-width: 990px) {
  header .container .header-nav .header-logo a h1 {
    margin: 0 0 0;
  }
  .header-nav{
    max-height: 100dvh;
  }
}

/* ========================================
   Media Queries - Max Width 991px
   ======================================== */
@media (max-width: 991px) {
  .top-mobile a {
    color: white;
  }
  
  header ul.sf-menu li.active a {
    color: rgba(255, 255, 255, .7);
  }
  
  header .container {
    overflow-y: inherit;
  }
  
    /* When navbar is expanded */
  .header-nav:has(.header-menu.in) {
    overflow-y: auto;
  }

  /* When navbar is collapsed */
  .header-nav:has(.header-menu.collapse) {
    overflow-y: visible;
  }

  /* Ensure collapsed/expanded menu panel has header background for contrast */
  .header-menu.navbar-collapse.navbar-responsive-collapse {
    background-color: var(--header-footer-bg-color);
  }

  /* Optional: adjust the menu itself if needed */
  .header-menu.navbar-collapse.navbar-responsive-collapse.in {
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

/* ========================================
   Media Queries - Min Width 750px to 1300px
   ======================================== */
@media (min-width: 750px) and (max-width: 1300px) {
  footer {
    background-image: url("https://simonstev.congressus.site/_media/2865087/2acdbbf388704304a5e5a8ab9347b9d0/view");
    background-size: auto 60%;
    background-repeat: no-repeat;
    background-position: right bottom 1.5em;
  }
}

/* ========================================
   Media Queries - Min Width 991px
   ======================================== */
@media (min-width: 991px) {
  .row {
    display: flex;
    flex-wrap: wrap;
  }
  
  header .container .header-nav .navbar-header {
    width: 35em;
  }
  
  header .container .header-nav .header-menu .sf-menu > li > a {
    padding: .2em 1em;
  }
  
  header .container .header-nav {
    flex-wrap: nowrap;
    overflow-y: inherit;
  }
}

/* ========================================
   Media Queries - Min Width 1300px
   ======================================== */
@media (min-width: 1300px) {
  footer {
    background-image: url("https://simonstev.congressus.site/_media/2865087/2acdbbf388704304a5e5a8ab9347b9d0/view");
    background-size: auto 90%;
    background-repeat: no-repeat;
    background-position: right bottom 1.5em;
  }
}

/* ========================================
   Media Queries - Min Width 1536px
   ======================================== */
@media (min-width: 1536px) {
  div.container {
    width: 1436px;
  }
}