/*
Theme Name: Passage of Arms
Theme URI: https://passageofarms.com
Author: Passage of Arms
Author URI: https://passageofarms.com
Description: A dark, medieval-inspired block theme for the Passage of Arms Fight Championship. Translated from the React prototype into a modern WordPress full-site-editing (FSE) theme.
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: passage-of-arms
Tags: full-site-editing, block-styles, custom-colors, custom-menu, one-column
*/

/* -------------------------------------------------------------------------- */
/* Brand tokens (mirrors prototype/src/styles/globals.css)                    */
/* -------------------------------------------------------------------------- */
:root {
  --poa-crimson: #9c1c2b;
  --poa-navy: #0a2c5e;
  --poa-gold: #e8b923;
  --poa-ink: #0b0b0d;
  --poa-bone: #f4efe6;
  --poa-stone: #1a1a1f;

  --poa-font-display: "UnifrakturCook", "Cinzel", serif;
  --poa-font-heading: "Cinzel", serif;
  --poa-font-body: "Inter", system-ui, sans-serif;

  /* Large-screen breakpoint (prototype lg:). @media rules use 1024px / 1023px
   * literals — var() is not reliable inside @media. Keep both in sync. */
  --large-screen-width: 1024px;

  /* ── Animation timing tokens ──────────────────────────────────────────── */
  /* Adjust these to tune all entrance animations from one place.            */
  --poa-anim-easing:               cubic-bezier(0.16, 1, 0.3, 1);

  /* Durations */
  --poa-anim-dur-xs:               0.5s;   /* eyebrow, short fades          */
  --poa-anim-dur-sm:               0.55s;  /* event-meta panel              */
  --poa-anim-dur-md:               0.6s;   /* CTAs, fallback fades          */
  --poa-anim-dur-lg:               0.65s;  /* most text elements            */
  --poa-anim-dur-xl:               0.7s;   /* event hero image              */
  --poa-anim-dur-2xl:              0.9s;   /* hero mark, gold line sweep    */

  /* Scene 1 — Home hero delays (mark → tagline → CTAs) */
  --poa-anim-hero-mark-delay:      0.2s;
  --poa-anim-hero-tagline-delay:   0.6s;
  --poa-anim-hero-cta-delay:       0.9s;

  /* Scene 2 — Page band delays (eyebrow → title → gold line) */
  --poa-anim-band-eyebrow-delay:   0.1s;
  --poa-anim-band-title-delay:     0.32s;
  --poa-anim-band-line-delay:      0.3s;

  /* Scene 2b — Upcoming Events hero delays */
  --poa-anim-events-eyebrow-delay: 0.15s;
  --poa-anim-events-title-delay:   0.38s;

  /* Scene 3 — Event single delays (image → title → meta → prose) */
  --poa-anim-single-image-delay:   0.1s;
  --poa-anim-single-title-delay:   0.35s;
  --poa-anim-single-meta-delay:    0.55s;
  --poa-anim-single-prose-delay:   0.7s;
}

/* -------------------------------------------------------------------------- */
/* Typographic helpers (from .poa-display / .poa-heading)                     */
/* -------------------------------------------------------------------------- */
.poa-display {
  font-family: var(--poa-font-display);
  letter-spacing: 0.01em;
}

