/* ==========================================================================
   TARAMISU — layout: loader, nav, hero, footer
   ========================================================================== */

/* ================================================================ LOADER */
#loader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--paper);
  transition: opacity .8s var(--ease), visibility .8s;
}
#loader.is-done { opacity: 0; visibility: hidden; }
.loader__inner { display: grid; justify-items: center; gap: 1.4rem; text-align: center; }
.loader__branch {
  width: clamp(190px, 46vw, 330px);
  opacity: 0;
  animation: branchIn 1.15s var(--ease-out) .1s forwards;
}
@keyframes branchIn {
  from { opacity: 0; transform: translateX(-18px) rotate(-3deg) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.loader__name {
  font-family: var(--display);
  font-weight: 500;
  font-variation-settings: 'opsz' 14;
  font-size: clamp(1.7rem, 7vw, 2.6rem);
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--ink);
}
.loader__name span {
  display: inline-block; opacity: 0;
  transform: translateY(.5em);
  animation: letterIn .55s var(--ease-out) forwards;
}
@keyframes letterIn { to { opacity: 1; transform: none; } }

/* =================================================================== NAV */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: clamp(.9rem, 2vw, 1.4rem) var(--gutter);
  transition: background .45s var(--ease), box-shadow .45s var(--ease),
              padding .45s var(--ease), border-color .45s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(250, 246, 242, .93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  padding-block: clamp(.7rem, 1.4vw, .95rem);
}

/* Light draft, desktop: the bar is solid from the first moment, exactly as it
   looks once you have scrolled. A transparent bar over the photograph left the
   links hard to read. Phones keep the clear bar: there it is only the burger. */
@media (min-width: 861px) {
  html[data-draft="1"] .nav {
    background: rgba(250, 246, 242, .93);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: var(--line);
    padding-block: clamp(.7rem, 1.4vw, .95rem);
  }
  /* and with it the wordmark, which otherwise waits for the scroll */
  html[data-draft="1"] body:has(.hero) .nav:not(.is-stuck) .nav__brand {
    opacity: 1;
    pointer-events: auto;
  }
}

.nav__brand { display: flex; align-items: center; gap: .7rem; flex: none; z-index: 2; }
.nav__brand img { width: clamp(108px, 17vw, 150px); }

.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.1vw, 2rem); }
.nav__links a {
  position: relative;
  font-size: .97rem; font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-2);
  padding-block: .3rem;
  transition: color .3s var(--ease);
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--blossom-400);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after,
.nav__links a[aria-current='true']::after { transform: scaleX(1); transform-origin: left; }

.nav__cta { flex: none; }

/* burger */
.burger {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  z-index: 2;
}
.burger span {
  display: block; width: 24px; height: 1.5px;
  background: var(--ink); border-radius: 2px;
  transition: transform .4s var(--ease), opacity .25s var(--ease), background .3s;
}
.burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* full-screen mobile menu */
.menu {
  position: fixed; inset: 0; z-index: 890;
  display: grid; grid-template-rows: 1fr auto;
  gap: 2rem;
  padding: clamp(6rem, 18vh, 9rem) var(--gutter) clamp(2rem, 6vh, 3rem);
  background: var(--paper);
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  clip-path: circle(0% at 92% 4%);
  /* visibility flips discretely: instantly on open (so the panel can take
     focus straight away), delayed on close (so the fade stays visible). */
  transition: opacity .5s var(--ease), clip-path .75s var(--ease-out),
              visibility 0s linear .5s;
}
.menu.is-open {
  opacity: 1; visibility: visible;
  clip-path: circle(150% at 92% 4%);
  transition: opacity .5s var(--ease), clip-path .75s var(--ease-out),
              visibility 0s linear 0s;
}
.menu__branch {
  position: absolute; top: -2%; right: -14%;
  width: min(70vw, 380px); opacity: .5; pointer-events: none;
}
.menu__links { display: flex; flex-direction: column; justify-content: center; gap: .35rem; }
.menu__links a {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.9rem, 9vw, 2.9rem);
  line-height: 1.22;
  padding-block: .18em;
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), color .3s;
}
.menu.is-open .menu__links a { opacity: 1; transform: none; transition-delay: var(--d, 0ms); }
.menu__links a:hover { color: var(--blossom-600); }
.menu__foot { display: grid; gap: 1rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.menu__foot a { font-size: .95rem; color: var(--ink-2); }
/* .menu__foot a is specifieker dan .btn, dus de knop kreeg de gedempte
   linkkleur mee en werd onleesbaar op het roze vlak. Hier terugdraaien. */
.menu__foot a.btn { width: 100%; color: var(--btn-fg); font-size: 1rem; }

@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .burger { display: flex; }
}

