/* ============================================================
   Beatrixpark Restaurant — design tokens & utilities
   Bron: Claude Design handoff (boutique-hotel stijl)
   ============================================================ */

:root{
  --cream:#FBF8F1;
  --cream-band:#F5EFE4;
  --cream-ribbon:#F7F2E7;
  --card:#FFFDF8;
  --ink:#241D15;
  --ink-soft:#3A332A;
  --ink-warm:#4A4237;
  --body:#5F564A;
  --muted:#8A7C69;
  --muted-2:#94866F;
  --gold:#AE8A54;
  --gold-deep:#8A6B3F;
  --gold-light:#C9AC7C;
  --gold-lighter:#D6BE93;
  --btn-cream:#F7F1E6;
  --paper:#FBF6EC;
  --dark:#241D15;
  --dark-text:#EFE7D8;
  --dark-text-2:#D9CDB9;
  --dark-muted:#B7A98F;
  --dark-muted-2:#93866E;
  --dark-gold:#CBA96F;
  --line:rgba(43,34,20,.12);
  --line-soft:rgba(43,34,20,.07);
  --line-mid:rgba(43,34,20,.09);
  --error:#A4552F;
  --serif:'Cormorant Garamond',serif;
  --sans:'Albert Sans',sans-serif;
}

@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--cream);font-family:var(--sans);-webkit-font-smoothing:antialiased}
::selection{background:#E4D3B0;color:#241D15}
a{color:var(--gold-deep)}
img{max-width:100%}

/* ---- layout ---- */
.container{max-width:1320px;margin:0 auto}
.container-narrow{max-width:1200px;margin:0 auto}
.container-wide{max-width:1360px;margin:0 auto}
.section{padding:clamp(72px,10vh,110px) 32px}
.section--lg{padding:clamp(76px,11vh,120px) 32px}
.anchor{scroll-margin-top:120px}

/* ---- typography ---- */
.eyebrow{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.eyebrow--dark{color:var(--dark-gold)}
.eyebrow--sm{font-size:10.5px;letter-spacing:.22em}
.display-1{font-family:var(--serif);font-weight:500;font-size:clamp(46px,5.2vw,78px);line-height:1.04;color:var(--ink);margin:0}
.display-2{font-family:var(--serif);font-weight:500;font-size:clamp(36px,4vw,54px);line-height:1.08;color:var(--ink);margin:0}
.display-3{font-family:var(--serif);font-weight:500;font-size:clamp(34px,3.6vw,48px);line-height:1.08;color:var(--ink);margin:0}
.display-1 em,.display-2 em,.display-3 em{font-style:italic;color:var(--gold)}
.band-dark .display-1,.band-dark .display-2,.band-dark .display-3,.on-dark .display-1,.on-dark .display-2,.on-dark .display-3{color:var(--paper)}
.band-dark .display-1 em,.band-dark .display-2 em,.on-dark .display-1 em,.on-dark .display-2 em{color:var(--gold-lighter)}
.lead{font-family:var(--sans);font-size:17px;line-height:1.75;color:var(--body)}
.body-text{font-family:var(--sans);font-size:16px;line-height:1.75;color:var(--body)}
.serif-title{font-family:var(--serif);color:var(--ink);font-weight:400}

/* ---- buttons ---- */
.btn{display:inline-block;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;text-align:center;padding:17px 30px;border:1px solid transparent;cursor:pointer;transition:all .25s;line-height:normal;border-radius:0}
.btn--md{padding:16px 28px}
.btn--sm{padding:15px 26px;font-size:11.5px}
.btn--xs{padding:12px 20px;font-size:11px}
.btn--primary{background:var(--ink);color:var(--btn-cream);border-color:var(--ink)}
.btn--primary:hover{background:var(--gold);border-color:var(--gold);color:#FFFFFF}
.btn--ghost{background:transparent;color:var(--ink);border-color:rgba(43,34,20,.35)}
.btn--ghost:hover{background:var(--ink);color:var(--btn-cream);border-color:var(--ink)}
.btn--light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--light:hover{background:var(--gold-lighter);border-color:var(--gold-lighter)}
.btn--ghost-light{background:transparent;color:var(--paper);border-color:rgba(251,246,236,.5)}
.btn--ghost-light:hover{border-color:var(--paper);background:rgba(251,246,236,.12);color:var(--paper)}
.btn--block{display:block;width:100%;box-sizing:border-box}

/* underline-link (— pijl-links) */
.link-underline{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);text-decoration:none;border-bottom:1px solid var(--gold-light);padding-bottom:6px;transition:all .25s}
.link-underline:hover{color:var(--ink);border-color:var(--ink)}

/* ---- vormen ---- */
.arch{border-radius:400px 400px 14px 14px}
.arch--16{border-radius:400px 400px 16px 16px}
.arch--lg{border-radius:500px 500px 18px 18px}
.arch-frame{position:relative}
.arch-frame::before{content:"";position:absolute;inset:26px -26px -26px 26px;border:1px solid var(--gold-lighter);border-radius:500px 500px 18px 18px;pointer-events:none}
.arch-frame>img{position:relative;display:block}
.arch-frame--sm::before{inset:24px -24px -24px 24px;border-radius:400px 400px 16px 16px}

.card{background:var(--card);border:1px solid var(--line-mid)}
.card--lift{transition:all .3s}
.card--lift:hover{box-shadow:0 24px 54px -22px rgba(36,29,21,.3);transform:translateY(-4px)}
.zoom-wrap{overflow:hidden}
.zoom-wrap img{transition:transform .6s ease;display:block}
.zoom-wrap:hover img,a:hover>.zoom-wrap img{transform:scale(1.045)}

.band-alt{background:var(--cream-band);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.band-dark{background:var(--dark)}

.diamond{color:var(--gold);font-size:11px}
.diamond--soft{color:var(--gold-light);font-size:9px}

/* ---- formulieren ---- */
.form-label{display:block;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.form-input{width:100%;box-sizing:border-box;padding:13px 14px;border:1px solid rgba(43,34,20,.25);background:var(--cream);font-family:var(--sans);font-size:14px;color:var(--ink);outline:none;border-radius:0;transition:border-color .2s}
.form-input:focus{border-color:var(--gold)}
textarea.form-input{resize:vertical}
select.form-input{appearance:auto}
.form-error{font-family:var(--sans);font-size:13.5px;color:var(--error);background:rgba(164,85,47,.08);border:1px solid rgba(164,85,47,.25);padding:12px 16px;margin:18px 0 0}
.form-check{width:18px;height:18px;accent-color:var(--gold)}

/* ============================================================
   Header
   ============================================================ */
.site-header{position:sticky;top:0;z-index:60;font-family:var(--sans)}
.site-header__bar{background:rgba(252,249,243,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-mid)}
.site-header__topbar{border-bottom:1px solid rgba(43,34,20,.06)}
.site-header__topbar-inner{max-width:1360px;margin:0 auto;padding:8px 32px;display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.site-header__topbar-inner a{color:var(--muted-2);text-decoration:none;transition:color .2s}
.site-header__topbar-inner a:hover{color:var(--ink)}
.site-header__main{max-width:1360px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:20px;height:78px}
.site-header__logo{flex:none;display:flex;align-items:center;text-decoration:none}
.site-header__logo img{height:44px;display:block}
.site-header__nav{display:flex;align-items:center;gap:clamp(16px,2vw,30px)}
.site-header__nav>a,.site-header__more-btn{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink-soft);text-decoration:none;letter-spacing:.03em;padding:6px 0;background:none;border:none;cursor:pointer;transition:color .2s}
.site-header__nav>a:hover,.site-header__more-btn:hover{color:var(--gold)}
.site-header__more{position:relative}
.site-header__more-btn{display:flex;align-items:center;gap:7px}
.site-header__more-btn .caret{font-size:8px;transform:translateY(1px)}
.site-header__dropdown{position:absolute;top:100%;right:0;padding-top:14px;z-index:80;display:none}
.site-header__more:hover .site-header__dropdown,.site-header__more.is-open .site-header__dropdown{display:block}
.site-header__dropdown-panel{background:var(--card);border:1px solid rgba(43,34,20,.1);box-shadow:0 24px 60px -20px rgba(36,29,21,.25);padding:28px 32px;display:grid;grid-template-columns:auto auto;gap:40px;min-width:430px}
.site-header__dropdown-col{display:flex;flex-direction:column;gap:12px}
.site-header__dropdown-col>span{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.site-header__dropdown-col>a{font-size:14px;color:var(--ink-soft);text-decoration:none;white-space:nowrap;transition:color .2s}
.site-header__dropdown-col>a:hover{color:var(--gold)}
.site-header__actions{display:flex;align-items:center;gap:14px;flex:none}
.site-header__burger{background:none;border:none;cursor:pointer;display:none;flex-direction:column;gap:5px;padding:10px 2px}
.site-header__burger span{display:block;width:24px;height:1.6px;background:var(--ink)}
.site-header__burger span:last-child{width:16px}

/* mobiel overlay-menu (fixed t.o.v. viewport, buiten backdrop-filter element) */
.mobile-menu{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;z-index:90;background:var(--cream);overflow-y:auto;font-family:var(--sans);display:none}
.mobile-menu.is-open{display:block}
.mobile-menu__top{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--line-mid)}
.mobile-menu__top img{height:40px}
.mobile-menu__close{background:none;border:none;cursor:pointer;font-size:26px;color:var(--ink);line-height:1;padding:8px}
.mobile-menu__nav{display:flex;flex-direction:column;padding:28px 28px 20px;gap:2px}
.mobile-menu__nav a{font-family:var(--serif);font-size:30px;color:var(--ink);text-decoration:none;padding:10px 0}
.mobile-menu__sub{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line-mid);margin:0 28px;padding:22px 0 28px}
.mobile-menu__sub a{font-size:14px;color:var(--body);text-decoration:none}
.mobile-menu__cta{display:flex;flex-direction:column;gap:12px;padding:0 28px 40px}
.mobile-menu__cta .tel{text-align:center;font-size:14px;color:var(--body);text-decoration:none;padding:6px}

@media (max-width:1119px){
  .site-header__topbar,.site-header__nav,.site-header__actions{display:none}
  .site-header__burger{display:flex}
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{background:var(--dark);color:var(--dark-text);font-family:var(--sans)}
.site-footer__grid{max-width:1320px;margin:0 auto;padding:76px 32px 56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:52px}
.site-footer__logo img{height:58px;display:block}
.site-footer__tagline{margin:20px 0 0;font-size:14.5px;line-height:1.8;color:var(--dark-muted);max-width:300px}
.site-footer__socials{display:flex;flex-wrap:wrap;gap:20px;margin-top:22px}
.site-footer__socials a{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dark-gold);text-decoration:none;border-bottom:1px solid rgba(203,169,111,.45);padding-bottom:5px;transition:all .2s}
.site-footer__socials a:hover{color:var(--dark-text);border-color:var(--dark-text)}
.site-footer__heading{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--dark-gold);margin-bottom:20px}
.site-footer a.plain{color:var(--dark-text-2);text-decoration:none;transition:color .2s}
.site-footer a.plain:hover{color:#FFFFFF}
.site-footer__links{display:flex;flex-direction:column;gap:11px;font-size:14.5px}
.site-footer__bottom{border-top:1px solid rgba(239,231,216,.13)}
.site-footer__bottom-inner{max-width:1320px;margin:0 auto;padding:22px 32px;display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--dark-muted-2)}
.site-footer__bottom-inner a{color:var(--dark-muted-2);text-decoration:none;transition:color .2s}
.site-footer__bottom-inner a:hover{color:var(--dark-text)}

/* openingstijden-tabel */
.hours-grid{display:grid;grid-template-columns:auto 1fr;gap:7px 26px;font-size:14px}
.hours-grid--lg{gap:10px 30px;font-size:15px}