/* ==========================================================================
   Denver Elks Lodge #17 — Main Stylesheet
   Source of truth: WEBSITE BUILD/mockups/index.html
   Do not add styles to style.css — that file is the theme header only.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Purple palette — fixed brand tokens */
  --p50:  #EEEDFE;
  --p100: #CECBF6;
  --p200: #AFA9EC;
  --p400: #7F77DD;
  --p600: #534AB7;
  --p800: #3C3489;
  --p900: #26215C;
  --p950: #1d1a47;

  /* Gold — --color-accent is output by Customizer via wp_head; fallback here */
  --gold:       var(--color-accent, #C59B3A);
  --gold-light: #E8C96A;
}


/* --------------------------------------------------------------------------
   1. Reset / Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: var(--p950);
}

/* Smooth in-page jumps for anchor CTAs (hero button -> #upcoming-events). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background: var(--p950);
  color: var(--p900);
}

body.menu-open { overflow: hidden; }

img { display: block; max-width: 100%; }

/* Reset browser and WP block library default link styles.
   Component rules set explicit colors and decoration as needed. */
a {
  color: inherit;
  text-decoration: none;
}


/* --------------------------------------------------------------------------
   2. Site Header & Nav
   -------------------------------------------------------------------------- */

/* On the homepage the header floats over the hero */
.home .site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
}

.nav-wrap {
  position: relative;
  z-index: 5;
  margin: 28px 40px 0;
}

nav.site-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  padding: 0 20px 0 184px;
  background: var(--p950);
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(13,11,38,0.4);
}

.nav-logo {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

/* WP wraps custom-logo in an <a> */
.nav-logo img,
.nav-logo .custom-logo-link img {
  width: 132px;
  height: 132px;
  object-fit: contain;
}

.nav-logo .custom-logo-link { display: block; line-height: 0; }

.nav-links {
  display: flex;
  gap: 4px;
  height: 100%;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 16px;
  cursor: default;
}

/* Extend hit area downward to bridge gap to mega card, preventing hover flicker */
.nav-item::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 0;
  right: 0;
  height: 16px;
}

/* Top-level labels (has-children items) and links (leaf items) */
.nav-item > span,
.nav-item > a.nav-item-label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--p100);
  transition: color .15s ease;
  text-decoration: none;
}

/* Spans belong to items with mega menus — hover navigates via the dropdown */
.nav-item > span { pointer-events: none; }

.nav-item:hover > span,
.nav-item:hover > a.nav-item-label { color: var(--p50); }

.nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-social {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-social a,
.social-links a {
  color: var(--p100);
  display: flex;
  transition: color .15s ease;
}

.nav-social a:hover,
.social-links a:hover { color: var(--p50); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 16px;
  text-decoration: none;
  transition: opacity .15s ease;
}

.nav-cta:hover { opacity: 0.88; }

.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  width: 38px;
  height: 38px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--p50);
  border-radius: 2px;
}

.nav-hamburger span + span { margin-top: 5px; }


/* --------------------------------------------------------------------------
   3. Mega Menu
   -------------------------------------------------------------------------- */
.mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 6;
}

.nav-item:hover .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mega-card {
  background: var(--p50);
  border-top: 3px solid var(--gold);
  border-radius: 18px;
  padding: 24px 28px;
  box-shadow: 0 24px 48px rgba(13,11,38,0.38);
  display: flex;
  gap: 36px;
  transform: translateY(6px);
  transition: transform .18s ease;
}

.nav-item:hover .mega-card { transform: translateY(0); }

.mega-col {
  display: flex;
  flex-direction: column;
  min-width: 200px;
}

.mega-group { margin-bottom: 14px; }
.mega-group:last-child { margin-bottom: 0; }

.mega-group-label {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--p400);
  font-weight: 700;
  padding: 6px 12px 4px;
}

.mega-link {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--p900);
  text-decoration: none;
  padding: 9px 12px;
  border-radius: 8px;
  white-space: nowrap;
}

.mega-link:hover { background: var(--p100); }


/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 640px;
  background: var(--p900);
  overflow: hidden;
}

/* Pull hero up behind the floating header */
.home .hero {
  padding-top: 136px; /* 28px top margin + 80px nav + 28px breathing room */
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  filter: saturate(0.8);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(38,33,92,0.97) 0%,
    rgba(38,33,92,0.88) 40%,
    rgba(38,33,92,0.3)  72%,
    rgba(38,33,92,0.1)  100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 90px 48px;
  max-width: 580px;
}

.hero-eyebrow {
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 20px;
  font-weight: 600;
}

.hero-h {
  font-size: 58px;
  font-weight: 700;
  line-height: 1.02;
  color: var(--p50);
}

.hero-h em {
  color: var(--p200);
  font-style: normal;
  display: block;
}

.hero-sub {
  font-size: 16px;
  color: var(--p100);
  margin-top: 20px;
  line-height: 1.6;
  max-width: 420px;
}

.hero-btn {
  display: inline-block;
  margin-top: 30px;
  background: var(--gold);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 3px;
  text-decoration: none;
  transition: opacity .15s ease;
}

.hero-btn:hover { opacity: 0.88; }


/* --------------------------------------------------------------------------
   5. Hours Card
   -------------------------------------------------------------------------- */
.hours-card {
  position: absolute;
  right: 48px;
  bottom: 48px;
  z-index: 3;
  background: var(--p50);
  border-radius: 16px;
  padding: 22px 26px;
  width: 270px;
  border: 0.5px solid var(--p100);
  box-shadow: 0 20px 44px rgba(13,11,38,0.3);
}

.hours-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.hours-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--p400);
  flex-shrink: 0;
}

.hours-status-row.is-open .hours-dot {
  background: #3FAE5C;
  box-shadow: 0 0 0 3px rgba(63,174,92,0.18);
}

/* OPENS LATER TODAY — amber dot */
.hours-status-row.is-opens-at .hours-dot {
  background: #D4900A;
  box-shadow: 0 0 0 3px rgba(212,144,10,0.18);
}

