/* ===================== BraVeBo — main.css (clean) ===================== */
/* Design tokens */
:root{
  --text:#222; --muted:#777; --bg:#f5f5f5; --card:#fff;
  --brand-red:#b11e1e; --brand-red-dark:#8e1717;
  --brand-green:#25D366; --brand-green-dark:#1aa653;
  --brand-blue:#0A66C2;  --brand-blue-dark:#084d92;
  --radius:.75rem; --shadow:0 1px 8px rgba(0,0,0,.06);
  --shadow-hover:0 4px 16px rgba(177,30,30,.35);
}
:root{ color-scheme: light dark; }

/* Base */
html,body{height:100%}
*{box-sizing:border-box}
body{
  margin:0;
  padding:1rem;
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  line-height:1.5;
  background:var(--bg);
  color:var(--text);
}


/* Page containers */
header,main,footer{max-width:1000px; margin:0 auto}
header{ text-align:center; padding-top:2.5rem }
header img{ 
    display:block; 
    margin:0 auto .625rem; 
    max-width:100%; 
    height:auto; 
    /* DIT IS DE CLS FIX: Gebruik de verhouding van 609 op 92 */
    aspect-ratio: 609 / 92; 
}

/* Sections / cards */
.section{
  background:var(--card); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1rem; margin-top:.75rem;
  overflow:hidden; /* keep content inside rounded corners */
}
.section--top{ margin-top:0; padding-top:1rem }

/* Headings & titles */
h1,h2,h3{font-weight:700}
h1,h2{color:var(--brand-red)}
h2{margin:0 0 .5rem}
h3{margin:.75rem 0 .4rem; color:var(--text)}
.bravebo-title{ margin:1rem 0 .25rem; color:var(--brand-red); font-size:1.25rem }
.bravebo-subtitle,.bravebo-claim{ font-weight:700; color:var(--brand-red); font-size:1.125rem; margin:.25rem 0 }
.bravebo-claim{ margin-top:1rem }
.bravebo-services-line{ margin:.3125rem 0 1.5625rem; font-weight:700; color:var(--brand-red); font-size:.9375rem }

