/* ==========================================================
   IslandTravelAtlas — UI Stability V2

   Fixes:
   - Text contrast on dark backgrounds
   - White-on-white card text
   - Oversized headings on dark sections
   - Inconsistent spacing between page sections
   - Footer and navigation contrast

   This stylesheet is loaded last.
   ========================================================== */

body.ita-site {
  --ita-ui-ink: #14271f;
  --ita-ui-text: #42584e;
  --ita-ui-muted: #65786f;

  --ita-ui-white: #ffffff;
  --ita-ui-paper: #f5f8f6;
  --ita-ui-card: #ffffff;
  --ita-ui-border: #d9e5df;

  --ita-ui-green: #078675;
  --ita-ui-green-dark: #066d60;

  --ita-ui-dark: #092d25;
  --ita-ui-dark-two: #12483b;

  --ita-ui-dark-text: #f7fbf9;
  --ita-ui-dark-muted: #d6e8e0;
  --ita-ui-dark-soft: #bcd8cc;

  --ita-ui-section-space:
    clamp(48px, 5.5vw, 76px);

  --ita-ui-hero-space:
    clamp(48px, 6.5vw, 88px);

  --ita-ui-content-gap:
    clamp(22px, 3vw, 34px);

  color: var(--ita-ui-text);
}

/* ==========================================================
   BASE TYPOGRAPHY
   ========================================================== */

body.ita-site main {
  color: var(--ita-ui-text);
}

body.ita-site main :where(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
}

body.ita-site main :where(p, li, dd, figcaption) {
  line-height: 1.65;
  text-wrap: pretty;
}

body.ita-site main :where(
  h1,
  h2,
  h3,
  h4,
  p,
  li,
  a,
  strong,
  small,
  span,
  label
) {
  visibility: visible;
}

/* ==========================================================
   SECTION SPACING
   ========================================================== */

body.ita-site main > section {
  margin-top: 0;
  margin-bottom: 0;
}

body.ita-site main > section:not(
  .rf-connection-strip
):not(
  .hp-method
):not(
  .ita-wl-hero
):not(
  .hp-hero
):not(
  .ita-v2-hero
):not(
  .rf-hero
):not(
  .rf-library-hero
) {
  padding-top:
    var(--ita-ui-section-space) !important;

  padding-bottom:
    var(--ita-ui-section-space) !important;
}

body.ita-site main > :where(
  .hp-hero,
  .ita-v2-hero,
  .rf-hero,
  .rf-library-hero,
  .ita-wl-hero
) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  padding-top:
    var(--ita-ui-hero-space) !important;

  padding-bottom:
    var(--ita-ui-hero-space) !important;
}

body.ita-site main > :where(
  .rf-connection-strip,
  .hp-method
) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.ita-site main > section > :where(
  .rf-shell,
  .ita-tool-shell,
  .ita-live-results__shell,
  .ita-wl-shell,
  .hp-shell,
  .ita-v2-shell,
  .pm-shell
) > :first-child {
  margin-top: 0;
}

body.ita-site main > section > :where(
  .rf-shell,
  .ita-tool-shell,
  .ita-live-results__shell,
  .ita-wl-shell,
  .hp-shell,
  .ita-v2-shell,
  .pm-shell
) > :last-child {
  margin-bottom: 0;
}

body.ita-site :where(
  .rf-section-heading,
  .ita-section-heading,
  .hp-section-heading,
  .ita-v2-section-head,
  .ita-live-results__intro
) {
  margin-top: 0 !important;

  margin-bottom:
    var(--ita-ui-content-gap) !important;
}

body.ita-site main article > section {
  padding-top: 0;
  padding-bottom: 0;
}

body.ita-site main article > section + section {
  margin-top:
    clamp(38px, 5vw, 64px) !important;
}

body.ita-site :where(
  .article-content,
  .guide-content,
  .ita-article,
  .rf-article,
  .editorial-content
) > section + section {
  margin-top:
    clamp(38px, 5vw, 64px) !important;
}

body.ita-site :where(
  .rf-destination-grid,
  .pm-destination-grid,
  .ita-tool-grid,
  .hp-tool-grid,
  .ita-v2-tool-grid,
  .rf-library-grid,
  .rf-feature-grid,
  .hp-destination-grid,
  .ita-v2-destination-grid,
  .rf-planning-grid,
  .ita-live-results__layout,
  .ita-wl-search-layout,
  .ita-wl-results-layout
) {
  gap:
    clamp(16px, 2.2vw, 24px) !important;
}