/* ================================================================== HERO
   One photograph filling the screen with the wordmark centred over it, at
   every width. Draft 2 fills the screen too, but anchors its mark and a line
   of copy to the lower left — the same picture with a different thing laid
   on it, rather than the same layout in two colours. */
.hero {
  position: relative;
  min-height: 100svh;
  display: block;
  padding: 0;
  overflow: clip;
}
.hero__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 85% 0%, var(--blossom-50) 0%, transparent 62%),
    radial-gradient(90% 60% at 0% 100%, var(--paper-2) 0%, transparent 60%);
}

/* The drawn branch belongs to draft 2's hero. Draft 1's photograph already
   shows the real canopy, so putting the illustration on top of it would be
   the same motif twice. It still carries the loader, the menu panel and the
   sub-page headers. */
.hero__branch {
  display: none;
  position: absolute; z-index: 1; pointer-events: none;
  top: clamp(2.5rem, 5vh, 4rem);
  right: -10%;
  width: min(96vw, 1040px);
  max-width: none;
  opacity: .96;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}
.hero__branch--flip { display: none; }

/* static, so the absolutely-positioned picture and copy anchor to .hero
   (full screen) rather than to this wrapper (content height) */
.hero__grid { display: block; position: static; width: 100%; }

/* the picture is the hero, edge to edge, top to bottom */
.hero__media {
  /* explicit svh rather than inset:0 + height:auto — a percentage height on
     the figure inside made the chain circular and it collapsed to the
     image's natural box */
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100svh;
  margin: 0;
  z-index: 1;
}
.hero__media figure {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: var(--paper-3);
}
/* scoped to the figure — .hero__mark is also an <img> in here, and an
   unscoped rule outranks the mark's own width */
.hero__media figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
/* a light wash so the wordmark and the status line stay readable whatever
   the photograph happens to be doing behind them */
.hero__media figure::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(250, 246, 242, .55) 0%,
      rgba(250, 246, 242, .10) 28%,
      rgba(250, 246, 242, .10) 52%,
      rgba(250, 246, 242, .72) 76%,
      rgba(250, 246, 242, .96) 100%);
}

/* A pool of light behind the wordmark. The photograph is busy exactly where
   the mark sits (dark shelves under "Coffee & More"), and a black mark needs
   a light ground. It reads as daylight from the window behind the counter,
   not as a box. Explicit width and height: WebKit would not size it from
   aspect-ratio. Follows the mark's position in the phone rules below. */
.hero__media::before {
  content: '';
  position: absolute; z-index: 2; pointer-events: none;
  left: 50%; top: 46%;
  width: min(72vw, 880px); height: min(40vw, 480px);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
    rgba(250, 246, 242, .90) 0%,
    rgba(250, 246, 242, .62) 45%,
    rgba(250, 246, 242, 0) 100%);
}

.hero__mark {
  display: block;
  position: absolute; z-index: 3;
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  width: min(34vw, 400px);
  filter: drop-shadow(0 2px 18px rgba(250, 246, 242, .85));
}

/* the words sit at the foot, over the wash */
.hero__copy {
  position: absolute; z-index: 3;
  inset: auto var(--gutter) clamp(2.5rem, 7vh, 4.5rem);
  max-width: none;
  padding: 0;
  text-align: center;
}
.hero h1 { display: none; }
.hero__link { margin-top: .9rem; }

/* live open / closed — a typographic line, not a pill.
   Bordered status chips with a coloured dot are the single most
   template-looking element you can put in a hero. */
