/* Scroll offset voor fixed header - zodat menu zichtbaar blijft na anchor scroll */
html {
  scroll-padding-top: 80px;
}

section[id] {
  scroll-margin-top: 80px;
}

/* Custom styling voor hero sectie met feature image */

/* Hero sectie hoogte */
#fh5co-home,
#fh5co-home .text-wrap {
  height: auto !important;
  min-height: 350px;
  padding: 3em 0 5em 0;
}

/* Hero met background image style */
#fh5co-home[style*="background-image"] {
  background-size: cover; /* Default: cover (kan croppen) */
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 600px;
}

/* Background size opties */
#fh5co-home[data-background-size="contain"] {
  background-size: contain !important; /* Hele afbeelding zichtbaar, geen crop */
}

#fh5co-home[data-background-size="auto"] {
  background-size: auto !important; /* Originele grootte */
}

#fh5co-home[data-background-size="100%"] {
  background-size: 100% auto !important; /* Volledige breedte, hoogte past zich aan */
}

/* Gradient configuratie opties */

/* Subtle gradient: lichte overlay voor betere tekstleesbaarheid */
.gradient[data-gradient-style="subtle"] {
  opacity: 0.3 !important;
}

/* Light gradient: medium overlay */
.gradient[data-gradient-style="light"] {
  opacity: 0.5 !important;
}

/* Full gradient: standaard theme gradient (geen override nodig) */
.gradient[data-gradient-style="full"] {
  /* Gebruikt de standaard theme styling */
}

/* Dark gradient: extra donkere overlay voor maximale contrast */
.gradient[data-gradient-style="dark"] {
  opacity: 1 !important;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.3) 100%) !important;
}

/* Container voor de feature image met tekst overlay */
.hero-image-container {
  position: relative;
  display: block;
  width: 98% !important;
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* De feature image zelf - als een "foto" element */
.hero-feature-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px; /* Optioneel: afgeronde hoeken */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* Schaduw voor diepte effect */
}

/* Tekst overlay over de afbeelding */
.hero-text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  text-align: center;
  z-index: 10;
}

/* Tekst styling voor over de afbeelding */
.hero-text-overlay h1,
.hero-text-overlay h2 {
  color: white;
  margin: 0.5em 0;
}

.hero-text-overlay h1 {
  font-size: 42px;
  font-weight: normal;
  text-shadow: none;
}

.hero-text-overlay h2 {
  font-size: 36px;
  font-weight: 900;
  color: #ffffff !important;
  text-shadow:
    0 0 30px rgba(0, 0, 0, 1),
    0 0 20px rgba(0, 0, 0, 1),
    2px 2px 6px rgba(0, 0, 0, 1),
    4px 4px 12px rgba(0, 0, 0, 0.9),
    -2px -2px 6px rgba(0, 0, 0, 1);
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0.6em 1.2em;
  border-radius: 6px;
  display: inline-block;
  letter-spacing: 0.5px;
}

/* Intro sectie - slimme verdeling voor mooie layout */
#fh5co-intro > div {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

#fh5co-intro .row-bottom-padded-lg {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

#fh5co-intro .fh5co-block {
  float: none !important;
  /* Flex basis van ~380px zorgt voor natuurlijke verdeling:
     - Bij 1-2 items: blijven naast elkaar
     - Bij 3 items: 2 boven, 1 onder (passen niet alle 3)
     - Bij 4 items: 2 boven, 2 onder
     - Bij 5+ items: max 3 per rij → 3 boven, 2 onder
  */
  flex: 0 1 380px !important;
  min-width: 300px;
  max-width: 450px;
  margin: 0 15px 30px 15px !important;
  padding: 20px !important;
}

/* Intro block content - buttons onderaan uitlijnen */
#fh5co-intro .fh5co-text {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px !important;
  justify-content: space-between;
}

#fh5co-intro .fh5co-text p:not(:has(.btn)) {
  flex-grow: 1;
}

#fh5co-intro .fh5co-text p:has(.btn) {
  margin-top: auto;
}

/* Op bredere schermen (>1400px): items mogen iets breder */
@media screen and (min-width: 1400px) {
  #fh5co-intro .fh5co-block {
    flex: 0 1 420px !important;
    max-width: 500px;
  }
}

/* Op mobiele schermen: volle breedte */
@media screen and (max-width: 767px) {
  /* Hero sectie - compacter op mobiel */
  #fh5co-home,
  #fh5co-home .text-wrap {
    min-height: 200px !important;
    padding: 1em 0 !important;
  }

  /* Intro sectie - ruimte onder gradient */
  #fh5co-intro {
    margin-top: 0 !important;
    padding-top: 3em !important;
    clear: both !important;
  }

  #fh5co-intro .fh5co-block {
    flex: 1 1 100% !important;
    min-width: auto !important;
    max-width: 100% !important;
    min-height: 200px !important;
    max-height: 300px !important;
    margin: 0 0 15px 0 !important;
  }

  #fh5co-intro .fh5co-text {
    padding: 25px !important;
  }

  #fh5co-intro .fh5co-intro-icon {
    font-size: 36px !important;
  }

  #fh5co-intro .fh5co-block h2 {
    font-size: 20px !important;
    margin-bottom: 10px !important;
  }

  #fh5co-intro .fh5co-block p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  #fh5co-intro .fh5co-block .btn {
    font-size: 14px !important;
    padding: 8px 16px !important;
  }
}

