/* ============================================================
   Guwahati City Portal — design system
   Palette: deep blue (navbar, same family as map.guwahati.com)
            + saffron accent + white
   Font: system sans-serif stack only — no external font dependency
   ============================================================ */

:root {
  /* Shillong.com brand palette — single source of truth. Change a value here
     and it cascades everywhere; nothing below should ever hardcode a hex. */
  --color-primary: #2D6A4F;        /* pine green */
  --color-primary-dark: #22503B;   /* hover/active shade, ~75% of primary */
  --color-secondary: #D6336C;      /* cherry blossom pink */
  --color-secondary-dark: #B02A5A; /* hover shade; also the WCAG-AA-safe
     variant for pink used as TEXT on light backgrounds — raw --color-secondary
     text-on-white only measures 4.62:1 (barely clears the 4.5:1 AA floor) and
     text-on-(--color-bg) measures 4.22:1 (fails outright), so anywhere pink is
     a foreground text color on a light surface, use this darker shade instead.
     Reserve plain --color-secondary for button/badge backgrounds (paired with
     white text) and for borders, where the 3:1 non-text threshold applies. */
  --color-bg: #F5F5F0;             /* neutral page background */
  --color-white: #ffffff;
  --color-grey-light: #f8f9fa;
  --color-grey-dark: #333333;

  --bs-font-sans-serif: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

body {
  font-family: var(--bs-font-sans-serif);
  color: var(--color-grey-dark);
  background-color: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-primary);
}
h1 { font-size: 2.5rem; font-weight: 700; }
h2 { font-size: 1.8rem; }
p, li {
  line-height: 1.6;
}

/* Alternating light-grey section background, per Basel.com-style listing pages */
.gwh-section-alt {
  background-color: var(--color-grey-light);
}

/* ---------- Homepage vertical rhythm ---------- */
/* Single source of truth for the gap between homepage sections — every
   section (hero through the last one before the footer) gets exactly this
   much space below it, nothing else. Any section-specific breathing room
   (e.g. the navy stats bar's own padding) belongs on an *inner* wrapper,
   never on the element carrying this class, or the gaps stop being uniform. */
.gwh-section {
  margin-bottom: 120px;
  /* Establishes a new block-formatting context so a child's negative margin
     (e.g. Bootstrap's .row.g-3/.g-4 gutter rows, which use margin-top:-Npx)
     can never collapse through and silently shrink the 120px gap above this
     section — confirmed this actually happens without it: the "Quick
     Links" and "Recent Reports" sections both start with a gutter .row as
     their first child, which ate 16px/24px off the preceding gap. */
  display: flow-root;
}
@media (max-width: 575px) {
  .gwh-section {
    margin-bottom: 64px;
  }
}

/* ---------- Shared section-heading style ---------- */
/* One step up from the old .h4-class convention (1.5rem) used across the
   homepage and main listing pages. Single shared class instead of repeating
   this per section, so a future size/alignment tweak only happens here. */
.gwh-section-heading {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  color: var(--color-primary);
}
/* Section headers that pair a centered title with a "View all" link: the
   link is pulled out of the centering flow via absolute positioning against
   this wrapper, rather than living in the same flex row as the heading
   (which would break true centering). */
.gwh-section-heading-row {
  position: relative;
  text-align: center;
}
.gwh-section-heading-row .gwh-section-heading {
  margin-bottom: 0;
}
.gwh-section-heading-row .gwh-view-all {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 575px) {
  /* Not enough room to float the link at this width — stack it below instead. */
  .gwh-section-heading-row .gwh-view-all {
    position: static;
    display: block;
    transform: none;
    margin-top: 0.5rem;
  }
}

/* 2-line clamp for card descriptions */
.gwh-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Key-info icon row (phone/website/hours) used on cards + detail sidebars */
.gwh-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  font-size: 0.85rem;
  color: var(--color-grey-dark);
}

