/* Orthodox Parish Directory — visual system inspired by getstrongskills.com's component
   language (sticky blurred header, gradient brandmark split, eyebrow pills, hover-lift
   cards, gradient CTA buttons) but recolored for this audience: a warm, light, inviting
   palette (parchment/cream, royal blue + gold) rather than SS's dark navy — per the
   standing "pick the palette for the actual audience" rule, a family/community directory
   reads as trustworthy in warm light tones, not a dev-tool dark theme. Royal blue + gold
   doubles as a deliberate nod to Orthodox iconography (Marian blue, gold backgrounds/halos)
   and reads as festive/regal rather than the original burgundy, which read as a stop/
   caution color (Max, 2026-08-24). */
:root {
  --bg: #fbf6ee;
  --bg-2: #f3e7d2;
  --panel: #ffffff;
  --panel-2: #fbf3e2;
  --line: #e6d8bf;
  --ink: #2a1f14;
  --ink-soft: #6b5a44;
  --ink-faint: #9c8968;
  --brand: #1e3a8a;
  --brand-2: #d4a017;
  --accent: #2f6b52;
  --radius: 16px;
  --shadow: 0 18px 46px -22px rgba(58,28,18,.22);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  /* legacy aliases so untouched selectors below keep working */
  --fg: var(--ink);
  --muted: var(--ink-soft);
  --accent-light: rgba(212,160,23,.12);
  --card: var(--panel-2);
  --border: var(--line);
}
* { box-sizing: border-box; }
a { color: inherit; }
body { margin:0; font:16px/1.6 var(--font); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; }
.wrap { max-width:900px; margin:0 auto; padding:0 1.2rem; }

