/* ==========================================================
   Grillroom Yusuf Zuidwolde – huisstijl bovenop Bootstrap 5
   ========================================================== */

:root {
  --white: #ffffff;
  --oak: #f5efe7;        /* licht eikenhout (folder) */
  --oak-2: #ebe1d4;
  --ink: #241a17;
  --ink-2: #6b5e57;
  --line: #e6dcd1;
  --red: #8a1f1b;        /* ossenbloedrood (folder & luifel) */
  --red-dark: #6d1613;
  --red-soft: #f6e6e3;
  --ember: #e0652b;      /* gloed van de grill – spaarzaam gebruikt */
  --green: #3b7f37;

  --display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --script: "Yellowtail", "Brush Script MT", cursive;

  --nav-h: 76px;         /* wordt door js/main.js exact gemeten */
  --callbar-h: 0px;
  --hero-h: calc(100vh - var(--nav-h) - var(--callbar-h));

  --bs-body-font-family: var(--body);
  --bs-body-bg: var(--white);
  --bs-body-color: var(--ink);
  --bs-border-color: var(--line);
  --bs-link-color: var(--red);
  --bs-link-color-rgb: 138, 31, 27;
  --bs-link-hover-color: var(--red-dark);
  --bs-link-hover-color-rgb: 109, 22, 19;
  --bs-focus-ring-color: rgba(138, 31, 27, .3);
}
@supports (height: 100svh) { :root { --hero-h: calc(100svh - var(--nav-h) - var(--callbar-h)); } }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 8px); }
body { background: var(--white); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Paginamarge gelijk aan de breedste rij-afstand, zodat niets buiten beeld valt */
.container-xxl { --bs-gutter-x: 3rem; }
@media (max-width: 575.98px) { .container-xxl { --bs-gutter-x: 2.5rem; } .row.g-5, .row.menu-body { --bs-gutter-x: 2.5rem; } }
@media (min-width: 1700px) { .container-xxl { max-width: 1520px; } html { font-size: 17px; } }
@media (min-width: 2200px) { .container-xxl { max-width: 1720px; } html { font-size: 18px; } }

.skip-link { position: absolute; left: 12px; top: -48px; z-index: 2000; background: var(--red); color: #fff; padding: 10px 14px; border-radius: 8px; text-decoration: none; }
.skip-link:focus { top: 12px; color: #fff; }

.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section-oak { background: var(--oak); }
.kicker { display: inline-flex; align-items: center; gap: .5rem; font: 700 .8125rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: .875rem; }
.kicker::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: var(--ember); }
.h2 { font: 800 clamp(2rem, 4.2vw, 3.1rem)/1.02 var(--display); letter-spacing: -.02em; }
.lede { color: var(--ink-2); max-width: 58ch; font-size: 1.0625rem; }
.lede + .lede { margin-top: 1rem; }
.note { margin-top: 1rem; font-size: .875rem; color: var(--ink-2); }

/* ---------- Knoppen ---------- */
.btn { --bs-btn-padding-x: 1.3rem; --bs-btn-padding-y: .8rem; --bs-btn-font-weight: 700; --bs-btn-border-radius: 12px; font-family: var(--body); display: inline-flex; align-items: center; justify-content: center; gap: .55rem; white-space: nowrap; }
.btn svg { flex: none; }
.btn-red { --bs-btn-bg: var(--red); --bs-btn-color: #fff; --bs-btn-border-color: var(--red);
  --bs-btn-hover-bg: var(--red-dark); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--red-dark);
  --bs-btn-active-bg: var(--red-dark); --bs-btn-active-color: #fff; --bs-btn-active-border-color: var(--red-dark); }
.btn-outline { --bs-btn-color: var(--ink); --bs-btn-border-color: var(--line); --bs-btn-bg: var(--white);
  --bs-btn-hover-bg: var(--oak); --bs-btn-hover-color: var(--ink); --bs-btn-hover-border-color: var(--oak-2);
  --bs-btn-active-bg: var(--oak-2); --bs-btn-active-color: var(--ink); }

/* ---------- Navigatie ---------- */
.site-nav { background: rgba(255, 255, 255, .95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding-block: .6rem; }
.wordmark { display: inline-flex; align-items: baseline; gap: .6rem; text-decoration: none; color: var(--ink); line-height: 1; }
.wordmark:hover { color: var(--ink); }
.wordmark .script { font: 400 2.2rem/1 var(--script); color: var(--red); transform: translateY(2px); }
.wordmark small { font: 700 .6875rem/1.25 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.site-nav .nav-link { color: var(--ink); font-weight: 600; padding: .55rem .85rem !important; border-radius: 10px; }
.site-nav .nav-link:hover, .site-nav .nav-link:focus { background: var(--oak); color: var(--red); }
.site-nav .navbar-toggler { border: 1px solid var(--line); border-radius: 12px; padding: .5rem .65rem; }
.site-nav .navbar-toggler:focus { box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
@media (max-width: 1199.98px) {
  .site-nav .navbar-collapse { padding-block: .75rem .5rem; }
  .site-nav .nav-link { padding: .8rem .25rem !important; font-size: 1.1rem; border-bottom: 1px solid var(--oak-2); border-radius: 0; }
  .site-nav .nav-cta { margin-top: 1rem; width: 100%; }
}
@media (max-width: 400px) {
  .wordmark .script { font-size: 1.9rem; }
  .wordmark small { font-size: .625rem; letter-spacing: .12em; }
}

/* ---------- Hero ----------
   Vult altijd precies het zichtbare scherm (min menubalk, op mobiel min belbalk). */
.hero { position: relative; height: var(--hero-h); min-height: 360px; overflow: hidden; background: var(--oak); }
.hero-photo { position: absolute; inset: 0; margin: 0; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%; display: block; }
.hero > .container-xxl { position: relative; height: 100%; display: flex; align-items: flex-end; padding-block: clamp(1rem, 4vh, 2.75rem); }
.hero-card { background: var(--white); border-radius: 22px; padding: clamp(1.25rem, 3vh, 2.25rem) clamp(1.25rem, 2.5vw, 2.25rem); width: min(100%, 540px); box-shadow: 0 30px 70px -30px rgba(36, 26, 23, .45); }
.status { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; color: var(--green); background: #eef6ec; padding: .35rem .75rem .35rem .6rem; border-radius: 999px; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(59, 127, 55, .18); }
.status.is-dicht { color: var(--red); background: var(--red-soft); }
.status.is-dicht::before { box-shadow: 0 0 0 4px rgba(138, 31, 27, .15); }
.hero .eyebrow { display: block; margin-top: clamp(.6rem, 2vh, 1.1rem); font: 700 .8125rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.hero h1 { font: 400 clamp(3.4rem, min(7vw, 13vh), 6.5rem)/.95 var(--script); color: var(--red); margin-top: .1rem; }
.hero .tagline { font: 700 clamp(1.15rem, min(2vw, 3.4vh), 1.6rem)/1.2 var(--display); letter-spacing: -.01em; margin-top: .35rem; }
.hero .intro { color: var(--ink-2); margin-top: clamp(.5rem, 1.6vh, .9rem); font-size: clamp(.95rem, 1.9vh, 1.0625rem); max-width: 44ch; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: clamp(.8rem, 2.4vh, 1.4rem); }
.hero .facts { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: clamp(.8rem, 2.2vh, 1.25rem); padding-top: clamp(.6rem, 1.8vh, 1rem); border-top: 1px dashed var(--line); font-size: .875rem; color: var(--ink-2); }
.hero .facts b { color: var(--ink); }

@media (min-width: 1400px) { .hero-card { width: min(100%, 36vw); } .hero .intro { max-width: 52ch; } }
@media (min-width: 992px) and (max-height: 700px) { .hero .facts { display: none; } }
@media (min-width: 992px) and (max-height: 580px) { .hero .intro { display: none; } }

/* Telefoon & tablet: foto boven, kaart eronder (overlappend) */
@media (max-width: 991.98px) {
  .hero { display: flex; flex-direction: column; background: var(--white); }
  .hero-photo { position: relative; inset: auto; flex: 1 1 0; min-height: 120px; }
  .hero > .container-xxl { height: auto; flex: none; display: block; padding-block: 0 clamp(.75rem, 2.5vh, 1.5rem); margin-top: -2.25rem; }
  .hero-card { width: 100%; box-shadow: 0 -12px 40px -20px rgba(36, 26, 23, .35); }
  .hero h1 { font-size: clamp(3rem, min(15vw, 9vh), 5rem); }
  .hero .tagline { font-size: clamp(1.05rem, min(4.6vw, 3vh), 1.5rem); }
}
@media (max-width: 991.98px) and (max-height: 860px) { .hero .facts { display: none; } }
@media (max-width: 991.98px) and (max-height: 640px) { .hero .intro { display: none; } }
@media (max-width: 767.98px) {
  .hero .ctas .btn-bel { display: none; }   /* bellen zit al in de belbalk onderin */
  .hero .ctas .btn { flex: 1; }
}
@media (max-height: 420px) {
  .hero { height: auto; min-height: 0; }
  .hero-photo { flex: none; height: 55vh; }
}

/* ---------- Pizzadag-band ---------- */
.pizzadag { background: var(--red); color: #fff; padding-block: clamp(1.5rem, 3.5vw, 2.25rem); }
.pizzadag .row { align-items: center; }
.pizzadag .dag { font: 700 .8125rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: #ffd3bf; }
.pizzadag h2 { font: 800 clamp(1.8rem, 4vw, 2.8rem)/1.05 var(--display); letter-spacing: -.02em; margin-top: .4rem; }
.pizzadag p { color: #f3d9d4; font-size: .9375rem; margin-top: .4rem; }
.ticket { display: inline-flex; align-items: baseline; gap: .6rem; background: #fff; color: var(--red); border-radius: 14px; padding: .75rem 1.25rem; position: relative; font-variant-numeric: tabular-nums; }
.ticket::before, .ticket::after { content: ""; position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--red); transform: translateY(-50%); }
.ticket::before { left: -8px; } .ticket::after { right: -8px; }
.ticket b { font: 800 clamp(2.2rem, 5vw, 3rem)/1 var(--display); letter-spacing: -.03em; }
.ticket span { font-weight: 700; color: var(--ink); }

/* ---------- Menukaart ---------- */
.menu-search { position: relative; width: 100%; max-width: 360px; }
.menu-search input { width: 100%; font: 500 1rem var(--body); padding: .8rem 1rem .8rem 2.75rem; border-radius: 14px; border: 1.5px solid var(--line); background: var(--white); color: var(--ink); }
.menu-search input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
.menu-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; }
@media (max-width: 767.98px) { .menu-search { max-width: none; } }
.menu-hint { font-size: .8125rem; color: var(--ink-2); margin-top: .4rem; }

.chips { display: flex; gap: .5rem; overflow-x: auto; padding: 1.5rem 0 .5rem; margin-top: .25rem; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
@media (min-width: 1200px) { .chips { flex-wrap: wrap; overflow: visible; } }
.chip { flex: none; font: 700 .9rem/1 var(--body); padding: .7rem 1rem; border-radius: 12px; border: 1.5px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer; }
.chip:hover { border-color: var(--red); color: var(--red); }
.chip[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }

.menu-body { margin-top: 1.25rem; --bs-gutter-x: 3rem; }
.menu-cat { margin-bottom: 1.5rem; }
.menu-cat h3 { font: 800 1.5rem/1.15 var(--display); letter-spacing: -.01em; padding-bottom: .6rem; border-bottom: 3px solid var(--red); display: flex; justify-content: space-between; align-items: end; gap: .75rem; }
.menu-cat .cols { font: 700 .6875rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); display: flex; }
.menu-cat .cols span, .dish .p span { width: 4.5rem; text-align: right; }
.menu-cat .sub { font-size: .875rem; color: var(--ink-2); margin-top: .6rem; }

.dish { display: grid; grid-template-columns: 2.6rem 1fr auto; gap: 1px .9rem; padding: .8rem 0; border-bottom: 1px solid var(--line); align-items: start; }
.dish .nr { grid-row: 1 / span 2; font: 800 .875rem/1 var(--display); color: var(--red); background: var(--oak); border-radius: 8px; height: 2rem; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.dish .nr.leeg { background: none; }
.dish .nr.leeg::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--oak-2); }
.dish .n { font-weight: 700; padding-top: .2rem; }
.dish .d { grid-column: 2; font-size: .875rem; color: var(--ink-2); line-height: 1.45; }
.dish .p { grid-column: 3; grid-row: 1 / span 2; display: flex; font-weight: 700; font-variant-numeric: tabular-nums; padding-top: .2rem; }
.dish mark { background: var(--red-soft); color: inherit; border-radius: 3px; padding: 0 2px; }
.dish.is-hit { background: var(--red-soft); border-radius: 10px; padding-inline: .6rem; border-bottom-color: transparent; }
.tag { display: inline-block; font: 700 .6875rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--green); border: 1px solid currentColor; border-radius: 4px; padding: 3px 5px; margin-left: .45rem; vertical-align: 2px; }
.menu-leeg { color: var(--ink-2); padding: 1.5rem 0; }
.menu-foot { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: 1rem; font-size: .875rem; color: var(--ink-2); }
.menu-foot a { font-weight: 700; }
@media (max-width: 400px) {
  .dish { grid-template-columns: 2.2rem 1fr auto; gap: 1px .6rem; }
  .menu-cat .cols span, .dish .p span { width: 3.9rem; }
}

/* ---------- Open & bezorgen ---------- */
.info-card { background: var(--white); border-radius: 20px; padding: clamp(1.5rem, 3vw, 2.25rem); height: 100%; border: 1px solid var(--line); }
.info-card h3 { font: 800 1.5rem/1.15 var(--display); letter-spacing: -.01em; }
.info-card .sub { color: var(--ink-2); margin-top: .35rem; }
.hours { margin-top: 1.25rem; }
.hours div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px dashed var(--line); font-variant-numeric: tabular-nums; }
.hours div:last-child { border-bottom: 0; }
.hours div span:last-child { white-space: nowrap; }
.hours div.dicht span:last-child { color: var(--ink-2); font-style: italic; }
.hours div.vandaag { font-weight: 700; background: var(--oak); margin-inline: -.75rem; padding-inline: .75rem; border-radius: 10px; border-bottom-color: transparent; }
.hours div.vandaag span:first-child::after { content: "vandaag"; font: 700 .6875rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase; background: var(--red); color: #fff; padding: 3px 5px; border-radius: 4px; margin-left: .45rem; vertical-align: 2px; }
.bezorgtijd { display: flex; align-items: center; gap: .9rem; margin-top: 1.25rem; padding: 1rem 1.1rem; border-radius: 14px; background: var(--red-soft); }
.bezorgtijd svg { color: var(--red); flex: none; }
.bezorgtijd b { display: block; font: 800 1.2rem/1.2 var(--display); }
.bezorgtijd span { font-size: .875rem; color: var(--ink-2); }
.zones { list-style: none; padding: 0; margin: 1rem 0 0; columns: 2; column-gap: 2rem; }
.zones li { display: flex; justify-content: space-between; gap: .75rem; padding: .5rem 0; border-bottom: 1px dashed var(--line); break-inside: avoid; font-variant-numeric: tabular-nums; }
.zones li span:last-child { font-weight: 700; }
.zones li.thuis { color: var(--red); font-weight: 700; }
@media (max-width: 400px) { .zones { columns: 1; } }

/* ---------- Over ons ---------- */
.over-foto { margin: 0; position: relative; }
.over-foto img { border-radius: 20px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.over-foto figcaption { position: absolute; left: 14px; bottom: 14px; font-size: .8125rem; font-weight: 600; background: rgba(255, 255, 255, .94); padding: .35rem .75rem; border-radius: 999px; }
.usp { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; }
.usp li { background: var(--oak); border-radius: 14px; padding: .9rem 1rem; font-size: .9375rem; color: var(--ink-2); }
.usp b { display: block; color: var(--ink); font: 800 1.05rem/1.25 var(--display); }

/* ---------- Buffet ---------- */
.buffet { background: var(--oak); border-radius: 24px; padding: clamp(1.75rem, 4vw, 3.25rem); position: relative; overflow: hidden; }
.buffet::after { content: "Yusuf"; position: absolute; right: -1rem; bottom: -3.5rem; font: 400 clamp(8rem, 18vw, 14rem)/1 var(--script); color: rgba(138, 31, 27, .07); pointer-events: none; }
.buffet p { color: var(--ink-2); margin-top: 1rem; max-width: 56ch; position: relative; z-index: 1; }
.occasions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; position: relative; z-index: 1; }
.occasions span { font-size: .875rem; font-weight: 600; padding: .4rem .8rem; background: var(--white); border-radius: 999px; }
.buffet .btn { margin-top: 1.75rem; position: relative; z-index: 1; }

/* ---------- Contact ---------- */
.contact-block { border-top: 3px solid var(--red); padding-top: 1rem; height: 100%; }
.contact-block h3 { font: 700 .75rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.contact-block p { margin-top: .6rem; font-size: 1.125rem; font-weight: 600; word-break: break-word; }
.contact-block a { font-weight: 700; text-decoration: none; }
.contact-block a:hover { text-decoration: underline; }
.contact-block .acties { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .4rem; }
.linkbtn { background: none; border: 0; padding: 0; font: 700 1rem var(--body); color: var(--red); cursor: pointer; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); color: var(--ink-2); font-size: .875rem; padding-block: 2rem; }
.site-footer nav a { color: var(--ink-2); text-decoration: none; }
.site-footer nav a:hover { color: var(--red); text-decoration: underline; }

/* ---------- Belbalk mobiel ---------- */
.callbar { display: none; }
@media (max-width: 767.98px) {
  .callbar { display: flex; gap: .5rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0px)); background: var(--red); }
  .callbar .btn-bel-groot { flex: 1; background: #fff; color: var(--red); border: 0; font-size: 1.05rem; }
  .callbar .btn-bel-groot:hover { background: #fff; color: var(--red-dark); }
  .callbar .btn-route { flex: none; color: #fff; border: 1.5px solid rgba(255, 255, 255, .5); background: transparent; }
  .callbar .btn-route:hover { color: #fff; background: rgba(255, 255, 255, .12); }
  .site-footer { padding-bottom: 6rem; }
}
@media (max-width: 380px) {
  .callbar .route-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .callbar .btn-route { --bs-btn-padding-x: .9rem; }
  .callbar .btn-bel-groot { font-size: 1rem; --bs-btn-padding-x: .8rem; }
}