/* =========================================================
   STYLE.CSS — MEN OF COURAGE (stabiele basis)
   - Iframe vult resthoogte; inner scrollt alleen indien nodig
   - Footer in iframe-pagina
   - Bebas Neue; H1 = #cac9c9; content gecentreerd
   ========================================================= */

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

:root{
  --bg:#000; --bg2:#111; --text:#fff; --muted:#cfcfcf;
  --line:#222; --red:#a0132c; --sidebar:220px;
  /* ? NIEUW: pad naar je achtergrondafbeelding */
  --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;              /* standaard documenten (in iframe) mogen scrollen */
  display:flex; flex-direction:column;
}
/* Alleen de host (index.html) heeft GEEN buitenste scrollbar */
body.host{ 
  overflow-y:hidden !important; 
  /* ? Fallback: ook op body de achtergrond zetten (mag blijven) */
  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:#cac9c9; font-size:1.8em; letter-spacing:.02em }
nav ul{ list-style:none; display:flex; gap:25px }
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 }
@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) }
}

/* LAYOUT: body is column; .layout vult resthoogte */
.layout{
  display:grid;
  grid-template-columns: var(--sidebar) 1fr;
  flex:1;                  /* neemt alle ruimte onder header */
  min-height:0;            /* cruciaal: laat kinderen overflow beheren */
  background:var(--bg);
}
.sidebar{
  background:url("/Images/linker-strook.jpg") center/cover no-repeat;
}
.right{
  display:flex; flex-direction:column; min-width:0; min-height:0;
  border-left:2px solid var(--red);   /* rode verticale lijn */
}

