/* Jonge Honden — eigen aanvullingen op de Webflow-export: hoofdmenu + inhoudspagina's */

/* ---------- Hoofdmenu ---------- */

.jh-nav {
  z-index: 900;
  background-color: #000000e6;
  border-bottom: 1px solid #ffffff26;
  position: sticky;
  top: 0;
}

.jh-nav-inner {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 30px;
  max-width: 1170px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
}

.jh-nav-brand {
  color: var(--fceb0d);
  letter-spacing: 1px;
  text-transform: uppercase;
  align-items: center;
  gap: 10px;
  font-family: 'Road Rage', sans-serif;
  font-size: 26px;
  line-height: 1;
  text-decoration: none;
  display: flex;
}

/* Beeldmerk boven aan een pagina, onder de menubalk */
.jh-paginalogo {
  width: auto;
  height: 150px;
  margin-bottom: 18px;
  display: block;
}

@media screen and (max-width: 767px) {
  .jh-paginalogo {
    height: 110px;
  }
}

@media screen and (max-width: 479px) {
  .jh-paginalogo {
    height: 90px;
  }
}

.jh-nav-links {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.jh-nav-link {
  color: var(--white);
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 2px solid #0000;
  padding-bottom: 2px;
  font-family: Outfit, sans-serif;
  font-size: 17px;
  font-weight: 400;
  text-decoration: none;
  transition: color .2s ease-in-out, border-color .2s ease-in-out;
}

.jh-nav-link:hover,
.jh-nav-link:focus-visible {
  color: var(--fceb0d);
  border-bottom-color: var(--fceb0d);
}

.jh-nav-link.is-actief {
  color: var(--fceb0d);
  border-bottom-color: var(--f53d1a);
}

/* Instagram-icoon: geen onderstreping, alleen van kleur verschieten */
.jh-nav-link.jh-nav-insta {
  border-bottom: 0;
  padding-bottom: 0;
  display: block;
}

.jh-nav-insta svg {
  width: 22px;
  height: 22px;
  display: block;
}

@media screen and (max-width: 479px) {
  .jh-nav-inner {
    justify-content: center;
    padding: 12px 16px;
  }

  .jh-nav-link {
    font-size: 15px;
  }
}

/* ---------- Knoppen in de hero ---------- */

/* De Webflow-export zet deze twee knoppen absoluut op percentages (right 33% en
   20%). De tekstbreedte is vast, dus op laptopbreedte schuiven ze over elkaar.
   Hier komen ze in de normale flow naast elkaar te staan en breken ze netjes af. */
.jh-hero-knoppen {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
}

.jh-hero-knoppen .button-jh,
.jh-hero-knoppen .button-jh._2 {
  border: 1px solid var(--white);
  padding: 9px 20px;
  font-size: 17px;
  transition: color .2s ease-in-out, background-color .2s ease-in-out;
  position: static;
  inset: auto;
  width: auto;
}

.jh-hero-knoppen .button-jh:hover {
  color: #000;
  background-color: var(--white);
}

@media screen and (max-width: 479px) {
  .jh-hero-knoppen {
    justify-content: center;
    gap: 10px;
    padding: 0 16px;
  }

  .jh-hero-knoppen .button-jh,
  .jh-hero-knoppen .button-jh._2 {
    text-align: center;
    padding: 8px 16px;
    font-size: 15px;
  }
}

/* ---------- WAF-afbeelding bij "Waar en wanneer" ---------- */

/* De Webflow-export zet deze afbeelding op right:-50%, oftewel een halve
   containerbreedte (470px) naar rechts. Op een breed monitor blijft er dan nog
   iets zichtbaar, op een laptop verdwijnt ruim de helft buiten beeld. Onder
   992px staat er in de export al right:0%; hier trekken we desktop gelijk.
   De kleine negatieve marge houdt het bedoelde 'aflopen' aan de rand. */
@media screen and (min-width: 992px) {
  .container-jh.xtr-wit .image-9 {
    right: -20px;
    max-width: 45%;
  }

  /* De afbeelding hangt met bottom:0 aan de onderkant van de container. Door de
     ruimte eronder een regelhoogte (30.8px) te vergroten zakt hij één regel mee
     en botst hij niet meer met de tekstregel over Schijndel en Mariendael. */
  .container-jh.xtr-wit {
    padding-bottom: 312px;
  }
}

/* ---------- Knoplink in de tekst ---------- */

.jh-cta {
  color: var(--white);
  letter-spacing: 1px;
  background-color: var(--f53d1a);
  border: 1px solid var(--f53d1a);
  margin-top: 30px;
  padding: 12px 26px;
  font-family: Outfit, sans-serif;
  font-size: 19px;
  font-weight: 400;
  text-decoration: none;
  transition: color .2s ease-in-out, background-color .2s ease-in-out;
  display: inline-block;
}

.jh-cta:hover,
.jh-cta:focus-visible {
  color: var(--f53d1a);
  background-color: var(--white);
  border-color: var(--white);
}

/* In de linkse tekstkolom sluit de knop aan op de alinea erboven */
.jh-text.ll + .jh-cta {
  margin-top: 20px;
}

@media screen and (max-width: 479px) {
  .jh-cta {
    padding: 10px 18px;
    font-size: 16px;
  }
}

/* ---------- Inhoudspagina's ---------- */

.jh-artikel {
  text-align: left;
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 0 40px;
}

.jh-artikel .h-jh {
  text-align: left;
}

.jh-artikel .jh-text {
  text-align: left;
  padding-top: 20px;
  padding-bottom: 0;
}

/* Zelfde letter als de overige koppen; Road Rage is smaller, dus wat groter. */
.jh-kop {
  color: var(--fceb0d);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0;
  padding-top: 40px;
  font-family: 'Road Rage', sans-serif;
  font-size: 42px;
  font-weight: 400;
  line-height: 1.15;
}

.jh-lijst {
  color: var(--white);
  letter-spacing: 1px;
  margin: 0;
  padding-top: 16px;
  padding-left: 22px;
  font-family: Outfit, sans-serif;
  font-size: 22px;
  font-weight: 300;
  line-height: 1.4;
}

.jh-lijst li {
  margin-bottom: 12px;
  padding-left: 6px;
}

.jh-lijst li::marker {
  color: var(--f53d1a);
}

.jh-link {
  color: var(--fceb0d);
  text-underline-offset: 3px;
  text-decoration: underline;
}

.jh-link:hover {
  color: var(--white);
}

.jh-slot {
  color: var(--white);
  background-color: var(--f53d1a);
  letter-spacing: 1px;
  margin-top: 40px;
  padding: 20px 24px;
  font-family: Outfit, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  display: inline-block;
}

/* ---------- Galerij deelnemers ---------- */

.jh-galerij {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px;
  margin: 0;
  padding-top: 30px;
  display: grid;
}

.jh-kaart {
  margin: 0;
}

.jh-kaart img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background-color: #1a1a1a;
  width: 100%;
  display: block;
}

