/* =====================================================
   NAMIREMBE GUESTHOUSE -- CSS BRIDGE
   Maps HTML class names +" CSS design system selectors
   ===================================================== */

/* "-"-"- HEADER BRIDGE "-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"- */

/* .header-inner +' mirrors .nav-inner */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--container-2xl);
  margin-inline: auto;
  padding-inline: var(--space-6);
  gap: var(--space-4);
}

/* .header-logo +' mirrors .nav-logo */
.header-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}

/* .logo-mark +' now displays the actual logo image */
.logo-mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  transition: var(--transition-base);
}

.logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.logo-mark--light {
  filter: brightness(1.2);
}

.logo-mark--sm {
  width: 36px;
  height: 36px;
}

.header-logo:hover .logo-mark {
  transform: rotate(-3deg) scale(1.05);
}

/* .logo-text +' mirrors .nav-logo__text */
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  transition: var(--transition-color);
}

/* .logo-name +' mirrors .nav-logo__name */
.logo-name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: inherit;
}

/* .logo-sub +' mirrors .nav-logo__sub */
.logo-sub {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  opacity: 0.6;
}

/* Transparent header -- gradient scrim for text readability */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  transition: opacity var(--duration-slow);
}

.site-header.is-scrolled::before,
.site-header.scrolled::before,
.site-header--solid::before {
  opacity: 0;
}

.header-inner {
  position: relative;
  z-index: 1;
}

/* Transparent header coloring + text shadow for readability */
.site-header .logo-text,
.site-header .logo-name {
  color: var(--color-ivory);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.site-header .nav-link {
  color: var(--color-ivory);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.site-header .nav-link:hover {
  color: var(--color-ochre-light);
  background: rgba(255, 255, 255, 0.12);
}

.site-header .btn-phone {
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Scrolled state -- solid background, no shadows */
.site-header.is-scrolled,
.site-header.scrolled,
.site-header--solid {
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
}

.site-header.is-scrolled .logo-text,
.site-header.is-scrolled .logo-name,
.site-header.scrolled .logo-text,
.site-header.scrolled .logo-name,
.site-header--solid .logo-text,
.site-header--solid .logo-name {
  color: var(--color-earth);
  text-shadow: none;
}

.site-header.is-scrolled .nav-link,
.site-header.scrolled .nav-link,
.site-header--solid .nav-link {
  color: var(--color-earth-mid);
  text-shadow: none;
}

.site-header.is-scrolled .nav-link:hover,
.site-header.scrolled .nav-link:hover,
.site-header--solid .nav-link:hover {
  color: var(--color-ochre);
  background: var(--color-ochre-pale);
}

.site-header.is-scrolled .btn-phone,
.site-header.scrolled .btn-phone,
.site-header--solid .btn-phone {
  color: var(--color-earth-mid);
  text-shadow: none;
}

.site-header.is-scrolled .btn.btn-outline,
.site-header.scrolled .btn.btn-outline,
.site-header--solid .btn.btn-outline {
  border-color: var(--color-earth-mid);
  color: var(--color-earth-mid);
}

/* .header-nav +' mirrors .nav-links */
.header-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* .header-actions +' mirrors .nav-actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Phone button in header */
.btn-phone {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 0.875rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: inherit;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

.btn-phone:hover {
  background: var(--color-ochre-pale);
  color: var(--color-ochre-dark);
}

.btn-phone svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.site-header--transparent .btn-phone {
  color: var(--color-ivory);
}

.site-header.is-scrolled .btn-phone {
  color: var(--color-earth-mid);
}

/* Mobile menu button */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  border-radius: var(--radius-md);
  padding: var(--space-2);
  transition: var(--transition-fast);
  background: none;
  border: none;
}

.mobile-menu-btn:hover {
  background: var(--color-ochre-pale);
}

.mobile-menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: var(--radius-full);
  transition: transform var(--duration-base) var(--ease-in-out),
              opacity var(--duration-fast),
              width var(--duration-base) var(--ease-in-out);
}

/* .nav-link.active +' colour emphasis */
.nav-link.active {
  color: var(--color-ochre) !important;
}

/* Mobile drawer bridge */
.mobile-drawer {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: min(85vw, 360px);
  height: 100%;
  background: var(--color-ivory-warm);
  box-shadow: var(--shadow-2xl);
  flex-direction: column;
  /* Drawer must be well above the overlay AND the header */
  z-index: 700;
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out);
  /* No overflow here — let individual sections scroll */
  overflow: hidden;
}

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

.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-thin);
  flex-shrink: 0; /* never squash — always visible at the top */
  background: var(--color-ivory-warm);
  position: sticky;
  top: 0;
  z-index: 1;
}

