/*
Theme Name: Exalted Worship
Theme URI: https://example.com/exalted-worship
Author: Your Studio
Author URI: https://example.com
Description: A mobile-friendly, Elementor-compatible WordPress theme built for worship concert & ministry event sites. Recreated as a demo/starter theme with placeholder content — replace text, images, and links with your own. Fully extendable with plugins (Elementor, GiveWP/WooCommerce for donations, Events Calendar, etc).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: exalted-worship
Tags: one-column, custom-menu, custom-logo, featured-images, full-width-template, threaded-comments, translation-ready
*/

/* =============================================================
   ROOT VARIABLES
============================================================= */
:root{
  --color-bg: #0b0b0d;
  --color-bg-alt: #131316;
  --color-surface: #18181c;
  --color-gold: #d4af37;
  --color-gold-soft: #e8caa0;
  --color-text: #f5f3ee;
  --color-text-muted: #b9b7b2;
  --color-border: rgba(212,175,55,0.25);
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --container: 1160px;
  --radius: 14px;
  --transition: 0.25s ease;
}

/* =============================================================
   RESET / BASE
============================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:700;line-height:1.2;margin:0 0 .6em;}
p{margin:0 0 1em;color:var(--color-text-muted);}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.section{padding:110px 0;position:relative;}
.section-alt{background:var(--color-bg-alt);}
.eyebrow{
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.75rem;
  color:var(--color-gold);
  font-weight:600;
  margin-bottom:16px;
}
.section-title{font-size:clamp(1.8rem,4vw,2.8rem);color:#fff;}
.section-lede{max-width:720px;color:var(--color-text-muted);font-size:1.05rem;}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 30px;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-gold{background:linear-gradient(135deg,var(--color-gold-soft),var(--color-gold));color:#151208;}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.35);color:#fff;}
.btn-outline:hover{border-color:var(--color-gold);color:var(--color-gold);}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;}
.btn-donate{background:#c0392b;color:#fff;}
.btn-donate:hover{background:#a5301f;}

/* =============================================================
   SITE TOP BAR — static, scrolls away with the page (NOT fixed)
============================================================= */
.site-topbar{
  position:relative;z-index:20;
  padding:18px 0;
  background:var(--color-bg);
  border-bottom:1px solid var(--color-border);
}
.site-topbar .container{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.site-branding{display:flex;align-items:center;gap:10px;font-family:var(--font-heading);font-size:1.3rem;color:#fff;font-weight:700;}
.site-branding img{height:38px;width:auto;border-radius:6px;}
.site-branding .tagline{display:block;font-family:var(--font-body);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--color-gold);font-weight:500;}
.menu-toggle{display:none;background:none;border:none;color:#fff;font-size:1.6rem;cursor:pointer;padding:4px;}

/* =============================================================
   HERO CAROUSEL (front page only) — sits below the top bar,
   right above the nav bar, exactly like the reference site.
============================================================= */
.hero-carousel{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.hero-carousel-track{position:absolute;inset:0;z-index:0;display:flex;}
.hero-carousel-track img{width:100%;height:100%;object-fit:cover;flex:none;}
/* Simple 3-up fallback layout for the placeholder flyers — swap this
   block for a real slider (Elementor's own Slides widget, or a
   carousel plugin) once you add your real flyer images. */
.hero-carousel-track img:nth-child(2),
.hero-carousel-track img:nth-child(3){display:none;}
.hero-carousel-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(11,11,13,.35) 0%, rgba(11,11,13,.55) 55%, rgba(11,11,13,.92) 100%);
}
.hero-side-actions{
  position:absolute;top:120px;right:24px;z-index:2;
  display:flex;flex-direction:column;gap:12px;align-items:flex-end;
}
.hero-side-actions .btn{width:max-content;}
.hero-caption{position:relative;z-index:2;padding:60px 24px 70px;width:100%;text-align:left;max-width:var(--container);margin:0 auto;}
.hero-caption .eyebrow{color:var(--color-gold-soft);}
.hero-caption h1{font-size:clamp(2.2rem,5.5vw,3.8rem);color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.5);}
.hero-meta{color:var(--color-text-muted);font-size:1.02rem;margin-bottom:30px;letter-spacing:.02em;}
.hero-meta strong{color:var(--color-gold-soft);}
.hero-scroll{position:absolute;bottom:18px;left:24px;color:var(--color-text-muted);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;z-index:2;animation:bob 2.4s infinite;}
@keyframes bob{0%,100%{transform:translate(0,0);}50%{transform:translate(0,8px);}}