/* Language switcher */
.language-switcher{ margin:0 0 1rem auto; width:fit-content }
.language-switcher a{
  display:inline-block; padding:.375rem .625rem; border-radius:.5rem;
  background:var(--brand-red); color:#fff; font-weight:700; text-decoration:none;
  box-shadow:0 1px 4px rgba(0,0,0,.15);
  transition:background-color .25s, box-shadow .25s, transform .15s;
}
.language-switcher a:hover{ background:var(--brand-red-dark) }
.language-switcher a:focus-visible{ outline:2px solid #fff; outline-offset:2px; box-shadow:0 0 0 3px rgba(177,30,30,.6) }

/* Buttons */
a.button, a.button:link, a.button:visited,
button.button, input[type="submit"].button{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; max-width:min(320px, 92vw);
  margin:0 auto; padding:.875rem 1rem; min-height:48px;
  text-align:center; font-size:1rem; border-radius:.625rem;
  background:var(--brand-red); color:#fff; font-weight:700;
  text-decoration:none; cursor:pointer; border:0;
  transition:background-color .25s, box-shadow .25s, transform .15s;
}
a.button:hover,
button.button:hover,
input[type="submit"].button:hover{ background:var(--brand-red-dark); box-shadow:var(--shadow-hover); transform:translateY(-1px) }
a.button:active,
button.button:active,
input[type="submit"].button:active{ transform:translateY(0) }
a.button:focus-visible,
button.button:focus-visible,
input[type="submit"].button:focus-visible{ outline:2px solid #fff; outline-offset:2px; box-shadow:0 0 0 3px rgba(177,30,30,.6) }

/* Keep Contact buttons full width */
:where(.contact-actions) .button{ max-width:none; margin:0 }

/* Color variants */
a.button.whatsapp{ background:var(--brand-green) }
a.button.whatsapp:hover{ background:var(--brand-green-dark) }
a.button.mail{ background:var(--brand-blue) }
a.button.mail:hover{ background:var(--brand-blue-dark) }

/* Inline exception */
a.button.button--inline{
  display:inline-block; width:auto; min-height:auto;
  padding:.375rem .75rem; font-size:.875rem; border-radius:.5rem;
}

/* Generic button group */
.button-actions{
  display:flex; flex-direction:column; gap:.625rem;
}
.button-actions .button{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; padding:.875rem 1rem; min-height:48px;
  text-align:center; font-size:1rem; border-radius:.625rem;
  white-space:normal; text-wrap:balance;
}

/* Contact section */
.section.contact{ padding:1.25rem; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:1rem; }
.section.contact h2{ margin:0 0 .75rem; font-weight:700; display:flex; align-items:center; gap:.5rem; }
.contact-info p{ margin:.25rem 0; }

/* Icons inside buttons */
.button *{ color:inherit; fill:currentColor }

/* Lists */
ul{ padding-left:1.125rem }
.section ul{ margin:.75rem 0 1rem; padding-left:1.25rem }
.section li{ margin:.55rem 0 }

/* Contact actions */
.contact-actions{ display:flex; flex-direction:column; gap:.625rem; margin-bottom:1rem; }
.contact-actions .button{ display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; padding:.875rem 1rem; min-height:48px; text-align:center; font-size:1rem; border-radius:.625rem; white-space:normal; text-wrap:balance; }
.contact-actions .button.mail{ overflow-wrap:anywhere; word-break:break-word; hyphens:auto }

/* --- Footer --- */
.site-footer{
  text-align:center;
  font-size:.9rem;
  color:var(--muted);
  padding:2rem 1rem;
  background:#f9f9f9;
  border-top:1px solid #ddd;
  margin-top: 1.5rem; /* Added generic spacing */
}

/* Slogan line */
.site-footer .footer-slogan{
  color:var(--brand-red);
  display:block;
  margin-bottom:.5rem;
  font-size:1rem;
}

/* “BraVeBo B.V. © …” line spacing */
.site-footer .footer-copy div{
  margin-bottom:.75rem;
}

/* Contact + legal links */
.site-footer a{
  color:inherit;
  text-decoration:none;
}

.site-footer a:hover{
  color:var(--brand-red);
  text-decoration:underline;
}

/* Extra contact line above legal links */
.footer-extra a{
  display:inline-block;
  margin-bottom:.75rem;
}

/* Legal row */
.footer-legal{
  font-size:.85rem;
}

.footer-legal a{
  margin:0 .25rem;
}

/* Utilities */
.visually-hidden{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(1px,1px,1px,1px); border:0; white-space:nowrap; }

/* ===================== Responsive ===================== */
@media (min-width:600px){
  body{ padding:1.5rem }
  .section{ padding:1.25rem; margin-top:1rem }
  .bravebo-title{ font-size:1.625rem }
  .bravebo-claim{ font-size:1.375rem }
  .contact-actions{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.75rem; align-items:stretch; }
}
@media (min-width:992px){
  body{ padding:2.5rem 1.25rem }
  header{ padding-top:3.75rem }
  .section{ padding:1.5625rem; margin-top:1.25rem }
  .section ul{ max-width:90ch }
  .bravebo-title{ font-size:1.875rem }
  .bravebo-subtitle,.bravebo-claim{ font-size:1.5rem }
  .bravebo-claim{ margin-top:1.5rem }
}
@media (min-width:600px){
  .button-actions{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.75rem; align-items:stretch; }
}

/* ===== Media grids ===== */
.media-grid{ display:grid; grid-template-columns:1fr; gap:.75rem; align-items:start; }
@media (min-width:600px){
  .media-grid--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .media-grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
.media-grid__item{ min-width:0; }
.media-grid__item img,.media-grid__item video,.media-grid__item picture,.media-grid__item canvas{ display:block; width:100%; height:auto; max-width:100%; border-radius:.375rem; }
.media-grid__item figure{ margin:0; }
.media-grid__item figcaption{ color:#888; font-size:.95em; text-align:center; margin-top:.25rem; }
.section figure,.section p > img{ max-width:100%; }
.section figure img,.section p > img{ max-width:100%; height:auto; display:block; }

/* ===== Image sizing helpers ===== */
img.content-img--sm{ max-width:240px!important; }
img.content-img--md{ max-width:420px!important; }
img.content-img--lg{ max-width:720px!important; }

/* ===== Contact form ===== */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
}
.form-grid .field { display: flex; flex-direction: column; min-width: 0; }
.form-grid .field-span-2 { grid-column: 1 / -1; }
.form-grid label { font-weight: 600; margin-bottom: .35rem; }
.form-grid textarea { min-height: 8rem; resize: vertical; }
.form-grid .actions { display: flex; gap: .5rem; }

.form-grid input,
.form-grid select,
.form-grid textarea {
  padding: .7rem .85rem;
  border: 1px solid #d7d7d7;
  border-radius: .6rem;
  background: #fff;
  color: var(--text);
  outline: none;

  /* iOS: prevent zoom and keep legible */
  font-size: 16px;
  line-height: 1.4;
  min-height: 44px; /* Apple HIG touch target */
}

/* iOS can still zoom on <select> unless forced */
.form-grid select {
  min-height: 48px;   /* aligns with buttons */
  line-height: 1.3;
  font-size: 16px !important; /* bulletproof for iOS */
}

/* iOS also considers placeholder size */
.form-grid input::placeholder,
.form-grid textarea::placeholder {
  font-size: 16px;
  opacity: .7;
}

/* Buttons in the form — match size so nothing looks smaller */
.form-grid button,
.form-grid .button {
  font-size: 16px;
  line-height: 1.4;
  min-height: 48px;
}

/* Focus states */
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  border-color: var(--brand-red);
  box-shadow: 0 0 0 3px rgba(177,30,30,.15);
}

/* Error state */
.field-error{ margin-top:.35rem; font-size:.9rem; line-height:1.3; color:var(--brand-red); font-weight:600; }
.form-grid .has-error label{ color:var(--brand-red); }
.form-grid .has-error input,
.form-grid .has-error select,
.form-grid .has-error textarea{
  border-color:var(--brand-red);
  box-shadow:0 0 0 3px rgba(177,30,30,.15);
  animation: bravebo-shake .32s ease-out 1;
}
@keyframes bravebo-shake{
  10%,90%{transform:translateX(-1px);}
  20%,80%{transform:translateX(2px);}
  30%,50%,70%{transform:translateX(-4px);}
  40%,60%{transform:translateX(4px);}
}

/* Mobile stacking */
@media (max-width:700px){
  .form-grid{ grid-template-columns:1fr; }
  .form-grid .field-span-2, .form-grid .actions{ grid-column:auto; }
}


/* Notices */
.notice{ padding:.65rem .85rem; border-radius:.6rem; margin:.5rem 0 1rem; font-weight:600; }
.notice.error{ background:rgba(177,30,30,.08); border:1px solid var(--brand-red); color:var(--brand-red); }
.notice.success{ background:rgba(16,185,129,.08); border:1px solid #10b981; color:#059669; }

/* ===================== Dark mode ===================== */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#111; --text:#e6e6e6; --card:#181818; --muted:#bdbdbd;
    --brand-red:#b11e1e; --brand-red-dark:#9b1919;
  }
  body{ background:var(--bg); color:var(--text); }
  .section{ box-shadow:0 1px 8px rgba(0,0,0,.4) }
  .language-switcher a{ box-shadow:none }

  .site-footer{
    background:#151515;
    border-top-color:#222;
    color:var(--muted);
  }
  .site-footer a{ color:var(--muted); }
  .site-footer a:hover{ color:var(--brand-red); }

  .section, .service-card, .setting-card{ background:var(--card); box-shadow:0 1px 8px rgba(0,0,0,.4) }
  .form-grid input,.form-grid select,.form-grid textarea{ background:#121212; border-color:#444; color:var(--text); }
  .form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{ border-color:var(--brand-red); box-shadow:0 0 0 3px rgba(177,30,30,.22); }
  .notice.error{ background:rgba(177,30,30,.15); border-color:var(--brand-red); color:var(--brand-red); }
  .notice.success{ background:rgba(16,185,129,.15); border-color:#10b981; color:#34d399; }
}


/* ===================== Reduced motion ===================== */
@media (prefers-reduced-motion:reduce){
  .language-switcher a, a.button, button.button, input[type="submit"].button{
    transition:none; transform:none!important;
  }
}

.contact-title {
  margin: 0 0 1rem;
  font-size: 1.6rem;
  color: var(--brand-red); /* same as other h2 */
  text-align: center;      /* optional: centers the text */
}

.contact-link {
  color: inherit;            /* inherits brand-red from h2 */
  text-decoration: none;     /* no underline at rest */
  font-weight: 700;
  padding: .1rem .3rem;      /* tiny padding so glow has space */
  border-radius: .25rem;     /* soft corners for glow */
  transition: text-decoration .2s, box-shadow .25s, color .25s;
}

.contact-link:hover {
  text-decoration: underline;
  color: var(--brand-red-dark); /* slightly darker on hover */
  box-shadow: 0 0 12px rgba(177,30,30,.55); /* glow around text */
}

/* Stack tables on small screens (opt-in via .table--stack) */
@media (max-width:640px){
  .section .table.table--stack{ display:block; table-layout:auto; min-width:0 }
  .section .table.table--stack thead{ display:none }
  .section .table.table--stack tbody{ display:block }
  .section .table.table--stack tr{ display:block; border-top:1px solid #e5e5e5; padding:8px 0 }
  .section .table.table--stack td{
    display:grid; grid-template-columns:44% 56%; gap:8px; padding:6px 0;
  }
  .section .table.table--stack td::before{
    content:attr(data-th); font-weight:700; color:var(--text);
  }
  /* If a cell lacks a header label, don’t show an empty before */
  .section .table.table--stack td:not([data-th]), 
  .section .table.table--stack td[data-th=""] { display:block }
  .section .table.table--stack td[data-th=""]::before{ content:none }
}

/* Content tables base */
.section .table-wrap{ margin:1rem 0; overflow-x:auto; -webkit-overflow-scrolling:touch }
.section .table{ width:100%; border-collapse:collapse; table-layout:fixed; min-width:520px }
.section .table th,
.section .table td{
  padding:10px 12px; vertical-align:top; text-align:left;
  white-space:normal; word-break:break-word; overflow-wrap:anywhere;
  hyphens:auto; -webkit-hyphens:auto;
}
.section .table thead th{ font-weight:700 }

/* Don’t let the blank SVG stretch */
.media-grid img[src$="/blank.svg"]{
  width:1px !important;
  height:1px !important;
  max-width:none !important;
  display:block;
  visibility:hidden; /* keep column; hide spacer */
}

/* Optional: on small screens, drop spacer items entirely */
@supports(selector(:has(*))){
  @media (max-width:600px){
    .media-grid__item:has(img[src$="/blank.svg"]){ display:none; }
  }
}

/* --- Hero (2 sizes: H1 big, claim+slogan same) --- */
.bravebo-title{
  font-size: clamp(1.35rem, 3.0vw, 2.05rem);
  line-height: 1.15;
  letter-spacing: .1px;
  margin-bottom: .35rem;
}

.bravebo-claim,
.slogan{
  color: var(--brand-red);
  font-weight: 700;                 /* you load 400 & 700; 800 fakes → use 700 */
  font-size: clamp(1.02rem, 2.0vw, 1.22rem);
  line-height: 1.25;
  display: block;
  text-align: center;
  margin: .4rem auto;
  max-width: 60ch;                  /* comfortable length */
  text-wrap: balance;
  white-space: normal;
}

.slogan{ opacity: .95; }            /* gentle, same size as claim */

.section--top{ margin-bottom: .9rem; }

/* Keep the two lower lines to a single line on wider screens when possible */
@media (min-width: 1024px){
  .bravebo-claim,
  .slogan{ max-width: 72ch; }       /* reduce wrapping on desktop */
}

/* Mobile polish */
@media (max-width: 420px){
  .bravebo-title{ font-size: 1.32rem; }
  .bravebo-claim,
  .slogan{ font-size: 1.03rem; }
}

/* Header-specific spacing */
header .bravebo-claim{ margin-top: .55rem; }

/* Defensive centering in common wrappers */
.section .slogan,
.card .slogan{ text-align: center; }

/* === BraVeBo • Topbar + Fullscreen Menu (clean) ==================== */

/* Bar height used to offset the page content */
:root { --bb-topbar-h: 56px; }

/* Fixed top bar: [Lang] | [Call] | [MENU] */
.bb-topbar{
  position: fixed; top: 0; left: 0; right: 0; z-index: 1100;
  height: var(--bb-topbar-h);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  column-gap: .5rem;
  padding: 0 .75rem;               /* exact height (no vertical padding) */
  background:#fff; box-shadow:0 1px 8px rgba(0,0,0,.06);
}

/* Left cluster (language chip) */
.bb-topbar__left{ display:flex; align-items:center; gap:.5rem; }

/* Language chip + MENU button share the same visual style */
.bb-chip,
.bb-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:.35rem .75rem; border-radius:.55rem; border:0;
  background:var(--brand-red); color:#fff; font-weight:700; text-decoration:none;
  box-shadow:0 1px 4px rgba(0,0,0,.15);
}
.bb-chip:hover, .bb-btn:hover{ background:var(--brand-red-dark) }
.bb-chip:focus-visible, .bb-btn:focus-visible{
  outline:2px solid #fff; outline-offset:2px; box-shadow:0 0 0 3px rgba(177,30,30,.6);
}

/* Center CTA (phone) — always show number; shrink only on ultra-tiny */
.bb-cta{
  justify-self:center;
  display:inline-flex; align-items:center; gap:.45rem;
  min-height:44px; padding:.5rem .75rem; border-radius:.55rem;
  background:var(--brand-red); color:#fff; font-weight:700; text-decoration:none;
  white-space:nowrap; box-shadow:0 1px 4px rgba(0,0,0,.15);
}
.bb-cta:hover{ background:var(--brand-red-dark) }
.bb-cta:focus-visible{ outline:2px solid #fff; outline-offset:2px; box-shadow:0 0 0 3px rgba(177,30,30,.6) }
.bb-cta__text{ display:inline; font-variant-numeric:tabular-nums; }
@media (max-width:340px){
  .bb-cta{ padding:.45rem .6rem; }
  .bb-cta__text{ display:none; }     /* icon-only below ~iPhone 5/SE width */
}

/* Keep page content below the fixed bar */
body{ padding-top: calc(var(--bb-topbar-h) + 10px); }

/* Fullscreen overlay menu */
.bb-menu[hidden]{ display:none!important; }
.bb-menu{
  position:fixed; inset:0; z-index:1200; display:grid; place-items:center;
  background:rgba(255,255,255,.97);
}
.bb-menu__panel{
  width:min(680px,92vw); max-height:min(86vh,820px);
  background:#fff; border-radius:.9rem; box-shadow:0 10px 40px rgba(0,0,0,.2);
  display:flex; flex-direction:column; overflow:auto;
}
.bb-menu__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1rem; border-bottom:1px solid #eee;
}
.bb-menu__title{ margin:0; font-size:1.2rem; color:var(--brand-red); }
.bb-menu__close{ border:0; background:transparent; font-size:1.4rem; cursor:pointer; color:var(--brand-red) }
.bb-menu__nav{ display:grid; gap:.6rem; padding:1rem }
.bb-menu__link{
  display:block; padding:.85rem 1rem; border-radius:.6rem; text-decoration:none; font-weight:700;
  color:#fff; background:var(--brand-red); text-align:center;
}
.bb-menu__link:hover{ background:var(--brand-red-dark) }

/* Divider between main menu and legal links */
.bb-menu__divider{
  border:0;
  border-top:1px solid rgba(0,0,0,.15);
  margin:1.25rem 0 .6rem;
}

/* "Juridisch" / "Legal" label */
.bb-menu__section-label{
  display:block;
  padding:0 1rem;              /* align with buttons */
  margin-bottom:.35rem;
  font-size:.8rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  text-align:left;
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  .bb-topbar{ background:#181818; box-shadow:0 1px 8px rgba(0,0,0,.4) }
  .bb-menu{ background:rgba(0,0,0,.55) }
  .bb-menu__panel{ background:#181818 }
  .bb-menu__header{ border-bottom-color:#2a2a2a }
}

@media (prefers-color-scheme: dark){
  .bb-menu__divider{ border-top-color:#333; }
  .bb-menu__section-label{ color:var(--muted); }
}

/* Remove any leftover gap from header/hero */
header{ padding-top:0 !important; }
header > .section--top{ margin-top:0 !important; }

/* --- Normalize topbar text sizes --- */
.bb-topbar { 
  font-size: 1rem;             /* single base size for the bar */
  -webkit-text-size-adjust: 100%; /* stop iOS from “helpfully” resizing */
}

.bb-chip,
.bb-cta,
.bb-btn {
  font-size: inherit;          /* all use the same size */
  line-height: 1.1;            /* tight but readable */
  font-weight: 700;
}

/* make the phone number match too */
.bb-cta__text { 
  font-size: inherit; 
  white-space: nowrap;         /* keep number on one line */
}

/* (optional) slightly larger on wider screens */
@media (min-width: 600px){
  .bb-topbar { font-size: 1.0625rem; } /* ~17px */
}

/* (optional) teeny squeeze on very small phones */
@media (max-width: 340px){
  .bb-topbar { font-size: 0.95rem; }
}