/* ==========================================================================
   Danbury Elk's Club — BPOE Lodge No. 120
   Shared design system
   ========================================================================== */

/* ---- Brand tokens ---- */
:root {
  --color-navy: #003087;
  --color-navy-light: #0044BE;
  --color-navy-dark: #001F5C;
  --color-red: #C41230;
  --color-red-dark: #9E0E26;
  --color-gold: #8B6914;
  --color-gold-light: #B4923B;
  --color-white: #FFFFFF;
  --color-bg: #F8F6F2;
  --color-bg-alt: #F1EBDD;
  --color-text: #1A1A1A;
  --color-text-muted: #57544D;
  --color-border: #E3DDCE;

  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 3px rgba(0, 15, 60, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 15, 60, 0.12);
  --shadow-lg: 0 20px 48px rgba(0, 15, 60, 0.18);

  --container: 1200px;
  --transition: 220ms ease;
  --nav-height: 76px;

  --z-nav: 100;
  --z-overlay: 200;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-navy);
  line-height: 1.2;
  margin: 0 0 var(--space-4);
  font-weight: 700;
}
h1 { font-size: clamp(2.25rem, 4vw + 1rem, 3.75rem); }
h2 { font-size: clamp(1.75rem, 2.5vw + 1rem, 2.75rem); }
h3 { font-size: 1.375rem; }
p { margin: 0 0 var(--space-4); color: var(--color-text-muted); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

@media (max-width: 767px) {
  .container { padding: 0 var(--space-4); }
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  background: var(--color-red);
  color: var(--color-white);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--transition);
}
.skip-link:focus { top: var(--space-4); }

:focus-visible {
  outline: 3px solid var(--color-gold-light);
  outline-offset: 2px;
}

/* ---- Buttons ---- */
/* .btn sets its own display, which outranks the browser's [hidden] rule, so
   setting hidden on a button did nothing at all. Said explicitly here. */
.btn[hidden] { display: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn-red {
  background: var(--color-red);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}
.btn-red:hover { background: var(--color-red-dark); box-shadow: var(--shadow-md); }

.btn-white-outline {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.7);
}
.btn-white-outline:hover { background: rgba(255, 255, 255, 0.15); border-color: var(--color-white); }

.btn-navy {
  background: var(--color-navy);
  color: var(--color-white);
}
.btn-navy:hover { background: var(--color-navy-dark); box-shadow: var(--shadow-md); }

.btn-gold {
  background: var(--color-gold);
  color: var(--color-white);
}
.btn-gold:hover { background: var(--color-gold-light); box-shadow: var(--shadow-md); }

.btn-outline-navy {
  background: transparent;
  color: var(--color-navy);
  border-color: var(--color-navy);
}
.btn-outline-navy:hover { background: var(--color-navy); color: var(--color-white); }

.btn-block { width: 100%; }
/* Not the browser's red no-entry cursor. A button that cannot be pressed
   should look unavailable, not forbidden. */
.btn:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
.btn:disabled:hover { background: var(--color-red); }
.btn-sm { min-height: 40px; padding: 0 var(--space-5); font-size: 0.875rem; }

/* ---- Navbar ---- */
.navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--color-navy);
  height: var(--nav-height);
  transition: box-shadow var(--transition), background var(--transition);
}
.navbar.is-scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  background: var(--color-navy-dark);
}
.navbar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-white);
  flex-shrink: 0;
}
.brand-logo {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}
.brand-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
}
.brand-text small {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.nav-links a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.94rem;
  font-weight: 500;
  padding: var(--space-2) 0;
  white-space: nowrap;
  position: relative;
  transition: color var(--transition);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--color-gold-light);
  transform: scaleX(0);
  transition: transform var(--transition);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--color-white);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-actions { display: flex; align-items: center; gap: var(--space-4); flex-shrink: 0; }
.nav-pay-dues-btn { white-space: nowrap; }
.nav-pay-dues-btn-mobile { margin-bottom: var(--space-3); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--color-white);
  cursor: pointer;
  padding: var(--space-2);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}
.nav-toggle svg { width: 26px; height: 26px; }

/* Adding "Become an Elk" made nine items across the top. Between about 1000
   and 1320px that pushed the Members Only button off the right edge and gave
   the whole page a sideways scrollbar, so the row tightens before it breaks. */
@media (max-width: 1340px) {
  .nav-links { gap: var(--space-4); }
  .nav-links a { font-size: 0.89rem; }
}
@media (max-width: 1180px) {
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 0.85rem; }
  .navbar-inner { gap: var(--space-4); }
  /* The crest keeps its place; the wordmark beside it is what costs 180px
     and it is repeated in the page title anyway. */
  .brand-text small { display: none; }
}

/* Below this the hamburger takes over. Raised from 1023 because nine items
   and a button genuinely do not fit a 1100px laptop. */
@media (max-width: 1099px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-actions .btn-red { display: none; }
  .nav-actions .nav-pay-dues-btn { display: none; }
  .brand-text small { display: block; }
}

/* Mobile full-screen overlay nav */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--color-navy-dark);
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-5);
  transform: translateX(100%);
  transition: transform 280ms ease;
  overflow-y: auto;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav-head {
  display: flex;
  justify-content: flex-end;
}
.mobile-nav-close {
  background: none;
  border: none;
  color: var(--color-white);
  width: 44px;
  height: 44px;
  cursor: pointer;
}
.mobile-nav-close svg { width: 28px; height: 28px; }
.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.mobile-nav-links a {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.mobile-nav-links a[aria-current="page"] { color: var(--color-gold-light); }
.mobile-nav-cta { margin-top: var(--space-6); }
body.nav-lock { overflow: hidden; }

/* ---- Hero (banner-based, reused on interior pages) ---- */
.page-hero {
  position: relative;
  min-height: 46vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  color: var(--color-white);
  isolation: isolate;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 48, 135, 0.55), rgba(0, 31, 92, 0.72));
  z-index: -1;
}
.page-hero-inner { text-align: center; width: 100%; padding: var(--space-8) 0; }
.page-hero .eyebrow { color: var(--color-gold-light); }
.page-hero h1 { color: var(--color-white); margin-bottom: var(--space-3); }
.page-hero p.lead { color: rgba(255, 255, 255, 0.9); max-width: 640px; margin: 0 auto; }

/* ---- Homepage hero ---- */
.hero {
  position: relative;
  /* min-height, not height: with the hours inside it, a 13" laptop in
     landscape needs the hero to be allowed to grow rather than clip. */
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: var(--color-white);
  background-image: url('/api/banner?slot=home-desktop');
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
@media (max-width: 767px) {
  .hero {
    background-image: url('/api/banner?slot=home-mobile');
    /* The navbar is sticky and 76px tall, so the hero starts 76px down. At a
       flat 100vh the hero ran from 76 to 740 on a 664px screen - its content
       is centred in it, so the bottom of that content sat below the fold
       however much padding came off. Minus the navbar it fits.

       dvh first for the browsers that have it: on a phone 100vh means the
       address bar is not counted, and it is. vh underneath for the rest. */
    min-height: calc(100vh - var(--nav-height));
    min-height: calc(100dvh - var(--nav-height));
  }
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 48, 135, 0.45);
  z-index: -1;
}
/* width:100% because .hero is a flex container and this is its only item:
   without it the container shrinks to fit its widest child, which is the
   headline. Its max-width of 1200px was never reached, and anything inside it
   was silently capped at however wide "Serving Danbury Since 1889" happens to
   be - 771px at 1440. */
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  /* 64px top and bottom was 128px of the hero's height, which is where
     the crest's room comes from on a short screen. */
  padding: clamp(6px, 2.6vh, 64px) 0;
}

