/* design-tokens.css 已由頁面的 <link> 標籤載入，此處不再 @import（避免重複下載）── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans TC", sans-serif;
  color: #16251a;
  background: #f5f8f1;
}
a { color: inherit; }

.bloom-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px clamp(16px, 4vw, 36px);
  color: #fff;
  background: rgba(26, 92, 42, 0.96);
  box-shadow: 0 6px 18px rgba(15, 48, 25, 0.18);
}
.bloom-brand,
.bloom-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bloom-brand {
  font-weight: 800;
  text-decoration: none;
}
.bloom-brand-logo {
  width: 1.15em;
  height: 1.15em;
  border-radius: 4px;
  flex-shrink: 0;
}
.bloom-nav a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  font-size: 0.9rem;
  text-decoration: none;
}

.bloom-hero {
  min-height: 74vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  align-items: end;
  gap: clamp(20px, 5vw, 60px);
  padding: clamp(76px, 12vw, 150px) clamp(18px, 5vw, 72px) clamp(42px, 8vw, 88px);
  color: #fff;
  background:
    linear-gradient(90deg, rgba(8, 35, 18, 0.82), rgba(8, 35, 18, 0.44) 52%, rgba(8, 35, 18, 0.24)),
    url("../images/crape-myrtle.jpg") center 40% / cover;
}
.bloom-hero-copy { max-width: 740px; }
.bloom-kicker {
  margin-bottom: 10px;
  color: #f4c86b;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
.bloom-hero h1 {
  max-width: 680px;
  font-size: clamp(2.35rem, 6vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: 0;
}
.bloom-lead {
  max-width: 590px;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1.02rem, 2vw, 1.28rem);
  line-height: 1.8;
}
.bloom-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.bloom-primary,
.bloom-secondary,
.bloom-map-link,
.bloom-tree-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 800;
  text-decoration: none;
}
.bloom-primary,
.bloom-map-link {
  color: #123018;
  background: #f4c86b;
}
.bloom-secondary,
.bloom-tree-link {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.12);
}
.bloom-tree-link { color: #24552d; border-color: #cfe4d2; background: #f6fbf5; }
.bloom-hero-panel {
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background: rgba(10, 34, 17, 0.58);
  backdrop-filter: blur(8px);
}
.bloom-month {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  color: #123018;
  background: #c7efcb;
  font-size: 0.82rem;
  font-weight: 900;
}
.bloom-hero-panel strong {
  display: block;
  font-size: 2rem;
  line-height: 1.15;
}
.bloom-hero-panel small {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.55;
}

.bloom-band {
  padding: clamp(36px, 7vw, 74px) clamp(16px, 5vw, 72px);
}
.bloom-band--now { background: #fff; }
.bloom-band--quiet { background: #eaf4ea; }
.bloom-section-head {
  max-width: 760px;
  margin-bottom: 22px;
}
.bloom-section-head h2 {
  color: #1a5c2a;
  font-size: clamp(1.72rem, 4vw, 2.7rem);
  line-height: 1.2;
}
.bloom-section-head p:not(.bloom-kicker) {
  margin-top: 10px;
  color: #516154;
  line-height: 1.75;
}
.bloom-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.bloom-card,
.bloom-month-block {
  border: 1px solid #dce8dc;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(27, 78, 42, 0.08);
}
.bloom-card {
  display: flex;
  flex-direction: column;
  min-height: 330px;
  overflow: hidden;
}
.bloom-card-top {
  padding: 18px 18px 14px;
  border-bottom: 1px solid #e7efe7;
  background: linear-gradient(135deg, #fff8e8, #f1faef);
}
.bloom-card h3 {
  color: #243126;
  font-size: 1.32rem;
}
.bloom-card p {
  margin-top: 8px;
  color: #56645a;
  line-height: 1.65;
}
.bloom-place {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
}
.bloom-place strong {
  color: #1a5c2a;
  font-size: 1rem;
}
.bloom-place span {
  color: #637066;
  line-height: 1.55;
}
.bloom-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding: 0 18px 18px;
}
.bloom-card-actions a { flex: 1 1 142px; }
.bloom-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.bloom-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  color: #831843;
  background: #fce7f3;
  font-size: 0.78rem;
  font-weight: 800;
}
.bloom-status {
  padding: 18px;
  border: 1px dashed #c8dac8;
  border-radius: 8px;
  color: #516154;
  background: #fbfdf9;
}
.bloom-timeline {
  display: grid;
  gap: 14px;
}
.bloom-month-block {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
}
.bloom-month-label {
  color: #1a5c2a;
  font-weight: 900;
}
.bloom-upcoming-species {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bloom-upcoming-species a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border: 1px solid #cfe4d2;
  border-radius: 999px;
  color: #24552d;
  background: #f6fbf5;
  font-weight: 800;
  text-decoration: none;
}

.park-bloom-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.park-bloom-stat,
.park-hotspot-card,
.park-bloom-year {
  border: 1px solid #dce8dc;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(27, 78, 42, 0.08);
}
.park-bloom-stat {
  min-height: 118px;
  padding: 18px;
}
.park-bloom-stat strong {
  display: block;
  color: #1a5c2a;
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  line-height: 1;
}
.park-bloom-stat span {
  display: block;
  margin-top: 8px;
  color: #516154;
  line-height: 1.55;
}
.park-hotspot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.park-hotspot-card {
  display: grid;
  gap: 12px;
  padding: 18px;
}
.park-hotspot-top {
  display: grid;
  gap: 4px;
}
.park-hotspot-top strong {
  color: #1a5c2a;
  font-size: 1.08rem;
}
.park-hotspot-top span,
.park-hotspot-card p,
.park-bloom-note {
  color: #516154;
  line-height: 1.7;
}
.park-hotspot-card a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 8px;
  color: #123018;
  background: #f4c86b;
  font-weight: 800;
  text-decoration: none;
}
.park-bloom-year {
  margin-top: 18px;
  padding: 18px;
}
.park-bloom-year h3 {
  margin-bottom: 12px;
  color: #1a5c2a;
  font-size: 1.08rem;
}
.park-bloom-months {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.park-bloom-month {
  display: grid;
  gap: 4px;
  min-height: 90px;
  padding: 10px;
  border: 1px solid #cfe4d2;
  border-radius: 8px;
  color: #24552d;
  background: #f6fbf5;
  text-decoration: none;
}
.park-bloom-month.is-current {
  border-color: #f4c86b;
  background: #fff8e8;
}
.park-bloom-month strong {
  color: #1a5c2a;
}
.park-bloom-month span {
  color: #831843;
  font-weight: 900;
}
.park-bloom-month small {
  color: #637066;
  line-height: 1.45;
}
.park-bloom-note {
  max-width: 920px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px dashed #c8dac8;
  border-radius: 8px;
  background: rgba(255,255,255,0.72);
  font-size: 0.88rem;
}
.bloom-footer {
  padding: 28px 18px 38px;
  color: #d8e3d9;
  background: #203426;
  text-align: center;
  line-height: 1.8;
}
.bloom-footer a { color: #f4c86b; }

@media (max-width: 900px) {
  .bloom-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    align-items: start;
  }
  .bloom-hero-panel { max-width: 430px; }
  .bloom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .park-bloom-summary,
  .park-hotspot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .park-bloom-months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .bloom-topbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .bloom-nav { width: 100%; }
  .bloom-nav a {
    flex: 1;
    justify-content: center;
  }
  .bloom-hero { padding-top: 54px; }
  .bloom-hero-actions a,
  .bloom-card-actions a {
    width: 100%;
    flex-basis: 100%;
  }
  .bloom-grid { grid-template-columns: 1fr; }
  .bloom-month-block { grid-template-columns: 1fr; }
  .park-bloom-summary,
  .park-hotspot-grid,
  .park-bloom-months { grid-template-columns: 1fr; }
}

/* =========================================================================
   FOCUS-VISIBLE KEYBOARD RINGS  (a11y — appended 2026-06-25)
   WCAG 2.4.7 / 2.4.11 — every interactive element gets a visible keyboard
   ring. :focus-visible = keyboard only, so mouse clicks stay clean.
   ========================================================================= */

