/*
 * ps-parks-styles.css
 * Page-specific styles for Parks & Community Services pages built on the
 * new cp-*-root.dwt template (first page: drop-and-go.html).
 *
 *   main-style.css   ->  site layout (hero, section, subnav, eyebrow/title)
 *   grid-styles.css  ->  layout: .grid, .grid--2/3, .grid--media
 *   card-styles.css  ->  boxes: .card, .card__body, .card__title ...
 *   THIS FILE        ->  page-specific design.  Every class below is `ps-`.
 *
 * Contents:
 *   1. Page tokens (:root)        4. Card accents + info lists
 *   2. Sub-nav tokens             5. Register buttons + location card
 *   3. Logo hero                  6. Accessibility / responsive
 *                                 7. Teen S.P.O.T. (program-teen-spot.html)
 *                                 8. Community Garden (program-communitygarden.html)
 *                                 9. Shared split hero, hours badge, pill links,
 *                                    calendar (reusable — first: Time for Tots)
 *                                10. Time for Tots (program-time-for-tots.html)
 *                                11. Sunshine Adaptive Programs (program-sunshine.html)
 *                                12. Senior pages (first: senior-lunch.html)
 *                                13. PCS department home (index.html)
 *                                14. Veterans Day Ceremony (event-veterans.html)
 */

/* ==========================================================================
   1. PAGE TOKENS  — Drop & Go colors sampled from the event logo
   --------------------------------------------------------------------------
   Text-bearing colors are the darker variants so they pass WCAG AA (4.5:1)
   on white. The bright logo green is used for borders/decoration only.
   ========================================================================== */