.mobile-drawer-header .logo-text {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-earth);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.drawer-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--color-earth-light);
  transition: var(--transition-fast);
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-lg);
  flex-shrink: 0;
  position: relative;
}

/* Always render an × icon even if the button has no HTML content */
.drawer-close:empty::before {
  content: '\00d7'; /* × */
  font-size: 1.375rem;
  line-height: 1;
  display: block;
}

.drawer-close:hover {
  background: var(--color-ivory-dark);
  color: var(--color-earth);
}

.mobile-nav {
  flex: 1;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  overflow-y: auto; /* only this section scrolls */
  /* Neutralise conflicting rules from header.css .mobile-nav (legacy drawer implementation) */
  position: static;
  inset: auto;
  z-index: auto;
  pointer-events: auto;
}

/* Book a Room button inside mobile nav — add visual separation */
.mobile-nav .btn-block {
  margin-top: var(--space-3);
  width: 100%;
  display: block;
  text-align: center;
}

/* Theme toggle row inside mobile nav */
.theme-toggle-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-earth-light);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.mobile-theme-toggle-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-2);
  border-top: var(--border-thin);
}


.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--color-earth-mid);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  text-decoration: none;
  min-height: 48px;
}

.mobile-nav-link:hover {
  background: var(--color-ochre-pale);
  color: var(--color-ochre-dark);
}

.mobile-nav-divider {
  border: none;
  border-top: var(--border-thin);
  margin: var(--space-3) 0;
}

.mobile-drawer-footer {
  padding: var(--space-4) var(--space-5);
  border-top: var(--border-thin);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  flex-shrink: 0; /* always pinned to the bottom — never scrolls away */
  background: var(--color-ivory-warm);
}

.mobile-drawer-footer a {
  color: var(--color-earth-light);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mobile-drawer-footer a:hover {
  color: var(--color-ochre);
}

.mobile-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  /* Overlay sits above page content but BELOW the drawer (700) */
  z-index: 650;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-slow);
}

.mobile-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Responsive: show hamburger on mobile */
@media (max-width: 1023px) {
  .header-nav { display: none; }
  .mobile-menu-btn { display: flex; }
  .btn-phone { display: none; }
  /* Move Sign In + Book Now into the mobile drawer */
  .header-actions .btn { display: none; }
}

@media (max-width: 767px) {
  .header-inner { padding-inline: var(--space-4); }
  /* Show full brand name on one line: "Namirembe Guesthouse" */
  .logo-text {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.3em;
  }
  .logo-name { font-size: var(--text-sm); }
  /* Reset logo-sub so it looks like a continuation of the name */
  .logo-sub  {
    display: inline;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
    text-transform: none;
    opacity: 1;
  }
  .logo-mark { width: 32px; height: 32px; }
}


/* "-"-"- HERO SECTION "-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-earth);
  padding-top: var(--header-height);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  /* No pre-scale — parallax JS (animations.js) handles the movement.
     A pre-scale here fights with JS transform and causes misalignment. */
  transition: transform 12s var(--ease-out);
}

.hero:hover .hero-bg-img {
  transform: scale(1.03);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(30,13,26, 0.3) 0%,
    rgba(30,13,26, 0.6) 50%,
    rgba(30,13,26, 0.85) 100%
  );
}

