/* 05-shell.css */
/* ============================================================
   5. NAVIGATION
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-fixed);
  background: var(--surface);
  border-bottom: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}

.navbar {
  height: var(--navbar-h);
}

/* The inner wrapper spans full viewport width so brand always sits at the
   true left edge and actions at the true right edge, regardless of the page's
   max-width container. We replicate the container's side-padding here. */
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--sp-4);
  box-sizing: border-box;
}
@media (min-width: 640px)  { .navbar__inner { padding-inline: var(--sp-6); } }
@media (min-width: 1024px) { .navbar__inner { padding-inline: var(--sp-8); } }

/* Desktop: CSS grid — brand far-left (auto), links centered (1fr, min-width:0),
   actions far-right (auto). min-width:0 on the links column is critical so
   grid doesn't let links overflow and push the other columns. */
@media (min-width: 768px) {
  .navbar__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    height: 100%;
    column-gap: var(--sp-4);
  }
  .navbar__brand  { /* grid column 1 — stays at the left edge */ }
  .navbar__links  {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    min-width: 0;
    overflow: visible;
  }
  .navbar__actions { /* grid column 3 — stays at the right edge */ }
}

/* Hide site name on narrow desktops so brand stays compact */
@media (min-width: 768px) and (max-width: 1099px) {
  .navbar__site-name { display: none !important; }
}
@media (min-width: 1100px) {
  .navbar__site-name { display: block; }
}

/* .navbar__actions — right-side cluster: fav | itin | settings | hamburger */
.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* On mobile the nav links are hidden; actions flex stays visible */
@media (max-width: 767.98px) {
  .navbar__links { display: none; }
}

.navbar__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--text);
}

.navbar__logo {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  object-fit: cover;
}



.navbar__site-name {
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  color: var(--primary);
  display: none;
  white-space: nowrap;
}

/* Brand pinned to far-left at all desktop widths so the site name never
   shifts toward center when the nav links wrap. */
.navbar__brand { flex-shrink: 0; }

@media (min-width: 480px) {
  .navbar__site-name { display: block; }
}

.navbar__links {
  display: none;
  align-items: center;
  gap: var(--sp-1);
}

@media (min-width: 768px) {
  .navbar__links { display: flex; }
}

/* Force every link inside the navbar (including :visited) to use the muted
   text colour so navbar entries don't flip to the global anchor colour
   (var(--primary)) on pages whose stylesheets aren't first-loaded yet. The
   `:visited` selector is necessary because browsers occasionally apply a
   stale visited-link style on the destinations page. */
.navbar a,
.navbar a:visited {
  color: var(--text-muted);
}

.navbar__link {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) clamp(6px, 0.6vw, var(--sp-3));
  border-radius: var(--radius-full);
  font-size: clamp(0.68rem, 0.9vw, var(--fs-sm));
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.navbar__link:hover,
.navbar__link:visited:hover {
  background: var(--primary-50);
  color: var(--primary);
}

.navbar__link--active,
.navbar__link--active:visited {
  background: var(--primary-50);
  color: var(--primary);
  font-weight: var(--fw-semibold);
}

/* Admin config button */






@media (min-width: 768px) {
  
}

/* Settings grid button in navbar */
.navbar__settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.navbar__settings-btn:hover,
.navbar__settings-btn[aria-expanded="true"] {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}


/* ============================================================
   CONFIG PANEL (compact popover)
   ============================================================ */
.config-panel {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  pointer-events: none;
  visibility: hidden;
  transition: visibility var(--transition-base);
}

.config-panel.is-open {
  pointer-events: all;
  visibility: visible;
}

.config-panel__overlay {
  position: absolute;
  inset: 0;
  background: transparent;
}

.config-panel__popover {
  position: absolute;
  top: 60px;
  right: var(--sp-4);
  width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top right;
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.config-panel.is-open .config-panel__popover {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.config-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: var(--sp-1);
}

.config-panel__heading {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.config-panel__close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.config-panel__close:hover { background: var(--surface-2); }

.config-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--border-light);
}

.config-section--last {
  border-bottom: none;
  padding-bottom: var(--sp-1);
}

.config-section__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-light);
}

.config-font-btns,
.config-lang-btns {
  display: flex;
  gap: var(--sp-2);
}