/* ==========================================================
   KNOWN DARK SURFACES
   ========================================================== */

body.ita-site :where(
  .pm-mega-intro,
  .pm-footer,
  .rf-library-hero,
  .rf-planning-section,
  .rf-route-method,
  .rf-final-cta,
  .ita-v2-planning,
  .ita-v2-final,
  .ita-v2-feature-content,
  .rf-feature-story > div,
  .hp-final,
  .ita-live-review,
  .ita-wl-review,
  .hero-dark,
  .dark-section,
  .section-dark,
  .surface-dark,
  [data-theme="dark"]
) {
  color:
    var(--ita-ui-dark-text) !important;
}

body.ita-site :where(
  .pm-mega-intro,
  .pm-footer,
  .rf-library-hero,
  .rf-planning-section,
  .rf-route-method,
  .rf-final-cta,
  .ita-v2-planning,
  .ita-v2-final,
  .ita-v2-feature-content,
  .rf-feature-story > div,
  .hp-final,
  .ita-live-review,
  .ita-wl-review,
  .hero-dark,
  .dark-section,
  .section-dark,
  .surface-dark,
  [data-theme="dark"]
) :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  strong,
  b,
  dt
) {
  color:
    var(--ita-ui-white) !important;

  opacity: 1 !important;
}

body.ita-site :where(
  .pm-mega-intro,
  .pm-footer,
  .rf-library-hero,
  .rf-planning-section,
  .rf-route-method,
  .rf-final-cta,
  .ita-v2-planning,
  .ita-v2-final,
  .ita-v2-feature-content,
  .rf-feature-story > div,
  .hp-final,
  .ita-live-review,
  .ita-wl-review,
  .hero-dark,
  .dark-section,
  .section-dark,
  .surface-dark,
  [data-theme="dark"]
) :where(
  p,
  li,
  dd,
  small,
  label,
  figcaption
) {
  color:
    var(--ita-ui-dark-muted) !important;

  opacity: 1 !important;
}

body.ita-site :where(
  .pm-mega-intro,
  .pm-footer,
  .rf-library-hero,
  .rf-planning-section,
  .rf-route-method,
  .rf-final-cta,
  .ita-v2-planning,
  .ita-v2-final,
  .ita-v2-feature-content,
  .rf-feature-story > div,
  .hp-final,
  .ita-live-review,
  .ita-wl-review,
  .hero-dark,
  .dark-section,
  .section-dark,
  .surface-dark,
  [data-theme="dark"]
) a:not(
  .hp-button
):not(
  .ita-v2-button
):not(
  .rf-button
):not(
  .pm-header-cta
):not(
  .ita-live-widget__load
) {
  color:
    var(--ita-ui-white) !important;

  opacity: 1 !important;
}

body.ita-site :where(
  .pm-mega-intro,
  .rf-library-hero,
  .rf-planning-section,
  .rf-route-method,
  .rf-final-cta,
  .ita-v2-planning,
  .ita-v2-final,
  .ita-v2-feature-content,
  .rf-feature-story > div,
  .hp-final,
  .ita-live-review,
  .ita-wl-review
) :where(
  .rf-kicker,
  .rf-kicker-light,
  .ita-v2-eyebrow,
  .ita-v2-on-dark,
  .hp-eyebrow,
  .ita-tool-eyebrow,
  .ita-live-results__eyebrow,
  .ita-wl-eyebrow
) {
  color:
    var(--ita-ui-dark-soft) !important;

  opacity: 1 !important;
}

/* ==========================================================
   HOMEPAGE DARK AREAS
   ========================================================== */

body.ita-site .ita-v2-planning,
body.ita-site .ita-v2-final,
body.ita-site .rf-route-method,
body.ita-site .rf-final-cta,
body.ita-site .hp-final {
  background:
    linear-gradient(
      135deg,
      var(--ita-ui-dark),
      var(--ita-ui-dark-two)
    ) !important;
}

body.ita-site :where(
  .ita-v2-final,
  .rf-final-cta,
  .hp-final
) h2 {
  max-width: 820px;

  color:
    var(--ita-ui-white) !important;

  font-size:
    clamp(1.8rem, 3.4vw, 2.75rem) !important;

  line-height: 1.1 !important;
  letter-spacing: -0.04em !important;
}

body.ita-site :where(
  .ita-v2-final,
  .rf-final-cta,
  .hp-final
) p {
  color:
    var(--ita-ui-dark-muted) !important;

  font-size: 1rem !important;
  line-height: 1.65 !important;
}

