/* ==========================================================
   IslandTravelAtlas — Tool Contrast Specificity V4

   This stylesheet deliberately avoids :where() for the
   critical dark-panel selectors.

   It loads last and overrides previous contrast layers.
   ========================================================== */

html body.ita-tool-page-contrast-fixed {
  --ita-v4-page: #f4f8f6;
  --ita-v4-surface: #ffffff;
  --ita-v4-soft: #edf5f2;
  --ita-v4-border: #d6e3dd;

  --ita-v4-ink: #14271f;
  --ita-v4-text: #40574d;
  --ita-v4-muted: #63766d;

  --ita-v4-accent: #078675;
  --ita-v4-accent-hover: #066d60;

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

  --ita-v4-white: #ffffff;
  --ita-v4-dark-text: #f4faf7;
  --ita-v4-dark-muted: #d4e7de;
  --ita-v4-dark-soft: #bcd8cc;

  --ita-v4-section-space:
    clamp(46px, 5vw, 68px);

  --ita-v4-hero-space:
    clamp(50px, 6vw, 76px);

  background:
    var(--ita-v4-page) !important;

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

/* ==========================================================
   NORMAL LIGHT-PAGE TEXT
   ========================================================== */

html body.ita-tool-page-contrast-fixed main {
  background:
    var(--ita-v4-page) !important;

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

html body.ita-tool-page-contrast-fixed main h1,
html body.ita-tool-page-contrast-fixed main h2,
html body.ita-tool-page-contrast-fixed main h3,
html body.ita-tool-page-contrast-fixed main h4,
html body.ita-tool-page-contrast-fixed main h5,
html body.ita-tool-page-contrast-fixed main h6,
html body.ita-tool-page-contrast-fixed main strong,
html body.ita-tool-page-contrast-fixed main b,
html body.ita-tool-page-contrast-fixed main dt {
  color:
    var(--ita-v4-ink) !important;

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

html body.ita-tool-page-contrast-fixed main p,
html body.ita-tool-page-contrast-fixed main li,
html body.ita-tool-page-contrast-fixed main dd,
html body.ita-tool-page-contrast-fixed main small,
html body.ita-tool-page-contrast-fixed main span,
html body.ita-tool-page-contrast-fixed main label,
html body.ita-tool-page-contrast-fixed main figcaption {
  color:
    var(--ita-v4-text) !important;

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

html body.ita-tool-page-contrast-fixed main a {
  color:
    var(--ita-v4-accent-hover) !important;

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

html body.ita-tool-page-contrast-fixed main .breadcrumbs,
html body.ita-tool-page-contrast-fixed main .rf-kicker,
html body.ita-tool-page-contrast-fixed main .ita-tool-eyebrow,
html body.ita-tool-page-contrast-fixed main .ita-live-results__eyebrow,
html body.ita-tool-page-contrast-fixed main .ita-wl-eyebrow {
  color:
    var(--ita-v4-accent-hover) !important;

  opacity: 1 !important;
}

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

html body.ita-tool-page-contrast-fixed main > section {
  margin: 0 !important;

  padding-top:
    var(--ita-v4-section-space) !important;

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

html body.ita-tool-page-contrast-fixed
main > section:first-child {
  padding-top:
    var(--ita-v4-hero-space) !important;

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

html body.ita-tool-page-contrast-fixed
main > section + section {
  border-top:
    1px solid var(--ita-v4-border) !important;
}

html body.ita-tool-page-contrast-fixed
main > section:nth-of-type(odd) {
  background-color:
    var(--ita-v4-surface) !important;
}

html body.ita-tool-page-contrast-fixed
main > section:nth-of-type(even) {
  background-color:
    var(--ita-v4-soft) !important;
}

html body.ita-tool-page-contrast-fixed
main > section:first-child {
  background:
    radial-gradient(
      circle at 92% 0%,
      rgba(7, 134, 117, 0.11),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #f7fcfa 0%,
      #eaf5f1 100%
    ) !important;
}

html body.ita-tool-page-contrast-fixed
main > section:first-child h1 {
  max-width: 900px;

  font-size:
    clamp(2.15rem, 4.6vw, 3.45rem) !important;

  line-height: 1.04 !important;
  letter-spacing: -0.05em !important;
}

html body.ita-tool-page-contrast-fixed
main > section h2 {
  font-size:
    clamp(1.6rem, 2.9vw, 2.3rem) !important;

  line-height: 1.13 !important;
  letter-spacing: -0.035em !important;
}

html body.ita-tool-page-contrast-fixed
main p,
html body.ita-tool-page-contrast-fixed
main li {
  line-height: 1.65 !important;
}

html body.ita-tool-page-contrast-fixed
main .rf-section-heading,
html body.ita-tool-page-contrast-fixed
main .ita-section-heading,
html body.ita-tool-page-contrast-fixed
main .ita-live-results__intro {
  margin-top: 0 !important;

  margin-bottom:
    clamp(24px, 3vw, 34px) !important;
}

html body.ita-tool-page-contrast-fixed
main .ita-tool-grid,
html body.ita-tool-page-contrast-fixed
main .ita-provider-grid,
html body.ita-tool-page-contrast-fixed
main .ita-options-grid,
html body.ita-tool-page-contrast-fixed
main .ita-decision-grid,
html body.ita-tool-page-contrast-fixed
main .ita-live-results__layout,
html body.ita-tool-page-contrast-fixed
main .ita-wl-search-layout,
html body.ita-tool-page-contrast-fixed
main .ita-wl-results-layout {
  gap:
    clamp(16px, 2.2vw, 24px) !important;
}

/* ==========================================================
   CARDS ON LIGHT BACKGROUNDS
   ========================================================== */

html body.ita-tool-page-contrast-fixed
main .ita-tool-card,
html body.ita-tool-page-contrast-fixed
main .ita-provider-card,
html body.ita-tool-page-contrast-fixed
main .ita-affiliate-card,
html body.ita-tool-page-contrast-fixed
main .ita-option-card,
html body.ita-tool-page-contrast-fixed
main .ita-decision-card,
html body.ita-tool-page-contrast-fixed
main .ita-route-card,
html body.ita-tool-page-contrast-fixed
main .ita-widget-panel,
html body.ita-tool-page-contrast-fixed
main .ita-live-widget,
html body.ita-tool-page-contrast-fixed
main .ita-wl-search-card,
html body.ita-tool-page-contrast-fixed
main .ita-wl-results-card,
html body.ita-tool-page-contrast-fixed
main .rf-tool-panel,
html body.ita-tool-page-contrast-fixed
main .rf-library-item,
html body.ita-tool-page-contrast-fixed
main .rf-library-group {
  border-color:
    var(--ita-v4-border) !important;

  background:
    var(--ita-v4-surface) !important;

  color:
    var(--ita-v4-text) !important;

  box-shadow:
    0 12px 34px rgba(16, 49, 39, 0.08);
}

html body.ita-tool-page-contrast-fixed
main .ita-tool-card h2,
html body.ita-tool-page-contrast-fixed
main .ita-tool-card h3,
html body.ita-tool-page-contrast-fixed
main .ita-provider-card h2,
html body.ita-tool-page-contrast-fixed
main .ita-provider-card h3,
html body.ita-tool-page-contrast-fixed
main .ita-affiliate-card h2,
html body.ita-tool-page-contrast-fixed
main .ita-affiliate-card h3,
html body.ita-tool-page-contrast-fixed
main .ita-option-card h2,
html body.ita-tool-page-contrast-fixed
main .ita-option-card h3,
html body.ita-tool-page-contrast-fixed
main .ita-decision-card h2,
html body.ita-tool-page-contrast-fixed
main .ita-decision-card h3,
html body.ita-tool-page-contrast-fixed
main .ita-live-widget h2,
html body.ita-tool-page-contrast-fixed
main .ita-live-widget h3 {
  color:
    var(--ita-v4-ink) !important;

  opacity: 1 !important;
}

html body.ita-tool-page-contrast-fixed
main .ita-tool-card p,
html body.ita-tool-page-contrast-fixed
main .ita-tool-card span,
html body.ita-tool-page-contrast-fixed
main .ita-tool-card small,
html body.ita-tool-page-contrast-fixed
main .ita-provider-card p,
html body.ita-tool-page-contrast-fixed
main .ita-provider-card span,
html body.ita-tool-page-contrast-fixed
main .ita-provider-card small,
html body.ita-tool-page-contrast-fixed
main .ita-affiliate-card p,
html body.ita-tool-page-contrast-fixed
main .ita-affiliate-card span,
html body.ita-tool-page-contrast-fixed
main .ita-affiliate-card small,
html body.ita-tool-page-contrast-fixed
main .ita-option-card p,
html body.ita-tool-page-contrast-fixed
main .ita-decision-card p,
html body.ita-tool-page-contrast-fixed
main .ita-live-widget p,
html body.ita-tool-page-contrast-fixed
main .ita-live-widget span {
  color:
    var(--ita-v4-text) !important;

  opacity: 1 !important;
}

/* ==========================================================
   DARK REVIEW PANELS
   These selectors intentionally have greater specificity.
   ========================================================== */

html body.ita-tool-page-contrast-fixed
main .ita-live-review,
html body.ita-tool-page-contrast-fixed
main .ita-wl-review {
  border:
    1px solid rgba(255, 255, 255, 0.13) !important;

  background:
    linear-gradient(
      145deg,
      var(--ita-v4-dark),
      var(--ita-v4-dark-two)
    ) !important;

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

html body.ita-tool-page-contrast-fixed
main .ita-live-review h1,
html body.ita-tool-page-contrast-fixed
main .ita-live-review h2,
html body.ita-tool-page-contrast-fixed
main .ita-live-review h3,
html body.ita-tool-page-contrast-fixed
main .ita-live-review h4,
html body.ita-tool-page-contrast-fixed
main .ita-live-review strong,
html body.ita-tool-page-contrast-fixed
main .ita-live-review b,
html body.ita-tool-page-contrast-fixed
main .ita-wl-review h1,
html body.ita-tool-page-contrast-fixed
main .ita-wl-review h2,
html body.ita-tool-page-contrast-fixed
main .ita-wl-review h3,
html body.ita-tool-page-contrast-fixed
main .ita-wl-review h4,
html body.ita-tool-page-contrast-fixed
main .ita-wl-review strong,
html body.ita-tool-page-contrast-fixed
main .ita-wl-review b {
  color:
    var(--ita-v4-white) !important;

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

html body.ita-tool-page-contrast-fixed
main .ita-live-review p,
html body.ita-tool-page-contrast-fixed
main .ita-live-review li,
html body.ita-tool-page-contrast-fixed
main .ita-live-review label,
html body.ita-tool-page-contrast-fixed
main .ita-live-review span,
html body.ita-tool-page-contrast-fixed
main .ita-live-review small,
html body.ita-tool-page-contrast-fixed
main .ita-live-review dd,
html body.ita-tool-page-contrast-fixed
main .ita-wl-review p,
html body.ita-tool-page-contrast-fixed
main .ita-wl-review li,
html body.ita-tool-page-contrast-fixed
main .ita-wl-review label,
html body.ita-tool-page-contrast-fixed
main .ita-wl-review span,
html body.ita-tool-page-contrast-fixed
main .ita-wl-review small,
html body.ita-tool-page-contrast-fixed
main .ita-wl-review dd {
  color:
    var(--ita-v4-dark-muted) !important;

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

html body.ita-tool-page-contrast-fixed
main .ita-live-review a,
html body.ita-tool-page-contrast-fixed
main .ita-wl-review a {
  color:
    var(--ita-v4-white) !important;

  opacity: 1 !important;

  font-weight: 750 !important;

  text-decoration-color:
    rgba(255, 255, 255, 0.62) !important;
}

html body.ita-tool-page-contrast-fixed
main .ita-live-review input[type="checkbox"],
html body.ita-tool-page-contrast-fixed
main .ita-wl-review input[type="checkbox"] {
  accent-color: #63d0b6 !important;
}

html body.ita-tool-page-contrast-fixed
main .ita-live-review__disclosure,
html body.ita-tool-page-contrast-fixed
main .ita-wl-disclosure {
  color:
    var(--ita-v4-dark-soft) !important;

  opacity: 1 !important;
}

/* ==========================================================
   FORMS
   ========================================================== */

html body.ita-tool-page-contrast-fixed
main input,
html body.ita-tool-page-contrast-fixed
main select,
html body.ita-tool-page-contrast-fixed
main textarea {
  border:
    1px solid #c9d9d2 !important;

  background:
    var(--ita-v4-white) !important;

  color:
    var(--ita-v4-ink) !important;

  opacity: 1 !important;
}

html body.ita-tool-page-contrast-fixed
main input::placeholder,
html body.ita-tool-page-contrast-fixed
main textarea::placeholder {
  color:
    var(--ita-v4-muted) !important;

  opacity: 1 !important;
}

/* ==========================================================
   BUTTONS
   ========================================================== */

html body.ita-tool-page-contrast-fixed
main .rf-button-primary,
html body.ita-tool-page-contrast-fixed
main .hp-button-primary,
html body.ita-tool-page-contrast-fixed
main .ita-button-primary,
html body.ita-tool-page-contrast-fixed
main .ita-live-widget__load,
html body.ita-tool-page-contrast-fixed
main .ita-wl-button,
html body.ita-tool-page-contrast-fixed
main button[type="submit"] {
  border-color:
    var(--ita-v4-accent) !important;

  background:
    var(--ita-v4-accent) !important;

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

  opacity: 1 !important;
}

html body.ita-tool-page-contrast-fixed
main .rf-button-primary span,
html body.ita-tool-page-contrast-fixed
main .hp-button-primary span,
html body.ita-tool-page-contrast-fixed
main .ita-button-primary span,
html body.ita-tool-page-contrast-fixed
main .ita-live-widget__load span,
html body.ita-tool-page-contrast-fixed
main .ita-wl-button span,
html body.ita-tool-page-contrast-fixed
main button[type="submit"] span {
  color:
    var(--ita-v4-white) !important;
}

/* ==========================================================
   MEGA MENU INTRO
   ========================================================== */

html body.ita-tool-page-contrast-fixed
.pm-mega-intro {
  background:
    linear-gradient(
      145deg,
      var(--ita-v4-dark),
      var(--ita-v4-dark-two)
    ) !important;

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

html body.ita-tool-page-contrast-fixed
.pm-mega-intro h1,
html body.ita-tool-page-contrast-fixed
.pm-mega-intro h2,
html body.ita-tool-page-contrast-fixed
.pm-mega-intro h3,
html body.ita-tool-page-contrast-fixed
.pm-mega-intro strong,
html body.ita-tool-page-contrast-fixed
.pm-mega-intro a {
  color:
    var(--ita-v4-white) !important;

  opacity: 1 !important;
}

html body.ita-tool-page-contrast-fixed
.pm-mega-intro p,
html body.ita-tool-page-contrast-fixed
.pm-mega-intro span,
html body.ita-tool-page-contrast-fixed
.pm-mega-intro small {
  color:
    var(--ita-v4-dark-muted) !important;

  opacity: 1 !important;
}

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

html body.ita-tool-page-contrast-fixed
.pm-footer {
  background:
    #082820 !important;

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

html body.ita-tool-page-contrast-fixed
.pm-footer h1,
html body.ita-tool-page-contrast-fixed
.pm-footer h2,
html body.ita-tool-page-contrast-fixed
.pm-footer h3,
html body.ita-tool-page-contrast-fixed
.pm-footer h4,
html body.ita-tool-page-contrast-fixed
.pm-footer strong,
html body.ita-tool-page-contrast-fixed
.pm-footer b,
html body.ita-tool-page-contrast-fixed
.pm-footer a {
  color:
    var(--ita-v4-white) !important;

  opacity: 1 !important;
}

html body.ita-tool-page-contrast-fixed
.pm-footer p,
html body.ita-tool-page-contrast-fixed
.pm-footer li,
html body.ita-tool-page-contrast-fixed
.pm-footer span,
html body.ita-tool-page-contrast-fixed
.pm-footer small,
html body.ita-tool-page-contrast-fixed
.pm-footer button {
  color:
    var(--ita-v4-dark-muted) !important;

  opacity: 1 !important;
}

/* ==========================================================
   CONNECTIVITY PAGE EXTRA COVERAGE
   ========================================================== */

html body.ita-connectivity-page
main .ita-live-results__intro h2 {
  color:
    var(--ita-v4-ink) !important;
}

html body.ita-connectivity-page
main .ita-live-results__intro p {
  color:
    var(--ita-v4-text) !important;
}

html body.ita-connectivity-page
main .ita-live-widget__toolbar strong {
  color:
    var(--ita-v4-ink) !important;
}

html body.ita-connectivity-page
main .ita-live-widget__status {
  color:
    var(--ita-v4-muted) !important;
}

html body.ita-connectivity-page
main .ita-live-widget__placeholder {
  color:
    var(--ita-v4-text) !important;
}

html body.ita-connectivity-page
main .ita-live-review h3 {
  color:
    var(--ita-v4-white) !important;
}

html body.ita-connectivity-page
main .ita-live-review p,
html body.ita-connectivity-page
main .ita-live-review li,
html body.ita-connectivity-page
main .ita-live-review label,
html body.ita-connectivity-page
main .ita-live-review span {
  color:
    var(--ita-v4-dark-muted) !important;
}

html body.ita-connectivity-page
main .ita-live-review a {
  color:
    var(--ita-v4-white) !important;
}

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

@media (max-width: 760px) {
  html body.ita-tool-page-contrast-fixed {
    --ita-v4-section-space: 40px;
    --ita-v4-hero-space: 46px;
  }

  html body.ita-tool-page-contrast-fixed
  main > section:first-child h1 {
    font-size:
      clamp(2rem, 10vw, 2.75rem) !important;
  }

  html body.ita-tool-page-contrast-fixed
  main > section h2 {
    font-size:
      clamp(1.5rem, 7vw, 2rem) !important;
  }
}