/* ==========================================================
   IslandTravelAtlas Comparison Readability v16

   This stylesheet owns ONLY:
     - text size
     - text color
     - readable dark/light contrast

   V11 remains the visual/layout design.
   V12-safe remains the live-search design.

   Typography:
     body text        15-17px
     supporting text  14px
     interface labels 13px minimum

   Contrast:
     light surface -> dark foreground
     dark surface  -> light foreground
   ========================================================== */

:root {
    --ita16-ink: #092f35;
    --ita16-ink-soft: #29494e;
    --ita16-copy: #405b60;
    --ita16-muted: #60767a;

    --ita16-teal: #08766c;
    --ita16-teal-dark: #055f58;

    --ita16-dark: #052f35;
    --ita16-dark-2: #064b46;

    --ita16-on-dark: #ffffff;
    --ita16-on-dark-soft: #e0ece9;
    --ita16-on-dark-muted: #c6dad6;

    --ita16-gold: #f0c76d;
}


/* ==========================================================
   1. GLOBAL READABILITY BASE
   ========================================================== */

body {
    color: var(--ita16-ink);
    font-size: 16px;
}


/* ==========================================================
   2. LIGHT-SURFACE SAFETY

   These are known white / cream / pale components.
   This explicitly prevents inherited white-on-white text.
   ========================================================== */

:is(
    .ita-v11-console-head,
    .ita-v9-context-shell,
    .ita-v9-results,
    .ita-v9-method-key,
    .ita-v11-verdict-card,
    .ita-v10-matrix-section,
    .ita-v11-dossier,
    .ita-v11-details-body,
    .ita-v12-safe-card,
    .ita-v12-safe-expedia-panel,
    .ita-v9-planning
) {
    color: var(--ita16-ink) !important;
}


:is(
    .ita-v11-console-head,
    .ita-v9-context-shell,
    .ita-v9-results,
    .ita-v9-method-key,
    .ita-v11-verdict-card,
    .ita-v10-matrix-section,
    .ita-v11-dossier,
    .ita-v11-details-body,
    .ita-v12-safe-card,
    .ita-v12-safe-expedia-panel,
    .ita-v9-planning
)
:is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    strong
) {
    color: var(--ita16-ink) !important;
}


:is(
    .ita-v11-console-head,
    .ita-v9-context-shell,
    .ita-v9-results,
    .ita-v9-method-key,
    .ita-v11-verdict-card,
    .ita-v10-matrix-section,
    .ita-v11-dossier,
    .ita-v11-details-body,
    .ita-v12-safe-card,
    .ita-v12-safe-expedia-panel,
    .ita-v9-planning
)
:is(
    p,
    li,
    label,
    small
) {
    color: var(--ita16-copy) !important;
}


/* ==========================================================
   3. HEADER — WHITE SURFACE
   ========================================================== */

.pm-header,
.pm-header-inner {
    color: var(--ita16-ink) !important;
}


.pm-header
:is(
    .pm-brand,
    .pm-brand-copy,
    .pm-brand-copy strong,
    .pm-brand-copy span,
    .pm-brand-copy small
) {
    color: var(--ita16-ink) !important;
    opacity: 1 !important;
}


.pm-nav-link,
.pm-nav-trigger {
    color: #12383d !important;

    font-size: 15px !important;
    line-height: 1.35 !important;

    font-weight: 650 !important;

    opacity: 1 !important;

    text-shadow: none !important;
}


.pm-nav-link:hover,
.pm-nav-trigger:hover,
.pm-nav-trigger[aria-expanded="true"] {
    color: var(--ita16-teal) !important;
}


.pm-nav-trigger svg {
    color: currentColor !important;
    stroke: currentColor !important;
}


.pm-header-cta {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}


/* ==========================================================
   4. ACTUAL DESKTOP DROPDOWNS

   Audit confirms the triggers control these exact IDs.
   ========================================================== */

#pm-destinations-menu,
#pm-route-menu,
#pm-tools-menu {
    background: var(--ita16-dark) !important;
    color: var(--ita16-on-dark) !important;
}


#pm-destinations-menu
:is(h1,h2,h3,h4,strong,a,button),

