/* Pont de la Planque — handgeschreven stylesheet (geen buildstap nodig).
   Rustige, natuurlijke look & feel: aardetinten (bruin/groen/warm). */

:root {
    --sand-50:#faf7f1; --sand-100:#f3ece0; --sand-200:#e6d8c3; --sand-300:#d6bd9b;
    --clay-500:#a9774e; --clay-600:#8c5e3c; --clay-700:#6f4a30; --clay-800:#543828;
    --moss-400:#8a9a5b; --moss-500:#6e7f45; --moss-600:#566535; --moss-700:#41502a;
    --ink:#2d2620;
    --shadow:0 6px 24px rgba(84,56,40,.12);
    --radius:12px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    margin:0; color:var(--ink); background:var(--sand-50);
    font-family:"Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    line-height:1.65; font-size:17px;
}
h1,h2,h3,h4 { font-family:"Cormorant Garamond", Georgia, serif; font-weight:600; line-height:1.15; color:var(--clay-800); margin:0 0 .4em; }
h1 { font-size:2.6rem; } h2 { font-size:2rem; } h3 { font-size:1.4rem; }
p { margin:0 0 1em; }
a { color:var(--clay-600); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; height:auto; display:block; }

.container { max-width:1120px; margin:0 auto; padding:0 20px; }

/* ---- Header ---- */
.site-header { background:var(--sand-50); border-bottom:1px solid var(--sand-200); position:sticky; top:0; z-index:50; }
.header-inner { display:flex; align-items:center; gap:16px; padding:14px 20px; }
.brand { display:flex; flex-direction:column; margin-right:auto; }
.brand-name { font-family:"Cormorant Garamond", serif; font-size:1.6rem; color:var(--clay-700); font-weight:600; }
.brand-sub { font-size:.8rem; color:var(--moss-600); }
.lang-switch { display:flex; gap:6px; }
.flag { font-size:1.15rem; line-height:1; padding:4px 5px; border-radius:6px; opacity:.55; filter:grayscale(.4); }
.flag.active, .flag:hover { opacity:1; filter:none; background:var(--sand-100); text-decoration:none; }
.nav-toggle { display:none; background:none; border:0; font-size:1.6rem; color:var(--clay-700); cursor:pointer; }

.site-nav { background:var(--clay-700); }
.nav-inner { display:flex; flex-wrap:wrap; gap:4px; padding:0 20px; }
.site-nav a { color:var(--sand-100); padding:12px 14px; font-size:.95rem; font-weight:600; border-bottom:3px solid transparent; }
.site-nav a:hover { background:var(--clay-800); text-decoration:none; }
.site-nav a.active { border-bottom-color:var(--moss-400); }

