/* ══════════════════════════════════════════════════════
   MIRU — Aankondiging (seasonal announcement)
   Fixed bar at the top of the page + floating badge + poster
   popup. Built by js/announcement.js from /api/announcement/;
   the owner manages them in Dashboard > Aankondigingen.
   Three styles: .ann-theme-kerst / -goud / -donker.
   ══════════════════════════════════════════════════════ */

/* ── THEMES ── */
.ann-theme-kerst {
  --ann-ball-texture: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23e9cc8a' stroke-linecap='round' opacity='.75'><path d='M15 13Q50 23 85 13' stroke-width='1.1'/><path d='M12 18Q50 28 88 18' stroke-width='1.8' stroke-dasharray='0 4'/><path d='M11 23Q50 33 89 23' stroke-width='1.1'/><path d='M11 79Q50 89 89 79' stroke-width='1.1'/><path d='M12 84Q50 94 88 84' stroke-width='1.8' stroke-dasharray='0 4'/><path d='M16 89Q50 98 84 89' stroke-width='1.1'/></g><g transform='translate(7 50) scale(.7)' opacity='.8'><path d='M0-5V5M-4.3-2.5L4.3 2.5M-4.3 2.5L4.3-2.5' stroke='%23ffffff' stroke-width='.9' stroke-linecap='round'/></g><g transform='translate(93 50) scale(.7)' opacity='.8'><path d='M0-5V5M-4.3-2.5L4.3 2.5M-4.3 2.5L4.3-2.5' stroke='%23ffffff' stroke-width='.9' stroke-linecap='round'/></g></svg>");
  --ann-bar-bg: linear-gradient(90deg, #6e1712, #b8322a 50%, #6e1712);
  --ann-bar-text: #ffffff;
  --ann-bar-link: #ffffff;
  --ann-bar-underline: #e9cc8a;
  --ann-ball-bg: radial-gradient(circle at 34% 28%, #ef5c4f 0%, #b8322a 38%, #6e1712 100%);
  --ann-ball-text: #ffffff;
  --ann-ball-sub: #ffffff;
  --ann-ball-shadow: 0 1px 3px rgba(60, 5, 2, 0.85);
  --ann-ring: #D4AD5A;
  --ann-accent: #D4AD5A;
  --ann-accent-light: #e9cc8a;
}
.ann-theme-goud {
  --ann-ball-texture: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%236e5220' stroke-linecap='round' opacity='.75'><path d='M15 13Q50 23 85 13' stroke-width='1.1'/><path d='M12 18Q50 28 88 18' stroke-width='1.8' stroke-dasharray='0 4'/><path d='M11 23Q50 33 89 23' stroke-width='1.1'/><path d='M11 79Q50 89 89 79' stroke-width='1.1'/><path d='M12 84Q50 94 88 84' stroke-width='1.8' stroke-dasharray='0 4'/><path d='M16 89Q50 98 84 89' stroke-width='1.1'/></g><g transform='translate(7 50) scale(.7)' opacity='.8'><path d='M0-5L1.1-1.1 5 0 1.1 1.1 0 5-1.1 1.1-5 0-1.1-1.1Z' fill='%23fff3cf'/></g><g transform='translate(93 50) scale(.7)' opacity='.8'><path d='M0-5L1.1-1.1 5 0 1.1 1.1 0 5-1.1 1.1-5 0-1.1-1.1Z' fill='%23fff3cf'/></g></svg>");
  --ann-bar-bg: linear-gradient(90deg, #b8913f, #e2c27a 50%, #b8913f);
  --ann-bar-text: #1F1B16;
  --ann-bar-link: #1F1B16;
  --ann-bar-underline: #1F1B16;
  --ann-ball-bg: radial-gradient(circle at 34% 28%, #f3dca0 0%, #D4AD5A 45%, #8f6d2a 100%);
  --ann-ball-text: #1F1B16;
  --ann-ball-sub: #1F1B16;
  --ann-ball-shadow: 0 1px 2px rgba(255, 240, 200, 0.7);
  --ann-ring: #f3dca0;
  --ann-accent: #D4AD5A;
  --ann-accent-light: #e9cc8a;
}
.ann-theme-donker {
  --ann-ball-texture: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23e9cc8a' stroke-linecap='round' opacity='.75'><path d='M15 13Q50 23 85 13' stroke-width='1.1'/><path d='M12 18Q50 28 88 18' stroke-width='1.8' stroke-dasharray='0 4'/><path d='M11 23Q50 33 89 23' stroke-width='1.1'/><path d='M11 79Q50 89 89 79' stroke-width='1.1'/><path d='M12 84Q50 94 88 84' stroke-width='1.8' stroke-dasharray='0 4'/><path d='M16 89Q50 98 84 89' stroke-width='1.1'/></g><g transform='translate(7 50) scale(.7)' opacity='.8'><path d='M0-5L1.1-1.1 5 0 1.1 1.1 0 5-1.1 1.1-5 0-1.1-1.1Z' fill='%23e9cc8a'/></g><g transform='translate(93 50) scale(.7)' opacity='.8'><path d='M0-5L1.1-1.1 5 0 1.1 1.1 0 5-1.1 1.1-5 0-1.1-1.1Z' fill='%23e9cc8a'/></g></svg>");
  --ann-bar-bg: #16181d;
  --ann-bar-text: #F5EFE4;
  --ann-bar-link: #e9cc8a;
  --ann-bar-underline: #e9cc8a;
  --ann-ball-bg: radial-gradient(circle at 34% 28%, #3a3d46 0%, #1e2028 55%, #0f1014 100%);
  --ann-ball-text: #F5EFE4;
  --ann-ball-sub: #e9cc8a;
  --ann-ball-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  --ann-ring: #D4AD5A;
  --ann-accent: #D4AD5A;
  --ann-accent-light: #e9cc8a;
}

/* ── BAR (very top of the page, above the fixed nav) ──
   Stays in view while scrolling; announcement.js pushes the fixed nav (and
   the dashboard alert banner) down by the bar height (html.ann-has-bar). */
.ann-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  background: var(--ann-bar-bg);
  border-top: 1px solid rgba(212, 173, 90, 0.45);
  border-bottom: 1px solid rgba(212, 173, 90, 0.45);
  color: var(--ann-bar-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.4;
}
.ann-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.6rem 3rem 0.6rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  text-align: center;
}
.ann-bar-text { font-weight: 600; }
/* Nav top is set from JS: don't animate it */
html.ann-has-bar nav {
  transition: background 0.4s ease, padding 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
}
.ann-bar-star { color: var(--ann-accent-light); margin-right: 0.35rem; }
.ann-theme-goud .ann-bar-star { color: #1F1B16; }
.ann-bar-open {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--ann-bar-link);
  text-decoration: underline;
  text-decoration-color: var(--ann-bar-underline);
  text-underline-offset: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.ann-bar-open:hover { opacity: 0.8; }
.ann-bar-close {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--ann-bar-text);
  opacity: 0.75;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.3rem 0.55rem;
  cursor: pointer;
}
.ann-bar-close:hover { opacity: 1; }

/* ── BADGE ("hanger") ──
   Fixed overlay. In the hero it hangs top-right (Kerst) or floats as a
   medallion; once the visitor scrolls past the hero, announcement.js adds
   .ann-badge-docked and it moves to a bottom corner, smaller. On tablets and
   phones it sits above the mobile sticky CTA (--ann-cta-h, set from JS). */
.ann-badge {
  position: fixed;
  top: 0;
  right: 9%;
  z-index: 998;              /* below the nav (1000) and the mobile CTA (999) */
  transition: bottom 0.3s ease, opacity 0.3s ease, visibility 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transform-origin: top center;
  animation: annFadeIn 0.4s ease-out, annSwing 5s ease-in-out infinite;
}
.ann-badge-string {
  width: 1px;
  height: clamp(150px, 26vh, 260px);
  background: linear-gradient(to bottom, rgba(212, 173, 90, 0), var(--ann-accent));
}
.ann-badge-cap {
  width: 20px;
  height: 12px;
  margin-bottom: -2px;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(90deg, #a8843c, #e9cc8a, #a8843c);
  position: relative;
  z-index: 1;
}
/* Only the Kerst style hangs on a string; the others float as a medallion */
.ann-badge:not(.ann-theme-kerst) .ann-badge-string,
.ann-badge:not(.ann-theme-kerst) .ann-badge-cap { display: none; }
.ann-badge:not(.ann-theme-kerst) {
  top: clamp(190px, 30vh, 300px);
  transform-origin: center;
  animation: annFadeIn 0.4s ease-out, annFloat 6s ease-in-out infinite;
}
/* Docked: bottom-right corner once past the hero */
.ann-badge.ann-badge-docked {
  top: auto;
  bottom: calc(1.5rem + var(--ann-cta-h, 0px) + env(safe-area-inset-bottom));
  right: 1.5rem;
  left: auto;
  transform-origin: center;
  animation: annFadeIn 0.4s ease-out, annFloat 6s ease-in-out infinite;
}
.ann-badge.ann-badge-docked .ann-badge-string,
.ann-badge.ann-badge-docked .ann-badge-cap { display: none; }
.ann-badge.ann-badge-docked .ann-badge-ball { width: 112px; height: 112px; padding: 0 10px; }
.ann-badge.ann-badge-docked .ann-badge-title { font-size: 1.5rem; }
.ann-badge.ann-badge-docked .ann-badge-sub { font-size: 0.78rem; margin-top: 0.15rem; }
/* Hidden while the reservation form is on screen (it would cover fields) */
.ann-badge.ann-badge-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.ann-badge-ball {
  width: 150px;
  height: 150px;
  padding: 0 12px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--ann-ball-texture) center / 100% 100% no-repeat, var(--ann-ball-bg);
  border: 2px solid var(--ann-ring);
  box-shadow:
    0 0 0 6px rgba(212, 173, 90, 0.15),
    0 0 40px rgba(212, 173, 90, 0.25),
    0 18px 40px rgba(0, 0, 0, 0.5);
  color: var(--ann-ball-text);
  text-shadow: var(--ann-ball-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ann-badge-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.ann-badge-sub {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: 0.3rem;
  color: var(--ann-ball-sub);
}
.ann-badge:hover .ann-badge-ball,
.ann-badge:focus-visible .ann-badge-ball {
  transform: scale(1.06);
  box-shadow:
    0 0 0 6px rgba(212, 173, 90, 0.3),
    0 0 60px rgba(212, 173, 90, 0.4),
    0 18px 40px rgba(0, 0, 0, 0.5);
}
.ann-badge:focus-visible { outline: none; }
.ann-badge:focus-visible .ann-badge-ball { outline: 2px solid var(--ann-accent-light); outline-offset: 4px; }

@keyframes annSwing {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate(2.5deg); }
}
@keyframes annFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes annFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ── POPUP ── */
.ann-popup {
  width: min(760px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: auto;            /* site reset zeroes margins; dialog needs auto to center */
  inset: 0;
  padding: 0;
  border: 1px solid rgba(212, 173, 90, 0.5);
  border-radius: 10px;
  background: #16181d;
  color: #F5EFE4;
  overflow: auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.ann-popup::backdrop {
  background: rgba(10, 8, 6, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.ann-popup[open] { animation: annPop 0.35s ease-out; }
@keyframes annPop {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.ann-popup-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100dvh - 9rem);   /* portrait posters: fit, footer stays visible */
  object-fit: contain;
}
.ann-popup-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}
.ann-popup-close:hover { background: rgba(0, 0, 0, 0.85); }
.ann-popup-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 1rem 1.25rem 1.15rem;
  font-family: var(--font-body);
}
.ann-popup-footer:empty { display: none; }
.ann-popup-caption {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ann-accent-light);
}
.ann-popup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-left: auto;
}
.ann-popup-actions button {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.75rem 1.1rem;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid var(--ann-accent);
  background: var(--ann-accent);
  color: #1F1B16;
  transition: background 0.2s, color 0.2s;
}
.ann-popup-actions button:hover { background: var(--ann-accent-light); color: #1F1B16; }

html.ann-popup-open { overflow: hidden; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .ann-badge { right: 4%; }
  .ann-badge-ball { width: 120px; height: 120px; }
  .ann-badge-title { font-size: 1.5rem; }
}

@media (max-width: 768px) {
  .ann-bar { font-size: 0.78rem; line-height: 1.35; }
  /* Text and link flow inline so the bar stays ~2 lines on phones */
  .ann-bar-inner { display: block; padding: 0.45rem 2.4rem 0.45rem 0.8rem; }
  .ann-bar-open { margin-left: 0.4rem; white-space: normal; }
  /* On phones the badge sits bottom-left: below the hero buttons, and
     above the mobile sticky CTA once docked */
  .ann-badge,
  .ann-badge:not(.ann-theme-kerst),
  .ann-badge.ann-badge-docked {
    top: auto;
    bottom: calc(1.25rem + var(--ann-cta-h, 0px));
    right: auto;
    left: 1rem;
    transform-origin: center;
  }
  .ann-badge.ann-badge-docked { bottom: calc(0.75rem + var(--ann-cta-h, 0px)); left: 0.75rem; }
  .ann-badge-string,
  .ann-badge-cap { display: none; }
  .ann-badge-ball { width: 92px; height: 92px; padding: 0 8px; }
  .ann-badge-title { font-size: 1.3rem; }
  .ann-badge-sub { font-size: 0.72rem; margin-top: 0.15rem; }
  .ann-badge.ann-badge-docked .ann-badge-ball { width: 80px; height: 80px; padding: 0 6px; }
  .ann-badge.ann-badge-docked .ann-badge-title { font-size: 1.1rem; }
  .ann-badge.ann-badge-docked .ann-badge-sub { font-size: 0.66rem; margin-top: 0.1rem; }
  .ann-popup-footer { flex-direction: column; align-items: stretch; text-align: center; }
  .ann-popup-actions { flex-direction: column; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ann-badge,
  .ann-badge:not(.ann-theme-kerst),
  .ann-badge.ann-badge-docked,
  .ann-popup[open] { animation: none; }
  .ann-badge { transition: none; }
}