/* =========================================================
   STYLE.CSS — MEN OF COURAGE (stabiele basis, zonder sidebar)
   - Globale wijziging: alle tekst wit (geen grijs)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

:root{
  --bg:#000;
  --bg2:#111;
  --text:#fff;
  --muted:#fff;           /* was #cfcfcf ? nu ook wit */
  --line:#222;
  --red:#a0132c;
  --bg-image: url('/Images/achtergrond3.jpg');
}

/* Reset */
*{margin:0;padding:0;box-sizing:border-box}

/* Basis */
html,body{height:100%;width:100%}
body{
  font-family:'Bebas Neue', sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
}

/* Host (index.html) gebruikt eigen achtergrond en geen buitenste scroll */
body.host{
  overflow-y:hidden !important;
  background:#000 var(--bg-image) center/cover fixed no-repeat;
}

/* HEADER */
header{
  position:sticky; top:0; z-index:1000;
  background:var(--bg2);
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 40px;
  border-bottom:2px solid var(--red);
}
.logo{ color:#fff; font-size:1.8em; letter-spacing:.02em }

/* NAV (desktop) */
nav ul{ list-style:none; display:flex; gap:25px; align-items:center }
nav a{ color:#fff; text-decoration:none; font-size:1.1em; transition:color .3s }
nav a:hover{ color:var(--red) }
.menu-toggle{ display:none; font-size:2rem; color:#fff; cursor:pointer }

/* Zoekveld in header */
.site-search{ display:flex; align-items:center; gap:6px; }
.site-search input[type="text"]{
  font-family:'Bebas Neue', sans-serif;
  font-size:0.95rem;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid #444;
  background:rgba(0,0,0,0.7);
  color:#fff;
  min-width:180px;
}
.site-search input[type="text"]::placeholder{ color:#fff; }
.site-search input[type="text"]:focus{ outline:none; border-color:var(--red); }
.site-search--desktop{ margin-left:20px; }
.site-search--mobile{ display:none; margin-top:10px; }

/* CTA’s in header */
.nav-spacer{ margin-left:auto; }
.nav-cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:999px; border:2px solid var(--red);
  text-decoration:none; line-height:1; white-space:nowrap;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.nav-cta--primary{ background:var(--red); color:#fff; box-shadow:0 6px 16px rgba(160,19,44,.35); }
.nav-cta--primary:hover,.nav-cta--primary:focus-visible{
  background:#fff; color:var(--red); box-shadow:0 9px 22px rgba(160,19,44,.45);
}
.nav-cta--outline{ background:#fff; color:var(--red); box-shadow:0 6px 16px rgba(255,255,255,.12); }
.nav-cta--outline:hover,.nav-cta--outline:focus-visible{
  background:var(--red); color:#fff; box-shadow:0 9px 22px rgba(160,19,44,.45);
}
.menu-link.nav-cta{ padding:10px 16px; border-radius:999px; border:2px solid var(--red); background:#fff; color:var(--red); }
.menu-link.nav-cta:hover,.menu-link.nav-cta:focus-visible{ background:var(--red); color:#fff; }

/* Mobiele CTA bar standaard uit */
.mobile-cta-bar{ display:none; }

/* ========= MENU mobiel ========= */
@media (max-width:768px){
  header{ flex-direction:column; align-items:flex-start; padding:15px 20px }
  .menu-toggle{ display:block; margin-top:6px }
  nav{ display:none; width:100% }
  nav.open{ display:block }

  nav ul{ flex-direction:column; gap:10px; padding:10px 0; width:100% }
  nav ul li a{ display:block; padding:10px 0; border-top:1px solid var(--line); } /* fixed: {var(--line)} */

  /* Zoekveld: desktop verbergen, mobiel tonen onder menu */
  .site-search--desktop{ display:none; }
  .site-search--mobile{ display:flex; width:100%; }
  .site-search--mobile input[type="text"]{ width:100%; }

  .desktop-cta{ display:none !important; }
  .nav-spacer{ display:none !important; }

  /* CTA bar onderaan menu */
  #main-nav{ position:relative; padding-bottom:92px; }
  nav.open .mobile-cta-bar{
    display:grid; grid-template-columns: 1fr 1fr; gap:12px;
    position:sticky; bottom:0; width:100%;
    padding:14px 0 10px; margin-top:10px;
    background:var(--bg2); border-top:1px solid var(--line);
  }
  .mobile-cta{
    display:inline-flex; align-items:center; justify-content:center;
    width:100%; padding:14px 16px; border-radius:12px; border:2px solid var(--red);
    text-decoration:none; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
  }
  .mobile-cta--primary{ background:var(--red); color:#fff; box-shadow:0 6px 16px rgba(160,19,44,.35); }
  .mobile-cta--primary:hover,.mobile-cta--primary:focus-visible{ background:#fff; color:var(--red); }
  .mobile-cta--outline{ background:#fff; color:var(--red); box-shadow:0 6px 16px rgba(255,255,255,.12); }
  .mobile-cta--outline:hover,.mobile-cta--outline:focus-visible{ background:var(--red); color:#fff; }
}

/* ======= LAYOUT ZONDER SIDEBAR ======= */
.layout{
  flex:1;
  display:flex;
  min-height:0;
}
.right{
  flex:1; display:flex; flex-direction:column; min-width:0; min-height:0;
  border-left:none;
}
.content{
  position:relative; flex:1; min-height:0; display:flex;
  background:#000 var(--bg-image) center/cover fixed no-repeat;
}
.content::before{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); z-index:0;
}
.content-inner{ position:relative; z-index:1; flex:1; min-height:0; display:flex }

/* IFRAME — vult resthoogte, inner scroll only */
#pageFrame{
  flex:1; min-height:0; height:100% !important;
  overflow-y:auto !important; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  display:block; width:100%; border:none; background:transparent;
}

/* Typografie */
h1{ color:#fff; }
h2{ color:#fff; }
h3{ color:#fff; }
p{ color:var(--text); }

/* Globaal: alles wat “muted” was ook wit */
.muted{ color:#fff !important; }

/* FOOTER (binnen iframe-pagina's) */
.page-footer{
  background:var(--bg2); border-top:1px solid var(--line);
  padding:15px 25px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
  width:100%; box-sizing:border-box;
}
.page-footer .footer-left h3{ color:var(--red); font-size:1.4em }
.page-footer .footer-left p{ color:#fff; font-size:1em; line-height:1.4 }
.page-footer .footer-right a{ color:#fff; text-decoration:none; margin-left:16px; transition:color .3s }
.page-footer .footer-right a:hover{ color:var(--red) }

/* MOBIEL */
@media (max-width:900px){
  .layout{ display:flex }
}

/* ===== GLOBALE LINKS ===== */
a, a:visited{ color:#fff; text-decoration:none; }
.iframe-main a:hover, .content a:hover, .content-inner a:hover, main a:hover{
  color:var(--red); text-decoration:underline;
}
header nav a:hover, footer a:hover, .page-footer a:hover,
a.btn, a.btn:hover, .btn, .btn:hover{ text-decoration:none; }
a:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

/* ===== KNOPPEN (rood?wit hover) ===== */
a.btn, button.btn, input[type="submit"].btn,
a.btn-red, button.btn-red, input[type="submit"].btn-red{
  background:var(--red); color:#fff; border-radius:10px; text-decoration:none;
  border:2px solid var(--red); box-shadow:0 6px 16px rgba(160,19,44,.35);
  transition: transform .06s, box-shadow .2s, background-color .2s, color .2s;
}
a.btn:hover, a.btn:focus-visible,
button.btn:hover, button.btn:focus-visible,
input[type="submit"].btn:hover, input[type="submit"].btn:focus-visible,
a.btn-red:hover, a.btn-red:focus-visible,
button.btn-red:hover, button.btn-red:focus-visible,
input[type="submit"].btn-red:hover, input[type="submit"].btn-red:focus-visible{
  background:#fff; color:var(--red); box-shadow:0 9px 22px rgba(160,19,44,.45);
}

/* ===== WITTE CTA ===== */
.btn-white{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:10px; border:2px solid var(--red);
  background:#fff; color:var(--red); text-decoration:none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .06s;
  box-shadow:0 6px 16px rgba(255,255,255,.12);
}
.btn-white:hover,.btn-white:focus-visible{
  background:var(--red); color:#fff; box-shadow:0 9px 22px rgba(160,19,44,.45);
}

/* Witte CTA-knop met rode letters (ook bij :visited) */
a.btn-white{
  background:#fff !important;
  border:2px solid var(--red) !important;
  color:var(--red) !important;
  border-radius:10px;
  box-shadow:0 6px 16px rgba(160,19,44,.35);
  transition:transform .06s, box-shadow .2s, background-color .2s, color .2s;
}
a.btn-white:visited{ color:var(--red) !important; }
a.btn-white:hover,
a.btn-white:focus-visible{
  background:var(--red) !important;
  color:#fff !important;
  box-shadow:0 9px 22px rgba(160,19,44,.45);
}