/* ==========================================================================
   Africafé — brasserie van het AfricaMuseum
   Custom stylesheet bovenop Bootstrap 5.3
   ========================================================================== */

@font-face {
  font-family: "AfricaMuseum";
  src: url("../fonts/africamuseum.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* AfricaMuseum merkpalet */
  --am-green: #009639;
  --am-bright-green: #a4d233;
  --am-orange: #ffa300;
  --am-dark-orange: #e35205;
  --am-turquoise: #00a499;
  --am-blue: #00b5e2;
  --am-yellow: #fedb00;
  --am-purple: #bb16a3;
  --am-pink: #e93cac;

  --ink: #1c1c1c;
  --sand: #ece7dd;
  --surface-cream: #faf6ef;
  --surface-sand: #e9e1d3;
  --surface-deep: #14352a;

  --font-display: "AfricaMuseum", "Nunito Sans", sans-serif;
  --font-sans: "Nunito Sans", Arial, sans-serif;

  /* Bootstrap overrides */
  --bs-body-font-family: var(--font-sans);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--surface-cream);
  --bs-link-color: var(--am-green);
  --bs-link-hover-color: var(--am-dark-orange);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background-color: var(--surface-cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --------------------------------------------------------------- helpers */
.font-display {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.text-am-green { color: var(--am-green) !important; }
.text-am-blue { color: var(--am-blue) !important; }
.text-am-yellow { color: var(--am-yellow) !important; }
.text-am-orange { color: var(--am-orange) !important; }
.text-am-dark-orange { color: var(--am-dark-orange) !important; }
.text-am-turquoise { color: var(--am-turquoise) !important; }
.text-am-purple { color: var(--am-purple) !important; }
.text-am-pink { color: var(--am-pink) !important; }
.text-ink { color: var(--ink) !important; }

.bg-am-green { background-color: var(--am-green) !important; }
.bg-am-blue { background-color: var(--am-blue) !important; }
.bg-am-yellow { background-color: var(--am-yellow) !important; }
.bg-am-orange { background-color: var(--am-orange) !important; }
.bg-am-dark-orange { background-color: var(--am-dark-orange) !important; }
.bg-am-turquoise { background-color: var(--am-turquoise) !important; }
.bg-am-purple { background-color: var(--am-purple) !important; }
.bg-am-pink { background-color: var(--am-pink) !important; }
.bg-ink { background-color: var(--ink) !important; }

.surface-cream { background-color: var(--surface-cream); color: var(--ink); }
.surface-sand { background-color: var(--surface-sand); color: var(--ink); }
.surface-deep { background-color: var(--surface-deep); color: var(--surface-cream); }

.accent-bar {
  display: block;
  height: 0.5rem;
  width: 3.5rem;
  border-radius: 999px;
}

/* ----------------------------------------------------------------- knoppen */
.btn-af {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-sizing: border-box;
  height: 3rem;
  padding: 0 1.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transform: translateY(0) scale(1);
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}
.btn-af:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 10px 22px -12px rgba(28, 28, 28, 0.55);
}
.btn-af:focus-visible {
  outline: none;
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 0 0 2px var(--surface-cream), 0 0 0 5px rgba(0, 150, 57, 0.7);
}
.btn-af:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 2px 8px -6px rgba(28, 28, 28, 0.6);
  transition-duration: 0.09s;
}
.btn-af-sm { height: 2.75rem; padding: 0 1.5rem; }
.btn-af-outline { border: 2px solid currentColor; background: transparent; }

.btn-af-green { background-color: var(--am-green); color: #fff; }
.btn-af-green:hover { color: #fff; }
.btn-af-yellow { background-color: var(--am-yellow); color: var(--ink); }
.btn-af-yellow:hover { color: var(--ink); }
.btn-af-orange { background-color: var(--am-dark-orange); color: #fff; }
.btn-af-orange:hover { color: #fff; }
.btn-af-white { border-color: #fff; color: #fff; }
.btn-af-white:hover { background-color: #fff; color: var(--ink); }
.btn-af-ink { border-color: var(--ink); color: var(--ink); }
.btn-af-ink:hover { background-color: var(--ink); color: var(--surface-cream); }

/* -------------------------------------------------------------- navigatie */
.af-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1030;
  transition: background-color 0.5s ease, backdrop-filter 0.5s ease;
  background-color: transparent;
}
.af-header a.af-logo,
.af-header .af-nav-link,
.af-header .af-burger { color: #fff; }
.af-header.is-scrolled,
.af-header.is-open {
  background-color: rgba(250, 246, 239, 0.92);
  backdrop-filter: blur(10px);
}
.af-header.is-scrolled a.af-logo,
.af-header.is-scrolled .af-nav-link,
.af-header.is-scrolled .af-burger,
.af-header.is-open a.af-logo,
.af-header.is-open .af-burger { color: var(--ink); }

.af-logo { font-family: var(--font-display); font-size: 1.25rem; text-transform: uppercase; text-decoration: none; }
.af-nav-link {
  position: relative;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.25s ease;
}
.af-nav-link:hover { color: var(--am-green); }
.af-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  height: 2px;
  width: 100%;
  border-radius: 999px;
  background-color: var(--am-green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.af-nav-link.is-active::after { transform: scaleX(1); }

.af-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: none;
  border: 0;
}
.af-burger span { display: block; width: 1.5rem; height: 2px; background: currentColor; }
.af-burger span + span { margin-top: 0.375rem; }

.af-mobile-nav { background-color: var(--surface-cream); }
.af-mobile-nav a {
  display: block;
  padding: 0.75rem 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(28, 28, 28, 0.12);
}
.af-mobile-nav a:last-child { border-bottom: 0; }

.af-progress { height: 3px; width: 100%; }
.af-progress span {
  display: block;
  height: 100%;
  width: 0;
  background-color: var(--am-green);
  transition: width 0.15s linear;
}

/* ------------------------------------------------------------------- hero */
.af-hero { position: relative; min-height: 94vh; overflow: hidden; }
.af-hero img.af-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.af-hero .af-hero-overlay { position: absolute; inset: 0; background-color: rgba(20, 20, 20, 0.55); }
.af-hero .af-hero-inner { position: relative; min-height: 94vh; }
.af-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 10vw, 7rem);
  line-height: 0.92;
  color: #fff;
  text-transform: uppercase;
}
.af-hero-stripe {
  display: block;
  height: 0.5rem;
  width: 3.5rem;
  border-radius: 999px;
  transform-origin: left;
  animation: grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.af-scroll-cue {
  position: absolute;
  bottom: 6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 0.25s ease;
}
.af-scroll-cue:hover { color: #fff; }
.af-scroll-cue span.label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}
.af-scroll-cue .track {
  display: block;
  height: 2.5rem;
  width: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.25);
}
.af-scroll-cue .track i {
  display: block;
  height: 1rem;
  width: 1px;
  background: #fff;
  animation: trickle 1.9s ease-in-out infinite;
}

/* --------------------------------------------------------------- secties */
.af-movement { position: relative; overflow: hidden; }
.af-movement > .container { position: relative; z-index: 2; max-width: 64rem; }
.af-title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.4vw, 4rem);
  line-height: 0.98;
  text-transform: uppercase;
  overflow-wrap: break-word;
  hyphens: auto;
}
.af-lead { font-size: 1.125rem; line-height: 1.7; max-width: 42rem; }

.card-solid {
  height: 100%;
  border-radius: 1.75rem;
  border: 2px solid rgba(28, 28, 28, 0.12);
  background-color: #fff;
  padding: 1.75rem;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease;
}
.card-solid:hover { transform: translateY(-4px); border-color: rgba(28, 28, 28, 0.26); }
.card-solid h3 { font-family: var(--font-display); text-transform: uppercase; }

.af-hours { border-radius: 1.75rem; border: 2px solid rgba(28, 28, 28, 0.12); background: #fff; }
.af-hours li {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(28, 28, 28, 0.1);
  transition: background-color 0.25s ease;
}
.af-hours li:last-child { border-bottom: 0; }
.af-hours li:hover { background-color: rgba(0, 181, 226, 0.08); }
.af-hours .day { flex: 0 1 12rem; min-width: 0; }
.af-hours .rule { flex: 1 1 auto; min-width: 1.5rem; height: 1px; background: rgba(28, 28, 28, 0.1); }
.af-hours .hour,
.af-hours .closed { flex: 0 0 auto; margin-left: auto; white-space: nowrap; text-align: right; }
.af-hours .hour { font-family: var(--font-display); font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.af-hours .closed { font-size: 0.875rem; font-weight: 700; color: rgba(28, 28, 28, 0.45); }

.af-callout { border-radius: 2rem; background: var(--am-green); color: #fff; padding: 2.25rem; }
.af-callout p.title { font-family: var(--font-display); font-size: 1.875rem; text-transform: uppercase; }

.af-panel { border-radius: 2rem; border: 1px solid rgba(250, 246, 239, 0.2); padding: 2rem; }

.af-eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(28, 28, 28, 0.55);
}

/* ------------------------------------------------------------ beeldkader */
.frame {
  position: relative;
  display: block;
  width: 100%;
}
.frame .offset {
  position: absolute;
  inset: 0;
  transform: translate(0.75rem, 0.75rem);
  border-radius: 2.5rem;
}
.frame .inner {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 2.5rem;
  border: 4px solid rgba(28, 28, 28, 0.1);
}
.frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.frame.is-visible img { transform: scale(1); }
.frame-h-sm { height: 16rem; }
.frame-h-md { height: 20rem; }
.frame-h-lg { height: 24rem; }

/* ---------------------------------------------------------------- reveal */
.rise {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.rise.is-visible { opacity: 1; transform: none; }

/* ------------------------------------------------------------ botanicals */
.af-botanicals {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.botanical {
  position: absolute;
  display: block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  transform: rotate(var(--bot-rotate, 0deg));
  transform-origin: 50% 90%;
  animation-name: sway;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  will-change: transform;
}
.bot-monstera { -webkit-mask-image: url("../svg/monstera.svg"); mask-image: url("../svg/monstera.svg"); aspect-ratio: 240 / 280; }
.bot-banana { -webkit-mask-image: url("../svg/bananenblad.svg"); mask-image: url("../svg/bananenblad.svg"); aspect-ratio: 200 / 300; }
.bot-palm { -webkit-mask-image: url("../svg/waaierpalm.svg"); mask-image: url("../svg/waaierpalm.svg"); aspect-ratio: 240 / 260; }
.bot-acacia { -webkit-mask-image: url("../svg/acaciatak.svg"); mask-image: url("../svg/acaciatak.svg"); aspect-ratio: 260 / 200; }

/* ------------------------------------------------------------- animaties */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
@keyframes grow {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}
@keyframes trickle {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(250%); }
}
@keyframes sway {
  0% { transform: rotate(var(--bot-rotate, 0deg)) translateY(0) rotate(-1.6deg); }
  100% { transform: rotate(var(--bot-rotate, 0deg)) translateY(-10px) rotate(1.8deg); }
}
.anim-rise-in { animation: riseIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .rise, .frame img, .anim-rise-in, .af-hero-stripe {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .botanical { animation: none !important; }
  .btn-af, .btn-af:hover, .btn-af:active, .btn-af:focus-visible { transform: none; }
}

/* -------------------------------------------------------------- footer */
.af-footer { background: var(--ink); color: var(--surface-cream); }
.af-footer a { color: inherit; }
.af-footer a:hover { color: var(--am-yellow); }

/* --------------------------------------------------------- CMS componenten */
.af-nav-container { max-width: 72rem; }
.af-hero-content {
  max-width: 64rem;
  padding-top: 8rem;
  padding-bottom: 7rem;
}
.af-hero-intro { max-width: 36rem; animation-delay: 160ms; }
.af-hero-actions { animation-delay: 300ms; }
.af-hero-stripe-1 { animation-delay: 150ms; }
.af-hero-stripe-2 { animation-delay: 260ms; }
.af-hero-stripe-3 { animation-delay: 370ms; }
.af-hero-stripe-4 { animation-delay: 480ms; }
.af-section-container { padding-top: 5rem; padding-bottom: 5rem; }
.af-wave { position: relative; z-index: 2; line-height: 0; }
.af-wave svg { display: block; width: 100%; height: 90px; }
.af-wave-flipped svg { transform: scaleX(-1); }
.af-reservation-text a { color: var(--am-dark-orange); font-weight: 700; }
.af-callout-copy { max-width: 28rem; }
.af-panel-copy { max-width: 42rem; }
.af-event-logo { width: 5rem; height: 5rem; object-fit: contain; }

.af-brasserie-botanical-1 { left: -6rem; top: 2.5rem; width: 22rem; --bot-rotate: -12deg; animation-duration: 13s; opacity: 0.12; }
.af-brasserie-botanical-2 { right: -4rem; top: 33%; width: 18rem; --bot-rotate: 14deg; animation-delay: 1.5s; animation-duration: 15s; opacity: 0.12; }
.af-brasserie-botanical-3 { left: -2.5rem; bottom: 2rem; width: 16rem; --bot-rotate: 6deg; animation-delay: 0.8s; animation-duration: 12s; opacity: 0.1; }
.af-practical-botanical-1 { right: -5rem; top: 4rem; width: 18rem; --bot-rotate: 12deg; animation-duration: 14s; opacity: 0.12; }
.af-practical-botanical-2 { left: -4rem; bottom: 4rem; width: 18rem; --bot-rotate: -8deg; animation-delay: 1.2s; animation-duration: 16s; opacity: 0.11; }
.af-groups-botanical-1 { left: -5rem; top: 6rem; width: 18rem; --bot-rotate: -16deg; animation-duration: 15s; opacity: 0.12; }
.af-groups-botanical-2 { right: -6rem; bottom: 2.5rem; width: 22rem; --bot-rotate: 10deg; animation-delay: 1.6s; animation-duration: 13s; opacity: 0.1; }
.af-events-botanical-1 { left: -5rem; top: 3rem; width: 18rem; --bot-rotate: -10deg; animation-duration: 14s; opacity: 0.16; }
.af-events-botanical-2 { right: -4rem; bottom: 1.5rem; width: 18rem; --bot-rotate: 16deg; animation-delay: 1.1s; animation-duration: 16s; opacity: 0.16; }
.af-contact-botanical-1 { right: -4rem; top: 2rem; width: 18rem; --bot-rotate: 8deg; animation-duration: 15s; opacity: 0.12; }
.af-contact-botanical-2 { left: -6rem; bottom: 0; width: 18rem; --bot-rotate: -12deg; animation-delay: 1.4s; animation-duration: 13s; opacity: 0.1; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 767.98px) {
  .frame-h-lg, .frame-h-md { height: 16rem; }
  .af-scroll-cue { bottom: 5rem; }
  .af-hours li { gap: 0.75rem; padding: 0.875rem 1rem; }
  .af-hours .day { flex-basis: 8rem; }
  .af-hours .rule { min-width: 0.75rem; }
}