/* ---------- Navbar ---------- */
.navbar.gwh-navbar {
  background-color: var(--color-primary) !important;
}
.gwh-navbar .navbar-brand .text-warning {
  color: var(--color-secondary) !important;
}
.gwh-navbar .nav-link:hover,
.gwh-navbar .nav-link:focus {
  color: var(--color-secondary) !important;
}

/* ---------- Buttons ---------- */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}
.btn-accent,
.btn-warning {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}
.btn-accent:hover,
.btn-warning:hover {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
  color: var(--color-white);
}

/* ---------- Hero ---------- */
.gwh-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}
/* Headings default to --color-primary (see top of file), which is invisible against
   this component's own navy background — override back to white here, same
   pattern already used by .gwh-detail-hero below. */
.gwh-hero h1,
.gwh-hero h2,
.gwh-hero h3 {
  color: var(--color-white);
}

/* ---------- Reusable dark-section helper ---------- */
/* Apply to any custom dark-background section so headings/paragraphs don't
   inherit the default navy heading color (which would be invisible). */
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark p {
  color: var(--color-white);
}
.section-dark .text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ---------- Cards ---------- */
.gwh-card {
  position: relative;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  overflow: hidden;
}
.gwh-card:hover {
  box-shadow: 0 0.75rem 1.5rem rgba(45, 106, 79, 0.18);
  transform: translateY(-3px);
}
.gwh-card .gwh-card-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-white);
  background-color: var(--color-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ---------- Quick links ---------- */
.gwh-quicklink {
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.gwh-quicklink:hover {
  box-shadow: 0 0.5rem 1rem rgba(45, 106, 79, 0.15);
  transform: translateY(-2px);
  border-color: var(--color-secondary) !important;
}

/* ---------- Stats bar ---------- */
.gwh-stats-bar {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.gwh-stats-bar .gwh-stat-number {
  font-size: 2rem;
  font-weight: 700;
  /* Not --color-secondary here: pink text on the --color-primary bar behind
     it measures ~1.4:1, nowhere near the 3:1 floor even for large text —
     size/weight alone already separates it from the label below. */
  color: var(--color-white);
}

/* ---------- #thisisguwahati grid ---------- */
.gwh-insta-tile {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  opacity: 0.85;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 1.5rem;
  border-radius: 0.5rem;
}

/* ---------- Newsletter ---------- */
.gwh-newsletter {
  background-color: #f4f6f8;
}

/* ---------- Card component (reused on all listing/grid pages) ---------- */
.gwh-card-cover {
  width: 100%;
  height: 250px;
  object-fit: cover;
}
.gwh-card-cover-placeholder {
  width: 100%;
  height: 250px;
  background-color: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gwh-card-title {
  font-weight: 700;
  color: var(--color-primary);
}
.gwh-card-cta {
  color: var(--color-white);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.gwh-card-cta:hover {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}

/* ---------- Events grid (Basel.com/en/events style cards) ---------- */
.events-grid {
  display: grid !important;
  gap: 16px;
  grid-template-columns: repeat(4, 1fr); /* desktop */
}
@media (max-width: 991px) { .events-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .events-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .events-grid { grid-template-columns: repeat(1, 1fr); } }

.basel-event-card {
  display: block;
  background: white;
  border: 1px solid #e8e8e8;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s;
}
.basel-event-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  color: inherit;
}

.bec-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f4f4f4;
}
.bec-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bec-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  background: var(--color-primary);
}

.bec-body { padding: 12px 14px 14px; }

.bec-date {
  font-size: 0.75rem;
  font-weight: 700;
  color: #111;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.bec-time {
  font-weight: 400;
  color: #888;
  font-size: 0.7rem;
  margin-left: 6px;
}

.bec-divider {
  margin: 8px 0;
  border-color: #eee;
  opacity: 1;
}

.bec-category {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #999;
  margin-bottom: 3px;
}

.bec-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #111;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.3em;
}

.bec-location {
  font-size: 0.72rem;
  color: #666;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bec-footer {
  font-size: 0.7rem;
  color: #888;
  min-height: 1.2em;
}
.bec-price {
  font-weight: 700;
  color: #111;
  font-size: 0.78rem;
}
.bec-price-note {
  font-weight: 400;
  color: #999;
  font-size: 0.65rem;
}

/* ---------- Detail page hero ---------- */
.gwh-detail-hero {
  position: relative;
  height: 50vh;
  min-height: 320px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}
.gwh-detail-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18, 41, 63, 0.85) 0%, rgba(18, 41, 63, 0.15) 60%);
}
.gwh-detail-hero .container {
  position: relative;
  z-index: 1;
  color: var(--color-white);
}
.gwh-detail-hero h1 {
  color: var(--color-white);
}

