/* ============================
   Parks & Recreation colour tokens + department-only components
   Loaded AFTER the theme's style.css (via config.extra.extra_css), so these
   win. Only Parks-specific rules belong here; genuinely shared components
   (header, nav, quick-links, forms, footer, badge) live in the theme sheet.
============================ */
:root {
  --brand: #1a1a1a;      /* dark header + footer, nav-bar base */
  --brand-nav: #2d5a27;  /* parks green: nav bar, headings, bullets, buttons */
  --accent: #d4a017;     /* gold: header rule, nav hover/active, footer accents */
  --page-bg: #f5f3f0;
}

/* The old Parks header used a green text badge with a gold rule, not the
   theme's transparent white-bordered placeholder. Restore the parks-green fill
   and gold border. */
.dept-badge-placeholder {
  background: var(--brand-nav);
  border-color: var(--accent);
}

/* The shared shell wraps the seal/badge in a bare <a href="/">, so the text
   badge picks up the default link underline. The old site's header-badge link
   had text-decoration:none; restore that. (Theme papercut for text-badge sites;
   worth upstreaming to hobart-civic later.) */
.site-header a {
  text-decoration: none;
}

/* Parks advisory callout: gold left rule on a warm tint (the old Parks .notice).
   The theme ships .callout, .callout.warning and .callout.danger. */
.callout.notice {
  border-left: 4px solid var(--accent);
  background: #fefcf3;
}

/* ============================
   Status badge (pool/facility status next to a heading)
============================ */
.status-badge {
  display: inline-block;
  font-weight: 600;
  font-size: 0.85rem;
  color: #666;
}

.status-badge::before {
  content: "\2014\00a0";
}

/* ============================
   Park / facility / vending cards
============================ */
.park-card {
  border-bottom: 1px solid #e5e5e5;
  padding: 1.25rem 0;
}

.park-card:first-child {
  padding-top: 0;
}

.park-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.park-card h3 {
  margin-top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.park-location {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 0.5rem;
}

/* ============================
   Refund-form confirmation (client-side only; no server POST on a static site).
   Revealed by the inline script in templates/pages/vending-refund.html.
============================ */
.flash.success {
  border-left: 4px solid var(--brand-nav);
  background: #f3f7f2;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
  .park-card h3 {
    flex-direction: column;
    align-items: flex-start;
  }
}