/* assets/css/style.css — On The Mountain Experience Ministry */

/* ───── Variables ───── */
:root {
    --crimson:       #8B0000;
    --crimson-light: #B22222;
    --crimson-deep:  #5C0000;
    --gold:          #C9A84C;
    --gold-light:    #E8C97E;
    --gold-pale:     #F5E6C0;
    --cream:         #FAF6EE;
    --charcoal:      #1A1A1A;
    --warm-gray:     #4A4A4A;
    --silver-muted:  #A8A8A8;
}

/* ───── Reset ───── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; max-width:100%; }
html, body { overflow-x:hidden; max-width:100vw; }
img  { max-width:100%; height:auto; display:block; }
body { font-family:'Raleway',sans-serif; background:var(--cream); color:var(--charcoal); }
a    { text-decoration:none; color:inherit; }
button { font-family:'Raleway',sans-serif; }

/* ───── Typography helpers ───── */
.font-cormorant { font-family:'Cormorant Garamond',serif; }
.font-marcellus  { font-family:'Marcellus',serif; }

.section-label {
    font-family:'Raleway',sans-serif; font-weight:700; font-size:10px;
    letter-spacing:.35em; text-transform:uppercase; color:var(--gold); display:block;
}
.section-sep {
    width:60px; height:2px;
    background:linear-gradient(90deg,var(--crimson),var(--gold),var(--silver-muted));
    margin:0 auto;
}

/* ───── Animations ───── */
@keyframes fadeUp    { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes shimmer   { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes float     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes pulseGold { 0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,.4)} 50%{box-shadow:0 0 0 12px rgba(201,168,76,0)} }

.page-content { opacity:0; animation:fadeUp .5s ease .05s forwards; }
.animate-fadeUp  { animation:fadeUp  .8s ease forwards; }
.animate-fadeIn  { animation:fadeIn  .6s ease forwards; }
.animate-float   { animation:float   4s  ease-in-out infinite; }
.delay-1 { animation-delay:.15s; }
.delay-2 { animation-delay:.3s;  }
.delay-3 { animation-delay:.45s; }
.delay-4 { animation-delay:.6s;  }

/* ───── Scrollbar ───── */
::-webkit-scrollbar       { width:6px; }
::-webkit-scrollbar-track { background:var(--cream); }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,var(--crimson),#8B6060); border-radius:3px; }

/* ───── Gold shimmer text ───── */
.text-gold-gradient {
    background:linear-gradient(135deg,#C9A84C 0%,#F5E6C0 40%,#C9A84C 60%,#8B6914 100%);
    background-size:200% auto;
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    animation:shimmer 4s linear infinite;
}

/* ───── Ornament divider ───── */
.ornament-divider { display:flex; align-items:center; gap:16px; justify-content:center; }
.ornament-divider::before,
.ornament-divider::after  { content:''; flex:1; max-width:120px; height:1px; background:linear-gradient(90deg,transparent,var(--silver-muted)); }
.ornament-divider::after  { background:linear-gradient(90deg,var(--silver-muted),transparent); }

/* ───── Buttons ───── */
.btn-gold {
    display:inline-block;
    background:linear-gradient(135deg,var(--gold) 0%,var(--gold-light) 50%,var(--gold) 100%);
    background-size:200% auto;
    color:var(--crimson-deep); font-family:'Raleway',sans-serif; font-weight:800;
    letter-spacing:.15em; text-transform:uppercase; border:none; cursor:pointer;
    transition:background-position .4s,transform .2s,box-shadow .2s; text-align:center;
}
.btn-gold:hover { background-position:right center; transform:translateY(-2px); box-shadow:0 8px 24px rgba(201,168,76,.4); }

.btn-outline-gold {
    display:inline-block;
    background:transparent; color:var(--gold); border:2px solid var(--gold);
    font-family:'Raleway',sans-serif; font-weight:700; letter-spacing:.15em;
    text-transform:uppercase; cursor:pointer; transition:all .25s; text-align:center;
}
.btn-outline-gold:hover { background:var(--gold); color:var(--crimson-deep); }

/* ───── Forms ───── */
.form-input {
    width:100%; background:white; border:1.5px solid #D8D0C8; border-radius:2px;
    padding:14px 18px; font-family:'Raleway',sans-serif; font-size:14px;
    color:var(--charcoal); outline:none; transition:border-color .2s;
}
.form-input:focus { border-color:var(--crimson); }
select.form-input { cursor:pointer; }
textarea.form-input { resize:vertical; }

.form-label {
    display:block; font-family:'Raleway',sans-serif; font-weight:700; font-size:10px;
    letter-spacing:.2em; text-transform:uppercase; color:var(--warm-gray); margin-bottom:8px;
}
input[type="radio"],
input[type="checkbox"] { accent-color:var(--crimson); }

/* ───── Ministry cards ───── */
.ministry-card {
    background:white; border-top:4px solid var(--crimson); border-radius:2px;
    transition:all .35s; position:relative; overflow:hidden;
}
.ministry-card::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--gold),var(--crimson),var(--gold));
    transform:scaleX(0); transition:transform .35s;
}
.ministry-card:hover { transform:translateY(-6px); box-shadow:0 20px 50px rgba(139,0,0,.12); }
.ministry-card:hover::after { transform:scaleX(1); }