.jh-kaart figcaption {
  color: var(--white);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding-top: 10px;
  font-family: Outfit, sans-serif;
  font-size: 17px;
  font-weight: 600;
}

/* Valt terug op een nette naamkaart zolang een foto nog ontbreekt */
.jh-kaart.is-leeg img {
  display: none;
}

.jh-kaart.is-leeg::before {
  content: attr(data-naam);
  color: var(--white);
  text-align: center;
  text-transform: uppercase;
  aspect-ratio: 4 / 5;
  background-color: #1a1a1a;
  border: 1px dashed #ffffff40;
  place-content: center;
  padding: 16px;
  font-family: Outfit, sans-serif;
  font-size: 18px;
  font-weight: 600;
  display: grid;
}

.jh-banner {
  aspect-ratio: 871 / 693;
  object-fit: cover;
  background-color: #1a1a1a;
  width: 100%;
  /* height:auto is nodig, anders wint het height-attribuut van de aspect-ratio */
  height: auto;
  max-width: 620px;
  margin-top: 30px;
  display: block;
}

.jh-award {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background-color: #1a1a1a;
  width: 100%;
  max-width: 380px;
  margin-top: 24px;
  display: block;
}

/* ---------- Fotogalerij ---------- */

/* Kolommen i.p.v. een raster, zodat staande en liggende foto's hun eigen
   verhouding houden en niet worden bijgesneden. */
.jh-fotos {
  column-gap: 16px;
  columns: 3 260px;
  padding-top: 30px;
}

/* Rij met de drie locaties boven het raster; zelfde tussenruimte als de kolommen */
.jh-locaties {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-top: 30px;
  display: grid;
}

.jh-locaties .jh-foto {
  margin-bottom: 0;
}

.jh-locaties + .jh-fotos {
  padding-top: 16px;
}

.jh-foto {
  break-inside: avoid;
  margin-bottom: 16px;
  display: block;
}

.jh-foto img {
  background-color: #1a1a1a;
  width: 100%;
  height: auto;
  transition: opacity .2s ease-in-out;
  display: block;
}

.jh-foto:hover img,
.jh-foto:focus-visible img {
  opacity: .85;
}

/* Vergroting (lightbox) */
.jh-lightbox {
  background: none;
  border: 0;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  inset: 0;
  overflow: hidden;
}

.jh-lightbox[open] {
  place-items: center;
  width: 100vw;
  height: 100vh;
  display: grid;
}

.jh-lightbox::backdrop {
  background-color: #000000eb;
}

.jh-lightbox img {
  object-fit: contain;
  max-width: 92vw;
  max-height: 88vh;
}

.jh-lightbox button {
  color: var(--white);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 12px 18px;
  font-family: Outfit, sans-serif;
  font-size: 34px;
  line-height: 1;
  position: absolute;
}

.jh-lightbox button:hover,
.jh-lightbox button:focus-visible {
  color: var(--fceb0d);
}

.jh-lightbox .jh-lb-sluit { top: 8px; right: 8px; }
.jh-lightbox .jh-lb-vorige { top: 50%; left: 4px; transform: translateY(-50%); }
.jh-lightbox .jh-lb-volgende { top: 50%; right: 4px; transform: translateY(-50%); }

/* ---------- Video-embed ---------- */

/* Instagram's embed.js zet de hoogte van de iframe zelf, passend bij de post.
   Een vaste hoogte sneed het filmpje af. */
.jh-video {
  max-width: 400px;
  margin-top: 24px;
}

.jh-video .instagram-media {
  min-width: 0 !important;
  margin: 0 !important;
}

/* Terugval als embed.js geblokkeerd is: dan blijft er een gewone link staan. */
.jh-video blockquote:not([data-instgrm-payload-id]) {
  color: var(--white);
  border: 1px solid #ffffff40;
  padding: 20px;
  font-family: Outfit, sans-serif;
  font-size: 18px;
}

@media screen and (max-width: 767px) {
  .jh-galerij {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 18px;
  }

  .jh-kaart figcaption {
    font-size: 15px;
  }

  .jh-artikel .h-jh {
    font-size: 46px;
  }

  .jh-kop {
    font-size: 34px;
    padding-top: 30px;
  }

  .jh-lijst,
  .jh-artikel .jh-text {
    font-size: 19px;
  }

  .jh-slot {
    font-size: 20px;
  }
}