#pm-route-menu
:is(h1,h2,h3,h4,strong,a,button),

#pm-tools-menu
:is(h1,h2,h3,h4,strong,a,button) {
    color: var(--ita16-on-dark) !important;

    opacity: 1 !important;

    text-shadow: none !important;
}


#pm-destinations-menu
:is(p,small,span),

#pm-route-menu
:is(p,small,span),

#pm-tools-menu
:is(p,small,span) {
    color: var(--ita16-on-dark-soft) !important;

    opacity: 1 !important;
}


#pm-destinations-menu a,
#pm-route-menu a,
#pm-tools-menu a {
    font-size: 15px !important;
    line-height: 1.42 !important;
}


#pm-destinations-menu
:is(p,small,span),

#pm-route-menu
:is(p,small,span),

#pm-tools-menu
:is(p,small,span) {
    font-size: 14px !important;
    line-height: 1.48 !important;
}


#pm-destinations-menu a:hover,
#pm-route-menu a:hover,
#pm-tools-menu a:hover {
    color: var(--ita16-gold) !important;
}


/* ==========================================================
   5. MOBILE NAVIGATION
   ========================================================== */

#pm-mobile-nav {
    background: var(--ita16-dark) !important;
    color: #ffffff !important;
}


#pm-mobile-nav
:is(
    h1,h2,h3,h4,
    strong,
    a,
    button
) {
    color: #ffffff !important;

    font-size: 15px !important;

    opacity: 1 !important;
}


#pm-mobile-nav
:is(
    p,
    small,
    span
) {
    color: var(--ita16-on-dark-soft) !important;

    font-size: 14px !important;

    opacity: 1 !important;
}


/* ==========================================================
   6. WORKSPACE INTRO
   ========================================================== */

.ita-v11-breadcrumb {
    color: var(--ita16-teal) !important;

    font-size: 13px !important;
}


.ita-v11-console-copy p {
    color: var(--ita16-copy) !important;

    font-size: 17px !important;
    line-height: 1.62 !important;
}


/* ==========================================================
   7. WHOLE-TRIP MODEL — DARK
   ========================================================== */

.ita-v11-model-card {
    color: #ffffff !important;
}


.ita-v11-model-card
:is(
    h1,
    h2,
    h3,
    h4,
    strong
) {
    color: #ffffff !important;
}


.ita-v11-model-head > div > span {
    color: var(--ita16-on-dark-muted) !important;

    font-size: 13px !important;
}


.ita-v11-model-head > div > strong {
    color: #ffffff !important;

    font-size: 21px !important;
}


.ita-v11-model-status {
    color: #ffffff !important;

    font-size: 13px !important;
}


.ita-v11-model-signals span {
    color: #ffffff !important;

    font-size: 14px !important;
}


.ita-v11-model-evidence strong {
    color: #ffffff !important;

    font-size: 22px !important;
}


.ita-v11-model-evidence span {
    color: var(--ita16-on-dark-soft) !important;

    font-size: 13px !important;
    line-height: 1.4 !important;
}


/* ==========================================================
   8. TRAVEL CONTEXT — LIGHT
   ========================================================== */

.ita-v9-context-heading > span {
    color: var(--ita16-teal) !important;

    font-size: 13px !important;
}


#ita-v9-context-summary,
#ita-v9-context-summary span {
    color: var(--ita16-ink) !important;

    font-size: 16px !important;
    line-height: 1.45 !important;
}


.ita-v9-context-toggle {
    color: var(--ita16-teal-dark) !important;

    font-size: 15px !important;
}


.ita-v9-context-fields label > span {
    color: var(--ita16-copy) !important;

    font-size: 14px !important;
}


.ita-v9-context-fields input,
.ita-v9-context-fields select {
    color: var(--ita16-ink) !important;

    font-size: 15px !important;
}


.ita-v9-priority-row > span {
    color: var(--ita16-copy) !important;

    font-size: 14px !important;
}


.ita-v9-preference {
    color: var(--ita16-copy) !important;

    font-size: 14px !important;
}


.ita-v9-preference.is-active {
    color: var(--ita16-teal-dark) !important;
}


#ita-v9-update {
    color: #ffffff !important;

    font-size: 15px !important;
}