/* ───── Scripture block ───── */
.scripture-block { background:linear-gradient(160deg,#5C0000 0%,#3D0000 100%); position:relative; overflow:hidden; }
.scripture-block::before {
    content:'\201C'; position:absolute; top:-30px; left:30px;
    font-family:'Cormorant Garamond',serif; font-size:200px;
    color:rgba(192,192,192,.07); line-height:1; pointer-events:none;
}

/* ───── Page header banner ───── */
.page-header { background:linear-gradient(160deg,#5C0000 0%,#3D0000 100%); padding:clamp(40px,7vw,80px) 24px; text-align:center; }
.page-header-line { width:60px; height:1px; background:var(--gold); margin:20px auto 0; }

/* ───── Hero ───── */
.hero-bg { background:linear-gradient(160deg,#5C0000 0%,#3D0000 100%); position:relative; overflow:hidden; }
.hero-bg::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse 60% 80% at 50% 100%,rgba(201,168,76,.15) 0%,transparent 70%),
               radial-gradient(ellipse 40% 50% at 80% 20%,rgba(139,0,0,.3) 0%,transparent 60%);
}
.hero-mountain { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:900px; opacity:.07; pointer-events:none; }
.cross-glow    { filter:drop-shadow(0 0 30px rgba(201,168,76,.5)); }

/* ───── Schedule rows ───── */
.schedule-row { border-bottom:1px solid rgba(192,192,192,.2); transition:background .2s; }
.schedule-row:hover { background:rgba(139,0,0,.04); }

/* ───── Event description body ───── */
.ev-desc-body ul,
.ev-desc-body ol { padding-left:20px; margin:8px 0; }
.ev-desc-body li { margin-bottom:4px; }
.ev-desc-body p  { margin-bottom:10px; }
.ev-desc-body p:last-child { margin-bottom:0; }

/* ───── CTA grid ───── */
.cta-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; }
.cta-card {
    padding:36px 20px; border:1px solid rgba(139,0,0,.1); border-radius:2px;
    background:var(--cream); cursor:pointer; transition:all .25s; text-align:center; display:block;
}
.cta-card:hover { background:var(--crimson); border-color:var(--crimson); }
.cta-card:hover .cta-icon,
.cta-card:hover .cta-label { color:white; }
.cta-icon  { font-size:28px; color:var(--crimson); margin-bottom:12px; display:block; transition:color .25s; }
.cta-label { font-family:'Raleway',sans-serif; font-weight:700; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--charcoal); transition:color .25s; }

/* ─────────────────────────────────────────
   NAVIGATION
───────────────────────────────────────── */
#site-header {
    position:fixed; width:100%; z-index:50;
    background:rgba(92,0,0,.97);
    border-bottom:1px solid rgba(201,168,76,.18);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    transition:transform .35s ease, background .4s ease, border-color .4s ease;
}
#site-header.transparent {
    background:rgba(92,0,0,0);
    border-bottom-color:rgba(201,168,76,0);
    backdrop-filter:none; -webkit-backdrop-filter:none;
}
#site-header.scrolled {
    background:rgba(92,0,0,.97);
    border-bottom-color:rgba(201,168,76,.18);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
#site-header.hide { transform:translateY(-100%); }

.header-inner {
    max-width:1400px; margin:0 auto; padding:14px 24px;
    display:flex; justify-content:space-between; align-items:center;
}

