/**
 * BENGUELA B&B - MAIN STYLESHEET
 * =============================================================================
 * Teaching Note: This stylesheet uses CSS Custom Properties (variables) for
 * easy theming, Flexbox and CSS Grid for layout, and progressive enhancement
 * for browser compatibility. The ocean theme uses a carefully curated palette
 * of deep navy blues, teals, and warm sand accents.
 *
 * File Structure:
 *  1. CSS Custom Properties (Variables)
 *  2. CSS Reset & Base Styles
 *  3. Typography
 *  4. Navigation
 *  5. Hero Section (Parallax)
 *  6. About Section
 *  7. Rooms Section
 *  8. Amenities Section
 *  9. Solar Section
 * 10. Rates Section
 * 11. Location Section
 * 12. Contact Section
 * 13. Footer
 * 14. Floating Elements (Solar Bubble, WhatsApp)
 * 15. Modal Styles
 * 16. Animations & Keyframes
 * 17. Utility Classes
 * 18. Media Queries (Mobile First Responsive)
 * =============================================================================
 */

/* =============================================================================
   1. CSS CUSTOM PROPERTIES (VARIABLES)
   Teaching Note: CSS variables (custom properties) make it trivial to maintain
   consistent colors, fonts, and spacing throughout the stylesheet. Change one
   variable and it updates everywhere.
   ============================================================================= */
:root {
  /* --- Ocean Color Palette --- */
  --deep-ocean: #0B1F3A;        /* Darkest navy - footer & overlays */
  --ocean-dark: #0F2A47;        /* Dark navy - navigation background */
  --ocean-mid: #1A4A6B;         /* Medium blue - card backgrounds */
  --ocean-bright: #2272B1;      /* Bright blue - links & highlights */
  --teal: #16A085;              /* Teal - primary CTA color */
  --teal-light: #1ABC9C;        /* Light teal - hover states */
  --seafoam: #76D7C4;           /* Seafoam - decorative accents */
  --sand: #D4AC6E;              /* Sand gold - warm accent */
  --sand-light: #F0D5A0;        /* Light sand - subtle highlights */
  --cream: #FDF6E3;             /* Cream - text areas on dark */
  --white: #FFFFFF;

  /* --- Text Colors --- */
  --text-light: #E8F4FD;        /* Primary text on dark backgrounds */
  --text-muted: #8AAFC8;        /* Secondary/muted text */
  --text-dark: #1A2E42;         /* Text on light backgrounds */

  /* --- Status/Booking Colors --- */
  --status-available: #16A085;  /* Green-teal: room is available */
  --status-provisional: #F39C12;/* Amber: provisionally booked */
  --status-confirmed: #7F8C8D;  /* Grey: confirmed booking (non-selectable) */
  --status-blocked: #C0392B;    /* Red: room blocked by admin */

  /* --- Shadows --- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.40);
  --shadow-glow: 0 0 20px rgba(22, 160, 133, 0.30); /* Teal glow for CTAs */

  /* --- Transitions --- */
  --transition-fast: all 0.2s ease;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Typography --- */
  --font-heading: 'Raleway', 'Segoe UI', sans-serif;
  --font-body: 'Open Sans', 'Segoe UI', sans-serif;
  --font-mono: 'Courier New', monospace;

  /* --- Spacing Scale --- */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 5rem;     /* 80px */

  /* --- Border Radius --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* --- Layout --- */
  --max-width: 1200px;
  --nav-height: 70px;

  /* --- Z-index Stack --- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-floating: 600;
}

/* =============================================================================
   2. CSS RESET & BASE STYLES
   Teaching Note: A CSS reset removes browser inconsistencies. We use a modern
   "box-sizing: border-box" approach which makes sizing more intuitive - the
   border and padding are included in the element's total width/height.
   ============================================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;    /* Enables smooth scrolling for anchor links */
  font-size: 16px;            /* Base font size; rem units are relative to this */
  -webkit-text-size-adjust: 100%; /* Prevents font scaling on iOS rotation */
}

