/*
 * Florida Pool Owner Alerts — single alert page + /pool-owner-alerts/
 * archive. Loaded only on those two templates (see functions.php).
 * Reuses site.css design tokens (--navy, --blue, --line, --r, --sh, etc.)
 * and the existing .cfpg-page-hero / .cfpg-wrap / .cfpg-authority /
 * .cfpg-pagination / .cfpg-btn components — this file only adds what's
 * genuinely new: severity badges, alert detail blocks, and the archive
 * filter form + list rows.
 */

/* ── Severity badges (shared by single + archive) ────────────── */

.cfpg-alert-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; }

.cfpg-alert-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.cfpg-alert-badge--urgent    { color: #C0392B; background: #FDEDEC; border-color: rgba(192,57,43,.25); }
.cfpg-alert-badge--important { color: #B45309; background: #FEF3E2; border-color: rgba(180,83,9,.25); }
.cfpg-alert-badge--watch     { color: var(--navy); background: var(--ltblue); border-color: rgba(13,35,72,.15); }

.cfpg-alert-status {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--muted);
  background: #F1F5F9;
}

.cfpg-alert-status--resolved { color: var(--teal); background: #EAF7F0; }

/* ── Single alert page ───────────────────────────────────────── */

.cfpg-alert-hero .cfpg-wrap { max-width: 760px; }

.cfpg-alert-detail .cfpg-alert-block {
  margin: 0 0 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.cfpg-alert-detail .cfpg-alert-block:last-of-type { border-bottom: 0; }

.cfpg-alert-detail .cfpg-alert-block h2 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 10px;
}

.cfpg-alert-detail .cfpg-alert-block p { margin: 0; line-height: 1.65; color: var(--body); }

.cfpg-alert-block--action {
  background: #F8FBFF;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: var(--r-lg);
  padding: 20px 22px 22px;
}

.cfpg-alert-block--action h2 { color: var(--blue); }

.cfpg-alert-block--cta { border-bottom: 0; text-align: center; }

.cfpg-alert-block--cta .cfpg-btn { min-height: 44px; }

.cfpg-alert-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 4px 0 20px;
  font-size: 13px;
  color: var(--muted);
}

.cfpg-alert-disclaimer {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  background: var(--sand);
  border-radius: var(--r);
  padding: 14px 16px;
  margin: 0;
}

/* ── Archive: filter form ────────────────────────────────────── */

.cfpg-alert-archive .cfpg-page-hero__sub { max-width: 640px; margin-inline: auto; }

.cfpg-alert-filters {
  background: #F8FBFF;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin-bottom: 32px;
}

.cfpg-alert-filters__row { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; }

.cfpg-alert-filters label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--navy);
  flex: 1;
  min-width: 180px;
}

.cfpg-alert-filters select,
.cfpg-alert-filters input[type=search] {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 400;
  color: var(--body);
  background: #fff;
}

.cfpg-alert-filters .cfpg-btn { min-height: 44px; flex: 0 0 auto; }

.cfpg-alert-filters__reset {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  align-self: center;
}

/* ── Archive: section headings + list rows ───────────────────── */

.cfpg-alert-archive__heading {
  font-family: var(--head);
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 16px;
}

.cfpg-alert-archive__heading--resolved { margin-top: 40px; color: var(--muted); }

.cfpg-alert-list { display: flex; flex-direction: column; gap: 12px; }

.cfpg-alert-row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--sh);
  text-decoration: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.cfpg-alert-row:hover,
.cfpg-alert-row:focus-visible { box-shadow: var(--sh-md); border-color: var(--blue); }

.cfpg-alert-row--urgent    { border-left: 4px solid #C0392B; }
.cfpg-alert-row--important { border-left: 4px solid #B45309; }
.cfpg-alert-row--watch     { border-left: 4px solid var(--navy); }
.cfpg-alert-row--resolved  { opacity: .78; }

.cfpg-alert-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.cfpg-alert-row__title { font-weight: 700; color: var(--navy); font-size: 15px; line-height: 1.4; }

.cfpg-alert-row__product { font-size: 13px; color: var(--muted); }

.cfpg-alert-row__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); }

.cfpg-alert-row__resolved-tag { font-weight: 700; color: var(--teal); }

.cfpg-alert-row__arrow { flex: 0 0 auto; color: var(--muted); }

.cfpg-alert-empty { color: var(--muted); text-align: center; padding: 40px 0; }

/* ── Hero: subheading + dynamic verification line ────────────────
 * (Recall & Safety Hub extension, 2026-07-17) */

.cfpg-alert-hero-section__subheading {
  font-family: var(--head);
  font-size: 17px;
  font-weight: 700;
  color: var(--blue);
  margin: 6px 0 10px;
}

.cfpg-alert-hero-section__verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px auto 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: #EAF7F0;
  color: var(--teal);
  font-size: 13px;
  font-weight: 700;
}

/* ── Quick-filter chip row ────────────────────────────────────── */

.cfpg-alert-quickfilters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 18px;
  -webkit-overflow-scrolling: touch;
}

.cfpg-alert-quickfilters__item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.cfpg-alert-quickfilters__item:hover { border-color: var(--blue); color: var(--blue); }