.hero-content {
  position: relative;
  z-index: var(--z-raised, 2);
  text-align: center;
  color: var(--color-ivory);
  padding-block: var(--space-16);
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ochre-light);
  margin-bottom: var(--space-4);
}

.hero-heading {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 8vw, var(--text-6xl));
  font-weight: var(--weight-normal);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ivory);
  margin-bottom: var(--space-6);
}

.hero-heading em {
  font-style: italic;
  color: var(--color-ochre-light);
}

.hero-sub {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-md), 2vw, var(--text-xl));
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: rgba(251, 246, 250, 0.8);
  max-width: 48ch;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}

/* Scroll hint */
.hero-scroll-hint {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: rgba(251, 246, 250, 0.5);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  z-index: var(--z-raised, 2);
}

.scroll-arrow {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, rgba(251,246,250,0.5), transparent);
  animation: scroll-bounce 2s ease-in-out infinite;
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(8px); opacity: 0.4; }
}


/* "-"-"- BOOKING BAR (hero inline form) "-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"- */
.booking-bar {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  max-width: 720px;
  margin-inline: auto;
}

.booking-bar__field {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.booking-bar__field label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-ochre-light);
  margin-bottom: var(--space-1);
}

.booking-bar__field input,
.booking-bar__field select {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  font-size: var(--text-sm);
  color: var(--color-ivory);
  font-family: var(--font-body);
  min-height: 42px;
}

.booking-bar__field input:focus,
.booking-bar__field select:focus {
  outline: none;
  border-color: var(--color-ochre);
  background: rgba(255, 255, 255, 0.15);
}

.booking-bar__field select option {
  background: var(--color-earth);
  color: var(--color-ivory);
}

.booking-bar__btn {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .booking-bar {
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .booking-bar__field {
    width: 100%;
  }

  /* Hide scroll hint on mobile — the stacked booking bar already
     fills the lower hero area, causing the hint to overlap the button */
  .hero-scroll-hint {
    display: none;
  }
}


/* "-"-"- SECTION LABELS / TITLES / SUBTITLES "-"-"-"-"-"-"-"-"-"-"-"-"- */
.section-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ochre);
  display: inline-block;
  margin-bottom: var(--space-3);
}

.section-label.text-light {
  color: var(--color-ochre-light);
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-xl), 3.5vw, var(--text-3xl));
  font-weight: var(--weight-normal);
  line-height: var(--leading-snug);
  color: var(--color-earth);
  margin-bottom: var(--space-4);
}

.section-subtitle {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-earth-mid);
  max-width: 60ch;
}

.section-header--center .section-subtitle {
  margin-inline: auto;
}

.section-cta {
  text-align: center;
  margin-top: var(--space-10);
}


/* "-"-"- HIGHLIGHTS GRID "-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"- */
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.highlight-card {
  background: var(--color-ivory-warm);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  transition: var(--transition-base);
}

.highlight-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-ochre-pale);
}

.highlight-icon {
  font-size: 2rem;
  margin-bottom: var(--space-4);
}

.highlight-card h3 {
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
}

.highlight-card p {
  font-size: var(--text-sm);
  color: var(--color-earth-light);
  line-height: var(--leading-relaxed);
}

@media (max-width: 1023px) {
  .highlights-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 567px) {
  .highlights-grid { grid-template-columns: 1fr; }
  .section-highlights { padding-block: var(--space-12); }
}


/* "-"-"- ROOMS GRID (homepage preview) "-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"- */
.rooms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.room-card-skeleton {
  height: 320px;
  border-radius: var(--radius-lg);
}

@media (max-width: 1023px) {
  .rooms-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 567px) {
  .rooms-grid { grid-template-columns: 1fr; }
}


/* "-"-"- SPLIT LAYOUT (dining / conference strips) "-"-"-"-"-"-"-"- */
.container-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

.container-split--reverse {
  direction: rtl;
}

.container-split--reverse > * {
  direction: ltr;
}

.split-image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.split-image img {
  width: 100%;
  height: auto;
  min-height: 260px;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
  transition: transform var(--duration-slow) var(--ease-out);
}