.config-font-btn {
  flex: 1;
  padding: var(--sp-1) var(--sp-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-base);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.config-font-btn.is-active,
.config-font-btn:hover {
  border-color: var(--primary);
  background: var(--primary-50);
  color: var(--primary);
}

.config-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-sm);
  font-family: var(--font-base);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  align-self: flex-start;
}

.config-toggle-btn[aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--primary-50);
  color: var(--primary);
}

/* Language collapsible section */
.config-section--lang {
  gap: 0;
}

.config-lang-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  gap: var(--sp-2);
}

.config-lang-chevron {
  flex-shrink: 0;
  color: var(--text-light);
  transition: transform var(--transition-base);
}

.config-lang-toggle[aria-expanded="true"] .config-lang-chevron {
  transform: rotate(180deg);
}

.config-lang-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--sp-2);
  overflow: hidden;
}

.config-lang-list[hidden] { display: none; }

.config-lang-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text);
  font-size: var(--fs-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.config-lang-item:hover {
  background: var(--primary-50);
  color: var(--primary);
}

.config-lang-item.is-active {
  background: var(--primary-50);
  color: var(--primary);
  font-weight: 600;
}
.config-lang-item.is-active::after {
  content: "✓";
  margin-left: auto;
  font-weight: 700;
}

/* Keep old 3-btn row class for any remnant */




.config-terms-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--primary);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.config-terms-link:hover { text-decoration: underline; }

/* Auth links inside the settings popover (replaces the old .navbar__auth
   slot — keeps the navbar right-side compact). */
.config-section--auth {
  gap: var(--sp-1);
}

.config-auth-form {
  margin: 0;
  display: block;
}

.config-auth-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  font-family: var(--font-base);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.config-auth-link:hover {
  background: var(--primary-50);
  color: var(--primary);
}

.config-auth-link--cta {
  background: var(--primary);
  color: var(--text-on-primary);
}

.config-auth-link--cta:hover {
  background: var(--primary-light);
  color: var(--text-on-primary);
}

.config-auth-link--logout {
  color: var(--text-muted);
}

.config-auth-link--logout:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* ============================================================
   GLOBAL SEARCH OVERLAY — triggered from the navbar search pill,
   centered modal with a 90%-opaque black backdrop.
   ============================================================ */
html.site .site-search {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;        /* centrado vertical */
  justify-content: center;    /* centrado horizontal */
  padding: var(--sp-6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 260ms ease, visibility 0s linear 260ms;
}

html.site .site-search.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 260ms ease;
}

html.site .site-search__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* No box — the content floats centred over the dark backdrop. */
html.site .site-search__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  text-align: center;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  transform: translateY(-14px);
  opacity: 0;
  transition: transform 320ms cubic-bezier(.16, 1, .3, 1), opacity 240ms ease;
}

html.site .site-search.is-open .site-search__card {
  transform: translateY(0);
  opacity: 1;
}

html.site .site-search__title {
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  /* nudge right by half the tracking so the word stays optically centred */
  text-indent: 0.175em;
  color: rgba(255, 255, 255, 0.7);
}

/* Close — floating in the top-right corner of the viewport. */
html.site .site-search__close {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

html.site .site-search__close:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  transform: rotate(90deg);
}

/* The input is just a single horizontal line. */
html.site .site-search__field {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.35);
  padding-bottom: var(--sp-3);
  transition: border-color var(--transition-base);
}

html.site .site-search__field:focus-within {
  border-color: rgba(255, 255, 255, 0.85);
}

html.site .site-search__icon {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.6);
}

html.site .site-search__input {
  flex: 1;
  width: 100%;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.96);
  font-size: var(--fs-2xl);
  font-weight: 500;
  text-align: center;
}

html.site .site-search__input::placeholder {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 400;
}

html.site .site-search__input:focus { outline: none; }

