/*
 * ps-opioids-style.css
 * Page-specific styles for the Opioid Settlement Funds & Community Response page.
 *
 * Requires main-style.css to be loaded FIRST (shared tokens + base hero,
 * section, sub-nav, panel and disclaimer rules), which itself sits on top of
 * the City framework (mv-main.css / mv-style.css).
 * Modeled on departments/public_works/transportation/css/ebikes.css.
 *
 * Contents:
 *   1. Page tokens (:root)        4. Page-specific layout (.ps-*)
 *   2. Hero variant               5. Responsive adjustments
 *   3. Section backgrounds
 */

/* ==========================================================================
   1. PAGE TOKENS  (with fallbacks to brand tokens)
   ========================================================================== */
:root {
  --ps-blue:    var(--brand-blue, #1a3a6b);
  --ps-orange:  var(--vims-accent, #f5a800);
  --ps-teal:    #0f6e74;
  --ps-red:     #b3261e;
  --ps-surface: var(--neutral-gray-light, #f1f1f2);
  --ps-text:    var(--neutral-gray-dark, #4d515f);
  --ps-radius:  10px;

  /* sub-nav colors used by main-style.css */
  --alert-blue:        var(--brand-blue, #2e5a93);
  --alert-red:         var(--ps-red);
  --alert-text-muted:  var(--ps-text);
  --alert-transition:  0.2s ease;
}


/* ==========================================================================
   2. HERO VARIANT  (overrides the base hero from main-style.css)
   ========================================================================== */
.hero--ps { min-height: 400px; }

.hero-bg--ps {
  background-image: url("../img/opiod-banner2.jpg");
  background-position: center;
}

.hero-overlay {
  clip-path: polygon(0% 0%, 0% 100%, 60% 100%, 45% 0%);
}


/* ==========================================================================
   3. SECTION BACKGROUNDS
   ========================================================================== */
.ps-section-dark {
  background-image: linear-gradient(to bottom, rgba(14, 30, 70, 0.82), rgba(14, 30, 70, 0.94)),
    url("../img/opiod-banner.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* Offset for the sticky sub-nav so anchored sections aren't hidden behind it */
main section[id] { scroll-margin-top: 90px; }


/* ==========================================================================
   4. PAGE-SPECIFIC LAYOUT
   ========================================================================== */

/* ---------- Responsive grid ---------- */
.ps-grid { display: grid; gap: 1.6rem; }
.ps-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ps-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ps-grid--auto { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ps-grid.pad-top { margin-top: 1.5rem; }

.ps-lead { max-width: 820px; }
.ps-body p { font-size: 1.7rem; line-height: 1.7; color: var(--ps-text); }

/* ---------- Inline links ---------- */
.ps-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-display, sans-serif);
  font-weight: 700; font-size: 1.4rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ps-blue);
  text-decoration: none; margin-top: 0.6rem;
  transition: gap 0.2s ease, color 0.2s ease;
}
.ps-link:hover { gap: 0.7rem; color: var(--ps-orange); text-decoration: none; }
.ps-link-row { display: flex; flex-wrap: wrap; gap: 0.4rem 2rem; }

/* ---------- Key figures ---------- */
.ps-stats {
  background: var(--ps-blue);
  border-radius: var(--ps-radius);
  box-shadow: var(--vims-shadow-md, 0 6px 20px rgba(0,0,0,0.13));
  border-top: 4px solid var(--ps-orange);
  padding: 1.8rem 1.8rem 2rem;
  color: #fff;
  display: flex; flex-direction: column; gap: 1.4rem;
}
.ps-stat { border-bottom: 1px solid rgba(255,255,255,0.18); padding-bottom: 1.2rem; }
.ps-stat:last-child { border-bottom: none; padding-bottom: 0; }
.ps-stat-num {
  display: block;
  font-family: var(--font-display, sans-serif);
  font-size: 4.2rem; font-weight: 700; line-height: 1;
  color: var(--ps-orange);
}
.ps-stat-label { display: block; font-size: 1.5rem; line-height: 1.5; margin-top: 0.4rem; color: rgba(255,255,255,0.92); }

/* ---------- Use cards (dark section) ---------- */
.ps-use-card {
  background: var(--vims-white, #fff);
  border-radius: var(--ps-radius);
  box-shadow: var(--vims-shadow-sm, 0 2px 8px rgba(0,0,0,0.08));
  padding: 1.6rem 1.5rem;
  display: flex; gap: 1.1rem; align-items: flex-start;
}
.ps-use-icon {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  background: rgba(26,58,107,0.10); color: var(--ps-blue);
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
}
.ps-use-card h3 {
  font-family: var(--font-display, sans-serif);
  font-size: 1.9rem; font-weight: 700; color: var(--ps-blue);
  margin: 0.2rem 0 0; line-height: 1.25;
}

/* ---------- Two-pronged approach ---------- */
.ps-prong {
  background: var(--ps-surface);
  border-radius: var(--ps-radius);
  border-left: 5px solid var(--ps-orange);
  padding: 1.8rem 1.8rem 1.8rem 1.6rem;
  display: flex; gap: 1.4rem; align-items: flex-start;
}
.ps-prong-num {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: var(--ps-blue); color: #fff;
  font-family: var(--font-display, sans-serif);
  font-size: 2.8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ps-prong h3 {
  font-family: var(--font-display, sans-serif);
  font-size: 2.1rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--ps-blue); margin: 0 0 0.5rem;
}
.ps-prong p { font-size: 1.6rem; line-height: 1.6; color: var(--ps-text); margin: 0; }

/* ---------- Find-treatment callout (full-width band under the sub-nav) ---------- */
.ps-help-band {
  padding: 2.2rem 0;
  background: #fbf6e7;
  border-bottom: 4px solid var(--ps-orange);
}
.ps-help-callout {
  display: flex; align-items: center; justify-content: center;
  gap: 1.6rem 2rem; flex-wrap: wrap; width: 100%;
}
.ps-help-callout-icon {
  width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0;
  background: var(--ps-orange); color: var(--ps-blue);
  display: flex; align-items: center; justify-content: center; font-size: 2.4rem;
}
.ps-help-callout-text { flex: 0 1 auto; }
.ps-help-callout-text h2 {
  font-family: var(--font-display, sans-serif);
  font-size: 2.8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--ps-blue); margin: 0 0 0.3rem; line-height: 1.1;
}
.ps-help-callout-text p { font-size: 1.7rem; line-height: 1.5; color: var(--ps-text); margin: 0; }
.ps-help-callout .btn { margin: 0; white-space: nowrap; }

/* ---------- Mobile crisis ---------- */
.ps-team { list-style: none; margin: 1.4rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.8rem; }
.ps-team li {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: #fff; color: var(--ps-blue);
  border: 1px solid rgba(26,58,107,0.18); border-radius: 999px;
  padding: 0.5rem 1.1rem; font-size: 1.4rem; font-weight: 700;
}
.ps-team li i { color: var(--ps-teal); }
.ps-crisis-card {
  background: #fff;
  border-radius: var(--ps-radius);
  border-top: 4px solid var(--ps-teal);
  box-shadow: var(--vims-shadow-md, 0 6px 20px rgba(0,0,0,0.13));
  padding: 1.8rem;
  display: flex; flex-direction: column; gap: 0.8rem;
  align-self: start;
}
.ps-crisis-card img { max-width: 100%; height: auto; align-self: flex-start; }
.ps-crisis-card h3 {
  font-family: var(--font-display, sans-serif);
  font-size: 2rem; font-weight: 700; text-transform: uppercase;
  color: var(--ps-blue); margin: 0.4rem 0 0;
}
.ps-crisis-card p { font-size: 1.5rem; line-height: 1.6; color: var(--ps-text); margin: 0; }

/* ---------- Prevention callouts ---------- */
.ps-callout {
  border-radius: var(--ps-radius); padding: 1.6rem 1.5rem;
  border-top: 5px solid var(--ps-blue);
  background: var(--vims-white, #fff);
  box-shadow: var(--vims-shadow-sm, 0 2px 8px rgba(0,0,0,0.08));
}
.ps-callout:nth-child(even) { border-top-color: var(--ps-orange); }
.ps-callout-icon { font-size: 2.2rem; margin-bottom: 0.5rem; color: var(--ps-blue); }
.ps-callout-title {
  font-family: var(--font-display, sans-serif);
  font-size: 1.9rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em; color: var(--ps-blue); margin: 0 0 0.5rem;
}
.ps-callout p { font-size: 1.5rem; line-height: 1.6; color: var(--ps-text); margin: 0; }
.ps-note {
  margin-top: 2.4rem; padding: 1.6rem 1.8rem;
  background: var(--ps-surface); border-radius: var(--ps-radius);
  font-size: 1.7rem; line-height: 1.7; color: var(--ps-text);
}

/* ---------- Document panels ---------- */
.ps-doc-group + .ps-doc-group { margin-top: 1.4rem; }
.ps-doc-group h3 {
  font-family: var(--font-display, sans-serif);
  font-size: 1.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--ps-blue); margin: 0 0 0.6rem;
}
.ps-doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.ps-doc-list li {
  position: relative; padding-left: 2.4rem;
  font-size: 1.5rem; line-height: 1.5; color: var(--ps-text);
}
.ps-doc-list li i { position: absolute; left: 0; top: 0.3rem; width: 1.6rem; text-align: center; color: var(--ps-blue); }
.ps-doc-list li i.fa-file-pdf { color: var(--ps-red); }
.ps-doc-list a { color: var(--ps-blue); font-weight: 700; }
.ps-doc-list a:hover { color: var(--ps-orange); }
.ps-doc-list--cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.55rem 1.4rem; }
.ps-doc-sub { margin-top: 0.55rem !important; }

/* ---------- Contact band ---------- */
.ps-contact-row { align-items: flex-start; gap: 2.4rem; }
.ps-contact-row p { font-size: 1.7rem; line-height: 1.7; color: rgba(255,255,255,0.9); }
.ps-contact-row a:not(.btn) { color: var(--ps-orange); }
.ps-help-list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.ps-help-list li {
  font-size: 1.6rem; line-height: 1.6; color: rgba(255,255,255,0.9);
  padding-left: 2.2rem; position: relative;
}
.ps-help-list li i { position: absolute; left: 0; top: 0.4rem; color: var(--ps-orange); }
.ps-help-list a { color: var(--ps-orange); font-weight: 700; }


/* ==========================================================================
   5. RESPONSIVE ADJUSTMENTS
   ========================================================================== */
@media (max-width: 900px) {
  .ps-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .ps-grid--2 { grid-template-columns: 1fr; }
  .ps-contact-row > div { width: 100%; margin-left: 0; }

  /* comfortable side gutter on phones (framework container is only 5px) */
  main .container, .hero .container { padding-left: 16px; padding-right: 16px; }
  .hero-content { padding-left: 0; }

  /* drop the diagonal clip so the gradient covers the whole hero on small screens */
  .hero--ps .hero-overlay {
    clip-path: none;
    background: linear-gradient(to bottom, rgba(14, 30, 70, 0.65), rgba(14, 30, 70, 0.95));
  }
}
@media (max-width: 670px) {
  .ps-grid--3, .ps-grid--auto { grid-template-columns: 1fr; }
  .ps-doc-list--cols { grid-template-columns: 1fr; }
}