body {
  font-family: var(--font-body);
  background-color: var(--deep-ocean);
  color: var(--text-light);
  line-height: 1.6;
  overflow-x: hidden;         /* Prevent horizontal scrollbar from animations */
}

img {
  max-width: 100%;
  height: auto;
  display: block;             /* Remove default inline gap below images */
}

a {
  color: var(--teal-light);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover { color: var(--seafoam); }

ul { list-style: none; }

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* =============================================================================
   3. TYPOGRAPHY
   Teaching Note: We use a type scale based on a modular ratio. Headings use
   Raleway (elegant, modern), body uses Open Sans (highly readable). rem units
   ensure accessibility - text scales with user's browser font preferences.
   ============================================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }   /* clamp() = responsive without media queries */
h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.8rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }

p {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

.section-subtitle {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--teal-light);
  margin-bottom: var(--space-sm);
}

.section-title {
  margin-bottom: var(--space-md);
}

.section-description {
  font-size: 1.05rem;
  max-width: 650px;
  margin: 0 auto var(--space-xl);
  color: var(--text-muted);
}

/* =============================================================================
   4. NAVIGATION
   Teaching Note: The navigation uses position:fixed to stay at the top during
   scroll. We use a CSS class toggle via JavaScript to change the nav's
   appearance when the user scrolls down (the "scrolled" class).
   ============================================================================= */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-xl);
  transition: var(--transition);
  /* Initially transparent to blend with hero image */
  background: transparent;
}

/* When user scrolls down, JS adds this class for a solid background */
.navbar.scrolled {
  background: rgba(11, 31, 58, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
}

.navbar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.navbar__logo-text {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: 1px;
}

.navbar__logo-text span {
  color: var(--teal-light);
}

.navbar__tagline {
  font-size: 0.65rem;
  color: var(--text-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  display: block;
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.navbar__links a {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-light);
  letter-spacing: 1px;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 4px;
}

/* Animated underline effect on nav links */
.navbar__links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--teal-light);
  transition: width 0.3s ease;
}

.navbar__links a:hover::after,
.navbar__links a.active::after {
  width: 100%;
}

.navbar__book-btn {
  background: var(--teal);
  color: var(--white) !important;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-full);
  font-weight: 700 !important;
  transition: var(--transition) !important;
  box-shadow: var(--shadow-glow);
}

.navbar__book-btn:hover {
  background: var(--teal-light) !important;
  transform: translateY(-1px);
  box-shadow: 0 0 25px rgba(22, 160, 133, 0.5) !important;
}

.navbar__book-btn::after { display: none !important; }

/* Mobile hamburger menu */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
}

.navbar__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  transition: var(--transition);
}

/* =============================================================================
   5. HERO SECTION (PARALLAX)
   Teaching Note: The parallax effect is achieved by keeping the background
   image fixed (background-attachment: fixed) while the content scrolls.
   JavaScript enhances this with precise control over background position.
   The hero uses a full-viewport height with an overlay for text readability.
   ============================================================================= */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

/* The parallax background layer */
.hero__bg {
  position: absolute;
  inset: -20%;    /* Oversized to allow parallax movement without showing edges */
  background-image: url('../images/placeholders/hero.svg');
  background-size: cover;
  background-position: center top;
  /* background-attachment: fixed creates the classic parallax effect */
  background-attachment: fixed;
  z-index: 0;
  transition: background-position 0.1s linear;
}

/* Dark gradient overlay for text readability */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(11, 31, 58, 0.5) 0%,
    rgba(11, 31, 58, 0.3) 50%,
    rgba(11, 31, 58, 0.7) 100%
  );
  z-index: 1;
}

/* Wave animation at the bottom of hero */
.hero__waves {
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  z-index: 2;
}