/* ==========================================================
   9. RESULTS INTRO / METHOD KEY — LIGHT
   ========================================================== */

.ita-v9-section-kicker {
    color: var(--ita16-teal) !important;

    font-size: 13px !important;
}


.ita-v9-results-header p {
    color: var(--ita16-copy) !important;

    font-size: 16px !important;
    line-height: 1.58 !important;
}


.ita-v9-method-key span {
    color: var(--ita16-copy) !important;

    font-size: 14px !important;
}


.ita-v9-method-key strong {
    color: var(--ita16-ink) !important;

    font-size: 14px !important;
}


/* ==========================================================
   10. TOP MATCH CARD — LIGHT
   ========================================================== */

.ita-v11-verdict-label span {
    color: var(--ita16-teal) !important;

    font-size: 13px !important;
}


.ita-v11-verdict-label strong {
    font-size: 19px !important;
}


.ita-v11-verdict-main > span {
    color: var(--ita16-teal) !important;

    font-size: 13px !important;
}


.ita-v11-verdict-main h2 {
    color: var(--ita16-ink) !important;

    font-size: 31px !important;
}


.ita-v11-verdict-main p {
    color: var(--ita16-copy) !important;

    font-size: 16px !important;
    line-height: 1.58 !important;
}


.ita-v11-verdict-score strong {
    color: var(--ita16-teal) !important;

    font-size: 35px !important;
}


.ita-v11-verdict-score span,
.ita-v11-verdict-cost span {
    color: var(--ita16-muted) !important;

    font-size: 14px !important;
}


.ita-v11-verdict-cost strong {
    color: var(--ita16-ink) !important;

    font-size: 21px !important;
}


.ita-v11-verdict-evidence span {
    color: var(--ita16-ink-soft) !important;

    font-size: 13px !important;
}


/* ==========================================================
   11. DECISION MATRIX — LIGHT
   ========================================================== */

.ita-v10-matrix-heading span {
    color: var(--ita16-teal) !important;

    font-size: 13px !important;
}


.ita-v10-matrix-heading strong {
    color: var(--ita16-ink) !important;

    font-size: 22px !important;
}


.ita-v10-matrix-heading small {
    color: var(--ita16-copy) !important;

    font-size: 14px !important;
    line-height: 1.45 !important;
}


.ita-v10-matrix thead th:first-child {
    color: var(--ita16-copy) !important;

    font-size: 14px !important;
}


.ita-v10-matrix thead
th:not(:first-child) span {
    color: var(--ita16-teal) !important;

    font-size: 13px !important;
}


.ita-v10-matrix thead
th:not(:first-child) strong {
    color: var(--ita16-ink) !important;

    font-size: 20px !important;
}


.ita-v10-matrix thead
th:not(:first-child) small {
    color: var(--ita16-muted) !important;

    font-size: 14px !important;
}


.ita-v10-matrix tbody th {
    color: var(--ita16-copy) !important;

    font-size: 14px !important;
    line-height: 1.4 !important;
}


.ita-v10-matrix tbody td {
    color: var(--ita16-ink) !important;

    font-size: 15px !important;
    line-height: 1.4 !important;
}


.ita-v11-score-cell {
    color: var(--ita16-teal) !important;

    font-size: 25px !important;
}


/* ==========================================================
   12. DETAILED COMPARISON HEADING
   ========================================================== */

.ita-v10-detail-heading span {
    color: var(--ita16-teal) !important;

    font-size: 13px !important;
}


.ita-v10-detail-heading strong {
    color: var(--ita16-ink) !important;

    font-size: 29px !important;
}


.ita-v10-detail-heading p {
    color: var(--ita16-copy) !important;

    font-size: 16px !important;
}


/* ==========================================================
   13. ISLAND DOSSIERS — LIGHT
   ========================================================== */

.ita-v11-dossier-rank span {
    color: var(--ita16-teal) !important;

    font-size: 13px !important;
}


.ita-v11-dossier-rank strong {
    font-size: 21px !important;
}


.ita-v11-dossier-title h3 {
    color: var(--ita16-ink) !important;

    font-size: 32px !important;
}


.ita-v11-dossier-title p {
    color: var(--ita16-muted) !important;

    font-size: 15px !important;
}