.poa-heading {
  font-family: var(--poa-font-heading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------- */
/* Block margin reset                                                         */
/* WordPress ships default block margins (browser UA + wp-block-styles) that */
/* Tailwind's Preflight would have suppressed in the prototype. These rules   */
/* target only the areas where the theme controls all spacing explicitly.      */
/* -------------------------------------------------------------------------- */

/* Headings inside the page-band carry no intrinsic margin — padding on the
   parent group is the only spacing. */
.poa-page-band .wp-block-heading,
.poa-page-band .wp-block-paragraph {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Headings and paragraphs in the hero content area. */
.poa-hero__content .wp-block-heading,
.poa-hero__content .wp-block-paragraph {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Inside .poa-prose the pattern sets blockGap (1.5 rem) on the parent group,
   which WordPress converts to margin-block-start on sibling blocks. Browser
   default <p> margin-block-end would double-space the paragraphs. */
.poa-prose .wp-block-paragraph {
  margin-block-start: 0;
  margin-block-end: 0;
  padding-block-end: 1em;
}

/* The closing flourish group also controls its own spacing via padding. */
.poa-closing .wp-block-paragraph {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* -------------------------------------------------------------------------- */
/* Site header (sticky, translucent, gold hairline)                          */
/* -------------------------------------------------------------------------- */
.poa-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 11, 13, 0.78);
  border-bottom: 1px solid rgba(232, 185, 35, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Centered max-width row (prototype max-w-7xl); alignwide alone does not apply in template parts. */
.poa-site-header > .poa-container,
.poa-site-footer > .poa-container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--wp--style--global--wide-size, 1280px);
  margin-left: auto;
  margin-right: auto;
}

.poa-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--poa-bone);
}

.poa-brand:hover,
.poa-brand:focus {
  color: var(--poa-bone);
}

.poa-brand-mark {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  object-fit: contain;
}

.poa-brand-text {
  font-family: var(--poa-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  color: var(--poa-bone);
}

.poa-brand-text .poa-of {
  color: var(--poa-gold);
}

/* Navigation (prototype: gap-1, px-4 py-2, rounded-sm, bone/gold) */
.poa-site-header .wp-block-navigation {
  font-family: var(--poa-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  gap: 0.25rem;
}

.poa-site-header .wp-block-navigation .wp-block-navigation-item {
  margin: 0;
}

.poa-site-header .wp-block-navigation-item__content {
  color: var(--poa-bone);
  padding: 0.5rem 0.67rem;
  border-radius: 0.125rem;
  text-decoration: none;
  background: transparent;
  box-shadow: none;
  transition: color 0.15s ease;
}

.poa-site-header .wp-block-navigation-item__content:hover {
  color: var(--poa-gold);
}

/* Current page (prototype active / gold) */
.poa-site-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.poa-site-header .wp-block-navigation-item__content[aria-current="page"],
.poa-site-header .wp-block-navigation-item__content.poa-nav-link--active {
  color: var(--poa-gold);
}

.poa-site-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content:hover,
.poa-site-header .wp-block-navigation-item__content[aria-current="page"]:hover,
.poa-site-header .wp-block-navigation-item__content.poa-nav-link--active:hover {
  color: var(--poa-gold);
}

.poa-site-header .wp-block-navigation-item__content:focus-visible {
  outline: 2px solid var(--poa-gold);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------- */
/* Mobile navigation overlay (prototype match)                                */
/* -------------------------------------------------------------------------- */

/* Drop below the 4rem sticky header; dark semi-transparent background.
 *
 * NOTE: backdrop-filter on .poa-site-header makes it the CSS containing block
 * for any position:fixed descendant. So top/left/right/bottom are relative to
 * the header, not the viewport. We use top:100% (= bottom of the header) and
 * an explicit height to fill the rest of the screen. */
.poa-site-header .wp-block-navigation__responsive-container.is-menu-open {
  top: 100%;
  left: 0;
  right: 0;
  bottom: auto;
  height: calc(100vh - 4rem);
  height: calc(100dvh - 4rem);
  max-height: none;
  background-color: rgba(11, 11, 13, 0.95) !important;
  color: var(--poa-bone) !important;
  border-top: 1px solid rgba(232, 185, 35, 0.2);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 9999;
}

/* Strip WP's large root-padding-aware padding from the open overlay. */
.poa-site-header .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

/* Inner content column — leave room for close button, zero horizontal padding
 * so each item controls its own 1rem left/right gutter. */
.poa-site-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  display: flex;
  flex-direction: column;
  padding: 2.5rem 0 0.75rem;
}

/* li items fill the full overlay width. */
.poa-site-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation-item {
  width: 100%;
}

/* Override WP core's reset of link padding inside the open overlay. */
.poa-site-header .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay))
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation-item__content {
  padding: 0.75rem 1rem;
}

/* Stacked links — fill full width, right-aligned text, matching gutters. */
.poa-site-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: right;
  color: var(--poa-bone) !important;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: transparent !important;
  text-decoration: none;
}