/* Logo */
.logo-wrap { display:flex; align-items:center; gap:14px; }
.logo-img-wrap { width:72px; height:72px; flex-shrink:0; position:relative; }
.logo-img-wrap img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 2px 12px rgba(0,0,0,.6)); }
.logo-fallback {
    display:none; position:absolute; inset:0; border-radius:50%;
    background:linear-gradient(135deg,#5C0000,#3D0000); border:2px solid var(--gold);
    align-items:center; justify-content:center;
}
.logo-fallback i { color:var(--gold); font-size:20px; }
.logo-text  { display:flex; flex-direction:column; gap:2px; }
.logo-name  { font-family:'Cormorant Garamond',serif; color:var(--gold-light); font-size:clamp(15px,1.8vw,21px); font-weight:600; line-height:1.1; letter-spacing:.02em; }
.logo-sub   { font-family:'Cormorant Garamond',serif; color:white; font-size:clamp(13px,1.4vw,17px); font-weight:400; font-style:italic; line-height:1.1; letter-spacing:.04em; }
.logo-line  { width:100%; height:1px; background:linear-gradient(90deg,var(--gold),transparent); margin-top:3px; }

/* Desktop nav */
.desktop-nav { display:none; align-items:center; gap:28px; }
@media(min-width:1280px) { .desktop-nav { display:flex; } }

.nav-link {
    position:relative; font-family:'Raleway',sans-serif; font-weight:600;
    font-size:11px; letter-spacing:.15em; text-transform:uppercase;
    color:rgba(255,255,255,.85); padding:6px 0; transition:color .2s;
    background:none; border:none; cursor:pointer;
}
.nav-link::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
    background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .25s;
}
.nav-link:hover,
.nav-link.active { color:var(--gold-light); }
.nav-link:hover::after,
.nav-link.active::after { transform:scaleX(1); }

/* Resources dropdown */
.resources-wrap    { position:relative; }
.resources-btn     { display:flex; align-items:center; gap:5px; }
.resources-arrow   { font-size:8px; transition:transform .2s; }
.resources-wrap.open .resources-arrow { transform:rotate(180deg); }

.resources-dropdown {
    display:none; position:absolute; top:calc(100% + 12px); right:0; min-width:180px;
    background:#3D0000; border:1px solid rgba(192,192,192,.15);
    box-shadow:0 20px 40px rgba(0,0,0,.4); border-radius:4px; overflow:hidden; z-index:100;
}
.resources-wrap.open .resources-dropdown { display:block; }

.dropdown-item {
    display:block; padding:12px 20px; background:transparent;
    color:rgba(255,255,255,.85); font-family:'Raleway',sans-serif;
    font-weight:600; font-size:10px; letter-spacing:.15em; text-transform:uppercase;
    border-bottom:1px solid rgba(201,168,76,.08); transition:all .2s;
}
.dropdown-item:hover,
.dropdown-item.active { background:rgba(201,168,76,.1); color:var(--gold-light); }

/* Hamburger */
.hamburger { display:block; background:none; border:none; cursor:pointer; color:var(--gold); padding:8px; font-size:22px; }
@media(min-width:1280px) { .hamburger { display:none; } }