.ita-v11-dossier-overall strong {
    color: var(--ita16-teal) !important;

    font-size: 30px !important;
}


.ita-v11-dossier-overall span {
    color: var(--ita16-muted) !important;

    font-size: 14px !important;
}


.ita-v11-label {
    color: var(--ita16-copy) !important;

    font-size: 13px !important;
}


.ita-v11-route strong {
    color: var(--ita16-ink) !important;

    font-size: 15px !important;
}


.ita-v11-route-fact span {
    color: var(--ita16-muted) !important;

    font-size: 14px !important;
}


.ita-v11-route-fact strong {
    color: var(--ita16-ink) !important;

    font-size: 15px !important;
}


.ita-v11-meter span {
    color: var(--ita16-copy) !important;

    font-size: 14px !important;
}


.ita-v11-meter strong {
    color: var(--ita16-ink) !important;

    font-size: 15px !important;
}


.ita-v11-cost > strong {
    color: var(--ita16-ink) !important;

    font-size: 24px !important;
}


.ita-v11-cost > p {
    color: var(--ita16-muted) !important;

    font-size: 14px !important;
    line-height: 1.5 !important;
}


.ita-v11-cost-evidence span {
    color: var(--ita16-ink-soft) !important;

    font-size: 13px !important;
}


.ita-v11-why p {
    color: var(--ita16-copy) !important;

    font-size: 16px !important;
    line-height: 1.62 !important;
}


.ita-v11-tags span {
    color: var(--ita16-copy) !important;

    font-size: 13px !important;
}


.ita-v11-details > summary {
    color: var(--ita16-teal-dark) !important;

    font-size: 15px !important;
}


/* ==========================================================
   14. EXPANDED FUNCTIONAL ANALYSIS

   Legacy card typography normalized without changing layout.
   ========================================================== */

.ita-v11-functional-clone {
    color: var(--ita16-ink) !important;

    font-size: 16px !important;
}


.ita-v11-functional-clone
:is(h1,h2,h3,h4,strong) {
    color: var(--ita16-ink) !important;
}


.ita-v11-functional-clone h2 {
    font-size: 29px !important;
}


.ita-v11-functional-clone h3 {
    font-size: 23px !important;
}


.ita-v11-functional-clone h4 {
    font-size: 19px !important;
}


.ita-v11-functional-clone
:is(p,li,label) {
    color: var(--ita16-copy) !important;

    font-size: 15px !important;
    line-height: 1.6 !important;
}


.ita-v11-functional-clone small {
    color: var(--ita16-muted) !important;

    font-size: 13px !important;
}


.ita-v11-functional-clone
:is(
    .ita-ux-support-score,
    .ita-cost-evidence,
    .ita-component-provenance,
    .ita-route-signals span
) {
    color: var(--ita16-copy) !important;

    font-size: 13px !important;
}


.ita-v11-functional-clone a {
    color: var(--ita16-teal-dark) !important;

    font-size: 15px !important;
}


.ita-v11-functional-clone button {
    color: #ffffff !important;

    font-size: 15px !important;
}


/* ==========================================================
   15. LIVE SEARCH CARDS — LIGHT
   ========================================================== */

.ita-v12-safe-kicker {
    color: var(--ita16-teal) !important;

    font-size: 13px !important;
}


.ita-v12-safe-head p {
    color: var(--ita16-copy) !important;

    font-size: 16px !important;
    line-height: 1.6 !important;
}


.ita-v12-safe-live-status {
    color: var(--ita16-teal-dark) !important;

    font-size: 14px !important;
}


.ita-v12-safe-card-top
> div:last-child > span {
    color: var(--ita16-teal) !important;

    font-size: 13px !important;
}


.ita-v12-safe-card-top h3 {
    color: var(--ita16-ink) !important;

    font-size: 28px !important;
}


.ita-v12-safe-card-copy {
    color: var(--ita16-copy) !important;

    font-size: 16px !important;
    line-height: 1.58 !important;
}


.ita-v12-safe-card > small {
    color: var(--ita16-muted) !important;

    font-size: 13px !important;
}


/* dark search buttons */