.split-image:hover img {
  transform: scale(1.04);
}

.split-content {
  padding-block: var(--space-4);
}

.split-content p {
  margin-bottom: var(--space-6);
  line-height: var(--leading-relaxed);
}

/* Feature list */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-earth-mid);
}

.feature-list li::before {
  content: '';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--color-ochre-pale);
  color: var(--color-ochre-dark);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}

/* Conference capacities */
.conf-capacities {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.capacity-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-ochre-pale);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-5);
  min-width: 80px;
}

.capacity-badge strong {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-ochre-dark);
}

.capacity-badge span {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-earth-light);
}

@media (max-width: 767px) {
  .container-split {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .container-split--reverse {
    direction: ltr;
  }

  .split-image {
    max-height: 300px;
  }
}


/* "-"-"- TESTIMONIALS "-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"- */
.section-testimonials {
  background: var(--color-ivory-warm);
  background-image: var(--texture-grain);
  background-size: 256px 256px;
}

.testimonials-slider {
  display: flex;
  gap: var(--space-6);
  overflow: hidden;
  scroll-snap-type: x mandatory;
}

.testimonial-skeleton {
  min-width: 320px;
  height: 200px;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.slider-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: var(--border-thin);
  background: var(--color-ivory-warm);
  color: var(--color-earth-mid);
  font-size: var(--text-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
}

.slider-btn:hover {
  background: var(--color-ochre-pale);
  border-color: var(--color-ochre);
  color: var(--color-ochre-dark);
}

.slider-dots {
  display: flex;
  gap: var(--space-2);
}


/* "-"-"- CTA BAND "-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"- */
.section-cta-band {
  background: var(--color-earth);
  color: var(--color-ivory);
  padding-block: var(--space-16);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.section-cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--texture-grain);
  background-size: 256px 256px;
  opacity: 0.5;
  pointer-events: none;
}

.section-cta-band h2 {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
  color: var(--color-ivory);
  margin-bottom: var(--space-4);
}

.section-cta-band p {
  position: relative;
  z-index: 1;
  color: rgba(251, 246, 250, 0.75);
  font-size: var(--text-md);
  margin-bottom: var(--space-8);
}

.cta-actions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* CTA outline button -- light variant on dark backgrounds */
.section-cta-band .btn-outline,
.site-footer .btn-outline {
  color: var(--color-ivory);
  border-color: rgba(251, 246, 250, 0.5);
}

.section-cta-band .btn-outline:hover,
.site-footer .btn-outline:hover {
  background: rgba(251, 246, 250, 0.15);
  border-color: var(--color-ivory);
  color: var(--color-ivory);
}


/* "-"-"- FOOTER BRIDGE "-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"- */

/* .footer-inner +' mirrors .footer-body */
.footer-inner {
  position: relative;
  z-index: 1;
  padding-bottom: var(--space-16);
  display: grid;
  grid-template-columns: 1.6fr 2.4fr;
  gap: var(--space-12);
}

/* .footer-brand (same name, already defined) */

/* .footer-brand-text +' mirrors .footer-logo__text */
.footer-brand-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.footer-brand-text strong {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-ivory);
  line-height: 1.1;
}

.footer-brand-text span {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-ochre-light);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Footer brand header -- logo + name side by side */
.footer-brand > .logo-mark {
  align-self: flex-start;
}

/* When logo-mark + footer-brand-text are adjacent, make them a row */
.footer-brand > .logo-mark + .footer-brand-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.footer-tagline {
  font-family: var(--font-heading);
  font-style: italic;
  color: rgba(251, 246, 250, 0.60);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  max-width: 30ch;
}

/* .social-link +' mirrors .footer-social-link */
.footer-socials {
  display: flex;
  gap: var(--space-3);
}

.social-link {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: rgba(251, 246, 250, 0.08);
  border: 1px solid rgba(251, 246, 250, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ivory-dark);
  transition: var(--transition-base);
  text-decoration: none;
}