html.site .site-search__submit {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

html.site .site-search__submit:hover { color: #fff; transform: scale(1.12); }
html.site .site-search__submit:active { transform: scale(0.94); }

html.site .site-search__hint {
  margin: var(--sp-5) 0 0;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 480px) {
  html.site .site-search__title { font-size: var(--fs-2xl); }
  html.site .site-search__input { font-size: var(--fs-xl); }
}

@media (prefers-reduced-motion: reduce) {
  html.site .site-search,
  html.site .site-search__card {
    transition: opacity 120ms ease;
    transform: none;
  }
}

/* ============================================================
   DARK MODE (applied via .dark class on <html>)
   ============================================================ */
html.dark {
  /* Brand — deeper, richer emeralds for cultural/luxurious feel */
  --primary:        #2a8a5a;
  --primary-light:  #3aa66e;
  --primary-dark:   #15532f;
  --primary-50:     #0d2218;
  --primary-100:    #142e20;

  --secondary:      #c46330;
  --secondary-light:#d4783f;
  --secondary-dark: #8e4218;

  --accent:         #d89818;
  --accent-light:   #e8ad32;
  --accent-dark:    #a87810;

  /* Neutrals — warm dark jungle */
  --bg:             #0a1610;
  --surface:        #121e15;
  --surface-2:      #18281c;
  --surface-3:      #1f3424;
  --border:         #2a4030;
  --border-light:   #344a3a;

  /* Text — warm cream-white */
  --text:           #ecf2e6;
  --text-muted:     #a3bda9;
  --text-light:     #7a9482;
  --text-on-primary:#ffffff;
  --text-on-accent: #0a1610;
}

/* HIGH CONTRAST — light (WCAG AAA, hardcoded) */
html.high-contrast {
  --primary:        #003a7a;
  --primary-light:  #0055b8;
  --primary-dark:   #001f4a;
  --primary-50:     #e6efff;
  --primary-100:    #ccdfff;

  --secondary:      #a00000;
  --secondary-light:#cc0000;
  --secondary-dark: #6a0000;

  --accent:         #a85800;
  --accent-light:   #d47218;
  --accent-dark:    #7a3f00;

  --bg:             #ffffff;
  --surface:        #ffffff;
  --surface-2:      #f4f4f4;
  --surface-3:      #e8e8e8;
  --border:         #000000;
  --border-light:   #333333;

  --text:           #000000;
  --text-muted:     #1a1a1a;
  --text-light:     #333333;
  --text-on-primary:#000000;
  --text-on-accent: #ffffff;
}

/* HIGH CONTRAST — dark (WCAG AAA, hardcoded) */
html.dark.high-contrast {
  --primary:        #ffd700;
  --primary-light:  #ffe54a;
  --primary-dark:   #d4af00;
  --primary-50:     #332b00;
  --primary-100:    #4d4100;

  --secondary:      #ff8c1a;
  --secondary-light:#ffa54a;
  --secondary-dark: #cc6a00;

  --accent:         #00e5ff;
  --accent-light:   #4af0ff;
  --accent-dark:    #00b8cc;

  --bg:             #000000;
  --surface:        #0a0a0a;
  --surface-2:      #1a1a1a;
  --surface-3:      #262626;
  --border:         #ffffff;
  --border-light:   #cccccc;

  --text:           #ffffff;
  --text-muted:     #f0f0f0;
  --text-light:     #d4d4d4;
  --text-on-primary:#000000;
  --text-on-accent: #000000;
}

/* High contrast banner & footer overrides — solid colors, no gradient */
html.high-contrast .welcome-banner,
html.high-contrast .page-hero--gradient {
  background: var(--primary);
}
html.dark.high-contrast .welcome-banner,
html.dark.high-contrast .page-hero--gradient {
  background: var(--bg);
  border-bottom: 2px solid var(--primary);
}

/* High-contrast hero text — heroes always have dark/colored backgrounds,
   so force white text (works on the HC primary/black hero backgrounds). */
html.high-contrast .welcome-banner__eyebrow,
html.high-contrast .welcome-banner__title,
html.high-contrast .welcome-banner__subtitle,
html.high-contrast .page-hero__title,
html.high-contrast .page-hero__subtitle,
html.high-contrast .place-header__title,
html.high-contrast .place-header__location,
html.dark.high-contrast .welcome-banner__eyebrow,
html.dark.high-contrast .welcome-banner__title,
html.dark.high-contrast .welcome-banner__subtitle,
html.dark.high-contrast .page-hero__title,
html.dark.high-contrast .page-hero__subtitle,
html.dark.high-contrast .place-header__title,
html.dark.high-contrast .place-header__location {
  color: #ffffff;
}

/* High-contrast breadcrumb readable on hero (white on dark/colored bg) */
html.high-contrast .breadcrumb__link,
html.high-contrast .breadcrumb__item,
html.high-contrast .breadcrumb__item--active,
html.high-contrast .breadcrumb__item::after,
html.dark.high-contrast .breadcrumb__link,
html.dark.high-contrast .breadcrumb__item,
html.dark.high-contrast .breadcrumb__item--active,
html.dark.high-contrast .breadcrumb__item::after {
  color: #ffffff;
}

/* High-contrast footer — make sure bg, text, borders and chip backgrounds
   all flip together. Default footer uses rgba(255,255,255,.X) for text and
   chip backgrounds, which would otherwise blend into the HC light surface. */
html.high-contrast .site-footer,
html.dark.high-contrast .site-footer {
  background: var(--surface);
  border-top: 2px solid var(--border);
  color: var(--text);
}

html.high-contrast .site-footer,
html.high-contrast .site-footer *,
html.dark.high-contrast .site-footer,
html.dark.high-contrast .site-footer * {
  color: var(--text);
}

html.high-contrast .footer__bottom,
html.dark.high-contrast .footer__bottom {
  border-top: 1px solid var(--border);
}

html.high-contrast .footer__social-link,
html.dark.high-contrast .footer__social-link {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
}

html.high-contrast .footer__social-link:hover,
html.dark.high-contrast .footer__social-link:hover {
  background: var(--primary);
  color: var(--text-on-primary);
}

html.high-contrast .footer__link:hover,
html.dark.high-contrast .footer__link:hover {
  color: var(--primary);
}


/* FONT SIZE OVERRIDES */
html.font-small  { font-size: 14px; }
html.font-normal { font-size: 17px; }
html.font-large  { font-size: 18px; }

/* Hamburger */
.navbar__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: var(--sp-2);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.navbar__hamburger:hover { background: var(--surface-2); }

@media (min-width: 768px) {
  .navbar__hamburger { display: none; }
}

.hamburger__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
  border-radius: var(--radius-full);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* Mobile Drawer */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  pointer-events: none;
  visibility: hidden;
  transition: visibility var(--transition-base);
}

.mobile-drawer.is-open {
  pointer-events: all;
  visibility: visible;
}

.mobile-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  opacity: 0;
  transition: opacity var(--transition-base);
  backdrop-filter: blur(2px);
}

