/*
  THE TRAVEL SPARK — package-theme.css
  Component-level overrides for the new editorial green design system.
  Loaded AFTER navbar.css and footer.css, BEFORE each page's own <style>.

  Design language:
    - Sophisticated, muted, warm — Condé Nast Traveller × boutique agency
    - Cormorant Garamond (display headings) + Jost (body)
    - Forest green (#1C3A2A) + warm gold (#C9A84C) + cream (#F5F0E8)

  Dependencies: variables.css must be imported FIRST.
*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@300;400;500&display=swap');

/* ══════════════════════════════════════════════════════════════
   BASE
══════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-forest);
  line-height: 1.2;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: var(--font-body); cursor: pointer; }

/* ══════════════════════════════════════════════════════════════
   NAVBAR  (injected by components.js)
══════════════════════════════════════════════════════════════ */

.navbar {
  background: var(--color-forest) !important;
  border-bottom: none !important;
}

.navbar.scrolled {
  box-shadow: 0 2px 20px rgba(28, 58, 42, 0.25) !important;
}

/* Logo text */
.logo-text-new {
  font-family: var(--font-display) !important;
  color: var(--color-text-on-dark) !important;
  font-size: 1.35rem;
  font-weight: 700;
}

.spark-mix {
  font-family: var(--font-display) !important;
  color: var(--color-gold) !important;
  font-style: italic;
}

/* Desktop nav links — raised from faint mint to near-white for legibility */
.navbar-links > li > a,
.navbar-links > li > span {
  font-family: var(--font-body) !important;
  color: rgba(255, 255, 255, 0.88) !important;  /* was --color-mint ~3.3:1, now ~9:1 on forest */
  font-weight: 400;
}

.navbar-links > li > a:hover,
.navbar-links > li > span:hover,
.navbar-links > li > a.active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Dropdown */
.dropdown {
  background: var(--color-forest) !important;
  border: 1px solid rgba(168, 197, 160, 0.2) !important;
  border-radius: var(--radius-md) !important;
}

.dropdown li a {
  color: rgba(255, 255, 255, 0.85) !important;  /* was mint, now near-white */
  font-family: var(--font-body) !important;
}

.dropdown li a:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* Hamburger lines → white on dark navbar */
.hamburger span {
  background: var(--color-text-on-dark) !important;
}

/* Mobile drawer */
.mobile-menu {
  background: var(--color-forest) !important;
  border-left: 1px solid rgba(168, 197, 160, 0.15) !important;
}

.mobile-menu a,
.mobile-menu .m-parent {
  color: rgba(255, 255, 255, 0.88) !important;  /* was mint ~3.3:1, now ~9:1 */
  border-bottom-color: rgba(168, 197, 160, 0.12) !important;
  font-family: var(--font-body) !important;
}

.mobile-menu a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

.mobile-menu .m-parent {
  color: rgba(168, 197, 160, 0.5) !important;
}

/* CTA button in navbar */
.navbar-enquire {
  background: var(--color-gold) !important;
  color: var(--color-forest) !important;
  border-color: var(--color-gold) !important;
  font-weight: 500 !important;
  border-radius: var(--radius-sm) !important;
}

.navbar-enquire:hover {
  background: var(--color-gold-dark) !important;
  border-color: var(--color-gold-dark) !important;
}

/* Menu overlay */
.menu-overlay {
  background: rgba(28, 58, 42, 0.55) !important;
}

/* ══════════════════════════════════════════════════════════════
   HERO SECTIONS
══════════════════════════════════════════════════════════════ */

.package-hero {
  background: var(--color-forest) !important;
  /* Push content below the fixed navbar */
  margin-top: var(--navbar-height) !important;
}

/* Inner page heros (about, blog, corporate etc.) */
.page-hero {
  padding-top: calc(var(--navbar-height) + 60px) !important;
  background: linear-gradient(135deg, var(--color-forest) 0%, #0d2a1a 100%) !important;
}

.page-hero h1,
.page-hero h1 span {
  font-family: var(--font-display) !important;
  color: #ffffff !important;
}

.page-hero h1 span {
  color: var(--color-gold) !important;
  font-style: italic;
}

.package-hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(28, 58, 42, 0.65) 0%,
    rgba(28, 58, 42, 0.15) 100%
  ) !important;
}

