/* GLOBAL HEADER */

.topbar{
  position:relative;
  z-index:9999;
  background:
    linear-gradient(
      180deg,
      rgba(24,63,37,.96),
      rgba(7,21,13,.98)
    );
  backdrop-filter:none;
  border-bottom:1px solid rgba(201,154,46,.30);
  box-shadow:
    0 10px 34px rgba(7,21,13,.10),
    inset 0 -1px 0 rgba(255,255,255,.08);
}

.topbar-inner{
  position:relative;
  max-width:1400px;
  margin:auto;
  padding:14px 22px;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  color:white;
  text-decoration:none;
}

.brand img{
  width:50px;
  height:50px;
  object-fit:contain;
}

.brand-text{
  display:flex;
  flex-direction:column;
}

.brand-text strong{
  color:#ffffff;
  font-size:.86rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:950;
}

.brand-text span{
  margin-top:3px;
  color:#e7c46a;
  font-size:.68rem;
  letter-spacing:.08em;
  font-weight:900;
}

.nav-toggle{
  display:none;
}

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

.nav-dropdown{
  position:static;
}

.dropdown-trigger{
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#ffffff;
  padding:0 18px;
  font-family:inherit;
  font-size:.86rem;
  font-weight:950;
  letter-spacing:.03em;
  text-transform:uppercase;
  cursor:pointer;
  transition:.18s ease;
}

.dropdown-trigger:hover,
.nav-dropdown.open .dropdown-trigger{
  color:#f2c230;
  background:rgba(255,255,255,.06);
}

.give-trigger{
  background:#d49300;
  color:white;
  padding:0 24px;
}

.give-trigger:hover,
.nav-dropdown.open .give-trigger{
  background:#e4a600;
  color:white;
}

.chevron{
  font-size:1rem;
  line-height:1;
  transform:translateY(-1px);
  transition:.18s ease;
}

.nav-dropdown.open .chevron{
  transform:rotate(180deg);
}

.mega-panel{
  position:absolute;
  top:calc(100% - 1px);
  right:22px;
  left:auto;
  width:min(920px,calc(100vw - 44px));
  max-width:calc(100vw - 44px);
  transform:translateY(10px);
  opacity:0;
  pointer-events:none;
  transition:.2s ease;
  overflow:visible;
}

.mega-panel::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-18px;
  height:18px;
}

.mega-panel.align-right{
  left:auto;
  right:22px;
  width:min(920px,calc(100vw - 44px));
  max-width:calc(100vw - 44px);
  transform:translateY(10px);
}