/* Services sectie - gelijke hoogtes voor uitlijning */
#fh5co-services .row {
  display: flex;
  flex-wrap: wrap;
}

#fh5co-services .fh5co-service {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

#fh5co-services .fh5co-service p {
  flex-grow: 1;
}

/* About sectie - slimme verdeling zoals intro */
#fh5co-about > div > .row:last-child {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

#fh5co-about .col-md-4 {
  float: none !important;
  flex: 0 1 400px !important;
  min-width: 320px;
  max-width: 480px;
  margin: 0 15px 30px 15px !important;
}

#fh5co-about .fh5co-person {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#fh5co-about .fh5co-person p {
  text-align: center;
  hyphens: auto;
  word-wrap: break-word;
  flex-grow: 1;
}

#fh5co-about .fh5co-person .social {
  margin-top: auto;
  padding-top: 20px;
}

/* Op bredere schermen (>1400px): about items mogen iets breder */
@media screen and (min-width: 1400px) {
  #fh5co-about .col-md-4 {
    flex: 0 1 420px !important;
    max-width: 500px;
  }
}

/* Work sectie - centreer items en gelijke hoogtes */
.work-items-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.work-items-container > div[class*="col-"] {
  float: none !important;
  display: flex !important;
  flex-direction: column;
}

.work-items-container .fh5co-project-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.work-items-container .fh5co-project-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.work-items-container .fh5co-text {
  flex-grow: 1;
}

/* Responsive aanpassingen */
@media screen and (max-width: 768px) {
  #fh5co-home,
  #fh5co-home .text-wrap {
    min-height: 250px;
    padding: 1.5em 0;
  }

  .hero-feature-image {
    max-width: 100%;
    max-height: 200px !important;
  }

  /* Homepage hero quote - kleiner op mobiel */
  .hero-text-overlay h1,
  #fh5co-home h1 {
    font-size: 22px !important;
  }

  .hero-text-overlay h2,
  #fh5co-home h2 {
    font-size: 18px !important;
    padding: 0.4em 0.8em !important;
  }

}

/* Single page content styling */
.page-content {
  font-size: 18px;
  line-height: 1.8;
  color: #333;
}

.page-content h1 {
  font-size: 36px;
  font-weight: 700;
  margin-top: 1.5em;
  margin-bottom: 0.8em;
  color: #222;
}

.page-content h2 {
  font-size: 28px;
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.8em;
  color: #333;
}

.page-content h3 {
  font-size: 22px;
  font-weight: 600;
  margin-top: 1.3em;
  margin-bottom: 0.6em;
  color: #444;
}

.page-content p {
  margin-bottom: 1.2em;
}

.page-content ul,
.page-content ol {
  margin-bottom: 1.2em;
  padding-left: 2em;
}

.page-content li {
  margin-bottom: 0.5em;
}

.page-content a {
  color: inherit;
  text-decoration: underline;
}

.page-content a:hover {
  opacity: 0.8;
}

/* Page hero - compacte versie voor single pages zonder afbeelding */
#fh5co-home.page-hero {
  min-height: 180px !important;
  max-height: 250px !important;
  height: auto !important;
}

#fh5co-home.page-hero .text-wrap {
  min-height: 180px !important;
  max-height: 250px !important;
  height: auto !important;
  padding: 1.5em 0 2em 0 !important;
}

#fh5co-home.page-hero h1 {
  font-size: 42px;
  margin-bottom: 0.3em;
}

/* Page hero met afbeelding - hoger dan de afbeelding voor langere gradient */
#fh5co-home.page-hero:has(.hero-image-container) {
  min-height: 500px !important;
  height: auto !important;
}

#fh5co-home.page-hero:has(.hero-image-container) .text-wrap {
  min-height: 500px !important;
  height: auto !important;
  padding: 2.5em 0 4em 0 !important;
}

/* Kleinere afbeelding voor single pages */
#fh5co-home.page-hero .hero-image-container {
  max-width: 700px !important;
  max-height: 280px !important;
  overflow: hidden !important;
}

#fh5co-home.page-hero .hero-feature-image {
  max-width: 700px !important;
  max-height: 280px !important;
  height: 280px !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* Page hero gradient */
#fh5co-page-hero .gradient {
  opacity: 0.6 !important;
}

@media screen and (max-width: 768px) {
  #fh5co-page-hero {
    padding: 5em 0 4em 0 !important;
  }

  #fh5co-page-hero h1 {
    font-size: 32px !important;
  }

  .page-content {
    font-size: 16px;
  }

  .page-content h1 {
    font-size: 28px;
  }

  .page-content h2 {
    font-size: 24px;
  }
}

/* Navbar logo styling */
.navbar-brand {
  display: flex !important;
  align-items: center !important;
  padding: 10px 0 !important;
  height: auto !important;
}

.navbar-logo {
  height: 50px;
  width: auto;
  margin-right: 12px;
  display: inline-block;
  vertical-align: middle;
}

.navbar-brand-text {
  display: inline-block;
  vertical-align: middle;
  line-height: 1.2;
}

/* Responsive: logo iets kleiner op mobiel */
@media screen and (max-width: 768px) {
  .navbar-logo {
    height: 40px;
    margin-right: 10px;
  }

  .navbar-brand-text {
    font-size: 24px;
  }
}