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


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

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


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

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

body.menu-open { overflow: hidden; }

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


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

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

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

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

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

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

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

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

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

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

.nav-item > span {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--p100);
  transition: color .15s ease;
  pointer-events: none;
}

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

.hours-status-row.is-open .hours-status { color: #2E8B4F; }

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

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

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

.hours-week {
  font-size: 13px;
  font-weight: 600;
  color: var(--p600);
}

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

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


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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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


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

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

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

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

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

.eb-card {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--p800); /* visible when no image is set */
}

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

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

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

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

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

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


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

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

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

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

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


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

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

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

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

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

.social-links--footer a { color: var(--p600); }
.social-links--footer a:hover { color: var(--p100); }

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

  .nav-hamburger { display: flex; }

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

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

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

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

  /* Hours card — pull out of absolute positioning, sit below hero content */
  .hours-card {
    position: static;
    width: auto;
    margin: 0 22px 36px;
    box-shadow: 0 12px 28px rgba(13,11,38,0.22);
  }

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

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

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

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

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

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

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

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

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

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