/*
 * 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
 */

/* ==========================================================================
   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;
  }
}