/* =========================
   PetDentify · Chicago civic resource
   Depends on: base.css, components.css, header.css
   Information-first layout: the guide reads like a reference document, and the
   product offer is a visually distinct block below it.
   ========================= */

.civic-main {
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(36px, 5vw, 64px) 20px clamp(72px, 8vw, 96px);
}

.civic-main p,
.civic-main li {
  color: #344054;
  line-height: 1.7;
}

.civic-main .eyebrow {
  margin: 0 0 8px;
  color: var(--green);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* --- Hero --- */
.civic-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(2rem, 4.4vw, 2.85rem);
  line-height: 1.15;
}

.civic-hero .lead {
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  color: #475467;
}

.civic-updated {
  margin-top: 14px;
  font-size: .86rem;
  color: #667085 !important;
}

.civic-disclaimer {
  margin-top: 24px;
  padding: 18px 20px;
  background: #fffaf0;
  border: 1px solid #f0dbb4;
  border-left: 4px solid #dc6803;
  border-radius: 12px;
}

.civic-disclaimer p {
  margin: 0;
  font-size: .9rem;
}

.civic-disclaimer p + p {
  margin-top: 8px;
}

/* --- Table of contents --- */
.civic-toc {
  margin-top: clamp(32px, 4vw, 44px);
  padding: 20px 24px;
  background: #f7fbf9;
  border: 1px solid #dceee5;
  border-radius: 14px;
}

.civic-toc h2 {
  margin: 0 0 10px;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--green);
}

.civic-toc ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.2rem;
}

.civic-toc li {
  font-size: .95rem;
}

/* --- Sections --- */
.civic-section {
  margin-top: clamp(44px, 5.5vw, 64px);
  scroll-margin-top: 90px;
}

.civic-section h2 {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e6efea;
  font-size: clamp(1.5rem, 2.8vw, 1.95rem);
  scroll-margin-top: 90px;
}

.civic-section h3 {
  margin: 28px 0 10px;
  font-size: 1.15rem;
  scroll-margin-top: 90px;
}

.civic-section h4 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.civic-steps {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding-left: 1.2rem;
}

.civic-note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e6efea;
  font-size: .9rem;
  color: #667085 !important;
}

/* --- Callouts --- */
.civic-callout {
  margin: 20px 0 0;
  padding: 16px 18px;
  background: #f4f9f7;
  border: 1px solid #dceee5;
  border-left: 4px solid var(--green);
  border-radius: 10px;
}

.civic-callout p {
  margin: 0;
  font-size: .95rem;
}

.civic-callout--warn {
  background: #fef6f5;
  border-color: #f6d4cd;
  border-left-color: #b42318;
}

.civic-callout--inline {
  display: block;
}

/* --- Fee table --- */
.civic-table-scroll {
  overflow-x: auto;
  margin-top: 16px;
  -webkit-overflow-scrolling: touch;
}

.civic-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: .95rem;
}

.civic-table caption {
  margin-bottom: 10px;
  color: #667085;
  font-size: .82rem;
  text-align: left;
}

.civic-table th,
.civic-table td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid #e6efea;
}

.civic-table thead th {
  color: #101828;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .02em;
  background: #f7fbf9;
  border-bottom: 2px solid #dceee5;
}

.civic-table tbody th {
  color: #101828;
  font-weight: 700;
}

.civic-table td {
  font-variant-numeric: tabular-nums;
}

/* --- Locations --- */
.civic-locations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.civic-location {
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e6efea;
  border-radius: 12px;
}

.civic-location address {
  font-style: normal;
  font-size: .92rem;
  color: #344054;
  line-height: 1.55;
}

.civic-hours {
  margin: 10px 0 0 !important;
  font-size: .85rem;
  color: #667085 !important;
}

/* --- Statute quote --- */
.civic-quote {
  margin: 20px 0 0;
  padding: 18px 22px;
  background: #f9fafb;
  border-left: 4px solid #98a2b3;
  border-radius: 10px;
}

.civic-quote p {
  margin: 0;
  font-size: .95rem;
  font-style: italic;
  color: #475467;
}

.civic-quote footer {
  margin-top: 10px;
  color: #667085;
  font-size: .84rem;
  font-style: normal;
}

/* --- Offer, deliberately below the civic content --- */
.civic-offer {
  margin-top: clamp(56px, 7vw, 80px);
  padding: clamp(24px, 4vw, 36px);
  background: #f0faf5;
  border: 1px solid #d5f0e2;
  border-radius: 20px;
}

.civic-offer h2 {
  margin: 0 0 12px;
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
}

.civic-offer__price {
  margin-top: 16px !important;
  font-size: 1.05rem;
}

.civic-offer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.civic-offer__note {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid #d5f0e2;
  font-size: .86rem;
  color: #667085 !important;
}

/* --- Sources --- */
.civic-sources ul {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding-left: 1.2rem;
}

.civic-sources li {
  font-size: .92rem;
}

@media (max-width: 720px) {
  .civic-locations {
    grid-template-columns: 1fr;
  }
}