/* ============================================================
   WELKOMSTGIDS — private, link-only guest guide
   Migrated from the Casa La Fuente Design System welcome-guide UI kit.
   Typography intentionally reuses the same scale as the rest of the
   site (fs-h2/h3/lead/body/sm/label) instead of introducing its own —
   only the cover title borrows --fs-display, matching the homepage hero.
   ============================================================ */

.clf-guide__layout {
  display: flex;
  gap: var(--space-10);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-6) var(--space-20);
  align-items: flex-start;
}

.clf-guide__sidebar {
  flex: 0 0 220px;
  position: sticky;
  top: var(--space-8);
  display: none;
}
@media (min-width: 900px) {
  .clf-guide__sidebar { display: block; }
}
.clf-guide__sidebar-inner { display: flex; flex-direction: column; gap: 4px; }
#clf-guide-sidebar-links { display: flex; flex-direction: column; gap: 4px; }
.clf-guide__sidebar-search {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--text-body);
  background: var(--sand-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  margin-bottom: var(--space-4);
}
.clf-guide__sidebar-search:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.clf-guide__nav-group-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--clay-600);
  margin: var(--space-6) 0 var(--space-2);
}
.clf-guide__nav-group-label:first-child { margin-top: 0; }
.clf-guide__nav-link {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--text-body);
  text-decoration: none;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  line-height: 1.4;
}
.clf-guide__nav-link:hover { background: var(--sand-100); color: var(--text-heading); }
.clf-guide__nav-link--active { background: var(--clay-100); color: var(--clay-900); font-weight: 700; }
.clf-guide__nav-link--hidden { display: none; }

.clf-guide__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: 760px;
}

/* Marks the handover from "Het huis" to "De omgeving" — content.gap
   already gives it room on both sides, so no extra margin here. */
.clf-guide__chapter-divider { display: flex; align-items: center; justify-content: center; gap: 16px; }
.clf-guide__chapter-divider-line { display: none; flex: 1 1 auto; height: 1px; background: var(--border); }
.clf-guide__chapter-divider-label { flex: 0 0 auto; font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--clay-600); }

/* ---- Cover — reuses .clf-cover (same markup as the homepage hero, in    ---- */
/* ---- layout.css) so the two stay visually identical; only the subtitle ---- */
/* ---- and address block below are specific to the guide.                ---- */
.clf-cover__subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-h2);
  color: #fff;
  line-height: var(--lh-tight);
  text-shadow: var(--shadow-over-img);
  margin: -4px 0 0;
}
.clf-guide__cover-address { margin-top: 4px; }
.clf-guide__cover-address-label { font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--clay-300); margin-bottom: 8px; text-shadow: var(--shadow-over-img); }
.clf-guide__cover-address-name { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; color: #fff; margin-bottom: 4px; text-shadow: var(--shadow-over-img); }
.clf-guide__cover-address-row { display: flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: var(--fs-sm); color: #fff; text-shadow: var(--shadow-over-img); text-decoration: none; transition: var(--transition-color); }
.clf-guide__cover-address-row:hover { color: var(--clay-300); }
.clf-guide__cover-address-row svg { flex: 0 0 auto; color: var(--clay-300); }

/* Language switcher — soft rounded badges over the cover, top-right. */
.clf-guide__lang-switch {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  z-index: 5;
  display: flex;
  gap: 6px;
}
.clf-guide__lang-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: rgba(20, 14, 8, 0.35);
  backdrop-filter: blur(2px);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: var(--transition-color);
}
.clf-guide__lang-btn:hover { background: rgba(20, 14, 8, 0.55); border-color: rgba(255, 255, 255, 0.8); }
.clf-guide__lang-btn.is-active { background: var(--clay-600); border-color: var(--clay-600); color: #fff; }
@media (min-width: 900px) {
  .clf-guide__lang-switch { top: var(--space-6); right: var(--space-6); }
  .clf-guide__lang-btn { width: 38px; height: 38px; font-size: 12px; }
}

/* ---- Section shell ---- */
.clf-guide__section { display: flex; flex-direction: column; gap: var(--space-6); }
.clf-guide__section--center { align-items: center; text-align: center; }
.clf-guide__section-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.clf-guide__section--center .clf-guide__label,
.clf-guide__section--center .clf-guide__title { text-align: center; }

.clf-guide__label { font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--accent); margin: 0; }
.clf-guide__title { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--fs-h2); color: var(--text-heading); line-height: var(--lh-tight); margin: 4px 0 0; }
.clf-guide__place-name { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--fs-h3); color: var(--text-heading); margin: 0; }
.clf-guide__place-name--city { font-weight: 700; }