.hero__content {
  position: relative;
  z-index: 3;
  padding: var(--space-xl);
  max-width: 800px;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(22, 160, 133, 0.2);
  border: 1px solid rgba(22, 160, 133, 0.4);
  border-radius: var(--radius-full);
  padding: 0.4rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--seafoam);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
  backdrop-filter: blur(5px);
}

.hero__title {
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 900;
  letter-spacing: -1px;
  margin-bottom: var(--space-md);
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}

.hero__title span {
  color: var(--teal-light);
  display: block;
}

.hero__subtitle {
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  color: var(--text-light);
  margin-bottom: var(--space-2xl);
  opacity: 0.9;
  font-weight: 300;
  letter-spacing: 1px;
}

.hero__actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

.hero__scroll-indicator {
  position: absolute;
  bottom: var(--space-3xl);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text-muted);
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: bounce 2s infinite;
}

/* =============================================================================
   6. BUTTON STYLES
   Teaching Note: We create a button system with variants. The base .btn class
   provides shared styles, while modifier classes (.btn--primary, .btn--outline)
   provide visual variants without code duplication.
   ============================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.75rem 2rem;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: var(--transition);
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
}

.btn--primary {
  background: var(--teal);
  color: var(--white);
  box-shadow: var(--shadow-glow);
}

.btn--primary:hover {
  background: var(--teal-light);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(22, 160, 133, 0.5);
}

.btn--outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.4);
}

.btn--outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--white);
  color: var(--white);
  transform: translateY(-2px);
}

.btn--sand {
  background: var(--sand);
  color: var(--deep-ocean);
}

.btn--sand:hover {
  background: var(--sand-light);
  color: var(--deep-ocean);
  transform: translateY(-2px);
}

.btn--sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.8rem;
}

.btn--lg {
  padding: 1rem 2.5rem;
  font-size: 1rem;
}

/* =============================================================================
   7. SECTION LAYOUT
   Teaching Note: A consistent section wrapper ensures proper spacing and max
   width throughout the page. The text-center modifier handles centered content.
   ============================================================================= */
.section {
  padding: var(--space-3xl) var(--space-xl);
}

.section--dark { background: var(--deep-ocean); }
.section--mid { background: var(--ocean-dark); }
.section--ocean { background: var(--ocean-mid); }

.section__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.section__header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

/* =============================================================================
   8. ABOUT SECTION
   Teaching Note: The about section uses CSS Grid for a two-column layout on
   desktop, stacking to single column on mobile. The grid-template-columns
   property with fr units creates proportional column widths.
   ============================================================================= */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.about__image-wrapper {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.about__image-wrapper::before {
  /* Decorative border element */
  content: '';
  position: absolute;
  inset: -8px;
  border: 2px solid rgba(22, 160, 133, 0.3);
  border-radius: var(--radius-xl);
  z-index: -1;
}

.about__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.badge--teal {
  background: rgba(22, 160, 133, 0.15);
  border: 1px solid rgba(22, 160, 133, 0.3);
  color: var(--teal-light);
}

.badge--sand {
  background: rgba(212, 172, 110, 0.15);
  border: 1px solid rgba(212, 172, 110, 0.3);
  color: var(--sand);
}

.badge--solar {
  background: rgba(243, 156, 18, 0.15);
  border: 1px solid rgba(243, 156, 18, 0.3);
  color: #F39C12;
}

/* Family establishment highlight */
.family-highlight {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: rgba(22, 160, 133, 0.08);
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
}

.family-highlight__icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.family-highlight__text {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
  font-style: italic;
}

/* =============================================================================
   9. ROOMS SECTION
   Teaching Note: The rooms grid uses CSS Grid with auto-fill and minmax() to
   create a responsive grid without media queries. Each card uses a CSS custom
   property for the room status, allowing dynamic color updates via JavaScript.
   ============================================================================= */
.rooms__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-xl);
}

.room-card {
  background: var(--ocean-mid);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
  border: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
}

.room-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(22, 160, 133, 0.3);
}

