/* ============================================================
   Condition detail pages — visual redesign.
   Applies the homepage design language (body.home-refined) to the
   eight condition detail pages. Scoped to .detail-refined (every rule).
   Loaded AFTER styles.css, before site-buttons.css.
   Constraints: fonts unchanged (Mukta body / Source Serif display),
   copy + images + links unchanged. Style only — no button rules
   (site-buttons.css themes buttons and loads last).
   ============================================================ */

/* ---- Design tokens (identical values to redesign.css) ---- */
.detail-refined {
  --ink-900: #0c2143;
  --accent: #12457e;
  --rule: #e7ecf2;
  --rule-strong: #d3dbe6;
  --paper: #f5f8fc;
  --shadow-card: 0 18px 40px -24px rgba(12,33,67,0.45);
  accent-color: var(--accent);
}

/* ---- Browser surfaces (themed, not default) ---- */
.detail-refined ::selection { background: #cfe0f4; color: var(--ink-900); }
.detail-refined :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* ---- Content headings: serif display, tight tracking, deep navy.
   Scoped to content <section>s only — never the dark footer (white
   headings) or the page-banner h1 (serif, set sitewide in styles.css
   to match the home hero). ---- */
.detail-refined section h2,
.detail-refined section h3 {
  font-family: var(--serif);
  color: var(--ink-900);
  letter-spacing: -0.018em;
}

/* ---- Section kickers: refined tracked accent label ---- */
.detail-refined section:not(.hero) .eyebrow {
  display: block;
  font-family: var(--sans);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--accent);
  margin: 0 0 12px;
}

/* ============================================================
   PAGE BANNER — keep height; homepage-style blue-hue overlay
   ============================================================ */
.detail-refined .page-banner .hero-overlay {
  background: linear-gradient(90deg,
    rgba(16,42,82,0.77) 0%, rgba(16,42,82,0.57) 45%, rgba(16,42,82,0.37) 100%);
}
/* Calm the bright cyan breadcrumb text/separators to a soft steel.
   Banner links themselves stay white/underlined via styles.css. */
.detail-refined .breadcrumb { color: #b9d2ea; }

/* ============================================================
   SIDEBAR — hairline cards, low rest shadow, accent active state
   ============================================================ */
.detail-refined .detail-nav,
.detail-refined .detail-contact {
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: none;
}
.detail-refined .detail-nav a:hover { color: var(--accent); }
.detail-refined .detail-nav a[aria-current="page"] {
  color: var(--accent);
  background: rgba(18,69,126,0.06);
  border-color: var(--rule-strong);
  box-shadow: inset 2px 0 0 var(--accent);
}

/* ============================================================
   ARTICLE META — hairline frame, no thick blue side-tab
   ============================================================ */
.detail-refined .article-meta {
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.detail-refined .article-meta a { color: var(--accent); }

/* ============================================================
   INTRO — hairline-framed cool panel, no thick blue side-tab
   ============================================================ */
.detail-refined .detail-intro {
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  background: var(--paper);
}

/* ============================================================
   RECOGNITION CALLOUT — hairline frame, no blue side-tab
   ============================================================ */
.detail-refined .recognition-callout {
  padding: 18px 22px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.detail-refined .recognition-callout h2 { color: var(--ink-900); }
.detail-refined .recognition-callout a { color: var(--accent); }
.detail-refined .recognition-callout a:hover { color: var(--ink-900); }

/* ============================================================
   SECTIONS — hairline dividers; accent list markers
   ============================================================ */
.detail-refined .detail-section { border-top-color: var(--rule); }
.detail-refined .detail-content li::marker { color: var(--accent); }

/* ============================================================
   DETAIL TILES — hairline frame, radius, low rest shadow
   ============================================================ */
.detail-refined .detail-tile {
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: none;
}
.detail-refined .detail-tile h3 { color: var(--ink-900); }

/* ============================================================
   RESOURCE LIST (recovery-support) — hairline links, gentle lift
   ============================================================ */
.detail-refined .resource-list a {
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: none;
}
.detail-refined .resource-list a:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-color: var(--rule-strong);
  color: var(--accent);
}
.detail-refined .resource-list strong { color: var(--ink-900); }

/* ============================================================
   IMAGING FIGURES — calm the rules & labels to hairline + accent
   ============================================================ */
.detail-refined.condition-detail-page .condition-imaging { border-top-color: var(--rule); }
.detail-refined.condition-detail-page .condition-imaging__head .eyebrow { color: var(--accent); }
.detail-refined.condition-detail-page .condition-figure__panel img { border-color: var(--rule-strong); }
.detail-refined.condition-detail-page .condition-figure__panel span { color: var(--accent); }
/* Figure captions: 1px hairline top rule (was a 2px navy bar) */
.detail-refined.condition-detail-page .condition-figure figcaption {
  border-top: 1px solid var(--rule-strong);
}
.detail-refined.condition-detail-page .condition-figure figcaption strong { color: var(--ink-900); }
.detail-refined.condition-detail-page .condition-figure__label { color: var(--accent); }
/* Aside variant: vertical hairline divider (was a 2px navy bar) */
.detail-refined.condition-detail-page .condition-figure.condition-figure--aside figcaption {
  border-left: 1px solid var(--rule-strong);
  border-top: 0;
}
@media (max-width: 720px) {
  .detail-refined.condition-detail-page .condition-figure.condition-figure--aside figcaption {
    border-top: 1px solid var(--rule-strong);
    border-left: 0;
  }
}

/* ============================================================
   FAQ (treatment page) — hairline accordions, accent +/- markers
   (wording untouched)
   ============================================================ */
.detail-refined .faq details {
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.detail-refined .faq summary { color: var(--ink-900); }
.detail-refined .faq summary:hover { color: var(--accent); }
.detail-refined .faq summary::after { color: var(--accent); }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .detail-refined .resource-list a { transition: none; }
  .detail-refined .resource-list a:hover { transform: none; }
}