/* ---------- Full-screen map page ---------- */
.gwh-map-wrap {
  position: relative;
  height: calc(100vh - 56px);
  min-height: 480px;
}
.gwh-map-wrap #full-map {
  height: 100%;
  width: 100%;
}
.gwh-map-sidebar {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  bottom: 0.75rem;
  width: 280px;
  max-width: calc(100% - 1.5rem);
  background: var(--color-white);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
  z-index: 1000;
  overflow-y: auto;
  transition: transform 0.2s ease;
}
.gwh-map-sidebar.collapsed {
  transform: translateX(calc(-100% - 1rem));
}
.gwh-map-sidebar-toggle {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1001;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25);
}
.gwh-map-layers-panel {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1000;
  background: var(--color-white);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
  padding: 0.75rem 1rem;
}
.gwh-map-popup-link {
  color: var(--color-secondary);
  font-weight: 600;
  text-decoration: none;
}

/* ---------- Community photo wall (#thisisguwahati) — 9:16 reels-style grid ---------- */
.community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 3px;
  width: 100%;
}

@media (min-width: 992px) {
  .community-grid {
    grid-template-columns: repeat(10, 1fr);
  }
}
@media (min-width: 576px) and (max-width: 991px) {
  .community-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (max-width: 575px) {
  .community-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.community-thumb {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-primary);
}

.community-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
  display: block;
}

.community-thumb:hover img {
  transform: scale(1.05);
}

.community-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: white;
  font-size: 0.65rem;
  padding: 4px 6px;
  opacity: 0;
  transition: opacity 0.2s;
}

.community-thumb:hover .community-overlay {
  opacity: 1;
}

/* ---------- Community photo lightbox — full screen, no side gaps ---------- */
#community-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: none;
  align-items: center;
  justify-content: center;
}

#lb-image {
  height: 100vh;
  width: auto;
  max-width: 100vw;
  object-fit: contain;
  display: block;
}

#lb-embed {
  width: min(540px, 100vw);
  height: 100vh;
  overflow-y: auto;
  display: none;
}

#lb-prev,
#lb-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  font-size: 2.5rem;
  padding: 12px 18px;
  cursor: pointer;
  z-index: 10000;
  border-radius: 4px;
  transition: background 0.2s;
}
#lb-prev {
  left: 8px;
}
#lb-next {
  right: 8px;
}
#lb-prev:hover,
#lb-next:hover {
  background: rgba(255, 255, 255, 0.25);
}

#lb-close {
  position: fixed;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  z-index: 10000;
}

#lb-counter {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  z-index: 10000;
}

#lb-info {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: white;
  padding: 20px 16px 16px;
  text-align: center;
  z-index: 10000;
}

