/* AllOutMaine — shared stylesheet for the server-rendered public pages
   (courts / games / venue / faq / l). One source of truth for the look that
   used to be copy-pasted into each page's inline <style>. Mobile-first.
   Tokens mirror the app's styles.css so the PWA and these pages read as one brand. */

:root{
  --pine:#3f703e; --pine-dark:#2f5530; --harbor:#1d3868; --harbor-lite:#2b4d86;
  --sand:#f4efe6; --amber:#f5a623; --mint:#7fd1a8; --ink:#1f2a24; --muted:#6c766f;
  --line:#e3ddd0; --card:#fff;
  --serif:'Fraunces',Georgia,serif; --sans:'Outfit',system-ui,sans-serif;
  --shadow:0 1px 3px rgba(31,42,36,.06),0 6px 18px rgba(31,42,36,.05);
  --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--sand);line-height:1.55;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:820px;margin:0 auto;padding:0 18px}
a{color:var(--pine)}
img{max-width:100%;height:auto}

/* ---- sticky header + section nav ------------------------------------------ */
.site-hdr{position:sticky;top:0;z-index:20;background:var(--harbor);color:var(--sand);
  box-shadow:0 1px 0 rgba(0,0,0,.06)}
.site-hdr-in{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;gap:12px}
.brand{font-family:var(--serif);font-weight:900;font-size:23px;letter-spacing:-.4px;
  color:var(--sand);text-decoration:none;line-height:1}
.brand .o{color:var(--amber)} .brand .m{color:var(--mint)}
.app-btn{flex:none;background:var(--amber);color:#3a2a06;text-decoration:none;font-weight:700;
  font-size:13.5px;padding:9px 15px;border-radius:999px;white-space:nowrap;
  transition:transform .12s ease,filter .12s ease}
.app-btn:hover{filter:brightness(1.04);transform:translateY(-1px)}
.app-btn.lg{font-size:15px;padding:12px 22px}

