/* St. Augustine Community Fall Fair — palette from Rina's brand file */
:root {
  --amber: #DFAA26;
  --amber-deep: #D29B15;
  --rust: #8B3522;
  --brown: #834920;
  --cream: #FAF4E9;
  --white: #FFFFFF;
  --ink: #4A2A12;
  --radius: 22px;
  --font-display: "Baloo 2", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--ink); background: var(--cream); line-height: 1.55; }
img { max-width: 100%; display: block; }
h1, h2, h3, .brand, .btn, .price { font-family: var(--font-display); }

/* NAV */
.nav { position: sticky; top: 0; z-index: 50; background: var(--cream); border-bottom: 3px solid var(--amber); }
.nav-inner { max-width: 1080px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 18px; }
.brand { font-weight: 800; font-size: 1.25rem; color: var(--rust); text-decoration: none; letter-spacing: .3px; }
.brand-heart { color: var(--amber-deep); }
.nav nav { display: flex; gap: 16px; margin-left: auto; }
.nav nav a { color: var(--brown); text-decoration: none; font-weight: 700; font-size: .95rem; }
.nav nav a:hover { color: var(--rust); }

/* BUTTONS */
/* inline-flex, not inline-block: buttons sitting side by side stretch to the
   tallest one, and only flex centring keeps their labels vertically centred. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--rust); color: var(--white); border: none; cursor: pointer;
  padding: 12px 26px; border-radius: 999px; font-size: 1.05rem; font-weight: 700; text-decoration: none;
  box-shadow: 0 4px 0 rgba(74,42,18,.35); transition: transform .08s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(74,42,18,.35); }
.btn-big { font-size: 1.25rem; padding: 15px 34px; }
.btn-small { padding: 8px 18px; font-size: .95rem; }
.btn-ghost { background: var(--white); color: var(--brown); box-shadow: inset 0 0 0 3px var(--brown); }
/* Icon inside a pill button — spacing comes from the button's flex gap. */
.btn-icon { width: 26px; height: 26px; flex: 0 0 26px; }

/* HERO — illustrated scarecrow scene sits along the bottom edge.
   Bottom padding has to clear the artwork or the CTAs land on the pumpkins. */
.hero { position: relative; background: var(--cream) url("assets/hero-scene.png") no-repeat bottom center;
  background-size: 100% auto; overflow: hidden; padding: 40px 20px clamp(170px, 24vw, 300px); text-align: center; }
.hero-inner { position: relative; max-width: 760px; margin: 0 auto; }
.hero-logo { width: min(520px, 90%); margin: 0 auto; filter: drop-shadow(0 10px 24px rgba(74,42,18,.22)); border-radius: 18px; }
.hero-sub { color: var(--brown); font-weight: 800; font-size: 1.15rem; margin-top: 22px; }
.hero-ctas { display: flex; gap: 14px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.hero-note { margin-top: 18px; color: var(--ink); background: var(--white); display: inline-block; padding: 8px 18px; border-radius: 999px; font-weight: 700; box-shadow: 0 3px 0 rgba(74,42,18,.15); }

/* SECTIONS */
.section { padding: 64px 20px; scroll-margin-top: 80px; } /* clears the sticky nav on anchor jumps */
/* Leaf pattern under a translucent cream wash — the wash is what keeps body text
   readable. Drop the alpha below ~.86 and the leaves start competing with the copy. */
.section.cream { background:
  linear-gradient(rgba(250,244,233,.90), rgba(250,244,233,.90)),
  url("assets/leaf-tile.png") repeat;
  background-size: auto, 360px 360px; }
.section.amber { background: var(--amber); }
.section h2 { text-align: center; font-size: 2.2rem; color: var(--rust); margin-bottom: 8px; }
.section h2.on-amber { color: var(--white); text-shadow: 0 2px 0 rgba(131,73,32,.35); }
.section-lede { text-align: center; max-width: 620px; margin: 0 auto 34px; font-size: 1.05rem; }
.section-lede.on-amber { color: var(--cream); }
.section-lede.small { margin-top: 26px; margin-bottom: 0; font-size: .95rem; }
.on-amber-link { color: var(--white); font-weight: 800; }

/* TICKET CARDS */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; max-width: 980px; margin: 0 auto; }
.card { position: relative; background: var(--white); border-radius: var(--radius); padding: 26px 22px 22px; text-align: center;
  border: 3px solid transparent; box-shadow: 0 6px 18px rgba(131,73,32,.12); }