.package-title {
  font-family: var(--font-display) !important;
  font-size: clamp(2rem, 5vw, 3.8rem) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
}

/* Subtext / meta items in hero */
.meta-item {
  color: var(--color-mint) !important;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
}

.meta-item .icon {
  color: var(--color-gold) !important;
}

/* Breadcrumb */
.crumb { color: rgba(214, 232, 208, 0.65) !important; }
.crumb a { color: var(--color-gold) !important; }

/* ══════════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════════ */

/* Primary — gold */
.btn-primary {
  background: var(--color-gold) !important;
  color: var(--color-forest) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  padding: 12px 28px !important;
  transition: background var(--transition), transform var(--transition) !important;
  box-shadow: none !important;
}

.btn-primary:hover {
  background: var(--color-gold-dark) !important;
  transform: translateY(-2px) !important;
}

/* Outline — forest border */
.btn-outline {
  background: transparent !important;
  border: 1.5px solid rgba(245, 240, 232, 0.6) !important;
  color: var(--color-text-on-dark) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  padding: 12px 28px !important;
  transition: background var(--transition), border-color var(--transition) !important;
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #ffffff !important;
}

/* Secondary on light background */
.btn-outline-navy {
  background: transparent !important;
  border: 1.5px solid var(--color-forest) !important;
  color: var(--color-forest) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  padding: 12px 28px !important;
  transition: background var(--transition), color var(--transition) !important;
}

.btn-outline-navy:hover {
  background: var(--color-forest) !important;
  color: var(--color-text-on-dark) !important;
}

/* Remove pill shape from package page buttons (editorial, not casual) */
.btn {
  border-radius: var(--radius-sm) !important;
}

/* ══════════════════════════════════════════════════════════════
   PACKAGE CONTENT AREA
══════════════════════════════════════════════════════════════ */

.package-content {
  background: var(--color-bg-page) !important;
}

/* ── Detail section cards ── */
.detail-section {
  background: var(--color-bg-white) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
  transition: box-shadow var(--transition) !important;
}

.detail-section:hover {
  box-shadow: var(--shadow-hover) !important;
}

.detail-section h2 {
  font-family: var(--font-display) !important;
  color: var(--color-forest) !important;
}

.detail-section h2 .icon {
  color: var(--color-gold) !important;
}

/* ── Itinerary timeline ── */
.day-marker {
  background: var(--color-sage) !important;
  box-shadow: 0 0 0 3px var(--color-mint-pale) !important;
  border-color: var(--color-bg-white) !important;
}

.day-title {
  font-family: var(--font-display) !important;
  color: var(--color-forest) !important;
}

.day-dest {
  color: #ffffff !important;            /* was lime on pale bg — now white on forest */
  background: var(--color-forest) !important;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
}

.day-content {
  color: var(--color-text-secondary) !important;
}

/* ── Price card (sidebar) ── */
.price-card {
  background: var(--color-bg-card) !important;
  border: 1px solid var(--color-border) !important;
  border-top: 4px solid var(--color-gold) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
}

.price-card .price-label {
  font-family: var(--font-body) !important;
  color: var(--color-text-muted) !important;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}

.price-card .price-amount {
  font-family: var(--font-display) !important;
  color: var(--color-forest) !important;
  font-size: 2.2rem !important;
}

.price-card .price-sub,
.price-card .price-tax {
  color: var(--color-text-muted) !important;
}

.price-card .help-text { color: var(--color-text-muted) !important; }
.price-card .help-text a { color: var(--color-gold-dark) !important; }  /* was lime — gold-dark gives better contrast */

/* ── Price badge (list pages) ── */
.price-badge,
.pkg-price {
  background: var(--color-gold) !important;
  color: var(--color-forest) !important;
  font-weight: 500 !important;
  border-radius: var(--radius-sm) !important;
  padding: 4px 10px !important;
  font-family: var(--font-body) !important;
}