.cfpg-alert-quickfilters__item:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.cfpg-alert-quickfilters__item--current {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* ── Hub layout: 4 grid items, one render each (v4.84.1) ──────────
 * .cfpg-alert-hub-layout__main-top (priority alerts), __action (the
 * ONE render of the homeowner-action panel — absent from the DOM
 * entirely when there's no high-priority recall, rather than hidden),
 * __main-bottom (everything else in the main column), and
 * __sidebar-rest (trust panel, Water Watcher, CPSC report link) are
 * siblings in that exact source order.
 *
 * Mobile (default): single column, `grid-template-columns: 1fr` with
 * every item reset to column 1 — the 4 items simply stack in source
 * order, which already reads correctly (priority alerts, then the
 * action panel early, then the rest, then the sidebar content at the
 * bottom) with zero extra markup or duplicate rendering.
 *
 * Desktop (≥960px): 2 columns. main-top and main-bottom both sit in
 * column 1 (their two auto-placed rows read as one continuous column
 * since there's nothing else in column 1 between them); action and
 * sidebar-rest both sit in column 2, auto-placed into consecutive rows
 * in the same source order, which visually reproduces "action panel
 * at the top of the sidebar, trust/watcher/report below it" without
 * ever rendering the action panel a second time. Sidebar content
 * (action + sidebar-rest combined) must never run longer or read more
 * dominant than the actual alert list in column 1. */

.cfpg-alert-hub-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px 32px;
  align-items: start;
}

.cfpg-alert-hub-layout__main-top,
.cfpg-alert-hub-layout__main-bottom,
.cfpg-alert-hub-layout__action { grid-column: 1; }

.cfpg-alert-hub-layout__sidebar-rest {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 960px) {
  .cfpg-alert-hub-layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .cfpg-alert-hub-layout__main-top,
  .cfpg-alert-hub-layout__main-bottom { grid-column: 1; }
  .cfpg-alert-hub-layout__action,
  .cfpg-alert-hub-layout__sidebar-rest { grid-column: 2; }
}

/* ── Reusable sidebar/inline panels ──────────────────────────────
 * (homeowner action, CFPG trust policy, Water Watcher, CPSC report) */

.cfpg-alert-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
  padding: 20px 22px;
}

.cfpg-alert-panel h2 {
  font-family: var(--head);
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 12px;
}

.cfpg-alert-panel p { margin: 0; line-height: 1.6; color: var(--body); font-size: 14px; }

.cfpg-alert-panel--action {
  border-left: 4px solid var(--blue);
  background: #F8FBFF;
}

.cfpg-alert-panel__steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--body);
}

.cfpg-alert-panel--trust {
  border-left: 4px solid var(--teal);
}

.cfpg-alert-panel__policy {
  margin: 0 0 14px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--body);
}

.cfpg-alert-panel__disclaimer {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  background: var(--sand);
  border-radius: var(--r);
  padding: 12px 14px;
  margin: 0;
}

.cfpg-alert-panel--watcher {
  border-left: 4px solid var(--gold);
  background: #FFFBF0;
}

.cfpg-alert-panel--report .cfpg-btn {
  margin-top: 14px;
  width: 100%;
  justify-content: center;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}

/* ── Category-navigation cards ────────────────────────────────── */

.cfpg-alert-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 32px;
}

@media (min-width: 640px) {
  .cfpg-alert-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .cfpg-alert-categories { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.cfpg-alert-category-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 44px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--sh);
  text-decoration: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.cfpg-alert-category-card:hover,
.cfpg-alert-category-card:focus-visible {
  border-color: var(--blue);
  box-shadow: var(--sh-md);
}

.cfpg-alert-category-card__icon { color: var(--blue); }

.cfpg-alert-category-card__name {
  font-weight: 700;
  color: var(--navy);
  font-size: 14px;
  line-height: 1.35;
}

.cfpg-alert-category-card__count { font-size: 12.5px; color: var(--muted); }

.cfpg-alert-category-card__arrow { margin-top: auto; color: var(--muted); align-self: flex-end; }

.cfpg-alert-archive__heading--priority { color: #C0392B; }

.cfpg-alert-archive__heading--categories { margin-top: 40px; }

/* ── Affiliate-conflict note (public, neutral wording) ───────────── */

.cfpg-alert-affiliate-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 24px;
  padding: 14px 16px;
  border: 1px solid rgba(180,83,9,.25);
  border-radius: var(--r-lg);
  background: #FEF3E2;
  color: #92400E;
  font-size: 13.5px;
  line-height: 1.55;
}

/* ── Mobile ───────────────────────────────────────────────────── */

@media (max-width: 680px) {
  .cfpg-alert-filters__row { flex-direction: column; align-items: stretch; }
  .cfpg-alert-filters label { min-width: 0; }
  .cfpg-alert-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    row-gap: 8px;
  }
  .cfpg-alert-row > .cfpg-alert-badge { grid-column: 1 / -1; justify-self: start; }
  .cfpg-alert-row__body { grid-column: 1; }
  .cfpg-alert-row__arrow { grid-column: 2; align-self: center; }
  .cfpg-alert-badges { justify-content: flex-start; }
}