/* CLOSED TODAY — red dot */
.hours-status-row.is-closed .hours-dot {
  background: #D94F4F;
  box-shadow: 0 0 0 3px rgba(217,79,79,0.18);
}

.hours-status {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--p400);
}

.hours-status-row.is-open .hours-status    { color: #2E8B4F; }
.hours-status-row.is-opens-at .hours-status { color: #9A6200; }
.hours-status-row.is-closed .hours-status   { color: #B03030; }

.hours-date {
  font-size: 11px;
  color: var(--p400);
  margin-bottom: 3px;
}

.hours-today-range {
  font-size: 19px;
  font-weight: 700;
  color: var(--p900);
  line-height: 1.3;
}

.hours-divider {
  height: 1px;
  background: var(--p100);
  margin: 16px 0;
}

/* Base hours display lines — content written by JS from Sheets data */
.hours-base {
  font-size: 13px;
  font-weight: 600;
  color: var(--p600);
}

.hours-base--2 { margin-top: 4px; }

/* Special notice line — hidden until JS populates it */
.hours-special {
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  margin-top: 10px;
  line-height: 1.4;
}

.hours-note {
  font-size: 11px;
  color: var(--p400);
  margin-top: 7px;
  line-height: 1.5;
}

.hours-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--p600);
  text-decoration: none;
  border-bottom: 1px solid var(--p400);
  padding-bottom: 2px;
}


/* --------------------------------------------------------------------------
   6. Feature Splits
   -------------------------------------------------------------------------- */
.feature-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.feature-img {
  position: relative;
  min-height: 480px;
  overflow: hidden;
}

.feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.feature-text {
  background: var(--p800);
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feature-text.mid { background: var(--p600); }

.feature-tag {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--p400);
  margin-bottom: 18px;
  font-weight: 600;
}

.feature-text.mid .feature-tag { color: var(--p100); }

.feature-h {
  font-size: 32px;
  font-weight: 700;
  color: var(--p50);
  line-height: 1.25;
  margin-bottom: 18px;
}

.feature-body {
  font-size: 14px;
  color: var(--p200);
  line-height: 1.7;
  max-width: 380px;
}

.feature-text.mid .feature-body { color: var(--p50); }

.feature-link {
  display: inline-block;
  margin-top: 22px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--p50);
  border-bottom: 1px solid var(--p400);
  padding-bottom: 4px;
  text-decoration: none;
}


/* --------------------------------------------------------------------------
   7. Membership Steps
   -------------------------------------------------------------------------- */
.steps-wrap {
  padding: 100px 48px 70px;
  background: #f7f5ff;
}

.steps-tag {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--p400);
  margin-bottom: 10px;
  font-weight: 600;
  text-align: center;
}

.steps-h {
  font-size: 34px;
  font-weight: 700;
  color: var(--p900);
  margin-bottom: 56px;
  text-align: center;
}

.steps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.step { padding: 0 36px 0 0; }

.step-photo {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 20px;
  object-position: center top;
}

.step-num {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--p200);
  margin-bottom: 10px;
  font-weight: 700;
}

.step-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--p900);
  margin-bottom: 10px;
  line-height: 1.3;
}

.step-body {
  font-size: 14px;
  color: var(--p600);
  line-height: 1.65;
}


/* --------------------------------------------------------------------------
   8. Events Band
   -------------------------------------------------------------------------- */
.events-band {
  background: var(--p900);
  padding: 80px 48px;
}

.eb-head {
  text-align: center;
  margin-bottom: 50px;
}

.eb-tag {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--p400);
  margin-bottom: 10px;
  font-weight: 600;
}

.eb-h {
  font-size: 32px;
  font-weight: 700;
  color: var(--p50);
}

.eb-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 4px;
}

.eb-card {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--p800);
}

.eb-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.eb-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(38,33,92,0) 40%, rgba(38,33,92,0.92) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
}

.eb-card.small { min-height: 178px; }

.eb-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.eb-date {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--p200);
  margin-bottom: 6px;
  font-weight: 600;
}

.eb-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--p50);
  line-height: 1.25;
}


/* --------------------------------------------------------------------------
   8b. Upcoming Events — live card row / carousel
   (denver17-events upcoming-list block -> template-parts/events/upcoming-list.php)
   Light WOW-style cards on the purple band. Replaces the static mosaic above:
   a horizontal scroll-snap row that shows arrow buttons only when it overflows.
   -------------------------------------------------------------------------- */
.elks17-upcoming .eb-carousel {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.eb-track {
  list-style: none;
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 4px 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--p600) transparent;
}
.eb-track::-webkit-scrollbar { height: 8px; }
.eb-track::-webkit-scrollbar-thumb { background: var(--p600); border-radius: 999px; }
.eb-track::-webkit-scrollbar-track { background: transparent; }

.ev-card {
  flex: 0 0 clamp(250px, 80vw, 300px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(13, 10, 40, 0.30);
}

.ev-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--p800);
}
.ev-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ev-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ev-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  color: #2a2140;
  background: var(--gold-light);
  box-shadow: 0 2px 6px rgba(13, 10, 40, 0.25);
}
.ev-badge--ticketed {
  color: #fff;
  background: var(--p600);
}

.ev-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 20px;
}

.ev-date {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--p600);
}

.ev-title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--p900);
}
.ev-title a { color: inherit; }
.ev-title a:hover { color: var(--p600); }

.ev-loc {
  font-size: 13px;
  color: var(--p600);
}

.ev-desc {
  font-size: 14px;
  line-height: 1.55;
  color: #5b5573;
}

.ev-btn {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff;
  background: var(--p600);
  padding: 11px 20px;
  border-radius: 999px;
  transition: background 0.15s ease;
}
.ev-btn:hover { background: var(--p800); }
.ev-btn-arrow { transition: transform 0.15s ease; }
.ev-btn:hover .ev-btn-arrow { transform: translateX(3px); }