/* ── Tag pill (e.g. "Best Seller") ── */
.tag-pill,
.pkg-tag,
.badge-tag {
  background: var(--color-sage) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  border-radius: var(--radius-sm) !important;
  padding: 3px 9px !important;
}

/* ── Quick info sidebar ── */
.quick-info {
  background: var(--color-bg-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
}

.quick-info h3 {
  font-family: var(--font-display) !important;
  color: var(--color-forest) !important;
  border-bottom-color: var(--color-border) !important;
}

.info-val { color: var(--color-forest) !important; font-weight: 500 !important; }
.info-lbl { color: var(--color-text-muted) !important; }

/* ── Cancellation / policy table ── */
.policy-table th {
  background: rgba(28, 58, 42, 0.05) !important;
  color: var(--color-forest) !important;
  font-family: var(--font-body) !important;
}

.policy-table td {
  color: var(--color-text-secondary) !important;
  border-bottom-color: var(--color-border) !important;
}

/* ── Inclusion / Exclusion ── */
.incl-item .check { color: #3A9E6A !important; }  /* slightly muted green */
.excl-item .cross { color: #C05252 !important; }  /* muted red */
.incl-item .text,
.excl-item .text { color: var(--color-text-secondary) !important; }

/* ── Note box ── */
.note-box {
  background: rgba(201, 168, 76, 0.08) !important;
  border-color: rgba(201, 168, 76, 0.3) !important;
  color: var(--color-text-secondary) !important;
}

/* Section labels — lime on white is illegible (~1.69:1). Forest green gives ~5.7:1 */
.section-label,
.section-eyebrow {
  font-family: var(--font-body) !important;
  color: var(--color-forest) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.section-label::before { background: var(--color-forest) !important; }  /* was lime */

.section-title {
  font-family: var(--font-display) !important;
  color: var(--color-forest) !important;
  font-weight: 700 !important;
}

.section-title .accent {
  color: var(--color-gold) !important;
  font-style: italic !important;
}

.section-sub { color: var(--color-text-secondary) !important; }

/* ── Package cards (list pages) ── */
.package-card,
.pkg-card {
  background: var(--color-bg-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform var(--transition), box-shadow var(--transition) !important;
}

.package-card:hover,
.pkg-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-hover) !important;
}

/* ── City overview block ── */
.city-overview {
  background: rgba(168, 197, 160, 0.12) !important;
  border-color: var(--color-mint) !important;
}

.city-block .name { color: var(--color-forest) !important; }
.city-block .nights { color: var(--color-text-muted) !important; }

/* ── Flight badge ── */
.flight-badge {
  background: var(--color-sage) !important;
  color: #ffffff !important;
}

/* ── Tabs ── */
.tab-btn.active,
.tab-btn:focus {
  background: var(--color-forest) !important;
  color: var(--color-text-on-dark) !important;
  border-color: var(--color-forest) !important;
}



/* ══════════════════════════════════════════════════════════════
   FLOAT COMPONENTS
══════════════════════════════════════════════════════════════ */

/* Scroll-to-top button */
.scroll-top {
  background: var(--color-sage) !important;
}

.scroll-top:hover {
  background: var(--color-forest) !important;
}

/* WhatsApp float — keep brand green */
.whatsapp-float {
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35) !important;
}

/* ══════════════════════════════════════════════════════════════
   PROMO BANNER
══════════════════════════════════════════════════════════════ */

.promo-banner {
  background: linear-gradient(90deg, var(--color-forest) 0%, var(--color-sage) 100%) !important;
  color: var(--color-text-on-dark) !important;
}

/* ══════════════════════════════════════════════════════════════
   CMS — EDITABLE FIELD STATES
   (Only visible when cms-active class on body — see cms.js)
══════════════════════════════════════════════════════════════ */

.cms-active .cms-editable {
  outline: 2px dashed var(--color-sage);
  border-radius: var(--radius-sm);
  cursor: text;
  transition: background 0.15s;
}

.cms-active .cms-editable:hover {
  background: rgba(74, 124, 89, 0.08);
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE UTILITIES
══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .content-grid {
    grid-template-columns: 1fr !important;
  }

  .sidebar {
    position: relative !important;
    top: 0 !important;
  }

  .incl-grid,
  .excl-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================
   GLOBAL SLATE & GOLD RETHEME (Applied to all pages)
   Overrides legacy package-theme.css to match index.html
   ========================================================== */

/* 1. Revert Navbar to Light Mode (matching index.html) */
.navbar {
  background: var(--color-bg-navbar) !important;
  border-bottom: 1px solid var(--color-border) !important;
}
.logo-text-new {
  color: var(--color-forest) !important;
}
.navbar-links > li > a, .navbar-links > li > span {
  color: var(--color-text-secondary) !important;
}
.navbar-links > li > a:hover, .navbar-links > li > span:hover, .navbar-links > li > a.active {
  color: var(--color-forest) !important;
  background: var(--color-sage-pale) !important;
}
.dropdown {
  background: var(--color-bg-navbar) !important;
  border: 1px solid var(--color-border) !important;
}
.dropdown li a {
  color: var(--color-text-secondary) !important;
}
.dropdown li a:hover {
  background: var(--color-sage-pale) !important;
  color: var(--color-forest) !important;
}
.hamburger span {
  background: var(--color-forest) !important;
}
.mobile-menu {
  background: var(--color-bg-navbar) !important;
}
.mobile-menu a, .mobile-menu .m-parent {
  color: var(--color-text-secondary) !important;
  border-bottom-color: var(--color-border) !important;
}
.mobile-menu a:hover {
  color: var(--color-forest) !important;
  background: var(--color-sage-pale) !important;
}

/* Navbar Buttons */
.navbar-enquire, #navbar .navbar-enquire, nav .navbar-enquire {
  background: var(--accent) !important;
  color: var(--primary-dark) !important;
  border-color: var(--accent) !important;
}
.navbar-enquire:hover {
  background: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
}

/* 2. Light Sky-Blue Hero Backgrounds */
.page-hero, .package-hero, .cruise-hero {
  background: linear-gradient(135deg, #C8D8EA 0%, #D8E6F3 60%, #EEF2F7 100%) !important;
}

/* Hide legacy dark overlays */
.page-hero::before, .package-hero-bg, .package-hero-overlay, .cruise-hero-bg, .cruise-hero-overlay {
  display: none !important;
}

/* 3. Deep Slate Typography for Heroes */
.page-hero h1, .package-hero h1, .cruise-hero h1, .package-title {
  color: var(--primary-dark) !important;
}
.page-hero h1 span, .cruise-hero h1 span {
  color: var(--primary) !important;
}
.page-hero p, .package-hero p, .cruise-hero p {
  color: var(--primary-dark) !important;
  opacity: 0.8 !important;
}
.crumb { color: var(--primary-dark) !important; opacity: 0.7 !important; }
.crumb a { color: var(--primary) !important; font-weight: 700 !important; }
.hero-badge, .meta-item {
  color: var(--primary-dark) !important;
  border-color: var(--primary) !important;
  background: rgba(13, 46, 82, 0.08) !important;
}
.meta-item .icon { color: var(--primary) !important; }

/* 4. Global Button Retheme */
.btn-primary, .pkg-btn, .form-submit {
  background: var(--accent) !important;
  color: var(--primary-dark) !important;
  border: 2px solid var(--accent) !important;
  box-shadow: none !important;
}
.btn-primary:hover, .pkg-btn:hover, .form-submit:hover {
  background: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
  color: var(--primary-dark) !important;
  transform: translateY(-1px) !important;
}
.btn-outline, .btn-outline-navy {
  background: transparent !important;
  color: var(--primary-dark) !important;
  border: 2px solid var(--primary-dark) !important;
}
.btn-outline:hover, .btn-outline-navy:hover {
  background: rgba(13, 46, 82, 0.1) !important;
  color: var(--primary-dark) !important;
}