/* No divider on the last item. */
.poa-site-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation-item:last-child
  .wp-block-navigation-item__content {
  border-bottom: none;
}

/* Active / current page — gold in overlay. */
.poa-site-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation-item__content[aria-current="page"],
.poa-site-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation-item__content.poa-nav-link--active {
  color: var(--poa-gold) !important;
}

/* Close button — visible against dark background. */
.poa-site-header .wp-block-navigation__responsive-container-close {
  color: var(--poa-bone);
  top: 0.75rem;
  right: 1rem;
  padding: 0.25rem;
}

.poa-site-header .wp-block-navigation__responsive-container-close:hover {
  color: var(--poa-gold);
}

/* Hamburger open button — bone / gold hover. */
.poa-site-header .wp-block-navigation__responsive-container-open {
  color: var(--poa-bone);
  padding: 0.5rem;
}

.poa-site-header .wp-block-navigation__responsive-container-open:hover {
  color: var(--poa-gold);
}

/* -------------------------------------------------------------------------- */
/* Navigation breakpoint (override WP core 600px → --large-screen-width)      */
/* -------------------------------------------------------------------------- */
/* Below large screen — hamburger nav (matches prototype lg:). */
@media (max-width: 1023px) {
  .poa-site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }

  .poa-site-header
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none !important;
  }
}

/* Large screen and up — inline nav. */
@media (min-width: 1024px) {
  .poa-site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none !important;
  }

  .poa-site-header
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: block !important;
    width: 100%;
    position: relative;
    z-index: auto;
    background-color: inherit;
  }

  .poa-site-header
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open)
    .wp-block-navigation__responsive-container-close {
    display: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Hero (front page)                                                          */
/* -------------------------------------------------------------------------- */
/* Hero sits directly under the 4rem sticky header; no gap above background. */
.wp-site-blocks > .wp-block-template-part + main {
  margin-block-start: 0;
}

main:has(> .poa-hero) {
  margin-block-start: 0;
}

/* Front page: header + hero + footer fill the viewport with no gaps between sections. */
body.home .wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  min-height: 100vh;
}

body.home .wp-site-blocks > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

body.home .wp-site-blocks > main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body.home .wp-site-blocks > main > .poa-hero {
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 0;
}

.poa-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-top: 0;
  padding-bottom: 0;
  min-height: calc(100vh - 4rem);
  min-height: calc(100dvh - 4rem);
  background: linear-gradient(135deg, #1a1a1f 0%, #0a2c5e 50%, #0b0b0d 100%);
}

.poa-hero.has-global-padding {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.poa-hero > .wp-block-template-part {
  margin: 0;
  max-width: none;
}

.poa-hero > .wp-block-template-part:first-of-type {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.poa-hero > .wp-block-template-part:last-of-type {
  position: relative;
  z-index: 10;
  width: 100%;
  flex: 0 0 auto;
}

.poa-hero__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  max-width: none;
}

.poa-hero__background .wp-block-video.poa-hero__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  max-width: none;
  pointer-events: none;
}

.poa-hero__background .wp-block-video.poa-hero__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
}

.poa-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  max-width: none;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 15, 0.55) 0%,
    rgba(20, 20, 25, 0.75) 100%
  );
  pointer-events: none;
}

.poa-hero__content {
  position: relative;
  z-index: 10;
  width: 100%;
  padding-top: var(--wp--preset--spacing--70, 2.5rem);
  padding-bottom: var(--wp--preset--spacing--70, 2.5rem);
  box-sizing: border-box;
}

