/* Ported verbatim from visitrotterdam.com static/assets/css/components.css (no site-specific
   strings in the original; ".vr-dock" etc. renamed to ".vd-dock" for Visit Doha). */

/* =============================================================
   Third-party Voute global ticker widget (voute-ticker.js, loaded
   from voutedigital.com, shared across the Voute Digital portfolio).
   Its own injected styles pad the controls to 0, which crams the
   region dropdown and buttons against the bar's edges. Cannot edit
   the shared script from this site, so override visually here
   instead: safe, standard practice for third-party widget styling.
   ============================================================= */
.vgt-controls {
  padding: 6px 10px !important;
  gap: 8px !important;
}

/* =============================================================
   Cookie consent bar. Direct child of <body>, closed before any
   other markup, never wraps the dock/pill/header, so hiding it
   with display:none can never take other fixed elements down
   with it. See CLAUDE.md "cookie-bar structuur altijd controleren".
   ============================================================= */
.cookie-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-cookie-bar);
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
  padding: 18px clamp(18px, 4vw, 40px);
  background: var(--ink);
  color: rgba(255, 255, 255, 0.88);
  box-shadow: 0 -8px 30px rgba(22, 49, 63, 0.22);
}

.cookie-bar-text {
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 640px;
  margin: 0;
}

.cookie-bar-text a {
  color: #fff;
  text-decoration: underline;
}

.cookie-bar-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cookie-bar-actions button {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.03em;
  padding: 10px 20px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

#cookieAccept {
  background: var(--accent-600);
  border-color: var(--accent-600);
}

#cookieAccept:hover,
#cookieAccept:focus-visible {
  background: var(--accent-700);
  border-color: var(--accent-700);
}

#cookieDecline:hover,
#cookieDecline:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
}

/* ===== STAY / BOOKING CTA BAR (prominent hotel-booking CTA, all pages) ===== */
.stay-cta-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  background: var(--ink);
  border-top: 1px solid var(--accent-600);
  padding: 20px clamp(18px, 4vw, 52px);
  text-align: center;
}

.stay-cta-bar-icon {
  color: var(--accent-500);
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.stay-cta-bar-text {
  margin: 0;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.88);
}

.stay-cta-bar-text strong {
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 15.5px;
  letter-spacing: 0.02em;
}

.stay-cta-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-600);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 26px;
  border-radius: var(--radius-xs);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.stay-cta-bar-btn:hover,
.stay-cta-bar-btn:focus-visible {
  background: var(--accent-700);
  transform: translateY(-2px);
}

/* ===== HEADER ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 clamp(18px, 4vw, 52px);
  height: var(--nav-height);
  background: rgba(251, 250, 248, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.site-logo {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 3px;
}

.site-logo-top {
  font-family: var(--font-serif);
  font-size: 19px;
  letter-spacing: 0.18em;
  color: var(--ink);
}

.site-logo-bot {
  font-size: 9.5px;
  letter-spacing: 0.42em;
  color: var(--stone);
  text-transform: uppercase;
}

.header-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: clamp(10px, 1.3vw, 28px);
}

/* Fixed-height header: a wrapped second row would sit against the bottom edge (1025-1090px) */
.header-nav > a,
.header-nav .nav-dropdown-toggle {
  white-space: nowrap;
}

.header-nav a {
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ink2);
  transition: color 0.18s ease;
}

.header-nav a:hover,
.header-nav a:focus-visible {
  color: var(--accent-600);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  font: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.header-nav .nav-dropdown-toggle {
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink2);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.18s ease;
}

.header-nav .nav-dropdown-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.18s ease;
}

.header-nav .nav-dropdown-toggle:hover,
.header-nav .nav-dropdown-toggle:focus-visible,
.header-nav .nav-dropdown.is-open .nav-dropdown-toggle {
  color: var(--accent-600);
}

.header-nav .nav-dropdown.is-open .nav-dropdown-toggle::after {
  transform: rotate(225deg) translateY(2px);
}

.vd-dock .nav-dropdown {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}

.vd-dock .nav-dropdown-toggle {
  flex: 1 1 0;
  min-width: 0;
}

.vd-dock .nav-dropdown.is-open .nav-dropdown-toggle {
  color: var(--ink);
  background: rgba(22, 49, 63, 0.05);
}

.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 200px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-md);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

/* :focus-visible, not :focus-within: Chromium (unlike WebKit) gives the
   toggle button real DOM focus on a tap/click, which made :focus-within
   keep the panel visually open even after is-open correctly went false.
   :focus-visible only matches keyboard-triggered focus, so it still reveals
   the panel for keyboard users tabbing onto the toggle without falsely
   matching a touch tap. Kept open on click either way via .is-open. */
.nav-dropdown-toggle:focus-visible + .nav-dropdown-panel,
.nav-dropdown.is-open .nav-dropdown-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Touch devices synthesize a mouseenter/:hover on tap that never clears (no
   pointer to "leave" with), which fights nav-dropdown.js's click-toggled
   .is-open class: tap 1 opens via :hover, the click handler's own state read
   then closes it again while the panel stays visually open via :hover, and
   tap 2 reopens it. Restrict :hover-reveal to real pointing devices so touch
   relies solely on the JS-driven .is-open class. */
@media (hover: hover) {
  .nav-dropdown:hover .nav-dropdown-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}

/* Invisible hover bridge: keeps the pointer within .nav-dropdown's hover
   chain while crossing the visual gap between the toggle and the panel, so
   the panel does not close mid-transit before the cursor reaches it. */
