/*
  SITE STYLES - volunteers rarely need to edit this file.
  Colors are set once in :root below.
*/
:root {
  --header: #1f3a6e;       /* header background */
  --primary: #2f55a4;      /* buttons and links */
  --primary-hover: #26468a;
  --navy: #16294d;         /* headings, dark text, footer */
  --sky: #ebf0f8;          /* soft background panels */
  --sun: #ffd24a;          /* accent */
  --ink: #16294d;          /* body text */
  --muted: #44516b;
  --paper: #ffffff;
  --page: #f7f9fc;         /* page background */
  --line: #c9d4e8;
  --focus: #0b57d0;
}
* { box-sizing: border-box; }
html { font-size: 112.5%; }
body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--page);
}
h1, h2, h3, nav, .btn, .site-title {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
a { color: var(--primary); text-underline-offset: 3px; }
a:hover { color: var(--primary-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--sun); color: #000; padding: .6rem 1rem; z-index: 10;
}
.skip-link:focus { left: 0; }

.wrap { max-width: 56rem; margin: 0 auto; padding: 0 1.25rem; }

header.site-header { background: var(--header); color: #fff; }
.site-header .wrap { padding-top: 1rem; padding-bottom: 1rem; }
.site-title { font-size: 2rem; font-weight: 700; color: #fff; text-decoration: none; }
.site-title span { color: var(--sun); }
.tagline { margin: 0; font-size: .9rem; color: var(--sky); font-family: system-ui, sans-serif; }
nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 0; padding: 0; }
nav a {
  display: block; padding: .5rem .9rem; border-radius: 2rem;
  color: #fff; text-decoration: none; font-weight: 600; font-size: .95rem;
}
nav a:hover { background: var(--navy); color: #fff; }
nav a[aria-current="page"] { background: #fff; color: var(--header); }

main { padding: 2rem 0 3rem; }
h1 { font-size: 2.1rem; line-height: 1.2; color: var(--navy); margin-top: 0; }
h2 { font-size: 1.5rem; color: var(--navy); margin-top: 2.2rem; }
h3 { font-size: 1.15rem; margin: 0 0 .3rem; }

.hero { background: var(--sky); border-radius: 1rem; padding: 2rem 1.5rem; margin-bottom: 1.5rem; }
.hero p { font-size: 1.1rem; }
.btn {
  display: inline-block; background: var(--primary); color: #fff; text-decoration: none;
  padding: .7rem 1.3rem; border-radius: .5rem; font-weight: 700;
}
.btn:hover { background: var(--primary-hover); color: #fff; }

.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.card, .item {
  background: var(--paper); border: 1px solid var(--line); border-radius: .8rem; padding: 1.1rem 1.25rem;
}
.item { margin-bottom: 1rem; border-left: 6px solid var(--primary); }
.item .date { margin: 0 0 .2rem; font-family: system-ui, sans-serif; font-weight: 700; color: var(--navy); }
.item .where { margin: 0 0 .5rem; color: var(--muted); font-family: system-ui, sans-serif; font-size: .9rem; }
.item p:last-child { margin-bottom: 0; }

footer.site-footer { background: var(--navy); color: #fff; padding: 1.5rem 0; font-family: system-ui, sans-serif; font-size: .9rem; }
.site-footer a { color: #fff; }
.site-title:hover { color: #fff; }
/* Focus ring must stand out on dark blue areas */
.site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--sun); }

@media (max-width: 30rem) {
  html { font-size: 106%; }
  h1 { font-size: 1.7rem; }
  nav ul { gap: .25rem; }
}

/* Header layout: text on the left, logo on the right */
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.header-inner { min-height: 219px; } /* logo 204px + 15px */
.header-logo { align-self: center; height: 204px; width: auto; max-width: 100%; flex: none; }
@media (max-width: 40rem) {
  .header-inner { flex-direction: column; align-items: flex-start; }
  .header-logo { height: 136px; align-self: center; }
}
.header-text { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; }
.site-title { display: inline-block; line-height: 1.1; margin-top: 15px; }
.site-header .wrap { padding-bottom: 1rem; } /* equal top and bottom padding keeps the logo centered */
.header-text nav { margin-top: auto; padding-top: .8rem; padding-bottom: calc(20px - 1rem); } /* menu sits 20px above the header's bottom edge */
.header-text nav ul { margin-top: 0; }
@media (max-width: 40rem) {
  .header-inner { min-height: 0; }
  .header-text { align-self: flex-start; }
  .site-header .wrap { padding-bottom: 1rem; }
}

/* ---------------------------------------------------------------
   TITLE SPARKLE (all pages)
   Eight small stars twinkle around the header title "Sparkling
   Wallingford", each on its own delay. All motion stops for visitors
   who ask for reduced motion.
   --------------------------------------------------------------- */
.site-title { position: relative; }
.sparkle-star {
  position: absolute;
  display: block;
  width: .32em;
  height: .32em;
  background: #ffffff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
  transform: scale(.3);
  pointer-events: none;
  animation: sparkle-twinkle 4s ease-in-out infinite;
}
.sparkle-star.s1 { top: -.12em; left: 8%;   animation-delay: .4s; }
.sparkle-star.s2 { top: -.05em; left: 62%;  width: .24em; height: .24em; animation-delay: 1.5s; }
.sparkle-star.s3 { bottom: -.08em; left: 30%; width: .22em; height: .22em; animation-delay: 2.5s; }
.sparkle-star.s4 { bottom: .05em; right: -.14em; width: .27em; height: .27em; animation-delay: 3.2s; }
.sparkle-star.s5 { top: -.1em;  left: 38%;  width: .2em;  height: .2em;  animation-delay: 1s; }
.sparkle-star.s6 { top: -.14em; left: 86%;  width: .26em; height: .26em; animation-delay: 2s; }
.sparkle-star.s7 { bottom: -.1em; left: 66%; width: .24em; height: .24em; animation-delay: 3.6s; }
.sparkle-star.s8 { bottom: -.12em; left: 4%; width: .2em;  height: .2em;  animation-delay: 2.9s; }
@keyframes sparkle-twinkle {
  0%, 12%, 100% { opacity: 0;   transform: scale(.3); }
  30%           { opacity: .95; transform: scale(1); }
  55%           { opacity: .85; transform: scale(.9); }
  78%           { opacity: 0;   transform: scale(.4); }
}

@media (prefers-reduced-motion: reduce) {
  .sparkle-star { animation: none; opacity: 0; display: none; }
}