/* Hoofdvlak met achtergrond (alleen rechts) */
.content{
  position:relative; flex:1; min-height:0; display:flex;
  /* ? NIEUW: hier staat je achtergrond weer */
  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 en scrolt BINNEN zichzelf indien nodig */
#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:#cac9c9; }   /* hoofdtitels in lichtgrijs */
p{ color:var(--text); }

/* 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:var(--muted); 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{ grid-template-columns:1fr }
  .sidebar{ display:none }
  .right{ border-left:none }
}

/* ===== FILMISCHE INTRO ===== */
#introLoader{
  position:fixed; inset:0; background:#000; z-index:9999;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  overflow:hidden;
}
.red-line{ width:0; height:3px; background:var(--red); animation:redExpand 2.5s ease-out forwards }
.red-line.top{ animation-delay:.3s } .red-line.bottom{ animation-delay:.8s }
@keyframes redExpand{ 0%{width:0;opacity:.4} 50%{opacity:1} 100%{width:90%;opacity:1} }
.intro-center{ display:flex; flex-direction:column; align-items:center; margin:30px 0; opacity:0; animation:introCenter 1s ease forwards 2.8s }
.white-line{ height:2px; background:#fff; width:0; opacity:.9; animation-fill-mode:forwards }
.white-line.top{ animation:whiteLeft 2.2s ease-in-out forwards 2.8s }
.white-line.bottom{ animation:whiteRight 2.2s ease-in-out forwards 2.8s }
@keyframes whiteLeft{ 0%{width:0;transform:translateX(-100%);opacity:0} 50%{opacity:1} 100%{width:250px;transform:translateX(0);opacity:1} }
@keyframes whiteRight{ 0%{width:0;transform:translateX(100%);opacity:0} 50%{opacity:1} 100%{width:250px;transform:translateX(0);opacity:1} }
.intro-text{ color:#fff; font-size:clamp(2em, 6vw, 4em); letter-spacing:4px; margin:20px 0; opacity:0; animation:introText 1.8s ease forwards 3.5s }
@keyframes introCenter{ to{ opacity:1 } }
@keyframes introText{ 0%{ opacity:0; transform:scale(.9) } 100%{ opacity:1; transform:scale(1) } }

/* CSS-failsafe: intro gaat altijd weg rond ~9s (ook zonder JS) */
#introLoader{ animation:introFailsafe 9s linear forwards; }
@keyframes introFailsafe{ 0%,88%{opacity:1} 100%{opacity:0; visibility:hidden} }
body.loaded #introLoader{ animation:fadeIntro 1s ease forwards; }
@keyframes fadeIntro{ to{ opacity:0; visibility:hidden } }

/* === Inhoud binnen IFRAME (home.html enz.) === */
.iframe-page{
  min-height:100%;               /* gebruikt volle iframe-hoogte */
  display:flex; flex-direction:column;
}
.iframe-main{
  flex:1;                        /* duwt footer omlaag */
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  text-align:center;
  padding:80px 20px 40px;
  box-sizing:border-box;
}
.iframe-main h1{ font-size:clamp(1.8em,4vw,2.6em); margin-bottom:12px }
.iframe-main p{ font-size:clamp(1em,2vw,1.2em); line-height:1.5; max-width:800px }

/* Basis */
.btn, .button,
input[type="submit"].btn, input[type="button"].btn, button.btn {
  font-family:'Bebas Neue', sans-serif;
  font-size:1.25rem;
  line-height:1;
  padding:14px 22px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .06s ease, box-shadow .2s ease, background-color .2s ease;
  -webkit-appearance:none; appearance:none;   /* voorkom grijze system-knop */
}

/* Rode variant (forceer) */
button.btn.btn-red,
input[type="submit"].btn-red,
.button.btn-red {
  background:#a0132c !important;   /* site-rood */
  color:#fff !important;            /* witte letters */
  text-transform:uppercase;
  letter-spacing:.5px;
  box-shadow:0 6px 16px rgba(160,19,44,.35);
}

/* === HOVER-UPDATE: achtergrond wit, tekst rood === */
button.btn.btn-red:hover,
input[type="submit"].btn-red:hover,
.button.btn-red:hover {
  background:#fff !important;       /* wit bij hover */
  color:var(--red) !important;      /* tekst rood */
  box-shadow:0 8px 20px rgba(160,19,44,.30);
}
/* Ook voor <a class="btn-red"> varianten */
a.btn-red:hover{
  background:#fff !important;
  color:var(--red) !important;
}

button.btn.btn-red:active,
input[type="submit"].btn-red:active,
.button.btn-red:active {
  transform:translateY(1px);
}
button.btn.btn-red:focus-visible,
input[type="submit"].btn-red:focus-visible,
.button.btn-red:focus-visible {
  outline:2px solid #fff; outline-offset:2px;
}

/* Uitlijning onder formulier (zoals jij had) */
.form-actions { margin-top:16px; display:flex; justify-content:flex-start; gap:10px; }

/* Optioneel: uitlijncontainer onder het formulier */
.form-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end; /* of 'center' als je wilt centreren */
  gap: 10px;
}
/* Nieuwsbrieflink altijd wit; subtiele hover in MoC-stijl */
.iframe-main a.news-link,
.iframe-main a.news-link:visited {
  color: #fff;
  text-decoration: none;
}

.iframe-main a.news-link:hover {
  color: #a0132c;
  text-decoration: underline;
}

.iframe-main a.news-link:focus-visible {
  outline: 2px solid #a0132c;
  outline-offset: 2px;
}
/* ===== GLOBALE LINK-STIJL — veilig voor menu & knoppen ===== */

/* Standaard: alle links wit, geen underline */
a, a:visited {
  color: #fff;
  text-decoration: none;
}

/* Content-hover: rode hint + underline (niet voor menu/footer/knoppen) */
.iframe-main a:hover,
.content a:hover,
.content-inner a:hover,
main a:hover {
  color: #a0132c;
  text-decoration: underline;
}

/* UITZONDERINGEN: menu, footer en knoppen – geen underline wijzigen */
header nav a:hover,
footer a:hover,
.page-footer a:hover,
a.btn, a.btn:hover,
.btn, .btn:hover {
  text-decoration: none;
}

/* Toetsenbord-focus: duidelijke focusring in MoC-rood */
a:focus-visible {
  outline: 2px solid #a0132c;
  outline-offset: 2px;
}

/* Buttons: standaard rood + wit; hover/focus wit + rood (site-breed) */
a.btn, button.btn, input[type="submit"].btn {
  background: var(--red);
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
  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{
  background: #fff;
  color: var(--red);
  box-shadow: 0 9px 22px rgba(160,19,44,.45);
}

/* === Catbar chips: rood ? hover wit (alleen bovenste 3 knoppen) === */
.catbar .chip{
  appearance:none;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid var(--red) !important;
  background:var(--red) !important;   /* rood */
  color:#fff !important;               /* wit */
  text-decoration:none;
  font-size:clamp(.95rem, 2vw, 1.05rem);
  letter-spacing:.4px;
  box-shadow:0 6px 18px rgba(160,19,44,.35);
  transition:
    background-color .15s ease,
    color .15s ease,
    border-color .15s ease,
    transform .15s ease,
    filter .15s ease;
}
.catbar .chip:hover,
.catbar .chip:focus-visible{
  background:#fff !important;          /* wit */
  color:var(--red) !important;          /* rood */
  border-color:var(--red) !important;
  transform:translateY(-1px);
  filter:none;
}
.catbar .chip:active{
  transform:translateY(0) scale(.99);
}

/* =========================================================
   HARD OVERRIDES VOOR SPECIFIEKE PAGINA-STIJLEN
   (Zorgen dat ALLE knoppen in lijsten/CTA’s ook inverten)
   ========================================================= */

/* 1) CTA-knoppen in bloglijsten */
.lmj-cta .btn:hover,
.lmj-cta .btn:focus-visible{
  background:#fff !important;
  color:var(--red) !important;
  border-color:var(--red) !important;
  box-shadow:0 9px 22px rgba(160,19,44,.45) !important;
}

/* 2) Andere containers die .btn stijlen – vang ‘alles’ op */
.prose .btn:hover,
.prose .btn:focus-visible,
.section .btn:hover,
.section .btn:focus-visible{
  background:#fff !important;
  color:var(--red) !important;
  border-color:var(--red) !important;
}

/* 3) Veiligheid: anchors die als knop gestijld zijn */
a.btn:hover, a.button:hover, a.btn:focus-visible, a.button:focus-visible{
  background:#fff !important;
  color:var(--red) !important;
  border-color:var(--red) !important;
}

/* ———————————————————————————————
   BLOG DEELKNOPPEN – Men of Courage (ZONDER ICONEN)
   ——————————————————————————————— */
.blog-share {
  margin: 40px 0 50px;
  text-align: center;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.share-label {
  margin: 0 0 14px;
  font-size: 0.95em;
  color: #ccc;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.share-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.share-btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 30px;
  font-size: 0.95em;
  font-weight: 500;
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.15);
}

.share-btn.facebook { color: #e7e7e7; }
.share-btn.facebook:hover { 
  color: #fff; 
  background: rgba(24, 119, 242, 0.2); 
  border-color: #1877f2; 
}

.share-btn.instagram { color: #e7e7e7; }
.share-btn.instagram:hover { 
  color: #fff; 
  background: rgba(225, 48, 108, 0.2); 
  border-color: #e1306c; 
}