.room-card__image {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.room-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.room-card:hover .room-card__image img {
  transform: scale(1.05);
}

/* Room type badge (Family / Standard) */
.room-card__type-badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  background: rgba(11, 31, 58, 0.85);
  border: 1px solid rgba(22, 160, 133, 0.4);
  color: var(--teal-light);
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  backdrop-filter: blur(5px);
}

/* Availability dot indicator */
.room-card__availability {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.2);
}

.room-card__availability--available { background: var(--status-available); }
.room-card__availability--provisional { background: var(--status-provisional); }
.room-card__availability--confirmed { background: var(--status-confirmed); }
.room-card__availability--blocked { background: var(--status-blocked); }

.room-card__body {
  padding: var(--space-lg);
}

.room-card__number {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.room-card__name {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-sm);
}

.room-card__description {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
  line-height: 1.6;
}

.room-card__details {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.room-card__detail {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.room-card__detail svg {
  color: var(--teal-light);
  flex-shrink: 0;
}

.room-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.room-card__price {
  display: flex;
  flex-direction: column;
}

.room-card__price-amount {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--sand);
}

.room-card__price-per {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* =============================================================================
   10. AMENITIES SECTION
   Teaching Note: Icon-based feature lists are a common UI pattern. We use
   CSS Grid and a reusable component structure (.amenity-item) to keep the
   code DRY (Don't Repeat Yourself).
   ============================================================================= */
.amenities__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-xl);
}

.amenity-item {
  text-align: center;
  padding: var(--space-xl);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}

.amenity-item:hover {
  background: rgba(22, 160, 133, 0.08);
  border-color: rgba(22, 160, 133, 0.2);
  transform: translateY(-4px);
}

.amenity-item__icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
  display: block;
}

.amenity-item__label {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-light);
}

/* =============================================================================
   11. SOLAR SECTION
   Teaching Note: The off-grid/solar section uses a highlight card pattern.
   The floating solar bubble is positioned fixed and uses CSS animations.
   ============================================================================= */
.solar-strip {
  background: linear-gradient(135deg, rgba(243, 156, 18, 0.1) 0%, rgba(22, 160, 133, 0.1) 100%);
  border: 1px solid rgba(243, 156, 18, 0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.solar-strip::before {
  content: '☀';
  position: absolute;
  font-size: 8rem;
  opacity: 0.04;
  right: var(--space-xl);
  top: 50%;
  transform: translateY(-50%);
}

/* =============================================================================
   12. RATES SECTION
   Teaching Note: The rates table uses CSS Grid for the table layout instead
   of HTML <table> elements for better responsive control. Each rate card
   shows pricing information that can be updated from the admin backend.
   ============================================================================= */
.rates__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.rate-card {
  background: var(--ocean-mid);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: var(--transition);
  text-align: center;
}

.rate-card:hover {
  border-color: rgba(22, 160, 133, 0.3);
  transform: translateY(-3px);
}

.rate-card--featured {
  background: linear-gradient(135deg, var(--teal) 0%, var(--ocean-bright) 100%);
  border-color: var(--teal);
}

.rate-card__room-name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.rate-card__price {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--sand);
  font-family: var(--font-heading);
}

.rate-card--featured .rate-card__price {
  color: var(--white);
}

.rate-card__period {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}

.rate-card__includes {
  font-size: 0.82rem;
  color: var(--text-muted);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: var(--space-md);
}

/* =============================================================================
   13. LOCATION SECTION
   ============================================================================= */
.location__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.location__map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  height: 350px;
  background: var(--ocean-mid);
  display: flex;
  align-items: center;
  justify-content: center;
}

.location__map iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.location__info-item {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  align-items: flex-start;
}

.location__info-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.location__info-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--teal-light);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.location__info-value {
  color: var(--text-light);
  font-size: 0.95rem;
  margin: 0;
}

/* =============================================================================
   14. CONTACT SECTION
   ============================================================================= */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.contact-form {
  background: var(--ocean-mid);
  padding: var(--space-2xl);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.06);
}