/* On a short screen the gaps matter less than what sits in them. Without
   this the crest fits only by being too small to be worth having.

   Width as well as height, because a phone is short too, and this block's
   headline size is a floor of 40px against the 36px the mobile layout
   deliberately sets - keyed on height alone it made the headline bigger on
   the screen with the least room to put it. */
@media (min-width: 768px) and (max-height: 820px) {
  .hero .eyebrow { margin-bottom: 8px; }
  .hero h1 { font-size: clamp(40px, 6.4vh, 60px); margin-bottom: 8px; }
  .hero .lead { margin-bottom: 12px; }
  .hero-hours { margin-top: 14px; }
}
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-gold-light);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: var(--space-4);
}
.hero h1 { color: var(--color-white); max-width: 880px; margin-left: auto; margin-right: auto; }

/* White type on a photo needs somewhere to stand. Invisible over the dark
   part of the picture, and worth keeping now that nothing sits behind the
   headline - the photograph alone is reason enough. */
.hero h1,
.hero .lead,
.hero .eyebrow {
  text-shadow: 0 2px 14px rgba(10, 22, 48, 0.55);
}
.hero .lead {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.15rem;
  max-width: 640px;
  margin: 0 auto var(--space-6);
}
.hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* The lodge crest, centred above the eyebrow - the first thing on the page.

   It used to be a watermark behind the headline, and at full opacity its
   white clock face swallowed white letters: the front page read "erving
   Danbury Since 1889". Dimming it to .16 and then .40 were both attempts to
   have it both ways, in the text's place but faint enough to get away with.
   In the flow above the text it can simply be the logo, solid, because
   nothing is behind anything.

   Sized in vh, because what it costs is height and height is what runs out:
   on a 1366x768 laptop the hero had 56px to spare, and a fixed 120px crest
   pushed the Lodge Hours off the bottom of the screen on three of the seven
   sizes tested. The hours took several goes to get above the fold and are
   not going back below it. */
.hero-crest {
  display: block;
  margin: 0 auto clamp(10px, 1.6vh, 20px);
  width: clamp(96px, 14.5vh, 170px);
  aspect-ratio: 1;
  /* The artwork is a circular crest on a white square. The circle crop takes
     the corners off, which is the difference between a logo and a white tile
     with a logo on it. */
  border-radius: 50%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  /* 16vh of a tall phone is 118px, and the phone had 49px to spare. */
  .hero-crest { width: clamp(48px, 7.5vh, 78px); margin-bottom: 8px; }
}

/* A browser window only 620px tall - a small laptop with a bookmarks bar, or
   a window somebody has dragged short. The crest gives up more of itself
   here, because the alternative is the hours going back below the fold. */
@media (min-width: 768px) and (max-height: 660px) {
  .hero-crest { width: clamp(70px, 12vh, 96px); }
}

/* ---- Eyebrow (generic) ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-red);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: var(--space-3);
}
.eyebrow svg { width: 16px; height: 16px; }

/* ---- Sections ---- */
.section { padding: var(--space-9) 0; }
.section-alt { background: var(--color-bg); }
.section-navy { background: var(--color-navy); color: var(--color-white); }
.section-head { max-width: 680px; margin: 0 0 var(--space-7); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-navy h2, .section-navy .eyebrow { color: var(--color-white); }
.section-navy .eyebrow { color: var(--color-gold-light); }

@media (max-width: 767px) {
  .section { padding: var(--space-8) 0; }
}

/* ---- Grid utilities ---- */
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1023px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; }
}

.two-col {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-8);
  align-items: center;
}
@media (max-width: 1023px) {
  .two-col { grid-template-columns: 1fr; }
}

/* ---- Values strip ---- */
.values-strip { background: var(--color-navy); color: var(--color-white); padding: var(--space-8) 0; }
.value-card { text-align: center; }
.value-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(180, 146, 59, 0.18);
  border: 1px solid rgba(180, 146, 59, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  color: var(--color-gold-light);
}
.value-icon svg { width: 30px; height: 30px; }
.value-card h3 { color: var(--color-white); font-size: 1.1rem; margin-bottom: var(--space-2); }
.value-card p { color: rgba(255, 255, 255, 0.72); font-size: 0.92rem; margin: 0; }

/* ---- Cards ---- */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.icon-badge {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: rgba(0, 48, 135, 0.08);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.icon-badge svg { width: 26px; height: 26px; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---- Photo placeholder ---- */
.photo-placeholder {
  background: var(--color-bg-alt);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 320px;
  font-size: 0.9rem;
  text-align: center;
  padding: var(--space-5);
}
.photo-placeholder svg { width: 40px; height: 40px; opacity: 0.6; }

/* ---- Events ---- */
.event-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}
.event-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* Square and contained: a flyer has its date and its acts printed on it, so
   none of it can be cropped away. The tinted ground makes the space beside a
   tall poster look intended rather than broken. */
.event-media {
  /* Portrait, because a flyer is: both of the lodge's are 2:3. A landscape
     photograph still shows whole, with a little ground above and below. */
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--color-bg-alt);
}
.event-media img { width: 100%; height: 100%; object-fit: contain; }
.event-date-badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  background: var(--color-red);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  text-align: center;
  line-height: 1.1;
  box-shadow: var(--shadow-sm);
}
.event-date-badge .month { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; }
.event-date-badge .day { display: block; font-size: 1.3rem; font-weight: 700; font-family: var(--font-heading); }
.event-category-badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: rgba(0, 48, 135, 0.85);
  color: var(--color-white);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.event-body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; gap: var(--space-3); }
.event-price-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.price-chip {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-navy);
}
.event-body .btn { margin-top: auto; }
.event-time { color: var(--color-text-muted); font-size: 0.88rem; margin: 0; }
.event-desc { white-space: pre-line; }
.events-empty { color: var(--color-text-muted); grid-column: 1 / -1; text-align: center; padding: var(--space-6) 0; }
.event-teaser-wrap { max-width: 380px; margin: 0 auto; }
/* One event sits in a narrow column; two or three need the room. The grid
   classes handle the columns, this only lifts the single-card width cap. */
.event-teaser-wrap.is-many { max-width: 1040px; }
.section-logo {
  display: block;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--color-white), 0 0 0 4px var(--color-border);
  margin: 0 auto var(--space-5);
}

.event-featured-wrap { max-width: 840px; margin: 0 auto; }
.event-card--featured { flex-direction: row; }
.event-card--featured .event-media { flex: 0 0 42%; aspect-ratio: 4 / 5; }
.event-card--featured .event-body { padding: var(--space-7); gap: var(--space-4); justify-content: center; }
.event-card--featured h3 { font-size: 1.6rem; }
.event-card--featured .event-body p { font-size: 1.02rem; line-height: 1.65; }
.event-card--featured .btn { align-self: flex-start; margin-top: var(--space-2); }
@media (max-width: 700px) {
  .event-card--featured { flex-direction: column; }
  .event-card--featured .event-media { flex: none; aspect-ratio: 4 / 3; }
  .event-card--featured .event-body { padding: var(--space-5); }
}

/* ---- Member dashboard ---- */
/* Tabs on a member’s own page. Four things they might do, each one a click
   away rather than a scroll away. */
