/* ===========================
   DariDarek Responsive v2
   Mobile-first, weinig classes, werkt met je huidige markup
   =========================== */

/* Reset & tokens */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
:root{
  --bg:#f6f8fb;
  --card:#fff;
  --text:#0b1320;
  --muted:#475569;
  --primary:#0ea5e9;
  --primary-ink:#fff;
  --secondary:#eef2f7;
  --success:#14854c;
  --danger:#dc2626;
  --ring:#e5ecf6;
  --shadow:0 10px 20px rgba(0,0,0,.06);
  --radius:12px;
  --gap:22px;
  --container:1160px;
  --bp-md:900px;
  --bp-sm:700px;
}
html[dir="rtl"]{ direction:rtl; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}

/* Layout */
.container{ max-width:var(--container); margin:0 auto; padding:0 16px; }
.section{ padding:18px 0; }
.footer{ color:#6b7280; font-size:14px; text-align:center; padding:20px 0; }

/* Responsive grids (index/overzichten) */
.grid,
.houses-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:var(--gap);
  align-items:stretch;                 /* kaarten even hoog */
}
@media (max-width: 900px){
  .grid, .houses-grid{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
}

/* Cards */
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:flex;                        /* flex voor “knop onderaan” */
  flex-direction:column;
  height:100%;
}
.card > img:first-child,
.card .card-media img{
  width:100%; height:auto; aspect-ratio:16/9;
  object-fit:cover; display:block; background:#e9f1f8;
}

/* Binnenkant van de kaart is ook flex – groeit mee */
.pad{
  padding:14px 16px 18px;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;                       /* vul de kaart */
}

/* Tekstsectie groeit → duwt knop omlaag */
.desc,
.card-text,
.card .content{
  color:#334155;
  margin:0 0 12px;
  flex:1 1 auto;
}