body.ita-site :where(
  .ita-v2-feature-content,
  .rf-feature-story > div
) {
  background:
    rgba(7, 31, 25, 0.92) !important;

  border-color:
    rgba(255, 255, 255, 0.18) !important;
}

body.ita-site :where(
  .ita-v2-feature-content,
  .rf-feature-story > div
) h2 {
  max-width: 25ch;

  color:
    var(--ita-ui-white) !important;

  font-size:
    clamp(1.55rem, 2.8vw, 2.35rem) !important;

  line-height: 1.15 !important;
}

body.ita-site :where(
  .ita-v2-feature-content,
  .rf-feature-story > div
) p {
  max-width: 62ch;

  color:
    var(--ita-ui-dark-muted) !important;

  font-size: 0.98rem !important;
  line-height: 1.65 !important;
}

/* ==========================================================
   GUIDE LIBRARY HERO
   ========================================================== */

body.ita-site .rf-library-hero {
  color:
    var(--ita-ui-dark-text) !important;
}

body.ita-site .rf-library-hero :where(
  .breadcrumbs,
  .rf-kicker,
  span
) {
  color:
    var(--ita-ui-dark-muted) !important;

  opacity: 1 !important;
}

body.ita-site .rf-library-hero .rf-search {
  background:
    var(--ita-ui-white) !important;

  color:
    var(--ita-ui-ink) !important;
}

body.ita-site .rf-library-hero .rf-search :where(
  input,
  button,
  b,
  span
) {
  color:
    var(--ita-ui-ink) !important;

  opacity: 1 !important;
}

body.ita-site .rf-library-hero .rf-search input::placeholder {
  color:
    var(--ita-ui-muted) !important;

  opacity: 1 !important;
}

/* ==========================================================
   DESTINATION IMAGE CARDS
   ========================================================== */

body.ita-site .rf-destination-card .rf-destination-shade {
  background:
    linear-gradient(
      180deg,
      rgba(4, 18, 14, 0.05) 0%,
      rgba(4, 18, 14, 0.38) 38%,
      rgba(4, 18, 14, 0.96) 100%
    ) !important;

  opacity: 1 !important;
}

body.ita-site .rf-destination-card .rf-destination-content {
  color:
    var(--ita-ui-white) !important;

  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.72);
}

body.ita-site .rf-destination-card .rf-destination-content :where(
  small,
  strong,
  p,
  em,
  span
) {
  color:
    var(--ita-ui-white) !important;

  opacity: 1 !important;
}

/* ==========================================================
   PLANNING AND ROUTE SECTIONS
   ========================================================== */

body.ita-site .rf-planning-section .rf-planning-link :where(
  strong,
  b,
  em
) {
  color:
    var(--ita-ui-white) !important;

  opacity: 1 !important;
}

body.ita-site .rf-planning-section .rf-planning-link :where(
  p,
  small,
  span
) {
  color:
    var(--ita-ui-dark-muted) !important;

  opacity: 1 !important;
}

body.ita-site .rf-route-method .rf-method-list :where(
  strong,
  b
) {
  color:
    var(--ita-ui-white) !important;
}

body.ita-site .rf-route-method .rf-method-list :where(
  p,
  small,
  span
) {
  color:
    var(--ita-ui-dark-muted) !important;

  opacity: 1 !important;
}

/* ==========================================================
   LIVE RESULTS AND WHITE-LABEL REVIEW PANELS
   ========================================================== */

body.ita-site :where(
  .ita-live-review,
  .ita-wl-review
) {
  background:
    linear-gradient(
      145deg,
      var(--ita-ui-dark),
      var(--ita-ui-dark-two)
    ) !important;
}

body.ita-site :where(
  .ita-live-review,
  .ita-wl-review
) input[type="checkbox"] {
  accent-color: #63d0b6;
}

/* ==========================================================
   RESET LIGHT CARDS INSIDE DARK SECTIONS
   ========================================================== */

body.ita-site :where(
  .ita-tool-card,
  .hp-tool-card,
  .hp-destination-card,
  .rf-library-group,
  .rf-library-item,
  .rf-library-card,
  .rf-tool-panel,
  .ita-live-widget,
  .ita-wl-search-card,
  .ita-wl-results-card,
  .ita-v2-budget,
  .hp-feature-card,
  .hp-latest-link,
  .hp-trust-point
) {
  background:
    var(--ita-ui-card);

  color:
    var(--ita-ui-text) !important;
}

