<!--computer-->
/* =========================================================
   Yuha.be — Nieuwe moderne stylesheet (Plan A: reskin only)
   Alle bestaande class-/ID-namen zijn behouden zodat de
   JavaScript in footer.php (popups, reservatie, contact)
   blijft werken zonder aanpassingen aan index.php,
   reservation.php of sendMail.php.
   ========================================================= */

:root{
  --yuha-primary:   #ff6b35;   /* warm oranje - speels, kinderen/events */
  --yuha-primary-dark: #e6541e;
  --yuha-secondary: #2ec4b6;   /* fris turquoise */
  --yuha-dark:      #1f2937;
  --yuha-text:      #333333;
  --yuha-bg:        #fafafa;
  --yuha-card-bg:   #ffffff;
  --yuha-border:    #e5e5e5;
  --radius:         14px;
  --shadow:         0 4px 16px rgba(0,0,0,0.08);
  --shadow-hover:   0 8px 24px rgba(0,0,0,0.14);
  --maxw:           1100px;
}

*{ box-sizing: border-box; }

html, body{
  margin:0;
  padding:0;
  background: var(--yuha-bg);
  color: var(--yuha-text);
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  scroll-behavior: smooth;
}

a{ color: var(--yuha-primary-dark); text-decoration:none; }
a:hover{ text-decoration: underline; }

h1{
  font-size: 1.9rem;
  color: var(--yuha-dark);
  margin: 0 0 1rem;
  font-weight: 700;
}
h2{ font-size: 1.1rem; margin:0; }
h3{ font-size: 1.1rem; color: var(--yuha-dark); }

.contentHolder{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

/* ---------- Header / Navigatie ---------- */
#header{
  background: #fff;
  text-align:center;
  padding: 1rem;
  border-bottom: 1px solid var(--yuha-border);
}
#header img{
  max-height: 70px;
  width:auto;
}

#menuHolder{
  position: sticky;
  top:0;
  z-index: 500;
  background: var(--yuha-dark);
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content:center;
  gap: 1.75rem;
  padding: 0.85rem 1.5rem;
}
#menuHolder a{
  color:#fff;
  font-weight:600;
  letter-spacing:.03em;
  text-transform: uppercase;
  font-size:.85rem;
  text-decoration:none;
  opacity:.9;
  transition: opacity .15s, color .15s;
}
#menuHolder a:hover{
  opacity:1;
  color: var(--yuha-primary);
  text-decoration:none;
}
#topShadow{ display:none; }

#social{
  display:flex;
  gap:.6rem;
  margin-left: .75rem;
}
.social{
  width:34px;
  height:34px;
  border-radius:50%;
  background: rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background .15s;
  position: relative;
}
.social:hover{ background: var(--yuha-primary); }
.social img{ opacity:0; width:1px; height:1px; } /* spacer.gif, behouden maar onzichtbaar */
.social a{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
#fb a::after{ content:"f"; color:#fff; font-weight:700; font-family: Georgia, serif; }
#twitter a::after{ content:"X"; color:#fff; font-weight:700; font-size:13px; }

.headerPadder{ height: 0; }

/* ---------- Fotogalerij (polaroid) ---------- */
#polaroidHolder{ padding-top: 2.5rem; padding-bottom: 1rem; }
#bar{ display:none; }
#picsHolder{ overflow:hidden; }
.inner-div{
  display:flex;
  flex-wrap:wrap;
  gap: 1.25rem;
  justify-content:center;
}
.polaroid{
  position:relative;
  width: 220px;
  cursor:pointer;
  transition: transform .2s;
}
.polaroid:hover{ transform: translateY(-4px); }
.polaroid .pol{ display:none; } /* oude polaroid-fotolijst-afbeelding vervangen door schaduw/rand */
.polaroid .polImage{
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.polaroid .polImage img{
  display:block;
  width:100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius);
}

/* ---------- Verouderde parallax dierenscène: standaard verborgen ----------
   (verwijder onderstaande regel om de oude scène terug te tonen) */
#landscapeHolder{ display:none; }
#newsHolder{ display:none; }

/* ---------- Verhuur sectie ---------- */
#rentHolder{ text-align:center; }
#rentme{
  max-width: 700px;
  margin: 0 auto;
  background: var(--yuha-card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
}
#rentme h1{ text-align:center; }
#rentme p{ margin: 0 0 1rem; }

/* ---------- Modellen ---------- */
#modelsHolder{ text-align:center; }
#modelsHolder h1{ text-align:center; margin-bottom: 2rem; }

#animalsHolder{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  text-align:left;
}

.animal{
  background: var(--yuha-card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: transform .2s, box-shadow .2s;
}
.animal:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.mosaic{ cursor:pointer; }
.mosaic img{
  display:block;
  width:100%;
  height: 170px;
  object-fit: contain;
  background: #f2f2f2;
  padding: .75rem;
}
.animalInfo{
  padding: .9rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.animalInfo h2{ color: var(--yuha-dark); display:flex; align-items:center; gap:.6rem; }

.checkBox{
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 2px solid var(--yuha-border);
  display:inline-block;
  cursor:pointer;
  position:relative;
  transition: background .15s, border-color .15s;
  flex-shrink:0;
}
.checkBox:hover{ border-color: var(--yuha-primary); }
.checkBox.checked{
  background: var(--yuha-primary);
  border-color: var(--yuha-primary);
}
.checkBox.checked::after{
  content:"\2713";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size: 14px;
  font-weight:700;
}

/* ---------- Reservatieformulier ---------- */
.noshow{ display:none !important; }

#errorReservation h3{
  text-align:center;
  padding: 1rem;
  border-radius: var(--radius);
  background:#fdecea;
  color:#b3261e;
}
#successReservation h3{
  text-align:center;
  padding: 1rem;
  border-radius: var(--radius);
  background:#e8f8f2;
  color:#0f7a5c;
}

