/*
 Theme Name: RBB Core Child (Light, Responsive) — v3.1.3
 Description: GeneratePress child theme met één oranje frame rond de hele site, eigen footer (zonder GeneratePress-credit), schaalbaar logo via Customizer, brede mobiele layout en nette kaarten. Mobiel geoptimaliseerd met smallere padding.
 Template: generatepress
 Version: 3.1.3
*/

:root{
  --bg:#F7F7F7; --surface:#FFFFFF; --ink:#1E1E1E; --muted:#666666;
  --border:#E6EAF0; --brand:#FF7A00; --brand-600:#E86E00; --brand-700:#C75E00;
  --max:1200px;
}

/* Base */
html,body{background:var(--bg);color:var(--ink);}
*,*::before,*::after{box-sizing:border-box;}
.entry-content img, .widget img, .rbb-card img {max-width:100%;height:auto;display:block;}
a{color:var(--brand);text-underline-offset:3px;}
a:hover{color:var(--brand-600);}
h1,h2,h3,h4,h5,h6{color:var(--ink);line-height:1.2;margin:0 0 .5rem 0;}
p{margin:.5rem 0 1rem 0;}

/* Layout: 1 oranje frame rond de héle site */
.is-right-sidebar,.is-left-sidebar{display:none !important;}
.content-area{width:100% !important;}

/* Het frame (border) en centrering zitten ALLEEN op body .site */
body .site{
  max-width:var(--max) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:2px;     /* verlaagd van 5px → 2px */
  padding-right:2px;

  border:2px solid var(--brand);
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  background:var(--surface);
}

/* Geen extra borders op subcontainers */
#page.site,
.site-content,
.site-main,
.grid-container,
.container,
.inside-article,
.inside-page,
.inside-footer-widgets,
.inside-site-info{ 
  /* bewust leeg om dubbele randen te voorkomen */
}

/* Header / Navigation */
.site-header{
  background:var(--surface);
  border:none;
}
.inside-header{gap:16px;}
.site-branding,.inside-header .site-logo{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;}
.site-description{color:var(--muted);margin-top:.1rem;}
.main-navigation{background:transparent !important;}
.main-navigation .main-nav ul li a{color:var(--ink);font-weight:600;padding:10px;}
.main-navigation .main-nav ul li:hover>a,
.main-navigation .main-nav ul li[class*="current"]>a{color:var(--brand);}
.main-navigation ul ul{background:var(--surface);border:1px solid var(--border);}
.main-navigation ul ul li a:hover{background:#FAFAFA;color:var(--brand);}
/* Mobile toggle */
.main-navigation .menu-toggle,
.main-navigation.toggled .main-nav{display:block;}
@media (min-width: 769px){
  .main-navigation .menu-toggle{display:none;}
  .main-navigation .main-nav{display:block;}
}

/* Buttons */
.button,.wp-block-button__link,input[type=submit],button[type=submit]{
  background:var(--brand);color:#fff;border:1px solid var(--brand-600);
  border-radius:12px;padding:.8rem 1.1rem;font-weight:700;text-decoration:none;display:inline-block;
}
.button:hover,.wp-block-button__link:hover,input[type=submit]:hover,button[type=submit]:hover{
  background:var(--brand-600);border-color:var(--brand-700);
}
.button.is-style-outline,.is-style-outline>.wp-block-button__link{
  background:transparent;color:var(--ink);border:2px solid var(--ink);
}
.button.is-style-outline:hover,.is-style-outline>.wp-block-button__link:hover{
  background:var(--brand);color:#fff;border-color:var(--brand-600);
}

/* Cards grid */
.rbb-grid{display:grid;gap:16px;grid-template-columns:1fr;}
@media (min-width:520px){.rbb-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:960px){.rbb-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.rbb-card{
  width:100%;background:var(--surface);border:2px solid var(--border);
  border-radius:16px;box-shadow:0 6px 16px rgba(0,0,0,.06);padding:14px;
}
.rbb-card h3{margin:.5rem 0;}
.rbb-card .meta{color:var(--muted);}

/* Empty state */
.rbb-empty{
  background:var(--surface);border:2px solid var(--brand);border-radius:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.08),0 0 0 4px rgba(255,122,0,.06);
  padding:2rem;text-align:center;
}

/* Forms */
.rbb-aanvraag-form{max-width:860px;margin:0 auto;width:100%;}
.rbb-aanvraag-form fieldset{border:0;margin:0;padding:0;display:grid;gap:.75rem;}
.rbb-aanvraag-form label{display:grid;gap:.25rem;}
input,select,textarea{color:var(--ink);}
::placeholder{color:#9aa1ad;}
input[type=text],input[type=email],input[type=number],input[type=url],input[type=tel],input[type=search],textarea,select{
  width:100%;border:3px solid var(--border);border-radius:10px;padding:.6rem .75rem;background:#FAFAFA;
}
input:focus,textarea:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(255,122,0,.18);outline:none;}
.notice-success{border:2px solid #4caf50;background:#e8f5e9;color:#2e7d32;border-radius:10px;padding:1rem;}

/* Hero */
.rbb-viewport{min-height:calc(100vh - 200px);display:grid;place-items:center;}
.hero-logo{
  display:block;
  margin:0 auto 1.25rem;
  width:clamp(240px, 32vw, 420px); /* groter logo (past zich aan scherm aan) */
  height:auto;                     /* respecteert originele rondheid */
}
.rbb-center-hero{
  position:relative;text-align:center;max-width:780px;margin:0 auto;padding:2rem;
  background:var(--surface);border:2px solid var(--brand);border-radius:18px;box-shadow:0 6px 24px rgba(0,0,0,.08);overflow:visible;
}
/* alleen home */
.home main .site-main > :not(.rbb-viewport){display:none !important;}

/* Footer */
.site-footer{background:var(--surface);color:var(--muted);border-top:none;}
.inside-footer-widgets,.inside-site-info{padding:16px 20px;}

/* Mobiel fixes */
@media (max-width: 520px) {
  .rbb-aanvraag-form {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  .rbb-center-hero {
    padding-left: 0.25rem;   /* 4px */
    padding-right: 0.25rem;  /* 4px */
  }
}
.rbb-koppel-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 1.5rem;
}

.rbb-koppel-image {
  flex: 1 1 45%;
}

.rbb-koppel-info {
  flex: 1 1 45%;
  background: #fff;
  border: 2px solid var(--brand);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

.rbb-koppel-info h3 {
  margin-top: 0;
  color: var(--brand);
}