/* Quiet, same-size-as-body name for a quick-reference place inside a
   .clf-guide__card/.clf-guide__tip (a supermarket, a restaurant in a
   town list) — .clf-guide__place-name is reserved for places that get
   a full write-up, so a long list of these doesn't turn into a wall of
   large italic headings. */
.clf-guide__place-title { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 700; color: var(--text-heading); margin: 0; }

.clf-guide__pin-icon { flex: 0 0 auto; }

.clf-guide__place-address { display: flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-size: var(--fs-caption); color: var(--text-muted); margin: 4px 0 0; }
.clf-guide__place-address .clf-guide__pin-icon { color: var(--accent); }
.clf-guide__place-address a { color: inherit; text-decoration: none; transition: var(--transition-color); }
.clf-guide__place-address a:hover { color: var(--clay-600); text-decoration: underline; }

/* Keeps a place-name heading and its address line close together —
   without this, .clf-guide__section's flex gap (24px) lands between
   them as if they were unrelated blocks. */
.clf-guide__place-header { display: flex; flex-direction: column; gap: 4px; }
.clf-guide__lead { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--espresso-500); margin: 0; }
.clf-guide__body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); margin: 0; }
.clf-guide__body-sm { font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-body); margin: 0; }
.clf-guide__signoff { font-family: var(--font-display); font-style: italic; font-size: var(--fs-h3); color: var(--text-heading); margin: 0; }
.clf-guide__ph { color: var(--accent); font-style: italic; }
.clf-guide__accent-rule { display: none; width: 40px; height: 2px; background: var(--clay-600); border: 0; }
.clf-guide__accent-rule--sm { width: 24px; }

.clf-guide__grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.clf-guide__grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 640px) {
  .clf-guide__grid-2, .clf-guide__grid-3 { grid-template-columns: 1fr; }
}

.clf-guide__card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--pad-card); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 10px; }
.clf-guide__card p:last-child { margin: 0; }

.clf-guide__cat { display: flex; flex-direction: column; gap: 10px; }

.clf-guide__tip { border-left: 2px solid var(--clay-600); padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

.clf-guide__callout { border-left: 2px solid var(--clay-600); padding-left: 20px; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
.clf-guide__callout strong { color: var(--text-heading); }

.clf-guide__bullets { margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.clf-guide__bullets li { list-style: none; display: flex; gap: 14px; align-items: flex-start; font-family: var(--font-sans); font-size: var(--fs-sm); line-height: 1.6; color: var(--text-body); }
.clf-guide__bullets li::before { content: ""; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--clay-600); margin-top: 10px; }
.clf-guide__bullets strong { color: var(--text-heading); }

/* A named place with its full address written out — restaurants, shops,
   viewpoints. Reuses the .clf-guide__tip left-border look so a long run
   of these (e.g. a town's food list) doesn't turn into a wall of boxes. */
.clf-guide__place-list { margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.clf-guide__place-list .clf-guide__tip { margin: 0; }

/* ---- Steps ---- */
.clf-guide__steps { display: flex; flex-direction: column; }
.clf-guide__step { display: flex; gap: 22px; padding-bottom: var(--space-6); }
.clf-guide__step-n { font-family: var(--font-display); font-style: italic; font-size: var(--fs-body); color: var(--clay-300); line-height: 1.4; flex: 0 0 auto; width: 30px; text-align: right; }
.clf-guide__step p { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); margin: 0; }

/* ---- Photo & captioned photo ---- */
.clf-guide__photo { display: block; width: 100%; aspect-ratio: var(--ratio, 16/9); object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.clf-guide__captioned-photo { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.clf-guide__captioned-photo img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.clf-guide__captioned-photo figcaption { display: flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--text-body); }
.clf-guide__cap-num { font-family: var(--font-display); font-style: italic; font-size: var(--fs-body); color: var(--clay-300); flex: 0 0 auto; }

/* ---- Time card (check-in/out) ---- */
.clf-guide__time-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--pad-card); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 6px; }
.clf-guide__time { font-family: var(--font-display); font-style: italic; font-size: var(--fs-h2); color: var(--text-heading); line-height: var(--lh-tight); }
.clf-guide__time-card p { font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--text-body); margin: 0; }

