/* MedStar — Direction System
   Sets the Civic Trust visual identity on html[data-direction="civic"].
   Colors, typography, buttons, ticker, and nav CTA all defined here.
*/

/* ---------- CIVIC TRUST ---------- */
html[data-direction="civic"] {
  --bg: #F0F2F5;
  --bg-deep: #DFE3EA;
  --paper: #FFFFFF;
  --ink: #0F1B2D;
  --ink-2: #1F2D44;
  --ink-soft: #5A6577;
  --line: #C8CFDA;
  --terracotta: #E63329;
  --rust: #B0231C;
  --mustard: #E63329;
  --ms-red: #E63329;
  --ms-red-deep: #B0231C;
  --ms-blue: #1B5BA8;
  --ms-blue-deep: #0F3D75;
  --forest: #1B5BA8;
  --forest-deep: #0F3D75;
  --display: "Inter Tight", system-ui, sans-serif;
  --sans: "Inter Tight", system-ui, sans-serif;
}

html[data-direction="civic"] .display-xl,
html[data-direction="civic"] .display-l,
html[data-direction="civic"] .display-m,
html[data-direction="civic"] h1,
html[data-direction="civic"] h2,
html[data-direction="civic"] h3 {
  font-weight: 700;
  letter-spacing: -0.035em;
}

html[data-direction="civic"] em.terra,
html[data-direction="civic"] em.forest {
  font-style: normal;
  font-weight: 700;
  color: var(--ms-red);
}

html[data-direction="civic"] .btn-primary {
  background: var(--ms-blue-deep);
  border-radius: 6px;
}
html[data-direction="civic"] .btn-primary:hover { background: var(--ms-red); }
html[data-direction="civic"] .btn-accent {
  background: var(--ms-red);
  border-radius: 6px;
}
html[data-direction="civic"] .btn-secondary {
  border-radius: 6px;
  border-color: var(--ink);
}

html[data-direction="civic"] .u-mark::after {
  background: var(--ms-red);
  opacity: 0.18;
}

/* Nav CTA — always brand red across all directions */
html[data-direction="civic"] .ms-nav .btn-primary {
  background: var(--ms-red);
  color: #FFFFFF;
  border-radius: 6px;
}
html[data-direction="civic"] .ms-nav .btn-primary:hover {
  background: var(--ms-red-deep);
}

/* Civic drops script ornaments for clean authority */
html[data-direction="civic"] .hero-stamp,
html[data-direction="civic"] .hero-script-note,
html[data-direction="civic"] .kicker {
  display: none;
}

/* Ticker — uppercase sans-serif strip */
html[data-direction="civic"] .ticker-strip {
  background: var(--ms-blue-deep);
}
html[data-direction="civic"] .ticker-track {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html[data-direction="civic"] .ticker-track .star {
  color: var(--ms-red);
}

/* Hero photo tint — blue gradient overlay */
html[data-direction="civic"] .hero {
  background-image:
    linear-gradient(165deg, rgba(27,91,168,0.55) 0%, rgba(15,61,117,0.7) 60%, rgba(10,40,72,0.8) 100%),
    url("../assets/hero-clinic.webp") !important;
  background-size: cover !important;
  background-position: center !important;
  background-blend-mode: multiply, normal !important;
}