.form-group {
  margin-bottom: var(--space-lg);
}

.form-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  margin-bottom: var(--space-sm);
}

.form-control {
  width: 100%;
  padding: 0.75rem var(--space-md);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  color: var(--text-light);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--teal);
  background: rgba(22, 160, 133, 0.05);
  box-shadow: 0 0 0 3px rgba(22, 160, 133, 0.1);
}

.form-control::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

.contact__channels {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contact-channel {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--ocean-mid);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.06);
  transition: var(--transition);
  text-decoration: none;
}

.contact-channel:hover {
  border-color: rgba(22, 160, 133, 0.3);
  transform: translateX(4px);
  background: rgba(22, 160, 133, 0.08);
}

.contact-channel__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.contact-channel__icon--whatsapp { background: rgba(37, 211, 102, 0.15); }
.contact-channel__icon--email { background: rgba(34, 114, 177, 0.15); }
.contact-channel__icon--phone { background: rgba(22, 160, 133, 0.15); }

.contact-channel__label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 2px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.contact-channel__value {
  color: var(--text-light);
  font-weight: 600;
  font-size: 0.95rem;
}

/* =============================================================================
   15. FOOTER
   Teaching Note: The footer uses a multi-column grid for the main content
   and a separate row for the bottom bar with copyright and login link.
   ============================================================================= */
.footer {
  background: #071428;
  padding: var(--space-3xl) var(--space-xl) var(--space-xl);
  border-top: 1px solid rgba(255,255,255,0.05);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-2xl);
  max-width: var(--max-width);
  margin: 0 auto var(--space-2xl);
}

.footer__brand {
  max-width: 320px;
}

.footer__logo {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: var(--space-md);
}

.footer__logo span { color: var(--teal-light); }

.footer__tagline {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
  font-style: italic;
}

.footer__heading {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-light);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
}

.footer__links li {
  margin-bottom: var(--space-sm);
}

.footer__links a {
  font-size: 0.88rem;
  color: var(--text-muted);
  transition: var(--transition-fast);
}

.footer__links a:hover {
  color: var(--teal-light);
  padding-left: 4px;
}

/* Social media icons */
.social-links {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.social-link {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--text-muted);
  transition: var(--transition);
  text-decoration: none;
}

.social-link:hover {
  background: rgba(22, 160, 133, 0.15);
  border-color: var(--teal);
  color: var(--teal-light);
  transform: translateY(-2px);
}

.social-link--facebook:hover { background: rgba(59, 89, 152, 0.2); border-color: #3B5998; color: #3B5998; }
.social-link--instagram:hover { background: rgba(225, 48, 108, 0.2); border-color: #E1306C; color: #E1306C; }

/* Footer bottom bar */
.footer__bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer__copyright {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
}

.footer__login-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.2);
  transition: var(--transition-fast);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.05);
}

.footer__login-link:hover {
  color: var(--text-muted);
  border-color: rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
}

/* =============================================================================
   16. FLOATING ELEMENTS
   Teaching Note: Fixed-position floating elements provide persistent access
   to key actions (WhatsApp contact, solar info) regardless of scroll position.
   CSS animations create the "pulse" effect that draws subtle attention.
   ============================================================================= */

/* Solar information bubble (top right) */
.solar-bubble {
  position: fixed;
  top: calc(var(--nav-height) + var(--space-md));
  right: var(--space-xl);
  z-index: var(--z-floating);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F39C12 0%, #E67E22 100%);
  box-shadow: 0 4px 20px rgba(243, 156, 18, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.3);
  font-size: 1.4rem;
  transition: var(--transition);
  animation: solar-pulse 3s infinite;
}

.solar-bubble:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(243, 156, 18, 0.6);
}

.solar-bubble__tooltip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--ocean-dark);
  color: var(--text-light);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  border: 1px solid rgba(255,255,255,0.1);
}

