/*
 * Domio.ma - Premium Real Estate Platform Styles
 */

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Custom animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-fade-in-up { animation: fadeInUp 0.7s ease-out forwards; }
.animate-fade-in-down { animation: fadeInDown 0.5s ease-out forwards; }
.animate-fade-in { animation: fadeIn 0.6s ease-out forwards; }
.animate-slide-in-left { animation: slideInLeft 0.6s ease-out forwards; }
.animate-scale-in { animation: scaleIn 0.5s ease-out forwards; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
.animate-count-up { animation: countUp 0.8s ease-out forwards; }

.animation-delay-100 { animation-delay: 0.1s; }
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-300 { animation-delay: 0.3s; }
.animation-delay-400 { animation-delay: 0.4s; }
.animation-delay-500 { animation-delay: 0.5s; }
.animation-delay-600 { animation-delay: 0.6s; }

/* Glass morphism */
.glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.glass-dark {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Gradient text */
.text-gradient {
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Card hover lift */
.card-hover {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

/* Shimmer loading placeholder */
.shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* City card image overlay */
.city-card-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 40%, transparent 100%);
}

/* Search tabs active state */
.search-tab-active {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

/* Property card image zoom */
.property-card-img {
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.group:hover .property-card-img {
  transform: scale(1.08);
}

/* Section decorative dots */
.section-dots::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, transparent 70%);
  z-index: 0;
}

/* Trust badge shine */
.trust-badge {
  position: relative;
  overflow: hidden;
}
.trust-badge::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  transform: rotate(30deg);
  animation: shimmer 3s infinite;
}

/* Hide scrollbar for marquee */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Intersection observer animations */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Hero parallax subtle */
.hero-bg {
  transition: transform 0.3s ease-out;
}

/* Input focus glow */
input:focus, select:focus {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

/* Price tag */
.price-tag {
  background: linear-gradient(135deg, #10b981, #059669);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* SEO content links */
.seo-content a {
  color: #059669;
  text-decoration: underline;
}
.seo-content a:hover {
  color: #047857;
}

/* Article body typography */
.article-body {
  color: #334155;
  font-size: 1.0625rem;
  line-height: 1.8;
}
.article-body p {
  margin-bottom: 1.25em;
}
.article-body h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
  margin-top: 2.5em;
  margin-bottom: 0.75em;
  line-height: 1.3;
}
.article-body h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #1e293b;
  margin-top: 2em;
  margin-bottom: 0.5em;
  line-height: 1.4;
}
.article-body a {
  color: #059669;
  text-decoration: underline;
  text-decoration-color: #a7f3d0;
  text-underline-offset: 2px;
}
.article-body a:hover {
  color: #047857;
  text-decoration-color: #059669;
}
.article-body ul, .article-body ol {
  margin-bottom: 1.25em;
  padding-left: 1.5em;
}
.article-body ul { list-style-type: disc; }
.article-body ol { list-style-type: decimal; }
.article-body li {
  margin-bottom: 0.35em;
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  font-size: 0.875rem;
}
.article-body th {
  background-color: #f1f5f9;
  text-align: left;
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: #1e293b;
  border-bottom: 2px solid #e2e8f0;
}
.article-body td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f1f5f9;
  color: #475569;
}
.article-body tr:last-child td {
  border-bottom: none;
}
.article-body nav {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2em;
}
.article-body nav h2 {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin: 0 0 0.75em 0;
}
.article-body nav ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.article-body nav li {
  margin-bottom: 0.35em;
}
.article-body nav a {
  color: #059669;
  text-decoration: none;
  font-size: 0.9375rem;
}
.article-body nav a:hover {
  text-decoration: underline;
}
.article-body blockquote {
  border-left: 3px solid #10b981;
  padding-left: 1rem;
  margin: 1.5em 0;
  color: #64748b;
  font-style: italic;
}

/* Mobile menu */
#mobile-menu {
  animation: fadeInDown 0.2s ease-out;
}

/* Moroccan pattern decorative (subtle) */
.moroccan-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2310b981' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}