.mobile-drawer.is-open .mobile-drawer__overlay { opacity: 1; }

.mobile-drawer__panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  gap: var(--sp-4);
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  /* panel itself does NOT scroll — the links list inside does */
  overflow: hidden;
}

.mobile-drawer.is-open .mobile-drawer__panel { transform: translateX(0); }

.mobile-drawer__close {
  align-self: flex-end;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: var(--surface-2);
  border: none;
  border-radius: var(--radius-md);
  color: var(--text);
  transition: background var(--transition-fast);
}

.mobile-drawer__close:hover { background: var(--surface-3); }

.mobile-drawer__links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  flex: 1 1 0%;
  overflow-y: auto;
  /* visually hide scrollbar track but keep functionality */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  min-height: 0; /* required so flex child can shrink below content size */
}

.mobile-drawer__link {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--text);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.mobile-drawer__link:hover {
  background: var(--primary-50);
  color: var(--primary);
}

/* ============================================================
   19. FOOTER
   ============================================================ */
.site-footer {
  background: var(--primary-dark);
  color: rgba(255,255,255,.8);
  padding-top: var(--sp-8);
}

html.dark .site-footer {
  background: linear-gradient(to bottom, #0a1610 0%, #08291a 100%);
  border-top: 1px solid #15532f;
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  padding-bottom: var(--sp-6);
}

@media (min-width: 640px) {
  .footer__inner { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .footer__inner { grid-template-columns: 2fr 1fr 1fr; }
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer__logo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.footer__tagline {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--surface);
}

.footer__description {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.6);
  line-height: var(--lh-relaxed);
}

.footer__heading {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,.5);
  margin-bottom: var(--sp-4);
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.footer__link {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.7);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__link:hover { color: #ffffff; }

.footer__social-links {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.footer__social-link {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,.1);
  border-radius: var(--radius-md);
  color: rgba(255,255,255,.7);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.footer__social-link:hover {
  background: var(--primary);
  color: #ffffff;
}

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: var(--sp-3);
}

.footer__copyright {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.45);
  text-align: center;
}

/* ============================================================
   FOOTER EXTRAS
   ============================================================ */
.footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
}