.portal-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  background: #EDEFF4; border-radius: 10px; padding: 4px;
  margin-bottom: var(--space-5);
}
.portal-tab {
  flex: 1 1 auto; border: 0; background: none; cursor: pointer;
  padding: 11px 16px; border-radius: 7px;
  font: 600 0.95rem/1 'Inter', system-ui, sans-serif;
  color: var(--color-text-muted); white-space: nowrap;
}
.portal-tab:hover { color: var(--color-text); }
.portal-tab.is-on {
  background: var(--color-white, #fff); color: var(--color-navy);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
}
/* A panel takes over the column, so it inherits the spacing the column had.
   As a plain block its heading sat straight on top of the card below it. */
.portal-panel { display: flex; flex-direction: column; gap: var(--space-6); }
/* [hidden] loses to any class that sets display, so it is spelled out. */
.portal-panel[hidden] { display: none; }
/* A member's own page.
   
   It was one long column of sections read top to bottom: status, calendar,
   events, a form with ten boxes, then history. On a wide screen that is a
   lot of scrolling past a lot of white space.
   
   The sidebar holds what a member glances at — am I paid up, what is on.
   The main column holds what they came to do. */
.dashboard-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  margin-bottom: var(--space-8);
}
.dashboard-sidebar { display: flex; flex-direction: column; gap: var(--space-5); }
.dashboard-main { display: flex; flex-direction: column; gap: var(--space-6); }

/* Section headings stop carrying their own one-off spacing, so everything
   below them lines up with everything else. */
.dashboard-main .section-head { margin: 0 0 var(--space-3) !important; }
.dashboard-main .event-teaser-wrap,
.dashboard-main .event-teaser-wrap.is-many { max-width: none; margin: 0; }
/* A member's column is narrower than the homepage, so two events stack
   rather than squeezing into two columns. */
.dashboard-main .event-teaser-wrap.is-many { grid-template-columns: 1fr; }
.dashboard-main #purchase-history { max-width: none; }

/* Cards on this page share one shape. They were a mix of padded and not,
   which is most of what "not aligned" looks like. */
.dashboard-layout .card { padding: var(--space-5); }
.dashboard-main .card { width: 100%; }
@media (max-width: 860px) {
  .dashboard-layout { grid-template-columns: 1fr; }
  .dashboard-main .event-teaser-wrap { max-width: 440px; margin: 0 auto; }
  .dashboard-main #purchase-history { max-width: 560px; margin: 0 auto; }
  .dashboard-main .section-head { text-align: center; }
}

/* ---- Event info (tickets.html) ---- */
.event-info { display: flex; gap: var(--space-8); align-items: flex-start; }
.event-info-image {
  flex: 0 0 46%;
  width: 46%;
  aspect-ratio: 4 / 5;
  /* The page somebody reads before paying. Cropping the poster here hides
     the door time and the price printed on it. */
  object-fit: contain;
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  position: sticky;
  top: calc(var(--nav-height) + var(--space-5));
}
.event-info-text { flex: 1; min-width: 0; }
@media (max-width: 800px) {
  .event-info { flex-direction: column; }
  .event-info-image { width: 100%; flex: none; aspect-ratio: 16 / 9; position: static; margin-bottom: var(--space-6); }
}
.event-info-block { margin-bottom: var(--space-6); }
.event-info-block h2 {
  font-size: 1.1rem;
  color: var(--color-navy);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.event-info-block p { margin: 0 0 var(--space-1); color: var(--color-text); }
.event-info-about {
  white-space: pre-line;
  line-height: 1.7;
  color: var(--color-text);
}

/* ---- Ticket selector (tickets.html) ---- */
.ticket-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.ticket-options { border-top: 1px solid var(--color-border); }
.ticket-option-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
}
.ticket-option-info { min-width: 0; }
.ticket-option-info h3 { margin: 0 0 var(--space-1); font-size: 1.05rem; color: var(--color-navy); }
/* The price is the thing being read, so it is not grey and it is not small. */
.ticket-option-price { margin: 0; color: var(--color-navy); font-weight: 700; font-size: 1.25rem; }
.ticket-option-price small { font-size: 0.85rem; }
.ticket-option-info h3 { font-size: 1.2rem; line-height: 1.3; }
.ticket-option-desc { font-size: 1rem; line-height: 1.6; }
.ticket-option-desc { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: 0.88rem; }
.ticket-option-desc a { color: var(--color-navy); font-weight: 600; }

/* ---- Donation cause cards (support.html) ---- */
.donate-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
@media (max-width: 700px) { .donate-grid { grid-template-columns: 1fr; } }
.donate-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.donate-card-image-wrap {
  background: var(--color-bg);
  padding: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
}
.donate-card-image-wrap img { max-height: 150px; max-width: 100%; object-fit: contain; }
.donate-card-image-wrap .icon-badge { width: 72px; height: 72px; margin-bottom: 0; }
.donate-card-image-wrap .icon-badge svg { width: 36px; height: 36px; }
.donate-card-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.donate-card-body h3 { color: var(--color-navy); margin: 0; font-size: 1.2rem; }
.donate-card-body p { color: var(--color-text-muted); font-size: 0.95rem; margin: 0; }
.donate-card-body p a { color: var(--color-navy); font-weight: 600; }
.donate-actions { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); }
.donate-custom { display: flex; gap: var(--space-2); }
.donate-custom-input { flex: 1; }
.donate-note { margin: 0; font-size: 0.85rem; color: var(--color-text-muted); }
.ticket-option-qty { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); flex-shrink: 0; }
.ticket-option-qty label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.ticket-qty-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.qty-btn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-navy);
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-navy);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.qty-btn:hover:not(:disabled) { background: var(--color-navy); color: var(--color-white); }
.qty-btn:disabled { opacity: 0.35; cursor: default; border-color: var(--color-border); color: var(--color-text-muted); }
.qty-value {
  min-width: 20px;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}
.ticket-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-5) 0;
  margin-bottom: var(--space-4);
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-navy);
}
.ticket-checkout-note {
  margin: var(--space-4) 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
@media (max-width: 480px) {
  .ticket-option-row { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .ticket-option-qty { align-items: flex-start; width: 100%; }
}

/* Filter tabs */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}

/* ---- Accordion (programs page) ---- */
.accordion { display: flex; flex-direction: column; gap: var(--space-4); }
.accordion-item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  list-style: none;
  transition: background var(--transition);
}
.accordion-header::-webkit-details-marker { display: none; }
.accordion-header:hover { background: var(--color-bg); }
.accordion-heading { display: flex; flex-direction: column; gap: var(--space-1); }
.accordion-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--color-navy);
}
.accordion-teaser { color: var(--color-text-muted); font-size: 0.92rem; }
.accordion-header svg {
  width: 22px;
  height: 22px;
  color: var(--color-red);
  flex-shrink: 0;
  transition: transform var(--transition);
}
.accordion-item[open] .accordion-header svg { transform: rotate(180deg); }
.accordion-item[open] .accordion-header { border-bottom: 1px solid var(--color-border); }
.accordion-body { padding: var(--space-7) var(--space-6); background: rgba(139, 105, 20, 0.04); }
@media (max-width: 600px) {
  .accordion-header { padding: var(--space-4) var(--space-5); }
  .accordion-title { font-size: 1.15rem; }
  .accordion-body { padding: var(--space-6) var(--space-4); }
}
.filter-tab {
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  color: var(--color-text);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all var(--transition);
  min-height: 44px;
}
.filter-tab:hover { border-color: var(--color-navy); }
.filter-tab.is-active { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-white); }

