/*
Theme Name: Moose 296 Child
Theme URI: https://www.annapolismoose.org
Description: Brand child theme for Annapolis Moose Lodge #296 — navy (#1a1a1a) & gold (#f5a800), Oswald + Open Sans. Built on Astra.
Author: GABTel Technologies
Template: astra
Version: 1.0.0
*/

/* =================================================================
   Brand tokens — semantic colour layer.

   Each palette-critical token reads from an Elementor Global Colour
   (Site Settings > Global Colours) when one is defined, and falls back
   to the current black/gold/crimson hex otherwise. Change the four
   Global Colours in Elementor — or swap a whole palette — and the theme
   plus Elementor widgets recolour together, with no CSS edits.

   Elementor SYSTEM slots have stable CSS-var names:
     Primary   -> gold           (--e-global-color-primary)
     Secondary -> crimson         (--e-global-color-secondary)
     Text      -> ink, dark text on light   (--e-global-color-text)
     Accent    -> dark section surface        (--e-global-color-accent)

   Key split: --ink is TEXT, --surface-dark is BACKGROUND. They currently
   share #1a1a1a but are now independent tokens, so a light palette can
   lighten surfaces without turning heading/label text invisible.
   ================================================================= */
:root {
  /* ---- Palette levers (swappable via Elementor Global Colours) ---- */
  --gold:         var(--e-global-color-primary,   #f5a800);  /* Maryland gold      */
  --crimson:      var(--e-global-color-secondary, #a81826);  /* Maryland crimson   */
  --ink:          var(--e-global-color-text,      #1a1a1a);  /* dark text on light */
  --surface-dark: var(--e-global-color-accent,    #1a1a1a);  /* dark section bg    */

  /* ---- Text shown ON a dark surface (flip with the palette) ---- */
  --text-on-dark: #cccccc;

  /* ---- Derived shades / neutrals ---- */
  --gold-deep:    #c98800;
  --gold-hover:   #ffbf2e;
  --crimson-deep: #7d1019;
  --muted:        #6e6e6e;   /* grey */
  --mist:         #f4f6fb;   /* light section / card tint */
  --line:         #e6e6e6;   /* hairline borders */

  /* ---- Dark-surface gradient stops (derived from --surface-dark) ---- */
  --surface-dark-2: #3a3a3a; /* lighter stop */
  --surface-dark-3: #0d0d0d; /* darker stop  */

  /* ---- Backward-compatible aliases (existing CSS + Elementor templates) ---- */
  --navy:       var(--surface-dark);
  --navy-light: var(--surface-dark-2);
  --navy-deep:  var(--surface-dark-3);
}

/* =================================================================
   Palette presets — for side-by-side colour demos.
   The default (no body class) is the black/gold/crimson lodge brand in
   :root above. A body class switches the WHOLE theme to another palette;
   every token is overridden so the derived shades follow too (the --navy*
   aliases re-resolve automatically from --surface-dark*).
   Switch live with ?palette=intl in the URL (wired in functions.php); the
   choice sticks via a cookie while you click between pages.

   NOTE: this recolours everything the theme's own CSS controls — sections,
   cards, kickers, buttons, tables, hero, calendars, officer cards, amenity
   lists. Colours that were set per-widget INSIDE Elementor are baked into
   the page markup and are NOT overridden here; repointing those to the
   palette is a separate step (per-template).
   ================================================================= */

/* Floating demo palette switcher (fixed hex — stays neutral across palettes) */
.moose-palette-switcher {
  position: fixed; right: 16px; bottom: 16px; z-index: 99999;
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.96); border: 1px solid #e0e0e0;
  border-radius: 50px; padding: 7px 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
  font-family: "Oswald", sans-serif;
}
.moose-palette-switcher .mps-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: 1.5px; color: #6e6e6e; padding-right: 2px;
}
.moose-palette-switcher .mps-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: none; background: none; cursor: pointer;
  padding: 4px 10px 4px 4px; border-radius: 50px; transition: background .15s ease;
}
.moose-palette-switcher .mps-btn:hover { background: #f4f6fb; }
.moose-palette-switcher .mps-btn[aria-pressed="true"] { background: #eef0f4; }
.moose-palette-switcher .mps-swatch {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--a) 0 50%, var(--b) 50% 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.moose-palette-switcher .mps-btn[aria-pressed="true"] .mps-swatch { box-shadow: 0 0 0 2px #1a1a1a; }
.moose-palette-switcher .mps-name {
  font-size: .76rem; letter-spacing: .5px; color: #1a1a1a; text-transform: uppercase;
}
@media (max-width: 600px) {
  .moose-palette-switcher .mps-label,
  .moose-palette-switcher .mps-name { display: none; }
}

/* International — Moose International blue (mooseintl.org) */
.palette-intl {
  --gold:           #386bc8;   /* brand blue (fills the gold slot) */
  --gold-deep:      #1f4da2;   /* deep blue                        */
  --gold-hover:     #5486e3;   /* lighter blue hover               */
  --crimson:        #c83838;   /* red accent                       */
  --crimson-deep:   #9e2626;
  --ink:            #243447;   /* dark slate text                  */
  --surface-dark:   #1f4da2;   /* deep-blue section background     */
  --surface-dark-2: #386bc8;   /* gradient lighter stop            */
  --surface-dark-3: #174393;   /* gradient darker stop             */
  --text-on-dark:   #dce7f7;   /* light text on blue               */
  --muted:          #72777c;
  --mist:           #eef2f6;   /* light section tint               */
  --line:           #d4dce6;
}

/* International hero — white background with dark text (per request).
   Overrides the dark hero gradient + the per-widget white/grey/gold text that
   is baked into home.json, scoped to the International palette only. */
.palette-intl .moose-hero {
  /* white hero, but keep the moose logo watermark: swap the dark overlay/base
     for a light one so the logo layer stays visible (a flat 'background' here
     would reset the whole stack and drop the logo). */
  background-image:
    linear-gradient(rgba(255,255,255,0.82), rgba(255,255,255,0.82)),
    url('http://annapolismoose.gabtel.com/wp-content/uploads/2026/06/annapolis_moose_logo.svg'),
    radial-gradient(1200px 500px at 80% -10%, rgba(56,107,200,0.10), transparent 60%),
    linear-gradient(160deg, #ffffff 0%, #eef2f9 100%) !important;
  background-size: auto, 45% auto, auto, auto !important;
  background-position: 0 0, center center, 0 0, 0 0 !important;
  background-repeat: no-repeat !important;
}
.palette-intl .moose-hero .elementor-heading-title,
.palette-intl .moose-hero h1,
.palette-intl .moose-hero h2,
.palette-intl .moose-hero h3 { color: #1a1a1a !important; }
/* keep the heading's accent line, but in the International blue not gold */
.palette-intl .moose-hero .elementor-heading-title span { color: var(--gold-deep) !important; }
.palette-intl .moose-hero .elementor-widget-text-editor,
.palette-intl .moose-hero p { color: #333333 !important; }
/* stats strip on white: dark hairline + readable grey labels */
.palette-intl .moose-hero-stats { border-top-color: rgba(0,0,0,.14) !important; }
.palette-intl .moose-hero-stats .label,
.palette-intl .moose-hero-stats p { color: #555555 !important; }
/* kicker pill: blue tint to match the palette */
.palette-intl .moose-hero .moose-pill {
  background: rgba(56,107,200,.12) !important;
  border-color: rgba(56,107,200,.45) !important;
}
/* the secondary hero button used white text — keep it visible on white */
.palette-intl .moose-hero .elementor-button { color: #1a1a1a !important; }

/* Light — senior-friendly, gray/mist section backgrounds, dark text throughout.
   Sections that were black become soft blue-gray; no dark areas except footer.
   Directly addresses the senior-audience concern raised 2026-07-01. */
.palette-light {
  --gold:           #c98800;   /* gold-deep — more legible on white     */
  --gold-deep:      #a07000;
  --gold-hover:     #f5a800;
  --crimson:        #a81826;
  --crimson-deep:   #7d1019;
  --ink:            #1a1a1a;
  --surface-dark:   #f0f4fb;   /* light blue-gray — sections go light   */
  --surface-dark-2: #e2e8f4;
  --surface-dark-3: #d4dcec;
  --text-on-dark:   #1a1a1a;   /* dark text on light sections           */
  --muted:          #5a5a5a;
  --mist:           #ffffff;
  --line:           #d8dde6;
}
/* Section headings: override the hardcoded #fff !important */
.palette-light .moose-section-navy { color: var(--ink) !important; }
.palette-light .moose-section-navy h1,
.palette-light .moose-section-navy h2,
.palette-light .moose-section-navy h3,
.palette-light .moose-section-navy h4 { color: var(--ink) !important; }
.palette-light .moose-section-navy p,
.palette-light .moose-section-navy .elementor-widget-text-editor { color: #333 !important; }
.palette-light .moose-section-navy .moose-kicker { color: var(--gold-deep) !important; }
/* Links footer block on light: needs dark text */
.palette-light .moose-links-footer h4 { color: var(--gold-deep); }
.palette-light .moose-links-footer a { color: #333; }
.palette-light .moose-links-footer a:hover { color: var(--gold-deep); }
/* Hero: white bg, dark text (same treatment as intl) — keep the logo watermark
   by rebuilding the layer stack rather than resetting it with a flat background. */
.palette-light .moose-hero {
  background-image:
    linear-gradient(rgba(255,255,255,0.82), rgba(255,255,255,0.82)),
    url('http://annapolismoose.gabtel.com/wp-content/uploads/2026/06/annapolis_moose_logo.svg'),
    radial-gradient(1200px 500px at 80% -10%, rgba(245,168,0,0.10), transparent 60%),
    linear-gradient(160deg, #ffffff 0%, #f0f4fb 100%) !important;
  background-size: auto, 45% auto, auto, auto !important;
  background-position: 0 0, center center, 0 0, 0 0 !important;
  background-repeat: no-repeat !important;
}
.palette-light .moose-hero .elementor-heading-title,
.palette-light .moose-hero h1,
.palette-light .moose-hero h2,
.palette-light .moose-hero h3 { color: #1a1a1a !important; }
.palette-light .moose-hero .elementor-heading-title span { color: var(--gold) !important; }
.palette-light .moose-hero .elementor-widget-text-editor,
.palette-light .moose-hero p { color: #333333 !important; }
.palette-light .moose-hero-stats { border-top-color: rgba(0,0,0,.14) !important; }
.palette-light .moose-hero-stats .label,
.palette-light .moose-hero-stats p { color: #555 !important; }
.palette-light .moose-hero .moose-pill {
  background: rgba(201,136,0,.12) !important;
  border-color: rgba(201,136,0,.45) !important;
}
.palette-light .moose-hero .elementor-button { color: #1a1a1a !important; }
/* Baked-in cccccc text on dark sections — override globally */
.palette-light .moose-section-navy .elementor-widget { color: #333 !important; }

/* Warm — dark warm brown sections, amber gold, warm cream page tint.
   Keeps the dark section feel of the brand but in a warmer, lodge-character tone. */
.palette-warm {
  --gold:           #d4890a;   /* amber gold                            */
  --gold-deep:      #a86800;
  --gold-hover:     #f5a800;
  --crimson:        #8b2500;   /* deep warm red-brown                   */
  --crimson-deep:   #5c1700;
  --ink:            #2d1f0e;   /* warm dark text                        */
  --surface-dark:   #3d2b1f;   /* dark warm brown sections              */
  --surface-dark-2: #5c4033;
  --surface-dark-3: #1f1108;
  --text-on-dark:   #f5e6d0;   /* warm cream text on dark               */
  --muted:          #7a6352;
  --mist:           #fdf6ec;   /* warm cream page tint                  */
  --line:           #e8d5b8;
}
/* Hardcoded cccccc text on dark sections — override with warm cream */
.palette-warm .moose-section-navy p,
.palette-warm .moose-hero-stats .label,
.palette-warm .moose-hero-stats p { color: var(--text-on-dark) !important; }
.palette-warm .moose-links-footer a { color: #e8d5b8; }

/* ---------- Typography: Oswald headings, Open Sans body ---------- */
body,
.ast-container {
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
  font-family: "Oswald", "Arial Narrow", sans-serif;
  letter-spacing: 0.5px;
  color: var(--ink);
}

/* ---------- Links & accents ---------- */
a { color: var(--ink); }
a:hover { color: var(--gold-deep); }

/* ---------- Buttons (Astra + Gutenberg only) ----------
   NOTE: Elementor buttons are styled per-instance in the page builder so the
   builder's own background/color settings can win. We don't !important here.
*/
.ast-button,
.wp-block-button__link {
  background-color: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  border-radius: 50px;
}
.ast-button:hover,
.wp-block-button__link:hover {
  background-color: #ffbf2e;
  color: var(--ink);
}
/* Elementor buttons: just consistent typography; colors come from the widget. */
.elementor-button {
  font-family: "Oswald", sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  border-radius: 50px;
}

/* ---------- Header / site title accent ---------- */
.site-header,
.ast-primary-header-bar {
  border-bottom: 2px solid var(--gold);
}

/* Constrain SVG logo size in nav */
.custom-logo.astra-logo-svg,
.site-logo-img img {
  width: 50px !important;
  height: auto !important;
}

/* ---------- Footer on brand navy ---------- */
.site-footer,
.ast-small-footer {
  background-color: var(--navy-deep);
  color: #cccccc;
}
.ast-small-footer-wrap {
  padding: 6px 0;
}
.site-footer a { color: #cccccc; }
.site-footer a:hover { color: var(--gold); }

/* =================================================================
   Component classes — apply via Elementor column/section
   "Advanced > CSS Classes" so the imported templates look correct.
   ================================================================= */

/* Small gold uppercase label above section titles (e.g. "Who We Are") */
.moose-kicker {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  font-family: "Oswald", sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--gold-deep) !important;
}
.moose-kicker::before {
  content: "";
  width: 28px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
}
.moose-section-navy .moose-kicker { color: var(--gold) !important; }

/* Section background helpers (use as CSS class on a section/container) */
.moose-section-mist { background: var(--mist) !important; }
.moose-section-navy {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(245,168,0,0.12), transparent 60%),
    linear-gradient(160deg, var(--navy-light) 0%, var(--navy) 55%, var(--navy-deep) 100%) !important;
  color: #e0e0e0;
}

/* Hero — SVG logo dimmed and layered over a solid black background */
.moose-hero {
  background-image:
    linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
    url('http://annapolismoose.gabtel.com/wp-content/uploads/2026/06/annapolis_moose_logo.svg'),
    radial-gradient(1200px 500px at 80% -10%, rgba(245,168,0,0.12), transparent 60%),
    linear-gradient(160deg, #2a2a2a 0%, #1a1a1a 55%, #000000 100%) !important;
  background-size: auto, 45% auto, auto, auto !important;
  background-position: 0 0, center center, 0 0, 0 0 !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
}

.moose-section-navy h1,
.moose-section-navy h2,
.moose-section-navy h3,
.moose-section-navy h4 { color: #fff !important; }
.moose-section-navy p { color: #cccccc; }

/* Card — apply to an Elementor column to get the mockup's card look */
.moose-card {
  background: #fff;
  border: 1px solid var(--line, #f4f6fb);
  border-radius: 14px;
  padding: 34px 30px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.22,1,.36,1),
              box-shadow .3s cubic-bezier(.22,1,.36,1);
}
.moose-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.moose-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
}
.moose-card:hover::before { transform: scaleX(1); }

/* Round gradient icon used inside cards (apply to an Elementor icon widget wrapper) */
.moose-card-icon .elementor-icon {
  width: 62px !important; height: 62px !important;
  display: grid !important; place-items: center !important;
  border-radius: 16px !important;
  background: linear-gradient(160deg, var(--navy-light), var(--navy)) !important;
  color: var(--gold) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* Hero subtitle should wrap narrower than the full hero width */
.moose-hero > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor:not(.moose-hero-stats *) {
  max-width: 620px;
}

/* Hero stats strip — apply to inner section, three columns inside */
.moose-hero-stats {
  border-top: 1px solid rgba(255,255,255,.16);
  padding-top: 30px !important;
  margin-top: 30px !important;
}
.moose-hero-stats .num,
.moose-hero-stats h2,
.moose-hero-stats h3 {
  font-family: "Oswald", sans-serif !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  line-height: 1;
}
.moose-hero-stats .label,
.moose-hero-stats p {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: .78rem !important;
  color: #cccccc !important;
  margin-top: 6px;
}

/* Event-card date box — apply to a small column on the left of an event row */
.moose-event-date {
  background: linear-gradient(160deg, var(--navy-light), var(--navy)) !important;
  color: #fff !important;
  border-radius: 8px;
  text-align: center;
  padding: 14px 8px !important;
}
.moose-event-date .mon,
.moose-event-date h3 {
  font-family: "Oswald", sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gold) !important;
  font-size: .85rem !important;
  margin: 0;
}
.moose-event-date .day,
.moose-event-date h2 {
  font-family: "Oswald", sans-serif !important;
  font-weight: 700 !important;
  font-size: 2.1rem !important;
  line-height: 1 !important;
  color: #fff !important;
  margin: 0;
}

/* Pill / badge — for hero kicker pills, "Live Music", etc.
   When applied to an Elementor heading widget, target the inner title element
   so the ring hugs the text instead of stretching across the column. */
.moose-pill .elementor-heading-title,
.moose-pill > .elementor-widget-container > .elementor-heading-title,
span.moose-pill,
.moose-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  background: rgba(245,168,0,0.14) !important;
  border: 1px solid rgba(245,168,0,0.45) !important;
  color: var(--gold) !important;
  font-family: "Oswald", sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  padding: 8px 18px !important;
  border-radius: 50px !important;
  width: auto;
}
/* If .moose-pill is on the widget wrapper, neutralize its block-level layout
   so the inner pill can size to content. */
.elementor-widget.moose-pill { display: inline-block; background: none !important; border: none !important; padding: 0 !important; }
.elementor-widget.moose-pill > .elementor-widget-container { padding: 0 !important; }

/* Larger pill variant (e.g. "Prefer to Talk?" on the hall rental footer) */
.moose-pill-lg .elementor-heading-title,
.moose-pill-lg > .elementor-widget-container > .elementor-heading-title,
.moose-pill-lg {
  font-size: 1.1rem !important;
  padding: 12px 26px !important;
}

/* Feature list — for the hours summary etc. (apply to icon-list widget) */
.moose-feature-list .elementor-icon-list-icon i {
  color: var(--gold-deep) !important;
}
.moose-section-navy .moose-feature-list .elementor-icon-list-icon i {
  color: var(--gold) !important;
}

/* Amenities list — generated from metadata.xlsx by load_metadata.py.
   Used on the Home (Lodge Amenities) and Hall Rental pages. */
.moose-amenity-list {
  list-style: none; margin: 24px auto 0; padding: 0; max-width: 760px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 32px; text-align: left;
}
.moose-amenity-list li { display: flex; align-items: center; gap: 12px; font-size: 1.05rem; color: var(--ink); }
.moose-amenity-list li i { color: var(--gold-deep); flex-shrink: 0; }
.moose-section-navy .moose-amenity-list li,
.moose-section-navy .moose-amenity-list li i { color: var(--gold); }
.moose-members-badge {
  display: inline-block; margin-left: 8px; padding: 2px 10px;
  font-family: "Oswald", sans-serif; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase;
  background: var(--gold); color: var(--ink); border-radius: 20px;
}
@media (max-width: 640px) { .moose-amenity-list { grid-template-columns: 1fr; } }

/* Lodge Amenities (Home page) — 3 columns instead of the shared 2-column default */
@media (min-width: 641px) {
  .elementor-element-homeAmenHtml .moose-amenity-list {
    max-width: 980px; grid-template-columns: repeat(3, 1fr);
  }
}

/* Charity logo row — generated from metadata.xlsx by load_metadata.py.
   Used on the Home page (Charities We Support). */
.moose-charity-logos {
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
  gap: 16px; margin: 28px auto 0; max-width: 900px;
}
.moose-charity-logos a {
  display: block; padding: 10px 14px; background: #fff; border-radius: 12px;
  border: 1px solid #e6e6e6; transition: transform .15s ease, box-shadow .15s ease;
}
.moose-charity-logos a:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(20,20,20,0.12); }
.moose-charity-logos img { display: block; height: 40px; width: auto; max-width: 100%; }
@media (max-width: 640px) {
  .moose-charity-logos { flex-wrap: wrap; gap: 14px; }
  .moose-charity-logos img { height: 36px; }
}

/* Helpful-links footer block — generated from metadata.xlsx by load_metadata.py.
   Used on the Home page (bottom, navy/black background, columns grouped by Type). */
.moose-links-footer {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 48px;
  max-width: 1000px; margin: 28px auto 0; text-align: left;
}
.moose-links-footer .moose-links-col { min-width: 180px; }
.moose-links-footer h4 {
  font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: 2px;
  color: var(--gold); font-size: 0.95rem; margin: 0 0 14px;
}
.moose-links-footer ul { list-style: none; margin: 0; padding: 0; }
.moose-links-footer li { margin-bottom: 10px; }
.moose-links-footer a { color: #cccccc; font-size: 0.98rem; }
.moose-links-footer a:hover { color: var(--gold); }

/* =================================================================
   Mockup component styles, scoped to .moose-page.
   Wrap any HTML widget content in <div class="moose-page">…</div> to get
   the static mockup's section/card/table/event-card/etc. styling.
   ================================================================= */
.moose-page { color: var(--ink); }
.moose-page h2 { font-family: "Oswald", sans-serif; color: var(--ink); text-transform: uppercase; font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: 14px; }
.moose-page h3 { font-family: "Oswald", sans-serif; color: var(--ink); text-transform: uppercase; font-size: 1.2rem; }
.moose-page p { line-height: 1.7; color: var(--ink); }

.moose-page .kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: 3px;
  font-size: 0.82rem; font-weight: 600; color: var(--gold-deep); margin-bottom: 14px;
}
.moose-page .kicker::before { content: ""; width: 28px; height: 3px; background: var(--gold); border-radius: 2px; }

.moose-page .lead { font-size: 1.08rem; color: var(--muted); }

.moose-page .grid { display: grid; gap: 26px; }
.moose-page .grid--2 { grid-template-columns: repeat(2, 1fr); }
.moose-page .grid--3 { grid-template-columns: repeat(3, 1fr); }
.moose-page .grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 820px) {
  .moose-page .grid--2, .moose-page .grid--3, .moose-page .grid--4 { grid-template-columns: 1fr; }
}

.moose-page .card {
  background: #fff; border: 1px solid #f4f6fb; border-radius: 14px;
  padding: 28px; box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  position: relative; overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.moose-page .card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.moose-page .card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.15); }
.moose-page .card:hover::before { transform: scaleX(1); }
.moose-page .card__icon {
  width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: 14px; background: linear-gradient(160deg, var(--navy-light), var(--navy));
  color: var(--gold); font-size: 1.3rem; margin-bottom: 16px;
}

.moose-page .feature-list { display: grid; gap: 12px; padding: 0; list-style: none; }
.moose-page .feature-list li { display: flex; gap: 13px; align-items: flex-start; }
.moose-page .feature-list i { color: var(--gold-deep); margin-top: 5px; flex: none; }

/* Event card — date box + body */
.moose-page .event-card {
  display: grid; grid-template-columns: 96px 1fr; gap: 18px;
  background: #fff; border: 1px solid #f4f6fb; border-radius: 14px;
  padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  transition: transform .3s ease;
}
.moose-page .event-card:hover { transform: translateY(-4px); }
.moose-page .event-card.is-closed { background: linear-gradient(160deg,#fff3f3,#fde6e6); border-color: #f3c5c5; }
.moose-page .event-date {
  background: linear-gradient(160deg, var(--navy-light), var(--navy));
  color: #fff; border-radius: 10px; text-align: center; padding: 12px 6px;
  display: grid; place-content: center;
}
.moose-page .event-date.closed { background: linear-gradient(160deg,#7a1414,#400606); }
.moose-page .event-date .mon { font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); font-size: 0.78rem; display:block; }
.moose-page .event-date .day { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 1.9rem; line-height: 1; display:block; }
.moose-page .event-body h3 { margin-bottom: 6px; }
.moose-page .event-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--gold-deep); font-size: 0.88rem; font-weight: 600; margin-bottom: 8px; }

/* Hours table */
.moose-page .hours-table {
  width: 100%; border-collapse: collapse; background: #fff;
  border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.10);
}
.moose-page .hours-table caption { caption-side: top; text-align: left; font-family: "Oswald"; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); padding-bottom: 12px; font-size: 0.9rem; }
.moose-page .hours-table th, .moose-page .hours-table td { padding: 14px 20px; text-align: left; }
.moose-page .hours-table thead th { background: var(--navy); color: var(--gold); font-family: "Oswald"; text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.88rem; }
.moose-page .hours-table tbody tr { border-bottom: 1px solid #f4f6fb; }
.moose-page .hours-table tbody tr:last-child { border-bottom: none; }
.moose-page .hours-table tbody tr:nth-child(even) { background: #f4f6fb; }
.moose-page .hours-table td:first-child { font-family: "Oswald"; font-weight: 600; text-transform: uppercase; color: var(--ink); }
.moose-page .hours-table .closed { color: #b23b3b; font-weight: 700; }

/* Stat tiles for hall rental */
.moose-page .stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 820px) { .moose-page .stat-tiles { grid-template-columns: repeat(2, 1fr); } }
.moose-page .stat-tile {
  text-align: center; padding: 26px 16px; border-radius: 14px; background: #fff;
  border: 1px solid #f4f6fb; box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.moose-page .stat-tile i { font-size: 1.6rem; color: var(--gold-deep); margin-bottom: 10px; }
.moose-page .stat-tile .big { font-family: "Oswald"; font-weight: 700; font-size: 2rem; color: var(--ink); line-height: 1; }
.moose-page .stat-tile .cap { text-transform: uppercase; letter-spacing: 1px; font-size: 0.78rem; color: var(--muted); margin-top: 8px; }

/* Price row */
.moose-page .price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px dashed #f4f6fb; }
.moose-page .price-row:last-child { border-bottom: none; }
.moose-page .price-row .name { font-family: "Oswald"; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.moose-page .price-row .amt { font-family: "Oswald"; font-weight: 700; color: var(--gold-deep); font-size: 1.2rem; }

/* Steps (numbered or year-labeled) */
.moose-page .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 820px) { .moose-page .steps { grid-template-columns: 1fr; } }
.moose-page .step .n { font-family: "Oswald"; font-weight: 700; font-size: 2.6rem; color: var(--gold); display: block; line-height: 1; margin-bottom: 8px; }
.moose-page .step h3 { text-transform: uppercase; margin-bottom: 8px; }
.moose-page .step p { color: var(--muted); }

/* Info list for contact */
.moose-page .info-list { display: grid; gap: 18px; }
.moose-page .info-item { display: flex; gap: 14px; align-items: flex-start; }
.moose-page .info-item .ico { width: 46px; height: 46px; flex:none; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(160deg, var(--navy-light), var(--navy)); color: var(--gold); }
.moose-page .info-item h4 { font-family: "Oswald"; text-transform: uppercase; letter-spacing: 1px; font-size: 0.92rem; color: var(--ink); margin-bottom: 2px; }
.moose-page .info-item p, .moose-page .info-item a { color: var(--muted); }

/* Map placeholder */
.moose-page .map-embed {
  border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.12);
  min-height: 320px; color: var(--ink);
}
.moose-page .map-embed iframe { width: 100%; display: block; }
.moose-page .map-embed .pin { font-size: 2.6rem; color: #b23b3b; margin-bottom: 6px; }
.moose-page .map-embed .addr { font-family: "Oswald"; text-transform: uppercase; letter-spacing: 1.5px; }
.moose-page .map-embed small { color: var(--muted); display: block; margin-top: 6px; }

/* Notice (for "form coming soon" stubs) */
.moose-page .notice {
  padding: 18px 22px; border-radius: 12px; background: #f4f6fb;
  border-left: 4px solid var(--gold); color: var(--muted);
}

/* Keep the primary nav on one line on desktop — Astra's default flex-wrap
   lets long menus (9 items incl. "W.O.T.M.") break onto a second row even
   when the viewport is wide enough. */
@media (min-width: 769px) {
  .main-header-menu.ast-flex { flex-wrap: nowrap; }
  .main-header-menu .menu-link { white-space: nowrap; }
}

/* Instant nav tooltips via data-tooltip attribute */
.main-header-menu a[data-tooltip] { position: relative; }
.main-header-menu a[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: var(--surface-dark); color: #fff;
  padding: 4px 10px; border-radius: 6px;
  font-size: .75rem; font-family: "Open Sans", sans-serif;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 0s;
  z-index: 9999;
}
.main-header-menu a[data-tooltip]:hover::after { opacity: 1; }

/* -------------------------------------------------- officer cards */
.moose-officer-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.moose-officer-card {
  text-align: center;
  padding: 28px 16px 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
  border-top: 4px solid var(--gold);
  transition: transform .2s, box-shadow .2s;
}
.moose-officer-card:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(0,0,0,.14); }
.moose-officer-avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 16px;
  background: var(--mist, #f4f6fb);
  display: flex; align-items: center; justify-content: center;
}
.moose-officer-avatar img { width: 100%; height: 100%; object-fit: cover; }
.moose-officer-avatar i { font-size: 2.6rem; color: var(--navy-light, #3a3a3a); }
.moose-officer-role {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.74rem;
  color: var(--gold-deep, #c98800);
  margin-bottom: 4px;
}
.moose-officer-name {
  font-family: "Oswald", sans-serif;
  font-size: 1.05rem;
  color: var(--ink, #1a1a1a);
  font-weight: 500;
}
.moose-officer-name.is-tba { color: var(--muted, #6e6e6e); font-style: italic; font-size: 0.9rem; }
@media (max-width: 600px) {
  .moose-officer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------- event flyer gallery */
.moose-flyer-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 480px));
  justify-content: center;
}
.moose-flyer-card {
  margin: 0;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
  border-top: 4px solid var(--gold);
  transition: transform .2s, box-shadow .2s;
}
.moose-flyer-card:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(0,0,0,.14); }
.moose-flyer-card img { width: 100%; height: auto; display: block; }
.moose-flyer-card figcaption { padding: 16px 20px; }
.moose-flyer-date {
  display: block;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.78rem;
  color: var(--gold-deep, #c98800);
  margin-bottom: 4px;
}
.moose-flyer-title {
  display: block;
  font-family: "Oswald", sans-serif;
  font-size: 1.2rem;
  color: var(--ink, #1a1a1a);
  font-weight: 500;
}

/* -------------------------------------------------- calendar page: month cards */
.moose-cal-month { margin: 0 auto 36px; max-width: 900px; }
.moose-cal-img {
  width: 100%; height: auto; display: block;
  border-radius: 6px; cursor: zoom-in;
}
.moose-cal-buttons {
  display: flex; justify-content: center; gap: 12px;
  margin-top: 12px; flex-wrap: wrap;
}
.moose-cal-buttons button,
.moose-cal-buttons a {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85rem;
  padding: 9px 22px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  background: var(--gold, #f5a800);
  color: var(--ink, #1a1a1a);
  transition: background .15s ease;
}
.moose-cal-buttons button:hover,
.moose-cal-buttons a:hover { background: #ffbf2e; color: var(--ink, #1a1a1a); }

/* ------------------------------------------- hall availability calendar */
.moose-hall-calendar-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  margin: 32px auto 0;
  max-width: 100%;
}
.moose-hall-calendar {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
  padding: 24px;
  width: 300px;
  flex-shrink: 0;
}
.moose-hall-calendar h3 {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 16px;
  color: var(--ink, #1a1a1a);
  font-size: 1.25rem;
  letter-spacing: 1px;
}
.moose-hall-calendar table {
  width: 100%;
  border-collapse: collapse;
}
.moose-hall-calendar th, 
.moose-hall-calendar td {
  width: 14.28%;
  text-align: center;
  padding: 6px 0;
  font-size: 0.88rem;
}
.moose-hall-calendar th {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  color: var(--muted, #6e6e6e);
  border-bottom: 1px solid #f4f6fb;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}
.moose-hall-calendar td {
  color: var(--ink, #1a1a1a);
  font-family: "Open Sans", sans-serif;
}
.moose-hall-calendar td.empty {
  color: #d1d5db;
}
.moose-hall-calendar td.booked {
  background-color: var(--crimson, #a81826);
  color: #ffffff;
  font-weight: bold;
  border-radius: 4px;
  position: relative;
  cursor: not-allowed;
}
.moose-hall-calendar td.today {
  border: 2px solid var(--gold, #f5a800);
  border-radius: 4px;
}
.moose-hall-calendar-legend {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 28px auto 0;
  font-size: 0.92rem;
  color: #cccccc;
}
.moose-hall-calendar-legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.moose-hall-calendar-legend-color {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}
.moose-hall-calendar-legend-color.available {
  background: #ffffff;
  border: 1px solid #e6e6e6;
}
.moose-hall-calendar-legend-color.booked {
  background: var(--crimson, #a81826);
}

/* Calendar on the navy section — white cards with dark text. The section
   forces h3{color:#fff!important}, so re-assert the calendar's own colors.
   Booked dates stay crimson, today keeps the gold border. */
.moose-section-navy .moose-hall-calendar {
  background: #ffffff !important;
  border: 1px solid #e6e6e6 !important;
}
.moose-section-navy .moose-hall-calendar h3 {
  color: var(--ink, #1a1a1a) !important;
}
.moose-section-navy .moose-hall-calendar th {
  color: var(--muted, #6e6e6e) !important;
}
.moose-section-navy .moose-hall-calendar td {
  color: var(--ink, #1a1a1a) !important;
}
.moose-section-navy .moose-hall-calendar td.empty {
  color: #d1d5db !important;
}
.moose-section-navy .moose-hall-calendar td.booked {
  color: #ffffff !important;
}

/* Fluent Forms (Hall Rental Inquiry) on the navy footer — readable on dark:
   white labels, white input fields, crimson submit button. */
.moose-section-navy .fluentform label,
.moose-section-navy .fluentform .ff-el-input--label label {
  color: #ffffff !important;
}
.moose-section-navy .fluentform input[type="text"],
.moose-section-navy .fluentform input[type="email"],
.moose-section-navy .fluentform input[type="tel"],
.moose-section-navy .fluentform input[type="number"],
.moose-section-navy .fluentform textarea,
.moose-section-navy .fluentform select {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid #3a3a3a !important;
}
.moose-section-navy .fluentform .ff-btn-submit {
  background: var(--crimson, #a81826) !important;
  color: #ffffff !important;
  border: none !important;
}
.moose-section-navy .fluentform .ff-message-success {
  color: #ffffff !important;
}

/* Compact the hall-rental "Room to Celebrate" (hrStats) and "Amenities"
   (hrAmen) rows — ~30% shorter. Scoped by element id so the shared
   .stat-tile / .moose-amenity-list styles on other pages are untouched. */
.elementor-element-hrStats .stat-tiles { gap: 12px !important; }
.elementor-element-hrStats .stat-tile { padding: 9px 16px !important; }
.elementor-element-hrStats .stat-tile i { font-size: 1.3rem !important; margin-bottom: 3px !important; }
.elementor-element-hrStats .stat-tile .big { font-size: 1.7rem !important; }
.elementor-element-hrStats .stat-tile .cap { margin-top: 2px !important; }
.elementor-element-hrAmen .moose-amenity-list { margin-top: 6px !important; gap: 5px 32px !important; }