/* Mobile menu */
.mobile-menu {
    display:none; flex-direction:column;
    background:linear-gradient(180deg,#5C0000 0%,#3D0000 100%);
    border-top:2px solid var(--gold); padding:16px 0 24px;
}
.mobile-menu.open { display:flex; }
@media(min-width:1280px) { .mobile-menu { display:none !important; } }

.mobile-link {
    text-align:left; padding:13px 24px; background:transparent;
    color:rgba(255,255,255,.85); font-family:'Raleway',sans-serif;
    font-weight:600; font-size:11px; letter-spacing:.15em; text-transform:uppercase;
    border:none; border-bottom:1px solid rgba(255,255,255,.05);
    cursor:pointer; transition:all .2s; width:100%; display:block;
}
.mobile-link:hover,
.mobile-link.active { background:rgba(201,168,76,.12); color:var(--gold-light); }

.resources-mobile-btn { display:flex; justify-content:space-between; align-items:center; }
.resources-mobile-btn i { transition:transform .25s; color:var(--gold); opacity:.8; }

.mobile-resources-panel { display:none; }
.mobile-resources-panel.open { display:block; }

.mobile-sub-link {
    display:flex; align-items:center; gap:8px;
    padding:12px 24px 12px 40px; background:rgba(0,0,0,.2);
    color:rgba(255,255,255,.7); font-family:'Raleway',sans-serif;
    font-weight:600; font-size:10px; letter-spacing:.15em; text-transform:uppercase;
    border-bottom:1px solid rgba(255,255,255,.04); transition:all .2s;
}
.mobile-sub-link i { font-size:8px; color:var(--gold); opacity:.6; flex-shrink:0; }
.mobile-sub-link:hover,
.mobile-sub-link.active { background:rgba(201,168,76,.12); color:var(--gold-light); }

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
.footer-bg    { background:linear-gradient(180deg,#5C0000 0%,#3D0000 100%); padding:80px 24px 40px; }
.footer-inner { max-width:1200px; margin:0 auto; }

.newsletter-bar {
    border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08);
    padding:40px 0; margin-bottom:32px;
}
.newsletter-content { max-width:600px; margin:0 auto; text-align:center; }
.newsletter-fields  { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; max-width:440px; margin:0 auto 10px; }
.newsletter-btn     { padding:13px; font-size:11px; letter-spacing:.2em; border-radius:2px; width:100%; max-width:440px; margin:0 auto; display:block; }
.nl-input { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); padding:12px 16px; color:white; font-size:13px; font-family:'Raleway',sans-serif; outline:none; border-radius:2px; width:100%; }
.nl-input::placeholder { color:rgba(255,255,255,.45); }
.nl-msg   { margin-top:12px; font-size:13px; font-weight:600; text-align:center; }

.footer-columns { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; margin-bottom:40px; }
@media(max-width:768px) { .footer-columns { grid-template-columns:1fr 1fr; } .footer-col-full { grid-column:1/-1; } }

.footer-logo    { width:90px; height:90px; object-fit:contain; filter:drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
.footer-heading { color:var(--gold); font-size:10px; letter-spacing:.3em; text-transform:uppercase; font-weight:700; font-family:'Raleway',sans-serif; margin-bottom:20px; display:block; }
.footer-link    { display:block; color:rgba(255,255,255,.55); font-size:13px; padding:6px 0; font-family:'Raleway',sans-serif; transition:color .2s; }
.footer-link:hover { color:var(--gold-light); }
.footer-link-inline { color:rgba(255,255,255,.55); font-size:12px; font-family:'Raleway',sans-serif; transition:color .2s; }
.footer-link-inline:hover { color:var(--gold-light); }

.footer-contact-list { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.footer-contact-row  { display:flex; align-items:flex-start; gap:10px; color:rgba(255,255,255,.55); font-size:12px; line-height:1.6; }
.footer-icon         { color:var(--gold); font-size:12px; flex-shrink:0; margin-top:2px; }

.social-icons { display:flex; gap:10px; }
.social-icon {
    width:36px; height:36px; border:1px solid rgba(201,168,76,.3); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,.6); font-size:13px; transition:all .2s;
}
.social-icon:hover          { background:var(--crimson); border-color:var(--crimson); color:white; }
.social-icon.whatsapp:hover { background:#25D366; border-color:#25D366; color:white; }

.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding-top:28px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-bottom p { font-size:12px; color:rgba(255,255,255,.3); font-family:'Raleway',sans-serif; }

/* ─────────────────────────────────────────
   LIGHTBOX
───────────────────────────────────────── */
#lb-overlay {
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.96); z-index:9999;
    flex-direction:column; align-items:center; justify-content:center; overflow:hidden;
}
.lb-close { position:absolute; top:14px; right:18px; background:none; border:none; color:rgba(255,255,255,.7); font-size:34px; cursor:pointer; line-height:1; z-index:10; }
#lb-counter { position:absolute; top:18px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.5); font-size:12px; font-family:'Raleway',sans-serif; font-weight:600; letter-spacing:.15em; z-index:10; white-space:nowrap; }
.lb-arrow {
    position:absolute; top:50%; transform:translateY(-50%);
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
    color:white; width:44px; height:44px; border-radius:50%; font-size:16px;
    cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:10;
    transition:background .2s;
}
.lb-arrow:hover { background:rgba(201,168,76,.4); }
.lb-prev { left:10px; }
.lb-next { right:10px; }
#lb-img-wrap { display:flex; flex-direction:column; align-items:center; width:100%; padding:52px 70px 8px; flex:1; min-height:0; justify-content:center; }
#lb-img  { max-width:100%; max-height:calc(100vh - 150px); object-fit:contain; display:block; }
#lb-cap  { color:rgba(255,255,255,.65); font-size:13px; font-family:'Raleway',sans-serif; margin-top:10px; text-align:center; font-style:italic; }
#lb-thumbs { width:100%; padding:8px 60px 14px; display:flex; justify-content:center; gap:6px; overflow-x:auto; flex-shrink:0; }
.lb-thumb { width:44px; height:34px; flex-shrink:0; cursor:pointer; overflow:hidden; border:2px solid transparent; opacity:.45; transition:all .2s; background:#111; }
.lb-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

/* ─────────────────────────────────────────
   SUCCESS MESSAGE
───────────────────────────────────────── */
.success-wrap { text-align:center; padding:80px 24px; }
.success-icon {
    width:80px; height:80px; background:linear-gradient(135deg,#8B0000,#C41E3A);
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    margin:0 auto 24px; animation:pulseGold 2s infinite;
}
.success-icon i { color:#F5E6C0; font-size:28px; }

/* ─────────────────────────────────────────
   MOBILE OVERRIDES
───────────────────────────────────────── */
@media(max-width:640px) {
    .ev-poster-inner { max-width:100% !important; flex-basis:100% !important; }
    .schedule-row    { grid-template-columns:1fr !important; gap:6px !important; }
}