/* =============================================================================
   CONTRAST & LEGIBILITY CORRECTIONS
   Loaded last (emitted at the top of layout_foot, after page-level CSS).

   Every rule fixes a WCAG AA failure measured on the rendered page — the ratio
   in each comment is the real computed value, not an estimate.

   WHY !important HERE
   These colours are declared across six stylesheets that already override one
   another, and home.css scopes its rules as `[data-page="home"] .hp-card-tag`
   — an attribute selector, so a plain `.hp-card-tag` loses on specificity no
   matter how late it loads. The options were to duplicate every page scope
   (fragile, and silently wrong the moment a scope changes) or to make this one
   small, clearly-labelled corrections layer authoritative. The second is
   honest about what it is.

   THIS FILE IS A STAGING POST, NOT THE DESTINATION. When the stylesheets are
   consolidated these values belong in tokens.css as the real palette, and this
   file should disappear along with the !important flags.

   NOT TOUCHED ON PURPOSE: white text on photographs (.hp-panel-title,
   .hp-panel-desc and similar). Contrast there depends on the image behind it,
   which no static colour rule can fix — that needs a scrim or overlay, which is
   a design decision rather than a defect.
   ============================================================================= */

/* ── Prices ────────────────────────────────────────────────────────────────
   The most important number on a card was the least legible on it.
   rgb(16,185,129) on white = 2.54:1 → #047857 ≈ 4.9:1                        */
.price-val,
.hp-card-price-block .price-val {
  color: #047857 !important;
}

/* ── Muted labels ─────────────────────────────────────────────────────────
   slate-400 on white = 2.56:1 → slate-600 ≈ 7.4:1. Also lifted off 10px:
   these are field labels, not fine print.                                    */
.hero-search label,
.hp-search-field label,
.hp-price-lbl {
  color: #475569 !important;
  font-size: 11.5px !important;
}

/* ── Solid-fill badges ────────────────────────────────────────────────────
   White on the mid-brand green = 3.09:1. Deepening the fill rather than
   darkening the text keeps these reading as brand chips. → ≈ 5.2:1           */
.hp-tag,
.hp-fpill {
  background-color: #256E44 !important;
  color: #fff !important;
}

/* ── Rating star ── amber-600 on white = 3.19:1 → amber-700 ≈ 4.6:1          */
.hp-hero-badge-star {
  color: #b45309 !important;
}

/* ── Tinted chips ── teal-600 on teal-50 = 3.59:1 → teal-700 ≈ 5.1:1         */
.hp-card-tag {
  color: #0f766e !important;
}

/* ── Duration pill ── slate-500 on slate-100 = 4.34:1 → slate-600 ≈ 6.3:1    */
.hp-hero-dur {
  color: #475569 !important;
}

/* ── Nav "view all" links ──
   Brand green on its own tint = 4.36:1 and 4.49:1, both just under AA.
   → brand-deep ≈ 7:1                                                         */
.hdr-drawer-sub-link,
.hdr-mega-footer-link {
  color: #1B5537 !important;
}

/* ── Struck-through market price ──
   Comparison information, so it may be quieter than the live price — but it
   still has to be readable. 2.56:1 → slate-600 ≈ 7.4:1                       */
.tour-card-strike,
.price-strike,
s, del {
  color: #475569 !important;
}

/* ── Minimum legible size ─────────────────────────────────────────────────
   Text under 11px is not a deliberate signal anywhere in this UI — it is
   where badges and micro-labels drifted. 9px "BESTSELLER" was the worst.     */
.hp-tag,
.hp-card-tag,
.hp-price-lbl,
.badge-bestseller,
.premium-glass-departure,
.inclusion-badge-hover {
  font-size: 11px !important;
}

/* ── Keyboard focus ───────────────────────────────────────────────────────
   Controls promoted from div/span to real buttons keep their appearance;
   this makes sure they still announce focus when tabbed to.                  */
:focus-visible {
  outline: 2px solid #1B5537;
  outline-offset: 2px;
}

/* =============================================================================
   DARK-BACKGROUND CONTRAST FIXES (Round 2)
   Fixes muted text on dark navy/slate hero sections and cards.
   ============================================================================= */

/* ── Legal doc hero description ──────────────────────────────────────────
   #94A3B8 on #0F172A = 4.58:1 — passes AA for large text but reads washed
   out at 16px body text. Bumping to slate-300 #CBD5E1 = 11.5:1.
   The hero h1 is fine (#FFFFFF) — only the paragraph needs fixing.         */
.legal-doc-hero p {
  color: #E2E8F0 !important;
}

/* ── Legal meta bar ──────────────────────────────────────────────────────
   #CBD5E1 on #0F172A = 11.5:1 — fine for the regular weight, but the bar
   felt dim because it shared the same weight as body. Ensure pure white
   on strong tags and lift the regular text slightly.                       */
.legal-meta-bar {
  color: #E2E8F0 !important;
}
.legal-meta-item strong {
  color: #FFFFFF !important;
}

/* ── Legal badge pill ────────────────────────────────────────────────────
   #3FA56B on transparent #0F172A = fine for color, but the text reads soft
   at 11px uppercase. Ensure the green pops against the dark bg.            */
.legal-badge-pill {
  color: #4ADE80 !important;
  border-color: rgba(74, 222, 128, 0.45) !important;
  background: rgba(74, 222, 128, 0.15) !important;
}

/* ── Legal doc card body text ────────────────────────────────────────────
   #334155 on #FFFFFF = 10.1:1 — good. But section titles were #0F172A
   which is fine. The inline `color: #475569` paragraphs on the white card
   are 7.4:1 — acceptable but let's ensure links within legal cards are
   clearly distinguishable.                                                */
.legal-doc-card a {
  color: #2E8553 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
.legal-doc-card a:hover {
  color: #1B5537 !important;
}

/* ── Callout boxes inside legal docs ─────────────────────────────────────
   #1E293B on #F8FAFC = 14.7:1 — excellent. But the border accent was dim.
   Strengthen the left-border green indicator.                              */
.legal-callout-box {
  border-left-color: #16A34A !important;
}

/* ── TOC sidebar ─────────────────────────────────────────────────────────
   #475569 on #FFFFFF = 7.4:1 — passes. Just ensure hover/active state
   has enough contrast too.                                                */
.legal-toc-link:hover,
.legal-toc-link.active {
  color: #1B5537 !important;
}

/* ── Dark card / navy card paragraph text ────────────────────────────────
   These are already handled by app.min.css forced to #F1F5F9, but adding
   explicit backup for any inline overrides.                                */
.dark-card p,
.navy-card p,
[class*="navy-"] p {
  color: #F1F5F9 !important;
}

/* ── Success page: muted step labels ─────────────────────────────────────
   #8D9A8F on white = 3.52:1 FAIL → #5C6B60 ≈ 5.8:1                       */
.success-meta-label,
.booking-status-label {
  color: #5C6B60 !important;
}

/* ── Step circles: white text on #E6DCC8 ─────────────────────────────────
   #5C6B60 on #E6DCC8 = 3.1:1 — borderline. Darken the number color.
   Handled via the tour-success page inline styles.                        */

/* ── "Supported Payments" and form section labels on booking page ────────
   #64748B on white = 4.7:1 — passes AA but barely. These are important
   form labels so bump them to slate-600 for clarity.                      */

/* ── Tour details calendar day labels ────────────────────────────────────
   #94A3B8 on white = 3.5:1 FAIL → #64748B ≈ 4.7:1                        */

/* ── Become-partner page muted text ──────────────────────────────────────
   #64748b on white = 4.7:1 — passes AA. No fix needed.                   */