/* DispoHealth — static site styles */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ margin:0; }
@keyframes dh-fadeUp{ from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);} }
@keyframes dh-pulse{ 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.4; transform:scale(.7);} }
@keyframes dh-reveal{ from{opacity:0; transform:translateY(28px);} to{opacity:1; transform:translateY(0);} }
.dh-reveal{ animation:dh-reveal .8s ease both; animation-timeline:view(); animation-range:entry 0% cover 32%; }
@media print {
    .dh-noprint{ display:none !important; }
    nav, footer, button{ display:none !important; }
    .dh-hero{ padding:36px 40px !important; }
    .dh-body{ padding:24px 40px 40px !important; }
    *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
    @page{ margin:14mm; }
  }
@keyframes dh-fadeUp{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }
#sup-desc:empty:before{ content:attr(data-placeholder); color:#9fb1c4; pointer-events:none; }
#sup-desc:focus{ outline:none; }
#sup-desc p{ margin:0 0 10px; }
#sup-desc ul,#sup-desc ol{ margin:0 0 10px; padding-left:22px; }

/* structural helpers */
[data-if]{display:contents;}
[data-if].dh-hidden{display:none;}
.dh-hidden{display:none !important;}
a{color:#185FA5;}
a:hover{color:#5DCAA5;}

/* interaction states */
.dhs1:hover{ opacity:.62 !important }
.dhs2:hover{ color:#5DCAA5 !important; --uw:100% !important }
.dhs3:focus{ border-color:#5DCAA5 !important; background:rgba(255,255,255,.1) !important }
.dhs4:hover{ opacity:.9 !important; transform:translateY(-1px) !important }
.dhs5:hover{ color:#fff !important }
.dhs6:focus{ border-color:#5DCAA5 !important }
.dhs7:hover{ opacity:.9 !important }
.dhs8:hover{ transform:translateY(-2px) !important; box-shadow:0 14px 36px rgba(93,202,165,.5) !important }
.dhs9:hover{ background:#dfeaf6 !important }
.dhs10:hover{ transform:translateY(-1px) !important }
.dhs11:hover{ box-shadow:0 18px 44px rgba(4,44,83,.1) !important; transform:translateY(-2px) !important }
.dhs12:hover{ box-shadow:0 14px 36px rgba(4,44,83,.1) !important; transform:translateY(-2px) !important }
.dhs13:hover{ transform:translateY(-2px) !important; box-shadow:0 12px 32px rgba(93,202,165,.4) !important }
.dhs14:hover{ color:#5DCAA5 !important }
.dhs15:hover{ color:#5DCAA5 !important; border-bottom-color:#5DCAA5 !important }
.dhs16:hover{ opacity:.7 !important; text-decoration:underline !important }
.dhs17:hover{ transform:translateY(-2px) !important; box-shadow:0 10px 26px rgba(93,202,165,.36) !important }
.dhs18:focus{ box-shadow:0 0 0 3px rgba(93,202,165,.5), 0 12px 34px rgba(4,44,83,.24) !important }
.dhs19:hover{ text-decoration:underline !important }
.dhs20:hover{ color:#185FA5 !important }
.dhs21:focus{ border-color:#5DCAA5 !important; background:#fff !important }
.dhs22:hover{ background:#eef4fa !important }
.dhs23:hover{ transform:translateY(-2px) !important; box-shadow:0 12px 30px rgba(93,202,165,.38) !important }

/* DispoHealth blog archive controls -- topic filter + pagination.
   Appended to the live assets/css/site.css by
   scripts/apply_archive_controls_upgrade.py (idempotent -- checks for
   the marker comment below before appending again).

   Per the handoff spec's own state table for the Topics trigger, hover/
   focus recolors the hamburger bars and chevron to teal -- that state
   wasn't in the spec's own CSS snippet (which only covered
   .dh-topic-row/.dh-page), so it's added here to actually match the
   documented behavior rather than silently omitting it. */
/* === DH-ARCHIVE-CONTROLS-CSS === */

#dh-topics-trigger { transition: background .18s ease; }
#dh-topics-trigger:hover,
#dh-topics-trigger:focus-visible {
  background: #f4f8fb;
}
#dh-topics-trigger:hover .dh-topics-trigger__bar,
#dh-topics-trigger:focus-visible .dh-topics-trigger__bar {
  background: #0E9C8E;
}
#dh-topics-trigger:hover .dh-topics-trigger__chevron,
#dh-topics-trigger:focus-visible .dh-topics-trigger__chevron {
  stroke: #0E9C8E;
}
#dh-topics-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(14,156,142,.14);
}
#dh-topics-trigger.dh-topics-trigger--filtered {
  background: rgba(93,202,165,.13);
}

.dh-topic-row { transition: background .18s ease, color .18s ease; }
.dh-topic-row:hover { background: #f4f8fb; }
.dh-topic-row:hover span { color: #0E9C8E; font-weight: 600; }
.dh-topic-row:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(14,156,142,.14);
}

.dh-page { transition: border-color .18s ease, background .18s ease, color .18s ease; }
.dh-page:hover { border-color: #0E9C8E; background: #f4f8fb; color: #0E9C8E; font-weight: 700; }
.dh-page:active { background: rgba(93,202,165,.16); border-color: #0E9C8E; transform: translateY(1px); }
.dh-page:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(14,156,142,.14);
}

@media (max-width: 720px) {
  #dh-topics-panel[data-mobile-sheet="true"] {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: none !important;
    max-height: 70vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  #dh-topics-scrim {
    position: fixed;
    inset: 0;
    background: rgba(4,44,83,.42);
    z-index: 55;
  }
}