/* ============================================================
   Cape Cod Jewish Culture Festival — Clean/Elegant Design System
   ============================================================ */

:root {
  /* Refined brand palette — muted, editorial */
  --color-maroon: #8B1A2E;
  --color-maroon-dark: #6E0F22;
  --color-teal: #3E8FA3;
  --color-teal-dark: #2C6C7C;
  --color-gold: #C9962F;
  --color-gold-dark: #A87823;
  --color-cream: #FAF6EE;
  --color-cream-alt: #F3ECDD;
  --color-ink: #22303A;
  --color-ink-soft: #5A6E78;
  --color-white: #FFFFFF;

  --color-bg: var(--color-cream);
  --color-surface: var(--color-white);
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-ink-soft);
  --color-primary: var(--color-teal);
  --color-secondary: var(--color-maroon);
  --color-accent: var(--color-gold);
  --color-border: rgba(34, 48, 58, 0.12);

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 10px rgba(34, 48, 58, 0.08);
  --shadow-md: 0 10px 28px rgba(34, 48, 58, 0.12);
  --shadow-lg: 0 20px 50px rgba(34, 48, 58, 0.16);

  --container-max: 1160px;
  --nav-height: 80px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.4rem, 4.5vw + 1rem, 4.4rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 2.6vw + 1rem, 2.9rem); }
h3 { font-size: clamp(1.3rem, 1.2vw + 1rem, 1.6rem); }
p { margin: 0 0 var(--space-2); color: var(--color-text-muted); }
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-3); position: relative; z-index: 1; }
section { padding: var(--space-6) 0; position: relative; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.section-head { max-width: 640px; margin: 0 auto var(--space-5); text-align: center; }
.section-head p { font-size: 1.08rem; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--color-primary); color: #fff; padding: 12px 20px;
  border-radius: 0 0 8px 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  min-height: 48px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 2px; }
.btn-primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-teal-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline { background: #fff; border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary); color: #fff; transform: translateY(-2px); }
.btn-teal { background: var(--color-teal); color: #fff; box-shadow: var(--shadow-sm); }
.btn-teal:hover { background: var(--color-teal-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ---------- Nav ---------- */
/* Sits transparently over the hero on load; becomes a solid bar once scrolled (see main.js) */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.nav.is-scrolled {
  background: rgba(250, 246, 238, 0.94);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
/* Pages without a hero need the fixed nav's height reserved so content isn't hidden under it */
.subpage-spacer { height: var(--nav-height); }
/* Not capped to --container-max on purpose: the nav needs to hug the true
   right edge of the viewport (not the centered content column) so it clears
   the hero artwork's "Second Annual" text on wider screens. */
.nav-inner {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 var(--space-3);
  min-height: var(--nav-height);
}
/* Small mobile-only "Home" icon in the top-left corner. On the home page it
   only appears once scrolled past the hero (nav.is-scrolled); on every other
   page it's shown unconditionally, since there's no transparent hero state. */
.nav-home-icon {
  display: none; align-items: center; margin-right: auto;
}
.nav-home-icon img { height: 40px; width: auto; display: block; }
@media (max-width: 1380px) {
  .nav-home-icon { display: flex; }
  .nav-home-icon.is-conditional { display: none; }
  .nav.is-scrolled .nav-home-icon.is-conditional { display: flex; }
}
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: inline-block; padding: 8px 9px; border-radius: var(--radius-pill);
  text-decoration: none; font-weight: 600; font-size: 0.88rem; color: var(--color-ink);
  transition: background 0.2s, color 0.2s;
}
/* Secondary/backlink nav item — smaller and tighter so it doesn't blow out the
   nav's total width (which has to stay narrow enough to clear the hero text
   on the home page at the breakpoint where it's shown inline). */
.nav-links a.nav-link-secondary {
  font-size: 0.78rem; font-weight: 600; padding: 6px 9px; opacity: .8;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { background: rgba(62, 143, 163, 0.1); color: var(--color-primary); }
.nav-cta { margin-left: var(--space-1); }
.nav-cta .btn { padding: 9px 16px; min-height: 38px; font-size: 0.88rem; }
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  width: 44px; height: 44px; border-radius: 10px; align-items: center; justify-content: center;
}
.nav-toggle:hover { background: rgba(34,48,58,0.06); }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  content: ""; display: block; width: 22px; height: 2px; background: var(--color-ink); border-radius: 2px; position: relative; transition: transform .2s, opacity .2s;
}
.nav-toggle-bars::before { position: absolute; top: -7px; }
.nav-toggle-bars::after { position: absolute; top: 7px; }

/* Raised from a typical ~860px tablet breakpoint: the full link row needs
   this much width to clear the hero artwork's "Second Annual" text (see
   .nav-inner above) — below this, the hamburger keeps a small, safe footprint. */
@media (max-width: 1380px) {
  .nav-links { position: fixed; top: var(--nav-height); left: 0; right: 0; background: var(--color-surface);
    flex-direction: column; align-items: stretch; padding: var(--space-2); gap: 4px;
    box-shadow: var(--shadow-md); transform-origin: top; transform: scaleY(0); opacity: 0; pointer-events: none;
    transition: transform .18s ease, opacity .18s ease; }
  .nav-links.is-open { transform: scaleY(1); opacity: 1; pointer-events: auto; }
  .nav-links a { text-align: center; padding: 14px; }
  .nav-cta { margin-left: 0; }
  .nav-toggle { display: flex; }
}

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--color-cream-alt); overflow: hidden; padding: 0; }
.hero img { width: 100%; height: auto; display: block; }
.hero-info-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2);
  max-width: var(--container-max); margin: 0 auto; padding: var(--space-4) var(--space-3);
}
.info-pill {
  display: inline-flex; align-items: center; gap: 10px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 12px 22px;
  box-shadow: var(--shadow-sm); font-weight: 600; font-size: 1rem;
}
.info-pill svg { flex-shrink: 0; color: var(--color-primary); }