.poa-hero__mark {
  display: block;
  width: 100%;
  max-width: 28rem;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.6));
}

.poa-hero__tagline {
  color: var(--poa-gold);
  font-size: 0.85rem;
  letter-spacing: 0.4em;
}

/* -------------------------------------------------------------------------- */
/* Buttons (crimson fill + bone outline, square corners)                      */
/* -------------------------------------------------------------------------- */
.poa-btn .wp-block-button__link,
.wp-block-button.poa-btn > .wp-block-button__link {
  font-family: var(--poa-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  border-radius: 0;
  padding: 0.75rem 1.5rem;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.poa-btn--solid .wp-block-button__link {
  background: var(--poa-crimson);
  color: var(--poa-bone);
}

.poa-btn--solid .wp-block-button__link:hover {
  transform: translateY(-1px);
}

.poa-btn--outline .wp-block-button__link {
  background: transparent;
  color: var(--poa-bone);
  border: 1px solid var(--poa-bone);
}

.poa-btn--outline .wp-block-button__link:hover {
  background: var(--poa-bone);
  color: var(--poa-ink);
}

/* Gold header CTA — compact, gold-filled, ink text. */
.poa-btn--gold .wp-block-button__link {
  background: var(--poa-gold);
  color: var(--poa-ink);
  border: none;
  padding: 0.4rem 0.85rem;
  font-size: 0.72rem;
}

.poa-btn--gold .wp-block-button__link:hover {
  background: var(--poa-bone);
  color: var(--poa-ink);
  transform: translateY(-1px);
}

/* Nudge the CTA left-margin so it sits apart from the last nav link. */
.poa-site-header .poa-header-cta {
  margin-left: 0.5rem;
}


.poa-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation {
  margin-left: 0;
  margin-top: 0.75rem;
  padding: 0 1rem;
  width: 100%;
  box-sizing: border-box;
}

/* Inside the mobile overlay: full-width Buy Tickets, matching 1rem gutters. */
.poa-site-header .wp-block-navigation__responsive-container.is-menu-open
  .poa-header-cta {
  margin-left: 0;
  margin-top: 0.75rem;
  padding: 0 1rem;
  width: 100%;
  box-sizing: border-box;
}

.poa-site-header .wp-block-navigation__responsive-container.is-menu-open
  .poa-header-cta .wp-block-button {
  width: 100%;
}

.poa-site-header .wp-block-navigation__responsive-container.is-menu-open
  .poa-btn--gold
  .wp-block-button__link {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 0.65rem 1rem;
  font-size: 0.78rem;
  justify-content: center;
}

/* -------------------------------------------------------------------------- */
/* Page header band (eyebrow + display title over a gradient)                 */
/* -------------------------------------------------------------------------- */
.poa-page-band {
  border-bottom: 1px solid rgba(232, 185, 35, 0.25);
  background: linear-gradient(135deg, var(--poa-navy) 0%, var(--poa-ink) 100%);
}

.poa-page-band--crimson {
  background: linear-gradient(135deg, var(--poa-crimson) 0%, var(--poa-ink) 100%);
}

.poa-eyebrow {
  color: var(--poa-gold);
  font-size: 0.78rem;
  letter-spacing: 0.4em;
}

.poa-page-title {
  color: var(--poa-bone);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.05;
}

.poa-page-title .poa-accent-crimson {
  color: var(--poa-crimson);
}

.poa-page-title .poa-accent-gold {
  color: var(--poa-gold);
}

.poa-prose p {
  color: rgba(244, 239, 230, 0.88);
  line-height: 1.75;
}

.poa-closing {
  border-top: 1px solid rgba(232, 185, 35, 0.3);
}

.poa-closing p {
  font-family: var(--poa-font-display);
  color: var(--poa-gold);
  font-size: 1.5rem;
}

/* -------------------------------------------------------------------------- */
/* Contact form (presentational, mirrors prototype)                           */
/* -------------------------------------------------------------------------- */
.poa-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.poa-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.poa-form .poa-field-label {
  font-family: var(--poa-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  color: var(--poa-gold);
}

.poa-form input,
.poa-form textarea {
  background: transparent;
  border: 1px solid rgba(244, 239, 230, 0.3);
  color: var(--poa-bone);
  padding: 0.5rem 0.75rem;
  font-family: var(--poa-font-body);
  outline: none;
}

.poa-form textarea {
  resize: none;
}

.poa-form input:focus,
.poa-form textarea:focus {
  border-color: var(--poa-gold);
}

.poa-form__submit {
  align-self: flex-start;
  margin-top: 0.5rem;
  font-family: var(--poa-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  background: var(--poa-crimson);
  color: var(--poa-bone);
  border: none;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
}

.poa-contact-aside h3 {
  font-family: var(--poa-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--poa-gold);
  font-size: 0.85rem;
}

.poa-contact-aside a {
  color: var(--poa-bone);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.poa-contact-aside a:hover {
  color: var(--poa-gold);
}

.poa-social {
  display: flex;
  gap: 1rem;
}

.poa-social svg {
  width: 22px;
  height: 22px;
}

/* Contact page: two-column form/aside layout (matches the prototype grid). */
.poa-contact-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-width: 768px;
  margin: 0 auto;
}

/* Honeypot: hidden from humans and assistive tech, present for bots. */
.poa-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Post-submission status notices. */
.poa-form-notice {
  margin-bottom: 1.5rem;
  padding: 0.85rem 1rem;
  border-left: 3px solid;
  font-family: var(--poa-font-body);
  font-size: 0.95rem;
}

.poa-form-notice--success {
  border-color: var(--poa-gold);
  background: rgba(232, 185, 35, 0.12);
  color: var(--poa-bone);
}

.poa-form-notice--error {
  border-color: var(--poa-crimson);
  background: rgba(156, 28, 43, 0.18);
  color: var(--poa-bone);
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                     */
/* -------------------------------------------------------------------------- */
.poa-site-footer {
  border-top: 1px solid rgba(232, 185, 35, 0.2);
  background: var(--poa-stone);
  color: rgba(244, 239, 230, 0.7);
}

.poa-footer-mark {
  display: block;
  width: 2rem;
  height: 2rem;
  flex: none;
  object-fit: contain;
}

.poa-footer-brand {
  font-family: var(--poa-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
}

/* -------------------------------------------------------------------------- */
/* Events - hero banner (shorter variant of the full-screen home hero)        */
/* -------------------------------------------------------------------------- */
/* Override the home hero's full-viewport height for a compact page banner. */
.poa-events-hero {
  min-height: 0;
  height: auto;
}

.poa-events-hero.poa-hero {
  min-height: clamp(18rem, 38vh, 26rem);
}

.poa-events-hero__content {
  padding-top: var(--wp--preset--spacing--70, 2.5rem);
  padding-bottom: var(--wp--preset--spacing--70, 2.5rem);
}

.poa-events-hero .poa-page-title {
  margin: 0;
}

/* -------------------------------------------------------------------------- */
/* Events - listing (filter tabs, card grid, empty state)                     */
/* -------------------------------------------------------------------------- */
.poa-events {
  background: var(--poa-ink);
}

.poa-events__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--wp--style--global--wide-size, 1280px);
  margin-left: auto;
  margin-right: auto;
  padding: var(--wp--preset--spacing--70, 2.5rem) var(--wp--preset--spacing--40, 1rem);
}

/* Upcoming / Past tabs */
.poa-events-filter {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 2.5rem;
}

.poa-events-filter__tab {
  font-family: var(--poa-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  color: var(--poa-bone);
  text-decoration: none;
  padding: 0.5rem 1.25rem;
  border: 1px solid rgba(244, 239, 230, 0.25);
  border-radius: 0;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.poa-events-filter__tab:hover {
  color: var(--poa-gold);
  border-color: var(--poa-gold);
}

.poa-events-filter__tab.is-active {
  color: var(--poa-ink);
  background: var(--poa-gold);
  border-color: var(--poa-gold);
}

.poa-events-filter__tab:focus-visible {
  outline: 2px solid var(--poa-gold);
  outline-offset: 2px;
}

/* Card grid */
.poa-events__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.poa-event-card {
  display: flex;
  flex-direction: column;
  background: var(--poa-stone);
  border: 1px solid rgba(232, 185, 35, 0.18);
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.poa-event-card:hover {
  transform: translateY(-2px);
  border-color: rgba(232, 185, 35, 0.5);
}

.poa-event-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--poa-ink);
}

.poa-event-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.poa-event-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a1f 0%, #0a2c5e 100%);
}

.poa-event-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  flex: 1 1 auto;
}

.poa-event-card__date {
  font-family: var(--poa-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: var(--poa-gold);
  margin: 0;
}

.poa-event-card__title {
  font-family: var(--poa-font-heading);
  font-size: 1.15rem;
  margin: 0;
  line-height: 1.2;
}

.poa-event-card__title a {
  color: var(--poa-bone);
  text-decoration: none;
}

.poa-event-card__title a:hover {
  color: var(--poa-gold);
}

.poa-event-card__location {
  font-size: 0.85rem;
  color: rgba(244, 239, 230, 0.7);
  margin: 0;
}

.poa-event-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
}

/* Empty state */
.poa-events-empty {
  text-align: center;
  padding: 4rem 1rem;
}

.poa-events-empty__title {
  font-family: var(--poa-font-heading);
  color: var(--poa-bone);
  font-size: 1.5rem;
  margin: 0 0 0.5rem;
}

.poa-events-empty__text {
  color: rgba(244, 239, 230, 0.6);
  margin: 0;
}

/* -------------------------------------------------------------------------- */
/* Events - single event detail                                               */
/* -------------------------------------------------------------------------- */
.poa-event-single__image img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(232, 185, 35, 0.18);
}

.poa-event-single__title {
  text-align: center;
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
}

.poa-event-meta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--poa-stone);
  border: 1px solid rgba(232, 185, 35, 0.18);
}

