/*
 * Quark 2 — user customizations
 *
 * This file is safe to edit. It is loaded last so anything here overrides
 * theme.css without having to mark rules !important.
 */

/* Hero background slider (modular/hero.html.twig) */
.hero-slider { position: relative; overflow: hidden; }
.hero-slider .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.5s ease-in-out; }
.hero-slider .hero-slide.active { opacity: 1; }
/* The theme's own dark scrim only kicks in for a hero with an inline
   background-image style; our slider paints its images via child divs
   instead, so it never matches — same tint, reproduced here. */
.hero-slider .image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .55) 100%);
}

/* Active nav item — brand green instead of the theme's default near-black */
.dropmenu a.active {
  background: var(--q2-accent);
  color: #ffffff;
}
.dropmenu a.active:hover {
  background: color-mix(in oklab, var(--q2-accent) 85%, black 15%);
  color: #ffffff;
}

/* Contact info card (Contact page) */
.contact-card {
  background: var(--q2-bg-elev);
  border-radius: var(--q2-radius-md);
  padding: 1.5rem 1.75rem;
  margin: 1.5rem 0 2rem;
  max-width: 24rem;
}
.contact-card h3 {
  margin-top: 0;
  margin-bottom: 1rem;
}
.contact-card .contact-line {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin: 0 0 .875rem;
}
.contact-card .contact-line:last-child {
  margin-bottom: 0;
}
.contact-card .contact-line i {
  color: var(--q2-accent);
  width: 1.1rem;
  margin-top: .2rem;
  flex-shrink: 0;
  text-align: center;
}
.contact-map {
  max-width: 42rem;
  border-radius: var(--q2-radius-md);
  overflow: hidden;
  box-shadow: var(--q2-shadow-card, 0 1px 3px rgba(0, 0, 0, .1));
  margin-bottom: 2rem;
}
.contact-map iframe {
  display: block;
}

/* Testimonials with photo (modular/testimonials.html.twig) */
.testimonial-grid { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.testimonial-card { background: var(--q2-card-bg, #fff); border-radius: var(--q2-radius-md, 12px); box-shadow: var(--q2-shadow-card, 0 1px 3px rgba(0,0,0,.1)); padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; }
.testimonial-card blockquote { margin: 0; font-style: italic; flex-grow: 1; }
.testimonial-person { display: flex; align-items: center; gap: .75rem; }
.testimonial-person img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.testimonial-person .name { font-weight: 600; }
.testimonial-person .role { font-size: .875rem; opacity: .7; }

/* ---------- Sydney Business inspired polish ---------- */

/* Eyebrow label above section headings, e.g. "ONZE DIENSTEN" */
.eyebrow {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--q2-accent);
  margin-bottom: .5rem;
}

/* Italic accent word inside a heading, e.g. "Wat we <em class=accent-word>doen</em>" */
.accent-word {
  font-style: italic;
  font-weight: 600;
  color: var(--q2-accent);
}

/* Hero button row */
.hero-buttons {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.5rem;
}

/* Hero heading sizing to feel closer to a template hero */
.modular-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.15;
}

/* Exactly 3 service cards (diensten) — spread evenly instead of leaving an
   empty 4th grid slot like the default "small" layout does at desktop width */
@media (min-width: 640px) {
  .modular-features[data-layout="three-col"] .columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Colored icon badge behind feature icons, instead of a flat gray glyph */
.modular-features .feature-icon i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: color-mix(in oklab, var(--q2-accent) 14%, transparent);
  color: var(--q2-accent);
  font-size: 1.375rem;
}

/* Full-bleed stats band (modular/stats.html.twig) — parallax photo background,
   like the hero, with a dark scrim behind the heading and green stat cards. */
.modular-stats {
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding-block: 4rem;
  overflow: hidden;
}
.modular-stats .stats-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 10, .6);
}
.modular-stats .container {
  position: relative;
  z-index: 1;
}
.modular-stats .eyebrow,
.modular-stats h1,
.modular-stats h2,
.modular-stats h3 {
  color: #ffffff;
}
.stats-band {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  text-align: center;
}
.stats-band .stat {
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: var(--q2-radius-lg, 16px);
  padding: 1.75rem 1rem;
  box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .35);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stats-band .stat i {
  color: var(--q2-accent);
  font-size: 2.25rem;
  margin-bottom: .75rem;
}
.stats-band .stat .value {
  font-family: var(--pico-font-family-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--q2-accent);
}
.stats-band .stat .label {
  display: inline-block;
  background: var(--q2-accent);
  color: #ffffff;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .375rem .875rem;
  border-radius: 999px;
  margin-top: .875rem;
}

/* background-attachment: fixed is unreliable on iOS Safari — fall back to a
   normal scrolling background there rather than a broken/static one. */
@supports (-webkit-touch-callout: none) {
  .modular-stats {
    background-attachment: scroll;
  }
}

/* Light mode only — no theme toggle */
.theme-toggle {
  display: none !important;
}

/* ---------- Project photo gallery/slider (partials/project-gallery.html.twig) ---------- */
.project-gallery {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--q2-radius-md);
  overflow: hidden;
  margin-bottom: 2rem;
  touch-action: pan-y;
  background: var(--q2-bg-elev);
}
.project-gallery__track {
  position: relative;
  width: 100%;
  height: 100%;
}
.project-gallery__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease-in-out;
}
.project-gallery__slide.active {
  opacity: 1;
}
.project-gallery__slide img,
.project-gallery--single img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, .4);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background .2s ease;
}
.project-gallery__nav:hover {
  background: rgba(0, 0, 0, .65);
}
.project-gallery__nav.prev { left: .75rem; }
.project-gallery__nav.next { right: .75rem; }
.project-gallery__dots {
  position: absolute;
  bottom: .875rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .4rem;
  z-index: 2;
}
.project-gallery__dot {
  width: .5rem;
  height: .5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  cursor: pointer;
}
.project-gallery__dot.active {
  background: #ffffff;
}
.project-gallery--single {
  aspect-ratio: 16 / 9;
}

/* ---------- Footer ---------- */
#footer.site-footer {
  background: var(--q2-bg-elev);
  border-top: 1px solid var(--q2-border, rgba(0,0,0,.08));
  padding-block: 3rem 1.5rem;
}
.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 2rem;
}
.footer-grid h4 {
  font-size: .9375rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.footer-grid a {
  color: var(--q2-text-muted);
  text-decoration: none;
}
.footer-grid a:hover {
  color: var(--q2-accent);
}
.footer-brand img {
  height: 40px;
  width: auto;
  margin-bottom: .75rem;
}
.footer-brand p {
  color: var(--q2-text-muted);
  font-size: .9375rem;
  max-width: 32ch;
}
.footer-bottom {
  border-top: 1px solid var(--q2-border, rgba(0,0,0,.08));
  padding-top: 1.25rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .8125rem;
  color: var(--q2-text-muted);
}
.footer-bottom a {
  color: inherit;
}