.subnav{background:var(--card);border-bottom:1px solid var(--line)}
.subnav-in{display:flex;gap:8px;padding:10px 18px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.subnav-in::-webkit-scrollbar{display:none}
.subnav-in a{flex:none;font-size:13px;font-weight:600;text-decoration:none;color:var(--harbor);
  background:var(--sand);border:1px solid var(--line);border-radius:999px;padding:7px 13px;white-space:nowrap}
.subnav-in a.on{background:var(--pine);color:#fff;border-color:var(--pine)}
.subnav-in a.ghost{margin-left:auto;background:#eef3ec;border-color:#dbe6d7;color:var(--pine)}

/* ---- headings + intro ----------------------------------------------------- */
main.wrap{padding-top:6px;padding-bottom:10px}
h1{font-family:var(--serif);font-weight:900;font-size:31px;line-height:1.12;margin:22px 0 8px}
.lede{color:#4a564f;margin:0 0 20px;font-size:16.5px;max-width:62ch}
.lede .app,a.app{color:var(--pine);font-weight:700;text-decoration:none}
h2{font-family:var(--serif);font-weight:900;font-size:22px;margin:30px 0 12px;
  padding-bottom:8px;border-bottom:2px solid var(--line)}

/* ---- cards (venues, games) ------------------------------------------------ */
.card,.venue,.game{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow)}
.venue h3,.game h3{margin:0 0 5px;font-size:17.5px;font-family:var(--serif);font-weight:700;line-height:1.25}
.venue h3 a,.game h3 a{color:inherit;text-decoration:none}
.venue h3 a:hover,.game h3 a:hover{color:var(--pine)}
.meta{font-size:13.5px;color:#55605a;margin:4px 0}
.meta a{color:var(--harbor)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0}
.tag{font-size:12px;background:#eff3ee;color:var(--pine);border-radius:999px;padding:4px 10px;font-weight:600}
.pill{display:inline-block;font-size:12px;background:#e7ebf4;color:var(--harbor);border-radius:999px;
  padding:3px 9px;font-weight:600;margin-left:6px;vertical-align:middle}
.cta{display:inline-block;margin-top:10px;font-weight:700;color:var(--pine);text-decoration:none;font-size:14px}
.cta:hover{text-decoration:underline}
.hot{color:var(--pine);font-weight:700}

/* ---- courts filters: labeled Sport chips + collapsible Town picker -------- */
.filterbar{margin:16px 0 26px}
.filter-group{margin-bottom:12px}
.filter-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:0 0 8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:13.5px;text-decoration:none;color:var(--harbor);background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-weight:600;transition:background .12s}
.chip:hover{background:#faf7f1}
.chip.on{background:var(--pine);color:#fff;border-color:var(--pine)}
.townpicker{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);
  box-shadow:var(--shadow);overflow:hidden}
.townpicker>summary{cursor:pointer;list-style:none;padding:12px 16px;font-weight:700;font-size:14.5px;
  color:var(--harbor);display:flex;align-items:center;justify-content:space-between;gap:8px}
.townpicker>summary::-webkit-details-marker{display:none}
.townpicker>summary::after{content:"▾";color:var(--muted);transition:transform .18s}
.townpicker[open]>summary::after{transform:rotate(180deg)}
.townpicker>summary:hover{background:#faf7f1}
.town-list{display:flex;flex-wrap:wrap;gap:8px;padding:4px 16px 16px}
.town-list a{font-size:13px;text-decoration:none;color:var(--harbor);background:var(--sand);
  border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.town-list a.on{background:var(--pine);color:#fff;border-color:var(--pine)}
.town-list a:hover{background:#efe9dd}

/* ---- venue detail page ---------------------------------------------------- */
.crumbs{font-size:13px;color:#7a857e;margin:16px 0 0}
.crumbs a{color:var(--harbor);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.card h2{font-family:var(--serif);font-weight:700;font-size:19px;margin:0 0 10px;padding:0;border:0}
.photo{width:100%;max-height:340px;object-fit:cover;border-radius:var(--radius);margin:12px 0 4px}
.live{display:inline-block;background:#e9efe6;color:var(--pine);font-weight:700;border-radius:999px;
  padding:6px 13px;font-size:13px;margin:6px 0 10px}
.gamerow{border-top:1px solid #f0ece3;padding:11px 0}
.gamerow:first-of-type{border-top:none}
.gamerow b{color:var(--pine)}
.btn{display:block;text-align:center;background:var(--pine);color:#fff;text-decoration:none;font-weight:700;
  border-radius:var(--radius);padding:15px;margin:18px 0 6px;transition:filter .12s}
.btn:hover{filter:brightness(1.05)}
.btn.alt{background:#fff;color:var(--pine);border:1px solid #cdd9cd}
.link{color:var(--pine);font-weight:600;text-decoration:none}
.link:hover{text-decoration:underline}

/* ---- FAQ ------------------------------------------------------------------ */
.qa{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:6px 18px;margin-bottom:10px;box-shadow:var(--shadow)}
.qa summary,.qa h2{cursor:pointer;list-style:none;font-family:var(--serif);font-weight:700;font-size:17px;
  margin:0;padding:14px 0;border:0;color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";float:right;color:var(--pine);font-weight:700;font-size:20px;line-height:1}
.qa[open] summary::after{content:"–"}
.qa p{margin:0 0 16px;font-size:15px;color:#44504a}

/* ---- "add to home screen" CTA band + footer ------------------------------- */
.cta-band{background:linear-gradient(135deg,var(--pine),var(--pine-dark));color:#fff;margin-top:34px}
.cta-band-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px 18px;flex-wrap:wrap}
.cta-band-h{font-family:var(--serif);font-weight:900;font-size:22px}
.cta-band-sub{font-size:14px;opacity:.92;margin-top:4px;max-width:46ch}
.site-ftr{padding:28px 18px 40px;text-align:center;color:#7a857e;font-size:13px}
.site-ftr-links{margin-top:10px}
.site-ftr a{color:#66716a;text-decoration:none}
.site-ftr a:hover{text-decoration:underline}

/* ---- responsive tweaks ---------------------------------------------------- */
@media (min-width:640px){
  h1{font-size:36px;margin-top:28px}
  .brand{font-size:25px}
  .site-hdr-in{padding:14px 18px}
}