/* ================================================================
   Tasheel Vista v1.6.7 — FINAL CONTRAST OWNERSHIP / MOBILE POLISH
   Every visual component owns an explicit foreground/background pair.
   This file MUST load after site.css and vista-v166.css.
   ================================================================ */
:root{
  --v167-ink:#153129;
  --v167-copy:#3b554a;
  --v167-copy-soft:#526b60;
  --v167-ivory:#fffdf7;
  --v167-cream:#f8f1e4;
  --v167-mint:#e7f1ea;
  --v167-dark:#123129;
  --v167-dark-2:#33443d;
  --v167-light:#fffdf8;
  --v167-light-copy:#e4eee8;
  --v167-gold:#e7bd69;
  --v167-teal:#23766d;
  --v167-line:rgba(27,75,59,.18);
  --v167-white-line:rgba(255,255,255,.18);
}

/* ---------- universal readability ---------- */
body{color:var(--v167-ink)!important}
main p, main li, main small{overflow-wrap:break-word}
a{overflow-wrap:normal}
.section-more,.text-link,.destination-more{display:inline-flex!important;align-items:center!important;gap:10px!important;line-height:1.35!important}
.partner-stat .text-link,.card .text-link{margin-top:12px!important}

/* ---------- LIGHT SURFACES: always dark typography ---------- */
.section:not(.dark-band)>.container,
.card,.role,.preview-card,.form-panel,.journey-step,.journey-copy,.journey-flow,
.partner-panel,.partner-stat,.inventory-shell,.inventory-canvas,.inventory-empty,
.choice,.planner-result,.editorial-feature,.editorial-stack>a,.editorial-stack>div{
  color:var(--v167-ink)!important;
}
.section:not(.dark-band) h1,
.section:not(.dark-band) h2,
.section:not(.dark-band) h3,
.section:not(.dark-band) h4,
.card h1,.card h2,.card h3,.card h4,
.partner-panel h1,.partner-panel h2,.partner-panel h3,.partner-panel h4,
.partner-stat b,.partner-stat strong,
.inventory-shell h1,.inventory-shell h2,.inventory-shell h3,
.editorial-feature h1,.editorial-feature h2,.editorial-feature h3,
.editorial-stack h1,.editorial-stack h2,.editorial-stack h3{
  color:var(--v167-ink)!important;
  text-shadow:none!important;
}
.section:not(.dark-band) p,
.section:not(.dark-band) small,
.card p,.card small,
.partner-panel p,.partner-panel small,
.partner-stat p,.partner-stat small,
.inventory-shell p,.inventory-shell small,
.editorial-feature p,.editorial-feature small,
.editorial-stack p,.editorial-stack small{
  color:var(--v167-copy)!important;
}

/* ---------- DARK SURFACES: always light typography ---------- */
.dark-band>.container,.footer,.viewer-shell,.navlinks.mobile-open{
  color:#fff!important;
}
.dark-band h1,.dark-band h2,.dark-band h3,.dark-band h4,
.footer h1,.footer h2,.footer h3,.footer h4,
.viewer-shell h1,.viewer-shell h2,.viewer-shell h3,.viewer-shell h4,
.navlinks.mobile-open a{
  color:#fff!important;
}
.dark-band p,.dark-band small,
.footer p,.footer small,
.viewer-shell p,.viewer-shell small{
  color:var(--v167-light-copy)!important;
}
.dark-band .section-more,.dark-band .text-link,
.footer .section-more,.footer .text-link{
  color:#ffe2a1!important;
}