@media (min-width: 640px) {
  .footer__inner { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .footer__inner { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* ============================================================
   NAVBAR — AUTH SLOT (deprecated — auth entries now live inside the
   settings popover via .config-auth-link). Keeping the rule so any
   legacy markup elsewhere remains hidden.
   ============================================================ */




























/* ── Mobile drawer auth slot ────────────────────────────────── */
.mobile-drawer__auth {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.mobile-drawer__link--account {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}

.mobile-drawer__link--cta {
  background: var(--primary);
  color: var(--text-on-primary);
  border-radius: var(--radius-md);
  text-align: center;
  display: block;
  padding: var(--sp-3);
  font-weight: var(--fw-semibold);
}

.mobile-drawer__link--cta:hover { background: var(--primary-light); }

.mobile-drawer__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--text-muted);
  flex-shrink: 0;
}

.mobile-drawer__avatar--placeholder { padding: 6px; }

.mobile-drawer__logout-form { margin: 0; }

.mobile-drawer__logout-btn {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: var(--sp-3);
  border-radius: var(--radius-md);
  font-family: var(--font-base);
  font-size: var(--fs-md);
  cursor: pointer;
  min-height: 44px;
}

.mobile-drawer__logout-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}


/* ============================================================================
   NAVBAR QUICK-ACTION PILLS — favorites + itinerary icons with a count badge.
   Live in the navbar at the start of .navbar__links (LEFT of the menu items
   on desktop). Hidden in the mobile drawer instead.
   ============================================================================ */
/* .navbar__links-quick removed — pills now live in .navbar__actions */

.nav-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-full);
  color: var(--text-muted);
  background: transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-pill:hover,
.nav-pill:visited:hover,
.nav-pill--active,
.nav-pill--active:visited {
  background: var(--primary-50);
  color: var(--primary);
}

.nav-pill__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--secondary);
  color: #fff;
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--surface);
}
/* Explicit [hidden] override — required because `.nav-pill__badge` uses
   inline-flex which would otherwise win over the UA `[hidden]` rule. */
.nav-pill__badge[hidden] { display: none; }

/* High-contrast modes — make the badge clearly visible against any backdrop. */
html.high-contrast .nav-pill__badge {
  background: #a00000;
  color: #fff;
}
html.dark.high-contrast .nav-pill__badge {
  background: #ffd700;
  color: #000;
}

/* Mobile drawer — show a count chip next to the link label so the badge
   carries over to the drawer view. */
.mobile-drawer__link--badged {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.mobile-drawer__badge {
  margin-left: auto;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--secondary);
  color: #fff;
  font-size: 12px;
  font-weight: var(--fw-bold);
}
.mobile-drawer__badge[hidden] { display: none; }


/* ============================================================================
   NAVBAR LANGUAGE FLAG BUTTON
   ============================================================================ */
.nav-lang-btn-wrap {
  position: relative;
}
.nav-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 36px;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}
.nav-lang-btn:hover,
.nav-lang-btn[aria-expanded="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.nav-lang-btn__flag { font-size: 1.1rem; line-height: 1; }
.nav-lang-btn__chevron { opacity: .6; flex-shrink: 0; transition: transform var(--transition-fast); }
.nav-lang-btn[aria-expanded="true"] .nav-lang-btn__chevron { transform: rotate(180deg); }

.nav-lang-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  padding: 6px;
  list-style: none;
  margin: 0;
  z-index: 10002;
}
.nav-lang-dropdown[hidden] { display: none; }
.nav-lang-dropdown li { margin: 0; }
.nav-lang-dropdown li a {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 10px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text);
  font-size: var(--fs-sm);
  transition: background var(--transition-fast);
  white-space: nowrap;
}
.nav-lang-dropdown li a:hover { background: var(--surface-2); }
.nav-lang-dropdown li a[aria-current="true"] {
  background: var(--primary-50);
  color: var(--primary);
  font-weight: var(--fw-semibold);
}
/* -----------------------------------------------------------------------------
   21. MAP PAGE — restyle existing sidebar/markers under design-system scope
   ---------------------------------------------------------------------------
   The map page (templates/website/map.html) carries its own inline CSS for
   the Leaflet-driven layout. We layer design-system polish on top without disturbing
   the JS hooks (map-sidebar, map-search, map-filter-pill, etc.).
   --------------------------------------------------------------------------- */
html.site .map-sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border-light);
}
html.site .map-sidebar__title {
  font-family: var(--display-font);
  font-weight: var(--fw-semibold);
  letter-spacing: -.005em;
}
html.site .map-search { border-radius: var(--radius-full); }
html.site .map-search:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }