/* Shared public-site chrome and palette. Kept separate so every page stays consistent. */
:root {
  --site-ink: #102c30;
  --site-muted: #53696c;
  --site-green: #087f6d;
  --site-yellow: #f4c54e;
  --site-purple: #8a43c7;
  --site-line: #d8e5e3;
  --site-soft: #f4f9f8;
}

body.site-page {
  color: var(--site-ink);
  background: #fff;
}

body.site-page .nav {
  position: sticky;
  top: 12px;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(285px, 0.72fr) minmax(0, 1.7fr);
  align-items: center;
  gap: 22px;
  width: min(1540px, calc(100% - 32px));
  min-height: 112px;
  margin: 14px auto 32px;
  padding: 14px 16px;
  border: 1px solid var(--site-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 12px 34px rgba(17, 51, 54, 0.1);
  backdrop-filter: blur(12px);
}

body.site-page .site-nav-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: stretch;
  gap: 8px;
  min-width: 0;
}

body.site-page .nav-links {
  display: grid;
  grid-template-columns: repeat(7, minmax(94px, 1fr));
  align-items: stretch;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

body.site-page .nav-links a,
body.site-page .social-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  letter-spacing: 0;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

body.site-page .nav-links a {
  width: 100%;
  min-width: 0;
  padding-inline: 8px;
  font-size: 13px;
  white-space: nowrap;
  color: #143438;
  border: 1px solid #cfdddb;
  background: linear-gradient(180deg, #fff 0%, #f5f9f8 54%, #e4efed 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 0 rgba(93, 128, 125, 0.16),
    0 4px 0 #c3d3d0,
    0 7px 12px rgba(27, 66, 69, 0.1);
}

body.site-page .nav-links a[aria-current="page"] {
  color: #fff;
  border-color: #087f6d;
  background: linear-gradient(180deg, #20a78f 0%, #087f6d 65%, #056456 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(0, 45, 39, 0.25),
    0 4px 0 #04584d,
    0 8px 15px rgba(8, 127, 109, 0.2);
}

body.site-page .nav-links a:hover,
body.site-page .social-button:hover {
  transform: translateY(-1px);
  filter: saturate(1.08);
}

body.site-page .nav-links a:active,
body.site-page .social-button:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.16);
}

body.site-page .nav-social {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 7px;
  flex: 0 0 auto;
  padding-left: 0;
  border-left: 0;
}

body.site-page .nav-social .social-button,
body.site-page .nav-links a.nav-social {
  min-height: 30px;
  padding: 0 8px;
  font-size: 12px;
}

body.site-page .social-button {
  gap: 8px;
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

body.site-page .social-button.whatsapp {
  background: linear-gradient(180deg, #38e376, #25d366 65%, #15a84b);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.32), 0 4px 0 #118b3d,
    0 8px 14px rgba(37, 211, 102, 0.2);
}

body.site-page .social-button.facebook {
  background: linear-gradient(180deg, #4599ff, #1877f2 65%, #0b59b9);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), 0 4px 0 #084b9d,
    0 8px 14px rgba(24, 119, 242, 0.2);
}

body.site-page .social-symbol {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 900;
}

body.site-page main,
body.site-page .page-shell,
body.site-page .content-shell {
  color: var(--site-ink);
}

body.site-page section,
body.site-page footer {
  color: inherit;
}

body.site-page .card,
body.site-page .info-card,
body.site-page .package-card,
body.site-page .legal-card,
body.site-page .support-card,
body.site-page .detail-card {
  color: var(--site-ink);
  border-color: var(--site-line);
  background: #fff;
  box-shadow: 0 12px 28px rgba(22, 66, 68, 0.09);
}

body.site-page p,
body.site-page li {
  color: var(--site-muted);
}

body.site-page h1,
body.site-page h2,
body.site-page h3,
body.site-page h4 {
  color: var(--site-ink);
}

body.site-page.home-page .scenic-hero {
  aspect-ratio: 2200 / 1228;
  min-height: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.12)),
    url("./media/sri_lanka_travel_guide_collage_hero.webp") center / contain no-repeat,
    #d9f1fb;
}

body.site-page.home-page .scenic-hero::before {
  background: transparent;
}

body.site-page.home-page .scenic-hero h1,
body.site-page.home-page .scenic-hero h2,
body.site-page.home-page .scenic-hero p {
  color: var(--site-ink);
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.92);
}

body.site-page.home-page .scenic-hero .eyebrow {
  color: #123b3d;
  text-shadow: none;
  background: rgba(255, 250, 224, 0.94);
}

@media (max-width: 1260px) {
  body.site-page .nav {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.site-page .site-nav-actions {
    justify-items: stretch;
    overflow: visible;
    padding: 2px 2px 8px;
  }
}

@media (max-width: 720px) {
  body.site-page .nav {
    position: sticky;
    top: 6px;
    width: calc(100% - 16px);
    min-height: auto;
    margin: 8px auto 20px;
    padding: 10px;
  }

  body.site-page .site-nav-actions {
    gap: 8px;
  }

  body.site-page .nav-links a {
    min-height: 36px;
    padding: 0 8px;
    font-size: 12px;
  }

  body.site-page .nav-social {
    gap: 6px;
  }

  body.site-page .nav-social .social-button {
    min-height: 28px;
    padding: 0 7px;
    font-size: 11px;
  }

  body.site-page.home-page .scenic-hero {
    aspect-ratio: auto;
    min-height: 560px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.16)),
      url("./media/sri_lanka_travel_guide_collage_hero.webp") center / contain no-repeat,
      #d9f1fb;
  }
}

/* Shared light palette for every public content page. */
body.site-page.subpage,
body.site-page.package-catalogue,
body.site-page.package-detail,
body.site-page.subpage main,
body.site-page.package-catalogue main,
body.site-page.package-detail main {
  background: #ffffff;
  color: var(--site-ink);
}

body.site-page .subpage-hero,
body.site-page .package-disclaimer,
body.site-page .package-summary,
body.site-page .package-itinerary,
body.site-page .package-note,
body.site-page .package-request,
body.site-page .package-season {
  border-color: var(--site-line);
  color: var(--site-ink);
}

body.site-page .package-disclaimer,
body.site-page .package-summary,
body.site-page .package-itinerary,
body.site-page .package-note,
body.site-page .package-request {
  background: #ffffff;
}

body.site-page .package-listing {
  background: #f3f9f7;
}


/* Keep legacy content pages on the same clear palette as the home page. */
body.site-page.subpage {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f9f8;
  --surface-3: #edf5f3;
  --text: #17282d;
  --muted: #52696d;
  --soft: #718588;
  --edge: #d8e6e3;
  --shadow: rgba(24, 69, 70, 0.12);
  background: #ffffff !important;
}

body.site-page.subpage::before {
  display: none;
}

body.site-page.subpage .shell,
body.site-page.subpage main {
  background: transparent;
}

body.site-page.subpage .section,
body.site-page.subpage .download-panel {
  color: var(--site-ink);
  border-color: var(--site-line);
  background: #ffffff;
  box-shadow: 0 18px 46px rgba(24, 69, 70, 0.1);
  backdrop-filter: none;
}

body.site-page.subpage .card,
body.site-page.subpage .feature-tile,
body.site-page.subpage .metric {
  color: var(--site-ink);
  border-color: var(--site-line);
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(24, 69, 70, 0.09);
}

body.site-page.subpage h1,
body.site-page.subpage h2,
body.site-page.subpage h3,
body.site-page.subpage .brand-title,
body.site-page.subpage .brand-name {
  color: var(--site-ink);
}

body.site-page.subpage p,
body.site-page.subpage li {
  color: var(--site-muted);
}

body.site-page.subpage .gallery-card,
body.site-page.subpage .photo-card,
body.site-page.subpage .destination-card {
  border-color: var(--site-line);
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(24, 69, 70, 0.09);
}

body.site-page.subpage .gallery-copy span,
body.site-page.subpage .photo-overlay span {
  color: rgba(255, 255, 255, 0.86);
}

body.site-page.package-catalogue .package-catalogue-hero {
  background-image: url("./media/home_hero_sigiriya_web.webp") !important;
  background-position: center 46%;
}

body.site-page.package-catalogue .package-catalogue-copy h1,
body.site-page.package-catalogue .package-catalogue-copy p {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.76), 0 0 24px rgba(0, 0, 0, 0.34);
}

body.site-page.package-catalogue .package-kicker,
body.site-page.package-catalogue .package-hero-stats span {
  background: rgba(8, 31, 32, 0.66);
}
/* Collage hero readability */
body.site-page.home-page .scenic-hero {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.88) 26%, rgba(255, 255, 255, 0.2) 48%, rgba(255, 255, 255, 0) 70%),
    url("./media/sri_lanka_travel_guide_collage_hero.webp") center / contain no-repeat,
    #ffffff;
}

body.site-page.home-page .scenic-hero .hero-copy {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(34px, 5vw, 76px);
  text-align: left;
}

body.site-page.home-page .scenic-hero .hero-copy > * {
  max-width: 510px;
}

body.site-page.home-page .scenic-hero .hero-copy p {
  margin-left: 0;
  margin-right: 0;
}

body.site-page.home-page .scenic-hero .hero-actions,
body.site-page.home-page .scenic-hero .trust-row {
  justify-content: flex-start;
}

@media (max-width: 760px) {
  body.site-page.home-page .scenic-hero {
    aspect-ratio: auto;
    min-height: 690px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.12) 27%, rgba(255, 255, 255, 0.96) 43%, #ffffff 100%),
      url("./media/sri_lanka_travel_guide_collage_hero.webp") center top / 100% auto no-repeat,
      #ffffff;
  }

  body.site-page.home-page .scenic-hero .hero-copy {
    padding: clamp(245px, 68vw, 310px) 18px 40px;
    text-align: center;
  }

  body.site-page.home-page .scenic-hero .hero-copy > * {
    max-width: 100%;
  }

  body.site-page.home-page .scenic-hero .hero-actions,
  body.site-page.home-page .scenic-hero .trust-row {
    justify-content: center;
  }
}