/* ---- Hero ---- */
.hero { position:relative; min-height:62vh; display:flex; align-items:flex-end;
    background:linear-gradient(rgba(45,38,32,.15), rgba(45,38,32,.55)), var(--sand-300) center/cover no-repeat; color:#fff; }
.hero.has-img { background-image:linear-gradient(rgba(45,38,32,.15), rgba(45,38,32,.6)), var(--hero-img); }
.hero-inner { padding:48px 20px 56px; max-width:1120px; margin:0 auto; width:100%; }
.hero h1 { color:#fff; font-size:3rem; text-shadow:0 2px 12px rgba(0,0,0,.35); }
.hero p { font-size:1.25rem; max-width:36ch; text-shadow:0 1px 8px rgba(0,0,0,.4); }

/* ---- Sections ---- */
section.block { padding:56px 0; }
section.block.alt { background:var(--sand-100); }
.lead { font-size:1.15rem; color:var(--clay-600); }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.card { background:#fff; border:1px solid var(--sand-200); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); }
.card img { border-radius:8px; margin-bottom:14px; }
.figure { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--sand-200); aspect-ratio:4/3; }
.figure img { width:100%; height:100%; object-fit:cover; }
.prose { max-width:70ch; }
.prose .body { white-space:pre-line; }

/* ---- Buttons ---- */
.btn { display:inline-block; background:var(--moss-500); color:#fff; padding:13px 26px; border-radius:999px;
    font-weight:700; border:0; cursor:pointer; font-size:1rem; transition:background .15s; }
.btn:hover { background:var(--moss-600); text-decoration:none; }
.btn.secondary { background:var(--clay-600); }
.btn.secondary:hover { background:var(--clay-700); }
.btn.btn-small { padding:9px 18px; font-size:.9rem; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }

/* ---- Prijzentabel ---- */
.price-table { width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.price-table th, .price-table td { text-align:left; padding:12px 16px; border-bottom:1px solid var(--sand-200); }
.price-table th { background:var(--clay-700); color:var(--sand-100); font-weight:600; }
.price-table td.amount { text-align:right; font-weight:700; white-space:nowrap; }
.price-note { color:var(--moss-600); font-style:italic; }

/* ---- Boekingswidget ---- */
.booking { background:#fff; border:1px solid var(--sand-200); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px; }
.field { margin-bottom:16px; }
.field label { display:block; font-weight:600; margin-bottom:5px; color:var(--clay-700); font-size:.95rem; }
.field input, .field select, .field textarea {
    width:100%; padding:11px 13px; border:1px solid var(--sand-300); border-radius:8px; font:inherit; background:var(--sand-50); }
.field input:focus, .field select:focus, .field textarea:focus { outline:2px solid var(--moss-400); border-color:var(--moss-400); }
.row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.row-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.options-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px 24px; }
.option { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px dashed var(--sand-200); }
.option .opt-name { font-size:.92rem; }
.option input[type=number] { width:72px; }
.availability { padding:12px 16px; border-radius:8px; font-weight:600; margin:8px 0 16px; }
.availability.ok { background:#e9f0db; color:var(--moss-700); }
.availability.no { background:#f6e3da; color:#8a3b22; }
.availability.neutral { background:var(--sand-100); color:var(--clay-700); }
.summary { background:var(--sand-100); border-radius:8px; padding:16px; margin:16px 0; }
.summary .line { display:flex; justify-content:space-between; padding:3px 0; }
.summary .total { border-top:1px solid var(--sand-300); margin-top:8px; padding-top:8px; font-weight:700; font-size:1.1rem; }
.summary .deposit { color:var(--moss-700); font-weight:700; }
.pay-options label { display:flex; align-items:center; gap:8px; font-weight:400; margin-bottom:8px; }

.alert { padding:14px 18px; border-radius:8px; margin:16px 0; }
.alert.error { background:#f6e3da; color:#8a3b22; border:1px solid #e0b9a6; }
.alert.success { background:#e9f0db; color:var(--moss-700); border:1px solid #c6d4a3; }
.alert ul { margin:6px 0 0 18px; }

.page-head { background:var(--clay-700); color:var(--sand-100); padding:40px 0; }
.page-head h1 { color:#fff; margin:0; }
.muted { color:var(--moss-600); }

/* ---- Footer ---- */
.site-footer { background:var(--clay-800); color:var(--sand-100); margin-top:64px; padding:40px 0 20px; }
.site-footer a { color:var(--sand-200); }
.footer-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.site-footer h4 { color:var(--sand-100); font-family:inherit; font-size:1.05rem; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.15); margin-top:28px; padding-top:16px; color:var(--sand-300); }

/* ---- Responsive ---- */
@media (max-width:860px) {
    h1 { font-size:2.1rem; } .hero h1 { font-size:2.3rem; }
    .grid-2, .grid-3, .footer-grid, .row, .row-3, .options-grid { grid-template-columns:1fr; }
    .nav-toggle { display:block; }
    .site-nav { display:none; }
    body.nav-open .site-nav { display:block; }
    .nav-inner { flex-direction:column; }
}