:root {
  --ps-blue:      var(--brand-blue, #2e5a93);
  --ps-teal:      #007a8a;   /* logo teal, darkened: ~5.0:1 on white */
  --ps-teal-dk:   #005f6b;
  --ps-purple:    #5e1f72;   /* logo purple: ~11:1 on white */
  --ps-purple-lt: #f4ecf7;
  --ps-green:     #7cc242;   /* logo outline green — decoration only */
  --ps-text:      var(--neutral-gray-dark, #4d515f);
  --ps-radius:    10px;

  --font-display: 'Poppins', 'Segoe UI', Arial, sans-serif;
  --font-body:    'Source Sans 3', 'Lato', 'Helvetica Neue', Arial, sans-serif;
}

/* ==========================================================================
   2. SUB-NAV TOKENS  (main-style.css .subnav reads these)
   ========================================================================== */
:root {
  --alert-text-muted: #4d515f;
  --alert-blue:       var(--ps-teal);
  --alert-red:        var(--ps-purple);
  --alert-amber:      var(--ps-green);
  --alert-transition: 0.2s ease;
}

/* In-page jump targets sit below the sticky sub-nav */
[id] { scroll-margin-top: 90px; }

/* ==========================================================================
   3. LOGO HERO  (light band with the event logo as the page <h1>)
   ========================================================================== */
.ps-logo-hero {
  background:
    radial-gradient(circle at 12% 20%, rgba(124,194,66,0.18) 0 18%, transparent 19%),
    radial-gradient(circle at 88% 80%, rgba(94,31,114,0.12) 0 22%, transparent 23%),
    linear-gradient(135deg, #ffffff 0%, #eef8f9 100%);
  border-top: 3px solid var(--ps-green);
  padding: 4.5rem 0 4rem;
  text-align: center;
}
.ps-logo-hero .container { display: flex; flex-direction: column; align-items: center; }
.ps-logo-hero h1 { margin: 0; line-height: 0; }
.ps-logo-hero h1 img { width: min(620px, 92%); height: auto; }
.ps-logo-hero .ps-tagline {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.2vw, 2.4rem);
  font-weight: 600;
  color: var(--ps-purple);
  margin: 2.4rem 0 0;
  max-width: 760px;
  line-height: 1.4;
}
.ps-logo-hero .ps-tagline strong { color: var(--ps-teal-dk); letter-spacing: 0.04em; }

/* ==========================================================================
   4. CARD ACCENTS + INFO LISTS  (on top of card-styles.css)
   ========================================================================== */
.ps-intro { max-width: 840px; font-family: var(--font-body); font-size: 1.7rem; line-height: 1.65; color: var(--ps-text); }

.ps-grid-cards { margin-top: 2.4rem; }

/* card-styles.css pads .card (10px) at height:100% without border-box, so
   cards overflow their grid track by 20px. Contain it on this sheet's grids. */
.ps-grid-cards > .card { box-sizing: border-box; min-width: 0; }

/* Per-card accent: drives the bottom bar + title color in card-styles.css */
.ps-card--teal   { --card-accent: var(--ps-teal); }
.ps-card--purple { --card-accent: var(--ps-purple); }
.ps-card--green  { --card-accent: #3d7a1c; }   /* darkened logo green for text */

.ps-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--card-accent); color: #fff; font-size: 2rem;
  margin-bottom: 1rem;
}
.card .card__title { font-family: var(--font-display); }

.ps-big {
  font-family: var(--font-display);
  font-size: 2.6rem; font-weight: 700; line-height: 1.2;
  color: var(--card-accent); margin: 0 0 0.8rem;
}

/* Label/value rows (prices, dates) */
.ps-info-list { list-style: none; margin: 0; padding: 0; }
.ps-info-list li {
  font-size: 1.55rem; line-height: 1.5; color: #23282f;
  padding: 0.8rem 0; border-bottom: 1px solid rgba(0,0,0,0.08);
}
.ps-info-list li:last-child { border-bottom: none; }
.ps-info-list strong { color: var(--card-accent); display: block; }

/* Chevron bullet list (matches the "> item" style in the layout sample) */
.ps-list { list-style: none; margin: 0; padding: 0; }
.ps-list li {
  position: relative; padding-left: 1.8rem; margin-bottom: 0.6rem;
  font-size: 1.5rem; line-height: 1.55; color: #23282f;
}
.ps-list li::before {
  content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; left: 0; top: 0.35rem; font-size: 1rem; color: var(--card-accent, var(--ps-teal));
}

/* ==========================================================================
   5. REGISTER BUTTONS + LOCATION CARD
   ========================================================================== */
.ps-btn-stack { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.4rem; }

/* card-styles.css colors every .card__body a — re-assert the button look */
.ps-register-btn,
.card__body a.ps-register-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.4rem;
  background: var(--ps-purple); color: #fff;
  border-radius: 8px;
  font-family: var(--font-display); font-size: 1.55rem; font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
}
.ps-register-btn:hover,
.card__body a.ps-register-btn:hover { background: var(--ps-teal-dk); color: #fff; text-decoration: none; }
.ps-register-btn:focus-visible { outline: 3px solid var(--ps-green); outline-offset: 3px; }
.ps-register-btn small { display: block; font-size: 1.25rem; font-weight: 500; opacity: 0.9; }

/* Location card sits on the blue card variant from card-styles.css */
.ps-location .card__title { display: flex; align-items: center; gap: 0.7rem; }
.ps-location address { font-style: normal; font-size: 1.55rem; line-height: 1.6; color: rgba(255,255,255,0.92); margin: 0 0 1.2rem; }
.ps-location address strong { color: #fff; }

.ps-outline-btn,
.card__body a.ps-outline-btn {
  display: inline-block; margin-top: 0.6rem;
  padding: 0.9rem 1.6rem; border: 2px solid #fff; border-radius: 6px;
  color: #fff; font-size: 1.35rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
}
.ps-outline-btn:hover,
.card__body a.ps-outline-btn:hover { background: #fff; color: var(--card-navy, #0e1e46); text-decoration: none; }
.ps-outline-btn:focus-visible { outline: 3px solid var(--ps-green); outline-offset: 3px; }

/* "For more information" strip */
.ps-more-info {
  margin-top: 2.4rem; font-size: 1.55rem; color: var(--ps-text);
}
.ps-more-info i { color: var(--ps-teal); margin-right: 0.5rem; }

/* ==========================================================================
   6. ACCESSIBILITY (WCAG AA) + RESPONSIVE
   ========================================================================== */
.section-eyebrow { color: var(--ps-teal); }
.bk-blue .section-eyebrow { color: var(--vims-accent, #f5a800); }

/* Inline links in body copy must not rely on color alone (WCAG 1.4.1) */
.ps-intro a,
.ps-more-info a,
.ps-location p a,
.card__text a { text-decoration: underline; }

@media (max-width: 670px) {
  .ps-logo-hero { padding: 3rem 0 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   7. TEEN S.P.O.T.  (program-teen-spot.html, <body class="ps-teen">)
   --------------------------------------------------------------------------
   Colors sampled from the Teen S.P.O.T. wall sign, darkened for text so each
   passes WCAG AA on white. Tokens are set on body.ps-teen so they override
   the Drop & Go :root values for this page only.
   ========================================================================== */
.ps-teen {
  --ps-teen-blue:    #1858b8; 
  --ps-teen-magenta: #ad1466;   
  --ps-teen-orange:  var(--card-gold);  /* gold — bars/icons only (~2:1 on white) */
  --ps-teen-gold-text: #8a5d00;         /* darker gold for text: ~5.8:1 on white */
  --ps-teen-purple:  #5e2a8c;   

  --ps-teal:          var(--ps-teen-blue);
  --ps-teal-dk:       #0f3f87;
  --ps-purple:        var(--ps-teen-magenta);
  --ps-green:         #f39200; 
  --alert-blue:       var(--ps-teen-blue);
  --alert-red:        var(--ps-teen-magenta);
  --alert-amber:      var(--ps-green);
}

.ps-card--teen-blue    { --card-accent: var(--ps-teen-blue); }
.ps-card--teen-magenta { --card-accent: var(--ps-teen-magenta); }
.ps-card--teen-orange  { --card-accent: var(--ps-teen-gold-text); }
/* Gold cards: text in the darker gold, but keep the bright gold bar + icon */
.ps-teen .ps-card--teen-orange { border-bottom-color: var(--ps-teen-orange); }
.ps-card--teen-orange .ps-card-icon { background: var(--ps-teen-orange); color: #3a2a00; }
.ps-card--teen-purple  { --card-accent: var(--ps-teen-purple); }

/* ---- Hero: text left, sign photo right ---- */
.ps-teen-hero {
  background:
    radial-gradient(circle at 8% 15%, rgba(243,146,0,0.16) 0 14%, transparent 15%),
    radial-gradient(circle at 94% 88%, rgba(173,20,102,0.12) 0 20%, transparent 21%),
    linear-gradient(135deg, #ffffff 0%, #eef3fc 100%);
  border-top: 3px solid var(--ps-green);
  padding: 4rem 0;
}
.ps-teen-hero .container {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 3.2rem; align-items: center;
}
.ps-teen-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(4rem, 5vw, 6.2rem); font-weight: 700; line-height: 1.05;
  color: var(--ps-teen-blue); margin: 0.6rem 0 1rem;
}
.ps-teen-hero__tagline {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem;
  font-family: var(--font-display); font-size: clamp(1.6rem, 1.6vw, 1.9rem); font-weight: 600;
  margin: 0 0 2rem;
}
.ps-teen-hero__tagline span:nth-child(1) { color: var(--ps-teen-blue); }
.ps-teen-hero__tagline span:nth-child(2) { color: var(--ps-teen-magenta); }
.ps-teen-hero__tagline span:nth-child(3) { color: var(--ps-teen-gold-text); }
.ps-teen-hero__tagline span:nth-child(4) { color: var(--ps-teen-purple); }
.ps-teen-hero__img img {
  display: block; width: 100%; height: auto;
  border-radius: var(--ps-radius); box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* Hours badge (replaces the old blue "Regular Hours" bar) */
.ps-teen-hours {
  display: inline-flex; align-items: center; gap: 1.2rem;
  margin: 0; padding: 1.2rem 1.8rem;
  background: var(--ps-teen-blue); color: #fff; border-radius: var(--ps-radius);
  font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; line-height: 1.3;
}
.ps-teen-hours i { font-size: 2.6rem; color: var(--ps-green); }
.ps-teen-hours strong {
  display: block; font-size: 1.2rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.9;
}

/* Breadcrumb */
.ps-breadcrumb { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; font-size: 1.4rem; }
.ps-breadcrumb li { margin: 0; color: var(--ps-text); }
.ps-breadcrumb li + li::before { content: "/"; margin: 0 0.7rem; color: #8a8f99; }
.ps-breadcrumb a { color: var(--ps-teen-blue); text-decoration: underline; }

/* Event date line */
.ps-teen-date { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--card-accent); margin: 0 0 0.8rem; }
.ps-teen-date i { margin-right: 0.4rem; }
.ps-teen .atc-links { margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ps-teen .card__body a.btn { color: #fff; }

/* Calendar thumbnail: show the top of the month, not the middle */
.ps-teen-cal-img { object-position: top; }

/* ---- Chill / Play / Learn / Create tiles ---- */
.ps-teen-tiles, .ps-teen-gallery { list-style: none; padding: 0; }
.ps-teen-tiles li, .ps-teen-gallery li { margin: 0; }
.ps-teen-tile {
  background: #fff; border-radius: var(--ps-radius); overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-bottom: 4px solid var(--card-accent);
  text-align: center;
}
.ps-teen-tile img { display: block; width: 100%; height: auto; aspect-ratio: 450 / 240; object-fit: cover; }
.ps-teen-tile p {
  margin: 0; padding: 1.2rem 1rem;
  font-family: var(--font-display); font-size: 2.2rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--card-accent);
}

/* ---- Photo gallery ---- */
.ps-teen-gallery img {
  display: block; width: 100%; height: auto; aspect-ratio: 450 / 240; object-fit: cover;
  border-radius: var(--ps-radius); box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* ---- Youth program links (was the side nav) ---- */
.ps-teen-links {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1rem;
}
.ps-teen-links li { margin: 0; }
.ps-teen-links a {
  display: inline-block; padding: 0.9rem 1.6rem;
  border: 2px solid var(--ps-teen-blue); border-radius: 999px;
  color: var(--ps-teen-blue); font-family: var(--font-display); font-size: 1.45rem; font-weight: 600;
  text-decoration: none; transition: background 0.2s ease, color 0.2s ease;
}
.ps-teen-links a:hover,
.ps-teen-links a[aria-current="page"] { background: var(--ps-teen-blue); color: #fff; }
.ps-teen-links a:focus-visible { outline: 3px solid var(--ps-green); outline-offset: 3px; }

@media (max-width: 900px) {
  .ps-teen-hero .container { grid-template-columns: 1fr; }
  .ps-teen-hero__img { order: -1; }
}
@media (max-width: 670px) {
  .ps-teen-hero { padding: 2.6rem 0; }
  .ps-teen-hours { font-size: 1.6rem; }
}

/* ==========================================================================
   8. COMMUNITY DEMONSTRATION GARDEN  (program-communitygarden.html,
      <body class="ps-garden">)
   --------------------------------------------------------------------------
   Greens sampled from the garden logo, darkened for text (WCAG AA on white).
   ========================================================================== */
.ps-garden {
  --ps-garden-green: #2f6b1f;   /* ~6.5:1 on white */
  --ps-garden-dk:    #1f4a14;
  --ps-garden-soil:  #6b4a2b;   /* ~8:1 */
  --ps-garden-leaf:  #8cc63f;   /* bright logo green — decoration only */

  --ps-teal:          var(--ps-garden-green);
  --ps-teal-dk:       var(--ps-garden-dk);
  --ps-purple:        var(--ps-garden-green);
  --ps-green:         var(--ps-garden-leaf);
  --alert-blue:       var(--ps-garden-green);
  --alert-red:        var(--ps-garden-soil);
  --alert-amber:      var(--ps-garden-leaf);
}

.ps-card--garden-green { --card-accent: var(--ps-garden-green); }
.ps-card--garden-soil  { --card-accent: var(--ps-garden-soil); }

/* ---- Hero: text left, logo image right ---- */
.ps-garden-hero {
  background:
    radial-gradient(circle at 8% 15%, rgba(140,198,63,0.2) 0 14%, transparent 15%),
    radial-gradient(circle at 94% 88%, rgba(107,74,43,0.1) 0 20%, transparent 21%),
    linear-gradient(135deg, #ffffff 0%, #f0f7e8 100%);
  border-top: 3px solid var(--ps-garden-leaf);
  padding: 4rem 0;
}
.ps-garden-hero .container {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 3.2rem; align-items: center;
}
.ps-garden-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 4.2vw, 5.4rem); font-weight: 700; line-height: 1.08;
  color: var(--ps-garden-green); margin: 0.6rem 0 1rem;
}
.ps-garden-hero__tagline {
  font-family: var(--font-display); font-size: clamp(1.7rem, 1.7vw, 2rem); font-weight: 600;
  color: var(--ps-garden-soil); margin: 0 0 2rem;
}
.ps-garden-hero__img img {
  display: block; width: 100%; height: auto;
  border-radius: var(--ps-radius); box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* Hours badge */
.ps-garden-hours {
  display: inline-flex; align-items: center; gap: 1.2rem;
  margin: 0; padding: 1.2rem 1.8rem;
  background: var(--ps-garden-green); color: #fff; border-radius: var(--ps-radius);
  font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; line-height: 1.3;
}
.ps-garden-hours i { font-size: 2.6rem; color: var(--ps-garden-leaf); }
.ps-garden-hours strong {
  display: block; font-size: 1.2rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.9;
}
.ps-garden .ps-breadcrumb a { color: var(--ps-garden-green); }

/* Register button sits on its own under the event cards */
.ps-garden-cta { margin: 2.4rem 0 0; }
.ps-garden-cta .ps-register-btn { display: inline-flex; }

/* Responsive YouTube embed (was an inline <style> block) */
.ps-video {
  position: relative; aspect-ratio: 16 / 9; max-width: 960px;
  border-radius: var(--ps-radius); overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.ps-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Site plan image */
.ps-garden-plan {
  display: block; width: 100%; height: auto; margin: 0 0 2rem;
  border-radius: var(--ps-radius); box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Related program links (was the side nav) */
.ps-garden-links {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1rem;
}
.ps-garden-links li { margin: 0; }
.ps-garden-links a {
  display: inline-block; padding: 0.9rem 1.6rem;
  border: 2px solid var(--ps-garden-green); border-radius: 999px;
  color: var(--ps-garden-green); font-family: var(--font-display); font-size: 1.45rem; font-weight: 600;
  text-decoration: none; transition: background 0.2s ease, color 0.2s ease;
}
.ps-garden-links a:hover,
.ps-garden-links a[aria-current="page"] { background: var(--ps-garden-green); color: #fff; }
.ps-garden-links a:focus-visible { outline: 3px solid var(--ps-garden-leaf); outline-offset: 3px; }

@media (max-width: 900px) {
  .ps-garden-hero .container { grid-template-columns: 1fr; }
  .ps-garden-hero__img { order: -1; }
}
@media (max-width: 670px) {
  .ps-garden-hero { padding: 2.6rem 0; }
  .ps-garden-hours { font-size: 1.6rem; }
}

/* ==========================================================================
   9. SHARED PROGRAM-PAGE PIECES  (reusable on any PCS program page)
   --------------------------------------------------------------------------
   Split hero (text + photo), hours badge, pill link row and calendar card.
   Each page sets these tokens on its <body> class:
     --ps-ink       headline, badge fill, pill links   (text-safe, AA on white)
     --ps-ink-2     tagline                             (text-safe)
     --ps-deco      top border, badge icon, focus ring  (decoration only)
     --ps-hero-tint hero gradient end color
   ========================================================================== */
.ps-split-hero {
  background:
    radial-gradient(circle at 8% 15%, color-mix(in srgb, var(--ps-deco) 20%, transparent) 0 14%, transparent 15%),
    radial-gradient(circle at 94% 88%, color-mix(in srgb, var(--ps-ink-2) 12%, transparent) 0 20%, transparent 21%),
    linear-gradient(135deg, #ffffff 0%, var(--ps-hero-tint) 100%);
  border-top: 3px solid var(--ps-deco);
  padding: 4rem 0;
}
.ps-split-hero .container {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 3.2rem; align-items: center;
}
.ps-split-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 4.6vw, 5.8rem); font-weight: 700; line-height: 1.06;
  color: var(--ps-ink); margin: 0.6rem 0 1rem;
}
.ps-split-hero__tagline {
  font-family: var(--font-display); font-size: clamp(1.7rem, 1.7vw, 2rem); font-weight: 600;
  color: var(--ps-ink-2); margin: 0 0 2rem;
}
.ps-split-hero__img img {
  display: block; width: 100%; height: auto;
  border-radius: var(--ps-radius); box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.ps-split-hero .ps-breadcrumb a { color: var(--ps-ink); }

.ps-hours-badge {
  display: inline-flex; align-items: center; gap: 1.2rem;
  margin: 0; padding: 1.2rem 1.8rem;
  background: var(--ps-ink); color: #fff; border-radius: var(--ps-radius);
  font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; line-height: 1.3;
}
.ps-hours-badge i { font-size: 2.6rem; color: var(--ps-deco); }
.ps-hours-badge strong {
  display: block; font-size: 1.2rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.9;
}

.ps-pill-links {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1rem;
}
.ps-pill-links li { margin: 0; }
.ps-pill-links a {
  display: inline-block; padding: 0.9rem 1.6rem;
  border: 2px solid var(--ps-ink); border-radius: 999px;
  color: var(--ps-ink); font-family: var(--font-display); font-size: 1.45rem; font-weight: 600;
  text-decoration: none; transition: background 0.2s ease, color 0.2s ease;
}
.ps-pill-links a:hover,
.ps-pill-links a[aria-current="page"] { background: var(--ps-ink); color: #fff; }
.ps-pill-links a:focus-visible { outline: 3px solid var(--ps-deco); outline-offset: 3px; }

/* Calendar card: whole card links to the PDF */
.ps-calendar {
  display: block; max-width: 760px; margin-top: 2rem;
  background: #fff; border-radius: var(--ps-radius); overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-bottom: 4px solid var(--ps-ink);
  text-decoration: none;
}
.ps-calendar img { display: block; width: 100%; height: auto; }
.ps-calendar__link {
  display: block; padding: 1.2rem 1.6rem;
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--ps-ink);
}
.ps-calendar:hover .ps-calendar__link { text-decoration: underline; }
.ps-calendar:focus-visible { outline: 3px solid var(--ps-deco); outline-offset: 3px; }

@media (max-width: 900px) {
  .ps-split-hero .container { grid-template-columns: 1fr; }
  .ps-split-hero__img { order: -1; }
}
@media (max-width: 670px) {
  .ps-split-hero { padding: 2.6rem 0; }
  .ps-hours-badge { font-size: 1.6rem; }
}

/* Links inside the badge (e.g. phone/email) */
.ps-hours-badge a { color: #fff; text-decoration: underline; }
.ps-hours-badge a:hover { text-decoration: none; }
.ps-hours-badge a:focus-visible { outline: 2px solid var(--ps-deco); outline-offset: 2px; }

/* Numbered registration steps inside a card */
.ps-steps { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.ps-steps li { margin: 0; }
.ps-steps__label {
  display: block; margin-bottom: 0.4rem;
  font-size: 1.25rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--card-accent);
}

/* Portrait calendar/flyer image shown whole inside a card */
.ps-card-cal {
  display: block; width: 100%; height: auto; margin: 0 0 1rem;
  border-radius: 6px; border: 1px solid rgba(0,0,0,0.08);
}

/* Small heading inside a card */
.ps-sub-title {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 600;
  color: var(--card-accent); margin: 1.6rem 0 0.6rem;
}

/* Linked photo tiles: image with a label bar underneath (e.g. Senior Resources) */
.ps-photo-tiles { list-style: none; padding: 0; }
.ps-photo-tiles > li { margin: 0; }
.ps-photo-tile {
  display: block; height: 100%; background: #fff; border-radius: var(--ps-radius); overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-bottom: 4px solid var(--ps-ink);
  text-decoration: none; text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ps-photo-tile img { display: block; width: 100%; height: auto; aspect-ratio: 450 / 240; object-fit: cover; }
.ps-photo-tile span {
  display: block; padding: 1.2rem 1rem;
  font-family: var(--font-display); font-size: 1.8rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ps-ink);
}
.ps-photo-tile:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.ps-photo-tile:hover span { text-decoration: underline; }
.ps-photo-tile:focus-visible { outline: 3px solid var(--ps-deco); outline-offset: 3px; }

/* ==========================================================================
   10. TIME FOR TOTS  (program-time-for-tots.html, <body class="ps-tots">)
   --------------------------------------------------------------------------
   Primary-color palette pulled from the sandbox photo, darkened for text.
   ========================================================================== */
.ps-tots {
  --ps-tots-blue:  #1f5aa6;   /* ~6.8:1 on white */
  --ps-tots-red:   #b3261e;   /* ~6.5:1 */
  --ps-tots-green: #2a7a2e;   /* ~5.4:1 */
  --ps-tots-lime:  #6fd34a;   /* bright shovel green — decoration only */

  --ps-ink:        var(--ps-tots-blue);
  --ps-ink-2:      var(--ps-tots-red);
  --ps-deco:       var(--ps-tots-lime);
  --ps-hero-tint:  #eef4fb;

  --ps-teal:          var(--ps-tots-blue);
  --ps-teal-dk:       #143e75;
  --ps-purple:        var(--ps-tots-red);
  --ps-green:         var(--ps-tots-lime);
  --alert-blue:       var(--ps-tots-blue);
  --alert-red:        var(--ps-tots-red);
  --alert-amber:      var(--ps-tots-lime);
}

.ps-card--tots-red   { --card-accent: var(--ps-tots-red); }
.ps-card--tots-green { --card-accent: var(--ps-tots-green); }

/* ==========================================================================
   11. SUNSHINE ADAPTIVE PROGRAMS  (program-sunshine.html, <body class="ps-sun">)
   --------------------------------------------------------------------------
   Colors from the Sunshine logo, darkened for text (WCAG AA on white).
   ========================================================================== */
.ps-sun {
  --ps-sun-blue:   #2744a3;   /* logo background: ~8.6:1 on white */
  --ps-sun-orange: #a64b00;   /* darkened sun orange: ~5.8:1 */
  --ps-sun-green:  #2f7a1c;   /* darkened horizon green: ~5.4:1 */
  --ps-sun-gold:   #f5b800;   /* sun rays — decoration only (4.8:1 on the blue) */

  --ps-ink:        var(--ps-sun-blue);
  --ps-ink-2:      var(--ps-sun-orange);
  --ps-deco:       var(--ps-sun-gold);
  --ps-hero-tint:  #eef1fb;

  --ps-teal:          var(--ps-sun-blue);
  --ps-teal-dk:       #1a2f73;
  --ps-purple:        var(--ps-sun-blue);
  --ps-green:         var(--ps-sun-gold);
  --alert-blue:       var(--ps-sun-blue);
  --alert-red:        var(--ps-sun-orange);
  --alert-amber:      var(--ps-sun-gold);
}

.ps-card--sun-blue   { --card-accent: var(--ps-sun-blue); }
.ps-card--sun-orange { --card-accent: var(--ps-sun-orange); }
.ps-card--sun-green  { --card-accent: var(--ps-sun-green); }

/* Long tagline on this page: a touch smaller than the default */
.ps-sun .ps-split-hero__tagline { font-size: clamp(1.6rem, 1.5vw, 1.8rem); line-height: 1.45; }

/* ==========================================================================
   12. SENIOR PAGES  (<body class="ps-senior">; senior-lunch.html, senior-services.html)
   --------------------------------------------------------------------------
   Teal + gold from the senior lunch photo, darkened for text (WCAG AA).
   Shared by the senior-* pages as they move to this layout.
   ========================================================================== */
.ps-senior {
  --ps-senior-teal:      #1f5f73;   /* ~7.2:1 on white */
  --ps-senior-blue:      #244b8a;   /* ~8.6:1 */
  --ps-senior-gold:      #f2b705;   /* scarf gold — bars/icons only */
  --ps-senior-gold-text: #8a5d00;   /* ~5.8:1 */

  --ps-ink:        var(--ps-senior-teal);
  --ps-ink-2:      var(--ps-senior-blue);
  --ps-deco:       var(--ps-senior-gold);
  --ps-hero-tint:  #eef5f7;

  --ps-teal:          var(--ps-senior-teal);
  --ps-teal-dk:       #143f4d;
  --ps-purple:        var(--ps-senior-teal);
  --ps-green:         var(--ps-senior-gold);
  --alert-blue:       var(--ps-senior-teal);
  --alert-red:        var(--ps-senior-blue);
  --alert-amber:      var(--ps-senior-gold);
}

.ps-card--senior-teal { --card-accent: var(--ps-senior-teal); }
.ps-card--senior-blue { --card-accent: var(--ps-senior-blue); }
/* Gold cards: darker gold text, bright gold bar + icon */
.ps-card--senior-gold { --card-accent: var(--ps-senior-gold-text); }
.ps-senior .ps-card--senior-gold { border-bottom-color: var(--ps-senior-gold); }
.ps-card--senior-gold .ps-card-icon { background: var(--ps-senior-gold); color: #3a2a00; }

/* ==========================================================================
   13. PCS DEPARTMENT HOME  (index.html, <body class="ps-pcs">)
   --------------------------------------------------------------------------
   Parks green + City blue. The hero carousel is .swap-slider from
   css/slider.css, driven by js/unslider/unslider.js (same as the City home).
   ========================================================================== */
.ps-pcs {
  --ps-pcs-green: #2f6b1f;   /* ~6.5:1 on white */
  --ps-pcs-blue:  #2e5a93;   /* ~7.0:1 */
  --ps-pcs-leaf:  #8cc63f;   /* bright parks green — decoration only */

  --ps-ink:        var(--ps-pcs-green);
  --ps-ink-2:      var(--ps-pcs-blue);
  --ps-deco:       var(--ps-pcs-leaf);

  --ps-teal:          var(--ps-pcs-green);
  --ps-teal-dk:       #1f4a14;
  --ps-purple:        var(--ps-pcs-green);
  --ps-green:         var(--ps-pcs-leaf);
  --alert-blue:       var(--ps-pcs-green);
  --alert-red:        var(--ps-pcs-blue);
  --alert-amber:      var(--ps-pcs-leaf);
}

.ps-card--pcs-green { --card-accent: var(--ps-pcs-green); }
.ps-card--pcs-blue  { --card-accent: var(--ps-pcs-blue); }

/* ---- Hero carousel band ---- */
.ps-slider-hero { border-top: 3px solid var(--ps-deco); background: #0e1e46; }
.ps-slider-hero .swap-slider {
  --slider-heading-font: var(--font-display);
  --slider-heading-weight: 700;
  --slider-heading-transform: uppercase;
  --slider-heading-tracking: 0.01em;
  --slider-body-font: var(--font-body);
  --slider-body-weight: 400;
}
.ps-slider-hero .slide { min-height: clamp(380px, 38vw, 540px); padding-right: clamp(20px, 7vw, 120px); }
.ps-slider-hero .swap-message { width: 360px; }
.ps-slider-hero .swap-message img { max-width: 260px; height: auto; margin-bottom: 0.8rem; }
.ps-slider-hero .swap-message p { color: #fff; }
.ps-slider-hero .swap-message .btn { margin-top: 0.6rem; }
.ps-slider-hero .slider-arrow:focus-visible,
.ps-slider-hero .slider-pause:focus-visible,
.ps-slider-hero .swap-message a:focus-visible { outline: 3px solid var(--ps-deco); outline-offset: 3px; }

/* ---- Image-button tiles (words are in the graphic) ---- */
.ps-pcs ul.grid { list-style: none; padding: 0; }
.ps-pcs ul.grid > li { margin: 0; }
.ps-tile {
  display: block; border-radius: var(--ps-radius); overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ps-tile img { display: block; width: 100%; height: auto; }
.ps-tile:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.ps-tile:focus-visible { outline: 3px solid var(--ps-deco); outline-offset: 3px; }

/* mv-main.css (loaded after card-styles.css) sets .card { display: inline-block },
   which turns off card-styles' flex layout. Restore it here so .card--row and the
   bottom-aligned buttons below work. Scoped to this page for now. */
.ps-pcs .ps-grid-cards > .card { display: flex; }

/* Find a Park: links card gets the wider column, Register the narrower one */
.ps-pcs-start { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
@media (max-width: 900px) { .ps-pcs-start { grid-template-columns: 1fr; } }
.ps-pcs-start > .card { height: auto; }

/* ---- Document cards: report/guide cover beside the text ---- */
.ps-doc-card__cover { flex: 0 0 34%; display: block; align-self: stretch; }
.ps-doc-card__cover img { display: block; width: 100%; height: 100%; min-height: 180px; object-fit: cover; object-position: top; border-radius: 6px; }
@media (max-width: 670px) {
  .ps-doc-card__cover { flex-basis: auto; }
  .ps-doc-card__cover img { height: 220px; }
}

/* ---- Activity cards: push the button to the bottom so they line up ---- */
.ps-card-stack { display: flex; flex-direction: column; }
.ps-card-stack .ps-register-btn { margin-top: auto; }
.ps-card-stack .card__text { margin-bottom: 1.4rem; }

/* Nested link list (e.g. "Want to host a Special Event?") */
.ps-list--nested { margin-top: 0.6rem; }
.ps-list--nested li { font-size: 1.45rem; }

/* Register card sits on the dark green card variant */
.ps-pcs .card--green .card__text { color: rgba(255,255,255,0.92); }

/* ==========================================================================
   14. VETERANS DAY CEREMONY  (event-veterans.html, <body class="ps-vets">)
   --------------------------------------------------------------------------
   Flag navy + red with a gold accent. The hero shows the ceremony video
   (.ps-video) in place of a photo.
   ========================================================================== */
.ps-vets {
  --ps-vets-navy: #1b2f5e;   /* ~13:1 on white */
  --ps-vets-red:  #b22234;   /* flag red: ~6.6:1 */
  --ps-vets-gold: #f2b705;   /* decoration only (7.2:1 on the navy) */

  --ps-ink:        var(--ps-vets-navy);
  --ps-ink-2:      var(--ps-vets-red);
  --ps-deco:       var(--ps-vets-gold);
  --ps-hero-tint:  #eef1f7;

  --ps-teal:          var(--ps-vets-navy);
  --ps-teal-dk:       #101d3d;
  --ps-purple:        var(--ps-vets-navy);
  --ps-green:         var(--ps-vets-gold);
  --alert-blue:       var(--ps-vets-navy);
  --alert-red:        var(--ps-vets-red);
  --alert-amber:      var(--ps-vets-gold);
}

.ps-card--vets-navy { --card-accent: var(--ps-vets-navy); }
.ps-card--vets-red  { --card-accent: var(--ps-vets-red); }

/* Video sits where the hero photo usually goes */
.ps-split-hero__img .ps-video { max-width: none; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }

/* The ceremony photo is only 300px wide: show it beside the text near its
   real size instead of stretching it across the card. mv-main.css sets
   .card to inline-block, so restore the flex row card-styles expects. */
.ps-vets .ps-grid-cards > .card { display: flex; }
.ps-vets-photo-card .card__img { width: 300px; max-width: 45%; height: auto; min-height: 0; object-fit: cover; align-self: flex-start; border-radius: 6px; }
@media (max-width: 670px) {
  .ps-vets-photo-card .card__img { width: 100%; max-width: 300px; }
}