/* ═══════════════════════════════════════════════════════════════════
   REDESIGN 2026 — DESIGN SYSTEM (extracted from home for sitewide use)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --navy:#152844; --navy-deep:#0A1A30; --navy-soft:#E8EEF5;
  --gold:#B47F36; --gold-deep:#8F6522; --gold-soft:#F5EBD8; --gold-text:#7A5518;
  --bg:#F6F2EA; --bg-alt:#FFFFFF; --paper:#FBF8F2;
  --ink:#0F1E33; --ink-soft:#2D3F58; --muted:#4B5768; --line:#E8DFCE;
}

body { background:var(--bg); color:var(--ink); font-variant-numeric:tabular-nums; }

/* Typography */
.vb-display { font-family:'Manrope', system-ui, sans-serif; letter-spacing:-0.03em; font-feature-settings:"ss01","ss03"; }
.vb-serif { font-family:'Fraunces', Georgia, serif; font-style:italic; font-weight:300; letter-spacing:-0.02em; }
[dir="rtl"] body, [dir="rtl"] .vb-display, [dir="rtl"] .vb-serif { font-family:'Tajawal', sans-serif; font-style:normal; }
.vb-h1 { font-size:clamp(2.5rem, 8.5vw, 6.5rem); line-height:1; font-weight:700; letter-spacing:-.04em; text-wrap:balance; font-family:'Manrope', sans-serif; }
.vb-h1 .accent { font-family:'Fraunces', Georgia, serif; font-style:italic; font-weight:300; color:var(--gold); letter-spacing:-.02em; }
.vb-h2 { font-size:clamp(2rem, 4vw, 3.25rem); line-height:1.04; font-weight:700; letter-spacing:-.03em; font-family:'Manrope', sans-serif; }
.vb-h2 .accent { font-family:'Fraunces', Georgia, serif; font-style:italic; font-weight:300; color:var(--gold-text); }
.vb-eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:.2em; color:var(--gold-text); font-weight:700; }
.vb-text-muted { color:var(--muted); }
.vb-text-ink-soft { color:var(--ink-soft); }

