/* ============================================================================
 * Areas We Serve — archive skin  (/areas-we-serve/)
 *
 * Re-skins the cosmick-areas-served plugin's `service_area` archive to match
 * the Petland theme instead of the plugin's neutral grey defaults:
 *   - Recolors the plugin chrome (hero, guarantee banner, accents) to Petland's
 *     terracotta by overriding the plugin's own --cas-* tokens. Scoped to
 *     `body.post-type-archive-service_area`, whose specificity (0,1,1) beats the
 *     plugin's :root / inline :root, so it wins regardless of load order.
 *   - Restyles the plain Bootstrap area cards into the same visual language as
 *     the puppy product cards (soft shadow, hover lift, rounded corners).
 *   - The plugin template uses Font Awesome icons, which this theme doesn't load
 *     (they render at 0 width), so we hide them and supply inline-SVG icons.
 *
 * Everything is scoped under the archive body class so nothing leaks elsewhere.
 * ========================================================================== */

/* 1 ─── Recolor the plugin chrome to Petland ─────────────────────────────── */
body.post-type-archive-service_area {
  --cas-primary: #D45224;
  --cas-primary-dark: #B3451E;
  --cas-primary-light: #FBE9E1;
  --cas-dark: #D45224;          /* hero + guarantee-banner gradient (was grey) */
  --cas-dark-strong: #B3451E;
  --cas-text: #212529;
}

body.post-type-archive-service_area .aws-page-title {
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* 2 ─── Area cards → Petland puppy-card language ─────────────────────────── */
body.post-type-archive-service_area #main-content .row {
  --bs-gutter-x: 1.75rem;
  --bs-gutter-y: 1.75rem;
}

body.post-type-archive-service_area #main-content .card {
  position: relative;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.post-type-archive-service_area #main-content .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.15);
}

/* image (when a featured image exists) — gentle zoom on hover */
body.post-type-archive-service_area #main-content .card .ratio { overflow: hidden; }
body.post-type-archive-service_area #main-content .card .ratio img { transition: transform 0.45s ease; }
body.post-type-archive-service_area #main-content .card:hover .ratio img { transform: scale(1.06); }

/* imageless placeholder → warm gradient + faint location pin (hide broken FA) */
body.post-type-archive-service_area #main-content .card .ratio.bg-light {
  background: linear-gradient(135deg, #FBE9E1 0%, #F5D7C7 100%) !important;
  position: relative;
}
body.post-type-archive-service_area #main-content .card .ratio.bg-light i { display: none; }
body.post-type-archive-service_area #main-content .card .ratio.bg-light::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d45224' fill-opacity='.5'%3E%3Cpath d='M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E") center / 44px no-repeat;
}

/* card body */
body.post-type-archive-service_area #main-content .card-body { padding: 20px; }
body.post-type-archive-service_area #main-content .card-body h2 { margin-bottom: 8px; }
body.post-type-archive-service_area #main-content .card-body h2 a {
  color: var(--ink);
  font-weight: 800;
  transition: color 0.2s ease;
}
body.post-type-archive-service_area #main-content .card:hover .card-body h2 a { color: var(--primary); }

/* location line — terracotta pin via inline SVG (hide broken FA) */
body.post-type-archive-service_area #main-content .card-body p.text-muted i { display: none; }
body.post-type-archive-service_area #main-content .card-body p.text-muted {
  display: flex;
  align-items: center;
  gap: 6px;
}
body.post-type-archive-service_area #main-content .card-body p.text-muted::before {
  content: "";
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d45224'%3E%3Cpath d='M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* radius / breed-count → soft terracotta pills (hide broken FA) */
body.post-type-archive-service_area #main-content .card-body .hstack {
  gap: 8px !important;
  flex-wrap: wrap;
}
body.post-type-archive-service_area #main-content .card-body .hstack span {
  display: inline-flex;
  align-items: center;
  background: var(--cas-primary-light);
  color: var(--primary) !important;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 5px 12px;
  border-radius: 999px;
}
body.post-type-archive-service_area #main-content .card-body .hstack span i { display: none; }

/* 3 ─── Pagination (shows once there are enough areas) ───────────────────── */
body.post-type-archive-service_area .pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  margin: 0 3px;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  border: 1px solid #ededed;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.2s ease;
}
body.post-type-archive-service_area .pagination .page-numbers:hover {
  border-color: var(--primary);
  color: var(--primary);
}
body.post-type-archive-service_area .pagination .page-numbers.current {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* 4 ─── Small screens ────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  body.post-type-archive-service_area #main-content .card-body { padding: 16px; }
}