/*
 * assets/css/state-guides.css
 * Shared stylesheet for all de-addiction centre licensing guide pages:
 *   - includes/state_guide_render.php  (35 state pages via shared template)
 *   - blog/how-to-open-de-addiction-centre-in-punjab.php (standalone)
 *   - any future standalone state guide pages
 *
 * All rules scoped to .sg (state guide) wrapper so nothing bleeds into
 * the rest of the dark-mode site. Load via $extraHeadHtml so it arrives
 * after style.css and wins on cascade order.
 */

/* ── Design tokens ─────────────────────────────────────────────────────── */
.sg {
  --sg-ink:        #090D16;
  --sg-paper:      #F5F2EA;
  --sg-card:       #FFFFFF;
  --sg-brand:      #17E3A6;
  --sg-green:      #0A6E51;    /* brand-deep, used for links/labels */
  --sg-line:       #E3DDCC;
  --sg-linecard:   #E5E1D8;
  --sg-dim:        #5B5F56;    /* secondary text */
  --sg-faint:      #9BA3B5;
  --sg-mint:       #E7F9F1;    /* chip/badge background */
  --sg-amber-bg:   #FBF0DC;
  --sg-amber:      #8A5A0F;    /* amber text on amber-bg */
  --sg-r:          14px;
  --sg-serif:      "Fraunces", Georgia, serif;
  --sg-sans:       "Inter", -apple-system, Segoe UI, sans-serif;
  --sg-mono:       "JetBrains Mono", ui-monospace, Menlo, monospace;

  background:  var(--sg-paper);
  color:       var(--sg-ink);
  font-family: var(--sg-sans);
}

.sg a { color: var(--sg-green); }

/* ── Breadcrumb ────────────────────────────────────────────────────────── */
.sg-crumb {
  padding: 16px 0;
  border-bottom: 1px solid var(--sg-line);
}
.sg-crumb .container {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  flex-wrap: wrap;
}
.sg-crumb a {
  color: var(--sg-dim);
  text-decoration: none;
  transition: color .2s;
}
.sg-crumb a:hover   { color: var(--sg-green); }
.sg-crumb-sep       { color: var(--sg-faint); }
.sg-crumb-current   { color: var(--sg-dim); }

/* ── Page layout ───────────────────────────────────────────────────────── */
.sg-layout {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 52px;
  align-items: start;
  padding: 40px 0 80px;
}
@media (max-width: 960px) {
  .sg-layout { grid-template-columns: 1fr; }
  .sg-sidebar { display: none; }
}
.sg-main { min-width: 0; }

/* ── Hero / header ─────────────────────────────────────────────────────── */
.sg-eyebrow {
  font-family: var(--sg-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sg-green);
  margin: 0 0 10px;
}
.sg h1 {
  font-family: var(--sg-serif);
  font-weight: 600;
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.12;
  margin: 0 0 14px;
  color: var(--sg-ink);
  letter-spacing: -.01em;
}
.sg-lede {
  color: var(--sg-dim);
  font-size: 17px;
  max-width: 64ch;
  margin: 0 0 14px;
  line-height: 1.65;
}
.sg-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--sg-dim);
  font-family: var(--sg-mono);
  margin-bottom: 24px;
}

/* ── Callout / alert box ───────────────────────────────────────────────── */
.sg-callout {
  background: var(--sg-amber-bg);
  border: 1px solid #E3CFA0;
  border-radius: var(--sg-r);
  padding: 14px 18px;
  font-size: 14px;
  margin-bottom: 28px;
  color: var(--sg-ink);
  line-height: 1.6;
}
.sg-callout b { color: var(--sg-amber); }
.sg-callout a { color: var(--sg-green); font-weight: 600; }