/* Buttons */
.vb-btn-primary { background:var(--navy); color:#fff; transition:all .25s cubic-bezier(.2,.8,.2,1); font-weight:600; }
.vb-btn-primary:hover { background:var(--navy-deep); transform:translateY(-2px); box-shadow:0 18px 32px -10px rgba(21,40,68,.45); color:#fff; }
.vb-btn-gold { background:var(--gold); color:var(--navy-deep); transition:all .25s ease; font-weight:700; }
.vb-btn-gold:hover { background:var(--gold-deep); color:#fff; box-shadow:0 12px 24px -8px rgba(180,127,54,.4); }
.vb-btn-ghost { color:var(--navy); border:1.5px solid var(--ink); background:transparent; transition:all .2s ease; font-weight:600; }
.vb-btn-ghost:hover { background:var(--ink); color:#fff; }

/* Cards */
.vb-card { background:#fff; border:1px solid var(--line); border-radius:14px; transition:all .35s cubic-bezier(.2,.8,.2,1); }
.vb-card:hover { transform:translateY(-4px); box-shadow:0 26px 48px -20px rgba(15,30,51,.22); border-color:#D6CAB0; }

/* Pills */
.vb-pill-gold { background:#fff; color:var(--gold-deep); border:1px solid var(--gold); font-weight:700; font-size:10.5px; letter-spacing:.06em; padding:5px 10px; border-radius:4px; text-transform:uppercase; }
.vb-pill-navy { background:var(--navy); color:#fff; font-weight:700; font-size:10.5px; letter-spacing:.06em; padding:5px 10px; border-radius:4px; text-transform:uppercase; }
.vb-pill-ghost { background:transparent; color:var(--ink-soft); border:1px solid var(--line); font-weight:500; font-size:11px; padding:4px 10px; border-radius:4px; }

/* Forms */
.vb-input, .vb-select { background:transparent; border:none; padding:6px 0 8px 0; font-size:15px; font-weight:500; color:var(--ink); width:100%; outline:none; appearance:none; -webkit-appearance:none; font-family:inherit; }
.vb-input::placeholder { color:var(--muted); }
.vb-select { padding-right:26px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23152844' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 5.646a.5.5 0 01.708 0L8 8.293l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0 center; }
.vb-label { font-size:10.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--ink-soft); font-weight:700; margin-bottom:4px; display:block; }

/* Tabs */
.vb-tab { padding:13px 26px; border-radius:10px; font-size:13.5px; font-weight:600; transition:all .2s ease; color:var(--muted); background:transparent; letter-spacing:.01em; }
.vb-tab.is-active { background:var(--navy); color:#fff; box-shadow:0 6px 16px -4px rgba(15,30,51,.4); }

/* Sections */
.vb-section { padding:120px 0; }
@media (max-width:640px) { .vb-section { padding:72px 0; } }
.vb-divider-gold { width:56px; height:2px; background:var(--gold); }

/* Property/city cards */
.vb-prop-img-wrap { overflow:hidden; }
.vb-card:hover .vb-prop-img { transform:scale(1.05); }
.vb-prop-img { transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.vb-fav { position:absolute; top:14px; right:14px; width:38px; height:38px; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .2s; box-shadow:0 4px 12px rgba(15,30,51,.18); z-index:2; }
.vb-fav:hover { transform:scale(1.1); background:#fff; }
.vb-city-card { position:relative; overflow:hidden; border-radius:14px; }
.vb-city-img { transition:transform 1.4s cubic-bezier(.2,.8,.2,1); }
.vb-city-card:hover .vb-city-img { transform:scale(1.06); }
.vb-agent-row { display:flex; align-items:center; gap:8px; padding-top:12px; margin-top:12px; border-top:1px solid var(--line); }
.vb-agent-avatar { width:26px; height:26px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; letter-spacing:.02em; }

/* Reveal animations */
.vb-reveal { opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
.vb-reveal.in { opacity:1; transform:translateY(0); }

/* Sticky navbar (shared across pages) */
.vb-nav { position:fixed; top:0; left:0; right:0; z-index:50; transition:background .35s ease, box-shadow .35s ease; }
.vb-nav.scrolled { background:rgba(255,255,255,.96); backdrop-filter:blur(20px); box-shadow:0 1px 0 var(--line), 0 8px 32px -16px rgba(15,30,51,.12); }
.vb-nav.scrolled .vb-nav-link { color:var(--ink-soft); }
.vb-nav.scrolled .vb-nav-link:hover { color:var(--navy); background:rgba(21,40,68,.06); }
.vb-nav.scrolled .vb-logo-text { color:var(--ink); }
.vb-nav.scrolled .vb-nav-icon-btn { color:var(--ink-soft); }
.vb-nav.scrolled .vb-nav-icon-btn:hover { color:var(--ink); }
.vb-utility { max-height:48px; opacity:1; overflow:hidden; transition:max-height .35s ease, opacity .25s ease; }
.vb-nav.scrolled .vb-utility { max-height:0; opacity:0; }

/* On non-home pages the nav is solid from the start (no dark hero underneath) */
.vb-nav.vb-nav-solid { background:rgba(255,255,255,.96); backdrop-filter:blur(20px); box-shadow:0 1px 0 var(--line); }
.vb-nav.vb-nav-solid .vb-nav-link { color:var(--ink-soft); }
.vb-nav.vb-nav-solid .vb-nav-link:hover { color:var(--navy); background:rgba(21,40,68,.06); }
.vb-nav.vb-nav-solid .vb-logo-text { color:var(--ink); }
.vb-nav.vb-nav-solid .vb-nav-icon-btn { color:var(--ink-soft); }
.vb-nav.vb-nav-solid .vb-utility { background:var(--paper) !important; color:var(--ink-soft) !important; border-color:var(--line) !important; }
.vb-nav.vb-nav-solid .vb-utility * { color:var(--ink-soft) !important; }
.vb-nav.vb-nav-solid .vb-utility strong { color:var(--ink) !important; }
.vb-nav.vb-nav-solid .vb-utility .vb-phone { color:var(--gold-deep) !important; }

/* Marquee (used on home; kept for consistency) */
.vb-marquee-wrap { mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.vb-marquee { display:flex; gap:80px; animation:vb-scroll 38s linear infinite; }
@keyframes vb-scroll { 0% {transform:translateX(0)} 100% {transform:translateX(-50%)} }

/* Details / accordion */
details.vb-region > summary { list-style:none; cursor:pointer; padding:20px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; transition:padding .2s; }
details.vb-region > summary::-webkit-details-marker { display:none; }
details.vb-region[open] > summary { border-bottom-color:var(--navy); }
details.vb-region summary .vb-chevron { transition:transform .3s; }
details.vb-region[open] summary .vb-chevron { transform:rotate(180deg); }

/* Utility */
.vb-phone { color:var(--gold); font-weight:600; }
.vb-link-arrow { display:inline-flex; align-items:center; gap:8px; color:var(--navy); font-weight:600; font-size:14px; transition:gap .25s; border-bottom:1.5px solid var(--ink); padding-bottom:3px; }
.vb-link-arrow:hover { gap:14px; }


/* ═══════════════════════════════════════════════════════════════════
   LEGACY PALETTE OVERRIDES — map old emerald/gray Tailwind classes to
   the new design tokens without editing 1,000+ template call-sites.
   Every page that used bg-emerald-600 now uses navy, etc.
   ═══════════════════════════════════════════════════════════════════ */

/* Emerald buttons → Navy */
.bg-emerald-500, .bg-emerald-600, .bg-emerald-700 { background-color: var(--navy) !important; color: #fff !important; }
.bg-emerald-800, .bg-emerald-900 { background-color: var(--navy-deep) !important; color: #fff !important; }
.hover\:bg-emerald-500:hover, .hover\:bg-emerald-600:hover, .hover\:bg-emerald-700:hover { background-color: var(--navy-deep) !important; }
.bg-emerald-50, .bg-emerald-100 { background-color: var(--paper) !important; }
.bg-emerald-200 { background-color: var(--gold-soft) !important; }

/* Emerald text → mix of navy (primary) + gold (accent) */
.text-emerald-500, .text-emerald-600, .text-emerald-700, .text-emerald-800 { color: var(--navy) !important; }
.text-emerald-400, .text-emerald-300 { color: var(--gold) !important; }
.hover\:text-emerald-500:hover, .hover\:text-emerald-600:hover, .hover\:text-emerald-700:hover, .hover\:text-emerald-800:hover { color: var(--navy-deep) !important; }

/* Emerald borders/rings → navy */
.border-emerald-100, .border-emerald-200, .border-emerald-300, .border-emerald-400, .border-emerald-500, .border-emerald-600, .border-emerald-700 { border-color: var(--navy) !important; }
.ring-emerald-500, .ring-emerald-600 { --tw-ring-color: var(--navy) !important; }
.focus\:ring-emerald-500:focus { --tw-ring-color: var(--navy) !important; }
.focus\:border-emerald-500:focus { border-color: var(--navy) !important; }

/* Emerald fills in SVGs */
.fill-emerald-500, .fill-emerald-600 { fill: var(--navy) !important; }

/* Legacy dark backgrounds → deep navy (footer, banners) */
.bg-slate-900, .bg-gray-900 { background-color: var(--navy-deep) !important; }
.bg-slate-800, .bg-gray-800 { background-color: var(--navy) !important; }

/* Light backgrounds → warm paper tone */
.bg-slate-50, .bg-gray-50 { background-color: var(--paper) !important; }

/* text-slate-* / text-gray-* stay usable (dark neutrals), but nudge
   400/500 muted greys toward warm muted tokens for consistency */
.text-slate-400, .text-gray-400 { color: var(--muted) !important; }
.text-slate-500, .text-gray-500 { color: var(--ink-soft) !important; }

/* Gradient overrides (from-emerald / to-emerald / via-emerald) */
.from-emerald-500, .from-emerald-600, .from-emerald-700 { --tw-gradient-from: var(--navy) !important; }
.to-emerald-500, .to-emerald-600, .to-emerald-700 { --tw-gradient-to: var(--navy-deep) !important; }
.via-emerald-500, .via-emerald-600 { --tw-gradient-via: var(--navy) !important; }


/* Global heading typography — every page's h1/h2/h3 uses Manrope */
h1, h2, h3, h4 {
  font-family: 'Manrope', system-ui, sans-serif;
  letter-spacing: -0.02em;
  /* No forced color — headings inherit from parent (body = var(--ink)),
     so light bg = dark heading; dark section with white text = white heading. */
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
  font-family: 'Tajawal', sans-serif;
}


/* SEO city-content prose (rendered from CityPropertySeoContent) */
.prose-content p { margin-bottom: 1.2em; }
.prose-content a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; font-weight: 500; }
.prose-content a:hover { color: var(--navy-deep); text-decoration-color: var(--navy-deep); }
.prose-content h3 { font-family: 'Manrope', sans-serif; font-weight: 700; color: var(--navy-deep); margin-top: 2em; margin-bottom: 0.75em; font-size: 1.25rem; }
.prose-content ul { list-style: disc; padding-left: 1.5em; margin-bottom: 1.2em; }


/* Additional palette normalization — green/amber/red buttons + focus rings */
.bg-green-500, .bg-green-600, .bg-green-700 { background-color: var(--navy) !important; color:#fff !important; }
.hover\:bg-green-500:hover, .hover\:bg-green-600:hover, .hover\:bg-green-700:hover { background-color: var(--navy-deep) !important; }
.text-green-600, .text-green-700, .text-green-500 { color: var(--gold-deep) !important; }
.border-green-500, .border-green-600 { border-color: var(--gold) !important; }
.bg-amber-500, .bg-amber-600 { background-color: var(--gold) !important; color:#fff !important; }
.text-amber-500, .text-amber-600, .text-amber-700 { color: var(--gold-deep) !important; }
.bg-blue-500, .bg-blue-600, .bg-blue-700 { background-color: var(--navy) !important; }
.hover\:bg-blue-600:hover, .hover\:bg-blue-700:hover { background-color: var(--navy-deep) !important; }
.text-blue-600, .text-blue-700 { color: var(--navy) !important; }
.focus\:ring-emerald-500:focus, .focus\:ring-green-500:focus, .focus\:ring-blue-500:focus { --tw-ring-color: var(--navy) !important; }
.focus\:border-emerald-500:focus, .focus\:border-green-500:focus, .focus\:border-blue-500:focus { border-color: var(--navy) !important; }

/* Radio + checkbox accent color everywhere */
input[type="radio"], input[type="checkbox"] { accent-color: var(--navy); }

/* Fix Rails default alert boxes (from application layout) so they look on-brand */
.bg-emerald-50 { background-color: var(--paper) !important; border-color: var(--gold-soft) !important; color: var(--navy-deep) !important; }
.text-emerald-700 { color: var(--navy) !important; }


/* ═══════════════════════════════════════════════════════════════════
   CONTRAST SAFEGUARDS — flip forced-dark text/border colors when they
   land inside a known-dark section. Prevents "black on navy" bugs from
   the legacy palette override + old text-gray-* classes.
   ═══════════════════════════════════════════════════════════════════ */

/* Elements whose parent has a dark navy background (footer, CTAs, dark heroes) */
footer *:not([style*="color"]):not([class*="text-white"]):not([class*="text-[color"]),
[data-dark-bg] *:not([style*="color"]):not([class*="text-white"]):not([class*="text-[color"]) {
  /* nothing — placeholder to avoid overreach; targeted rules below */
}

/* Force legibility on the footer specifically */
footer h1, footer h2, footer h3, footer h4, footer h5 { color: #fff; }
footer .text-slate-500, footer .text-slate-600, footer .text-slate-700,
footer .text-slate-800, footer .text-slate-900,
footer .text-gray-500, footer .text-gray-600, footer .text-gray-700,
footer .text-gray-800, footer .text-gray-900,
footer .text-ink, footer .text-navy { color: rgba(255,255,255,0.75) !important; }

/* Dark CTA banner (any element with navy-deep or navy inline background). */
[style*="background:var(--navy-deep)"] h1,
[style*="background:var(--navy-deep)"] h2,
[style*="background:var(--navy-deep)"] h3,
[style*="background:var(--navy)"] h1,
[style*="background:var(--navy)"] h2,
[style*="background:var(--navy)"] h3 { color: #fff; }

/* Legacy pages: text-slate-900 on a dark bg would be invisible. */
[style*="background:var(--navy-deep)"] .text-slate-900,
[style*="background:var(--navy-deep)"] .text-gray-900,
[style*="background:var(--navy)"] .text-slate-900,
[style*="background:var(--navy)"] .text-gray-900,
[style*="background:var(--navy-deep)"] p:not([class*="text-white"]):not([class*="text-white/"]):not([class*="text-[color"]),
[style*="background:var(--navy-deep)"] li:not([class*="text-white"]):not([class*="text-white/"]) {
  color: rgba(255,255,255,0.85) !important;
}

/* Elements inside a navy-deep section that use var(--ink) / var(--ink-soft) via inline style — flip them */
[style*="background:var(--navy-deep)"] [style*="color:var(--ink)"],
[style*="background:var(--navy-deep)"] [style*="color:var(--ink-soft)"],
[style*="background:var(--navy)"] [style*="color:var(--ink)"] {
  color: rgba(255,255,255,0.85) !important;
}

/* Form focus states — visible ring for keyboard users */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

/* Links inside prose content default to navy (readable everywhere) */
main a:not([class]) { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
main a:not([class]):hover { color: var(--navy-deep); }