.header-nav .nav-dropdown-panel::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
  visibility: visible;
  pointer-events: auto;
}

.nav-dropdown-panel a {
  font-size: 13.5px;
  color: var(--ink2);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-dropdown-panel a:hover,
.nav-dropdown-panel a:focus-visible {
  background: var(--sand, rgba(0, 0, 0, 0.04));
  color: var(--accent-600);
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 30px;
  border-radius: var(--radius-xs);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn-primary {
  background: var(--accent-600);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--accent-700);
}

.btn-outline {
  border-color: var(--ink);
  color: var(--ink);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--ink);
  color: #fff;
}

.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

.btn-outline-light:hover,
.btn-outline-light:focus-visible {
  background: #fff;
  color: var(--ink);
}

@media (max-width: 640px) {
  .btn {
    padding: 12px 20px;
  }
}

/* =============================================================
   Mobile navigation: top dock + floating sections pill.

   Direct children of <body>. Never nest inside a cookie bar, modal
   or overlay wrapper: hiding that wrapper with display:none would
   take the whole nav down with it.

   Do NOT put overflow-x:hidden on html or body, see base.css.
   ============================================================= */

.vd-dock,
.vd-pill,
.vd-panel {
  display: none;
}

@media (max-width: 1024px) {
  .site-header .header-nav {
    display: none;
  }

  main {
    overflow-x: hidden;
  }

  body {
    padding-top: max(72px, calc(62px + env(safe-area-inset-top)));
  }

  /* --- top dock (Ibiza pattern: fixed TOP, not bottom) --- */
  .vd-dock {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-dock);
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    gap: 2px;
    padding: max(6px, env(safe-area-inset-top)) 4px 6px;
    background: rgba(251, 250, 248, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
  }

  .vd-dock__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 5px 4px;
    border-radius: var(--radius-2xl);
    color: var(--stone);
    text-decoration: none;
    transition: color 0.16s ease, background-color 0.16s ease;
  }

  .vd-dock__item svg {
    width: 22px;
    height: 22px;
    flex: none;
    stroke-width: 1.75;
  }

  .vd-dock__item span {
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vd-dock__item--active,
  .vd-dock__item:hover,
  .vd-dock__item:focus-visible {
    color: var(--ink);
    background: rgba(22, 49, 63, 0.05);
  }

  .vd-dock .nav-dropdown-panel {
    position: fixed;
    top: max(78px, calc(68px + env(safe-area-inset-top)));
    left: 12px;
    right: 12px;
    width: auto;
    min-width: 0;
    max-height: 65vh;
    overflow-y: auto;
    transform: translateY(-8px);
  }

  .vd-dock .nav-dropdown-toggle:focus-visible + .nav-dropdown-panel,
  .vd-dock .nav-dropdown.is-open .nav-dropdown-panel {
    transform: translateY(0);
  }

  @media (hover: hover) {
    .vd-dock .nav-dropdown:hover .nav-dropdown-panel {
      transform: translateY(0);
    }
  }

  /* --- floating language/sections pill --- */
  .vd-pill {
    position: fixed;
    top: calc(86px + env(safe-area-inset-top));
    right: 12px;
    z-index: var(--z-lang-pill);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    background: rgba(251, 250, 248, 0.9);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
  }
}

/* ===== BACK TO TOP ===== */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: var(--z-back-top);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  border: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  box-shadow: var(--shadow-md);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, background-color 0.18s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--accent-600);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 1024px) {
  .back-to-top {
    bottom: calc(20px + env(safe-area-inset-bottom));
  }
}

.moments-lightbox{position:fixed;inset:0;z-index:var(--z-lightbox);background:rgba(10,14,18,0.92);display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);}
.moments-lightbox[hidden]{display:none;}
.moments-lightbox__close,.moments-lightbox__prev,.moments-lightbox__next{position:absolute;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.12);color:#fff;border:none;border-radius:50%;font-size:28px;line-height:1;cursor:pointer;}
.moments-lightbox__close{top:16px;right:16px;}
.moments-lightbox__prev{left:16px;top:50%;transform:translateY(-50%);}
.moments-lightbox__next{right:16px;top:50%;transform:translateY(-50%);}
.moments-lightbox__close:hover,.moments-lightbox__prev:hover,.moments-lightbox__next:hover{background:rgba(255,255,255,0.24);}
.moments-lightbox__close[hidden],.moments-lightbox__prev[hidden],.moments-lightbox__next[hidden]{display:none;}
.moments-lightbox__figure{margin:0;max-width:min(90vw,900px);max-height:90vh;display:flex;flex-direction:column;align-items:center;gap:12px;}
.moments-lightbox__img{max-width:100%;max-height:70vh;object-fit:contain;border-radius:var(--radius-xl,8px);}
.moments-lightbox__img-fallback{color:#fff;font-size:14px;}
.moments-lightbox__caption{max-width:60ch;text-align:center;color:#fff;}
.moments-lightbox__name{display:block;font-weight:600;font-size:14px;margin:0 0 4px;}
.moments-lightbox__caption .moments-card-caption{margin:0;color:rgba(255,255,255,0.85);font-size:14px;line-height:1.5;}
.moments-lightbox__caption .moments-card-caption a{color:#fff;text-decoration:underline;text-underline-offset:2px;}
.moments-lightbox__counter{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,0.8);font-size:13px;margin:0;}
@media(max-width:520px){.moments-lightbox__prev,.moments-lightbox__next{font-size:22px;}}