.eb-nav {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--p800);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(13, 10, 40, 0.40);
  transition: background 0.15s ease, transform 0.1s ease;
}
.eb-nav:hover { background: var(--p50); }
.eb-nav:active { transform: translateY(-50%) scale(0.94); }
.eb-nav[hidden] { display: none; }
.eb-nav--prev { left: -14px; }
.eb-nav--next { right: -14px; }

.eb-empty {
  text-align: center;
  color: var(--p200);
  font-size: 16px;
}

@media (max-width: 640px) {
  .eb-nav--prev { left: 2px; }
  .eb-nav--next { right: 2px; }
}


/* --------------------------------------------------------------------------
   9. CTA Band
   -------------------------------------------------------------------------- */
.cta-band {
  background: var(--p50);
  padding: 90px 48px;
  text-align: center;
}

.cta-eyebrow {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--p600);
  margin-bottom: 16px;
  font-weight: 600;
}

.cta-h {
  font-size: 38px;
  font-weight: 700;
  color: var(--p900);
  margin-bottom: 28px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.25;
}

.cta-btn {
  display: inline-block;
  background: var(--p900);
  color: var(--p50);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 15px 32px;
  border-radius: 3px;
  text-decoration: none;
  transition: opacity .15s ease;
}

.cta-btn:hover { opacity: 0.82; }


/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--p950);
  padding: 20px 48px;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-copy {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--p200);
  text-transform: uppercase;
}

.footer-right {
  display: flex;
  align-items: center;
  gap: 28px;
}

.social-links {
  display: flex;
  align-items: center;
  gap: 16px;
}

.social-links--footer a { color: var(--p200); }
.social-links--footer a:hover { color: var(--p50); }

.footer-nav {
  list-style: none;
  display: flex;
  gap: 20px;
}

.footer-nav a {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--p200);
  text-decoration: none;
  transition: color .15s ease;
}

.footer-nav a:hover { color: var(--p50); }


/* --------------------------------------------------------------------------
   11. Mobile Nav Drawer
   -------------------------------------------------------------------------- */
.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13,11,38,0.6);
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
}

.mobile-menu-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 86vw);
  background: var(--p950);
  z-index: 41;
  padding: 22px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
}

.mobile-menu.is-open { transform: translateX(0); }

.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.mobile-menu-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

/* the_custom_logo() outputs .custom-logo inside an .custom-logo-link anchor
   rather than .mobile-menu-logo, so size it to match the hardcoded fallback. */
.mobile-menu-head .custom-logo-link { display: block; line-height: 0; }
.mobile-menu-head .custom-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.mobile-menu-close {
  background: none;
  border: none;
  color: var(--p100);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 10px;
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
}

.m-acc { border-bottom: 1px solid var(--p800); }

.m-acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  color: var(--p50);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 16px 4px;
  cursor: pointer;
}

.m-acc-chevron {
  font-size: 13px;
  color: var(--p400);
  transition: transform .2s ease;
}

.m-acc.is-open .m-acc-chevron { transform: rotate(180deg); }

.m-acc-panel {
  display: none;
  flex-direction: column;
  padding: 0 4px 14px 12px;
  gap: 1px;
}

.m-acc.is-open .m-acc-panel { display: flex; }

.m-sublink {
  display: block;
  color: var(--p100);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 9px 8px;
  border-radius: 8px;
}

.m-sublink:hover { background: var(--p800); }

.m-sublabel {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--p400);
  font-weight: 700;
  padding: 12px 8px 2px;
}

.m-toplink {
  display: block;
  color: var(--p50);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--p800);
}

.mobile-menu-cta {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--gold);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 15px;
  border-radius: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

.mobile-menu-social {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 20px;
  flex-shrink: 0;
}

.mobile-menu-social a { color: var(--p200); display: flex; }
.mobile-menu-social a:hover { color: var(--p50); }


/* --------------------------------------------------------------------------
   12. Responsive — 760px and below
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {

  /* Nav */
  .nav-wrap { margin: 16px 16px 0; }

  nav.site-nav {
    height: 64px;
    padding: 0 14px 0 88px;
    border-radius: 18px;
  }

  .nav-logo { left: 10px; }
  .nav-logo img,
  .nav-logo .custom-logo-link img { width: 84px; height: 84px; }

  .nav-links,
  .nav-social,
  .nav-cta { display: none; }

  .nav-hamburger { display: flex; }

  /* Push the hamburger to the right edge (space-between alone parks the lone
     visible flex item mid-bar because of the 88px left padding). */
  .nav-right {
    margin-left: auto;
    gap: 12px;
  }

  /* Hero — shrink top padding to match smaller nav */
  .home .hero {
    padding-top: 96px; /* 16px margin + 64px nav + 16px breathing room */
  }

  .hero-content {
    padding: 40px 22px 36px;
    max-width: 100%;
  }

  .hero-eyebrow { font-size: 11px; letter-spacing: 2px; margin-bottom: 14px; }
  .hero-h { font-size: 32px; }
  .hero-sub { font-size: 14px; max-width: 100%; margin-top: 14px; }

  .hero-btn {
    display: block;
    text-align: center;
    margin-top: 24px;
  }

  /* Hours card — pull out of absolute positioning, sit below hero content.
     position:relative + z-index keeps it above the absolutely-positioned
     .hero-bg and .hero-overlay; without it those paint over the static card
     and it looks washed-out/translucent. Matches .hero-content's stacking. */
  .hours-card {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 3;
    width: auto;
    margin: 0 22px 36px;
    box-shadow: 0 12px 28px rgba(13,11,38,0.22);
  }

  /* Feature splits */
  .feature-split { grid-template-columns: 1fr; }

  .feature-img { min-height: 260px; }

  /* On mobile, image always goes first regardless of layout variant */
  .feature-split .feature-text { order: 2; }
  .feature-split .feature-img  { order: 1; }

  .feature-text { padding: 36px 22px; }
  .feature-h { font-size: 24px; margin-bottom: 14px; }
  .feature-body { max-width: 100%; }

  /* Membership steps */
  .steps-wrap { padding: 56px 22px 44px; }
  .steps-h { font-size: 24px; margin-bottom: 36px; }
  .steps-grid { grid-template-columns: 1fr; gap: 32px; }
  .step { padding: 0; }

  /* Events band */
  .events-band { padding: 50px 22px; }
  .eb-h { font-size: 24px; }
  .eb-grid { grid-template-columns: 1fr; gap: 10px; }
  .eb-col { gap: 10px; }
  .eb-card,
  .eb-card.small { min-height: 220px; }

  /* CTA band */
  .cta-band { padding: 56px 22px; }
  .cta-h { font-size: 26px; }

  /* Footer */
  .site-footer { padding: 28px 22px; }

  .footer-inner {
    flex-direction: column;
    gap: 18px;
    text-align: center;
  }

  .footer-right {
    flex-direction: column;
    gap: 16px;
  }

  /* Site header — tighter top padding on mobile inner pages */
  .site-header { padding-top: 14px; padding-bottom: 14px; }
  /* 16px matches the mobile .nav-wrap top margin, same collapse fix as desktop */
  .home .site-header { padding-top: 16px; padding-bottom: 0; }

  /* Inner page banner */
  .page-banner { padding: 40px 22px 44px; }
  .page-banner-title { font-size: 30px; }
  .page-banner-subtitle { font-size: 14px; }

  /* Inner page content */
  .page-entry-content { padding: 44px 22px; }

  /* alignfull on mobile: break out of the 22px side padding */
  .page-entry-content .alignfull {
    margin-left: -22px;
    margin-right: -22px;
    width: calc(100% + 44px);
    max-width: calc(100% + 44px);
  }

  .page-entry-content .feature-split,
  .page-entry-content .cta-band {
    margin-left: -22px;
    margin-right: -22px;
    width: calc(100% + 44px);
    max-width: calc(100% + 44px);
  }

  /* Single post */
  .single-featured-img { max-height: 240px; }
  .single-featured-img img { max-height: 240px; }

  /* Archive */
  .archive-grid { grid-template-columns: 1fr; gap: 20px; }
}


