/* Pinewood unified warm background theme. Keep brand green/gold accents with a restrained ivory warmth. */
:root {
  --pine-offwhite: #FBF9F4;
  --pine-warm-bg: #FBF9F4;
  --pine-warm-bg-soft: #FDFCFA;
  --pine-warm-surface: #FFFCF7;
  --pine-warm-surface-strong: #F7F2EA;
}

html,
body {
  background: var(--pine-warm-bg);
}

body {
  background: linear-gradient(180deg, #FDFBF8 0%, #FBF9F4 58%, #F8F4ED 100%);
}

.site-header,
.mobile-menu {
  background: rgba(253, 251, 248, .97);
}

.language-switcher {
  background: var(--pine-warm-surface);
}

/* The forest artwork is also lowered inside the SVG; this small offset fine-tunes the crop. */
.hero {
  background-color: var(--pine-warm-bg);
  background-position: center calc(100% + 55px);
}

.hero::before {
  background: radial-gradient(
    circle at 50% 24%,
    rgba(255, 252, 246, .94),
    rgba(251, 247, 239, .56) 42%,
    rgba(247, 243, 234, .16)
  );
}

.directory-panel,
.content-card,
.rule-card,
.service-card,
.feature-panel:not(.accent),
.contact-panel,
.full-info details,
.assistance-dialog,
.contact-location,
.welcome-dialog {
  background: var(--pine-warm-surface);
}

.directory-card {
  background: linear-gradient(180deg, #FFFDFA 0%, #F9F5EE 100%);
}

/* Use the same Pinewood forest artwork as Home for every SPA page hero. */
.page-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--pine-warm-bg);
  background-image: url('../assets/images/forest-hero.svg');
  background-position: center calc(100% + 55px);
  background-size: cover;
  background-repeat: no-repeat;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 24%,
    rgba(255, 252, 246, .94),
    rgba(251, 247, 239, .56) 42%,
    rgba(247, 243, 234, .16)
  );
  pointer-events: none;
}

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

.wifi-box,
.wifi-status,
.contact-map-wrap {
  background: var(--pine-warm-surface-strong);
}

.footer-inner img,
.welcome-dialog-close,
.wifi-secondary-button,
.wifi-qr-panel {
  background: var(--pine-warm-surface);
}

.welcome-letter-frame {
  background: linear-gradient(180deg, rgba(255, 252, 246, .92), rgba(245, 239, 228, .97));
}

.hotel-experience-section {
  background: linear-gradient(180deg, #FCFAF6 0%, var(--pine-warm-bg) 100%);
}

.wifi-option2-access {
  background: linear-gradient(180deg, #FFFCF7 0%, #F9F5EE 100%);
}

.wifi-credential-card {
  background: #F6F0E7;
}

.wifi-credential-icon,
.wifi-premium-qr-card,
.wifi-logo-medallion {
  background-color: var(--pine-warm-surface);
}

.wifi-premium-qr-card {
  background-image: radial-gradient(circle at 50% 0%, rgba(178,142,105,.08), transparent 32%);
}

.wifi-option2-access .wifi-logo-medallion {
  background: var(--pine-warm-surface);
}

/* Marketing / indexable pages */
html body.marketing-page {
  background: linear-gradient(180deg, #FDFCFA 0%, #FBF9F4 52%, #F8F4ED 100%);
}

.seo-marketing-section {
  background: linear-gradient(180deg, #FDFCFA 0%, #FAF6EF 100%);
}

.seo-marketing-card,
.seo-faq details,
.marketing-panel,
.hotel-photo-card,
.hotel-photo-card figcaption,
.seo-social-strip a,
.social-button,
.hotel-fact {
  background: var(--pine-warm-surface);
}

/* Standalone marketing pages (Rooms, Location, etc.) use the same forest hero as Home. */
html body.marketing-page .marketing-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--pine-warm-bg);
  background-image: url('../assets/images/forest-hero.svg');
  background-position: center calc(100% + 55px);
  background-size: cover;
  background-repeat: no-repeat;
}

html body.marketing-page .marketing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 24%,
    rgba(255, 252, 246, .94),
    rgba(251, 247, 239, .56) 42%,
    rgba(247, 243, 234, .16)
  );
  pointer-events: none;
}

html body.marketing-page .marketing-hero .marketing-hero-inner {
  position: relative;
  z-index: 1;
}

.location-landmarks span,
.hotel-photo-card img {
  background-color: var(--pine-warm-surface-strong);
}

/* Room/gallery stylesheet loads later; use stronger selectors for one consistent surface. */
body.marketing-page .room-gallery-section {
  background: transparent;
}

body.marketing-page .room-gallery-card,
body.marketing-page .room-gallery-card figcaption {
  background: var(--pine-warm-surface);
}

body.marketing-page .room-gallery-image {
  background: var(--pine-warm-surface-strong);
}

@media (max-width: 720px) {
  .hero,
  .page-hero,
  html body.marketing-page .marketing-hero {
    background-position: center calc(100% + 32px);
  }
}