/* Global default: dark-green ring on light surfaces. */
:focus-visible {
  outline: 3px solid var(--green-600, #1a5c2a);
  outline-offset: 2px;
}
/* Minimal legacy fallback for engines without :focus-visible. */
:focus { outline-color: var(--green-600, #1a5c2a); }

/* Windows High Contrast / forced-colors */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
}

/* DARK surfaces (topbar, hero CTAs, hero/emergency panels, footer):
   white ring + green halo reads on dark green, dark photos, dark footer. */
.bloom-topbar a:focus-visible,
.bloom-brand:focus-visible,
.bloom-nav a:focus-visible,
.bloom-hero-actions a:focus-visible,
.bloom-primary:focus-visible,
.bloom-secondary:focus-visible,
.bloom-hero-panel a:focus-visible,
.bloom-footer a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--green-200, #7ecb94);
  border-radius: 8px;
}

/* LIGHT-surface card + content links. */
.bloom-map-link:focus-visible,
.bloom-tree-link:focus-visible,
.bloom-card-actions a:focus-visible,
.bloom-upcoming-species a:focus-visible,
.park-hotspot-card a:focus-visible,
.park-bloom-month:focus-visible,
.sp-action:focus-visible,
.info-sources a:focus-visible,
.method-text a:focus-visible,
a.wc:focus-visible,
#btn-more:focus-visible {
  outline: 3px solid var(--green-600, #1a5c2a);
  outline-offset: 2px;
  border-radius: 8px;
}
.bloom-map-link:focus-visible,
.bloom-card-actions a:focus-visible {
  box-shadow: 0 0 0 5px rgba(26, 92, 42, 0.18);
}
/* mirror the hover lift on keyboard focus for wish cards */
a.wc:focus-visible { transform: translateY(-2px); }

/* Filter / sort BUTTONS with custom fills (species chips, carbon sort tabs):
   inset white halo keeps the ring distinct from the .active fill. */
.sp-chip:focus-visible,
.ranking-sort button:focus-visible {
  outline: 3px solid var(--green-600, #1a5c2a);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 2px #fff;
  border-radius: 999px;
}

/* =========================================================================
   ENTRANCE + SCROLL-REVEAL MOTION  (appended 2026-06-25)
   All scoped under html.motion-ready, which js/motion.js only adds when
   motion is allowed AND supported. No .motion-ready (no-JS / reduced-motion)
   => nothing hidden, nothing animated. iOS-safe (no scroll-timeline).
   ========================================================================= */

@keyframes bloom-fade-up {
  from { opacity: 0; transform: translateY(var(--motion-hero-dist, 14px)); }
  to   { opacity: 1; transform: translateY(0); }
}

/* HERO ENTRANCE — staggered kicker -> h1 -> lead -> actions/quick-nav -> panel */
.motion-ready .bloom-hero-copy > .bloom-kicker,
.motion-ready .bloom-hero-copy > h1,
.motion-ready .bloom-hero-copy > .bloom-lead,
.motion-ready .bloom-hero-actions,
.motion-ready .bloom-hero-copy > .hero-quick-nav,
.motion-ready .bloom-hero-panel {
  animation: bloom-fade-up var(--motion-enter-dur, 0.6s) var(--motion-enter-ease, ease-out) both;
}
.motion-ready .bloom-hero-copy > .bloom-kicker      { animation-delay: 0s; }
.motion-ready .bloom-hero-copy > h1                 { animation-delay: calc(var(--motion-stagger, 0.08s) * 1); }
.motion-ready .bloom-hero-copy > .bloom-lead        { animation-delay: calc(var(--motion-stagger, 0.08s) * 2); }
.motion-ready .bloom-hero-actions,
.motion-ready .bloom-hero-copy > .hero-quick-nav    { animation-delay: calc(var(--motion-stagger, 0.08s) * 3); }
.motion-ready .bloom-hero-panel                     { animation-delay: calc(var(--motion-stagger, 0.08s) * 4); }

/* SCROLL-REVEAL — whole-block fade-up. JS adds .reveal to non-nested targets,
   toggles .in-view when they scroll into view. No per-child transform, so card
   hover-lift is never overwritten. */
.motion-ready .reveal {
  opacity: 0;
  transform: translateY(var(--motion-reveal-dist, 20px));
  transition: opacity var(--motion-enter-dur, 0.6s) var(--motion-enter-ease, ease-out),
              transform var(--motion-enter-dur, 0.6s) var(--motion-enter-ease, ease-out);
}
.motion-ready .reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* REDUCED-MOTION GUARD — belt-and-braces even if .motion-ready is present. */
@media (prefers-reduced-motion: reduce) {
  .motion-ready .bloom-hero-copy > .bloom-kicker,
  .motion-ready .bloom-hero-copy > h1,
  .motion-ready .bloom-hero-copy > .bloom-lead,
  .motion-ready .bloom-hero-actions,
  .motion-ready .bloom-hero-copy > .hero-quick-nav,
  .motion-ready .bloom-hero-panel,
  .motion-ready .reveal {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  a.wc:focus-visible { transform: none; }
}