/* ---- Calendar embed box ---- */
.calendar-embed {
  background: var(--color-bg);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  text-align: center;
  color: var(--color-text-muted);
}
.calendar-embed svg { width: 44px; height: 44px; color: var(--color-navy); margin-bottom: var(--space-3); }

/* ---- Quote strip ---- */
.quote-strip { padding: var(--space-9) 0; text-align: center; }
.quote-strip blockquote {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.4vw + 1rem, 2.4rem);
  color: var(--color-navy);
  max-width: 800px;
  margin: 0 auto var(--space-4);
  font-style: italic;
  line-height: 1.35;
}
.quote-strip cite { color: var(--color-gold); font-style: normal; font-weight: 600; font-size: 0.95rem; }

/* ---- Charity callout ---- */
.callout {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--color-white);
  background-size: cover;
  background-position: center;
  isolation: isolate;
  padding: var(--space-9) var(--space-6);
  text-align: center;
}
.callout::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 31, 92, 0.72);
  z-index: -1;
}
.callout h2 { color: var(--color-white); }
.callout p { color: rgba(255, 255, 255, 0.88); max-width: 560px; margin-left: auto; margin-right: auto; }

/* ---- CTA band ---- */
.cta-band {
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.cta-band h2 { margin-bottom: var(--space-2); }
.cta-band p { margin: 0; }

/* ---- Timeline (about page) ---- */
.timeline { position: relative; margin-top: var(--space-7); padding-left: var(--space-6); border-left: 3px solid var(--color-border); }
.timeline-item { position: relative; padding-bottom: var(--space-7); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-6) - 8px);
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-red);
  border: 3px solid var(--color-white);
  box-shadow: 0 0 0 2px var(--color-red);
}
.timeline-year { color: var(--color-red); font-weight: 700; font-family: var(--font-heading); font-size: 1.2rem; }
.timeline-item h3 { margin: var(--space-1) 0 var(--space-2); }

/* ---- Officer cards ---- */
.officer-card { text-align: center; padding: var(--space-5); }
.officer-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto var(--space-4);
  background: var(--color-bg-alt);
  border: 3px solid var(--color-gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy);
}
.officer-photo svg { width: 52px; height: 52px; }
.officer-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.officer-card h3 { margin-bottom: var(--space-1); font-size: 1.05rem; }
.officer-title { color: var(--color-red); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; }
.officer-desc { margin-top: var(--space-3); font-size: 0.85rem; color: var(--color-text-muted); text-align: left; }
.officer-readmore {
  margin-top: var(--space-3);
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-navy);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0;
}
.officer-readmore:hover { text-decoration: underline; }
.officer-readmore svg { width: 16px; height: 16px; transition: transform var(--transition); }
.officer-readmore:hover svg { transform: translateX(3px); }

/* ---- Officer bio modal ---- */
.officer-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 15, 60, 0.65);
  backdrop-filter: blur(2px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.officer-modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
.officer-modal-backdrop[hidden] { display: flex; }
.officer-modal-card {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  overflow-y: auto;
  padding: var(--space-8) var(--space-7);
  text-align: center;
  box-shadow: var(--shadow-lg);
  transform: translateY(16px) scale(0.98);
  transition: transform 220ms ease;
}
.officer-modal-backdrop.is-open .officer-modal-card { transform: translateY(0) scale(1); }
.officer-modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bg);
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.officer-modal-close:hover { background: var(--color-bg-alt); color: var(--color-navy); }
.officer-modal-close svg { width: 20px; height: 20px; }
.officer-modal-photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  margin: 0 auto var(--space-5);
  background: var(--color-bg-alt);
  border: 3px solid var(--color-gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy);
  overflow: hidden;
}
.officer-modal-photo img { width: 100%; height: 100%; object-fit: cover; }
.officer-modal-photo svg { width: 60px; height: 60px; }
.officer-modal-card h2 { margin-bottom: var(--space-1); }
.officer-modal-card .officer-title { display: block; margin-bottom: var(--space-5); }
.officer-modal-card p { text-align: left; color: var(--color-text-muted); margin: 0; }
body.modal-lock { overflow: hidden; }

/* ---- Info modal (programs page: programs & committees) ---- */
.info-readmore {
  margin-top: var(--space-3);
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-navy);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0;
}
.info-readmore:hover { text-decoration: underline; }
.info-readmore svg { width: 16px; height: 16px; transition: transform var(--transition); }
.info-readmore:hover svg { transform: translateX(3px); }

.info-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 15, 60, 0.65);
  backdrop-filter: blur(2px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.info-modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
.info-modal-backdrop[hidden] { display: flex; }
.info-modal-card {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  overflow-y: auto;
  padding: var(--space-8) var(--space-7);
  text-align: center;
  box-shadow: var(--shadow-lg);
  transform: translateY(16px) scale(0.98);
  transition: transform 220ms ease;
}
.info-modal-backdrop.is-open .info-modal-card { transform: translateY(0) scale(1); }
.info-modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bg);
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.info-modal-close:hover { background: var(--color-bg-alt); color: var(--color-navy); }
.info-modal-close svg { width: 20px; height: 20px; }
.info-modal-photo {
  width: 160px;
  height: 160px;
  object-fit: contain;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin: 0 auto var(--space-5);
  display: block;
}
.info-modal-card h2 { margin-bottom: var(--space-5); }
.info-modal-card p { text-align: left; color: var(--color-text-muted); margin: 0; }

/* ---- Honoree banner (officers page) ---- */
.honoree {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.honoree img { width: 100%; max-width: 640px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.honoree h2 { margin-bottom: 0; }
.honoree .honoree-name { font-family: var(--font-heading); font-style: italic; color: var(--color-gold); font-size: 1.1rem; }

/* ---- Programs ---- */
.program-card { text-align: left; }
.program-photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}

/* ---- Committees & Volunteer Opportunities (programs page) ---- */
.committee-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-6);
  align-items: center;
}
.committee-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-md);
}
@media (max-width: 767px) {
  .committee-card { grid-template-columns: 1fr; }
}

.volunteer-card { text-align: left; display: flex; flex-direction: column; }
.volunteer-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}
.volunteer-card .btn { margin-top: var(--space-2); }

/* ---- Rent hall page ---- */
.amenity-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-top: var(--space-5); }
@media (max-width: 600px) { .amenity-list { grid-template-columns: 1fr; } }
.amenity-list li { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text); font-weight: 500; }
.amenity-list svg { width: 20px; height: 20px; color: var(--color-red); flex-shrink: 0; }