.solar-bubble:hover .solar-bubble__tooltip {
  opacity: 1;
}

/* WhatsApp floating button (bottom right) */
.whatsapp-float {
  position: fixed;
  bottom: var(--space-xl);
  right: var(--space-xl);
  z-index: var(--z-floating);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 1.6rem;
  transition: var(--transition);
  animation: float 3s ease-in-out infinite;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
  color: var(--white);
}

/* =============================================================================
   17. MODAL STYLES
   Teaching Note: Modals use the CSS position:fixed to overlay on the page.
   The overlay is a semi-transparent dark layer. We use CSS transitions to
   animate the modal in/out, controlled by adding/removing an "active" class.
   The dialog itself uses transform: translateY for a slide-in effect.
   ============================================================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 20, 40, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background: var(--ocean-dark);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,0.08);
  transform: translateY(20px);
  transition: transform 0.3s ease;
  position: relative;
}

.modal-overlay.active .modal {
  transform: translateY(0);
}

.modal--wide { max-width: 860px; }
.modal--solar { max-width: 700px; }

.modal__header {
  padding: var(--space-xl) var(--space-xl) var(--space-md);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: var(--ocean-dark);
  z-index: 1;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.modal__title {
  font-size: 1.3rem;
  font-weight: 700;
}

.modal__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-muted);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
}

.modal__close:hover {
  background: rgba(255,255,255,0.12);
  color: var(--white);
}

.modal__body {
  padding: var(--space-xl);
}

.modal__footer {
  padding: var(--space-md) var(--space-xl) var(--space-xl);
  display: flex;
  gap: var(--space-md);
  justify-content: flex-end;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* =============================================================================
   18. SOLAR MODAL SPECIFIC STYLES
   ============================================================================= */
.solar-specs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.solar-spec {
  background: rgba(243, 156, 18, 0.08);
  border: 1px solid rgba(243, 156, 18, 0.2);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
}

.solar-spec__value {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  color: #F39C12;
  margin-bottom: 4px;
}

.solar-spec__label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.solar-equipment__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

.solar-equipment-card {
  background: var(--ocean-mid);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}

.solar-equipment-card img {
  width: 100%;
  height: 130px;
  object-fit: cover;
}

.solar-equipment-card__label {
  padding: var(--space-sm) var(--space-md);
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
}

/* =============================================================================
   19. ANIMATIONS & KEYFRAMES
   Teaching Note: CSS animations use @keyframes to define the animation sequence.
   The animation property then applies the keyframe with duration, timing, and
   iteration settings. We keep animations subtle for professionalism.
   ============================================================================= */
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes solar-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(243, 156, 18, 0.4); }
  50% { box-shadow: 0 4px 30px rgba(243, 156, 18, 0.7); }
}

@keyframes wave {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Fade-in animation for scroll-revealed elements */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  opacity: 0;
  animation: fadeInUp 0.7s ease forwards;
}

.animate-fade-in.visible {
  animation-play-state: running;
}

/* Staggered animation delay for grid items */
.animate-stagger:nth-child(1) { animation-delay: 0.1s; }
.animate-stagger:nth-child(2) { animation-delay: 0.2s; }
.animate-stagger:nth-child(3) { animation-delay: 0.3s; }
.animate-stagger:nth-child(4) { animation-delay: 0.4s; }
.animate-stagger:nth-child(5) { animation-delay: 0.5s; }
.animate-stagger:nth-child(6) { animation-delay: 0.6s; }

/* =============================================================================
   20. UTILITY CLASSES
   Teaching Note: Utility classes provide single-purpose, reusable styles.
   They follow the BEM-adjacent pattern but are prefixed with 'u-' to
   distinguish them from component classes.
   ============================================================================= */