body.ita-site :where(
  .ita-tool-card,
  .hp-tool-card,
  .hp-destination-card,
  .rf-library-group,
  .rf-library-item,
  .rf-library-card,
  .rf-tool-panel,
  .ita-live-widget,
  .ita-wl-search-card,
  .ita-wl-results-card,
  .ita-v2-budget,
  .hp-feature-card,
  .hp-latest-link,
  .hp-trust-point
) :where(
  h1,
  h2,
  h3,
  h4,
  strong,
  b,
  dt
) {
  color:
    var(--ita-ui-ink) !important;

  text-shadow: none !important;
}

body.ita-site :where(
  .ita-tool-card,
  .hp-tool-card,
  .hp-destination-card,
  .rf-library-group,
  .rf-library-item,
  .rf-library-card,
  .rf-tool-panel,
  .ita-live-widget,
  .ita-wl-search-card,
  .ita-wl-results-card,
  .ita-v2-budget,
  .hp-feature-card,
  .hp-latest-link,
  .hp-trust-point
) :where(
  p,
  li,
  dd,
  small,
  span,
  label
) {
  color:
    var(--ita-ui-text) !important;

  opacity: 1 !important;
  text-shadow: none !important;
}

body.ita-site :where(
  .ita-tool-card,
  .hp-tool-card,
  .hp-destination-card,
  .rf-library-group,
  .rf-library-item,
  .rf-library-card,
  .rf-tool-panel,
  .ita-live-widget,
  .ita-wl-search-card,
  .ita-wl-results-card,
  .ita-v2-budget,
  .hp-feature-card,
  .hp-latest-link,
  .hp-trust-point
) a {
  color:
    var(--ita-ui-green-dark) !important;
}

/* ==========================================================
   BUTTON CONTRAST
   ========================================================== */

body.ita-site :where(
  .hp-button-primary,
  .ita-v2-button-primary,
  .rf-button-primary,
  .ita-live-widget__load,
  .pm-header-cta
) {
  background:
    var(--ita-ui-green) !important;

  border-color:
    var(--ita-ui-green) !important;

  color:
    var(--ita-ui-white) !important;
}

body.ita-site :where(
  .hp-button-primary,
  .ita-v2-button-primary,
  .rf-button-primary,
  .ita-live-widget__load,
  .pm-header-cta
):hover {
  background:
    var(--ita-ui-green-dark) !important;

  border-color:
    var(--ita-ui-green-dark) !important;

  color:
    var(--ita-ui-white) !important;
}

body.ita-site :where(
  .hp-final,
  .ita-v2-final
) :where(
  .hp-button,
  .ita-v2-button-secondary
) {
  background:
    var(--ita-ui-white) !important;

  border-color:
    var(--ita-ui-white) !important;

  color:
    var(--ita-ui-dark) !important;
}

/* ==========================================================
   FOOTER
   ========================================================== */

body.ita-site .pm-footer {
  margin-top: 0 !important;

  background:
    #082820 !important;

  color:
    var(--ita-ui-dark-text) !important;
}

body.ita-site .pm-footer :where(
  h2,
  h3,
  strong,
  a
) {
  color:
    var(--ita-ui-white) !important;

  opacity: 1 !important;
}

body.ita-site .pm-footer :where(
  p,
  small,
  span,
  button
) {
  color:
    var(--ita-ui-dark-muted) !important;

  opacity: 1 !important;
}

/* ==========================================================
   MOBILE SPACING
   ========================================================== */

@media (max-width: 760px) {
  body.ita-site {
    --ita-ui-section-space: 42px;
    --ita-ui-hero-space: 48px;
    --ita-ui-content-gap: 22px;
  }

  body.ita-site main article > section + section,
  body.ita-site :where(
    .article-content,
    .guide-content,
    .ita-article,
    .rf-article,
    .editorial-content
  ) > section + section {
    margin-top:
      38px !important;
  }

  body.ita-site :where(
    .ita-v2-final,
    .rf-final-cta,
    .hp-final
  ) h2 {
    font-size:
      clamp(1.65rem, 8vw, 2.2rem) !important;
  }

  body.ita-site :where(
    .ita-v2-feature-content,
    .rf-feature-story > div
  ) h2 {
    font-size:
      clamp(1.45rem, 7vw, 2rem) !important;
  }
}

@media (max-width: 480px) {
  body.ita-site {
    --ita-ui-section-space: 36px;
    --ita-ui-hero-space: 42px;
  }
}