/* RRH compactere desktopopmaak – 12 augustus 2026
   Wordt via script.js op alle NL-pagina's geladen.
   Bestaande styles.css blijft onaangetast. */

@media (min-width: 901px){
  :root{
    --header-h:126px !important;
    --footer-h:88px !important;
  }

  body{
    font-size:18px !important;
  }

  .site-header,
  .nav{
    height:var(--header-h) !important;
    min-height:var(--header-h) !important;
  }

  .nav{
    width:min(1500px,calc(100% - 54px)) !important;
  }

  /* Nieuw icon + bedrijfsnaam ernaast */
  .brand{
    min-width:350px !important;
    gap:15px !important;
  }
  .brand-symbol{
    width:86px !important;
    height:86px !important;
    object-fit:contain !important;
  }
  .brand-name{
    font-size:1.72rem !important;
    letter-spacing:.20em !important;
  }
  .brand-sub{
    margin-top:.42rem !important;
    font-size:.73rem !important;
    letter-spacing:.18em !important;
  }

  nav{
    gap:1.35rem !important;
  }
  nav a{
    font-size:.95rem !important;
  }
  nav .btn{
    padding:.78rem 1.25rem !important;
    font-size:.94rem !important;
  }

  /* Binnenpagina's compacter zodat bij 100% meer in beeld blijft */
  .page{
    min-height:calc(100vh - var(--header-h) - var(--footer-h)) !important;
  }
  .page-hero{
    padding:25px 0 18px !important;
  }
  .page-hero .container{
    width:min(1400px,calc(100% - 70px)) !important;
    gap:3.2rem !important;
  }
  .page-hero h1,
  .contact-page .page-hero h1{
    font-size:clamp(2.75rem,3.55vw,4.15rem) !important;
    line-height:1.04 !important;
    max-width:820px !important;
  }
  .page-hero p,
  .approach-intro{
    font-size:1rem !important;
    line-height:1.5 !important;
  }
  .eyebrow{
    font-size:.84rem !important;
  }

  .section{
    padding:24px 0 28px !important;
  }
  .sos-journey{
    padding:22px 0 27px !important;
  }
  .sos-journey .container,
  .section .container{
    width:min(1400px,calc(100% - 70px)) !important;
  }

  .cards-3{
    gap:1rem !important;
  }
  .sos-journey .card{
    min-height:0 !important;
    padding:1.25rem 1.25rem 1.2rem 5.35rem !important;
  }
  .sos-number{
    left:1.15rem !important;
    top:1.25rem !important;
    width:48px !important;
    height:48px !important;
    font-size:2rem !important;
  }
  .sos-journey .card h3{
    font-size:1.55rem !important;
    margin:.08rem 0 .35rem !important;
  }
  .sos-journey .card p,
  .sos-journey .card li{
    font-size:.93rem !important;
    line-height:1.42 !important;
  }
  .sos-journey .card ul{
    margin-top:.55rem !important;
  }

  .outcome{
    min-height:145px !important;
    padding:1.15rem 1.25rem !important;
  }
  .outcome h3{
    font-size:1.48rem !important;
  }
  .outcome p{
    font-size:.94rem !important;
  }

  .service{
    min-height:0 !important;
    padding:1.15rem 1.25rem !important;
  }
  .service h3{
    font-size:1.45rem !important;
  }
  .service p,
  .service li{
    font-size:.91rem !important;
    line-height:1.4 !important;
  }

  .timeline-item{
    padding:.7rem 0 !important;
  }
  .timeline-item .year{
    font-size:1.18rem !important;
  }
  .timeline-item h3{
    font-size:1.3rem !important;
  }
  .timeline-item p{
    font-size:.92rem !important;
  }

  .conversion-cta{
    padding:22px 0 !important;
  }
  .conversion-cta h2{
    font-size:2rem !important;
  }
  .conversion-cta p{
    font-size:.95rem !important;
  }

  /* Home: rustiger en passend in 100% viewport */
  .home-page .home-hero{
    min-height:calc(100vh - var(--header-h) - var(--footer-h)) !important;
    height:auto !important;
    padding:18px 0 !important;
  }
  .home-page .hero-inner{
    width:min(1400px,calc(100% - 70px)) !important;
  }
  .home-page .hero-copy{
    max-width:860px !important;
  }
  .home-page .home-hero h1{
    font-size:clamp(2.9rem,4vw,4.25rem) !important;
    line-height:1.04 !important;
    max-width:790px !important;
  }
  .home-page .home-hero .lead{
    max-width:860px !important;
    font-size:1.03rem !important;
    line-height:1.48 !important;
  }
  .home-page .home-hero .eyebrow{
    font-size:.81rem !important;
    color:#e1bd68 !important;
  }
  .home-page .hero-actions{
    margin-top:1.35rem !important;
  }
  .home-page .hero-actions .btn{
    padding:.78rem 1.2rem !important;
  }
  .home-page .hero-portrait{
    max-height:480px !important;
    object-fit:cover !important;
  }

  .footer{
    min-height:var(--footer-h) !important;
  }
  .footer--full{
    padding:.65rem 0 !important;
  }
  .footer-link--primary::before{
    width:42px !important;
    height:42px !important;
    flex-basis:42px !important;
  }
  .footer-link--primary{
    font-size:.88rem !important;
  }
}

@media (min-width: 901px) and (max-height: 760px){
  :root{
    --header-h:112px !important;
    --footer-h:78px !important;
  }
  .brand-symbol{
    width:76px !important;
    height:76px !important;
  }
  .brand-name{font-size:1.55rem !important}
  .page-hero{padding:18px 0 13px !important}
  .page-hero h1{font-size:clamp(2.5rem,3.25vw,3.7rem) !important}
  .sos-journey{padding:16px 0 20px !important}
  .sos-journey .card{padding-top:1rem !important;padding-bottom:1rem !important}
  .home-page .home-hero{padding:12px 0 !important}
  .home-page .hero-portrait{max-height:430px !important}
}

