@import url('/fibroids/assets/styles.css');

/* Knee arthritis (GAE) section. Copied from bph/assets/styles.css with a
   teal-green palette; inherits sup.cite and ol.sources from the fibroid base. */

:root {
  --teal: #0f7a6c;
  --teal-dark: #0b5248;
  --teal-deep: #08332e;
  --mint: #ecf7f4;
  --mint-2: #eff8f5;
  --mint-line: #bfe3da;
  --amber: #f4a62a;
  --amber-dark: #d88413;
  --sea: #2bb39a;
  --knee-ink: #06302b;
}

body.knee,
body.knee-home {
  color: var(--knee-ink);
  background: linear-gradient(180deg,#f2f9f7 0%,#fbfdfd 46%,#fff 100%);
}

body.knee .review-banner,
body.knee-home .review-banner {
  background: linear-gradient(90deg,var(--teal-deep),var(--teal));
}

body.knee header,
body.knee-home header {
  background: rgba(246,251,250,.92);
}

body.knee .brand,
body.knee-home .brand {
  color: var(--ink);
}

body.knee .mark,
body.knee-home .mark {
  background: #fff url('/assets/brand/procedurepath-icon.svg') center / contain no-repeat;
  box-shadow: rgba(11,82,72,.16) 0 14px 30px -16px, rgba(15,122,108,.16) 0 8px 20px -18px;
}

body.knee .navlinks a:hover,
body.knee .navlinks a.active,
body.knee-home .navlinks a:hover,
body.knee-home .navlinks a.active,
body.knee .footer-links a,
body.knee-home .footer-links a {
  color: var(--teal);
}

body.knee .btn.primary,
body.knee-home .btn.primary {
  background: var(--teal);
  color: #fff;
}

body.knee .btn.primary:hover,
body.knee-home .btn.primary:hover {
  background: var(--teal-dark);
  box-shadow: rgba(15,122,108,.24) 0 14px 26px -18px;
}

body.knee .btn.ghost,
body.knee-home .btn.ghost {
  color: var(--teal);
  border-color: var(--mint-line);
  background: rgba(15,122,108,.045);
}

body.knee .btn.accent,
body.knee-home .btn.accent {
  background: var(--amber);
  color: #2e2106;
  border-color: rgba(244,166,42,.4);
}

body.knee .btn.accent:hover,
body.knee-home .btn.accent:hover {
  background: var(--amber-dark);
  color: #fff;
}

body.knee .page-title,
body.knee-home .pp-hero {
  background:
    radial-gradient(circle at 82% 12%, rgba(15,122,108,.18), transparent 29%),
    radial-gradient(circle at 8% 20%, rgba(236,247,244,.82), transparent 30%),
    linear-gradient(180deg,#eff8f5 0%,#fbfdfd 68%,#fff 100%);
}

body.knee .eyebrow,
body.knee-home .eyebrow {
  color: #0b5248;
  border-color: var(--mint-line);
  background: rgba(255,255,255,.9);
}

body.knee .dot,
body.knee-home .dot {
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(244,166,42,.18);
}

body.knee .comfort-list span,
body.knee-home .comfort-list span {
  color: var(--teal-dark);
  background: rgba(236,247,244,.78);
  border-color: var(--mint-line);
}

body.knee .roadmap-preview,
body.knee-home .roadmap-preview,
body.knee .sample-checklist,
body.knee-home .sample-checklist {
  border-color: var(--mint-line);
  background: linear-gradient(180deg,#fff 0%,#f7fcfa 100%);
  box-shadow: rgba(6,63,56,.12) 0 34px 70px -44px, rgba(15,122,108,.08) 0 14px 32px -24px;
}

body.knee .mini-label,
body.knee .feature-kicker,
body.knee-home .mini-label,
body.knee-home .feature-kicker,
body.knee .roadmap-focus span,
body.knee-home .roadmap-focus span,
body.knee .pricing-kicker,
body.knee-home .pricing-kicker {
  color: var(--teal);
}

body.knee .roadmap-status,
body.knee-home .roadmap-status {
  color: var(--teal-dark);
  background: rgba(15,122,108,.09);
  border-color: rgba(15,122,108,.22);
}

body.knee .roadmap-focus,
body.knee-home .roadmap-focus {
  background: linear-gradient(135deg,#ecf7f4,#fffaf0);
  border-color: var(--mint-line);
}

body.knee .roadmap-questions span,
body.knee-home .roadmap-questions span,
body.knee .num,
body.knee-home .num {
  background: rgba(15,122,108,.1);
  color: var(--teal);
}

body.knee .roadmap-questions span,
body.knee-home .roadmap-questions span {
  background: var(--teal);
  color: #fff;
}

body.knee .proof-grid,
body.knee-home .proof-grid,
body.knee .card,
body.knee .disclaimer,
body.knee .prep-card,
body.knee .panel,
body.knee-home .card,
body.knee-home .disclaimer,
body.knee-home .prep-card,
body.knee-home .panel,
body.knee .feature-grid article,
body.knee-home .feature-grid article {
  border-color: var(--mint-line);
}

body.knee .split-story,
body.knee-home .split-story {
  background:
    radial-gradient(circle at 12% 8%, rgba(236,247,244,.18), transparent 28%),
    radial-gradient(circle at 92% 70%, rgba(244,166,42,.14), transparent 30%),
    linear-gradient(135deg,#08332e 0%,#0f7a6c 100%);
}

body.knee .feature-grid article:before,
body.knee-home .feature-grid article:before {
  background: linear-gradient(90deg,var(--teal),var(--sea),var(--amber));
}

body.knee .safety-section,
body.knee-home .safety-section {
  background: linear-gradient(180deg,#f2f9f7 0%,#fff 100%);
}

body.knee .final-cta-card,
body.knee-home .final-cta-card {
  background: linear-gradient(135deg,#eff8f5 0%,#fff 58%,#fff9ed 100%);
}

body.knee .toc a,
body.knee-home .toc a {
  color: var(--teal);
  border-color: var(--mint-line);
  background: rgba(15,122,108,.04);
}

body.knee .choice input,
body.knee-home .choice input {
  accent-color: var(--teal);
}

body.knee .brand-logo {
  width: clamp(252px, 25.2vw, 350px);
}

@media (max-width: 800px) {
  body.knee .brand-logo {
    width: min(252px, 92vw);
  }
}

/* ==========================================
   BPH ARTICLE LIBRARY & CONTENT CARD OVERRIDES
   ========================================== */

/* Main Article Cards (Grid in Hub Page) */
body.knee .article-card {
  border: 1px solid rgba(15,122,108, 0.1);
  background: linear-gradient(135deg, #ffffff 0%, var(--mint) 100%);
  box-shadow: rgba(13, 37, 61, 0.03) 0 4px 20px, rgba(15,122,108, 0.01) 0 10px 30px;
}

body.knee .article-card::before {
  background: linear-gradient(90deg, var(--teal) 0%, var(--teal-dark) 100%);
}

body.knee .article-card:hover {
  border-color: rgba(15,122,108, 0.28);
  box-shadow: rgba(15,122,108, 0.08) 0 20px 40px -15px, rgba(13, 37, 61, 0.04) 0 12px 24px -10px;
  background: linear-gradient(135deg, #ffffff 0%, var(--mint-2) 50%, #e6f4f0 100%);
}

body.knee .article-card-tag {
  color: var(--teal-dark);
  background: var(--mint);
  border: 1px solid rgba(15,122,108, 0.18);
}

body.knee .article-card-tag::before {
  background-color: var(--teal);
}

body.knee .article-card:hover h3 {
  color: var(--teal-dark);
}

body.knee .article-card-link {
  color: var(--teal);
}

body.knee .article-card:hover .article-card-link {
  color: var(--teal-dark);
}

/* Question Box Container (Within Articles) */
body.knee .question-box {
  border: 1px solid var(--mint-line);
  background: linear-gradient(135deg, var(--mint) 0%, #ffffff 100%);
  box-shadow: rgba(15,122,108, 0.03) 0 8px 24px;
}

body.knee .question-box h3 {
  color: var(--teal-dark);
}

/* Article Body Links & Citations */
body.knee .source-list a,
body.knee .article-body a {
  color: var(--teal);
}

body.knee .source-list a:hover,
body.knee .article-body a:hover {
  color: var(--teal-dark);
}

/* VAR-112 citation pattern (base rules live in fibroids/assets/styles.css,
   imported above) — retint the Sources list links/hover for the BPH theme. */
body.knee ol.sources a {
  color: var(--teal);
}

body.knee ol.sources a:hover,
body.knee sup.cite a:hover,
body.knee sup.cite a:focus-visible {
  color: var(--teal-dark);
}

body.knee .article-byline { margin: 16px 0 0; color: var(--muted); font-size: 15px; font-weight: 650; }
body.knee .article-byline a { color: var(--ink); font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
body.knee .article-reviewed { margin: 4px 0 0; color: var(--muted); font-size: 14px; font-weight: 650; }

/* ==========================================
   BPH BUILDER & HERO STYLE OVERRIDES (NO PINK)
   ========================================== */

/* Overriding Pink Grid/Radial background on Builder Hero */
body.knee .builder-hero {
  background:
    linear-gradient(90deg, rgba(15,122,108, .06) 0 1px, transparent 1px),
    linear-gradient(180deg, rgba(15,122,108, .05) 0 1px, transparent 1px),
    radial-gradient(circle at 88% 10%, rgba(15,122,108, .12), transparent 25%),
    radial-gradient(circle at 10% 8%, rgba(43,179,154, .07), transparent 26%),
    linear-gradient(180deg, rgba(239,248,245, .98), rgba(255, 255, 255, 0) 78%) !important;
  background-size: 48px 48px, 48px 48px, auto, auto, auto !important;
}

/* Overriding Pink-Plum gradient in h1 Hero Text to premium blue/teal */
body.knee h1,
body.knee-home h1 {
  background: linear-gradient(135deg, #06302b 0%, #0b356a 46%, var(--teal) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Overriding Pink Grid in :before overlay of Hero / Page Title across all BPH pages */
body.knee .page-title:before,
body.knee-home .pp-hero:before,
body.knee .hero:before,
body.knee-home .hero:before {
  background-image:
    linear-gradient(rgba(15,122,108, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,122,108, .025) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
}

/* Premium Local Specialist Search Styles for BPH */
.specialist-finder-card {
  padding: 30px;
  border: 1px solid rgba(15,122,108, 0.18);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #eff8f5 100%);
  box-shadow: rgba(6,48,43, 0.05) 0 24px 54px -38px;
}

.specialist-finder-content {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.specialist-finder-content h2,
.specialist-finder-content h3 {
  margin: 0 0 8px;
  color: var(--knee-ink);
  font-size: 24px;
  font-weight: 800;
}

.specialist-finder-content p {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}

.specialist-finder-content form {
  margin-top: 8px;
}

.search-form-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  width: 100%;
}

.specialist-finder-content input[type="text"] {
  min-height: 44px;
  padding: 8px 20px;
  border: 1.5px solid var(--mint-line);
  border-radius: 99px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--knee-ink);
  text-align: center;
  width: 240px;
  transition: border-color 0.2s, box-shadow 0.2s;
  background-color: #ffffff;
}

.specialist-finder-content input[type="text"]:focus {
  border-color: rgba(15,122,108, 0.5);
  outline: none;
  box-shadow: rgba(15,122,108, 0.12) 0 0 0 4px;
}

.specialist-finder-content .btn {
  min-height: 44px;
  border-radius: 99px;
  padding: 8px 24px;
  font-weight: 800;
  background: var(--teal);
  color: #fff;
}

.specialist-finder-content .btn:hover {
  background: var(--teal-dark);
}

.specialist-finder-content .form-error {
  color: var(--danger);
  font-size: 13.5px;
  font-weight: 700;
  margin-top: 10px;
  min-height: 18px;
}

.clinician-search-results {
  margin-top: 24px;
  text-align: left;
  border-top: 1px solid rgba(191,227,218, 0.5);
  padding-top: 22px;
  animation: builderStepIn 0.25s ease-out;
}

.clinician-search-results h4, 
.clinician-search-results h3 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 800;
  color: var(--knee-ink);
}

.search-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.search-links-grid a {
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
  border: 1px solid rgba(15,122,108, 0.18);
  border-radius: 12px;
  background: #ffffff;
  text-decoration: none;
  color: var(--knee-ink);
  font-weight: 750;
  font-size: 15.5px;
  line-height: 1.35;
  transition: border-color 0.2s, background-color 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: rgba(6,48,43, 0.03) 0 8px 16px -10px;
}

.search-links-grid a:hover {
  border-color: rgba(15,122,108, 0.5);
  background-color: #f2f9f7;
  transform: translateY(-2px);
  box-shadow: rgba(11,82,72, 0.12) 0 14px 28px -18px;
}

.search-links-grid a span {
  display: block;
  margin-top: auto;
  padding-top: 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--teal-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.85;
}

.specialist-finder-content .search-disclaimer {
  margin-top: 16px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  line-height: 1.45;
}

@media (max-width: 580px) {
  .search-form-row {
    flex-direction: column;
    align-items: stretch;
  }
  .specialist-finder-content input[type="text"] {
    width: 100%;
  }
}

/* Article table of contents */
.article-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 18px;
  margin-bottom: 20px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.4;
}
.article-toc strong {
  flex: 0 0 auto;
  color: var(--label);
  font-weight: 700;
  margin-right: 4px;
}
.article-toc a {
  color: var(--teal);
  text-decoration: none;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
}
.article-toc a:hover {
  background: #dceff0;
  text-decoration: underline;
}

/* Inline CTA card within articles */
.cta-card {
  margin: 28px 0;
  padding: 24px;
  background: linear-gradient(135deg, var(--mint) 0%, #fff 60%);
  border: 1px solid var(--mint-line);
  border-radius: 14px;
  text-align: center;
}
.cta-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--knee-ink);
}
.cta-card p {
  margin: 0 auto 16px;
  max-width: 500px;
  font-size: 15px;
}

/* Sources list — sup.cite inherits from the fibroids @import above;
   .sources/.src-back have no rules anywhere yet. Matches PR #38's rules. */
.sources {
  font-size: 15px;
  line-height: 1.5;
  padding-left: 1.4em;
}
.sources li {
  margin: 0 0 10px;
}
.src-back {
  margin-left: 6px;
  text-decoration: none;
  color: var(--muted);
}
.src-back:hover {
  text-decoration: underline;
}

/* Why this matters — explanatory paragraphs in articles */
.why-matters {
  margin: 16px 0 24px;
  padding: 14px 18px;
  background: var(--soft);
  border-left: 3px solid var(--teal);
  border-radius: 0 8px 8px 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--label);
}
.why-matters strong {
  color: var(--knee-ink);
}

/* Options page (static cards, no builder), adapted from the BPH options page's inline styles. */
.knee .options-toolbar { margin-bottom: 22px; }
.knee .options-toolbar h2 { max-width: 620px; font-size: clamp(30px,4vw,44px); font-weight: 800; color: var(--knee-ink); }
.knee .options-toolbar p { max-width: 680px; margin: 10px 0 0; color: #5d6d82; font-size: 16px; }
.knee .proc-section { margin-top: 24px; }
.knee .proc-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--mint-line); }
.knee .proc-section-heading h3 { margin: 0; color: var(--knee-ink); font-size: 22px; font-weight: 800; }
.knee .proc-section-heading span { color: var(--teal-dark); font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.knee .proc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(286px, 1fr)); gap: 16px; }
.knee .proc-card { position: relative; overflow: hidden; background: linear-gradient(180deg,#fff 0%,#fbfdfd 100%); border: 1px solid var(--mint-line); border-radius: 12px; padding: 20px; box-shadow: rgba(15,122,108,.07) 0 18px 38px -28px; }
.knee .proc-card:before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg,var(--teal),var(--sea)); opacity: .82; }
.knee .proc-card h3 { font-weight: 800; font-size: 20px; margin: 0 0 9px; color: var(--knee-ink); line-height: 1.18; }
.knee .proc-card .proc-tag { display: inline-block; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; border: 1px solid; border-radius: 999px; padding: 4px 9px; margin-bottom: 12px; }
.knee .proc-card .proc-tag.invasive-low { color: #0f7a6c; background: rgba(15,122,108,.07); border-color: rgba(15,122,108,.25); }
.knee .proc-card .proc-tag.invasive-high { color: #8b5a3d; background: rgba(180,130,80,.07); border-color: rgba(180,130,80,.2); }
.knee .proc-card p { color: #4f5f76; font-size: 14px; line-height: 1.5; margin: 0; }
.knee .proc-card p + p { margin-top: 10px; }
.knee .proc-card ul { margin: 10px 0 0; padding-left: 18px; }
.knee .proc-card li { color: #34465c; font-size: 13.5px; line-height: 1.45; margin: 5px 0; }
.knee .proc-card .guideline,
.knee .proc-card .recovery { padding: 10px 12px; border-radius: 9px; background: #f8fafc; border: 1px solid #e4ecf5; }
.knee .proc-card .trade-off { border-top: 1px solid var(--mint-line); margin-top: 14px; padding-top: 12px; }
.knee .proc-card .trade-off strong { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #263851; }
.knee .proc-card .ask { margin-top: 12px; color: var(--teal-deep); }
.knee .options-disclaimer { margin-top: 28px; padding: 16px 18px; border-radius: 10px; background: linear-gradient(135deg,#eef8f5,#fff); border: 1px solid var(--mint-line); color: var(--teal-deep); font-size: 13.5px; font-weight: 650; line-height: 1.5; }
.knee .options-intro { margin: 0 0 18px; padding: 14px 16px; border-radius: 10px; background: linear-gradient(135deg,#eef8f5,#fff); border: 1px solid var(--mint-line); color: var(--teal-deep); font-size: 16.5px; font-weight: 650; line-height: 1.5; }
.knee .options-explainer { font-size: 17px; line-height: 1.65; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--mint-line); }
.knee .options-explainer h2 { font-size: clamp(26px, 3vw, 32px); margin: 0 0 12px; line-height: 1.15; color: var(--knee-ink); }
.knee .options-explainer h3 { margin: 20px 0 8px; color: var(--knee-ink); font-size: 20px; }
.knee .options-explainer p { margin: 0 0 14px; }
.knee .danger + .key-facts { margin-top: 16px; }
@media (max-width: 720px) {
  .knee .proc-section-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .knee .proc-grid { grid-template-columns: 1fr; }
  .knee .options-intro { font-size: 16px; }
  .knee .options-explainer { margin-top: 28px; padding-top: 22px; }
}

/* Section landing page */
.knee .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }
.knee .hero-note { margin: 14px 0 0; font-size: 14px; color: var(--label); }
.knee .hero-note a { text-decoration: underline; text-underline-offset: 3px; }
.knee .glance-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.knee .glance-list li { padding: 16px; border: 1px solid var(--mint-line); border-radius: 12px; background: #fff; }
.knee .glance-list strong { display: block; color: var(--knee-ink); font-size: 16px; }
.knee .glance-list span { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.4; }
@media (max-width: 720px) {
  .knee .hero-actions .btn { width: 100%; }
}

/* Printable questions page: print only the list, the byline, and Sources. */
@media print {
  .knee.questions-print-page .pp-breadcrumbs,
  .knee.questions-print-page .patient-faq {
    display: none !important;
  }
}