.pricing-table { width: 100%; border-collapse: collapse; background: var(--color-white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.pricing-table th, .pricing-table td { padding: var(--space-4) var(--space-5); text-align: left; border-bottom: 1px solid var(--color-border); }
.pricing-table th { background: var(--color-navy); color: var(--color-white); font-family: var(--font-heading); font-weight: 600; }
.pricing-table tr:last-child td { border-bottom: none; }
.pricing-table td:last-child, .pricing-table th:last-child { text-align: right; font-weight: 700; color: var(--color-navy); }
.table-scroll { overflow-x: auto; border-radius: var(--radius-md); }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
@media (max-width: 767px) { .gallery-grid { grid-template-columns: 1fr; } }

/* ---- Donate page ---- */
.tier-card { text-align: center; position: relative; }
.tier-card.is-featured { border-color: var(--color-gold-light); box-shadow: var(--shadow-md); }
.tier-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-gold);
  color: var(--color-white);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
}
.tier-amount { font-family: var(--font-heading); font-size: 2.25rem; color: var(--color-navy); font-weight: 700; margin: var(--space-3) 0; }
.tier-name { color: var(--color-red); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; }
.tier-features { text-align: left; margin: var(--space-5) 0; display: flex; flex-direction: column; gap: var(--space-2); }
.tier-features li { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--color-text-muted); font-size: 0.92rem; }
.tier-features svg { width: 18px; height: 18px; color: var(--color-gold); flex-shrink: 0; margin-top: 2px; }

.cause-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
@media (max-width: 767px) { .cause-list { grid-template-columns: 1fr; } }
.cause-item { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5); background: var(--color-bg); border-radius: var(--radius-md); }
.cause-item .icon-badge { margin-bottom: 0; flex-shrink: 0; }

.tax-notice {
  background: var(--color-bg);
  border-left: 4px solid var(--color-gold);
  padding: var(--space-5);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* ---- CRM placeholder blocks (forms, payments, login, calendar) ---- */
.crm-placeholder {
  background: var(--color-bg);
  border: 2px dashed var(--color-gold-light);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
}
.crm-placeholder .crm-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(139, 105, 20, 0.12);
  color: var(--color-gold);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}
.crm-placeholder svg { width: 32px; height: 32px; color: var(--color-navy); margin: 0 auto var(--space-3); }
.field-mock { margin-bottom: var(--space-4); text-align: left; }
.field-mock label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: var(--space-2); color: var(--color-text); }
.field-mock .fake-input {
  height: 48px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}
.field-mock .fake-input.textarea { height: 110px; }

.form-input {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
}
.form-input:focus { outline: none; border-color: var(--color-navy); }
.form-error { color: var(--color-red); font-size: 0.88rem; margin: 0 0 var(--space-4); text-align: left; }
.form-success { color: var(--color-navy); font-size: 0.92rem; background: var(--color-bg-alt); border-radius: var(--radius-sm); padding: var(--space-4); margin-top: var(--space-4); }

/* ---- Contact page ---- */
.contact-info-list { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-6); }
.contact-info-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.contact-info-item .icon-badge { margin-bottom: 0; flex-shrink: 0; }
.contact-info-item h3 { margin-bottom: var(--space-1); font-size: 1rem; }
.contact-info-item p { margin: 0; }
.map-placeholder {
  margin-top: var(--space-6);
  min-height: 260px;
}

/* ---- Login page ---- */
.login-wrap { max-width: 440px; margin: 0 auto; }
.login-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.login-links { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); font-size: 0.9rem; }
.login-links a { color: var(--color-navy); font-weight: 600; }
.login-links a:hover { text-decoration: underline; }
.portal-features { margin-top: var(--space-8); }
.portal-features ul { display: flex; flex-direction: column; gap: var(--space-3); max-width: 440px; margin: var(--space-5) auto 0; }
.portal-features li { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-muted); }
.portal-features svg { width: 20px; height: 20px; color: var(--color-gold); flex-shrink: 0; }

/* ---- Footer ---- */
.footer { background: var(--color-navy-dark); color: rgba(255, 255, 255, 0.85); padding: var(--space-8) 0 var(--space-5); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); margin-bottom: var(--space-7); }
@media (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h4 { color: var(--color-white); font-family: var(--font-body); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-4); }
.footer-links { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-links a { color: rgba(255, 255, 255, 0.75); font-size: 0.92rem; transition: color var(--transition); }
.footer-links a:hover { color: var(--color-white); }
.footer-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.footer-tagline { color: var(--color-gold-light); font-family: var(--font-heading); font-style: italic; margin: var(--space-4) 0; }
.footer-contact { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-contact li { display: flex; align-items: flex-start; gap: var(--space-2); color: rgba(255, 255, 255, 0.75); font-size: 0.92rem; }
.footer-contact svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--color-gold-light); }
.social-row { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.social-row a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.social-row a:hover { background: var(--color-red); border-color: var(--color-red); }
.social-row svg { width: 18px; height: 18px; }
.footer-login-btn { margin-top: var(--space-5); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: var(--space-5);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

/* ---- Misc utility ---- */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.mt-6 { margin-top: var(--space-6); }

/* Membership claim form on the member dashboard. The card centres its text,
   which is right for a short message but wrong for a form — labels and inputs
   need a left edge to line up on. */
.claim-card { max-width: 460px; text-align: left; }
.claim-title {
  font-size: 1.5rem;
  line-height: 1.25;
  text-align: center;
  margin-bottom: var(--space-3);
}
.claim-intro {
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}
.claim-form { display: flex; flex-direction: column; gap: var(--space-4); }
.claim-form .btn { margin-top: var(--space-2); }
.claim-error {
  color: var(--color-red);
  font-size: 0.9rem;
  margin: 0;
}
.claim-help {
  text-align: center;
  font-size: 0.9rem;
  margin: var(--space-5) 0 0;
  color: var(--color-text-muted);
}

/* Member-editable contact details. */
.contact-card { text-align: left; }
.contact-intro { font-size: 0.92rem; color: var(--color-text-muted); margin-bottom: var(--space-5); }
/* Ten fields in one column is a mile of scrolling on a page that is mostly
   white space either side of it. Two columns, with the address given the
   full width because a street does not fit in half of one. */
.contact-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-4) var(--space-5);
  max-width: 720px;
  align-items: start;
}
.contact-form .field-mock { margin-bottom: 0; }
/* Things that span: the address, and anything that speaks about the form as
   a whole rather than about one box. */