/* ---------- Footer ---------- */
footer.gwh-footer {
  background-color: var(--color-primary-dark);
}
footer.gwh-footer a.link-light:hover {
  /* Not --color-secondary here: pink on this footer's --color-primary-dark
     bg measures ~2:1, well under the 4.5:1 floor. White reads as a clear
     hover brighten against the link's default rgba(255,255,255,0.75). */
  color: #fff !important;
}
/* Safety net: Bootstrap's `.text-*-emphasis` utilities (e.g. .text-light-emphasis)
   resolve to a DARK color by default (they're meant to pair with a light/subtle
   background like .bg-light-subtle, not to mean "light-colored text") — using one
   inside this dark footer would be invisible again. Force it light here in case
   it gets reintroduced. */
footer.gwh-footer [class*="-emphasis"] {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* ============================================================
   Header redesign — floating (over hero) + sticky (on scroll)
   ============================================================ */

/* ---------- Homepage hero (full-bleed, slider) ---------- */
/* Gradient is the fallback background — shown as-is when zero images are
   uploaded; .hero-bg-single / .hero-slider sit on top (z-index 0, same
   stacking context) covering it once at least one image exists. */
.hero-section {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}
.hero-bg-single {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-slide.active {
  opacity: 1;
}
.hero-slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 8px;
}
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 0.2s;
}
.hero-dot.active {
  background: white;
}

/* ---------- Internal page hero (/visit, /business, /events, /map/report) ---------- */
/* Side-by-side text+image layout on a light background — no dark full-bleed
   image behind these anymore, so no header-offset padding is needed here;
   the sticky header shows immediately instead (see alwaysShowSticky). */
.page-hero-img-placeholder {
  width: 100%;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 1.3rem;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

/* ---------- Header (shared base) ---------- */
.site-header {
  top: 0;
  left: 0;
  right: 0;
  padding: 15px 0;
  display: flex;
  align-items: center;
}
.header-logo {
  display: inline-flex;
  align-items: center;
}
.header-nav {
  gap: 1.5rem;
}
.header-mobile-toggle {
  cursor: pointer;
  background: none;
  border: none;
  font-size: 1.5rem;
}

/* ---------- Main header (every page, on load) ---------- */
/* Homepage (.has-hero-header): position:absolute, transparent, overlays the
   hero photo — scrolls away with it since it's out of document flow.
   Every other page (.no-hero-header): position:static, solid background,
   sits in NORMAL DOCUMENT FLOW as the first element on the page — this is
   the actual fix. Earlier attempts kept it out-of-flow (absolute/fixed)
   everywhere and tried to hand-compute a matching content padding-top,
   which drifted out of sync with the header's real height three times.
   In-flow means the browser handles the offset automatically; there is
   nothing left to keep in sync. */
.site-header--floating {
  position: absolute;
  z-index: 100;
  height: 110px;
  background: transparent;
}
.no-hero-header .site-header--floating {
  position: static;
  background: var(--color-primary);
}
.site-header--floating .logo-main {
  height: 80px;
  width: auto;
}
.site-header--floating .header-nav a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
}
.site-header--floating .header-nav a:hover {
  color: rgba(255, 255, 255, 0.75);
}
.site-header--floating .header-mobile-toggle {
  color: white;
}
.site-header--floating .header-nav a.active,
.site-header--floating .header-nav .dropdown-toggle.active {
  color: var(--color-secondary);
  font-weight: 700;
}