/* Lead-capture / sponsor-deck strip inside hero */
.hero-subforms{display:flex;flex-wrap:wrap;gap:14px;position:relative;z-index:2;}
.hero-subforms .form-pill{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  padding:8px 8px 8px 18px;border-radius:999px;
}
.hero-subforms span{font-size:.82rem;color:var(--color-text-muted);}
.hero-subforms input[type=email]{
  background:transparent;border:none;color:#fff;font-size:.85rem;width:170px;outline:none;
}
.btn-sm{padding:9px 18px;font-size:.8rem;}

/* =============================================================
   STICKY NAV BAR — lives in normal flow directly under the hero;
   only pins to the viewport top once you've scrolled up to meet it.
============================================================= */
.nav-sentinel{height:0;}
.site-nav-sticky{
  position:sticky;top:0;z-index:900;
  background:rgba(11,11,13,0.95);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--color-border);
  transition:box-shadow var(--transition), padding var(--transition);
}
.site-nav-sticky.is-pinned{
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0;}
.nav-links{display:flex;align-items:center;}
.nav-links ul{display:flex;gap:26px;}
.nav-links a{font-size:.92rem;color:var(--color-text-muted);transition:color var(--transition);position:relative;}
.nav-links a:hover{color:#fff;}
.nav-cta{display:flex;align-items:center;gap:10px;}

/* =============================================================
   REUSABLE STICKY UTILITY — apply to ANY Elementor section via
   Advanced tab → CSS Classes (this field is available on the free
   version of Elementor, no Pro required). Add both classes to get
   the same pinned dark nav-bar look used elsewhere on this site:
     exalted-sticky        → position:sticky; top:0
     exalted-sticky-dark   → dark blurred background + gold border
============================================================= */
.exalted-sticky{position:sticky;top:0;z-index:900;}
.exalted-sticky-dark{
  background:rgba(11,11,13,0.95);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
}

/* =============================================================
   ABOUT
============================================================= */
.about-grid{display:grid;grid-template-columns:1fr;gap:40px;}
.about-copy p{font-size:1.02rem;}
.stat-row{display:flex;flex-wrap:wrap;gap:30px;margin-top:36px;}
.stat{min-width:130px;}
.stat strong{display:block;font-family:var(--font-heading);font-size:2.1rem;color:var(--color-gold);}
.stat span{font-size:.82rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em;}

.vision-box{
  margin-top:56px;
  padding:44px;
  border-radius:var(--radius);
  background:linear-gradient(135deg, rgba(212,175,55,.12), rgba(212,175,55,.02));
  border:1px solid var(--color-border);
  text-align:center;
}
.vision-box .eyebrow{margin-bottom:10px;}
.vision-box p{font-family:var(--font-heading);font-size:1.4rem;color:#fff;font-style:italic;max-width:780px;margin:0 auto;}

/* =============================================================
   MISSION
============================================================= */
.mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:20px;}
.mission-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  padding:40px;
}
.mission-card h3{color:#fff;font-size:1.3rem;}
.mission-card li{
  display:flex;gap:12px;padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  color:var(--color-text-muted);
  font-size:.96rem;
}
.mission-card li:last-child{border-bottom:none;}
.mission-card li::before{content:"✦";color:var(--color-gold);flex:none;}

/* =============================================================
   SCRIPTURES
============================================================= */
.scripture-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:20px;}
.scripture-card{
  padding:40px;border-radius:var(--radius);
  background:var(--color-surface);
  border-left:3px solid var(--color-gold);
}
.scripture-card blockquote{
  font-family:var(--font-heading);font-style:italic;font-size:1.2rem;color:#fff;margin:0 0 16px;
}
.scripture-card cite{color:var(--color-gold-soft);font-size:.85rem;letter-spacing:.05em;}
.scripture-message{text-align:center;margin-top:50px;font-family:var(--font-heading);font-size:1.3rem;color:var(--color-gold-soft);font-style:italic;}

