/* ============================================================
   plan.css  —  2026-2030 Strategic Plan · Priority Areas
   Scoped styles for the tabbed Priority Areas block on
   mission-values-goals.php. Loaded after Bootstrap.
   Palette: MTCC navy #1A2448 · green #648534 (matches planner.css)

   Progressive enhancement:
     · No JS  -> the four panes render stacked, all visible, and the
                 tab strip is hidden (nothing is ever unreachable).
     · plan.js adds .is-enhanced -> panes collapse into an accessible,
                 keyboard-navigable tabset.
   ============================================================ */
:root {
  --sp-navy:    #1A2448;
  --sp-green:   #648534;
  --sp-green-d: #4d6427;
  --sp-ink:     #33384a;
  --sp-line:    rgba(26, 36, 72, 0.14);
}

.sp-tabs { max-width: 1080px; margin: 2.5rem 0 0; }

.sp-tabs > h2 {
  color: var(--sp-navy);
  font-weight: 800;
  margin-bottom: 0.6rem;
}
.sp-intro {
  color: #40465c;
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 70ch;
}
.sp-intro a { color: var(--sp-green-d); font-weight: 600; }
.sp-intro a:hover { color: var(--sp-green); }

/* ---------- Tab strip (revealed only once JS enhances) ---------- */
.sp-tablist { display: none; }                       /* no-JS: hidden */
.sp-tabs.is-enhanced .sp-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-end;
  margin-top: 1.5rem;
}
.sp-tab {
  --sptab: var(--sp-green);                           /* per-tab colour, set inline */
  flex: 1 1 0;
  min-width: 120px;
  border: none;
  cursor: pointer;
  font: 700 1rem/1.15 inherit;
  color: var(--sp-navy);
  background: #eef0f4;
  padding: 0.8rem 1rem;
  border-top: 4px solid var(--sptab);
  border-radius: 10px 10px 0 0;
  position: relative;
  top: 4px;
  text-align: center;
  transition: background 0.15s, top 0.15s, box-shadow 0.15s;
}
.sp-tab:hover { background: #e5e8ee; top: 2px; }
.sp-tab:focus-visible { outline: 3px solid rgba(100, 133, 52, 0.5); outline-offset: 2px; }
.sp-tab.active {
  background: #fff;
  top: 0;
  z-index: 5;
  margin-bottom: -1px;                                /* merge into the body panel */
  box-shadow: 0 -6px 14px rgba(26, 36, 72, 0.08);
}

/* ---------- Body panel + panes ---------- */
.sp-body {
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(26, 36, 72, 0.08);
  padding: 2rem 2.25rem 2.4rem;
}
.sp-tabs.is-enhanced .sp-body { border-radius: 0 12px 12px 12px; }

.sp-pane { display: block; }                          /* no-JS: stacked, all shown */
.sp-tabs.is-enhanced .sp-pane { display: none; }
.sp-tabs.is-enhanced .sp-pane.active { display: block; animation: spIn 0.28s ease; }
@keyframes spIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
/* Separators between the stacked panes when JS is off */
.sp-tabs:not(.is-enhanced) .sp-pane + .sp-pane {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 2px solid var(--sp-line);
}

/* ---------- Area header: bold name + italic tagline ---------- */
.sp-area-name {
  color: var(--sp-navy);
  font-weight: 800;
  font-size: 1.6rem;
  margin: 0;
  display: inline-block;
  padding-bottom: 0.25rem;
  border-bottom: 3px solid var(--sp-green);
}
.sp-area-tagline {
  color: var(--sp-green-d);
  font-style: italic;
  font-size: 1.05rem;
  margin: 0.6rem 0 1.4rem;
}

/* ---------- Goal statement callout ---------- */
.sp-goal {
  background: var(--sp-navy);
  color: #fff;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.6rem;
}
.sp-goal .sp-k {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  font-weight: 800;
  color: #a9d18e;
  margin-bottom: 0.4rem;
}
.sp-goal p { margin: 0; line-height: 1.6; font-size: 1.05rem; }

/* ---------- Two columns: focus areas + success measures ---------- */
.sp-cols { display: grid; grid-template-columns: 1fr; gap: 1.6rem; }
@media (min-width: 768px) { .sp-cols { grid-template-columns: 1fr 1fr; } }
.sp-col h4 {
  color: var(--sp-navy);
  font-weight: 800;
  font-size: 1.1rem;
  margin: 0 0 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sp-col h4 i { color: var(--sp-green); }
.sp-list { list-style: none; margin: 0; padding: 0; }
.sp-list li {
  position: relative;
  padding: 0.3rem 0 0.3rem 1.6rem;
  line-height: 1.5;
  color: var(--sp-ink);
}
.sp-list li::before {
  content: "\2713";                                   /* check */
  position: absolute;
  left: 0;
  top: 0.32rem;
  color: var(--sp-green);
  font-weight: 800;
}
.sp-list.sp-measures li::before { content: "\2191"; } /* up-arrow: targets to raise */

/* ---------- PDF download ---------- */
.sp-download { margin-top: 1.8rem; }
.sp-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--sp-green);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 0.8rem 1.6rem;
  border-radius: 9px;
  transition: background 0.15s, transform 0.15s;
}
.sp-pdf-btn:hover { background: var(--sp-green-d); color: #fff; transform: translateY(-1px); }
.sp-pdf-btn:link, .sp-pdf-btn:visited { color: #fff; }
.sp-pdf-btn i { font-size: 1.25rem; }
.sp-pdf-note { display: block; color: #5a6072; font-size: 0.85rem; margin-top: 0.5rem; }

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .sp-body { padding: 1.4rem 1.25rem 1.6rem; }
  .sp-tab { flex: 1 1 auto; font-size: 0.85rem; padding: 0.6rem 0.5rem; min-width: 0; }
  .sp-area-name { font-size: 1.35rem; }
}