.card.featured { border-color: var(--amber); }
.ribbon { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--amber); color: var(--ink);
  font-weight: 800; font-size: .8rem; padding: 4px 14px; border-radius: 999px; letter-spacing: .4px; text-transform: uppercase; }
.card-icon { width: 68px; height: 68px; margin: 0 auto 2px; }
.card h3 { color: var(--brown); font-size: 1.35rem; margin: 6px 0 2px; }
.price { font-size: 2rem; color: var(--rust); font-weight: 800; margin-bottom: 6px; }
.was { font-size: 1rem; color: #A8988A; text-decoration: line-through; font-weight: 600; }
.card p { font-size: .95rem; min-height: 44px; }
/* Sits where the other cards' description paragraph sits, so the three cards
   keep the same vertical rhythm even though this one has no big price. */
.card-note { font-size: .95rem; min-height: 0 !important; margin-bottom: 4px; }

/* display:table shrink-wraps the list (so it centres as a block) while keeping
   it block-level — inline-block let the stepper float up beside it on wide cards. */
.pass-options { text-align: left; margin: 8px auto 4px; display: table; }
.pass-options label { display: block; font-size: .95rem; font-weight: 700; padding: 3px 0; cursor: pointer; }
.pass-options em { color: var(--rust); font-style: normal; font-size: .8rem; font-weight: 800; }
.pass-options input { accent-color: var(--rust); margin-right: 6px; }

.stepper { display: inline-flex; align-items: center; gap: 16px; margin-top: 12px; background: var(--cream); border-radius: 999px; padding: 6px 10px; }
.step-btn { width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--rust); color: var(--white);
  font-size: 1.3rem; font-weight: 800; cursor: pointer; line-height: 1; }
.step-btn:hover { background: var(--brown); }
.qty { min-width: 26px; font-weight: 800; font-size: 1.15rem; font-family: var(--font-display); }

/* CART */
.cart { max-width: 640px; margin: 30px auto 0; background: var(--white); border-radius: var(--radius); padding: 22px 26px;
  box-shadow: 0 6px 18px rgba(131,73,32,.15); border: 3px solid var(--amber); }