/* ---------- Regular header (every page, always; homepage after scroll) ---------- */
.site-header--regular {
  position: fixed;
  z-index: 200;
  height: 70px;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.site-header--regular .logo-sticky {
  height: 40px;
  width: auto;
  display: block;
}
.site-header--regular .header-nav a {
  color: #000;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}
.site-header--regular .header-nav a:hover {
  /* --color-secondary-dark, not the base pink: this is real nav text on a
     white header background, where plain --color-secondary only measures
     4.62:1 — technically AA-passing but with almost no margin. */
  color: var(--color-secondary-dark);
}
.site-header--regular .header-mobile-toggle {
  color: #000;
}
.site-header--regular .header-nav a.active,
.site-header--regular .header-nav .dropdown-toggle.active {
  color: var(--color-secondary-dark);
}

/* ---------- Nav dropdowns (Explore / Businesses) ---------- */
/* Plain Bootstrap dropdown (data-bs-toggle="dropdown"), same click-to-open
   pattern already used by the account menu below — no hover-intent JS
   introduced, so behavior stays consistent across the header. Keyboard
   support (arrow keys, Home/End, Esc, aria-expanded sync) comes from
   bootstrap.bundle.min.js's Dropdown component for free. */
.nav-dropdown .dropdown-menu {
  margin-top: 0.5rem;
}
/* The dropdown-menu itself is always white/light regardless of which header
   (floating or regular) triggered it, but .header-nav a { color: white/black }
   above is a descendant selector that reaches right into it too — this
   overrides that back to a normal readable color for the menu's own items. */
.header-nav .dropdown-menu .dropdown-item {
  color: #212529;
  font-weight: 500;
}
.header-nav .dropdown-menu .dropdown-item:hover,
.header-nav .dropdown-menu .dropdown-item:focus {
  background-color: rgba(45, 106, 79, 0.08);
  color: var(--color-primary);
}
/* Current-page indication for the item itself — not Bootstrap's own
   .dropdown-item.active (a blue "selected" fill meant for menu-style
   pickers), which would otherwise collide with the same class name. */
.header-nav .dropdown-menu .dropdown-item.active {
  background-color: rgba(45, 106, 79, 0.08);
  color: var(--color-secondary-dark);
  font-weight: 700;
}
.dropdown-item-cta {
  color: var(--color-secondary-dark) !important;
  font-weight: 700 !important;
}
.dropdown-item-cta:hover,
.dropdown-item-cta:focus {
  background-color: rgba(214, 51, 108, 0.08) !important;
  color: var(--color-secondary-dark) !important;
}

/* ---------- Page content offset ---------- */
/* Homepage only: the floating header overlays the hero via position:absolute,
   so content needs no top offset. Every other page needs none either now —
   its main header is in normal flow (see .no-hero-header .site-header--floating
   above) and pushes content down on its own; the sticky header that replaces
   it on scroll is `fixed`, so by the time it's visible the page has already
   scrolled past where it would overlap. */
.has-hero-header .site-content {
  padding-top: 0;
}

/* ---------- Mobile nav slide-out (shared by both header states) ---------- */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
}
.mobile-nav-panel {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  background: white;
  z-index: 999;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}
.mobile-nav-panel a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
}
.mobile-nav-panel a.active {
  color: var(--color-secondary-dark);
}

/* ---------- Mobile nav accordion groups (Explore / Businesses) ---------- */
.mobile-nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 1.05rem;
  text-align: left;
}
.mobile-nav-group-toggle.active {
  color: var(--color-secondary-dark);
}
.mobile-nav-caret {
  font-size: 0.7rem;
  margin-left: 0.5rem;
  transition: transform 0.2s ease;
}
.mobile-nav-group-toggle[aria-expanded="true"] .mobile-nav-caret {
  transform: rotate(180deg);
}
.mobile-nav-group .collapse.show {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-left: 1rem;
  margin-top: 0.6rem;
}
.mobile-nav-panel .mobile-nav-sublink {
  font-size: 0.95rem;
  font-weight: 500;
}
.mobile-nav-panel .mobile-nav-cta {
  color: var(--color-secondary-dark);
  font-weight: 700;
}
.mobile-nav-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.5rem;
}
.mobile-nav-panel.open,
.mobile-nav-overlay.open {
  display: block;
}

/* ---------- Homepage static map-preview (replaces the embedded Leaflet
   mini-map — PageSpeed fix, see migration/generate_map_preview.js) ---------- */
.gwh-map-preview-link {
  cursor: pointer;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
  border-radius: 0.5rem;
}
.gwh-map-preview-link:hover,
.gwh-map-preview-link:focus-visible {
  opacity: 0.9;
  box-shadow: 0 0.5rem 1.25rem rgba(45, 106, 79, 0.25);
}