.ita-v12-safe-action,
.ita-v12-safe-action span,
.ita-v12-safe-action strong {
    color: #ffffff !important;
}


.ita-v12-safe-action {
    font-size: 16px !important;
}


.ita-v12-safe-action span {
    font-size: 16px !important;
}


.ita-v12-safe-action strong {
    font-size: 21px !important;
}


/* Expedia panel */

.ita-v12-safe-expedia-panel
> header span {
    color: var(--ita16-teal) !important;

    font-size: 13px !important;
}


.ita-v12-safe-expedia-panel
> header strong {
    color: var(--ita16-ink) !important;

    font-size: 17px !important;
}


.ita-v12-safe-expedia-panel
> header button {
    color: var(--ita16-teal-dark) !important;

    font-size: 14px !important;
}


.ita-v12-safe-unavailable {
    color: var(--ita16-copy) !important;

    font-size: 15px !important;
}


/* ==========================================================
   16. METHODOLOGY — DARK
   ========================================================== */

.ita-v9-method {
    color: #ffffff !important;
}


.ita-v9-method
:is(
    h1,h2,h3,h4,strong
) {
    color: #ffffff !important;
}


.ita-v9-method
:is(
    p,
    small
) {
    color: var(--ita16-on-dark-soft) !important;
}


.ita-v9-method-copy > span {
    color: var(--ita16-gold) !important;

    font-size: 13px !important;
}


.ita-v9-method-copy h2 {
    color: #ffffff !important;
}


.ita-v9-method-copy p {
    color: var(--ita16-on-dark-soft) !important;

    font-size: 16px !important;
    line-height: 1.62 !important;
}


.ita-v9-method-grid strong {
    color: var(--ita16-gold) !important;

    font-size: 14px !important;
}


.ita-v9-method-grid span {
    color: #ffffff !important;

    font-size: 15px !important;
    line-height: 1.55 !important;
}


/* ==========================================================
   17. PLANNING RESOURCES — LIGHT
   ========================================================== */

.ita-v9-planning summary span {
    color: var(--ita16-teal) !important;

    font-size: 13px !important;
}


.ita-v9-planning summary strong {
    color: var(--ita16-ink) !important;

    font-size: 19px !important;
}


.ita-v9-planning-body {
    color: var(--ita16-ink) !important;

    font-size: 16px !important;
}


.ita-v9-planning-body
:is(p,li) {
    color: var(--ita16-copy) !important;

    font-size: 15px !important;
    line-height: 1.6 !important;
}


.ita-v9-planning-body a {
    color: var(--ita16-teal-dark) !important;

    font-size: 15px !important;
}


/* ==========================================================
   18. FOOTER — DARK
   ========================================================== */

.pm-footer {
    color: #ffffff !important;
}


.pm-footer
:is(
    h1,h2,h3,h4,
    strong,
    a
) {
    color: #ffffff !important;

    opacity: 1 !important;
}


.pm-footer p {
    color: var(--ita16-on-dark-soft) !important;

    font-size: 14px !important;
    line-height: 1.58 !important;
}


.pm-footer small,
.pm-footer span {
    color: var(--ita16-on-dark-muted) !important;

    font-size: 13px !important;
}


.pm-footer a,
.pm-footer button {
    font-size: 14px !important;
}


.pm-footer button {
    color: #ffffff !important;
}


.pm-footer a:hover {
    color: var(--ita16-gold) !important;
}


/* ==========================================================
   19. RESPONSIVE TYPOGRAPHY

   Never collapse back to 9-11px on mobile.
   ========================================================== */

@media (max-width: 620px) {

    .ita-v11-console-copy p,
    .ita-v9-results-header p,
    .ita-v11-verdict-main p,
    .ita-v11-why p,
    .ita-v12-safe-head p,
    .ita-v12-safe-card-copy {
        font-size: 15px !important;
    }


    .ita-v10-matrix tbody th,
    .ita-v10-matrix tbody td {
        font-size: 14px !important;
    }


    .ita-v11-dossier-title h3 {
        font-size: 29px !important;
    }

}


/* ==========================================================
   20. ACCESSIBILITY
   ========================================================== */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible {
    outline:
        3px solid #e6b853 !important;

    outline-offset: 3px;
}