/* ── Table of contents ─────────────────────────────────────────────────── */
.sg-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  background: var(--sg-card);
  border: 1px solid var(--sg-linecard);
  border-radius: var(--sg-r);
  padding: 12px;
  margin-bottom: 40px;
}
.sg-toc a {
  font-size: 12px;
  font-weight: 600;
  color: var(--sg-dim);
  text-decoration: none;
  padding: 6px 11px;
  border-radius: 100px;
  border: 1px solid var(--sg-line);
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.sg-toc a:hover { color: var(--sg-green); border-color: var(--sg-green); }

/* ── Section base ──────────────────────────────────────────────────────── */
.sg-main section {
  margin-bottom: 50px;
  scroll-margin-top: 70px;
}
.sg h2 {
  font-family: var(--sg-serif);
  font-size: clamp(21px, 3vw, 27px);
  margin: 0 0 14px;
  color: var(--sg-ink);
}
.sg h3 {
  font-size: 15.5px;
  font-weight: 700;
  margin: 20px 0 8px;
  color: var(--sg-ink);
}
.sg h4 {
  font-family: var(--sg-serif);
  font-size: 16px;
  margin: 0 0 7px;
  color: var(--sg-ink);
}
.sg p  { margin: 0 0 12px; color: var(--sg-ink); line-height: 1.7; }
.sg ul,
.sg ol { margin: 0 0 12px; padding-left: 22px; }
.sg li { margin-bottom: 5px; color: var(--sg-ink); line-height: 1.65; }

/* ── Quick-facts card ──────────────────────────────────────────────────── */
.sg-factcard {
  background: var(--sg-card);
  border: 1px solid var(--sg-linecard);
  border-radius: var(--sg-r);
  overflow: hidden;
}
.sg-fact {
  display: flex;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--sg-linecard);
  font-size: 13.5px;
}
.sg-fact:last-child { border-bottom: none; }
.sg-fk {
  font-family: var(--sg-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  color: var(--sg-green);
  min-width: 155px;
  font-weight: 600;
  padding-top: 2px;
  flex-shrink: 0;
}

/* ── Two-column law/info cards ─────────────────────────────────────────── */
.sg-twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 18px 0;
}
@media (max-width: 680px) { .sg-twocol { grid-template-columns: 1fr; } }

.sg-card {
  background: var(--sg-card);
  border: 1px solid var(--sg-linecard);
  border-radius: var(--sg-r);
  padding: 18px 20px;
}
.sg-card h4 { margin-bottom: 8px; }
.sg-card p  { font-size: 13.5px; color: var(--sg-dim); margin: 0; line-height: 1.6; }

/* ── Category comparison table ─────────────────────────────────────────── */
.sg-cattable {
  border: 1px solid var(--sg-linecard);
  border-radius: var(--sg-r);
  overflow: hidden;
  margin: 18px 0;
}
.sg-cathead,
.sg-catrow {
  display: grid;
  grid-template-columns: 60px 1fr 1.6fr 1fr;
  border-bottom: 1px solid var(--sg-linecard);
}
.sg-catrow:last-child { border-bottom: none; }
.sg-cathead > span,
.sg-catrow  > span {
  padding: 11px 13px;
  font-size: 13px;
  color: var(--sg-ink);
  border-right: 1px solid var(--sg-linecard);
}
.sg-cathead > span:last-child,
.sg-catrow  > span:last-child { border-right: none; }
.sg-cathead {
  background: var(--sg-mint);
  font-family: var(--sg-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  font-weight: 600;
}
.sg-cathead > span { color: var(--sg-green); }
.sg-catnum {
  font-family: var(--sg-mono);
  font-weight: 700;
  font-size: 18px;
  color: var(--sg-green);
  background: var(--sg-mint);
}
@media (max-width: 680px) {
  .sg-cathead,
  .sg-catrow { grid-template-columns: 50px 1fr; }
  .sg-cathead > span:nth-child(3),
  .sg-cathead > span:nth-child(4),
  .sg-catrow  > span:nth-child(3),
  .sg-catrow  > span:nth-child(4) { display: none; }
}

/* ── Tag / badge chip ──────────────────────────────────────────────────── */
.sg-tag {
  font-family: var(--sg-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--sg-green);
  background: var(--sg-mint);
  padding: 3px 8px;
  border-radius: 100px;
  display: inline-block;
  margin-bottom: 8px;
}

/* ── Four-card grid (staff norms, type cards) ──────────────────────────── */
.sg-grid4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 18px 0;
}
@media (max-width: 620px) { .sg-grid4 { grid-template-columns: 1fr; } }