.poa-event-meta__row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.poa-event-meta__row--address {
  flex-wrap: wrap;
}

.poa-event-meta__icon {
  flex: none;
  color: var(--poa-gold);
  margin-top: 0.1rem;
}

.poa-event-meta__text {
  color: var(--poa-bone);
  line-height: 1.5;
}

.poa-event-meta__directions {
  margin-left: auto;
}

.poa-event-meta__cta {
  margin-top: 0.25rem;
}

/* ========================================================================== */
/* Entrance animations                                                        */
/* ========================================================================== */
/* Easing: ease-out quint — decisive, decelerating, cinematic. No bounce.    */
/* animation-fill-mode: both → element hidden before delay, stays at end.   */

/* -------------------------------------------------------------------------- */
/* Keyframes                                                                  */
/* -------------------------------------------------------------------------- */

@keyframes poa-fade-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes poa-scale-in {
  from {
    opacity: 0;
    transform: scale(0.86);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes poa-line-sweep {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes poa-reveal-image {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(16px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* -------------------------------------------------------------------------- */
/* Scene 1 — Home hero                                                        */
/* -------------------------------------------------------------------------- */
/* Staggered cascade: mark → tagline → CTAs.                                 */

.poa-hero__mark {
  animation: poa-scale-in var(--poa-anim-dur-2xl) var(--poa-anim-easing) var(--poa-anim-hero-mark-delay) both;
}

.poa-hero__tagline {
  animation: poa-fade-up var(--poa-anim-dur-lg) var(--poa-anim-easing) var(--poa-anim-hero-tagline-delay) both;
}

.poa-hero__content .wp-block-buttons {
  animation: poa-fade-up var(--poa-anim-dur-md) var(--poa-anim-easing) var(--poa-anim-hero-cta-delay) both;
}

/* -------------------------------------------------------------------------- */
/* Scene 2 — Page header bands                                                */
/* -------------------------------------------------------------------------- */
/* Gold line sweeps left → right across the bottom border while text rises.  */
/* position:relative + overflow:hidden let the ::after stay within bounds.   */

.poa-page-band {
  position: relative;
  overflow: hidden;
}

.poa-page-band::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(232, 185, 35, 0.55);
  transform-origin: left center;
  animation: poa-line-sweep var(--poa-anim-dur-2xl) ease-out var(--poa-anim-band-line-delay) both;
}

.poa-page-band .poa-eyebrow {
  animation: poa-fade-up var(--poa-anim-dur-xs) var(--poa-anim-easing) var(--poa-anim-band-eyebrow-delay) both;
}

.poa-page-band .poa-page-title {
  animation: poa-fade-up var(--poa-anim-dur-lg) var(--poa-anim-easing) var(--poa-anim-band-title-delay) both;
}

/* -------------------------------------------------------------------------- */
/* Scene 2b — Upcoming Events hero banner                                     */
/* -------------------------------------------------------------------------- */
/* The events page uses .poa-events-hero__content (not .poa-page-band),      */
/* so it needs its own scene targeting the same eyebrow + title structure.   */

.poa-events-hero__content .poa-eyebrow {
  animation: poa-fade-up var(--poa-anim-dur-xs) var(--poa-anim-easing) var(--poa-anim-events-eyebrow-delay) both;
}

.poa-events-hero__content .poa-page-title {
  animation: poa-fade-up var(--poa-anim-dur-lg) var(--poa-anim-easing) var(--poa-anim-events-title-delay) both;
}

/* -------------------------------------------------------------------------- */
/* Scene 3 — Event detail screen                                              */
/* -------------------------------------------------------------------------- */
/* Image depth-pulls up first, then title, meta panel, and body prose.       */

.poa-event-single__image {
  animation: poa-reveal-image var(--poa-anim-dur-xl) var(--poa-anim-easing) var(--poa-anim-single-image-delay) both;
}

.poa-event-single .poa-page-title {
  animation: poa-fade-up var(--poa-anim-dur-lg) var(--poa-anim-easing) var(--poa-anim-single-title-delay) both;
}

.poa-event-single .poa-event-meta {
  animation: poa-fade-up var(--poa-anim-dur-sm) var(--poa-anim-easing) var(--poa-anim-single-meta-delay) both;
}

.poa-event-single .poa-prose {
  animation: poa-fade-up var(--poa-anim-dur-xs) var(--poa-anim-easing) var(--poa-anim-single-prose-delay) both;
}

/* -------------------------------------------------------------------------- */
/* Accessibility — respect reduced-motion preference                          */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .poa-hero__mark,
  .poa-hero__tagline,
  .poa-hero__content .wp-block-buttons,
  .poa-page-band::after,
  .poa-page-band .poa-eyebrow,
  .poa-page-band .poa-page-title,
  .poa-events-hero__content .poa-eyebrow,
  .poa-events-hero__content .poa-page-title,
  .poa-event-single__image,
  .poa-event-single .poa-page-title,
  .poa-event-single .poa-event-meta,
  .poa-event-single .poa-prose {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Maintenance page                                                           */
/* -------------------------------------------------------------------------- */
.poa-site-header--minimal .poa-brand--static {
  pointer-events: none;
}

.poa-maintenance {
  text-align: center;
}

.poa-maintenance__mark {
  display: block;
  width: min(320px, 80vw);
  height: auto;
  margin: 0 auto var(--wp--preset--spacing--50, 2rem);
}

.poa-maintenance .poa-eyebrow {
  margin-top: 0;
}

.poa-maintenance .poa-page-title {
  margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
}

.poa-maintenance .poa-maintenance-message {
  margin-bottom: var(--wp--preset--spacing--50, 2rem);
}