.u-text-center { text-align: center; }
.u-text-teal { color: var(--teal-light); }
.u-text-sand { color: var(--sand); }
.u-text-muted { color: var(--text-muted); }
.u-font-heading { font-family: var(--font-heading); }
.u-font-bold { font-weight: 700; }
.u-mt-xl { margin-top: var(--space-xl); }
.u-mb-xl { margin-bottom: var(--space-xl); }
.u-hidden { display: none; }
.u-sr-only { /* Screen reader only - accessible but visually hidden */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Divider */
.divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(22, 160, 133, 0.3), transparent);
  margin: var(--space-3xl) 0;
}

/* Toast notification */
.toast {
  position: fixed;
  bottom: var(--space-xl);
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--ocean-mid);
  color: var(--text-light);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-lg);
  font-size: 0.9rem;
  z-index: var(--z-toast);
  transition: transform 0.3s ease;
  border: 1px solid rgba(22, 160, 133, 0.3);
  box-shadow: var(--shadow-lg);
}

.toast.show {
  transform: translateX(-50%) translateY(0);
}

.toast--success { border-color: var(--teal); }
.toast--error { border-color: #E74C3C; }

/* Booking step progress indicator */
.booking-steps {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: var(--space-xl);
}

.booking-step {
  display: flex;
  align-items: center;
}

.booking-step__dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: var(--transition);
}

.booking-step.active .booking-step__dot {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
}

.booking-step.completed .booking-step__dot {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
}

.booking-step__line {
  width: 60px;
  height: 2px;
  background: rgba(255,255,255,0.08);
  transition: var(--transition);
}

.booking-step.completed .booking-step__line {
  background: var(--teal);
}

/* Availability legend */
.availability-legend {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--space-xl);
  font-size: 0.8rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text-muted);
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* =============================================================================
   21. MEDIA QUERIES (RESPONSIVE DESIGN)
   Teaching Note: Mobile-first responsive design means we write base styles
   for mobile, then use min-width media queries to enhance for larger screens.
   This ensures the best performance on mobile devices (which download less CSS).
   We disable heavy animations on mobile to save data and battery.
   ============================================================================= */

/* Tablet breakpoint */
@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; }
  .location__grid { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .solar-specs__grid { grid-template-columns: 1fr; }
  .solar-equipment__grid { grid-template-columns: 1fr; }
}

/* Mobile breakpoint */
@media (max-width: 640px) {
  :root {
    --space-3xl: 3rem;
  }

  .navbar {
    padding: 0 var(--space-lg);
  }

  .navbar__links {
    display: none; /* Mobile menu handled by JS */
    position: fixed;
    inset: var(--nav-height) 0 0 0;
    background: var(--ocean-dark);
    flex-direction: column;
    padding: var(--space-2xl);
    gap: var(--space-xl);
    z-index: var(--z-overlay);
  }

  .navbar__links.mobile-open {
    display: flex;
  }

  .navbar__hamburger {
    display: flex;
  }

  .hero__actions {
    flex-direction: column;
    align-items: center;
  }

  .rooms__grid {
    grid-template-columns: 1fr;
  }

  .amenities__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__grid {
    grid-template-columns: 1fr;
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  .modal {
    max-height: 95vh;
    margin: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-width: 100%;
  }

  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  /* Remove parallax on mobile for performance */
  .hero__bg {
    background-attachment: scroll;
  }

  /* Disable heavy animations on mobile to save battery/data */
  .whatsapp-float,
  .solar-bubble {
    animation: none;
  }

  .solar-bubble {
    top: auto;
    bottom: calc(var(--space-xl) + 70px);
    right: var(--space-xl);
  }
}

/* Respect user's motion preference for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html { scroll-behavior: auto; }
}

/* =============================================================================
   22. PRINT STYLES
   Teaching Note: Print styles ensure the page looks good when printed.
   We hide interactive elements and adjust colors for paper.
   ============================================================================= */
@media print {
  .navbar,
  .solar-bubble,
  .whatsapp-float,
  .modal-overlay,
  .hero__waves { display: none !important; }

  body { background: white; color: black; }
  h1, h2, h3 { color: black; }
  .section { padding: 20px 0; }
}