/* ---------- Homepage "Featured Tourist Spots" Basel-style mosaic grid ---------- */
/* Plain CSS Grid, deliberately not Bootstrap's .row/.col system, so it can't
   pick up flex/gutter behavior from Bootstrap 5 — the two coexist fine since
   nothing here shares a class name or selector specificity with Bootstrap. */
.gwh-mosaic-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 100%;
  margin-inline: auto;
}
/* >=992px: the block is a perfect square (height == width) — two equal
   rows via grid-template-rows instead of a fixed px height, so the row
   height is always exactly half the container's actual rendered width. */
@media (min-width: 992px) {
  .gwh-mosaic-grid {
    aspect-ratio: 1 / 1;
    grid-template-rows: 1fr 1fr;
  }
}
.gwh-mosaic-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0.5rem;
  text-decoration: none;
}
/* Cards 1 and 6 (first and last of the 6-card layout) span 2 columns so
   the 4+... pattern reads as 2-then-1-1 / 1-1-then-2 across the two rows —
   still degrades safely with 4 or 5 cards (see note below) since CSS Grid
   just leaves the remaining track empty rather than breaking. */
.gwh-mosaic-card:nth-child(1),
.gwh-mosaic-card:nth-child(6) {
  grid-column: span 2;
}
.gwh-mosaic-card img,
.gwh-mosaic-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}
.gwh-mosaic-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  background-color: var(--color-primary);
  color: var(--color-white);
}
.gwh-mosaic-card:hover img,
.gwh-mosaic-card:hover .gwh-mosaic-placeholder {
  transform: scale(1.05);
}
.gwh-mosaic-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 55%);
  pointer-events: none;
}
.gwh-mosaic-title {
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.75rem;
  z-index: 1;
  color: white;
  font-weight: 700;
  font-size: 1.05rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

@media (max-width: 991px) {
  /* The square constraint only applies >=992px (aspect-ratio is scoped to
     that same min-width above) — below it, natural fixed-px row heights. */
  .gwh-mosaic-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 240px;
  }
}

@media (max-width: 575px) {
  .gwh-mosaic-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }
  .gwh-mosaic-card:nth-child(1),
  .gwh-mosaic-card:nth-child(6) {
    grid-column: span 1;
  }
}

/* ---------- Uniform square-card grid (e.g. homepage Tour Packages) ---------- */
/* Same card visual treatment as .gwh-mosaic-card (image, dark overlay,
   title) but every card is independently square via aspect-ratio, rather
   than relying on the mosaic grid's 2-row/6-card wide-first/wide-last
   layout — for sections that want uniform squares instead. */
.gwh-square-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.gwh-square-grid .gwh-mosaic-card {
  aspect-ratio: 1 / 1;
}
/* Cancel .gwh-mosaic-grid's nth-child(1)/(6) wide-card rule, which is
   unscoped to that specific grid and would otherwise also match here. */