.status {
  /* block-level flex, not inline-flex: side by side with the link on a wide
     screen is not a layout, it is an accident of inline flow. */
  display: flex; align-items: baseline; justify-content: center; gap: .55rem;
  font-size: .92rem; color: var(--muted);
  letter-spacing: .01em;
}
.status__dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--muted);
  transform: translateY(-.15em);
}
.status--open   .status__dot { background: #4F9D69; }
.status--closed .status__dot { background: var(--blossom-400); }
.status b { font-weight: 500; color: var(--ink); }
.status--open b { color: #3B7A50; }

.scroll-cue {
  position: absolute; z-index: 3;
  left: 50%; bottom: clamp(1rem, 3vh, 2rem);
  transform: translateX(-50%);
  display: grid; justify-items: center;
}
.scroll-cue i {
  display: block; width: 1px; height: 2.5rem;
  background: linear-gradient(var(--blossom-300), transparent);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue { 0%,100% { transform: scaleY(.35); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

@media (max-width: 860px) {
  /* same hero, phone-sized */
  .hero__media figure img { object-position: center 45%; }
  .hero__mark { width: min(62vw, 300px); }
  .hero__media::before { width: 124vw; height: min(70vw, 340px); }
  /* clear of the sticky action bar */
  .hero__copy { bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px) + 1.25rem); }
  .status { font-size: .9rem; }
  .scroll-cue { display: none; }
}

/* Short phones: only the mark needs to shrink, the photograph still fills
   the screen. */
@media (max-width: 860px) and (max-height: 730px) {
  .hero__mark { width: min(56vw, 250px); top: 44%; }
  .hero__media::before { top: 44%; }
  .status { font-size: .85rem; }
}

/* Both drafts show the wordmark inside the hero, so the one in the bar would
   be the same logo twice. It fades in once you scroll past the hero. Draft 1
   only does this on mobile, because its desktop hero has no mark. */
.nav__brand { transition: opacity .35s var(--ease); }

body:has(.hero) .nav:not(.is-stuck) .nav__brand {
  opacity: 0;
  pointer-events: none;
}
}

/* ------------------------------------------------------------ petals
   Confined to the hero. Drifting petals across body copy read as smudges. */
.petals {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none; overflow: hidden;
}
.petal {
  position: absolute; top: -8%;
  width: 9px; height: 8px;
  background: var(--blossom-200);
  border-radius: 60% 40% 55% 45% / 70% 60% 40% 30%;
  opacity: 0;
  animation: fall linear infinite;
}
@keyframes fall {
  0%   { opacity: 0;   transform: translate3d(0, -8%, 0) rotate(0deg); }
  10%  { opacity: .38; }
  85%  { opacity: .22; }
  100% { opacity: 0;   transform: translate3d(var(--dx, 60px), 108%, 0) rotate(540deg); }
}
@media (prefers-reduced-motion: reduce) { .petals { display: none; } }

/* ================================================================ FOOTER */
.footer { background: var(--espresso); color: var(--paper); padding-block: clamp(3.5rem, 8vw, 5.5rem) 2rem; }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 3.5rem);
  border-bottom: 1px solid rgba(250, 246, 242, .16);
}
.footer__mark { width: clamp(140px, 22vw, 190px); margin-bottom: 1.25rem; filter: brightness(0) invert(1); opacity: .92; }
.footer p { color: rgba(250, 246, 242, .72); font-size: .95rem; }
.footer h3 {
  font-family: var(--sans); font-size: .72rem; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--blossom-300); margin-bottom: 1.1rem;
}
.footer__list { display: grid; gap: .6rem; }
.footer__list a, .footer__list span { color: rgba(250, 246, 242, .82); font-size: .95rem; }
.footer__list a { transition: color .3s; }
.footer__list a:hover { color: var(--blossom-300); }

/* Adres, telefoon en Instagram zijn allemaal aanklikbaar. Zonder streepje
   ziet niemand dat, dus krijgt die kolom een rustige onderlijn. */
.footer__list--contact a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: rgba(250, 246, 242, .35);
}
.footer__list--contact a:hover { text-decoration-color: currentColor; }
.footer__addr { display: grid; gap: .25rem; }
/* Icoon en handle op een lijn, onderlijn alleen onder de tekst. */
.footer__ig { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.footer__ig svg { flex: none; }
.footer__ig span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: rgba(250, 246, 242, .35);
}
.footer__ig:hover span { text-decoration-color: currentColor; }

/* Het adres in de Kontakt-lijst opent dezelfde kaart. */
.link-plain {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: var(--line);
  transition: text-decoration-color .3s;
}
.link-plain:hover { text-decoration-color: currentColor; }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: 1.75rem;
  font-size: .82rem; color: rgba(250, 246, 242, .55);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }

@media (max-width: 760px) {
  .footer__grid { grid-template-columns: 1fr; gap: 2.25rem; }
}

/* ---------------------------------------------------- hero, simplified
   Both references lead with a picture and almost no words: a logo, a short
   line, nothing else. The headline + paragraph + two-button stack we had is
   the generic template shape, so it is gone. */
.hero__link { margin-top: clamp(1.5rem, 4vw, 2rem); }

/* ======================================================== ACTION BAR
   Phone + directions pinned within thumb reach on a phone. Desktop has the
   nav for this; a small screen does not, and the two things people want
   from a café site on the move are "call" and "take me there". */
.actionbar { display: none; }

@media (max-width: 900px) {
  .actionbar {
    position: fixed; z-index: 880;
    inset: auto 0 0 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: rgba(250, 246, 242, .96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(0);
    transition: transform .4s var(--ease);
  }
  .actionbar a {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 3.5rem;
    font-size: .97rem; color: var(--ink);
  }
  .actionbar a + a { border-left: 1px solid var(--line); }
  .actionbar a:active { background: var(--paper-2); }
  .actionbar svg { width: 1.05em; height: 1.05em; color: var(--blossom-600); }

  /* the footer must not sit underneath it */
  body.has-actionbar .footer { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px) + 1.5rem); }
  /* and it gets out of the way while the full-screen menu is open */
  body.is-locked .actionbar { transform: translateY(100%); }
}