.pricing-row { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.price-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 14px 22px; text-align: center; box-shadow: var(--shadow-sm); min-width: 170px;
}
.price-card-amount { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--color-primary); }
.price-card-label { font-size: .85rem; color: var(--color-text-muted); margin-top: 2px; font-weight: 600; }
.price-card-note { font-size: .76rem; color: var(--color-text-muted); margin-top: 8px; line-height: 1.4; max-width: 180px; }

/* ---------- What's On grid ---------- */
/* Exactly 4 cards — fixed 2-column grid so a lone card never orphans a row */
.whats-on-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3);
  max-width: 820px; margin: var(--space-4) auto 0;
}
@media (max-width: 560px) {
  .whats-on-grid { grid-template-columns: 1fr; }
}
.sticker-card {
  background: var(--color-surface); border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease;
  border: 1px solid var(--color-border);
}
.sticker-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.sticker-photo { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.sticker-photo img { width: 100%; height: 100%; object-fit: cover; }
.sticker-tag {
  position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.95); color: var(--color-ink); font-weight: 700;
  font-size: .8rem; padding: 6px 14px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.sticker-body { padding: var(--space-3); }
.sticker-body h3 { margin-bottom: 6px; }
.sticker-body p { margin-bottom: 0; font-size: .95rem; }
.sticker-logo-row { display: flex; align-items: center; gap: 10px; margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
.sticker-logo-row img { height: 30px; width: auto; border-radius: 6px; }
.sticker-logo-row span { font-size: .85rem; color: var(--color-text-muted); font-weight: 600; }

/* Music spotlight — full-bleed photo banner + performer footer, sits above the What's On grid */
.music-spotlight {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md); margin-bottom: var(--space-4);
}
.music-spotlight-media { position: relative; min-height: 420px; overflow: hidden; }
.music-spotlight-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.music-spotlight:hover .music-spotlight-media img { transform: scale(1.04); }
.music-spotlight-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,20,24,.92) 0%, rgba(15,20,24,.5) 42%, rgba(15,20,24,.05) 72%);
}
.music-spotlight-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-5); z-index: 1; }
.music-spotlight-overlay h3 { color: #fff; font-size: clamp(1.9rem, 2.6vw + 1rem, 2.8rem); margin-bottom: 8px; }
.music-spotlight-overlay p { color: rgba(255,255,255,.86); max-width: 520px; margin-bottom: 0; font-size: 1.08rem; }
.music-spotlight-footer { background: var(--color-surface); padding: var(--space-4) var(--space-5); }
.music-performer { display: flex; align-items: center; gap: var(--space-3); }
.music-performer-logo { height: 56px; width: auto; border-radius: 8px; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.music-performer h3 { font-size: 1.3rem; margin-bottom: 2px; }
.music-performer p { margin-bottom: 0; }
@media (max-width: 640px) {
  .music-spotlight-media { min-height: 320px; }
  .music-spotlight-overlay { padding: var(--space-4); }
  .music-spotlight-footer { padding: var(--space-4); }
  .music-performer { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ---------- Photo grid (gallery teaser + gallery page) ---------- */
.polaroid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.polaroid {
  background: var(--color-surface); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease; display: block; text-decoration: none; overflow: hidden;
}
.polaroid:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.polaroid-photo { aspect-ratio: 4/3; overflow: hidden; }
.polaroid-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .polaroid-grid { grid-template-columns: repeat(2, 1fr); } }
/* Exactly 3 photos in the home teaser — skip the 2-column stage so one never orphans alone */
.polaroid-grid.teaser-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .polaroid-grid.teaser-3 { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .polaroid-grid { grid-template-columns: 1fr; } }

/* ---------- Cards ---------- */
.card { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-4); border: 1px solid var(--color-border); }

/* ---------- Footer ---------- */
.footer {
  background: var(--color-ink);
  padding: var(--space-6) 0 var(--space-5); color: #fff; text-align: center;
}
.footer h2 { color: #fff; }
.footer-meta { font-weight: 600; letter-spacing: 0.04em; color: rgba(255,255,255,.85); }
.footer-dot { margin: 0 12px; color: rgba(255,255,255,.4); }
.footer-social { display: flex; gap: 12px; justify-content: center; margin-top: var(--space-3); }
.footer-social a {
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  transition: transform .2s, background .2s;
}
.footer-social a:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.footer-links { margin-top: var(--space-4); display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.footer-links a { text-decoration: none; font-weight: 600; color: #fff; opacity: .85; }
.footer-links a:hover { opacity: 1; text-decoration: underline; }
.footer-fine { margin-top: var(--space-3); font-size: .85rem; color: rgba(255,255,255,.6); }

/* ---------- Utility ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }