/* Lodge Connect — Public surface (lc-005)
 * A warmer, more spacious application of the same design tokens. Scoped to
 * `.lc-public` so the portal (efficient/task-focused) is untouched. Prism's
 * two-surface divergence: public is inviting/storytelling, portal is dense.
 */

.lc-public {
  /* Warm system serif for headings only — personality without a web-font
   * dependency or layout shift. Body stays on the system sans stack. */
  --lc-font-display: "Iowan Old Style", "Palatino Linotype", Palatino,
                     "Book Antiqua", Georgia, serif;
  background: var(--lc-bg);
  color: var(--lc-text);
  font-family: var(--lc-font-sans);
  line-height: var(--lc-leading);
  margin: 0;
}
.lc-public h1, .lc-public h2, .lc-public h3 {
  font-family: var(--lc-font-display);
  font-weight: var(--lc-weight-semibold);
  line-height: 1.15;
  letter-spacing: 0.01em;
}
/* Color plain links maroon — but NOT anchor-styled buttons (.lc-btn), whose
   variant text colors must win. Without :not(.lc-btn), this rule's specificity
   (0,1,1) beat .lc-btn--primary / .lc-btn--on-dark (0,1,0), so <a> buttons on
   the maroon hero / CTA rendered maroon-on-maroon (invisible). [B1, B2] */
.lc-public a:not(.lc-btn) { color: var(--lc-maroon); }

/* ---------- Header ---------- */
.lc-public-header {
  background: var(--lc-surface);
  border-bottom: 1px solid var(--lc-border);
  padding: var(--lc-space-3) 0;
}
.lc-public-header__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lc-space-3);
  align-items: center;
  justify-content: space-between;
}
.lc-public-brand {
  font-family: var(--lc-font-display);
  font-weight: var(--lc-weight-semibold);
  font-size: var(--lc-text-lg);
  color: var(--lc-maroon) !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--lc-space-2);
}
.lc-public-brand__logo {
  height: 44px;
  width: auto;
  flex: none;
  display: block;
}
.lc-public-brand__mark {
  font-size: var(--lc-text-xs);
  letter-spacing: 0.12em;
  color: var(--lc-gold-700);
}
@media (max-width: 480px) {
  /* Keep the logo, shrink the wordmark text so the header doesn't overflow. */
  .lc-public-brand__logo { height: 36px; }
  .lc-public-brand { font-size: var(--lc-text-base); }
}
.lc-public-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lc-space-4);
  align-items: center;
}
.lc-public-nav a { text-decoration: none; font-weight: var(--lc-weight-medium); }

/* ---------- Hero ---------- */
.lc-hero {
  background: linear-gradient(160deg, var(--lc-maroon), var(--lc-maroon-800));
  color: var(--lc-cream);
  padding: var(--lc-space-8) 0;
}
.lc-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--lc-text-sm);
  color: var(--lc-gold);
  margin: 0;
}
.lc-hero__title {
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  margin: 0;
  color: var(--lc-cream);
}
.lc-hero__lede {
  font-size: var(--lc-text-lg);
  max-width: 52ch;
  color: #f3ece0;
}
/* Ghost button reads on the dark hero */
.lc-btn--on-dark { color: var(--lc-cream); border-color: rgba(245, 241, 232, 0.6); }
.lc-btn--on-dark:hover { background: rgba(245, 241, 232, 0.12); border-color: var(--lc-cream); }

/* ---------- Sections ---------- */
.lc-section { padding: var(--lc-space-8) 0; }
.lc-section--alt { background: var(--lc-surface-alt); }
.lc-section__title { font-size: var(--lc-text-2xl); color: var(--lc-maroon); margin-top: 0; }
.lc-cta { text-align: center; max-width: 60ch; margin-inline: auto; }
.lc-cta .lc-lead { margin-inline: auto; }
.lc-cta .lc-cluster { justify-content: center; }

/* Cards with a bottom CTA (e.g. the events list): flex column so the action
   pins to the bottom and CTAs align across a row regardless of title/blurb
   length. Grid items already stretch to equal height. [B3] */
.lc-card--cta { display: flex; flex-direction: column; }
.lc-card--cta > :last-child { margin-top: auto; margin-bottom: 0; }

/* ---------- Footer ---------- */
.lc-public-footer {
  background: var(--lc-ink);
  color: #e7ddd0;
  padding: var(--lc-space-6) 0;
  margin-top: var(--lc-space-8);
}
.lc-public-footer a { color: var(--lc-gold); }
.lc-public-footer__name { font-family: var(--lc-font-display); font-size: var(--lc-text-lg); margin: 0; }
.lc-public-footer .lc-card__meta { color: #b9ab9a; }

/* ===================== 2026-06 contemporary refresh ===================== */

/* Sticky header + subtle shadow. "Member sign-in" stays the gold .lc-btn--secondary CTA. */
.lc-public-header { position: sticky; top: 0; z-index: 100; box-shadow: var(--lc-shadow-sm); }

/* Mobile: collapse the nav behind a hamburger toggle */
.lc-nav-toggle { display: none; }
@media (max-width: 760px) {
  .lc-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--lc-tap-min); height: var(--lc-tap-min);
    background: transparent; border: 1px solid var(--lc-border-strong);
    border-radius: var(--lc-radius-md); color: var(--lc-primary); cursor: pointer;
  }
  .lc-public-nav {
    display: none; order: 3; width: 100%;
    flex-direction: column; align-items: stretch; gap: var(--lc-space-1);
    padding-top: var(--lc-space-2);
  }
  .lc-public-nav.is-open { display: flex; }
  .lc-public-nav a { padding: var(--lc-space-3) var(--lc-space-2); }
  .lc-public-nav .lc-btn { text-align: center; margin-top: var(--lc-space-2); }
}

/* Hero: full-height, centered, image-ready with a dark overlay so text pops */
.lc-hero {
  position: relative; min-height: 70vh;
  display: flex; align-items: center; text-align: center;
  background: linear-gradient(160deg, var(--lc-primary), var(--lc-primary-800));
  background-size: cover; background-position: center;
}
.lc-hero::before { content: ""; position: absolute; inset: 0; background: rgba(12, 16, 34, 0.55); }
.lc-hero > .lc-container--wide { position: relative; z-index: 1; max-width: 56rem; }
.lc-hero .lc-cluster { justify-content: center; }
.lc-hero__lede { margin-inline: auto; }

/* Feature cards: icon placeholder above the heading */
.lc-feature__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; margin-bottom: var(--lc-space-3);
  border-radius: var(--lc-radius-md);
  background: rgba(35, 45, 86, 0.08); color: var(--lc-primary);
}

/* Event rows: a calendar-date block + details, no bullets */
.lc-event-list { list-style: none; padding: 0; margin: 0; }
.lc-event-row { display: flex; gap: var(--lc-space-4); align-items: center; padding: var(--lc-space-4) 0; border-bottom: 1px solid var(--lc-border); }
.lc-event-row:last-child { border-bottom: 0; }
.lc-datebox {
  flex: none; width: 4rem; text-align: center; line-height: 1.1;
  background: var(--lc-primary); color: var(--lc-cream);
  border-radius: var(--lc-radius-md); padding: var(--lc-space-2) 0;
}
.lc-datebox__mon { display: block; font-size: var(--lc-text-xs); text-transform: uppercase; letter-spacing: 0.08em; }
.lc-datebox__day { display: block; font-size: var(--lc-text-xl); font-weight: var(--lc-weight-semibold); }
.lc-event-row__body { min-width: 0; }
.lc-event-row__title { font-family: var(--lc-font-display); font-size: var(--lc-text-lg); margin: 0; }
.lc-event-row__title a { text-decoration: none; }
.lc-event-row__meta { color: var(--lc-text-muted); font-size: var(--lc-text-sm); margin: var(--lc-space-1) 0 0; }

/* Footer: flex columns for address / contact / order line */
.lc-public-footer__cols { display: flex; flex-wrap: wrap; gap: var(--lc-space-5) var(--lc-space-8); align-items: flex-start; }
.lc-public-footer__cols > * { flex: 1 1 14rem; margin: 0; text-align: center; }
.lc-public-footer__cols p { margin: var(--lc-space-1) 0 0; }

/* Landing page: center section content to match the centered hero + CTA.
   The event agenda keeps its date-block row layout but is centered as a block
   (centering the row text would break the date-left / details-right layout). */
.lc-home .lc-section { text-align: center; }
.lc-home .lc-event-list { max-width: 42rem; margin-inline: auto; }
.lc-home .lc-event-row__body { text-align: left; }   /* keep agenda rows left-flush */