/* ---- Info card (wifi) ---- */
.clf-guide__info-card { background: var(--bg-inverse); border-radius: var(--radius-xl); padding: var(--space-10); color: var(--card); }
.clf-guide__info-label { font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--clay-300); margin-bottom: var(--space-6); }
.clf-guide__info-row { margin-bottom: var(--space-5); }
.clf-guide__info-row:last-of-type { margin-bottom: var(--space-7); }
.clf-guide__info-key { font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--clay-300); margin-bottom: 6px; }
.clf-guide__info-val { font-family: var(--font-display); font-style: italic; font-size: var(--fs-h2); color: var(--card); }

/* ---- Checklist (toggleable) ---- */
.clf-guide__checklist { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.clf-guide__checklist-item { list-style: none; display: flex; gap: 18px; align-items: flex-start; cursor: pointer; }
.clf-guide__checklist-item--static { cursor: default; }
.clf-guide__checklist-item span:last-child { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); transition: var(--transition-color); }
.clf-guide__checklist-item strong { color: var(--text-heading); font-weight: 700; }
.clf-guide__checkbox { flex: 0 0 auto; width: 22px; height: 22px; border-radius: var(--radius-md); border: 1.5px solid var(--clay-600); margin-top: 3px; display: flex; align-items: center; justify-content: center; transition: var(--transition-color); }
.clf-guide__checkbox--static { border-color: var(--clay-300); }
.clf-guide__checklist-item--checked .clf-guide__checkbox { background: var(--clay-600); }
.clf-guide__checklist-item--checked .clf-guide__checkbox::after { content: ""; width: 10px; height: 7px; border-left: 2px solid var(--card); border-bottom: 2px solid var(--card); transform: rotate(-45deg) translate(1px, -1px); }
.clf-guide__checklist-item--checked span:last-child { color: var(--text-muted); }
[data-guide-checklist-strike] .clf-guide__checklist-item--checked span:last-child { text-decoration: line-through; }

/* ---- Sand panel (huisregels, closing) ---- */
.clf-guide__sand-panel { background: var(--sand-100); border-radius: var(--radius-xl); padding: var(--space-10); }
.clf-guide__sand-panel--center { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.clf-guide__insta-tag { font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--accent); margin: 0; }

/* ---- Contact card ---- */
.clf-guide__contact-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--pad-card); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 10px; }
.clf-guide__contact-card a { font-family: var(--font-sans); font-size: var(--fs-lead); font-weight: 700; color: var(--text-heading); text-decoration: none; }

/* ============================================================
   Mobile floating nav — bottom bar + slide-up panel with search.
   Mirrors the desktop sidebar's link list; hidden ≥900px where the
   sidebar itself takes over.
   ============================================================ */
.clf-guide__mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--space-5);
  display: flex;
  justify-content: center;
  z-index: 60;
  pointer-events: none;
}
.clf-guide__mobile-toggle {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--card);
  background: var(--bg-inverse);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 12px 22px;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
}
.clf-guide__mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20,14,8,0.45);
  z-index: 65;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.clf-guide__mobile-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: var(--bg-card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-lg);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-out);
  overscroll-behavior: contain;
}
.clf-guide__mobile-backdrop--open { opacity: 1; visibility: visible; }
.clf-guide__mobile-panel--open { transform: translateY(0); }
.clf-guide__mobile-panel-head { display: flex; align-items: center; gap: 10px; padding: var(--space-5) var(--space-5) var(--space-3); border-bottom: 1px solid var(--border); }
.clf-guide__mobile-search {
  flex: 1;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--text-body);
  background: var(--sand-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}
.clf-guide__mobile-search:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.clf-guide__mobile-close { flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: transparent; font-size: 20px; line-height: 1; color: var(--text-body); cursor: pointer; }
.clf-guide__mobile-panel-body { overflow-y: auto; overscroll-behavior: contain; padding: var(--space-4) var(--space-5) var(--space-8); display: flex; flex-direction: column; gap: 4px; }
.clf-guide__mobile-panel-body .clf-guide__nav-link { padding: 10px 12px; font-size: var(--fs-body); }
.clf-guide__nav-excerpt { display: block; font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--text-muted); text-decoration: none; padding: 0 12px 8px; margin-top: -4px; transition: var(--transition-color); }
a.clf-guide__nav-excerpt:hover { color: var(--clay-600); text-decoration: underline; cursor: pointer; }

@media (min-width: 900px) {
  .clf-guide__mobile-bar,
  .clf-guide__mobile-backdrop,
  .clf-guide__mobile-panel { display: none; }
}