#reservationForm{
  grid-column: 1 / -1;
  background: var(--yuha-card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
  margin-top: 1rem;
  text-align:left;
}
#reservationForm h1{ font-size:1.2rem; }

#reservationForm input.required{
  width:100%;
  padding: .75rem 1rem;
  margin: .5rem 0;
  border: 1px solid var(--yuha-border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
}
#reservationForm input.required:focus{
  outline:none;
  border-color: var(--yuha-primary);
}

.reservationHolder{
  display:inline-block;
  margin-top: 1rem;
  background: var(--yuha-primary);
  color:#fff;
  font-weight:700;
  padding: .85rem 1.75rem;
  border-radius: 999px;
  cursor:pointer;
  transition: background .15s, transform .1s;
}
.reservationHolder:hover{ background: var(--yuha-primary-dark); }
.reservationHolder:active{ transform: scale(.97); }

/* ---------- Disclaimer (in popup) ---------- */
#disclaimerHolder{
  display:none; /* alleen zichtbaar via loadDisclaimer() popup */
}
#popUpContent #disclaimerHolder{
  display:block;
  text-align:left;
  max-width: 700px;
}
#disclaimerHolder p{ margin-bottom: 1rem; font-size: .9rem; }

.technicalDIV{
  display:flex;
  justify-content:space-between;
  gap: 1rem;
  font-size:.85rem;
  padding: .3rem 0;
  border-bottom: 1px dashed var(--yuha-border);
}
.techLabel{ font-weight:600; color: var(--yuha-dark); }

/* ---------- Contact ---------- */
#contactHolder{ text-align:center; }
#form{
  max-width: 500px;
  margin: 0 auto;
  background: var(--yuha-card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
  text-align:left;
}
#form h1{ text-align:center; }

#contactForm input.required,
#contactForm textarea{
  width:100%;
  padding: .75rem 1rem;
  margin: .5rem 0;
  border: 1px solid var(--yuha-border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
}
#contactForm textarea{ min-height: 120px; resize: vertical; }
#contactForm input.required:focus,
#contactForm textarea:focus{
  outline:none;
  border-color: var(--yuha-primary);
}

.buttonHolder{
  display:inline-block;
  background: var(--yuha-secondary);
  color:#fff;
  font-weight:700;
  padding: .85rem 1.75rem;
  border-radius: 999px;
  cursor:pointer;
  text-align:center;
  transition: background .15s, transform .1s;
}
.buttonHolder:hover{ background:#249c90; }
.buttonHolder:active{ transform: scale(.97); }

#errorMessage h3{ background:#fdecea; color:#b3261e; padding:1rem; border-radius: var(--radius); text-align:center; }
#successMessage h3{ background:#e8f8f2; color:#0f7a5c; padding:1rem; border-radius: var(--radius); text-align:center; }

/* ---------- Popup (foto's, video, disclaimer) ---------- */
#popUp{
  display:none;
  position:fixed;
  inset:0;
  z-index: 1000;
}
#popUpBG{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.75);
}
#popUpContent{
  position:absolute;
  top:50%;
  left:50%;
  background:#fff;
  border-radius: var(--radius);
  padding: 1.5rem;
  overflow-y:auto;
  box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
#popUpContent.popUpContentBlack{
  background:#000;
  padding:0;
}
#closer{
  position:fixed;
  top: 20px;
  right: 20px;
  z-index: 1001;
  cursor:pointer;
  width: 32px;
  height: 32px;
  background:#fff;
  border-radius:50%;
  padding:6px;
  box-shadow: var(--shadow);
}
#closer img{ width:100%; height:100%; }

.popInfo{ margin-top: 1rem; text-align:left; }

/* bxSlider content in popup */
.bxslider{ list-style:none; margin:0; padding:0; }
.bxslider img{ max-width:100%; max-height:100%; display:block; margin:0 auto; }

/* ---------- Responsive ---------- */
@media (max-width: 640px){
  .contentHolder{ padding: 2rem 1rem; }
  #menuHolder{ gap: 1rem; padding: .75rem 1rem; }
  #menuHolder a{ font-size:.75rem; }
  .polaroid{ width: 100%; max-width: 320px; }
  #reservationForm, #form{ padding: 1.25rem; }
  #popUpContent{ width: 92% !important; left:4% !important; margin-left:0 !important; }
}

@media only screen 
and (min-height : 256px) 
and (max-height : 800px) { 
	#header {
		/*position: fixed;
		z-index: 9999;
		width: 100%;
		
		background-color: #FFFFFF;
		text-align: center;
		overflow: visible;*/
		padding-top: 26px;
		padding-bottom: 36px;
		height: 100px;
	}
	#header img {
		height: 90%;
		width: auto;
	}
	.headerPadder {
		position: relative;
		width: 100%;
		height: 162px;
	}
	#polaroidHolder {
		/*top: 140px;*/
	}
	
}