/* Camp WAM Events page — matches the main site's default ("adults") theme */
:root{
  --primary:#2d5a8e; --secondary:#4a9e7f; --accent:#f0a500;
  --bg:#f8f7f4; --surface:#fff; --text:#1a2a3a;
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px;
  --font-heading:"Lora", Georgia, serif;
  --font-body:"Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow:0 2px 12px #2d5a8e1a; --border:1px solid #dde4ed;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-width:320px;min-height:100vh;display:flex;flex-direction:column;
  background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:1rem;line-height:1.5}
a{color:inherit}
.skip{position:absolute;left:-999px;top:0;background:var(--primary);color:#fff;padding:.5rem 1rem;z-index:10}
.skip:focus{left:0}

/* Nav (same look as the site's top bar) */
.nav{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem 1.5rem;
  padding:1rem 2rem;background:var(--surface);border-bottom:var(--border);
  box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--primary);
  font-weight:700;font-size:1.25rem}
.brand img{width:44px;height:44px;object-fit:contain}
.nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem}
.nav-links a{font-weight:600;text-decoration:none;color:var(--text);transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--primary)}

/* Hero (same as the About page banner) */
.hero{background:var(--primary);color:#fff;text-align:center;padding:4rem 1.5rem 3.5rem}
.hero-logo{width:110px;height:110px;object-fit:contain;background:#fff;border-radius:50%;
  padding:8px;box-shadow:0 4px 14px #00000033;margin:0 auto 1.25rem;display:block}
.pill{display:inline-block;background:var(--accent);color:var(--bg);font-size:.8rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;padding:.25rem 1rem;border-radius:999px;margin-bottom:1rem}
.hero h1{font-family:var(--font-heading);font-weight:700;font-size:clamp(2rem,6vw,3rem);line-height:1.2;margin:0 0 1rem}
.hero p{max-width:42rem;margin:0 auto;font-size:1.125rem;opacity:.9}

/* Main content */
main{flex:1;width:100%;max-width:64rem;margin:0 auto;padding:2.5rem 1rem 3rem}
.card{background:var(--surface);border:var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow);padding:1rem}
.cal-wrap{position:relative;width:100%;height:680px}
.cal-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:var(--radius-sm)}
.cal-actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:1rem}
.btn{display:inline-block;padding:.75rem 1.5rem;border-radius:var(--radius-lg);font-weight:700;font-size:.95rem;
  text-decoration:none;transition:transform .2s,filter .2s;text-align:center}
.btn:hover{transform:scale(1.04);filter:brightness(1.08)}
.btn-primary{background:var(--primary);color:#fff}
.btn-accent{background:var(--accent);color:var(--text)}
.btn-ghost{background:transparent;color:var(--primary);border:2px solid var(--primary)}
.note{text-align:center;font-size:.95rem;opacity:.75;margin:1rem auto 0;max-width:40rem}
.note a{color:var(--primary);font-weight:600}

/* "Events coming soon" fallback */
.soon{text-align:center;padding:3rem 1.5rem;display:flex;flex-direction:column;align-items:center;gap:1rem}
.soon .icon{font-size:3rem;line-height:1}
.soon h2{font-family:var(--font-heading);color:var(--primary);font-size:1.875rem;margin:0}
.soon p{font-size:1.1rem;opacity:.8;margin:0;max-width:34rem}
.soon a{color:var(--primary);font-weight:600}
[hidden]{display:none!important}

.back{text-align:center;margin-top:2.5rem}

/* Footer */
.footer{background:var(--surface);border-top:var(--border);padding:2rem;text-align:center;font-size:.9rem}
.footer .name{font-family:var(--font-heading);color:var(--primary);font-weight:700;font-size:1.2rem;margin:0 0 .25rem}
.footer p{margin:.25rem 0;opacity:.75}
.footer a{color:var(--accent);font-weight:600;text-decoration:none}

/* Phones */
@media (max-width:640px){
  .nav{padding:.75rem 1rem;justify-content:center;text-align:center}
  .brand{font-size:1.05rem}
  .brand img{width:36px;height:36px}
  .nav-links{gap:1.1rem;justify-content:center}
  .hero{padding:2.5rem 1rem 2.25rem}
  .hero-logo{width:84px;height:84px}
  .hero p{font-size:1rem}
  main{padding:1.5rem .75rem 2rem}
  .card{padding:.5rem}
  .cal-wrap{height:560px}
  .btn{width:100%}
}