/* --------------------------------------------------------------------------
   13. Site Header — Inner Pages
   -------------------------------------------------------------------------- */

/* Inner page header sits in normal document flow with a solid background.
   Matches .page-banner directly below it (--p900, not --p950) so the two
   read as one continuous panel with the nav pill floating on top — same
   relationship as the homepage, where the header is transparent over the
   hero instead. Using --p950 here created a visible hard seam where the
   header met the banner, since nothing separates two adjacent flat colors.
   The homepage overrides this below with transparent + position absolute. */
.site-header {
  background: var(--p900);
  padding-top: 28px;
  padding-bottom: 20px;
}

/* padding-top matches .nav-wrap's 28px top margin. Without it, that margin
   collapses through the absolutely-positioned header (no top border/padding to
   contain it) and the nav pill sits flush against the viewport. The padding
   stops the collapse so the homepage gets the same breathing room above the
   logo as inner pages. Header is out of flow, so this doesn't shift the hero. */
.home .site-header {
  background: transparent;
  padding-top: 28px;
  padding-bottom: 0;
}


/* --------------------------------------------------------------------------
   14. Inner Page Banner
   -------------------------------------------------------------------------- */
.page-banner {
  background: var(--p900);
  padding: 56px 48px 64px;
}

.page-banner-inner {
  max-width: 760px;
}

.page-banner-eyebrow {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 600;
  margin-bottom: 14px;
}

.page-banner-title {
  font-size: 46px;
  font-weight: 700;
  color: var(--p50);
  line-height: 1.1;
}

.page-banner-subtitle {
  font-size: 16px;
  color: var(--p200);
  margin-top: 16px;
  max-width: 560px;
  line-height: 1.6;
}

.page-banner-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--p400);
  margin-top: 14px;
}


/* --------------------------------------------------------------------------
   15. Inner Page Content
   -------------------------------------------------------------------------- */
.page-article {
  background: #fff;
}

/* Outer padding establishes the rhythm; alignwide/full break out of it */
.page-entry-content {
  padding: 72px 48px;
}

/* A full-bleed block sitting first or last has nothing to breathe against —
   the 72px of container padding just reads as a white gap against the banner
   above or the footer below. Drop it on whichever end bleeds. Prose pages keep
   their padding, so this needs no per-page intervention. Add
   `elks-flush-top` / `elks-flush-bottom` by hand for the cases this doesn't
   catch (e.g. a block that bleeds via some other mechanism).

   The feature-split/cta-band selectors are here because those two are
   full-bleed by their own component rules below, not by an alignfull class. */
.page-entry-content:has(> :first-child.alignfull),
.page-entry-content:has(> :first-child.alignwide),
.page-entry-content:has(> :first-child.elks-flush-top),
.page-entry-content:has(> :first-child.elks-flush),
.page-entry-content:has(> .feature-split:first-child),
.page-entry-content:has(> .cta-band:first-child) {
  padding-top: 0;
}

.page-entry-content:has(> :last-child.alignfull),
.page-entry-content:has(> :last-child.alignwide),
.page-entry-content:has(> :last-child.elks-flush-bottom),
.page-entry-content:has(> :last-child.elks-flush),
.page-entry-content:has(> .feature-split:last-child),
.page-entry-content:has(> .cta-band:last-child) {
  padding-bottom: 0;
}

/* Zeroing the container's padding isn't enough on its own — the block still
   carries its own margin (figure.alignfull sets 3em on both ends). */
.page-entry-content > .alignfull:first-child,
.page-entry-content > .alignwide:first-child {
  margin-top: 0;
}

.page-entry-content > .alignfull:last-child,
.page-entry-content > .alignwide:last-child {
  margin-bottom: 0;
}