.gwh-square-grid .gwh-mosaic-card:nth-child(1),
.gwh-square-grid .gwh-mosaic-card:nth-child(6) {
  grid-column: span 1;
}
@media (max-width: 991px) {
  .gwh-square-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Tour Packages 6-tile asymmetric mosaic (homepage) ---------- */
/* Editorial-style grid (basel.com reference) — one tall portrait tile
   spanning the full height on the left, two square tiles top-right, two
   small squares + one wide tile bottom-right. Expressed as a 6-column,
   2-row grid so the bottom row can subdivide differently (2 narrow + 1
   wide) than the top row (2 even squares) while both still line up with
   the same overall 3-block width split as the tall tile on the left.
   Row proportions (1.1fr/0.9fr) and tile sizes are a judgment call made
   without the actual reference screenshot in hand — adjust if it doesn't
   match once you can compare side by side. */
.gwh-pkg-mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1.1fr 0.9fr;
  grid-template-areas:
    "t1 t1 t2 t2 t3 t3"
    "t1 t1 t4 t5 t6 t6";
  gap: 14px;
  min-height: 520px;
}
.gwh-pkg-mosaic .gwh-mosaic-card.tile-1 { grid-area: t1; }
.gwh-pkg-mosaic .gwh-mosaic-card.tile-2 { grid-area: t2; }
.gwh-pkg-mosaic .gwh-mosaic-card.tile-3 { grid-area: t3; }
.gwh-pkg-mosaic .gwh-mosaic-card.tile-4 { grid-area: t4; align-self: start; aspect-ratio: 1 / 1; }
.gwh-pkg-mosaic .gwh-mosaic-card.tile-5 { grid-area: t5; align-self: start; aspect-ratio: 1 / 1; }
.gwh-pkg-mosaic .gwh-mosaic-card.tile-6 { grid-area: t6; }

@media (max-width: 991px) {
  .gwh-pkg-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "t1 t1"
      "t2 t3"
      "t4 t5"
      "t6 t6";
    min-height: 0;
  }
  .gwh-pkg-mosaic .gwh-mosaic-card.tile-1 { aspect-ratio: 16 / 9; }
  .gwh-pkg-mosaic .gwh-mosaic-card.tile-2,
  .gwh-pkg-mosaic .gwh-mosaic-card.tile-3 { aspect-ratio: 1 / 1; }
  .gwh-pkg-mosaic .gwh-mosaic-card.tile-4,
  .gwh-pkg-mosaic .gwh-mosaic-card.tile-5 { align-self: stretch; aspect-ratio: 1 / 1; }
  .gwh-pkg-mosaic .gwh-mosaic-card.tile-6 { aspect-ratio: 16 / 9; }
}

/* ---------- Narrow section container (85% width, centered) ---------- */
/* Used instead of Bootstrap's .container for sections that shouldn't span
   full page width — narrower container means images render smaller at
   their natural aspect ratio, which is a real page-weight reduction on
   top of the thumbnail-generation work, not just a layout preference. */
.gwh-container-narrow {
  width: 85%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Homepage "Plan Your Trip" widget ---------- */
.gwh-plan-trip-panel {
  background: var(--color-grey-light);
  border-radius: 1rem;
  padding: 2.5rem 2rem;
}
.gwh-plan-trip-form {
  max-width: 900px;
  margin: 1.5rem auto 0;
}
.gwh-trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.75rem;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* ---------- /plan-trip destination picker ---------- */
.gwh-dest-group-primary {
  background: var(--color-grey-light);
  border-radius: 0.5rem;
  padding: 1rem;
}
.gwh-dest-thumb-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 0.6rem;
  height: 100%;
  text-align: center;
  cursor: pointer;
  background: var(--color-white);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.gwh-dest-thumb-card:has(input:checked) {
  border-color: var(--color-secondary);
  background: rgba(214, 51, 108, 0.08);
}
.gwh-dest-thumb-card img,
.gwh-dest-thumb-card .gwh-dest-thumb-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0.375rem;
}
.gwh-dest-thumb-card .gwh-dest-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: var(--color-grey-light);
}
.gwh-dest-thumb-card input[type="checkbox"] {
  margin: 0;
}
.gwh-dest-thumb-card span {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
}

/* ---------- Homepage intro statement ---------- */
.intro-statement .lead {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--color-grey-dark);
  font-weight: 400;
}
.intro-statement .lead strong {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 1.25rem;
  color: var(--color-primary);
}
@media (max-width: 575px) {
  .intro-statement .lead {
    font-size: 1rem;
  }
  .intro-statement .lead strong {
    font-size: 1.1rem;
  }
}

/* ============================================================
   Accessibility widget (header, top-right, every page)
   ============================================================ */