.social-link:hover {
  background: var(--color-ochre);
  border-color: var(--color-ochre);
  color: var(--color-white);
  transform: translateY(-2px);
}

.social-link svg {
  width: 16px;
  height: 16px;
}

/* .footer-links -- wraps the columns */
.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.2fr;
  gap: var(--space-8);
}

/* .footer-col +' column styling */
.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-col h4 {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ochre-light);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(193, 127, 36, 0.25);
}

.footer-col a {
  font-size: var(--text-sm);
  color: rgba(251, 246, 250, 0.65);
  transition: var(--transition-color);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer-col a:hover {
  color: var(--color-ochre-light);
}

.footer-col p {
  font-size: var(--text-sm);
  color: rgba(251, 246, 250, 0.65);
  line-height: var(--leading-relaxed);
}

/* .footer-newsletter +' newsletter column */
.footer-newsletter p {
  font-size: var(--text-sm);
  color: rgba(251, 246, 250, 0.65);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

/* .newsletter-form +' mirrors .footer-newsletter-form */
.newsletter-form {
  display: flex;
  gap: var(--space-2);
}

.newsletter-form input[type="email"] {
  flex: 1;
  padding: 0.625rem 1rem;
  background: rgba(251, 246, 250, 0.08);
  border: 1px solid rgba(251, 246, 250, 0.15);
  border-radius: var(--radius-md);
  color: var(--color-ivory);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  transition: border-color var(--duration-fast);
  min-height: 44px;
}

.newsletter-form input[type="email"]::placeholder {
  color: rgba(251, 246, 250, 0.35);
}

.newsletter-form input[type="email"]:focus {
  outline: none;
  border-color: var(--color-ochre);
  background: rgba(251, 246, 250, 0.12);
}

/* .footer-bottom */
.footer-bottom {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(251, 246, 250, 0.10);
  padding-block: var(--space-5);
}

.footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.footer-bottom p {
  font-size: var(--text-xs);
  color: rgba(251, 246, 250, 0.40);
}

/* .footer-legal */
.footer-legal {
  display: flex;
  gap: var(--space-4);
}

.footer-legal a {
  font-size: var(--text-xs);
  color: rgba(251, 246, 250, 0.40);
  transition: var(--transition-color);
  text-decoration: none;
}

.footer-legal a:hover {
  color: var(--color-ochre-light);
}

/* Responsive footer */
@media (max-width: 1023px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .footer-links {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

@media (max-width: 767px) {
  .footer-inner {
    padding-inline: var(--space-4);
  }

  .footer-links {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .newsletter-form {
    flex-direction: column;
  }

  .footer-bottom .container {
    flex-direction: column;
    text-align: center;
  }

  .footer-legal {
    flex-wrap: wrap;
    justify-content: center;
  }
}


/* "-"-"- DINING / CONFERENCE STRIP SECTION BG "-"-"-"-"-"-"-"-"-"-"-"- */
.section-dining-strip {
  background-color: var(--color-ivory-warm);
}

.section-conference-strip {
  background-color: var(--color-ivory);
}


/* "-"-"- TOAST CONTAINER "-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"- */
.toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast, 9999);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 360px;
}


/* "-"-"- BOOKING WIDGET (rooms page) "-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"- */
.booking-widget {
  background: var(--bg-surface);
  border-bottom: var(--border-thin);
  padding-block: var(--space-5);
  position: sticky;
  top: var(--header-height-scroll); /* use compact header height so it clears the scrolled header */
  z-index: calc(var(--z-header) - 1);
}

/* On mobile: disable sticky so the booking bar scrolls naturally */
@media (max-width: 767px) {
  .booking-widget {
    position: static;
  }
}

.booking-widget__form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.widget-field {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 140px;
}

.widget-field label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-earth-light);
  margin-bottom: var(--space-1);
}

.widget-field input,
.widget-field select {
  padding: 0.5rem 0.75rem;
  border: var(--border-thin);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  min-height: 42px;
  background: var(--bg-surface);
  color: var(--color-earth);
}

.widget-field input:focus,
.widget-field select:focus {
  outline: none;
  border-color: var(--color-ochre);
  box-shadow: 0 0 0 3px var(--color-ochre-pale);
}

.booking-nights-hint {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ochre);
}