/* Mobiel: bedrijfsnaam naast het icon behouden, zonder de header te laten overlopen */
@media (max-width: 900px){
  .brand-symbol{
    object-fit:contain !important;
  }
}


/* SITEWIDE V24 — compacte footer en meer zichtbaar bij 100% */
.footer.footer--compact-rrh{
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  background:#0f4a3f !important;
}

.footer--compact-rrh .rrh-footer-inner{
  width:min(1400px,calc(100% - 70px));
  margin:0 auto;
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  color:#fff;
}

.footer--compact-rrh .rrh-footer-brand{
  display:flex;
  flex-direction:column;
  gap:.16rem;
  line-height:1.15;
}

.footer--compact-rrh .rrh-footer-brand strong{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1rem;
  font-weight:700;
  color:#fff;
}

.footer--compact-rrh .rrh-footer-brand span{
  font-size:.76rem;
  color:rgba(255,255,255,.72);
}

.footer--compact-rrh .rrh-footer-links{
  display:flex !important;
  align-items:center;
  justify-content:flex-end;
  gap:1.35rem !important;
  flex-wrap:wrap;
}

.footer--compact-rrh .rrh-footer-links a{
  font-size:.8rem !important;
  font-weight:500 !important;
  color:#fff !important;
  text-decoration:none !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
}

.footer--compact-rrh .rrh-footer-links a:hover{
  text-decoration:underline !important;
  text-underline-offset:3px;
}

/* Verwijder oude footer-iconen/opmaak als die nog via styles.css meekomen */
.footer--compact-rrh .footer-grid,
.footer--compact-rrh .footer-links,
.footer--compact-rrh .footer-link{
  display:none !important;
}

/* Iets meer bruikbare verticale ruimte op alle korte desktop-pagina's */
@media (min-width:901px){
  :root{
    --footer-h:74px !important;
  }

  .page-hero{
    padding-top:16px !important;
    padding-bottom:10px !important;
  }

  .section{
    padding-top:16px !important;
    padding-bottom:18px !important;
  }

  .conversion-cta{
    padding-top:9px !important;
    padding-bottom:10px !important;
  }

  .home-page .home-hero{
    min-height:calc(100vh - var(--header-h) - 74px) !important;
  }
}

@media (max-width:900px){
  .footer--compact-rrh .rrh-footer-inner{
    width:min(100% - 32px,1400px);
    min-height:0;
    padding:16px 0;
    flex-direction:column;
    align-items:flex-start;
    gap:.8rem;
  }

  .footer--compact-rrh .rrh-footer-links{
    justify-content:flex-start;
    gap:.8rem 1rem !important;
  }
}


/* V25 — footer op alle hoofd-pagina's op exact dezelfde hoogte bij 100% desktop */
@media (min-width:901px){
  html, body{
    min-height:100% !important;
  }

  body{
    min-height:100vh !important;
    display:grid !important;
    grid-template-rows:var(--header-h) minmax(0,1fr) 74px !important;
    overflow:hidden !important;
  }

  .site-header{
    grid-row:1 !important;
  }

  body > main{
    grid-row:2 !important;
    min-height:0 !important;
    height:auto !important;
    overflow:hidden !important;
  }

  .footer.footer--compact-rrh{
    grid-row:3 !important;
    height:74px !important;
    min-height:74px !important;
    align-self:end !important;
  }

  .footer--compact-rrh .rrh-footer-inner{
    height:74px !important;
    min-height:74px !important;
  }

  /* Home moet exact in de middenrij passen */
  .home-page .home-hero{
    min-height:0 !important;
    height:100% !important;
  }

  /* Korte contentpagina's gebruiken de beschikbare middenrij */
  .page{
    min-height:0 !important;
    height:100% !important;
    overflow:hidden !important;
  }

  /* Expertise iets compacter zodat CTA niet achter footer verdwijnt */
  .expertise-page .expertise-hero{
    padding-top:5px !important;
    padding-bottom:4px !important;
  }
  .expertise-page .expertise-hero h1{
    font-size:clamp(2.05rem,2.35vw,2.65rem) !important;
  }
  .expertise-page .expertise-section{
    padding-top:5px !important;
    padding-bottom:5px !important;
  }
  .expertise-page .expertise-grid{
    gap:.55rem .8rem !important;
  }
  .expertise-page .expertise-card{
    min-height:112px !important;
    padding:.62rem .9rem !important;
  }
  .expertise-page .expertise-card h3{
    font-size:1.08rem !important;
    margin-bottom:.18rem !important;
  }
  .expertise-page .expertise-card li{
    font-size:.76rem !important;
    line-height:1.22 !important;
  }
  .expertise-page .expertise-bottom{
    padding:3px 0 4px !important;
  }
  .expertise-page .expertise-bottom h2{
    font-size:1.15rem !important;
  }
  .expertise-page .expertise-bottom .btn{
    padding:.48rem .78rem !important;
    font-size:.80rem !important;
  }

  /* Aanpak / Resultaten / Ervaring iets strakker, footer blijft op dezelfde lijn */
  .approach-page .conversion-cta,
  .results-page .results-cta,
  .experience-page .experience-bottom{
    flex-shrink:0 !important;
  }
}


/* RRH portretten – warme bruine rand */
.home-page .hero-portrait{
  border:4px solid #8f6748 !important;
  border-radius:28px !important;
}

.about-page .about-portrait{
  border:4px solid #8f6748 !important;
  border-radius:28px !important;
}