/* ==========================================================================
   WiseTravel — Legibility patch  (Req 2: faint text was hard to read)
   --------------------------------------------------------------------------
   Load this LAST, after wisetravel-design.css:
       <link rel="stylesheet" href="{{ url_for('static', filename='css/wisetravel-design.css') }}">
       <link rel="stylesheet" href="{{ url_for('static', filename='css/contrast-patch.css') }}">

   The design leans on charcoal-30 (rgba .30) and charcoal-60 for a lot of
   real text — eyebrows, sub-labels, metas, dates, placeholders, body copy.
   On the ivory page (#F7F4EF) charcoal-30 sits near 2:1 contrast (effectively
   invisible) and the tiniest labels are 8–9px. This lifts the faint TEXT
   tiers to a comfortable read and nudges the smallest labels up — without
   touching the 1px hairline borders (charcoal-10), so the airy editorial
   feel is preserved.
   ========================================================================== */

/* 1 ─ Redefine the faint tiers used via var(). Borders use charcoal-10 and
       are intentionally left alone; only the text-bearing tiers move. */
:root {
  --charcoal-30: rgba(26,25,22,0.50);   /* eyebrows / labels / metas — was .30 */
  --charcoal-60: rgba(26,25,22,0.74);   /* body & secondary text     — was .60 */
  --charcoal-80: rgba(26,25,22,0.86);
}

/* 2 ─ Literal-rgba faint TEXT that doesn't go through the vars. These are the
       recurring patterns across the homepage, results, booking, confirmation,
       order and content pages. Borders/rules with the same rgba are NOT
       targeted (those rules set border-color, not color). */

/* eyebrows, section labels, sub-labels, metas, "click to…" hints */
.page-hero-eyebrow,
.section-label,
.wt-form-field-label,
.form-label,
.team-card-loc,
.contact-info-label,
.info-card-table td:first-child,
.legal-meta,
.v2-date-sub,
.v2-dd-sub,
[class*="tracking-"][class*="uppercase"]:not([class*="text-white"]) {
  color: rgba(26,25,22,0.56) !important;
}

/* secondary / body copy that was set at .60 (or lighter) directly */
.page-hero-sub, .page-hero-subtitle,
.section-body,
.feature-card-body,
.team-card-body,
.faq-answer p,
.legal-section p, .legal-section li,
.legal-table td,
.contact-info-value,
.footer-tagline,
.info-card-table td {
  color: rgba(26,25,22,0.74) !important;
}

/* footer links on the forest/charcoal footer — lift off the dark ground */
footer.wt-footer .footer-links a { color: rgba(255,255,255,0.72) !important; }
footer.wt-footer .footer-tagline { color: rgba(255,255,255,0.58) !important; }
footer.wt-footer .footer-col-title { color: rgba(255,255,255,0.5) !important; }
footer.wt-footer .footer-legal a { color: rgba(255,255,255,0.5) !important; }

/* placeholders: lift from .30 so the prompt is readable but still secondary */
.wt-form-input::placeholder,
.wt-form-textarea::placeholder,
input.form-input::placeholder,
textarea.form-textarea::placeholder,
#from-input::placeholder, #to-input::placeholder {
  color: rgba(26,25,22,0.52) !important;
}

/* 3 ─ Minimum legible size for the smallest labels. 8–9px tracked uppercase
       reads as texture, not text — floor it at 10.5px. */
.wt-form-field-label,
.info-card-badge,
.feature-card-body,
.team-card-loc {
  font-size: 11px !important;
}
.page-hero-eyebrow,
.section-label { font-size: 11px !important; }

/* 4 ─ Currency selector + nav secondary text were charcoal-60 → already lifted
       by the var() change above; ensure the nav links clear the bar too. */
#main-nav .nav-link { color: rgba(26,25,22,0.72) !important; }
#main-nav #login-btn { color: rgba(26,25,22,0.72) !important; }

/* 5 ─ Links inside body copy keep the forest accent but gain underline weight
       so they're distinguishable for low-vision users, not colour-only. */
.legal-section a, .faq-answer a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ==========================================================================
   6 ─ Readability size bump (owner request): the smallest text felt too small.
       Nudge ONLY the tiniest tiers up ~1px; 12px+ is left untouched to avoid
       layout shifts. Reversible — delete this section to revert.
       ========================================================================== */
/* Global tiny Tailwind utilities (used across every page). The attribute-
   substring selectors also catch responsive prefixes (e.g. md:text-[11px]). */
[class*="text-[10px]"] { font-size: 11px !important; }
[class*="text-[11px]"] { font-size: 12px !important; }

/* Flight results list — lift the small airport / city / meta lines that read
   as too faint in the cards (.sr-* are defined per-page; !important wins). */
.sr-time-name, .sr-time-city, .sr-mid-dur, .sr-mid-stops,
.sr-price-meta, .sr-bag-badge, .sr-filter-row-count,
.sr-bar-cell-sub, .sr-detail-tab { font-size: 12px !important; }
.sr-price-from, .sr-filter-title, .sr-sort-tab-label { font-size: 11px !important; }
.sr-bar-cell-label { font-size: 10px !important; }