.contact-form .field-wide,
.contact-form .claim-error,
.contact-form .contact-saved,
.contact-form .btn { grid-column: 1 / -1; }
.contact-form .btn { justify-self: start; margin-top: var(--space-2); }
.contact-opt { font-weight: 400; color: var(--color-text-muted); font-size: 0.85em; }
.contact-saved { color: var(--color-green, #1F5A2C); font-size: 0.9rem; margin: 0; font-weight: 600; }

/* ---- Ticket blocks: seatings, membership, attendees ----
   These only appear when an event switched the matching block on, so most
   events show none of them. */

.ticket-seatings { padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }
.ticket-seatings h3,
.ticket-attendees h3,
.ticket-extras h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  margin: 0 0 var(--space-3);
}
.ticket-seating-list { display: flex; flex-direction: column; gap: var(--space-2); }

/* A whole row is the target, not just the little circle — this gets used on
   phones, standing up, at a lodge dinner. */
.ticket-seating {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.ticket-seating:hover { border-color: var(--color-navy); }
.ticket-seating:has(input:checked) {
  border-color: var(--color-navy);
  background: var(--color-bg-alt);
}
.ticket-seating-label { flex: 1; font-weight: 600; }
.ticket-seating-label small { display: block; font-weight: 400; color: var(--color-text-muted); }
.ticket-seating-left { font-size: 0.82rem; color: var(--color-red); font-weight: 600; }
.ticket-seating.is-full { opacity: 0.55; cursor: not-allowed; }

.ticket-option-row.is-full { opacity: 0.55; }
.ticket-option-price small { font-weight: 400; color: var(--color-text-muted); }
.ticket-member-applied { color: var(--color-green); font-weight: 600; }

.ticket-extras { padding-top: var(--space-4); }

.ticket-attendees { padding: var(--space-5) 0; border-top: 1px solid var(--color-border); }

/* The phone sits in its own block and was given none of this: no rule above
   it and no padding, so it ran straight into the guest names and the total. */
.ticket-contact { padding: var(--space-5) 0; border-top: 1px solid var(--color-border); }
.ticket-contact .ticket-option-desc { margin: var(--space-2) 0 0 84px; }
@media (max-width: 520px) { .ticket-contact .ticket-option-desc { margin-left: 0; } }

/* Each row says whose ticket it is. The first one is the buyer, so it reads
   "You" rather than asking a signed-in member for their own name. */
.ticket-attendee-row {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.ticket-attendee-who {
  flex: 0 0 72px;
  font: 600 0.875rem/1.3 'Inter', system-ui, sans-serif;
  color: var(--color-text-muted);
}
.ticket-attendee-row .ticket-attendee { margin-bottom: 0; }
@media (max-width: 520px) {
  .ticket-attendee-row { flex-direction: column; align-items: stretch; gap: var(--space-1); }
  .ticket-attendee-who { flex: none; }
}

.ticket-attendee {
  display: block;
  width: 100%;
  margin-bottom: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
}

.ticket-member { padding: var(--space-4) 0; border-top: 1px solid var(--color-border); }
.ticket-member.is-verified p { margin: 0; color: var(--color-green); font-weight: 600; }
.ticket-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--color-navy);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.ticket-member-fields { margin-top: var(--space-3); }
.ticket-member-row { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.ticket-member-row input {
  flex: 1;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
}
@media (max-width: 560px) {
  .ticket-member-row { flex-direction: column; }
}

/* Tax and the fee sit above the total, quieter than it, so the number
   somebody is agreeing to pay is still the one that stands out. */
.ticket-total-row.is-sub {
  padding: var(--space-2) 0;
  margin-bottom: 0;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  border-bottom: none;
}

/* ---- A free event ---- */
/* Centred. The card is wide and the button is the only thing in it that does
   anything - left-aligned it read as a stray link rather than the point of
   the page. */
.ticket-free-block { text-align: center; padding: var(--space-4) 0; }
.ticket-free { font-size: 1.05rem; margin-bottom: var(--space-5); }
.ticket-free-block .btn { min-width: 220px; }
.ticket-free-note { font-size: 0.88rem; color: var(--color-text-muted); margin-top: var(--space-4); }
/* The little arrow on a button that leaves the site. A button that moves
   somebody somewhere else without saying so is one they distrust. */
.btn-external { width: 14px; height: 14px; margin-left: 6px; vertical-align: -2px; }

/* ---- Lodge hours, in the hero ---- */
/* A band under the buttons rather than a section under the hero. Dark enough
   to read over the photograph whatever the photograph is doing behind it. */
.hero-hours {
  margin: var(--space-6) auto 0;
  /* Wide enough that "Closed, except for scheduled events" stays on one
     line. At 860 it wrapped, which made its column a line taller than the
     other two and left the panel looking lopsided. */
  max-width: 1000px;
  padding: var(--space-4) var(--space-5);
  background: rgba(8, 26, 61, .62);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius, 10px);
  backdrop-filter: blur(3px);
}
/* A heading, not a fourth day. The serif the rest of the site uses for
   headings, and a rule under it so the title and the list are visibly two
   things rather than four of the same thing. */
.hero-hours-label {
  display: block;
  text-align: center;
  font: 600 1.18rem/1.2 var(--font-heading, Georgia, serif);
  letter-spacing: .01em;
  color: #fff;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
/* Equal columns, so the days sit on a regular grid however long their names
   are. Laid out by content width and centred as a group, "Saturday" landed
   wherever the words either side of it pushed it. */
.hours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-4) var(--space-5);
  align-items: start;
}
.hours-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.hours-day {
  font: 700 0.72rem/1 var(--font-body, inherit);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-gold-light, #E4C36B);
}
.hours-when { font-size: 1.02rem; color: #fff; }
.hero-hours .hours-row { gap: 3px; }
/* A hairline between the days, so three columns read as three columns.
   :not(:first-child) rather than a trailing border, so there is never one
   hanging off the end - and it goes when they stop sitting side by side. */
@media (min-width: 561px) {
  .hero-hours .hours-row:not(:first-child) {
    border-left: 1px solid rgba(255, 255, 255, .14);
  }
}
.hero-hours .hours-when { font-size: 0.95rem; }

/* On the contact page it sits in a white card in a column, not a navy
   strip across the page. */
.hours-grid-stacked { display: block; }
.hours-grid-stacked .hours-row {
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  min-width: 0;
  max-width: 280px;
  gap: var(--space-4);
  padding: 3px 0;
}
.hours-grid-stacked .hours-day { color: var(--color-text-muted); }
.hours-grid-stacked .hours-when { color: var(--color-text); font-size: 0.92rem; }

@media (max-width: 640px) {
  .hours-grid { gap: var(--space-4); }
  .hours-row { min-width: 140px; }
}

/* On a phone the three days wrapped into two rows of stacked label-and-time,
   five lines in all, and the last one fell six pixels past the bottom of the
   screen - so the answer to "are they open today" needed a scroll after all.
   One line per day instead: day on the left, hours on the right. */
@media (max-width: 560px) {
  /* The hero is a full 100vh on a phone and the content has to live inside
     it. space-8 top and bottom was most of the room, and pushed the last
     line of the hours six pixels under the fold. */
  /* Enough room that the hours are not sitting exactly on the bottom edge.
     Phones vary by a few pixels between models and browser toolbars, so
     landing on the boundary means it is under the fold on somebody else. */
  .hero-inner { padding: var(--space-4) 0; }
  .hero-hours { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); }
  .hero-hours .hours-grid { display: block; }
  .hero-hours .hours-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    min-width: 0;
    padding: 2px 0;
    text-align: left;
  }
  .hero-hours-label {
    font-size: 0.98rem;
    padding-bottom: 6px;
    margin-bottom: 8px;
  }
  .hero-hours .hours-day { font-size: 0.66rem; }
  .hero-hours .hours-when { font-size: 0.85rem; }
}

/* ---- Lodge calendar ---- */
/* Grouped by day rather than drawn as a month grid. Most of what is on this
   calendar is the weekly rhythm — when the lodge opens, Thursday dinner,
   karaoke — and a month grid squeezes that into unreadable slivers on a phone,
   which is where members will open it. A day at a time reads properly at any
   width. */

.lodge-cal { max-width: 760px; margin: 0 auto; }

.lodge-cal-day + .lodge-cal-day { margin-top: var(--space-5); }

.lodge-cal-date {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-navy);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-gold);
}
/* Today earns a marker; every other day is just a date. */
.lodge-cal-date .is-today {
  background: var(--color-red);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: var(--space-2);
  vertical-align: middle;
}

/* "Are you an Elks member?", asked when somebody clicks to pay rather than
   printed on the page where it gets scrolled past. */
