/* ==========================================================================
   Disease Guide — Standalone styles for single-diseases.php
   Scoped under .dg-page to avoid conflicts with existing theme CSS.
   ========================================================================== */

:root {
  --dg-magenta:      #d91769;
  --dg-magenta-dark: #ad0f53;
  --dg-magenta-soft: #fce6f1;
  --dg-magenta-100:  #f3bcd6;
  --dg-navy:         #2e294f;
  --dg-navy-soft:    #e9e7f1;
  --dg-purple:       #5a4b9c;
  --dg-purple-soft:  #eceaf7;
  --dg-purple-100:   #d3ccee;
  --dg-purple-dark:  #3c2f73;
  --dg-blue:         #46406e;
  --dg-blue-soft:    #eae8f3;
  --dg-blue-dark:    #2e294f;
  --dg-red:          #c62828;
  --dg-red-soft:     #fbeaea;
  --dg-red-dark:     #8e1c1c;
  --dg-ink:          #2e294f;
  --dg-ink2:         #5a5a72;
  --dg-line:         #e6e5ee;
  --dg-surface:      #ffffff;
  --dg-surface2:     #f5f4fa;
  --dg-page:         #eeedf4;
  --dg-sans: 'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
}

/* ---- Page wrapper ---- */
.dg-page {
  background: var(--dg-page);
  font-family: var(--dg-sans);
  color: var(--dg-ink);
  line-height: 1.5;
}
.dg-page *, .dg-page *::before, .dg-page *::after {
  box-sizing: border-box;
}
.dg-page h1, .dg-page h2, .dg-page h3, .dg-page h4 {
  font-family: var(--dg-sans);
  font-weight: 800;
  letter-spacing: -.01em;
}
.dg-page a { color: inherit; }