.sg-grid4-card {
  background: var(--sg-card);
  border: 1px solid var(--sg-linecard);
  border-radius: var(--sg-r);
  padding: 16px 18px;
}
.sg-grid4-card h4 { margin: 0 0 8px; }
.sg-grid4-card ul { margin: 0; padding-left: 18px; }
.sg-grid4-card li { font-size: 13px; color: var(--sg-dim); }
.sg-grid4-card p  { font-size: 13px; color: var(--sg-dim); margin: 0; }

/* ── Record-keeping card grid ──────────────────────────────────────────── */
.sg-recgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0;
}
@media (max-width: 620px) { .sg-recgrid { grid-template-columns: 1fr; } }

.sg-reccard {
  background: var(--sg-card);
  border: 1px solid var(--sg-linecard);
  border-radius: 12px;
  padding: 14px 16px;
}
.sg-reccard h4 { font-family: var(--sg-serif); font-size: 14.5px; margin: 0 0 5px; }
.sg-reccard p  { font-size: 12.5px; color: var(--sg-dim); margin: 0; line-height: 1.55; }

/* ── Numbered step list ────────────────────────────────────────────────── */
.sg-steps {
  counter-reset: sg-step;
  list-style: none;
  padding: 0;
  margin: 18px 0;
}
.sg-steps li {
  counter-increment: sg-step;
  position: relative;
  background: var(--sg-card);
  border: 1px solid var(--sg-linecard);
  border-radius: var(--sg-r);
  padding: 14px 18px 14px 52px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.65;
}
.sg-steps li::before {
  content: counter(sg-step);
  position: absolute;
  left: 14px;
  top: 14px;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--sg-ink);
  color: var(--sg-brand);
  font-family: var(--sg-mono);
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sg-steps b {
  display: block;
  margin-bottom: 3px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--sg-ink);
}

/* ── Official links grid ───────────────────────────────────────────────── */
.sg-linkgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 18px 0;
}
@media (max-width: 620px) { .sg-linkgrid { grid-template-columns: 1fr; } }

.sg-linkgroup {
  background: var(--sg-card);
  border: 1px solid var(--sg-linecard);
  border-radius: var(--sg-r);
  padding: 16px 18px;
}
.sg-linkgroup h4 { font-family: var(--sg-serif); font-size: 15px; margin: 0 0 10px; }
.sg-linkgroup a  {
  display: block;
  font-size: 13px;
  margin-bottom: 8px;
  text-decoration: none;
  color: var(--sg-green);
  line-height: 1.4;
}
.sg-linkgroup a:hover { text-decoration: underline; }
.sg-domain {
  color: var(--sg-dim);
  font-family: var(--sg-mono);
  font-size: 10.5px;
  display: block;
  margin-top: 1px;
}

/* ── FAQ accordion ─────────────────────────────────────────────────────── */
.sg-faq {
  background: var(--sg-card);
  border: 1px solid var(--sg-linecard);
  border-radius: var(--sg-r);
  padding: 4px 18px;
  margin-bottom: 8px;
}
.sg-faq summary {
  padding: 13px 0;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  color: var(--sg-ink);
  line-height: 1.45;
}
.sg-faq p {
  font-size: 13.5px;
  color: var(--sg-dim);
  padding-bottom: 13px;
  margin: 0;
  line-height: 1.65;
}