/* =============================================================
   VISIONARY
============================================================= */
.visionary-grid{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:center;}
.visionary-photo{border-radius:var(--radius);overflow:hidden;border:1px solid var(--color-border);}
.visionary-copy .role{color:var(--color-gold);font-size:.9rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:18px;display:block;}
.visionary-copy h3{font-size:2rem;color:#fff;}

/* =============================================================
   PARTNERSHIP
============================================================= */
.partner-columns{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:40px;}
.partner-columns h3{color:#fff;font-size:1.15rem;}
.partner-columns li{
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06);
  color:var(--color-text-muted);font-size:.95rem;display:flex;gap:12px;
}
.partner-columns li::before{content:"◆";color:var(--color-gold);flex:none;font-size:.7rem;margin-top:4px;}
.invitation-box{
  margin-top:50px;text-align:center;padding:50px;border-radius:var(--radius);
  background:var(--color-surface);border:1px solid var(--color-border);
}
.invitation-box p{max-width:760px;margin:0 auto 26px;}

/* =============================================================
   OUR PARTNERS (logo grid)
============================================================= */
.partners-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:24px;margin-top:40px;align-items:center;
}
.partners-grid a{
  display:flex;align-items:center;justify-content:center;
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:12px;padding:18px;transition:transform var(--transition), border-color var(--transition);
  aspect-ratio:1.4/1;
}
.partners-grid a:hover{transform:translateY(-4px);border-color:var(--color-gold);}
.partners-grid img{filter:grayscale(1) brightness(1.4);opacity:.85;}
.partners-cta{text-align:center;margin-top:44px;}

/* =============================================================
   DONATE / SPONSOR CTA BAND
============================================================= */
.cta-band{
  padding:90px 0;text-align:center;
  background:radial-gradient(ellipse at center, rgba(212,175,55,.14), transparent 70%), var(--color-bg-alt);
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
}
.cta-band h2{color:#fff;}
.cta-band .btn-row{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:26px;}
.cta-band .note{margin-top:18px;font-size:.8rem;color:var(--color-text-muted);}

/* =============================================================
   FOOTER
============================================================= */
.site-footer{background:#08080a;padding:80px 0 30px;border-top:1px solid var(--color-border);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:60px;}
.footer-brand .site-branding{margin-bottom:14px;}
.footer-brand p{max-width:320px;}
.footer-col h4{color:#fff;font-size:.9rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:18px;}
.footer-col li{margin-bottom:10px;}
.footer-col a{color:var(--color-text-muted);font-size:.92rem;transition:color var(--transition);}
.footer-col a:hover{color:var(--color-gold);}
.footer-social{display:flex;gap:12px;margin-top:6px;}
.footer-social a{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);border:1px solid var(--color-border);
  font-size:.85rem;
}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.06);
  font-size:.82rem;color:var(--color-text-muted);
}
.back-to-top{
  position:fixed;bottom:26px;right:26px;z-index:900;
  width:46px;height:46px;border-radius:50%;
  background:var(--color-gold);color:#151208;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;box-shadow:0 6px 20px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity var(--transition), transform var(--transition);
}
.back-to-top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0);}

/* =============================================================
   ELEMENTOR / PAGE-BUILDER FRIENDLY DEFAULTS
============================================================= */
.entry-content{padding:70px 0 80px;}
.entry-content .container{max-width:820px;}

/* =============================================================
   RESPONSIVE
============================================================= */
@media (max-width:1024px){
  .partners-grid{grid-template-columns:repeat(3,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .visionary-grid{grid-template-columns:1fr;}
  .visionary-photo{max-width:320px;margin:0 auto;}
}
@media (max-width:860px){
  .nav-links{
    position:fixed;inset:0 0 0 30%;
    background:rgba(8,8,10,.98);
    flex-direction:column;justify-content:center;align-items:flex-start;
    padding:40px;transform:translateX(100%);
    transition:transform var(--transition);
    z-index:950;
  }
  .site-nav-sticky.is-open .nav-links{transform:translateX(0);}
  .nav-links ul{flex-direction:column;gap:22px;}
  .nav-links a{font-size:1.2rem;}
  .nav-cta .btn-outline{display:none;}
  .menu-toggle{display:block;}
  .mission-grid,.scripture-grid,.partner-columns{grid-template-columns:1fr;}
  .hero-side-actions{top:90px;right:16px;}
}
@media (max-width:600px){
  .section{padding:70px 0;}
  .partners-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr;gap:34px;}
  .hero-carousel{min-height:auto;padding-top:10px;}
  .hero-side-actions{
    position:static;flex-direction:row;flex-wrap:wrap;
    justify-content:flex-start;padding:16px 20px 0;
  }
  .hero-side-actions .btn{width:auto;}
  .hero-caption{padding:20px 20px 50px;}
  .hero-subforms .form-pill{flex-direction:column;align-items:stretch;padding:14px;}
  .hero-subforms input[type=email]{width:100%;}
}