/* ---- SVG icon sprite (hidden) ---- */
.dg-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.dg-isvg { width: 18px; height: 18px; display: block; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dg-a-icon .dg-isvg { stroke: #fff; }
.dg-med-icon .dg-isvg { stroke: var(--dg-navy); width: 20px; height: 20px; }

/* ---- Breadcrumb ---- */
.dg-breadcrumb { max-width: 1180px; margin: 0 auto; padding: 14px 24px; font-size: 13px; color: var(--dg-ink2); }
.dg-breadcrumb a { color: var(--dg-magenta); text-decoration: none; }

/* ---- Shell (content wrapper) ---- */
.dg-shell { max-width: 1180px; margin: 0 auto 60px; padding: 0 24px; }

/* ---- HERO ---- */
.dg-hero { background: linear-gradient(120deg,#d91769 0%,#b51661 30%,#5e2a6e 62%,#2e294f 100%); border-radius: 20px; padding: 44px; color: #fff; position: relative; overflow: hidden; margin-top: 14px; display: flex; flex-direction: column; gap: 26px; }
.dg-hero-main { position: relative; z-index: 1; }
.dg-series-ribbon { display: inline-flex; align-items: stretch; margin-bottom: 18px; border-radius: 5px; overflow: hidden; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; }
.dg-rib-a { background: var(--dg-navy); color: #fff; padding: 7px 26px 7px 14px; clip-path: polygon(0 0,100% 0,calc(100% - 10px) 50%,100% 100%,0 100%); }
.dg-rib-b { background: rgba(255,255,255,.2); color: #fff; padding: 7px 14px 7px 18px; margin-left: -10px; }
.dg-hero-eyebrow { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; background: rgba(255,255,255,.18); padding: 6px 14px; border-radius: 20px; margin-bottom: 18px; }
.dg-hero h1 { font-size: 38px; line-height: 1.12; margin: 0 0 16px; }
.dg-hero p.dg-hero-desc { font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,.92); max-width: 560px; margin: 0; }

/* Flashcard strip in hero */
.dg-hero-flash { position: relative; z-index: 1; display: grid; grid-template-columns: 25% 75%; height: 150px; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.22); }
.dg-flash-img { background: var(--dg-surface2); overflow: hidden; }
.dg-flash-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; display: block; }
.dg-flash-body { padding: 16px 20px; display: flex; flex-direction: column; justify-content: center; }
.dg-flash-kicker { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dg-magenta); }
.dg-flash-title { font-size: 16px; font-weight: 800; color: var(--dg-navy); margin-top: 3px; line-height: 1.2; }
.dg-flash-sub { font-size: 12.5px; color: var(--dg-ink2); line-height: 1.45; margin-top: 6px; }
.dg-flash-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; background: var(--dg-magenta); color: #fff; font-weight: 700; font-size: 12.5px; padding: 10px 16px; border-radius: 30px; text-decoration: none; line-height: 1.1; white-space: nowrap; }
.dg-flash-btn:hover { background: var(--dg-magenta-dark); color: #fff; }
.dg-flash-btn .dg-isvg { width: 16px; height: 16px; stroke: #fff; }

/* Hero stat cards */
.dg-hero-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: auto; padding-top: 32px; max-width: 560px; }
.dg-hero-card { aspect-ratio: 1/1; border-radius: 14px; padding: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.dg-hero-card.c1 { background: var(--dg-magenta-soft); }
.dg-hero-card.c2 { background: var(--dg-purple-soft); }
.dg-hero-card.c3 { background: var(--dg-navy-soft); }
.dg-hc-num { font-size: 30px; font-weight: 700; line-height: 1.05; }
.c1 .dg-hc-num { color: var(--dg-magenta-dark); }
.c2 .dg-hc-num { color: var(--dg-purple-dark); }
.c3 .dg-hc-num { color: var(--dg-blue-dark); }
.dg-hc-label { font-size: 12.5px; margin-top: 8px; line-height: 1.35; }
.c1 .dg-hc-label { color: var(--dg-magenta-dark); }
.c2 .dg-hc-label { color: var(--dg-purple-dark); }
.c3 .dg-hc-label { color: var(--dg-blue-dark); }

@media (max-width: 680px) {
  .dg-hero { padding: 32px 24px; }
  .dg-hero h1 { font-size: 26px; }
  .dg-hero-flash { grid-template-columns: 1fr; height: auto; }
  .dg-flash-img { height: 140px; }
  .dg-hero-cards { grid-template-columns: repeat(3,1fr); max-width: none; }
  .dg-hero-card { aspect-ratio: auto; }
}

/* ---- TAB NAVIGATION (CSS-only radio tabs) ---- */
.dg-tabnav { display: none; }
.dg-tabwrap { position: sticky; top: 0; z-index: 30; background: var(--dg-page); padding: 14px 0 6px; margin-top: 8px; }
.dg-tabs { display: flex; gap: 4px; flex-wrap: nowrap; background: var(--dg-surface); border: 1px solid var(--dg-line); border-radius: 14px; padding: 7px; overflow-x: auto; }
.dg-tab { font-weight: 600; font-size: 13px; padding: 9px 12px; border-radius: 9px; color: var(--dg-ink2); cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; transition: background .12s, color .12s; }
.dg-tab .dg-isvg { width: 16px; height: 16px; }
.dg-tab:hover { background: var(--dg-purple-soft); color: var(--dg-purple-dark); }

/* Active tab state */
.dg-page #dg-t-overview:checked ~ .dg-shell .dg-tabwrap label[for="dg-t-overview"],
.dg-page #dg-t-symptoms:checked ~ .dg-shell .dg-tabwrap label[for="dg-t-symptoms"],
.dg-page #dg-t-diagnosis:checked ~ .dg-shell .dg-tabwrap label[for="dg-t-diagnosis"],
.dg-page #dg-t-treatment:checked ~ .dg-shell .dg-tabwrap label[for="dg-t-treatment"],
.dg-page #dg-t-daily:checked ~ .dg-shell .dg-tabwrap label[for="dg-t-daily"],
.dg-page #dg-t-mental:checked ~ .dg-shell .dg-tabwrap label[for="dg-t-mental"],
.dg-page #dg-t-tracker:checked ~ .dg-shell .dg-tabwrap label[for="dg-t-tracker"],
.dg-page #dg-t-resources:checked ~ .dg-shell .dg-tabwrap label[for="dg-t-resources"] {
  background: var(--dg-magenta);
  color: #fff;
}

/* Section visibility */
.dg-section { display: none; }
.dg-page #dg-t-overview:checked ~ .dg-shell #dg-overview,
.dg-page #dg-t-symptoms:checked ~ .dg-shell #dg-symptoms,
.dg-page #dg-t-diagnosis:checked ~ .dg-shell #dg-diagnosis,
.dg-page #dg-t-treatment:checked ~ .dg-shell #dg-treatment,
.dg-page #dg-t-daily:checked ~ .dg-shell #dg-daily,
.dg-page #dg-t-mental:checked ~ .dg-shell #dg-mental,
.dg-page #dg-t-tracker:checked ~ .dg-shell #dg-tracker,
.dg-page #dg-t-resources:checked ~ .dg-shell #dg-resources { display: block; }

/* ---- Section heads ---- */
.dg-section-head { margin: 30px 0 22px; }
.dg-section-kicker { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dg-purple); margin-bottom: 6px; }
.dg-section-head h2 { font-size: 28px; color: var(--dg-navy); margin: 0; }
.dg-section-head p.dg-lead { font-size: 16px; color: var(--dg-ink2); margin-top: 10px; max-width: 720px; font-weight: 400; }

/* ---- Grids ---- */
.dg-grid { display: grid; gap: 18px; }
.dg-grid-2 { grid-template-columns: repeat(2,1fr); }
.dg-grid-3 { grid-template-columns: repeat(3,1fr); }
.dg-span-2 { grid-column: span 2; }
@media (max-width: 860px) {
  .dg-grid-2, .dg-grid-3 { grid-template-columns: 1fr; }
  .dg-span-2 { grid-column: span 1; }
}

/* ---- Cards ---- */
.dg-card { background: var(--dg-surface); border: 1px solid var(--dg-line); border-radius: 16px; padding: 24px; }
.dg-card.accent { border-top: 4px solid var(--dg-magenta); }
.dg-card-eyebrow { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dg-navy); margin-bottom: 12px; }
.dg-ce-icon { width: 30px; height: 30px; border-radius: 9px; background: var(--dg-purple-soft); color: var(--dg-purple); display: flex; align-items: center; justify-content: center; }
.dg-card-body { font-size: 15px; color: #39414f; line-height: 1.7; }
.dg-card-body strong { font-weight: 700; color: var(--dg-navy); }

/* Stat card */
.dg-stat-card { background: linear-gradient(160deg,var(--dg-purple-soft),#fff); border: 1px solid var(--dg-purple-100); border-radius: 16px; padding: 26px 20px; text-align: center; }
.dg-stat-num { font-size: 34px; font-weight: 700; color: var(--dg-purple); line-height: 1; margin-bottom: 8px; }
.dg-stat-label { font-size: 14px; color: var(--dg-ink2); line-height: 1.45; }

/* ---- Tags ---- */
.dg-taglist { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.dg-tag { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; padding: 6px 13px; border-radius: 30px; }
.dg-t-magenta { background: var(--dg-magenta-soft); color: var(--dg-magenta-dark); }
.dg-t-teal { background: var(--dg-purple-soft); color: var(--dg-purple-dark); }
.dg-t-purple { background: var(--dg-purple-soft); color: var(--dg-purple-dark); }
.dg-t-blue { background: var(--dg-blue-soft); color: var(--dg-blue-dark); }
.dg-t-red { background: var(--dg-red-soft); color: var(--dg-red-dark); }
.dg-t-navy { background: var(--dg-navy-soft); color: var(--dg-navy); }

/* Definition rows */
.dg-deflist { display: flex; flex-direction: column; gap: 12px; }
.dg-defrow { display: flex; gap: 12px; align-items: flex-start; }
.dg-defrow .dg-tag { flex-shrink: 0; }
.dg-deftxt { font-size: 14px; color: var(--dg-ink2); padding-top: 3px; line-height: 1.5; }

/* ---- Alert boxes ---- */
.dg-alert { border-radius: 14px; padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start; }
.dg-a-icon { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.dg-a-title { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 5px; }
.dg-a-body { font-size: 14.5px; line-height: 1.6; color: #39414f; }
.dg-a-body strong { font-weight: 700; }
.dg-alert-purple { background: var(--dg-purple-soft); border: 1px solid var(--dg-purple-100); }
.dg-alert-purple .dg-a-icon { background: var(--dg-purple); }
.dg-alert-purple .dg-a-title { color: var(--dg-purple-dark); }
.dg-alert-magenta { background: var(--dg-magenta-soft); border: 1px solid var(--dg-magenta-100); }
.dg-alert-magenta .dg-a-icon { background: var(--dg-magenta); }
.dg-alert-magenta .dg-a-title { color: var(--dg-magenta-dark); }
.dg-alert-red { background: var(--dg-red-soft); border: 1px solid #f3c9c7; }
.dg-alert-red .dg-a-icon { background: var(--dg-red); }
.dg-alert-red .dg-a-title { color: var(--dg-red-dark); }
.dg-alert-navy { background: var(--dg-navy-soft); border: 1px solid #d0cde5; }
.dg-alert-navy .dg-a-icon { background: var(--dg-navy); }
.dg-alert-navy .dg-a-title { color: var(--dg-navy); }

/* ---- Quote ---- */
.dg-quote { background: var(--dg-navy); color: #fff; border-radius: 16px; padding: 26px 30px; }
.dg-quote-text { font-size: 17px; line-height: 1.6; font-weight: 300; margin-bottom: 12px; }
.dg-quote-attr { font-size: 13px; font-weight: 600; color: var(--dg-magenta-100); }

/* ---- Ask (questions to ask doctor) ---- */
.dg-ask { background: var(--dg-purple-soft); border: 1px solid #d6cff5; border-radius: 16px; padding: 22px 24px; }
.dg-ask-title { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--dg-purple-dark); margin-bottom: 14px; }
.dg-ask-title .dg-isvg { width: 16px; height: 16px; }
.dg-ask-item { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: #39414f; padding: 7px 0; line-height: 1.5; border-top: 1px solid #ddd5f7; }
.dg-ask-item:first-of-type { border-top: none; }
.dg-ask-item .dg-q { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--dg-purple); color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-top: 1px; }

/* ---- Medication list ---- */
.dg-med { display: flex; gap: 15px; padding: 16px 0; border-top: 1px solid var(--dg-line); }
.dg-med:first-of-type { border-top: none; padding-top: 4px; }
.dg-med-icon { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.dg-med-name { font-size: 15.5px; font-weight: 700; color: var(--dg-navy); margin-bottom: 3px; }
.dg-med-detail { font-size: 14px; color: var(--dg-ink2); line-height: 1.6; }

/* ---- Care team grid ---- */
.dg-team-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
@media (max-width: 680px) { .dg-team-grid { grid-template-columns: 1fr; } }
.dg-team-item { display: flex; gap: 11px; align-items: flex-start; background: var(--dg-surface2); border-radius: 11px; padding: 13px 15px; }
.dg-team-item .dg-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.dg-ti-name { font-size: 14px; font-weight: 700; color: var(--dg-navy); }
.dg-ti-desc { font-size: 13px; color: var(--dg-ink2); line-height: 1.45; }

/* ---- Resources list ---- */
.dg-res-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--dg-line); }
.dg-res-row:last-child { border-bottom: none; }
.dg-res-name { font-size: 15px; font-weight: 700; color: var(--dg-navy); margin-bottom: 2px; }
.dg-res-type { font-size: 13.5px; color: var(--dg-ink2); }
.dg-res-link { font-size: 13.5px; font-weight: 600; color: var(--dg-magenta); text-decoration: none; white-space: nowrap; }
.dg-res-link:hover { color: var(--dg-magenta-dark); }

/* ---- Symptom tracker ---- */
.dg-tracker-row { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--dg-line); }
.dg-tracker-label { font-size: 14.5px; color: var(--dg-navy); flex: 1; font-weight: 600; }
.dg-tracker-dots { display: flex; gap: 6px; }
.dg-dot-rate { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--dg-line); background: #fff; cursor: pointer; transition: all .12s; }
.dg-dot-rate:hover { border-color: var(--dg-magenta); }
.dg-dot-rate.f1 { background: #bfe6cf; border-color: #bfe6cf; }
.dg-dot-rate.f2 { background: #9bd9c4; border-color: #9bd9c4; }
.dg-dot-rate.f3 { background: #e8a33d; border-color: #e8a33d; }
.dg-dot-rate.f4 { background: #ef9a6b; border-color: #ef9a6b; }
.dg-dot-rate.f5 { background: var(--dg-red); border-color: var(--dg-red); }
.dg-rate-val { min-width: 30px; font-size: 13px; color: var(--dg-ink2); text-align: right; font-weight: 600; }

/* Trigger tags */
.dg-trigger-tag { font-size: 13px; font-weight: 600; padding: 6px 13px; border-radius: 30px; border: 1.5px solid var(--dg-line); background: #fff; color: var(--dg-ink2); cursor: pointer; font-family: var(--dg-sans); }
.dg-trigger-tag.sel { background: var(--dg-purple-soft); border-color: var(--dg-purple); color: var(--dg-purple-dark); }

/* Buttons */
.dg-btnrow { display: flex; gap: 10px; margin-top: 18px; }
.dg-btn { font-size: 14px; font-weight: 600; padding: 10px 20px; border-radius: 30px; cursor: pointer; border: 1px solid var(--dg-line); background: #fff; color: var(--dg-ink2); font-family: var(--dg-sans); }
.dg-btn:hover { background: var(--dg-surface2); }
.dg-btn-primary { background: var(--dg-magenta); color: #fff; border-color: var(--dg-magenta); }
.dg-btn-primary:hover { background: var(--dg-magenta-dark); }

/* Notes textarea */
.dg-page textarea.dg-notes { width: 100%; margin-top: 14px; font-size: 14px; padding: 12px 14px; border: 1.5px solid var(--dg-line); border-radius: 12px; background: var(--dg-surface2); font-family: var(--dg-sans); resize: vertical; min-height: 70px; outline: none; }
.dg-page textarea.dg-notes:focus { border-color: var(--dg-magenta); }

/* ---- Spacing helpers ---- */
.dg-mt-18 { margin-top: 18px; }
.dg-mb-18 { margin-bottom: 18px; }

/* ---- Disclaimer ---- */
.dg-disclaimer { max-width: 1180px; margin: 30px auto 0; padding: 16px 24px; font-size: 12.5px; color: var(--dg-ink2); text-align: center; line-height: 1.6; }

/* ---- Mobile tweaks ---- */
@media (max-width: 980px) {
  .dg-shell { padding: 0 16px; }
  .dg-tabs { -webkit-overflow-scrolling: touch; }
}