/* Crocky - huisstijl-verfijning en afsluitblok. Gedeeld door alle pagina's. */
/* ===========================================================
   RUSTIGER: zelfde huisstijl, minder fel + meer ruimte
   =========================================================== */

:root{
  --yellow:#FFEF9C;          /* achtergrond: zachter geel, logo steekt er weer uit */
  --yellow-accent:#FFD84D;   /* het felle merkgeel, nu alleen als accent */
  --cta:#C92B26;             /* iets dieper rood, minder schel */
}

/* het felle geel blijft waar het knalt: op de rode knop en in het menu */
.crocky-button{color:var(--yellow-accent);}
#crockyLangMenu a.active,#crockyMenuDropdown a.active{
  color:var(--yellow-accent);text-decoration-color:var(--yellow-accent);
}

/* zachtere schaduwen: minder visuele ruis */
.hero-img,.hall-video{box-shadow:0 4px 14px rgba(0,0,0,.14);}
.trust-badge,.trust-item,.tile,.swipe-strip{box-shadow:0 3px 8px rgba(0,0,0,.13);}
.crocky-button{box-shadow:0 4px 10px rgba(0,0,0,.20);}
#crockyLang button,#crockyMenu button{box-shadow:0 3px 8px rgba(0,0,0,.22);}

/* ---------- meer lucht tussen de onderdelen ---------- */
main{padding:14px 16px 26px;}
.logo{margin:8px auto 0;}
.location-tag{margin:2px auto 0;}
.trust-line{margin:3px auto 0;}
.parking-line{margin:3px auto 6px;}
.trust-strip{margin:12px auto 10px;gap:10px;}
.trust-item{padding:10px 12px;}

.page-title{
  margin:16px auto 10px;padding:7px 16px;
  background:#FFE469;               /* vollere gele vulling: kop wordt een label */
  border-color:var(--green);
}
.hero-img{display:block;margin:0 auto 10px;}
.hall-video{margin:0 auto 10px;}
.trust-badge{margin:0 auto 16px;padding:14px 18px;}
summary{margin-top:12px;}

.cta-wrap{margin:6px auto 8px;}
.utility-bar{margin:6px auto 6px;}
.title-green-lg{margin:22px 0 10px;}

.tiles-title{margin:24px 0 10px;}
.swipe-tile{margin:6px auto 8px;}
.tiles{gap:10px;margin:0 auto 20px;}
.tile{min-height:96px;}
.notice-card{margin:18px auto 12px;}
.address-line{margin:0 auto 18px;}

