/* Small layout tweaks on top of Pico's defaults */
/*
 * Pico's `nav` is a flex row but leaves align-items at the default
 * (stretch), so the left-hand brand stretches to the nav's full height
 * while the right-hand group stays centred — and the two sit on
 * different lines. Centre everything on the same axis.
 */
header nav {
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

/* Logo stays left; the links, CTA and Facebook icon group to the right */
header nav .nav-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-left: auto;
}

/* Cancel out Pico's negative list margins inside the right-hand group */
header nav .nav-right ul {
  margin: 0;
}

/* Size the Facebook icon to sit in line with the nav text */
header nav .nav-right > a > svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

/* Constrain the whole page — header, body and footer — to one shared
   shell: the same max-width and the same 1rem horizontal padding on every
   screen size and every page. Nothing ever sits closer than 1rem to the
   viewport edge, and the logo, the page heading and the content below
   always line up. */
header,
main.container,
footer {
  max-width: min(72rem, 100%);
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Homepage: alternating image + copy cards -----------------------------
   Card --a: image left, dark moss background.
   Card --b: image right, dark plum background. */
.feature-cards {
  display: grid;
  gap: 1.5rem;
  margin-block: 2.5rem;
}

.feature-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: 1.75rem;
  border-radius: 0.5rem;
  color: #f5eede;
}

.feature-card--a {
  background: #21302a;
}

.feature-card--b {
  background: #33222c;
}

/* Even cards: flip the image to the right-hand side */
.feature-card--b .feature-card__media {
  order: 2;
}

.feature-card__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.25rem;
}

.feature-card h2 {
  margin-block: 0 0.5rem;
  font-size: 1.25rem; /* Nosifer is huge — keep card titles modest */
  color: inherit;
}

.feature-card p {
  margin-block: 0;
  color: rgba(245, 238, 222, 0.82);
}

@media (max-width: 600px) {
  .feature-card {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.25rem;
  }
  .feature-card .feature-card__media {
    order: 0;
  }
  .feature-card .feature-card__copy {
    order: 1;
  }
}

/* Site logo (replaces the old ghost emoji in the nav) ----------
   Black line art on transparent; the site is dark-only, so invert it
   to white. */
header nav a[rel=home] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-logo {
  width: 2rem;
  height: 2rem;
  flex: none;
  filter: invert(1);
}

/* Footer: the venue logo and the editable one-liner stay grouped and
   centered in the middle column, while the "Contact us" link sits in the
   right column, pushed to the right edge. (Grid: 1fr spacer | auto
   content | 1fr spacer.) */
footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.footer-main {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.footer-contact {
  grid-column: 3;
  justify-self: end;
  white-space: nowrap;
}

@media (max-width: 600px) {
  /* Stack: the logo + one-liner row first (centered), the contact link
     below it, still right-aligned. */
  footer {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .footer-main,
  .footer-contact {
    grid-column: 1;
  }
  .footer-contact {
    justify-self: end;
  }
}

/* Pico gives <small> width: 100% (which forces a wrap) and a negative
   top margin — neutralize both. */
footer small {
  width: auto;
  margin: 0;
}

/* The one-liner's <p> would otherwise pick up the editable-section
   paragraph margin, making the line's box taller than its text and
   skewing it against the logo. */
footer [data-editable] p {
  margin: 0;
}

.footer-logo {
  height: 2.75rem;
  width: auto;
  flex: none;
  /* White badge: the logo art itself sits on white, so pad it on white
     and round the corners. */
  background: #fff;
  padding: 0.3125rem 0.625rem; /* ~5px vertical, ~10px horizontal */
  border-radius: 0.5rem;
}

/* Logos inside feature-card media cells (e.g. nonprofit logos) ------
   They keep the same box as the 3:2 photos (max-width: 100%,
   max-height: 21.75rem ≈ photo height at full column width) and sit on
   the inner edge of the media cell so the logo faces the card center:
   --a cards (image left) right-align, --b cards (image right) left-align. */
.feature-card__media--logo img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 21.75rem;
  object-fit: contain;
}

.feature-card--a .feature-card__media--logo img {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

.feature-card--b .feature-card__media--logo img {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

/* Home: intro split — editable copy on the left, small side card on the
   right (plum, like the --b cards); stacks on mobile. */
.intro-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.intro-side {
  background: #33222c;
  color: #f5eede;
  border-radius: 0.5rem;
  padding: 1.75rem;
  min-height: 5rem;
}

@media (max-width: 600px) {
  .intro-split {
    grid-template-columns: 1fr;
  }
}

/* Editable sections: a touch more paragraph/list spacing, so copy can be
   spaced out without empty-<p> spacer hacks. */
[data-editable] p,
[data-editable] ul {
  margin-bottom: 1.25rem;
}

/* The CTA lives in its own editable region. The anchor is styled on its
   own so the button look survives Quill dropping the .button classes on
   save. */
.intro-cta {
  margin-top: 1.5rem;
}

/* Halloween accent: pumpkin with near-black text — the site's dark
   plums and slate blues are all low-contrast for white, so the CTA gets
   the one loud, on-theme color. */
:root {
  --cta-accent: #e8872b;
  --cta-accent-hover: #f29c4b;
  --cta-ink: #221407;
}

.intro-cta a {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 1.1rem;
  text-decoration: none;
}

/* Both CTAs (hero + header) share the accent. */
.intro-cta a,
a.cta {
  background: var(--cta-accent);
  border: 1px solid var(--cta-accent);
  color: var(--cta-ink);
}

/* The header CTA is an anchor — Pico's .button metrics only apply to
   real button elements — so give it the button shape itself. */
a.cta {
  padding: 0.4rem 1rem;
  border-radius: 0.5rem;
}

.intro-cta a:hover,
.intro-cta a:focus,
a.cta:hover,
a.cta:focus {
  background: var(--cta-accent-hover);
  border-color: var(--cta-accent-hover);
  color: var(--cta-ink);
}

/* 404 page (served by CloudFront's error response, see src/404.njk) ---- */
.error-page {
  max-width: 36rem;
  margin-inline: auto;
  text-align: center;
}

/* The big 404: Nosifer (the H1 face), in the pumpkin accent — the same
   loud on-theme color the Reserve Tickets button uses. */
.error-page__code {
  margin: 0;
  font-family: "Nosifer", "Rosarivo", "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  font-size: 4rem;
  line-height: 1.3;
  color: var(--cta-accent);
}

.error-page h1 {
  margin-block: 0.5rem 1rem;
}

/* Contact page ------------------------------------------------------------ */
.contact-section {
  max-width: 36rem;
  margin-inline: auto;
}

.contact-section h1 {
  margin-block-end: 0.5rem;
}

.contact-form {
  margin-block-start: 1.5rem;
}

/* Captcha: the SVG code, a refresh button and the short answer box on one
   row (wrapping on narrow screens). */
.captcha-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.captcha-image {
  display: inline-flex;
  min-height: 3rem;
  line-height: 1;
}

/* Placeholder while the challenge is still loading. */
.captcha-image:empty::after {
  content: "loading…";
  opacity: 0.6;
}

.captcha-image svg {
  display: block;
  height: 3rem;
  width: auto;
}

.captcha-input {
  width: 8rem;
  flex: none;
  text-transform: uppercase;
}

/* Status line under the form. */
.form-status {
  min-height: 1.25rem;
  margin: 0.5rem 0 0;
}

.form-status:empty {
  display: none;
}

.form-status.success {
  color: #7fd694;
}

.form-status.error {
  color: #ff9d8f;
}

.contact-offline code {
  font-size: 0.9em;
}