.title{ font-weight:800; margin:2px 0 4px; }
.meta{ color:#667085; margin:0 0 6px; display:flex; gap:10px; flex-wrap:wrap; }
.price{ color:var(--success); font-weight:800; margin:4px 0 6px; }

/* Buttons */
.btn{
  display:inline-block; padding:10px 14px; border-radius:10px;
  background:var(--primary); color:var(--primary-ink); font-weight:700;
}
.btn.secondary{ background:var(--secondary); color:#0b1320; }
.btn.danger{ background:var(--danger); color:#fff; }

/* Standaard: knop (of footer) onderaan de kaart via flex */
.card .btn{ margin-top:auto; align-self:flex-start; }
.card-footer{ margin-top:auto; }

/* Afbeeldingen/galerijen */
img{ max-width:100%; height:auto; }
.thumbs,.thumbnails,.gallery{ display:flex; flex-wrap:wrap; gap:10px; }
.thumbs img,.thumbnails img,.gallery img{
  height:110px; width:auto; object-fit:cover; border-radius:8px; display:block; background:#e5ecf6;
}
@media (max-width: 700px){
  .thumbs,.thumbnails,.gallery{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px;
  }
  .thumbs img,.thumbnails img,.gallery img{ width:100%; height:72px; border-radius:6px; }
}

/* Formulieren */
input,select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--ring);
  border-radius:10px; background:#fff; color:inherit; font:inherit;
}
label{ display:block; font-size:13px; color:#556; margin:8px 0 6px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 900px){ .form-row{ grid-template-columns:1fr; } }

/* Voorzieningen (checkboxraster) */
.grid2{ display:grid; grid-template-columns:repeat(2,minmax(220px,1fr)); gap:10px; }
.grid2 label{ display:flex !important; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--ring); border-radius:10px; background:#f9fbff; }
.grid2 input[type="checkbox"]{ margin:0; inline-size:18px; block-size:18px; accent-color:var(--primary); }
@media (max-width:700px){ .grid2{ grid-template-columns:1fr; } }

/* Tabellen (horizontaal scrollbaar op mobiel) */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ width:100%; border-collapse:collapse; }
th,td{ padding:8px 10px; border:1px solid var(--ring); }
th{ background:#f6f8fb; text-align:start; }

/* Kalender (Flatpickr) */
.inline-cal{ margin-top:8px; }
.inline-cal .flatpickr-calendar{
  width:100% !important; max-width:100%;
  border:1px solid var(--ring); border-radius:10px; box-shadow:none;
}
.inline-cal .dayContainer{ min-width:300px; padding:0 8px; }
.flatpickr-day{ line-height:34px; }
.flatpickr-day.bezet-dag{ background:#ffd1d1 !important; border-color:#ff9b9b !important; color:#a40000 !important; }
.flatpickr-day.inRange{ box-shadow: inset 0 0 0 1px #93c5fd; }
.flatpickr-day.startRange,.flatpickr-day.endRange{ background:var(--primary) !important; color:#fff !important; }
@media (max-width:700px){ .inline-cal .dayContainer{ min-width:100%; } }

/* Mijn huizen */
.page-wrap{ max-width:1100px; margin:24px auto; padding:0 16px; }
.huis{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; margin-bottom:16px; }
.huis h2{ margin:0 0 8px; font-size:20px; }
.huis .meta{ color:var(--muted); display:flex; gap:12px; flex-wrap:wrap; margin:0 0 10px; }
.huis .beschrijving{ white-space:pre-wrap; line-height:1.55; margin:8px 0 12px; color:#334155; }
.huis .fotorij{ display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 12px; }
.huis .fotorij img{ height:120px; width:auto; object-fit:cover; border-radius:8px; background:#e5ecf6; display:block; }
.huis .knoppen{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
@media (max-width:700px){
  .page-wrap{ padding-inline:12px; }
  .huis{ padding:14px; }
  .huis .fotorij{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .huis .fotorij img{ width:100%; height:72px; border-radius:6px; }
  .huis .knoppen{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .huis .knoppen .btn{ width:100%; text-align:center; }
}

/* Utilities */
.hidden{ display:none !important; }
.center{ text-align:center; }
.mute{ color:var(--muted); }
.badge{ display:inline-block; padding:4px 8px; font-size:12px; border-radius:8px; background:#eef2f7; color:#0b1320; }
.badge.green{ background:#e6f9ed; color:#146c43; }
.badge.red{ background:#fee2e2; color:#b91c1c; }

/* ultra-compacte ruimte voor de vastgepinde knop */
:where(.houses-grid,.grid) .card{
  position:relative;
  height:100%;
  padding-bottom:44px;   /* was 56px → nu minimalistisch */
}
:where(.houses-grid,.grid) .card .pad{
  padding-bottom:44px;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}
:where(.houses-grid,.grid) .card .btn:last-of-type{
  position:absolute;
  left:10px;             /* dichter tegen de rand */
  bottom:8px;            /* vrijwel geen lucht eronder */
  margin:0 !important;
  transform:translateZ(0);
}
/* --- Strak: knop onderaan met minimale lucht --- */

/* niets extra’s op de kaart zelf */
:where(.houses-grid,.grid) .card{
  position: relative;
  padding-bottom: 0 !important;      /* <— weg met de extra ruimte */
  height: 100%;
}

/* alleen de binnenkant reserveert plek voor de knop */
:where(.houses-grid,.grid) .card .pad{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding-bottom: 44px !important;    /* ruimte = knophoogte (~36px) + 8px */
}

/* pin de “Bekijk huis”-knop écht tegen de onderkant */
:where(.houses-grid,.grid) .card a.btn[href*="huis.php"]{
  position: absolute;
  left: 12px;                         /* match je kaart-padding */
  bottom: 8px;                        /* minimale lucht onder de knop */
  margin: 0 !important;
  transform: translateZ(0);
}

/* als je nog een oude auto-bottom regel hebt, neutraliseer die */
.card .btn{ margin-top: 0; align-self: auto; }
/* Groter logo */
.brand-logo{
  width: 48px;          /* was 32px */
  height: 48px;         /* was 32px */
  object-fit: contain;  /* hou verhouding netjes */
  display: block;
}

.brand-fallback{
  width: 48px;
  height: 48px;
  font-size: 18px;      /* optioneel: iets groter initiaal */
}

/* Op mobiel iets compacter */
@media (max-width: 1024px){
  .brand-logo{ width: 40px; height: 40px; }
  .brand-fallback{ width: 40px; height: 40px; }
}

/* Klein beetje extra ruimte naast het grotere logo (optioneel) */
.brand-link{ gap: 10px; }
:root{
  --logo-size: clamp(36px, 6vw, 120px);
  --brand-gutter: 12px;
  --brand-gap-in-topbar: 14px;
}

/* ===== Header basis ===== */
.site-header{
  position: sticky; top: 0; z-index: 20000;
  background: linear-gradient(90deg,#11a8df,#2ec5f5); color:#fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.site-header .container{ max-width:1160px; margin:0 auto; padding:10px 14px; }
.site-header a{ color:inherit; text-decoration:none; }

/* Logo gedokt links; blijft boven menu maar kan dimmen */
.brand-dock{
  position: absolute;
  left: var(--brand-gutter);
  top: 10px;
  z-index: 20002;
}
.brand-link{ display:flex; align-items:center; gap:8px; }
.brand-logo{
  display:block;
  width: var(--logo-size);
  height: var(--logo-size);
  border-radius: 8px;
  background:#fff;
  object-fit: contain;
}
.brand-fallback{
  width: var(--logo-size); height: var(--logo-size);
  border-radius:8px; background:#fff; color:#0aa3d6;
  display:grid; place-items:center; font-weight:800;
}

/* Topbar: forceer LTR layout zodat hamburger altijd rechts staat */
.topbar{
  direction: ltr;
  display:flex; align-items:center; gap:12px; position: relative;
}
.brand-spacer{
  display:inline-block;
  width: calc(var(--brand-gutter) + var(--logo-size) + var(--brand-gap-in-topbar));
  height: 1px;
}

/* Menu (desktop) */
.navlinks{ display:flex; gap:18px; margin-inline-start:18px; flex:1 1 auto; min-width:0; }
.navlinks a{ padding:8px 10px; border-radius:10px; white-space:nowrap; }
.navlinks a:hover{ background:rgba(255,255,255,.12); }

/* Speciaal: Word host knop */
.navlinks a.nav-host-cta{
  background:#f97316;
  color:#fff;
  padding-inline:16px;
  font-weight:700;
  border-radius:999px;
  box-shadow:0 8px 18px rgba(248,150,70,.45);
}
.navlinks a.nav-host-cta:hover{
  background:#ea580c;
}

/* Taal rechts (desktop) */
.langswitch{ margin-inline-start:auto; display:flex; align-items:center; gap:8px; white-space:nowrap; }
.langswitch .sep{ opacity:.7; } .langswitch .langlabel{ opacity:.9; }

/* Hamburger (desktop hidden, mobiel zichtbaar) */
.nav-toggle{
  display:none; border:0; background:#ffffff; color:#0aa3d6;
  width:40px; height:40px; border-radius:10px; cursor:pointer;
  margin-left:auto;                 /* altijd helemaal rechts */
}
.nav-toggle .bar{ display:block; width:22px; height:2px; margin:5px auto; background:currentColor; border-radius:1px; }

/* Overlay achter menu */
.nav-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:19999; }

/* Hero nooit boven menu */
.hero{ position:relative; z-index:1; }
.hero h1{ color:#ffcc00; margin:0 0 6px; }
.hero p{ color:#f1f5f9; }

/* Hero CTA knoppen */
.hero-actions{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.hero-btn{
  display:inline-block;
  padding:10px 16px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
}
.hero-primary{
  background:#ffffff;
  color:#0c4a6e;
}
.hero-primary:hover{
  background:#e2e8f0;
}
.hero-secondary{
  background:transparent;
  border:1px solid #fff;
  color:#fff;
}
.hero-secondary:hover{
  background:rgba(15,23,42,.15);
}

/* Desktop/Mobiel toggles */
.mobile-only{ display:none; }
.desktop-only{ display:flex; }

/* Tablet wat compacter */
@media (max-width: 1024px){
  .navlinks{ gap: 12px; }
}

/* Telefoon: eventueel alleen logo tonen naast hamburger */
@media (max-width: 560px){
  .brand-spacer{ width: calc(var(--brand-gutter) + var(--logo-size)); }
}

/* ==== MOBIEL MENU (rework) ==== */
@media (max-width: 1280px){
  .nav-toggle{ display:block; }
  .desktop-only{ display:none; }
  .mobile-only{ display:flex; }

  .navlinks{
    position:fixed;
    inset-inline:0;
    top: var(--topbar-h, 56px);
    display:none;
    flex-direction:column;
    gap:0;
    max-height:calc(100vh - var(--topbar-h,56px));
    overflow-y:auto;
    background:#0c1424;
    color:#fff;
    padding:8px 10px 16px;
    box-shadow:0 10px 24px rgba(0,0,0,.25);
    border-radius:0;
    z-index:20001;
  }
  .navlinks.open{ display:flex; }

  .navlinks a{
    display:block;
    padding:14px 16px;
    margin:6px 6px;
    border-radius:8px;
    text-decoration:none;
    background:transparent;
    border:1px solid transparent;
  }
  .navlinks a:hover{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.08);
  }

  /* Op mobiel blijft de host-knop wel iets opvallender */
  .navlinks a.nav-host-cta{
    background:#f97316;
    border-color:rgba(0,0,0,0);
    box-shadow:none;
    text-align:center;
  }

  /* Taalchips bovenin */
  .nav-lang{
    order:-1;
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 8px 6px;
    flex-wrap:wrap;
  }
  .nav-lang-label{ opacity:.8; font-size:14px; }
  .nav-lang .sep{ display:none; }
  .nav-lang a{
    display:inline-block;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    text-decoration:none;
  }

  /* RTL: tekst rechts uitlijnen in het paneel */
  html[dir="rtl"] .navlinks{ direction:rtl; text-align:right; }
  html[dir="rtl"] .nav-lang{ justify-content:flex-start; }
  html[dir="rtl"] .navlinks a{ text-align:right; }
}

/* Logo dimmen als menu open is */
.site-header.menu-open .brand-dock{ filter:brightness(.85); }

/* Extra ruimte tussen menubalk en hero-tekst */
.hero { padding-top: 50px; }
@media (max-width: 700px){
  .hero { padding-top: 50px; }
}

/* ===== Specifiek voor FR: menubalk iets naar links en compacter ===== */
html[lang="fr"] .brand-spacer{
  /* minder ruimte tussen logo en menu, zodat rechts meer plek is */
  width: calc(var(--brand-gutter) + var(--logo-size) * 0.6);
}
html[lang="fr"] .navlinks{
  gap: 14px;
}
html[lang="fr"] .navlinks a{
  padding-inline: 8px;
}
html[lang="fr"] .langswitch{
  gap: 4px;
}