/* "-"-"- ROOMS PAGE SPECIFICS "-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"- */
.rooms-hero {
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--space-12);
  padding-top: calc(var(--header-height) + var(--space-12));
  overflow: hidden;
  background-color: var(--color-earth);
}

/* Ensure direct children (text, containers) sit above the ::after overlay */
.rooms-hero > *:not(.rooms-hero__bg) {
  position: relative;
  z-index: 1;
}

.rooms-hero__bg {
  position: absolute;
  inset: 0;
  background: url('../images/rooms-hero-bg.jpg') center 30% / cover no-repeat;
  opacity: 0.55;
}

/* Gradient overlay for rooms hero text readability */
.rooms-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(30, 13, 26, 0.2) 0%,
    rgba(30, 13, 26, 0.65) 100%
  );
  pointer-events: none;
}

.rooms-hero__title {
  color: var(--color-ivory);
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
  position: relative;
  z-index: 1;
}

.rooms-hero__sub {
  color: rgba(251, 246, 250, 0.85);
  font-size: var(--text-md);
  max-width: 50ch;
  position: relative;
  z-index: 1;
  margin-top: var(--space-3);
}

/* Filter bar */
.rooms-filter-bar {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.filter-chip {
  padding: 0.375rem 1rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border: var(--border-thin);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-earth-mid);
  cursor: pointer;
  transition: var(--transition-fast);
  min-height: 36px;
}

.filter-chip:hover {
  border-color: var(--color-ochre);
  color: var(--color-ochre);
}

.filter-chip.active {
  background: var(--color-ochre);
  border-color: var(--color-ochre);
  color: var(--color-white);
}

/* Sort bar */
.rooms-sort-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.results-count {
  font-size: var(--text-sm);
  color: var(--color-earth-light);
}

.sort-control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sort-control label {
  font-size: var(--text-sm);
  color: var(--color-earth-light);
}

.sort-control select {
  padding: 0.375rem 0.75rem;
  border: var(--border-thin);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  background: var(--bg-surface);
  color: var(--color-earth);
  min-height: 36px;
}

/* Full grid */
.rooms-grid-full {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
}

/* Empty state */
.rooms-empty {
  text-align: center;
  padding: var(--space-16) var(--space-8);
  color: var(--color-earth-light);
}

.rooms-empty .empty-icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
  opacity: 0.4;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
}


/* "-"-"- MENU PAGE SPECIFICS "-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"- */
.menu-hero {
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--space-12);
  padding-top: calc(var(--header-height) + var(--space-12));
  overflow: hidden;
  background-color: var(--color-earth);
}

.menu-hero__bg {
  position: absolute;
  inset: 0;
  background: url('../images/menu-hero-bg.jpg') center/cover;
  opacity: 0.45;
}

.menu-hero__title {
  color: var(--color-ivory);
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
  position: relative;
}

.menu-hero__sub {
  color: rgba(251, 246, 250, 0.8);
  font-size: var(--text-md);
  max-width: 50ch;
  position: relative;
  margin-top: var(--space-3);
}

.menu-hours {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  position: relative;
}

.menu-hours span {
  font-size: var(--text-sm);
  color: rgba(251, 246, 250, 0.75);
}

.menu-section {
  padding-block: var(--space-12);
}


/* "-"-"- USER AVATAR "-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"- */
.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--gradient-gold);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
}

.user-avatar--admin {
  width: 32px;
  height: 32px;
}


/* "-"-"- MAIN CONTENT PADDING "-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"- */
#main-content {
  padding-top: 0; /* hero handles its own spacing */
}

/* For pages without hero sections, add top padding */
.dashboard-page #main-content,
.admin-page #main-content {
  padding-top: 0;
}


/* ─────────────────────────────────────────────────────────
   THEME TOGGLE BUTTON  [data-theme-toggle]
   Works in header, dashboard sidebar, admin topbar.
   ───────────────────────────────────────────────────────── */

