/* ===============================
   General site styling
   =============================== */

html, body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: #fff;
  background: url("/assets/images/man-water-vuur.png") no-repeat center center fixed;
  background-size: cover;
}

/* ===============================
   Banner
   =============================== */

#banner.banner-dark {
  background: rgba(0,0,0,0.75); /* translucent black overlay */
  text-align: center;
  padding: 2rem 1rem;
}

#banner.banner-dark .inner {
  background: transparent;
}

#banner.banner-dark h1,
#banner.banner-dark p {
  color: #fff;
}

#banner {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

#banner h1 { margin-top: 0 !important; margin-bottom: 0.35rem; line-height: 1.2; }
#banner .inner > p { margin-top: 0.2rem; }

/* Push page content down so it doesn’t overlap the fixed banner */
body {
  padding-top: 100px; /* adjust to match your banner height */
}

/* Rotating teaser questions — pure CSS, no JS */
.teasers {
  /* how many <p> lines you have */
  --count: 6;

  /* time per line; total cycle = --per * --count */
  --per: 4s;
  --time: calc(var(--per) * var(--count));

  position: relative;
  height: 2.5rem;     /* room for one line */
  margin-bottom: 0.1rem;
  font-size: 1.2rem;
  font-weight: 600;
  overflow: hidden;
}

.teasers p {
  position: absolute;
  inset: 0 0 auto 0;
  margin: 0;
  opacity: 0;
  color: #ffb347 !important;  /* force orange text */
  transform: translateY(100%);
  will-change: opacity, transform;

  /* each line animates over the full cycle; delays stagger them */
  animation: teaserCycle var(--time) linear infinite;
}

/* Staggered start times (add lines if you add more teasers) */
.teasers p:nth-child(1) { animation-delay: calc((var(--time)/var(--count)) * 0); }
.teasers p:nth-child(2) { animation-delay: calc((var(--time)/var(--count)) * 1); }
.teasers p:nth-child(3) { animation-delay: calc((var(--time)/var(--count)) * 2); }
.teasers p:nth-child(4) { animation-delay: calc((var(--time)/var(--count)) * 3); }
.teasers p:nth-child(5) { animation-delay: calc((var(--time)/var(--count)) * 4); }
.teasers p:nth-child(6) { animation-delay: calc((var(--time)/var(--count)) * 5); }
/* If you have more, continue:
.teasers p:nth-child(7) { animation-delay: calc((var(--time)/var(--count)) * 6); }
... up to however many you use.
*/

@keyframes teaserCycle {
  /* Fade in smoothly */
  0%   { opacity: 0; transform: translateY(100%); }
  8%   { opacity: 1; transform: translateY(0); }

  /* Stay visible */
  20%  { opacity: 1; transform: translateY(0); }

  /* Faster fade out */
  25%  { opacity: 0; transform: translateY(-100%); }

  100% { opacity: 0; transform: translateY(-100%); }
}




/* ===============================
   Alternating content blocks
   =============================== */