.a11y-widget {
  position: relative;
  margin-left: 0.5rem;
}
.a11y-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.site-header--floating .a11y-toggle {
  color: #fff;
}
.site-header--floating .a11y-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
}
.site-header--regular .a11y-toggle {
  color: #000;
}
.site-header--regular .a11y-toggle:hover {
  background: rgba(0, 0, 0, 0.08);
}
.a11y-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 240px;
  background: #fff;
  color: #212529;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
  padding: 1rem;
  z-index: 500;
}
.a11y-panel-group + .a11y-panel-group {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid #e9ecef;
}
.a11y-panel-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6c757d;
  margin-bottom: 0.5rem;
}
.a11y-option-btn {
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-radius: 0.35rem;
  border: 1px solid #dee2e6;
  background: #fff;
  color: #212529;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.a11y-option-btn[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.a11y-fontsize-row {
  display: flex;
  gap: 0.4rem;
}
.a11y-font-btn {
  flex: 1;
  padding: 0.4rem 0;
  border-radius: 0.35rem;
  border: 1px solid #dee2e6;
  background: #fff;
  color: #212529;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.a11y-font-sup {
  font-size: 0.7em;
  vertical-align: super;
}
.a11y-font-btn[aria-checked="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Visible keyboard focus everywhere the a11y widget is reachable — and as a
   sane site-wide default, since Bootstrap doesn't ship one for plain buttons. */
.a11y-toggle:focus-visible,
.a11y-option-btn:focus-visible,
.a11y-font-btn:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
}

/* ---------- Font-size preference (root multiplier; cascades via rem) ---------- */
html.a11y-font-small {
  font-size: 87.5%;
}
html.a11y-font-large {
  font-size: 118.75%;
}

/* ---------- High-contrast preference (black / white / yellow) ---------- */
/* Re-points the same custom properties every component in this file already
   draws from (see :root at the top) — surfaces that were --color-primary
   (headers, footer, stats bar, badges) go black, the accent that was
   --color-secondary (buttons, CTAs, links) goes yellow, and the page
   background/body text are forced to pure white/black. Photos are
   desaturated + contrast-boosted rather than hidden, so they don't fight
   the flat black/white/yellow palette around them. */
html.a11y-high-contrast {
  --color-primary: #000000;
  --color-primary-dark: #000000;
  --color-secondary: #FFD400;
  --color-secondary-dark: #FFD400;
  --color-bg: #ffffff;
  --color-white: #ffffff;
  --color-grey-light: #ffffff;
  --color-grey-dark: #000000;
}
html.a11y-high-contrast body {
  background: #fff !important;
  color: #000 !important;
}
html.a11y-high-contrast a {
  color: #000;
}
html.a11y-high-contrast .site-header--floating .header-nav a,
html.a11y-high-contrast .site-header--floating .a11y-toggle,
html.a11y-high-contrast .site-header--floating .header-mobile-toggle {
  color: #FFD400 !important;
}
html.a11y-high-contrast .dropdown-item-cta,
html.a11y-high-contrast .mobile-nav-panel .mobile-nav-cta {
  color: #000 !important;
  background-color: #FFD400 !important;
}
html.a11y-high-contrast footer.gwh-footer,
html.a11y-high-contrast footer.gwh-footer a,
html.a11y-high-contrast footer.gwh-footer [class*="-emphasis"] {
  color: #FFD400 !important;
}
html.a11y-high-contrast img,
html.a11y-high-contrast picture img,
html.a11y-high-contrast .hero-bg-single,
html.a11y-high-contrast .hero-slide {
  filter: grayscale(1) contrast(1.3);
}
html.a11y-high-contrast .btn,
html.a11y-high-contrast button:not(.a11y-toggle):not(.a11y-option-btn):not(.a11y-font-btn) {
  border: 2px solid #000 !important;
}
html.a11y-high-contrast *:focus-visible {
  outline: 3px solid #FFD400 !important;
  outline-offset: 2px;
}