.mprompt {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(10, 18, 34, .6);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.mprompt-card {
  background: var(--color-white, #fff); border-radius: 12px;
  padding: 26px; width: min(440px, 100%);
  box-shadow: 0 24px 60px rgba(8, 14, 30, .34);
}
.mprompt-title { margin: 0 0 8px; font-size: 1.25rem; color: var(--color-navy); }
.mprompt-body { margin: 0 0 18px; color: var(--color-text-muted); line-height: 1.5; }
/* Anything here that sets its own display has to say so for [hidden] too,
   or the attribute is ignored and two steps of the dialog overlap. */
.mprompt-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mprompt-actions[hidden], .mprompt-form[hidden], .mprompt-row[hidden] { display: none; }
.mprompt-actions .btn { flex: 1 1 auto; }
.mprompt-signin { margin: 14px 0 0; text-align: center; font-size: 0.88rem; }
.mprompt-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.mprompt-row .form-input { flex: 1 1 140px; }
.mprompt-error {
  margin: 0 0 12px; color: var(--color-red, #C41230); font-size: 0.88rem;
}
/* Membership status. The word you are looking for, in the colour that answers
   the question, with the date under it. It was a sentence, which made you read
   it to find out whether anything was wrong. */
.status-block { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.status-pill {
  align-self: flex-start; border-radius: 999px;
  padding: 5px 12px; font-size: 0.8rem; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase;
}
.status-pill.is-good { background: #E4F1E6; color: #1F5A2C; }
.status-pill.is-due { background: #FBEAEE; color: #A3122B; }
.status-pill.is-unknown { background: #EEF0F4; color: #5A6478; }
.status-line { display: flex; flex-direction: column; gap: 1px; }
.status-label { font-size: 0.8rem; color: var(--color-text-muted); }
.status-value { font-size: 1.05rem; color: var(--color-navy); }

/* Paying dues. One row per year owed, no quantity anywhere: you are choosing
   which year you are settling, never how many of them to buy. */
.dues-choice {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0; cursor: pointer;
}
.dues-choice + .dues-choice { border-top: 1px solid var(--color-border); }
.dues-choice.is-only { cursor: default; }
.dues-choice input { flex: none; width: 18px; height: 18px; margin: 0; }
.dues-choice-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dues-choice-name { font-weight: 700; color: var(--color-navy); }
.dues-choice-sub { font-size: 0.85rem; color: var(--color-text-muted); }
.dues-choice-price { flex: none; font-weight: 700; font-size: 1.1rem; }
.dues-loading {
  margin: 0; padding: var(--space-4) 0;
  text-align: center; color: var(--color-text-muted); font-size: 0.92rem;
}
.dues-why {
  margin: var(--space-3) 0 var(--space-4); padding: var(--space-3);
  background: var(--color-bg-alt, #F4F6FA); border-radius: 8px;
  font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.5;
}

/* A card that is a link to somewhere. The overlay sits under anything
   inside the card that is itself clickable. */
.card-linked { position: relative; }
.card-hit { position: absolute; inset: 0; z-index: 1; }
.card-linked .lodge-cal { position: relative; z-index: 0; }
.card-linked .card-above { position: relative; z-index: 2; }
.card-linked:hover h3 { color: var(--color-red); }
.card-more {
  margin: var(--space-3) 0 0; font-size: 0.85rem; font-weight: 600;
  color: var(--color-navy);
}
.card-linked:hover .card-more { text-decoration: underline; }

/* The whole card opens the event. Laid over it rather than wrapped around
   it, so the Buy Tickets button inside stays a button. */
.event-card { position: relative; }
.event-card-hit { position: absolute; inset: 0; z-index: 1; }

/* Sized for the people actually reading it. Most of the lodge is not
   twenty-five, and the event name, the time and the price were all being
   set at sizes that assume good eyes and a short distance. */
.event-card h3 { font-size: 1.45rem; line-height: 1.25; }
.event-card .event-time { font-size: 1.05rem; font-weight: 600; color: var(--color-navy); }
.event-card .event-desc { font-size: 1.02rem; line-height: 1.6; }
.event-card .btn { font-size: 1.02rem; padding: 12px 22px; }
.event-card .event-body { padding: var(--space-5); }
.event-date-badge .month { font-size: 0.9rem; letter-spacing: .06em; }
.event-date-badge .day { font-size: 1.9rem; }
.event-card .event-body .btn { position: relative; z-index: 2; }
.event-card:hover h3 { color: var(--color-red); }

.lodge-cal-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  align-items: baseline;
}
.lodge-cal-item + .lodge-cal-item { border-top: 1px solid var(--color-border); }

/* Fixed column so the titles line up down the page and the times can be
   scanned without reading them. */
.lodge-cal-time {
  flex: 0 0 104px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.lodge-cal-title { flex: 1 1 auto; color: var(--color-text); }
.lodge-cal-where {
  display: block;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.lodge-cal-foot {
  margin-top: var(--space-5);
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.lodge-cal-note {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-6) 0;
}

/* Under ~440px the time column costs more than it gives: the title gets a
   sliver and wraps to four lines. Stack instead. */
@media (max-width: 440px) {
  .lodge-cal-item { display: block; }
  .lodge-cal-time { display: block; margin-bottom: 2px; }
}

/* The member dashboard shows the same list in a narrow sidebar card, where
   there is no room for a time column at all. */
.lodge-cal-compact .lodge-cal-item { display: block; padding: var(--space-2) 0; }
.lodge-cal-compact .lodge-cal-time { display: block; margin-bottom: 2px; }
.lodge-cal-compact .lodge-cal-date { font-size: 0.95rem; }
.lodge-cal-compact .lodge-cal-where { display: none; }

/* ---- Lodge calendar: regular hours ---- */
/* The lodge's week, stated once. Printing "Lodge OPEN 4-9pm" seventeen times
   down a page is several screens of scrolling to learn five facts. */

.lodge-cal-rhythm {
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}
.lodge-cal-rhythm-head {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--color-navy);
  margin: 0 0 var(--space-3);
}
.lodge-cal-rhythm-row {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  align-items: baseline;
}
.lodge-cal-rhythm-row + .lodge-cal-rhythm-row { border-top: 1px solid var(--color-border); }
.lodge-cal-rhythm-day {
  flex: 0 0 42px;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-red);
}
.lodge-cal-rhythm-what { flex: 1 1 auto; font-size: 0.92rem; color: var(--color-text); }

.lodge-cal-upcoming .lodge-cal-rhythm-head { margin-top: var(--space-2); }

/* Sidebar card: no room for a background panel or a day column that wide. */
.lodge-cal-compact .lodge-cal-rhythm {
  background: none;
  padding: 0;
  margin-bottom: var(--space-4);
}
.lodge-cal-compact .lodge-cal-rhythm-head { font-size: 0.92rem; }
.lodge-cal-compact .lodge-cal-rhythm-day { flex: 0 0 34px; font-size: 0.72rem; }
.lodge-cal-compact .lodge-cal-rhythm-what { font-size: 0.82rem; }

/* ---- Lodge calendar: month / week grid ---- */
/* Their Wix grid is a wall of identical blue pills, because every Tue/Thu/Fri/
   Sat says "Lodge OPEN". Here the routine is a muted dot and only what differs
   carries a label, so a month can be scanned rather than read. */

.lodge-cal-grid-wrap { margin-top: var(--space-6); }

.lodge-cal-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.lodge-cal-bar-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-navy);
  min-width: 10ch;
  text-align: center;
}
.lodge-cal-nav {
  width: 34px; height: 34px;
  flex: none;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--color-navy);
  cursor: pointer;
}
.lodge-cal-nav:hover:not(:disabled) { background: var(--color-bg-alt); }
/* Disabled rather than hidden: the edge of what we hold is worth showing. */
.lodge-cal-nav:disabled { opacity: .3; cursor: default; }

.lodge-cal-toggle {
  margin-left: auto;
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}
.lodge-cal-toggle-btn {
  border: none;
  background: var(--color-white);
  color: var(--color-text-muted);
  font: 600 0.8rem/1 var(--font-body);
  padding: 8px 14px;
  cursor: pointer;
}
.lodge-cal-toggle-btn.is-on { background: var(--color-navy); color: var(--color-white); }

.lodge-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.lodge-cal-dow {
  text-align: center;
  font: 700 0.68rem/1 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-bottom: var(--space-2);
}

.lodge-cal-cell {
  /* Tall enough for three named entries plus the date. At 78px it fitted
     two, which is why anything weekly had to be squeezed into a dot. */
  min-height: 116px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  background: var(--color-white);
  padding: 5px 5px 4px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}
.lodge-cal-cell:hover { border-color: var(--color-navy); }
.lodge-cal-cell.is-outside { opacity: .38; }
.lodge-cal-cell.is-empty { background: var(--color-bg); }
.lodge-cal-cell.is-today { border-color: var(--color-red); border-width: 2px; }
.lodge-cal-cell.is-picked { background: var(--color-bg-alt); border-color: var(--color-navy); }

.lodge-cal-num { font-size: 0.78rem; font-weight: 700; color: var(--color-text); }
.lodge-cal-cell.is-today .lodge-cal-num { color: var(--color-red); }

.lodge-cal-chip {
  display: block;
  font-size: 0.7rem;
  line-height: 1.3;
  background: var(--color-red);
  color: var(--color-white);
  border-radius: 3px;
  padding: 2px 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The weekly rhythm: readable, but not competing with the one-off that
   changes somebody's plans. */
.lodge-cal-chip.is-routine {
  background: var(--color-bg-alt);
  color: var(--color-navy);
  border: 1px solid var(--color-border);
  padding: 1px 4px;
  font-weight: 500;
}
.lodge-cal-more { font-size: 0.65rem; color: var(--color-text-muted); }

.lodge-cal-dots { display: flex; gap: 3px; margin-top: auto; }
.lodge-cal-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-navy-light, var(--color-navy));
  opacity: .5;
}

.lodge-cal-panel {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
}
.lodge-cal-panel-head {
  font-family: var(--font-heading);
  font-size: 0.98rem;
  color: var(--color-navy);
  margin: 0 0 var(--space-2);
}

/* Phones: text will not fit in a 7-column cell at any size worth reading, so
   the cells become markers and the tapped day carries the detail. */
@media (max-width: 620px) {
  .lodge-cal-cell { min-height: 46px; align-items: center; }
  /* Seven columns of names does not fit a phone at any height. The dot
     under the date says "something is on", and tapping opens the day. */
  .lodge-cal-chip { display: none; }
  .lodge-cal-more { display: none; }
  .lodge-cal-dots { margin-top: 3px; justify-content: center; }
  /* A special still has to be visible, it just cannot be spelled out. */
  .lodge-cal-cell:not(.is-empty) .lodge-cal-num::after {
    content: '';
    display: block;
    width: 5px; height: 5px;
    margin: 3px auto 0;
    border-radius: 50%;
    background: var(--color-red);
  }
  .lodge-cal-bar-title { order: -1; width: 100%; text-align: left; }
  .lodge-cal-toggle { margin-left: auto; }
}

/* ---- Dues notice page ---- */
/* Reached from a reminder email, by someone who is not signed in and may be on
   a phone. One number, one button, nothing else to decide. */

.dues-notice-state { color: var(--color-text-muted); text-align: center; padding: var(--space-6) 0; }

.dues-notice-amount {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
}
.dues-notice-label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.dues-notice-figure {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 700;
  color: var(--color-navy);
  font-variant-numeric: tabular-nums;
}
.dues-notice-foot {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  text-align: center;
}

/* ---- Texting consent, legal pages ---- */
/* Carriers read these words, so they sit beside the box at full contrast, not
   tucked into a tooltip or a grey footnote. */
.sms-consent {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin: 0 0 var(--space-4);
  text-align: left;
}
.sms-consent input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--color-navy);
}
.sms-consent label {
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
}
.sms-consent a { color: var(--color-navy); text-decoration: underline; }

.footer-legal a { color: rgba(255, 255, 255, 0.8); text-decoration: underline; }
.footer-legal a:hover { color: #fff; }

.legal { max-width: 760px; margin: 0 auto; }
.legal h2 { font-size: 1.35rem; margin: var(--space-6) 0 var(--space-3); }
.legal h3 { font-size: 1.05rem; margin: var(--space-4) 0 var(--space-2); }
.legal p, .legal li { line-height: 1.65; color: var(--color-text); }
.legal ul { padding-left: 1.25rem; margin: 0 0 var(--space-4); }
.legal li { margin-bottom: var(--space-2); }
.legal a { color: var(--color-navy); text-decoration: underline; }
.legal .legal-updated { color: var(--color-text-muted); font-size: 0.9rem; }
.legal .legal-callout {
  background: var(--color-bg-alt);
  border-left: 4px solid var(--color-navy);
  padding: var(--space-4);
  border-radius: 6px;
}


/* ---- Member area: directory and bulletin ---- */
.mlib-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.mlib-card {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px;
  background: #fff; border: 1px solid #E3E6EC; border-radius: 12px;
  color: var(--color-text); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.mlib-card:hover { border-color: var(--color-navy); box-shadow: 0 4px 14px rgba(0, 48, 135, .10); transform: translateY(-1px); }
.mlib-logo {
  flex: none; width: 72px; height: 72px; border-radius: 10px; border: 1px solid #EEF0F4;
  background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.mlib-logo img { max-width: 64px; max-height: 64px; object-fit: contain; }
.mlib-logo-empty { background: #EDEFF4; color: var(--color-navy); font: 700 1.5rem/1 'Inter', system-ui, sans-serif; }
.mlib-body { min-width: 0; }
.mlib-body h3 { margin: 0 0 4px; font-size: 1.02rem; color: var(--color-navy); }
.mlib-body p { margin: 0 0 8px; font-size: 0.9rem; line-height: 1.45; color: var(--color-text-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mlib-go { font-size: 0.85rem; font-weight: 600; color: var(--color-red, #C8102E); }
.mlib-year { margin-bottom: var(--space-5); }
.mlib-year h3 { margin: 0 0 10px; font-size: 1.05rem; color: var(--color-navy); }
.mlib-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.mlib-doc {
  display: flex; gap: 10px; align-items: center; text-align: left; cursor: pointer;
  padding: 12px; background: #fff; border: 1px solid #E3E6EC; border-radius: 10px; font: inherit; color: var(--color-text);
}
.mlib-doc:hover { border-color: var(--color-navy); }
.mlib-doc svg { width: 26px; height: 26px; flex: none; color: var(--color-red, #C8102E); }
.mlib-doc strong { display: block; font-size: 0.95rem; color: var(--color-navy); }
.mlib-doc small { display: block; font-size: 0.78rem; color: var(--color-text-muted); }


/* ---- A bulletin issue page ---- */
.bul-page { background: #EEF0F4; }
.bul-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: var(--space-4); }
.bul-back { font-weight: 600; color: var(--color-navy); text-decoration: none; }
.mlib-doc-issue { text-decoration: none; }

.bul-tool-btns { display: inline-flex; gap: 8px; }