.alternating {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.alt-block {
  max-width: 650px; /* width of each panel */
  background: rgba(0,0,0,0.5);
  border-radius: 8px;
  padding: 2rem;
  text-align: left; /* keep natural text flow */
}

/* Alternate placement */
.alternating .alt-block:nth-of-type(odd) {
  align-self: flex-start;   /* left side */
}
.alternating .alt-block:nth-of-type(even) {
  align-self: flex-end;     /* right side */
}



/* ===============================
   Form styling
   =============================== */

/* ---------- FORM PANEL ---------- */
.form-section{
  max-width:700px;
  margin:3rem auto;
  padding:2rem;
  background:rgba(0,0,0,0.5);
  border-radius:12px;
  color:#fff;
  box-shadow:0 10px 25px rgba(0,0,0,.25);
}
.form-section h2{ margin-top:0; }

/* ---------- FORM LAYOUT ---------- */
.simple-form{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

/* Labels above fields (except radios, see below) */
.simple-form > div > label{
  display:block;
  font-weight:600;
  margin-bottom:.35rem;
}

/* Inputs & textarea */
.simple-form input,
.simple-form textarea,
.simple-form button{
  width:100%;
  padding:.7rem .9rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.1);
  color:#fff;
}
.simple-form textarea{ min-height:110px; resize:vertical; }
.simple-form input::placeholder,
.simple-form textarea::placeholder{ color:rgba(255,255,255,.7); }

/* Focus state */
.simple-form input:focus,
.simple-form textarea:focus{
  outline:none;
  border-color:#e65c00;
  box-shadow:0 0 0 3px rgba(230,92,0,.25);
}

/* Submit button */
.simple-form button{
  background:#e65c00;
  border:none;
  font-weight:700;
  cursor:pointer;
  transition:filter .15s ease-in-out;
}
.simple-form button:hover{ filter:brightness(1.05); }

/* Consistent styling for select dropdowns in forms */
.simple-form select {
  width: 100%;
  padding: .7rem .9rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 1rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.simple-form select:focus {
  outline: none;
  border-color: #e65c00;
  box-shadow: 0 0 0 3px rgba(230,92,0,.25);
}

/* Optional: add a dropdown arrow for better UX */
.simple-form select {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23ffb347' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.2em;
}

/* ---------- RADIOS: inline with text, tidy chips ---------- */
.form-radios{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem .75rem;
  margin-bottom:.25rem;
}

/* Make each option a compact “chip” with inline radio + text */
.form-radios label{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin:0;
  padding:.45rem .7rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  line-height:1.3;
  cursor:pointer;
}

/* Ensure the radio itself doesn’t jump above the text */
.form-radios input[type="radio"]{
  display:inline-block;
  vertical-align:middle;
  width:1rem;
  height:1rem;
  margin:0;
  flex:0 0 auto;
}

/* Fallback: if you didn’t add .form-radios, at least keep radios inline */
.simple-form input[type="radio"]{ vertical-align:middle; margin-right:.5rem; }
.simple-form input[type="radio"] + label{ display:inline; }




/* Simple button style for links with class="button" */
a.button {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border-radius: 6px;
  background: #e65c00;
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease-in-out;
}

a.button:hover {
  background: #ff751a;
}

/* Styled blockquotes */
blockquote {
  position: relative;
  margin: 2rem auto;
  padding: 1.5rem 2rem;
  max-width: 650px;
  font-style: italic;
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.08);
  border-left: 5px solid #e65c00;  /* warm orange accent */
  border-radius: 6px;
  color: #f0f0f0;
}

/* Add a subtle opening quote mark */
blockquote::before {
  content: "“";
  font-size: 3rem;
  position: absolute;
  left: 10px;
  top: -10px;
  color: #e65c00;
  opacity: 0.8;
}



.trainer {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
}
.trainer-photo {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%; /* circular photo */
  flex: 0 0 auto;
}
.trainer-text {
  flex: 1 1 300px;
}

/* ===============================
   Hyperlink styling
   =============================== */

/* Make links warm orange, matching buttons and accents */
a {
  color: #ffb347; /* warm orange */
  text-decoration: underline;
  transition: color 0.2s;
}

a:hover,
a:focus {
  color: #e65c00; /* deeper orange on hover */
  text-decoration: underline;
}

/* If links are inside blockquotes or dark panels, ensure contrast */
.alt-block a,
.form-section a,
blockquote a {
  color: #ffb347;
}

.alt-block a:hover,
.form-section a:hover,
blockquote a:hover {
  color: #e65c00;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

/* Specifiek voor de hoofdpagina */
body.home .container {
  max-width: 100%;
  padding: 0;
}

/* Apply to all direct child divs in .container, except .alt-block */
.content-block {
  max-width: 650px;
  background: rgba(0,0,0,0.5);
  border-radius: 8px;
  padding: 2rem;
  margin: 2rem auto;
  text-align: left;
}

/* Make embedded videos responsive and fit the content block */
.content-block .plyr-video,
.content-block video,
.plyr__video-embed {
  max-width: 100% !important;   /* never exceed parent width */
  width: 100% !important;       /* fill available width */
  height: auto !important;      /* preserve aspect ratio */
  display: block;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Optionally limit the maximum width site-wide for large embeds */
.content-block .plyr-video {
  max-width: 720px; /* keeps original intended ceiling */
}