/* ── Sources list ──────────────────────────────────────────────────────── */
.sg-sources { font-size: 13px; color: var(--sg-dim); }
.sg-sources li { margin-bottom: 6px; }

/* ── Disclaimer ────────────────────────────────────────────────────────── */
.sg-disclaimer {
  font-size: 12.5px;
  color: var(--sg-dim);
  border-top: 1px dashed var(--sg-line);
  padding-top: 14px;
  margin-top: 8px;
  line-height: 1.65;
}

/* ── CTA band (inline, full-width) ────────────────────────────────────── */
.sg-cta-band {
  background: var(--sg-ink);
  color: #fff;
  border-radius: 16px;
  padding: 26px 24px;
  margin: 44px 0;
}
.sg-cta-band h3 {
  color: #fff;
  font-family: var(--sg-serif);
  font-size: 20px;
  margin: 0 0 8px;
}
.sg-cta-band p  { color: #C9CFD9; font-size: 14px; margin: 0 0 16px; }
.sg-cta-band a  {
  display: inline-block;
  background: var(--sg-brand);
  color: var(--sg-ink);
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 13.5px;
}

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.sg-sidebar { position: sticky; top: 90px; }

.sg-scard {
  background: var(--sg-card);
  border: 1px solid var(--sg-linecard);
  border-radius: var(--sg-r);
  padding: 18px;
  margin-bottom: 16px;
}
.sg-scard:last-child { margin-bottom: 0; }

.sg-scard-cta {
  background: linear-gradient(135deg, var(--sg-mint), #F0FBF7);
  border-color: rgba(10,110,81,.2);
}
.sg-scard-cta p {
  font-size: 13px;
  color: var(--sg-dim);
  margin: 8px 0 16px;
  line-height: 1.55;
}

.sg-sheading {
  font-family: var(--sg-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sg-dim);
  font-weight: 600;
  display: block;
  margin-bottom: 12px;
}

.sg-slink {
  display: block;
  font-size: 13.5px;
  color: var(--sg-green);
  padding: 8px 0;
  border-bottom: 1px solid var(--sg-linecard);
  text-decoration: none;
  transition: color .15s;
}
.sg-slink:last-child { border-bottom: none; }
.sg-slink:hover { color: var(--sg-ink); }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.sg-btn {
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 13.5px;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
  border: none;
}
.sg-btn:last-child { margin-bottom: 0; }
.sg-btn-primary { background: var(--sg-ink); color: #fff; }
.sg-btn-primary:hover { background: var(--sg-green); }
.sg-btn-ghost {
  background: transparent;
  color: var(--sg-ink);
  border: 1px solid var(--sg-linecard);
}
.sg-btn-ghost:hover { border-color: var(--sg-green); color: var(--sg-green); }

/* ── National framework cards (shared template) ────────────────────────── */
.sg-lawgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 18px 0;
}
.sg-lawcard {
  background: var(--sg-card);
  border: 1px solid var(--sg-linecard);
  border-radius: var(--sg-r);
  padding: 18px 20px;
}
.sg-lawcard h4 { font-family: var(--sg-serif); font-size: 16.5px; margin: 0 0 7px; }
.sg-lawcard p  { font-size: 14px; color: var(--sg-dim); margin: 0; line-height: 1.6; }

/* ── Types of centres grid (shared template) ───────────────────────────── */
.sg-typegrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0;
}
@media (max-width: 620px) { .sg-typegrid { grid-template-columns: 1fr; } }

.sg-typecard {
  background: var(--sg-card);
  border: 1px solid var(--sg-linecard);
  border-radius: var(--sg-r);
  padding: 16px 18px;
}
.sg-typecard h4 { font-family: var(--sg-serif); font-size: 15px; margin: 0 0 5px; }
.sg-typecard p  { font-size: 13px; color: var(--sg-dim); margin: 0; line-height: 1.55; }