/* Default: constrain all blocks to a readable prose width */
.page-entry-content > * {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Wide alignment — extends to 1140px */
.page-entry-content > .alignwide {
  max-width: 1140px;
}

/* Full alignment — bleeds edge to edge, counteracting the 48px side padding */
.page-entry-content > .alignfull {
  max-width: calc(100% + 96px);
  width: calc(100% + 96px);
  margin-left: -48px;
  margin-right: -48px;
}

/* Don't re-constrain wide/full blocks with the > * rule */
.page-entry-content > .alignwide,
.page-entry-content > .alignfull {
  margin-left: unset;
  margin-right: unset;
}

.page-entry-content > .alignwide  { margin-left: auto; margin-right: auto; }
.page-entry-content > .alignfull  { margin-left: -48px; margin-right: -48px; }

/* Feature Split and CTA Band are full-bleed section blocks, same as they
   render on the homepage — they need to break out of the 800px prose column
   the same way alignfull does, without an editor having to toggle anything. */
.page-entry-content > .feature-split,
.page-entry-content > .cta-band {
  max-width: calc(100% + 96px);
  width: calc(100% + 96px);
  margin-left: -48px;
  margin-right: -48px;
}

/* .entry-content h2/p set colors (and margins, via the shorthand below) for
   plain prose and win on specificity over component classes wherever those
   live inside page content — same issue as the .cta-btn fix above, different
   properties this time. .feature-body was rendering at a 1.00 contrast
   ratio (text and background the same color) and .cta-h's centering margin
   was being flattened to 0, both confirmed via computed styles. */
.entry-content .feature-h    { color: var(--p50); margin: 0 0 18px; }
.entry-content .feature-body { color: var(--p200); }
.entry-content .cta-h        { margin: 0 auto 28px; }

/* Feature Split is a full-bleed section, same as it looks on the homepage —
   no card treatment. The generic .entry-content img rule below rounds every
   inline content image, which also caught this component's image since it's
   an <img> inside .entry-content. Cancels that out so the image fills its
   half of the section edge-to-edge, sharp corners, matching the homepage. */
.entry-content .feature-img img { border-radius: 0; }

/* Entry content typography
   Governs standard Gutenberg prose blocks (paragraphs, headings, lists, etc.)
   within any .entry-content area on inner pages.

   Horizontal margin is `auto`, never 0. `.page-entry-content > *` centers every
   constrained block in the 800px prose column via margin-left/right: auto, but
   these element rules win on specificity — so a `margin: 2em 0 …` shorthand
   would flatten that auto to 0 and pin the block to the left edge while
   paragraphs stay centered. Using `auto` keeps them aligned. Same fix as
   .cta-h above. Full-bleed sections (.feature-split/.cta-band/.alignfull) opt
   out separately with their own negative margins. */
.entry-content h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--p900);
  margin: 2em auto 0.6em;
  line-height: 1.2;
}

.entry-content h3 {
  font-size: 21px;
  font-weight: 700;
  color: var(--p900);
  margin: 1.75em auto 0.5em;
}

.entry-content h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--p900);
  margin: 1.5em auto 0.4em;
}

.entry-content p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--p800);
  margin-bottom: 1.25em;
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.5em;
  margin-bottom: 1.25em;
}

.entry-content li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--p800);
  margin-bottom: 0.4em;
}

.entry-content a:not([class]) {
  color: var(--p600);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry-content a:not([class]):hover { color: var(--p900); }

.entry-content strong { color: var(--p900); }

.entry-content blockquote {
  border-left: 3px solid var(--gold);
  padding-left: 24px;
  margin: 2em auto;
  color: var(--p600);
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
}

.entry-content img {
  border-radius: 8px;
  height: auto;
}

.entry-content hr {
  border: none;
  border-top: 1px solid var(--p100);
  margin: 2.5em auto;
}

.entry-content figure { margin: 2em auto; }

.entry-content figcaption {
  font-size: 12px;
  color: var(--p400);
  text-align: center;
  margin-top: 8px;
  font-style: italic;
}


/* --------------------------------------------------------------------------
   16. Single Post
   -------------------------------------------------------------------------- */
.single-featured-img {
  background: var(--p900);
  overflow: hidden;
  max-height: 520px;
}

.single-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-height: 520px;
  border-radius: 0;
  margin: 0;
}

/* Post prev/next navigation */
.post-navigation {
  border-top: 1px solid var(--p100);
  padding-top: 32px !important; /* overrides page-entry-content top padding reset */
  padding-bottom: 48px;
}

.post-navigation .nav-links {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.post-navigation .nav-next { text-align: right; }

.post-navigation .nav-previous a,
.post-navigation .nav-next a {
  font-size: 14px;
  font-weight: 600;
  color: var(--p600);
  text-decoration: none;
}

.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover { color: var(--p900); }


/* --------------------------------------------------------------------------
   17. Archive
   -------------------------------------------------------------------------- */
.archive-wrap { background: #fff; }

.archive-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-bottom: 56px;
}

.archive-card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--p100);
  background: var(--p50);
  display: flex;
  flex-direction: column;
}

.archive-card-img-link {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.archive-card-img-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  margin: 0;
  transition: transform .3s ease;
}

.archive-card:hover .archive-card-img-link img {
  transform: scale(1.03);
}

.archive-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.archive-card-meta {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--p400);
  margin-bottom: 10px;
}

.archive-card-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--p900);
  line-height: 1.3;
  margin-bottom: 10px;
}

.archive-card-title a { color: inherit; text-decoration: none; }
.archive-card-title a:hover { color: var(--p600); }

.archive-card-excerpt {
  font-size: 14px;
  color: var(--p600);
  line-height: 1.65;
}

.archive-empty {
  text-align: center;
  color: var(--p400);
  padding: 56px 0;
  font-size: 15px;
}

/* Pagination */
.archive-pagination .nav-links {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.archive-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--p600);
  border: 1px solid var(--p100);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

.archive-pagination .page-numbers.current {
  background: var(--p900);
  color: var(--p50);
  border-color: var(--p900);
}

.archive-pagination .page-numbers:hover:not(.current) {
  background: var(--p50);
  border-color: var(--p200);
}

.archive-pagination .page-numbers.dots {
  border-color: transparent;
  cursor: default;
}


