/* ============================================================
   BLISS HOMES — THEME MIXED (cream + dark interludes)
   Loaded after each page's inline <style> to win cascade.
   Drops in via: <link rel="stylesheet" href="/assets/theme-mixed.css">
   ============================================================ */

:root {
  --navy:      #F8F6F2;     /* page bg = cream */
  --navy-card: #EFEAE0;     /* sand cards */
  --navy-deep: #E4DFD6;
  --blue:      #1C6386;     /* darker blue for AA contrast on cream */
  --blue-soft: #247DA0;
  --ink:       #1A2E52;     /* primary text = navy */
  --ink-2:     rgba(26,46,82,0.78);
  --ink-3:     rgba(26,46,82,0.55);
  --ink-4:     rgba(26,46,82,0.22);
  --rule:      rgba(26,46,82,0.10);
}

html, body { background: #F8F6F2; color: #1A2E52; }

/* ---------- Nav (translucent cream) ---------- */
.nav { background: rgba(248,246,242,0.78) !important; border-bottom: 1px solid rgba(26,46,82,0.10); }
.nav.scrolled { background: rgba(248,246,242,0.96) !important; box-shadow: 0 1px 0 rgba(26,46,82,0.06); }
.nav-links a { color: rgba(26,46,82,0.78); }
.nav-links a:hover { color: #1A2E52; }
.nav-links a.nav-cta,
a.nav-cta { background: #1A2E52; color: #FFFFFF !important; }
.nav-phone { color: #1A2E52 !important; border-color: rgba(26,46,82,0.18); }
.nav-phone:hover { background: rgba(28,99,134,0.06); border-color: #1C6386; }
.nav-phone svg { color: #1C6386; }
.nav-burger span { background: #1A2E52 !important; }
.nav-menu { background: rgba(255,255,255,0.97) !important; }

/* ---------- Buttons ---------- */
.btn-primary {
  background: #1A2E52; color: #FFFFFF;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 10px 30px -12px rgba(26,46,82,0.35);
}
.btn-primary:hover {
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 14px 40px -14px rgba(26,46,82,0.5);
}
.btn-primary svg { color: #FFFFFF; }
.btn-ghost { color: #1A2E52; border: 1px solid rgba(26,46,82,0.22); }
.btn-ghost:hover { border-color: #1C6386; color: #1C6386; }

::selection { background: #247DA0; color: #FFFFFF; }

/* ---------- Generic editorial card swap ---------- */
.g-review { background: rgba(26,46,82,0.04); border: 1px solid rgba(26,46,82,0.08); }
.g-review:hover { background: rgba(26,46,82,0.06); }

/* FAQ section that uses inline rgba(255,255,255,0.04) bg */
section[aria-labelledby="faq-heading"] {
  background: rgba(26,46,82,0.03) !important;
  border-top: 1px solid rgba(26,46,82,0.10);
}

/* ---------- DARK BANDS — restore navy/black palette in scope ---------- */
.video-band,
.cta-band,
.case-study {
  --navy:      #1A2E52;
  --navy-card: #20344D;
  --navy-deep: #152644;
  --blue:      #40A9FF;
  --blue-soft: #74B2FF;
  --ink:       #FFFFFF;
  --ink-2:     rgba(255,255,255,0.72);
  --ink-3:     rgba(255,255,255,0.48);
  --ink-4:     rgba(255,255,255,0.22);
  --rule:      rgba(255,255,255,0.10);
  background: #1A2E52;
  color: #FFFFFF;
}

.case-study {
  --navy:      #0B0B0E;
  --navy-card: #16161B;
  --navy-deep: #050507;
  background: #0B0B0E;
}

.cta-band {
  --navy:      #000000;
  --navy-card: #0B0B0E;
  --navy-deep: #000000;
  background: #000000;
}

/* Re-assert text colors inside dark bands (cascade safety) */
.video-band, .video-band h1, .video-band h2, .video-band h3, .video-band h4, .video-band p,
.cta-band, .cta-band h1, .cta-band h2, .cta-band h3, .cta-band h4, .cta-band p,
.case-study, .case-study h1, .case-study h2, .case-study h3, .case-study h4, .case-study p { color: #FFFFFF; }

.case-study .lead, .video-band .lead, .cta-band .lead { color: rgba(255,255,255,0.72); }

/* Buttons inside dark bands: keep white-on-navy primary */
.video-band .btn-primary, .cta-band .btn-primary, .case-study .btn-primary { background: #FFFFFF; color: #1A2E52; }
.video-band .btn-primary svg, .cta-band .btn-primary svg, .case-study .btn-primary svg { color: #40A9FF; }
.video-band .btn-ghost, .cta-band .btn-ghost, .case-study .btn-ghost { color: #FFFFFF; border-color: rgba(255,255,255,0.22); }

/* CTA-band specific button on black */
.cta-band .cta-band-btn { background: #FFFFFF; color: #000000; }
.cta-band .cta-band-btn:hover { background: #F8F6F2; }

/* ---------- Brand logo swap ----------
   Original light isotype invisible on cream; force navy outline variant.
   Targets <img src="...logo-isotype-v2.png"> inside .brand. */
.brand img[src*="logo-isotype-v2"],
.brand img[src*="logo-isotype-white"] {
  content: url('/assets/logo-isotype-navy-outline.png');
}

/* ---------- Footer (cream context) ---------- */
footer {
  background: transparent;
  color: var(--ink-2);
  border-top: 1px solid rgba(26,46,82,0.10);
}
footer a { color: var(--ink-2); }
footer a:hover { color: #1A2E52; }