/* ---------- CRITICAL EXCEPTION: light metric cards inside dark immersive band ---------- */
.dark-band .immersive-panel .metric,
.immersive-panel .metric{
  background:linear-gradient(145deg,#fffdf8,#f6f1e6)!important;
  color:var(--v167-ink)!important;
  border:1px solid rgba(255,255,255,.88)!important;
  box-shadow:0 16px 34px rgba(4,26,19,.16),inset 0 0 0 1px rgba(35,88,68,.08)!important;
}
.dark-band .immersive-panel .metric .kicker,
.immersive-panel .metric .kicker{
  color:#8c6330!important;
}
.dark-band .immersive-panel .metric strong,
.immersive-panel .metric strong{
  color:var(--v167-ink)!important;
  text-shadow:none!important;
}
.dark-band .immersive-panel .metric span:not(.kicker),
.immersive-panel .metric span:not(.kicker){
  color:var(--v167-copy)!important;
}

/* ---------- CRITICAL EXCEPTION: dark hero planner must own LIGHT text ---------- */
.hero-planner{
  background:linear-gradient(155deg,#3b4944,#2f3c37)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:0 24px 58px rgba(25,42,34,.22)!important;
}
.hero-planner .planner-kicker{
  color:#ffe39b!important;
}
.hero-planner .planner-link{
  border-top-color:rgba(255,255,255,.14)!important;
}
.hero-planner .planner-link b,
.hero-planner .planner-link strong{
  color:#fff!important;
}
.hero-planner .planner-link small{
  color:#e1ebe6!important;
}
.hero-planner .planner-link:hover{
  background:rgba(255,255,255,.07)!important;
}
.hero-planner .planner-link i{
  border-color:#ffe19a!important;
}
.hero-planner .planner-foot{
  color:#dce8e2!important;
  border-top-color:rgba(255,255,255,.14)!important;
}
.hero-planner .planner-foot a{
  color:#ffe19a!important;
}

/* ---------- LOGO CONTRAST ---------- */
.footer .vista-logo-brand,
.dark-logo-plate{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:max-content!important;
  max-width:100%!important;
  padding:10px 14px!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,#fffdf8,#f6efe1)!important;
  border:1px solid rgba(255,255,255,.86)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.16)!important;
}
.footer .vista-logo-brand .vista-brand-logo{
  filter:none!important;
}
.footer .footer-note{margin-top:18px!important}

/* Mobile navigation is a dark panel: never inherit dark desktop nav text. */
.navlinks.mobile-open{
  background:#123129!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 18px 48px rgba(8,28,21,.26)!important;
}
.navlinks.mobile-open a{
  color:#fff!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  padding:12px 10px!important;
}
.navlinks.mobile-open a:last-child{border-bottom:0!important}
.navlinks.mobile-open a:hover{color:#ffe19a!important}

/* ---------- DESTINATION / MEDIA text contrast ---------- */
.destination-card h3,.destination-card p,.destination-card .coordinates,.destination-card .destination-more,
.media-card .media-overlay strong,.media-card .media-overlay p,.media-card .media-overlay small{
  color:#fff!important;
}
.destination-card h3,.media-card .media-overlay strong{text-shadow:0 2px 14px rgba(0,0,0,.42)!important}
.destination-card p,.destination-card .coordinates,.media-card .media-overlay p,.media-card .media-overlay small{text-shadow:0 2px 10px rgba(0,0,0,.38)!important}

/* ---------- viewer controls ---------- */
.viewer-shell .immersive-capability span{
  color:#fff!important;
  background:rgba(18,49,41,.90)!important;
  border-color:rgba(255,255,255,.26)!important;
}
.viewer-shell .viewer-ui{background:#123129!important;color:#fff!important}
.viewer-shell .viewer-ui .btn{background:#fffdf7!important;color:#17483f!important;border-color:#fff!important}

/* ---------- button contrast ownership ---------- */
.btn.primary{background:linear-gradient(135deg,#efc56e,#f6dda4)!important;color:#1f3029!important;border-color:transparent!important}
.section:not(.dark-band) .btn:not(.primary){background:#fffdf8!important;color:#153129!important;border-color:rgba(35,92,72,.22)!important}
.dark-band .btn:not(.primary),.footer .btn:not(.primary){background:rgba(255,255,255,.09)!important;color:#fff!important;border-color:rgba(255,255,255,.26)!important}

/* ---------- typography & spacing polish ---------- */
.section-head h2{max-width:16ch!important}
.section-head p{max-width:54ch!important}
.card h3,.editorial-feature h3,.editorial-stack h3,.partner-panel h3,.partner-stat b{margin-bottom:.55em!important}
.card p,.editorial-feature p,.editorial-stack p,.partner-panel p,.partner-stat small{line-height:1.72!important}
.metric strong{line-height:1.12!important;margin:.24em 0 .42em!important}
.metric span:not(.kicker){display:block!important;line-height:1.65!important}

/* Footer hierarchy */
.footer{background:#123129!important}
.footer-grid{align-items:start!important}
.footer h4{color:#fff!important;margin-bottom:16px!important}
.footer a{color:#eef5f1!important}
.footer a:hover{color:#ffe19a!important}
.footer-note,.footer .legal{color:#d7e3dc!important}

/* Arabic-specific rhythm */
html[lang="ar"] .hero-planner .planner-link b{line-height:1.55!important}
html[lang="ar"] .hero-planner .planner-link small{line-height:1.7!important}
html[lang="ar"] .metric strong{line-height:1.45!important}
html[lang="ar"] .metric span:not(.kicker){line-height:1.85!important}

@media(max-width:720px){
  /* headings no longer overpower cards */
  .section-head h2{font-size:clamp(31px,8.2vw,39px)!important;line-height:1.12!important;margin-bottom:15px!important}
  .section-head p,.lead{font-size:16.8px!important;line-height:1.76!important}
  .card h3,.editorial-feature h3,.editorial-stack h3,.partner-panel h3{font-size:clamp(27px,7.4vw,34px)!important;line-height:1.16!important}

  /* immersive metrics: readable, compact, never white on cream */
  .dark-band .immersive-panel .metric,.immersive-panel .metric{
    padding:26px 20px!important;
    border-radius:25px!important;
  }
  .dark-band .immersive-panel .metric strong,.immersive-panel .metric strong{
    font-size:clamp(30px,8.2vw,38px)!important;
    line-height:1.12!important;
  }
  .dark-band .immersive-panel .metric span:not(.kicker),.immersive-panel .metric span:not(.kicker){
    font-size:16.5px!important;
    line-height:1.65!important;
  }

  /* planner: visually rich but decisively readable */
  .hero-planner{padding:18px!important;border-radius:25px!important}
  .hero-planner .planner-kicker{font-size:13px!important;letter-spacing:.11em!important;padding:4px 4px 15px!important}
  .hero-planner .planner-link{grid-template-columns:1fr 22px!important;padding:17px 10px!important;gap:12px!important}
  .hero-planner .planner-link b{font-size:18px!important;line-height:1.32!important}
  .hero-planner .planner-link small{font-size:14.2px!important;line-height:1.5!important;margin-top:5px!important}
  .hero-planner .planner-foot{font-size:13.5px!important;line-height:1.55!important;padding:16px 10px 4px!important}

  /* footer logo gets an ivory plate on dark green */
  .footer .vista-logo-brand{padding:8px 11px!important;border-radius:18px!important}
  .footer .vista-brand-logo{height:54px!important;max-width:220px!important}
  .footer-grid{gap:34px!important}
  .footer a{font-size:16px!important;line-height:1.55!important;margin:10px 0!important}

  /* mobile nav popup */
  .navlinks.mobile-open{top:74px!important;left:9px!important;right:9px!important;padding:16px!important;border-radius:22px!important}

  /* links get their own line and no word collisions */
  .partner-stat .text-link,.card .text-link,.editorial-stack .text-link{display:inline-flex!important;margin-top:14px!important}
}