.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  border: var(--border-thin);
  background: transparent;
  color: var(--color-earth);
  cursor: pointer;
  transition: var(--transition-fast);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.theme-toggle-btn:hover {
  border-color: var(--color-ochre);
  color: var(--color-ochre);
  background: var(--color-ochre-pale);
  transform: rotate(15deg) scale(1.08);
}

.theme-toggle-btn:active {
  transform: rotate(15deg) scale(0.97);
}

/* Icon visibility - JS sets display via data-theme-active */
.theme-toggle-btn .icon-sun,
.theme-toggle-btn .icon-moon {
  position: absolute;
  transition: opacity var(--duration-fast) var(--ease-in-out),
              transform var(--duration-fast) var(--ease-spring);
}

/* In dark mode: show sun (to switch to light), hide moon */
/* NOTE: theme classes are on <html>, so we use :root.theme-dark */
:root.theme-dark .theme-toggle-btn .icon-sun {
  display: block !important;
  opacity: 1;
}
:root.theme-dark .theme-toggle-btn .icon-moon {
  display: none !important;
  opacity: 0;
}

/* In light mode: show moon (to switch to dark), hide sun */
:root.theme-light .theme-toggle-btn .icon-sun,
:root:not(.theme-dark) .theme-toggle-btn .icon-sun {
  display: none !important;
}
:root.theme-light .theme-toggle-btn .icon-moon,
:root:not(.theme-dark) .theme-toggle-btn .icon-moon {
  display: block !important;
}

/* Dark-mode specific: invert button colours for header/sidebar */
:root.theme-dark .theme-toggle-btn {
  color: var(--color-earth-light);
  border-color: rgba(214,99,193,0.28);
}
:root.theme-dark .theme-toggle-btn:hover {
  color: var(--color-ochre);
  border-color: var(--color-ochre);
  background: rgba(214,99,193,0.12);
}

/* ─────────────────────────────────────────────────────────
   DARK MODE: Keep CTA band & footer colours identical to
   light mode — both sections are always-dark (deep plum)
   so backgrounds, headings, body text, and buttons must
   stay light regardless of the theme-wide token flip.
   ───────────────────────────────────────────────────────── */
.theme-dark .section-cta-band,
:root.dark-mode .section-cta-band {
  background: #1E0D1A !important;
  color: #FDF8FC !important;
}

.theme-dark .section-cta-band h2,
:root.dark-mode .section-cta-band h2 {
  color: #FDF8FC !important;
}

.theme-dark .section-cta-band p,
:root.dark-mode .section-cta-band p {
  color: rgba(251, 246, 250, 0.75) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) .section-cta-band {
    background: #1E0D1A !important;
    color: #FDF8FC !important;
  }
  :root:not(.theme-light) .section-cta-band h2 {
    color: #FDF8FC !important;
  }
  :root:not(.theme-light) .section-cta-band p {
    color: rgba(251, 246, 250, 0.75) !important;
  }
}

/* CTA + footer "Call Us" outline button — pin to light text */
.theme-dark .section-cta-band .btn-outline,
:root.dark-mode .section-cta-band .btn-outline,
.theme-dark .site-footer .btn-outline,
:root.dark-mode .site-footer .btn-outline {
  color: #FDF8FC !important;
  border-color: rgba(251, 246, 250, 0.5) !important;
}

.theme-dark .section-cta-band .btn-outline:hover,
:root.dark-mode .section-cta-band .btn-outline:hover,
.theme-dark .site-footer .btn-outline:hover,
:root.dark-mode .site-footer .btn-outline:hover {
  background: rgba(251, 246, 250, 0.15) !important;
  border-color: #FDF8FC !important;
  color: #FDF8FC !important;
}


/* Inline label variant e.g. "Dark / Light" text beside icon */
.theme-toggle-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-earth-light);
  white-space: nowrap;
}
:root.theme-dark .theme-toggle-label {
  color: var(--color-earth-mid);
}