/* --------------------------------------------------------------------------
   18. Hours Display Block (denver17/hours-display)
   Renders live hours on inner pages using its own BEM class names, separate
   from the homepage's hardcoded .hours-card markup. Every selector is scoped
   under .entry-content since that's the only place this block appears, so it
   can't lose a specificity fight against the generic h2/p rules the way
   .feature-h and .feature-body did.

   The homepage card is a 270px pill floating over the hero. On an inner page
   it has a full prose column (or a full-bleed row) to work with, so it fills
   its container and splits into two columns: today's status on the left,
   regular hours and caveats on the right. Below 640px it collapses back to
   the stacked homepage arrangement.
   -------------------------------------------------------------------------- */
.entry-content .hours-display {
  background: var(--p50);
  border-radius: 16px;
  padding: 32px 36px;
  width: 100%;
  border: 0.5px solid var(--p100);
}

/* Full-bleed variant: the rounded card reads as a band, not a floating chip */
.page-entry-content > .hours-display.alignfull {
  border-radius: 0;
  border-left: none;
  border-right: none;
  padding: 48px;
}

.entry-content .hours-display__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

.entry-content .hours-display__grid--single {
  grid-template-columns: 1fr;
}

/* Vertical rule between the two columns, drawn on the right column so it
   disappears automatically when the grid collapses (rule is re-declared as a
   top border in the 640px block below). */
.entry-content .hours-display__secondary {
  border-left: 1px solid var(--p100);
  padding-left: 44px;
}

.entry-content .hours-display__grid--single .hours-display__secondary {
  border-left: none;
  padding-left: 0;
}

.entry-content .hours-display__heading {
  font-size: 19px;
  font-weight: 700;
  color: var(--p900);
  margin: 0 0 20px;
}

.entry-content .hours-display__status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.entry-content .hours-display__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--p400);
  flex-shrink: 0;
}

.entry-content .hours-display--open .hours-display__dot {
  background: #3FAE5C;
  box-shadow: 0 0 0 3px rgba(63,174,92,0.18);
}

.entry-content .hours-display--opens-at .hours-display__dot {
  background: #D4900A;
  box-shadow: 0 0 0 3px rgba(212,144,10,0.18);
}

.entry-content .hours-display--closed .hours-display__dot {
  background: #D94F4F;
  box-shadow: 0 0 0 3px rgba(217,79,79,0.18);
}

.entry-content .hours-display__status-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--p400);
}

.entry-content .hours-display--open .hours-display__status-text     { color: #2E8B4F; }
.entry-content .hours-display--opens-at .hours-display__status-text { color: #9A6200; }
.entry-content .hours-display--closed .hours-display__status-text   { color: #B03030; }

.entry-content .hours-display__date {
  font-size: 12px;
  color: var(--p400);
  margin-bottom: 4px;
}

.entry-content .hours-display__range {
  font-size: 30px;
  font-weight: 700;
  color: var(--p900);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.entry-content .hours-display__special {
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  margin-top: 14px;
  line-height: 1.4;
}

.entry-content .hours-display__base-hours {
  font-size: 15px;
  font-weight: 600;
  color: var(--p600);
}

.entry-content .hours-display__base-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--p400);
  margin-bottom: 8px;
}

.entry-content .hours-display__base-line + .hours-display__base-line { margin-top: 4px; }

.entry-content .hours-display__note {
  font-size: 12px;
  color: var(--p400);
  margin: 0;
  line-height: 1.55;
}

.entry-content .hours-display__base-hours + .hours-display__note { margin-top: 18px; }
.entry-content .hours-display__note + .hours-display__note { margin-top: 4px; }

@media (max-width: 640px) {
  .entry-content .hours-display { padding: 24px 22px; }

  .page-entry-content > .hours-display.alignfull { padding: 32px 22px; }

  .entry-content .hours-display__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .entry-content .hours-display__secondary {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--p100);
    padding-top: 20px;
  }

  .entry-content .hours-display__range { font-size: 22px; }
}


/* --------------------------------------------------------------------------
   18b. Full-bleed media on inner pages (maps, exterior photos)

   Two problems the generic rules above cause for edge-to-edge media:

   1. `.entry-content img { border-radius: 8px }` rounds every image, which
      looks wrong on a photo that's meant to touch both viewport edges.
   2. An embedded map is usually a raw <iframe> carrying hardcoded width and
      height attributes. Alignment classes move its box; they don't resize the
      iframe, so it either overflows or leaves a gap. .elks-map forces the
      iframe to fill a fixed-ratio container instead.

   Usage: wrap the map embed in a core Group block, set the Group to Full
   width, and add `elks-map` under Advanced → Additional CSS class.
   -------------------------------------------------------------------------- */
.page-entry-content > figure.alignfull,
.page-entry-content > figure.alignwide {
  margin-top: 3em;
  margin-bottom: 3em;
}

.page-entry-content > figure.alignfull img {
  border-radius: 0;
  width: 100%;
  max-height: 620px;
  object-fit: cover;
}

.page-entry-content > figure.alignfull figcaption {
  padding: 0 48px;
}

.entry-content .elks-map {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--p50);
  margin: 3em 0;
}

.entry-content .elks-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Group blocks pick up padding from the block editor's layout styles; the map
   is the whole point of the container, so strip it back to zero. */
.entry-content .elks-map.wp-block-group {
  padding: 0;
}

/* Flush utilities — collapse the vertical gap between stacked full-bleed
   blocks (map into photo, photo into a colored band, etc). Applied per block
   from the editor's Advanced → Additional CSS class field, since this theme
   ships no theme.json and therefore exposes no core spacing controls.

   !important because .entry-content figure's `margin: 2em auto` shorthand and
   the figure.alignfull rule above both set these longhands, and a single
   utility class can't out-specify either without it. */
.entry-content .elks-flush-bottom,
.entry-content .elks-flush { margin-bottom: 0 !important; }

.entry-content .elks-flush-top,
.entry-content .elks-flush { margin-top: 0 !important; }

@media (max-width: 760px) {
  .entry-content .elks-map {
    aspect-ratio: 4 / 3;
    margin: 2em 0;
  }

  .page-entry-content > figure.alignfull img { max-height: 320px; }
  .page-entry-content > figure.alignfull figcaption { padding: 0 22px; }
}