/* pagina's met informatiekaarten */
.info-card a{color:#fff;text-decoration:underline;text-underline-offset:2px;font-weight:800;}
.info-card a:hover{color:var(--yellow-accent);}
.info-card{margin:10px auto 16px;box-shadow:0 3px 8px rgba(0,0,0,.13);}
.notice-card{box-shadow:0 3px 8px rgba(0,0,0,.13);}
.map-wrap,.media-wrap{box-shadow:0 3px 8px rgba(0,0,0,.13);margin-top:10px;}
.legal{margin:16px auto 10px;}


/* Afsluiting: mascotte naast de tekst in plaats van eronder */
.signoff{
  display:flex;align-items:center;justify-content:center;
  gap:14px;max-width:900px;margin:20px auto 10px;
}
.signoff .title-green-lg{margin:0;text-align:center;font-size:19px;line-height:1.25;}
.signoff img{width:118px;height:auto;border-radius:12px;display:block;}
@media(min-width:601px){
  .signoff{gap:22px;}
  .signoff .title-green-lg{font-size:22px;}
  .signoff img{width:150px;}
}

/* Beeldverhoudingen per schermbreedte
   - telefoon: hero en de hal-video 4:3, scheelt hoogte en toont het onderwerp groter
   - breed scherm: de originele, liggende verhouding */
@media(max-width:800px){
  .hall-video{aspect-ratio:4/3;object-fit:cover;}
  .hall-video.no-crop{aspect-ratio:1280/670;}
}
@media(min-width:801px){
  .hero-img.hero-4x3{aspect-ratio:auto;height:auto;}
}

/* Waarschuwingsblok: kop gecentreerd, tekst als losse alinea's */
.notice-card{text-align:left;}
.notice-card .notice-title{text-align:center;margin-bottom:10px;}
.notice-card p{margin:0 0 10px;text-wrap:pretty;}
.notice-card p:last-child{margin-bottom:0;}

/* ===========================================================
   DESKTOP (vanaf 901px): mobiel blijft ongewijzigd.
   - hoekknoppen en logo schalen mee met het grotere scherm
   - de bovenste foto neemt niet langer het hele scherm in beslag
   =========================================================== */
@media (min-width: 901px){

  :root{
    --corner-control:80px;   /* was 52px */
    --corner-logo-max:280px; /* was 210px */
    --corner-offset:14px;
  }

  /* vlag en hamburger meeschalen met de grotere knop */
  #crockyLang button,#crockyMenu button{border-width:3px;border-radius:18px;}
  #crockyLang .flag{width:44px;height:29px;border-radius:4px;}
  #crockyLangBtn .caret{font-size:20px;right:7px;bottom:3px;}
  #crockyMenuBtn>span:first-child{
    width:42px;height:30px;
    background:
      linear-gradient(#fff,#fff) left top/100% 5px no-repeat,
      linear-gradient(#fff,#fff) left center/100% 5px no-repeat,
      linear-gradient(#fff,#fff) left bottom/100% 5px no-repeat;
  }
  #crockyMenuBtn[aria-expanded="true"]>span:first-child::before,
  #crockyMenuBtn[aria-expanded="true"]>span:first-child::after{height:5px;}

  /* Bovenste foto: liggend formaat en nooit hoger dan het venster toelaat,
     zodat de tekstblokken eronder meteen zichtbaar zijn. */
  .hero-img.hero-4x3{
    aspect-ratio:16/9;
    object-fit:cover;
    object-position:center 12%;   /* uitsnede hoger: meer plafond, minder vloer */
    width:100%;
    height:auto;
    max-height:max(320px, calc(100vh - 360px));
  }

  /* Het bewegende fragment als het bovenaan staat: zelfde kader als de foto */
  .hall-video.is-hero{
    aspect-ratio:16/9;
    object-fit:cover;
    object-position:center 12%;
    max-height:max(320px, calc(100vh - 360px));
  }

  /* De foto als die naar BINNENSPEELTUIN is verhuisd: terug naar 4:3,
     dus nauwelijks bijgesneden, en zonder hoogtelimiet */
  .is-section .hero-img.hero-4x3{
    aspect-ratio:4/3;
    object-position:center center;
    max-height:none;
  }

  /* Locatieregel en routeknop naast elkaar: scheelt verticale ruimte,
     zodat de vier blokjes eronder meteen in beeld staan. */
  .intro-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    max-width:900px;
    margin:6px auto 10px;
    flex-wrap:wrap;
  }
  .intro-row .location-tag{margin:0;}
  .intro-row .cta-wrap{margin:0;max-width:none;}
  .intro-row .crocky-button{margin:0;}

  /* Fotostrip op de verjaardagspagina's: zelfde hoogtebegrenzing */
  .hero-strip img{
    object-position:center 25%;
    max-height:max(320px, calc(100vh - 360px));
  }
}

/* ===========================================================
   BREED SCHERM (vanaf 1180px): de twee groene hoekknoppen staan
   naast de contentkolom in plaats van erbovenop, zodat het menu
   tijdens het scrollen niets meer afdekt. Onder deze breedte is
   daar geen ruimte voor en blijven ze staan waar ze stonden.
   =========================================================== */
@media (min-width: 1180px){
  #crockyLang{
    left:calc(50% - var(--content-half) - var(--corner-control) - 20px);
  }
  #crockyMenu{
    right:calc(50% - var(--content-half) - var(--corner-control) - 20px);
  }
  /* Uitklapmenu valt nu naar binnen toe open, anders loopt het van het scherm af */
  #crockyMenuDropdown{right:0;left:auto;}
  #crockyLangMenu{left:0;right:auto;}
}