/* ---- Sticky header ---- */
.sticky-stack { position:sticky; top:0; z-index:60; }
header.site {
  background:rgba(251,246,238,.88);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
header.site .wrap { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 16px; min-height:64px; padding:10px 1.2rem; max-width:900px; margin:0 auto; }
.brandmark { font-weight:800; letter-spacing:-.02em; font-size:1.15rem; text-decoration:none; color:var(--ink); display:inline-flex; align-items:center; gap:.4em; }
.brandmark .accent-word {
  background:linear-gradient(92deg, var(--brand), var(--brand-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
header.site nav { display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; }
header.site nav a.nav-link { color:var(--ink-soft); font-size:.92rem; font-weight:600; text-decoration:none; }
header.site nav a.nav-link:hover { color:var(--ink); }
.nav-cta {
  background:linear-gradient(92deg, var(--brand), var(--brand-2));
  color:#fff !important; font-weight:700; text-decoration:none;
  padding:9px 16px; border-radius:999px; font-size:.88rem;
  box-shadow:0 10px 24px -12px rgba(30,58,138,.5);
}
.nav-cta:hover { box-shadow:0 14px 30px -12px rgba(30,58,138,.6); }
.nav-cta-secondary {
  border:1.5px solid var(--brand); color:var(--brand) !important; font-weight:700; text-decoration:none;
  padding:7px 16px; border-radius:999px; font-size:.88rem; background:transparent;
}
.nav-cta-secondary:hover { background:rgba(30,58,138,.08); }
@media (max-width:640px) { .nav-cta-secondary { display:none; } }

/* legacy header selectors still referenced (kept as fallback, unused once base.html updated) */
.header-nav a { color:var(--brand); text-decoration:none; font-size:.9rem; font-weight:600; }
.brand { font-weight:700; font-size:1.2rem; color:var(--brand); text-decoration:none; }

/* ---- Eyebrow pill ---- */
.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#8a5f14;
  background:rgba(212,160,23,.12); border:1px solid rgba(212,160,23,.32);
  padding:6px 13px; border-radius:999px; margin:0 0 1rem;
}

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:1rem; padding:12px 22px; border-radius:12px;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active { transform:translateY(1px); }
.btn-primary { background:linear-gradient(92deg, var(--brand), var(--brand-2)); color:#fff; box-shadow:0 12px 28px -14px rgba(30,58,138,.55); }
.btn-primary:hover { box-shadow:0 16px 36px -14px rgba(30,58,138,.65); transform:translateY(-1px); }
.btn-ghost { background:transparent; border-color:var(--line); color:var(--ink); }
.btn-ghost:hover { border-color:var(--ink-faint); }

h1 { font-size:1.7rem; margin:.4rem 0 .6rem; letter-spacing:-.02em; }
h2 { letter-spacing:-.01em; }
.intro { color:var(--muted); }

/* ---- Home / festivals hero ---- */
.home-hero, .festivals-hero {
  text-align:center; padding:3rem 1rem 2.2rem; position:relative;
  background:
    radial-gradient(720px 340px at 82% -10%, rgba(30,58,138,.08), transparent 60%),
    radial-gradient(620px 320px at 6% 0%, rgba(47,107,82,.07), transparent 60%);
  border-bottom:1px solid var(--line); margin:0 -1.2rem 2rem; padding-left:1.2rem; padding-right:1.2rem;
}
.home-hero h1 { font-size:clamp(1.9rem, 4.4vw, 2.6rem); font-weight:800; line-height:1.15; margin:0 0 .6rem; letter-spacing:-.02em; }
.hero-sub { color:var(--muted); font-size:1.05rem; margin:0 0 1.5rem; max-width:46ch; margin-left:auto; margin-right:auto; }
.search-wrap { position:relative; max-width:480px; margin:0 auto; }
.search-input { width:100%; padding:.8rem 1.1rem; font:inherit; font-size:1rem;
  border:1.5px solid var(--border); border-radius:12px; outline:none; background:var(--panel);
  box-shadow:var(--shadow); transition:border-color .15s, box-shadow .15s; }
.search-input:focus { border-color:var(--brand); }
.search-drop { position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow); z-index:100; overflow:hidden; max-height:360px; overflow-y:auto; text-align:left; }
.search-result { display:block; padding:.6rem 1rem; font-size:.95rem;
  color:var(--fg); text-decoration:none; border-bottom:1px solid var(--border); }
.search-result:last-child { border-bottom:none; }
.search-result:hover { background:var(--accent-light); color:var(--brand); }
.search-more { margin:0; padding:.6rem 1rem; font-size:.82rem; color:var(--muted); text-align:center; }

/* ---- Category / hub card grid ---- */
.cat-grid, .hub-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin:1.2rem 0;
  list-style:none; padding:0; }
@media(max-width:540px){ .cat-grid, .hub-grid { grid-template-columns:repeat(2,1fr); } }
.cat-card, .hub-card { display:flex; flex-direction:column; align-items:center; text-align:center;
  background:linear-gradient(180deg, var(--panel), var(--panel-2)); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.2rem .8rem 1rem; text-decoration:none; color:var(--fg);
  transition:transform .14s ease, border-color .14s, box-shadow .14s; gap:.3rem; }
.cat-card:hover, .hub-card:hover { border-color:rgba(30,58,138,.4); box-shadow:var(--shadow); transform:translateY(-3px); }
.cat-icon, .hub-card-icon { font-size:1.6rem; line-height:1; }
.cat-name, .hub-card-name { font-size:.9rem; font-weight:700; color:var(--fg); }
.cat-count, .hub-card-meta { font-size:.78rem; color:var(--muted); }

/* ---- Parish listing grid ---- */
.biz-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:.9rem; margin:1rem 0; list-style:none; padding:0; }
.biz-card { background:linear-gradient(180deg, var(--panel), var(--panel-2)); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.05rem 1.15rem; transition:transform .14s ease, border-color .14s, box-shadow .14s; }
.biz-card:hover { border-color:rgba(30,58,138,.4); box-shadow:var(--shadow); transform:translateY(-3px); }
.biz-card-link { text-decoration:none; color:var(--fg); display:flex; flex-direction:column; gap:.2rem; }
.biz-card-name { font-size:1.02rem; font-weight:700; color:var(--fg); }
.biz-card-meta { font-size:.82rem; color:var(--muted); }

.crumb a { color:var(--brand); text-decoration:none; font-weight:600; font-size:.9rem; }
.cat { display:inline-block; color:#8a5f14; background:rgba(212,160,23,.12); border-radius:99px;
  padding:.15rem .6rem; font-size:.8rem; margin-left:.4rem; font-weight:600; }
dl.details dt { font-weight:700; margin-top:.7rem; color:var(--ink-soft); font-size:.85rem; text-transform:uppercase; letter-spacing:.02em; }
dl.details dd { margin:.15rem 0 .2rem; }
dl.details a { color:var(--brand); }
.social-links { display:flex; gap:.5rem; flex-wrap:wrap; }
.social-links a { display:inline-block; color:#8a5f14; background:rgba(212,160,23,.12);
  border:1px solid rgba(212,160,23,.32); border-radius:99px; padding:.2rem .75rem;
  font-size:.85rem; font-weight:600; text-decoration:none; }
.social-links a:hover { background:rgba(212,160,23,.22); }

.clergy-list { margin:1.6rem 0; }
.clergy-list h2 { font-size:1.1rem; margin:0 0 .6rem; }
.clergy-list ul { list-style:none; padding:0; margin:0; }
.clergy-list li { background:linear-gradient(180deg, var(--panel), var(--panel-2)); border:1px solid var(--border); border-radius:12px;
  padding:.75rem .95rem; margin:.5rem 0; font-size:.92rem; }
.clergy-list a { color:var(--brand); }

.festival-cta { margin:1.5rem 0; }
.festival-cta a { color:var(--brand); font-weight:700; text-decoration:none; }
.festival-cta a:hover { text-decoration:underline; }

footer { border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; padding-top:1.4rem; padding-bottom:2rem; margin-top:2rem; }

.lead-form { background:linear-gradient(180deg, var(--panel), var(--panel-2)); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.4rem 1.5rem; margin:2rem 0 1rem; box-shadow:var(--shadow); }
.lead-form h2 { font-size:1.2rem; margin:0 0 .3rem; }
.lead-form-intro { color:var(--muted); font-size:.92rem; margin:0 0 1.1rem; }
.lead-form-inner { display:flex; flex-direction:column; gap:.55rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.nl-signup-inner { flex-direction:row; flex-wrap:wrap; gap:.6rem; align-items:center; }
.nl-signup-inner input { flex:1; min-width:200px; }
.nl-signup-inner button { margin-top:0; }
.lead-form-inner label { font-size:.85rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.02em; }
.lead-form-inner input, .lead-form-inner textarea, .lead-form-inner select {
  padding:.6rem .8rem; border:1.5px solid var(--border); border-radius:8px;
  font:inherit; font-size:.95rem; width:100%; background:var(--panel); color:var(--ink); }
.lead-form-inner input:focus, .lead-form-inner textarea:focus, .lead-form-inner select:focus { outline:none; border-color:var(--brand); }
.lead-form-inner textarea { resize:vertical; }
.fa-signup-inner { flex-direction:row; flex-wrap:wrap; gap:.6rem; align-items:center; }
.fa-signup-inner input[type=email], .fa-signup-inner input[type=text] { flex:1; min-width:180px; }
.fa-signup-inner select { flex:0 0 auto; width:auto; min-width:160px; }
.fa-signup-inner button { margin-top:0; }
.lead-form-inner button {
  background:linear-gradient(92deg, var(--brand), var(--brand-2)); color:#fff; border:none;
  border-radius:10px; padding:.7rem 1.3rem; font:inherit; font-size:1rem; font-weight:700;
  cursor:pointer; align-self:flex-start; margin-top:.4rem; box-shadow:0 12px 28px -14px rgba(30,58,138,.55);
  transition:transform .12s ease, box-shadow .12s ease; }
.lead-form-inner button:hover { transform:translateY(-1px); box-shadow:0 16px 34px -14px rgba(30,58,138,.65); }
.lead-form-status { font-size:.92rem; font-weight:600; color:var(--accent); margin:.8rem 0 0; }

/* Newsletter / festival box on a parish detail page */
.newsletter-box { background:linear-gradient(180deg, var(--panel), var(--panel-2)); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.4rem 1.5rem; margin:1.6rem 0; box-shadow:var(--shadow); }
.newsletter-box h2 { font-size:1.1rem; margin:0 0 .6rem; }
.newsletter-excerpt { font-size:.92rem; color:var(--fg); line-height:1.6; margin:0 0 .7rem; }
.newsletter-link { display:inline-block; color:#fff; background:linear-gradient(92deg, var(--brand), var(--brand-2)); text-decoration:none;
  border-radius:8px; padding:.5rem 1.1rem; font-size:.9rem; font-weight:700; }
.newsletter-link:hover { opacity:.92; }
.newsletter-caveat { color:var(--muted); font-size:.78rem; margin:.7rem 0 0; }

/* Newsletter / festival search page */
.nl-results { margin-top:1.2rem; display:flex; flex-direction:column; gap:.75rem; }
.nl-card { background:linear-gradient(180deg, var(--panel), var(--panel-2)); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.2rem;
  transition:transform .14s ease, border-color .14s, box-shadow .14s; }
.nl-card:hover { border-color:rgba(30,58,138,.4); box-shadow:var(--shadow); transform:translateY(-2px); }
.nl-card-poster { display:block; max-width:220px; width:100%; height:auto; border-radius:8px;
  border:1px solid var(--border); margin:0 0 .7rem; }
.nl-card-title { display:block; font-weight:700; color:var(--fg); text-decoration:none; margin-bottom:.3rem; }
.nl-card-title:hover { color:var(--brand); }
.nl-card-date { display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.02em;
  color:#8a5f14; background:rgba(212,160,23,.12); border-radius:99px; padding:.12rem .6rem; margin:0 0 .5rem; }
.nl-card-date-verified { color:#2f6b52; background:rgba(47,107,82,.12); }
.fest-month-head { font-size:1.1rem; margin:1.8rem 0 .8rem; padding-bottom:.3rem; border-bottom:2px solid var(--border);
  color:var(--ink); }
.fest-month-head:first-child { margin-top:.4rem; }

/* Month -> state cards (click opens the modal with that state's events) */
.fest-state-card { position:relative; }
.fest-state-card .hub-card-meta { font-weight:600; }

/* State/parish drill-down modal */
.fest-modal { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:1rem; }
.fest-modal[hidden] { display:none; }
.fest-modal-backdrop { position:absolute; inset:0; background:rgba(42,31,20,.55); backdrop-filter:blur(2px); }
.fest-modal-panel { position:relative; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); max-width:600px; width:100%; max-height:82vh; overflow-y:auto; padding:1.6rem 1.6rem 1.4rem; }
.fest-modal-panel h2 { margin:0 0 1rem; font-size:1.2rem; padding-right:2rem; }
.fest-modal-close { position:absolute; top:1rem; right:1.1rem; background:none; border:none; font-size:1.6rem;
  line-height:1; color:var(--ink-faint); cursor:pointer; padding:.2rem .4rem; border-radius:8px; }
.fest-modal-close:hover { color:var(--ink); background:rgba(0,0,0,.05); }
.nl-card-snippet { color:var(--muted); font-size:.9rem; margin:0; line-height:1.5; }
.nl-card-snippet mark { background:rgba(212,160,23,.28); color:var(--fg); padding:0 .1rem; border-radius:2px; }
.nl-card-source { display:inline-block; margin-top:.5rem; font-size:.85rem; font-weight:700; color:var(--brand); text-decoration:none; }
.nl-card-source:hover { text-decoration:underline; }
.nl-empty { color:var(--muted); font-size:.92rem; }

/* Coverage table */
.coverage-table { width:100%; border-collapse:collapse; margin:1.2rem 0; font-size:.92rem; }
.coverage-table th, .coverage-table td { text-align:left; padding:.6rem .8rem; border-bottom:1px solid var(--border); }
.coverage-table th { color:var(--muted); font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; }