/* --------------------------------------------------------------------------
   18c. Video embeds (YouTube / Vimeo)

   wp-block-library is dequeued on the front end (inc/enqueue.php), and core's
   responsive-embed CSS lives in that sheet. Without it a core Embed block
   renders at whatever pixel size the oEmbed provider returned — 500x281 for
   YouTube — sitting left-aligned in the 800px prose column.

   These rules make the iframe fill its container at a 16:9 ratio and center
   the figure, so an editor gets a properly sized video with no per-block
   intervention. Setting the block to Wide width in the editor takes it to
   1140px via the alignwide rule in section 18.
   -------------------------------------------------------------------------- */
.entry-content .wp-block-embed {
  margin: 3em auto;
}

.entry-content .wp-block-embed__wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: var(--p50);
}

/* Providers that report a different ratio get it honored rather than being
   squeezed into 16:9. WP adds these classes from the oEmbed response. */
.entry-content .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper  { aspect-ratio: 4 / 3; }
.entry-content .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper  { aspect-ratio: 1 / 1; }
.entry-content .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper { aspect-ratio: 9 / 16; }

.entry-content .wp-block-embed__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Fallback for an embed that came through without the wrapper div (classic
   editor content, or a raw iframe pasted into a Custom HTML block). */
.entry-content figure.wp-block-embed > iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 8px;
  display: block;
}

.entry-content .wp-block-embed figcaption {
  text-align: center;
}

@media (max-width: 760px) {
  .entry-content .wp-block-embed { margin: 2em auto; }
}


/* --------------------------------------------------------------------------
   19. Beer List Block (denver17/beer-list)

   Two variants. `band` is the default: a full-bleed dark section with an
   optional photo behind it at low opacity, echoing the in-lodge TV menu
   (mockups/beer-menu-display.html) without cloning its Bebas Neue type — the
   site loads no webfonts and adding one for a single block isn't worth the
   request. Scale, tracking, and the gold accent carry the same weight.

   The photo is never the taps. The list is live from a Google Sheet and any
   tap photo goes stale the moment a keg changes; the back-bar stained glass
   is the room's actual identity and can't drift out of sync.

   `plain` is the light inline list, for pages where a dark band is too loud.

   Each row is `name / leader / ABV` on a grid rather than a space-between
   flex pair. The dotted leader is the printed-menu device that makes a
   two-column tap list scannable — without it the eye loses the row.
   -------------------------------------------------------------------------- */

/* ---- Band variant --------------------------------------------------------- */
.entry-content .beer-list--band {
  position: relative;
  overflow: hidden;
  background: var(--p950);
  isolation: isolate;
}

.entry-content .beer-list--band .beer-list__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.entry-content .beer-list--band .beer-list__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  margin: 0;
  opacity: 0.28;
  filter: saturate(0.85);
}

/* Left-weighted scrim: keeps the tap names readable over the busy stained
   glass while the right edge of the photo stays visible. Same gradient logic
   as .hero-overlay, flipped for a shorter section. */
.entry-content .beer-list--band .beer-list__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(29,26,71,0.97) 0%,
    rgba(29,26,71,0.92) 45%,
    rgba(29,26,71,0.62) 80%,
    rgba(29,26,71,0.45) 100%
  );
}

.entry-content .beer-list--band .beer-list__inner {
  position: relative;
  z-index: 2;
  padding: 80px 48px;
  max-width: 1140px;
  margin: 0 auto;
}

/* When the block isn't full-bleed it still sits in the 800px prose column,
   so it needs its own breathing room rather than the band's generous padding. */
.entry-content .beer-list--band:not(.alignfull):not(.alignwide) .beer-list__inner {
  padding: 48px 40px;
}

/* ---- Header --------------------------------------------------------------- */
.entry-content .beer-list__head {
  margin-bottom: 44px;
}

.entry-content .beer-list__eyebrow {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-light);
  margin-bottom: 12px;
}

.entry-content .beer-list__heading {
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--p50);
  margin: 0;
}

.entry-content .beer-list__note {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--p200);
  margin-top: 16px;
}

/* Slow pulse signals "this is live data" without a spinner, or a timestamp
   that would itself go stale behind a page cache. */
.entry-content .beer-list__pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3FAE5C;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(63,174,92,0.55);
  animation: beer-pulse 2.6s ease-out infinite;
}

@keyframes beer-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(63,174,92,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(63,174,92,0); }
  100% { box-shadow: 0 0 0 0 rgba(63,174,92,0); }
}

@media (prefers-reduced-motion: reduce) {
  .entry-content .beer-list__pulse { animation: none; }
}

/* ---- Tap list ------------------------------------------------------------- */
.entry-content .beer-list__items {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 72px;
}

.entry-content .beer-list__item {
  break-inside: avoid;
  padding: 0 0 22px;
  margin: 0 0 22px;
  border-bottom: 1px solid rgba(206,203,246,0.14);
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.entry-content .beer-list__row {
  display: grid;
  grid-template-columns: auto minmax(24px, 1fr) auto;
  align-items: baseline;
  gap: 0 10px;
}

.entry-content .beer-list__name {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--p50);
  letter-spacing: -0.005em;
}

.entry-content .beer-list__leader {
  border-bottom: 1px dotted rgba(206,203,246,0.34);
  transform: translateY(-5px);
}

.entry-content .beer-list__abv {
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.entry-content .beer-list__style {
  font-size: 13px;
  color: var(--p200);
  letter-spacing: 0.4px;
  margin-top: 5px;
}

.entry-content .beer-list__empty {
  font-size: 15px;
  color: var(--p200);
  font-style: italic;
  margin: 0;
}

/* ---- Coming Soon ---------------------------------------------------------- */
.entry-content .beer-list__coming-soon {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid rgba(197,155,58,0.3);
}

.entry-content .beer-list__coming-soon-label {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 16px;
}

.entry-content .beer-list__coming-soon-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
}

.entry-content .beer-list__coming-soon-item {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.entry-content .beer-list__coming-soon-item .beer-list__name {
  font-size: 16px;
  font-weight: 600;
  color: rgba(238,237,254,0.62);
}

.entry-content .beer-list__coming-soon-item .beer-list__style {
  font-size: 12px;
  font-style: italic;
  color: rgba(175,169,236,0.62);
  margin-top: 0;
}

/* ---- Plain variant -------------------------------------------------------- */
.entry-content .beer-list--plain .beer-list__inner { padding: 0; }
.entry-content .beer-list--plain .beer-list__heading { color: var(--p900); font-size: 32px; }
.entry-content .beer-list--plain .beer-list__eyebrow { color: var(--p400); }
.entry-content .beer-list--plain .beer-list__note { color: var(--p400); }
.entry-content .beer-list--plain .beer-list__item { border-bottom-color: var(--p100); }
.entry-content .beer-list--plain .beer-list__name { color: var(--p900); }
.entry-content .beer-list--plain .beer-list__leader { border-bottom-color: var(--p200); }
.entry-content .beer-list--plain .beer-list__abv { color: var(--gold); }
.entry-content .beer-list--plain .beer-list__style { color: var(--p600); }
.entry-content .beer-list--plain .beer-list__empty { color: var(--p400); }
.entry-content .beer-list--plain .beer-list__coming-soon-item .beer-list__name { color: var(--p600); }
.entry-content .beer-list--plain .beer-list__coming-soon-item .beer-list__style { color: var(--p400); }

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
  .entry-content .beer-list__items { columns: 1; }
}

@media (max-width: 760px) {
  .entry-content .beer-list--band .beer-list__inner,
  .entry-content .beer-list--band:not(.alignfull):not(.alignwide) .beer-list__inner {
    padding: 48px 22px;
  }

  /* The stained glass has no readable focal point at phone width; the scrim
     goes near-solid so it reads as texture rather than a failed photograph. */
  .entry-content .beer-list--band .beer-list__scrim {
    background: linear-gradient(180deg, rgba(29,26,71,0.95) 0%, rgba(29,26,71,0.88) 100%);
  }

  .entry-content .beer-list__head { margin-bottom: 32px; }
  .entry-content .beer-list__heading { font-size: 30px; }
  .entry-content .beer-list--plain .beer-list__heading { font-size: 26px; }
  .entry-content .beer-list__name { font-size: 18px; }
  .entry-content .beer-list__item { padding-bottom: 18px; margin-bottom: 18px; }
  .entry-content .beer-list__coming-soon-items { gap: 10px 20px; }
}


/* ==========================================================================
   FAQ / Details blocks
   Core `.wp-block-details` styled as accordion cards. CSS-only: the native
   <details> element handles open/close, so there's no JS and nothing new for
   editors to learn — questions and answers stay ordinary editable blocks.
   ========================================================================== */
.wp-block-details {
  background: #fff;
  border: 1px solid var(--p100);
  border-radius: 14px;
  margin-block: 14px;
  padding: 2px 28px;
  box-shadow: 0 1px 2px rgba(38,33,92,0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-details:hover {
  border-color: var(--p200);
  box-shadow: 0 8px 24px rgba(38,33,92,0.09);
}

.wp-block-details[open] {
  border-color: var(--p200);
  box-shadow: 0 12px 32px rgba(38,33,92,0.11);
  padding-bottom: 6px;
}

.wp-block-details > summary {
  list-style: none;                 /* hide Firefox default marker */
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 0;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--p900);
  user-select: none;
}

/* hide Chrome/Safari default disclosure triangle */
.wp-block-details > summary::-webkit-details-marker { display: none; }

.wp-block-details > summary:focus-visible {
  outline: 2px solid var(--p400);
  outline-offset: 4px;
  border-radius: 6px;
}

/* Chevron badge — rotates and fills gold when the item is open. */
.wp-block-details > summary::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--p50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2326215C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 13px no-repeat;
  transition: transform 0.25s ease, background-color 0.2s ease;
}

.wp-block-details[open] > summary::after {
  transform: rotate(180deg);
  background-color: var(--gold-light);
}

/* Divider between the open question and its answer. */
.wp-block-details[open] > summary {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--p50);
}

.wp-block-details > :not(summary) {
  color: var(--p800);
  font-size: 1rem;
  line-height: 1.75;
}

.wp-block-details > :not(summary):last-child { padding-bottom: 24px; }

@media (max-width: 760px) {
  .wp-block-details { padding: 2px 20px; }
  .wp-block-details > summary { gap: 12px; font-size: 1.05rem; padding: 18px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-details,
  .wp-block-details > summary::after { transition: none; }
}


/* --------------------------------------------------------------------------
   Pay Dues (PayPal) — denver17/pay-dues
   Temporary. Remove with the block when Stripe Checkout ships.
   -------------------------------------------------------------------------- */
/* Horizontal margin is `auto`, never 0 — see the note above .entry-content h2.
   A `margin: 32px 0` shorthand here flattens the centering that
   `.page-entry-content > *` applies and pins the whole block to the left edge
   while the surrounding prose stays centered. */
.dues-pay {
  margin: 32px auto;
}

/* These three win over the .entry-content h3/p prose rules, which are more
   specific than a bare class and would otherwise set the size and margins. */
.entry-content .dues-pay-h {
  font-size: 21px;
  font-weight: 700;
  color: var(--p900);
  margin: 0 auto 10px;
}

.entry-content .dues-pay-intro {
  color: var(--p800);
  font-size: 16px;
  line-height: 1.75;
  margin: 0 auto 20px;
}

.dues-pay-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.dues-pay-form { margin: 0; }

.dues-pay-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  background: var(--p900);
  color: var(--p50);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 15px 32px;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  transition: opacity .15s ease;
}

.dues-pay-btn:hover { opacity: 0.82; }

.dues-pay-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.dues-pay-btn-amount {
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--p200);
}

.entry-content .dues-pay-note {
  margin: 16px auto 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--p600);
}

@media (max-width: 560px) {
  .dues-pay-buttons { flex-direction: column; align-items: stretch; }
  .dues-pay-btn { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .dues-pay-btn { transition: none; }
}