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

/* =================================================================
   Brand tokens — mirror the static mockup so the WordPress build
   matches annapolismoose.org's navy and the gold Moose accent.
   ================================================================= */
:root {
  --navy:       #020a7a;   /* annapolismoose.org brand blue */
  --navy-deep:  #010640;
  --navy-light: #0a1499;
  --gold:       #FFD700;
  --gold-deep:  #d4af00;
  --ink:        #1a1d29;
  --muted:      #5c6173;
  --mist:       #f4f6fb;
}

/* ---------- 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(--navy);
}

/* ---------- Links & accents ---------- */
a { color: var(--navy); }
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(--navy);
  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: #ffdf33;
  color: var(--navy);
}
/* 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);
}

/* ---------- Footer on brand navy ---------- */
.site-footer,
.ast-small-footer {
  background-color: var(--navy-deep);
  color: #c2ccf5;
}
.site-footer a { color: #c2ccf5; }
.site-footer a:hover { color: var(--gold); }

/* =================================================================
   Component classes — apply via Elementor column/section
   "Advanced > CSS Classes" so the imported templates look correct.
   Mirrors the visual language of webpage/style.css.
   ================================================================= */

/* 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(255,215,0,0.12), transparent 60%),
    linear-gradient(160deg, var(--navy-light) 0%, var(--navy) 55%, var(--navy-deep) 100%) !important;
  color: #eaf0ff;
}
.moose-section-navy h1,
.moose-section-navy h2,
.moose-section-navy h3,
.moose-section-navy h4 { color: #fff !important; }
.moose-section-navy p { color: #c8d3ff; }

/* Card — apply to an Elementor column to get the mockup's card look */
.moose-card {
  background: #fff;
  border: 1px solid var(--line, #e3e7f0);
  border-radius: 14px;
  padding: 34px 30px !important;
  box-shadow: 0 2px 10px rgba(2,10,122,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(2,10,122,.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(2,10,122,.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: #c2ccf5 !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(255,215,0,0.14) !important;
  border: 1px solid rgba(255,215,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; }

/* 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;
}

/* =================================================================
   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(--navy); text-transform: uppercase; font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: 14px; }
.moose-page h3 { font-family: "Oswald", sans-serif; color: var(--navy); 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 #e3e7f0; border-radius: 14px;
  padding: 28px; box-shadow: 0 2px 10px rgba(2,10,122,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(2,10,122,.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 #e3e7f0; border-radius: 14px;
  padding: 20px; box-shadow: 0 2px 10px rgba(2,10,122,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(2,10,122,.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 #e3e7f0; }
.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(--navy); }
.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 #e3e7f0; box-shadow: 0 2px 10px rgba(2,10,122,.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(--navy); 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 #e3e7f0; }
.moose-page .price-row:last-child { border-bottom: none; }
.moose-page .price-row .name { font-family: "Oswald"; text-transform: uppercase; color: var(--navy); 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(--navy); 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(2,10,122,.12);
  min-height: 320px; color: var(--navy);
}
.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);
}