.cart-lines { font-weight: 700; font-size: .98rem; margin-bottom: 12px; }
.cart-lines div { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dashed #E8DCC8; }
.cart-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cart-total { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--rust); }
.cart-fine { font-size: .82rem; color: #7A6A58; margin-top: 12px; }

/* FOOD MENU */
.menu { max-width: 560px; margin: 0 auto; background: var(--cream); border-radius: var(--radius); padding: 26px 30px; box-shadow: 0 8px 22px rgba(74,42,18,.18); }
.menu-item { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; font-weight: 700; font-size: 1.05rem; }
.menu-icon { width: 34px; height: 34px; flex: 0 0 34px; align-self: center; }
.menu-dots { flex: 1; border-bottom: 2px dotted #C9B18C; }
/* Price column carries two lines: dollars on top (what it costs) and the
   ticket equivalent underneath (what you actually hand over at the booth). */
.menu-price { font-family: var(--font-display); font-weight: 800; color: var(--rust); font-size: 1.15rem;
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.menu-tix { font-size: .68rem; font-weight: 800; color: #7A6A58; letter-spacing: .4px; text-transform: uppercase; }
.menu-foot { max-width: 560px; margin: 14px auto 0; text-align: center; font-size: .88rem; font-weight: 700; }
.menu-foot.on-amber { color: var(--cream); }
.menu-item.combo { border-top: 2px solid var(--amber); margin-top: 8px; padding-top: 16px; }
.was-sm { font-size: .85rem; color: #A8988A; text-decoration: line-through; }

/* GAMES */
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 700px; margin: 0 auto; }
.chip { background: var(--white); border: 2px solid var(--amber); color: var(--brown); font-weight: 800;
  padding: 7px 18px 7px 10px; border-radius: 999px; font-size: .95rem;
  display: inline-flex; align-items: center; gap: 9px; }
.chip img { width: 30px; height: 30px; flex: 0 0 30px; }
/* "Hoped for, not confirmed" — dashed so it reads as provisional without
   needing a second sentence of explanation. */
.chip-maybe { border-style: dashed; opacity: .85; }
.chip-maybe em { font-style: normal; font-weight: 700; font-size: .78rem; color: #7A6A58; margin-left: 4px; }
/* Was a faint grey when this was a build-time placeholder; it now carries real
   content over a patterned background, so it needs proper body-text contrast. */
.placeholder-note { text-align: center; margin-top: 26px; font-size: .95rem; color: var(--brown); }
.placeholder-note a { color: var(--rust); font-weight: 800; }
.sub-head { font-family: var(--font-display); color: var(--rust); text-align: center; font-size: 1.15rem;
  margin: 30px 0 16px; display: flex; align-items: center; justify-content: center; gap: 9px; }
.sub-head:first-of-type { margin-top: 6px; }
.sub-head img { width: 30px; height: 30px; }
.note-icon { display: inline-block; width: 30px; height: 30px; vertical-align: -8px; margin-right: 7px; }

/* SPONSORS */
.sponsor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; max-width: 860px; margin: 0 auto; }
.sponsor-slot { background: rgba(250,244,233,.92); border-radius: 16px; height: 110px; display: flex; align-items: center;
  justify-content: center; color: #B49B6B; font-weight: 800; border: 2px dashed #C9A94E; }
.sponsor-slot.filled { flex-direction: column; gap: 10px; border: 2px solid var(--white); background: var(--white);
  color: var(--brown); text-decoration: none; padding: 14px 12px; text-align: center;
  box-shadow: 0 4px 12px rgba(131,73,32,.14); transition: transform .15s ease, box-shadow .15s ease; }
.sponsor-slot.filled:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(131,73,32,.22); }
/* Logos vary wildly in aspect ratio — cap both axes and let object-fit letterbox them
   so a wide wordmark and a tall badge read as the same optical size. */
.sponsor-slot.filled img { width: auto; height: auto; max-width: 88%; max-height: 46px; object-fit: contain; }
/* Squarer logos (Lee's banner) read too small at the 46px cap — let them use a
   little more of the card's height. */
.sponsor-slot.filled.tall img { max-height: 58px; border-radius: 6px; }
/* Secret Society of Books has an illustration but no wordmark file — their site
   sets the name as text over the art — so the card carries the fox plus the
   name in our display face. Tighter gaps keep it inside the 110px card. */
.sponsor-slot.filled.illus { gap: 3px; padding-top: 10px; }
.sponsor-slot.filled.illus img { max-height: 46px; }
.sponsor-slot.filled.illus .sponsor-name-text { font-size: .92rem; line-height: 1.1; }
/* Trees (Sept 9, Jill): logo plus "Club Kitchen" under the role so Patricia's
   location gets a mention. Two text lines in a 110px card — trim the logo and
   the gap so nothing spills. */
.sponsor-slot.filled.two-line { gap: 5px; padding-top: 10px; padding-bottom: 8px; }
.sponsor-slot.filled.two-line img { max-height: 48px; }
/* Tall badge marks (Secret Society of Books' oval) need more height than a
   wordmark to be legible — trade card padding for logo height. */
.sponsor-slot.filled.badge { gap: 6px; padding-top: 10px; padding-bottom: 8px; }
.sponsor-slot.filled.badge img { max-height: 64px; }
.sponsor-slot.filled.two-line .sponsor-role { line-height: 1.2; }
.sponsor-loc { color: var(--rust); letter-spacing: .06em; }
.sponsor-name { font-family: var(--font-display); font-size: 1.22rem; color: var(--rust); line-height: 1.15; }
.sponsor-role { font-size: .78rem; font-weight: 700; color: #8A7862; text-transform: uppercase; letter-spacing: .04em; }
.sponsor-slot.named { flex-direction: column; gap: 4px; }
.sponsor-name-text { font-family: var(--font-display); font-weight: 800; color: var(--brown); font-size: 1.05rem; }
.chips-food .chip { border-color: var(--white); }
/* Final food pricing (Jill + Heather, Sept 2). Price rides inside the chip as
   a small rust pill so the item name stays the thing you read first. */
.chip small { font-size: .74rem; font-weight: 600; color: #8A7862; margin-left: 4px; }
.chip-price { margin-left: 4px; background: var(--rust); color: var(--white); border-radius: 999px;
  padding: 2px 9px; font-size: .82rem; font-weight: 800; line-height: 1.3; }
.sub-head.on-amber-head { color: var(--white); text-shadow: 0 1px 0 rgba(131,73,32,.35); margin-top: 26px; }
/* Oct 1: fifth deal (Coffee + Loaf) — narrower min so all five sit on one row on desktop. */
.deals { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; max-width: 940px; margin: 0 auto; }
.deal { background: var(--white); border-radius: 16px; padding: 16px 16px 14px; text-align: center;
  box-shadow: 0 4px 12px rgba(131,73,32,.16); }
.deal-name { font-family: var(--font-display); font-weight: 800; color: var(--rust); font-size: 1.05rem; }
.deal-price { font-family: var(--font-display); font-weight: 800; color: var(--brown); font-size: 1.7rem; line-height: 1.1; margin: 4px 0 6px; }
.deal p { font-size: .92rem; color: var(--brown); margin: 0; line-height: 1.4; }

/* MINISTRIES — a single card carrying the St. Augustine's parish wordmark,
   linking to saug.ca/ministries (per the church, Sept 2: the specific groups
   attending aren't confirmed, so the parish logo is the safe bet). Logo is
   transparent black-on-white, so it sits on the white tile as-is. */
.ministry-grid { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; max-width: 620px; margin: 0 auto; }
.ministry-card { background: var(--white); border-radius: 16px; padding: 18px 20px 14px; width: 232px;
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  color: var(--brown); text-decoration: none; box-shadow: 0 4px 12px rgba(131,73,32,.14);
  transition: transform .15s ease, box-shadow .15s ease; }
.ministry-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(131,73,32,.22); }
.ministry-card img { width: 88px; height: 88px; object-fit: contain; border-radius: 12px; }
.ministry-card-wide { width: min(100%, 420px); padding: 22px 26px 16px; }
.ministry-card-wide img { width: 100%; max-width: 360px; height: auto; border-radius: 0; }
.ministry-name { font-family: var(--font-display); font-size: 1.05rem; color: var(--rust); line-height: 1.2; }

/* FAQ */
.faq { max-width: 640px; margin: 0 auto; }
.faq details { background: var(--white); border-radius: 14px; padding: 14px 20px; margin-bottom: 10px; box-shadow: 0 3px 10px rgba(131,73,32,.08); }
.faq summary { font-weight: 800; cursor: pointer; color: var(--brown); font-size: 1.02rem; }
.faq p { padding-top: 8px; font-size: .95rem; }

/* FOOTER */
.footer { background: var(--rust); color: var(--cream); text-align: center; padding: 34px 20px; }
.footer a { color: var(--white); }
.footer-fine { font-size: .85rem; opacity: .85; margin-top: 6px; }

/* MODAL */
.modal { position: fixed; inset: 0; background: rgba(74,42,18,.55); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal[hidden] { display: none; }
.modal-box { background: var(--white); border-radius: var(--radius); max-width: 440px; padding: 30px; text-align: center; }
.modal-box h3 { color: var(--rust); font-size: 1.5rem; margin-bottom: 10px; }
.modal-box p { font-size: .98rem; margin-bottom: 12px; }
.modal-order { font-weight: 800; color: var(--brown); }

/* RESPONSIVE */
@media (max-width: 720px) {
  .nav nav { display: none; }
  .brand { font-size: 1.05rem; }
  .nav-inner { gap: 12px; }
  .nav-inner .btn-small { margin-left: auto; white-space: nowrap; }
  .hero-leaves { width: 220px; }
  .section h2 { font-size: 1.8rem; }
}

/* Keep short price facts on one line ("$1 = 1 ticket") */
.nowrap { white-space: nowrap; }

/* Fair-ticket stepper counts in tens and shows the running total */
.stepper-wide .qty { min-width: 6.5em; }
.step-total { margin-top: 8px; font-size: 1.15rem; color: var(--rust); min-height: 0 !important; }
.step-total .step-hint { font-size: .8rem; color: #7A6A58; font-weight: 700; }

/* STICKY CHECKOUT BAR (v24)
   On a phone the Tickets cards push the cart — and its Checkout button — nearly two
   screens below the "+" the parent just tapped, so people did not know where to pay.
   This bar appears as soon as the cart has something in it and stays pinned to the
   bottom of the screen; app.js hides it while the real cart card is in view so there
   is never a second Checkout button competing with the first. */
.cartbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: var(--white);
  border-top: 3px solid var(--amber); box-shadow: 0 -6px 18px rgba(74,42,18,.18);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.cartbar[hidden] { display: none; }
.cartbar-inner { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; gap: 14px; }
.cartbar-sum { display: flex; flex-direction: column; line-height: 1.25; }
.cartbar-sum strong { font-size: .95rem; color: var(--brown); }
#cartBarTotal { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: var(--rust); }
.cartbar .btn { margin-left: auto; white-space: nowrap; }
@media (max-width: 480px) {
  .cartbar-inner { gap: 10px; }
  .cartbar-sum strong { font-size: .82rem; }
  .cartbar .btn-big { font-size: 1rem; padding: 12px 18px; }
  #cartBarTotal { font-size: 1.3rem; }
}

/* Nav cart button — same pill, but it shows what is in the cart once there is something. */
#navCart.has-items { background: var(--amber-deep); color: var(--ink); }

/* "FINISH PAYING" BANNER (v24)
   Square's hosted checkout is a different site; if a parent backs out of it the order
   sits unpaid and they have no way back. This phone remembers its own last unpaid
   order (localStorage only — nothing personal, no email) and offers the link again. */
.resume { max-width: 640px; margin: 0 auto 26px; background: var(--white); border: 3px solid var(--amber);
  border-radius: var(--radius); padding: 16px 44px 16px 20px; position: relative;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; box-shadow: 0 4px 0 rgba(74,42,18,.15); }
.resume[hidden] { display: none; }
.resume-text { font-size: .95rem; }
.resume-text strong { display: block; color: var(--rust); font-size: 1.05rem; }
.resume .btn { margin-left: auto; }
/* Second way out of the banner: build a different order instead of paying this one. */
.resume-change { flex-basis: 100%; text-align: right; background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: .9rem; color: var(--brown);
  text-decoration: underline; padding: 0; }
.resume-change:hover { color: var(--rust); }
/* "Or change my order" scrolls here — clear the sticky nav like .section does. */
#tickets .cards { scroll-margin-top: 90px; }
.resume-x { position: absolute; top: 8px; right: 12px; background: none; border: none; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: #9A8B78; }

/* Keep long notes to the same reading width as .section-lede. */
.placeholder-note.narrow { max-width: 620px; margin-left: auto; margin-right: auto; }