.nav-dropdown.open .mega-panel,
.nav-dropdown:hover .mega-panel,
.mega-panel:hover{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

.nav-dropdown.open .mega-panel.align-right,
.nav-dropdown:hover .mega-panel.align-right,
.mega-panel.align-right:hover{
  transform:translateY(0);
}

.mega-inner{
  padding:40px 46px 44px;
  border-radius:0 0 14px 14px;
  background:
    radial-gradient(circle at 50% 0%, rgba(201,154,46,.08), transparent 42%),
    linear-gradient(180deg,#111111,#070907);
  border:1px solid rgba(201,154,46,.45);
  border-top:0;
  box-shadow:
    0 30px 80px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.05);
  color:white;
  text-align:center;
  overflow:hidden;
}

.mega-inner h2{
  color:#f2c230;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.35rem,2.8vw,1.85rem);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.2;
}

.mega-inner p{
  max-width:760px;
  margin:18px auto 0;
  color:rgba(255,255,255,.78);
  font-size:1.05rem;
  line-height:1.45;
  font-weight:800;
}

.mega-simple-links{
  margin-top:30px;
  padding-top:26px;
  border-top:1px solid rgba(201,154,46,.35);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  width:100%;
}

.mega-simple-links a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:56px;
  padding:14px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(201,154,46,.22);
  color:#f4df82;
  text-decoration:none;
  text-transform:uppercase;
  font-size:.72rem;
  letter-spacing:.08em;
  font-weight:950;
  transition:.18s ease;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mega-simple-links a:hover{
  background:rgba(201,154,46,.14);
  border-color:rgba(201,154,46,.62);
  color:white;
  transform:translateY(-2px);
}

.mega-cta{
  width:min(740px,100%);
  min-height:56px;
  margin:28px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:linear-gradient(90deg,#ea5ea8,#ff4d45,#ffc21d);
  color:white;
  text-decoration:none;
  text-transform:uppercase;
  font-size:.86rem;
  letter-spacing:.18em;
  font-weight:950;
  box-shadow:0 16px 34px rgba(0,0,0,.28);
  transition:.18s ease;
}

.mega-cta:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
}

/* GIVE MEGA */

.mega-give-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.mega-give-grid .mega-inner{
  min-height:100%;
}

.give-heart-card{
  background:
    radial-gradient(circle at 50% 0%, rgba(201,154,46,.16), transparent 48%),
    linear-gradient(180deg,#12120e,#070907);
  border-color:rgba(201,154,46,.52);
}

.give-cabana-card{
  background:
    radial-gradient(circle at 20% 0%, rgba(0,184,184,.18), transparent 42%),
    radial-gradient(circle at 80% 10%, rgba(255,93,162,.18), transparent 42%),
    linear-gradient(180deg,#101015,#070907);
  border-color:rgba(0,184,184,.42);
}

.give-heart-card::before,
.give-cabana-card::before{
  content:"";
  display:block;
  width:42px;
  height:4px;
  margin:0 auto 18px;
  border-radius:999px;
}

.give-heart-card::before{
  background:var(--gold-soft);
}

.give-cabana-card::before{
  background:linear-gradient(90deg,#00b8b8,#ff5da2,#ffd166);
}

.give-heart-card .mega-cta{
  background:linear-gradient(90deg,#c99a2e,#e7c46a,#fff0a8);
  color:#173b27;
}

.give-cabana-card h2{
  color:#ff5da2;
}

.give-cabana-card .mega-cta{
  background:linear-gradient(90deg,#00b8b8,#ff5da2,#ffd166);
  color:#07150d;
}

/* MOBILE NAV */

.mobile-nav{
  display:none;
}

@media(max-width:900px){

  .topbar-inner{
    padding:14px 16px 18px;
    min-height:auto;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:12px;
  }

  .brand{
    justify-content:flex-start;
    text-align:left;
    min-width:0;
  }

  .brand img{
    width:46px;
    height:46px;
  }

  .brand-text strong{
    font-size:.72rem;
    line-height:1.2;
    letter-spacing:.12em;
  }

  .brand-text span{
    font-size:.6rem;
  }

  .nav-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:54px;
    height:54px;
    margin:0;
    border:0;
    border-radius:999px;
    background:#d49300;
    color:white;
    font-size:1.35rem;
    cursor:pointer;
  }

  .nav{
    display:none !important;
  }

  .mobile-nav{
    grid-column:1 / -1;
    display:none;
    flex-direction:column;
    gap:12px;
    width:100%;
    padding-top:14px;
  }

  .mobile-nav.open{
    display:flex;
  }

  .mobile-nav-section{
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .mobile-nav-heading{
    width:100%;
    min-height:56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 18px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    background:rgba(255,255,255,.06);
    color:white;
    font-family:inherit;
    font-size:.82rem;
    font-weight:950;
    letter-spacing:.08em;
    text-transform:uppercase;
    cursor:pointer;
  }

  .mobile-nav-section.open .mobile-nav-heading{
    background:rgba(201,154,46,.14);
    color:#f2c230;
  }

  .mobile-give-heading{
    background:#d49300;
    color:white;
  }

  .mobile-nav-panel{
    display:none;
    flex-direction:column;
    gap:10px;
    padding:4px;
  }

  .mobile-nav-section.open .mobile-nav-panel{
    display:flex;
  }

  .mobile-nav-panel a{
    position:relative;
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:0 18px 0 26px;
    border-radius:18px;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.08);
    color:white;
    text-decoration:none !important;
    font-size:.82rem;
    font-weight:950;
    letter-spacing:.06em;
    text-transform:uppercase;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      0 10px 22px rgba(0,0,0,.12);
    overflow:hidden;
  }

  .mobile-nav-panel a::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:6px;
    border-radius:18px 0 0 18px;
  }

  .mobile-nav-panel a[href*="ourchurch"]::before{
    background:#e7c46a;
  }

  .mobile-nav-panel a[href*="restoration"]::before{
    background:#ff6f61;
  }

  .mobile-nav-panel a[href*="refuge"]::before{
    background:#6ff3e8;
  }

  .mobile-nav-panel a[href*="service"]::before{
    background:#2fbf71;
  }

  .mobile-nav-panel a[href*="bingo"]::before{
    background:#ff5da2;
  }

  .mobile-nav-panel a[href*="arts"]::before{
    background:#ffd166;
  }

  .mobile-nav-panel a:hover,
  .mobile-nav-panel a:focus{
    transform:translateY(-1px);
    background:rgba(255,255,255,.09);
  }

  .mobile-donate-card{
    min-height:auto !important;
    display:flex !important;
    flex-direction:column;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:10px;
    padding:18px !important;
    border-radius:18px !important;
    background:
      radial-gradient(circle at top left, rgba(201,154,46,.18), transparent 48%),
      linear-gradient(180deg,#12120e,#070907) !important;
    border:1px solid rgba(201,154,46,.32) !important;
    text-transform:none !important;
  }

  .mobile-cabana-card{
    background:
      radial-gradient(circle at top left, rgba(0,184,184,.20), transparent 48%),
      radial-gradient(circle at top right, rgba(255,93,162,.18), transparent 44%),
      linear-gradient(180deg,#101015,#070907) !important;
    border-color:rgba(0,184,184,.32) !important;
  }

  .mobile-donate-card strong{
    color:#f2c230;
    font-size:.95rem;
    letter-spacing:.06em;
    text-transform:uppercase;
  }

  .mobile-cabana-card strong{
    color:#ff5da2;
  }

  .mobile-donate-card span{
    color:rgba(255,255,255,.74);
    font-size:.86rem;
    line-height:1.45;
    text-transform:none;
  }

  .mobile-donate-card em{
    margin-top:2px;
    padding:10px 16px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:white;
    font-style:normal;
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.1em;
    text-transform:uppercase;
  }

  @media (max-width: 900px){

    .mobile-menu-toggle,
    .hamburger-circle,
    #mobileMenuToggle{
      position:fixed;
      top:18px;
      right:18px;
      z-index:99999;
    }

    .site-header,
    .global-header{
      position:relative;
    }

  }

}