/* Ambrozijn — basis + hover + responsief. De opmaak zelf staat inline (1-op-1 uit het design). */

html { scroll-behavior: smooth; }
body { margin: 0; background: #1d241a; color: #e9e2cf; font-family: 'Karla', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #c8a95b; text-decoration: none; }
a:hover { color: #e0c887; }
button { font-family: inherit; }

/* Hovers (inline styles kunnen geen :hover) */
.lnk:hover { color: #c8a95b !important; }
.lnk-soft:hover { color: #c8a95b !important; }
.btn-gold:hover { background: #e0c887 !important; color: #1d241a !important; }
.btn-outline:hover { border-color: #c8a95b !important; color: #c8a95b !important; }
.btn-outline-gold:hover { background: #c8a95b !important; color: #1d241a !important; }
.cat-kaart:hover { background: #ece5d5 !important; }
.fb-knop:hover { border-color: #c8a95b !important; }

/* Buffet- en bestel-tabs */
.buffet-tab, .bestel-tab { background: transparent; color: #c8a95b; }
.buffet-tab.actief, .bestel-tab.actief { background: #c8a95b; color: #1d241a; }

/* Modals */
.modal-achtergrond {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10,14,8,0.8); backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 24px; overflow-y: auto;
}
.modal-achtergrond[hidden] { display: none; }
.modal-kader {
  background: #1a2418; border: 1px solid rgba(200,169,91,0.55);
  outline: 1px solid rgba(200,169,91,0.25); outline-offset: 6px;
  padding: 44px 48px; color: #c8a95b; position: relative;
  width: 100%; max-width: 1040px;
}
.modal-sluit {
  position: absolute; top: 18px; right: 18px; background: transparent;
  border: 1px solid rgba(200,169,91,0.5); color: #c8a95b;
  font-size: 11px; letter-spacing: 0.2em; padding: 8px 14px; cursor: pointer;
}
.modal-sluit:hover { background: #c8a95b; color: #1d241a; }
body.modal-open { overflow: hidden; }

/* Wildkalender: horizontaal scrollbaar op smalle schermen */
.wk-scroll { overflow-x: auto; }
.wk-binnen { min-width: 760px; }

/* Responsief */
@media (max-width: 1080px) {
  .traiteur-detail { display: none !important; }
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr !important; }
  .hero-tekst { border-right: 0 !important; padding: 64px 24px !important; }
  .hero-beeld { min-height: 380px; }
  .hero-titel { font-size: 52px !important; }
  .traiteur-grid { grid-template-columns: 1fr !important; }
  .traiteur-blok { margin-left: 0 !important; margin-top: 24px; }
  .cat-grid { grid-template-columns: 1fr !important; }
  .traiteur-blok div[style*="width:max-content"] { width: 100% !important; }
  .hist-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .modal-kolommen { grid-template-columns: 1fr !important; }
  .modal-kader { padding: 32px 24px; }
  .sectie { padding-left: 24px !important; padding-right: 24px !important; }
  .nav-inner { padding: 14px 20px !important; }
  .topbar { padding: 8px 20px !important; }
}
@media (max-width: 760px) {
  .hoofdnav { gap: 14px !important; font-size: 11px !important; flex-wrap: wrap; justify-content: flex-end; }
  .anno { display: none; }
  .topbar-adres { display: none; }
  .sectie-titel { font-size: 34px !important; }
  .hero-titel { font-size: 42px !important; }
}