/*
Theme Name: COP Grace Assembly London
Theme URI: https://graceassemblylondon.ca
Author: The Church of Pentecost Grace Assembly London
Description: Custom theme for The Church of Pentecost Grace Assembly, London District
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: cop-london
*/

/* ── CSS VARIABLES ── */
:root {
  --ink:#0e0b07; --deep:#141010; --card:#1c1714; --warm:#261f19;
  --border:rgba(255,255,255,0.08); --gold:#c4973a; --gold-lt:#e2b96a;
  --offwhite:#ede8de; --muted:#8a7f72; --white:#ffffff;
  --red:#7a1f1f;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'DM Sans', sans-serif;
  background:var(--ink);
  color:var(--white);
  overflow-x:hidden;
}

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4 { font-family:'Cormorant Garamond', serif; font-weight:700; line-height:0.95; }
p { font-weight:300; line-height:1.85; }
a { text-decoration:none; }

/* ── NAV ── */
#site-nav {
  position:fixed; top:0; left:0; right:0; z-index:200; height:72px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px;
  background:rgba(14,11,7,0.96); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.nav-logo { display:flex; align-items:center; gap:12px; cursor:pointer; }
.nav-logo img { width:42px; height:42px; border-radius:50%; object-fit:cover; }
.nav-logo-text { display:flex; flex-direction:column; line-height:1.2; }
.nav-logo-text b { font-size:13px; font-weight:600; color:var(--white); font-family:'DM Sans',sans-serif; }
.nav-logo-text small { font-size:10px; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold); }
.nav-menu { display:flex; align-items:center; gap:24px; list-style:none; }
.nav-menu a {
  font-size:11px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--muted); transition:color .2s; font-family:'DM Sans',sans-serif;
}
.nav-menu a:hover, .nav-menu .current-menu-item a { color:var(--white); }
.nav-menu .menu-connect a {
  background:var(--gold); color:var(--ink) !important;
  padding:9px 20px; border-radius:3px; font-weight:600 !important;
  transition:background .2s;
}
.nav-menu .menu-connect a:hover { background:var(--gold-lt); }

/* hamburger */
.nav-hamburger {
  display:none; flex-direction:column; gap:5px; cursor:pointer;
  background:none; border:none; padding:4px;
}
.nav-hamburger span {
  width:24px; height:2px; background:var(--white); border-radius:2px;
  transition:all .3s;
}
.mobile-menu {
  display:none; position:fixed; top:72px; left:0; right:0; z-index:199;
  background:rgba(14,11,7,0.98); backdrop-filter:blur(16px);
  padding:24px 32px 32px; flex-direction:column; gap:0;
  border-bottom:1px solid var(--border);
}
.mobile-menu.open { display:flex; }
.mobile-menu a {
  display:block; padding:14px 0;
  font-size:14px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid var(--border);
  font-family:'DM Sans',sans-serif; transition:color .2s;
}
.mobile-menu a:last-child { border-bottom:none; }
.mobile-menu a:hover { color:var(--white); }
.mobile-menu .mobile-connect {
  margin-top:16px; background:var(--gold); color:var(--ink) !important;
  padding:13px; border-radius:3px; text-align:center; font-weight:700 !important;
}

/* ── SHARED UTILITIES ── */
.page-wrap { padding-top:72px; }
.eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.eyebrow-line { width:28px; height:1px; background:var(--gold); }
.eyebrow span { font-size:10px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:var(--gold); }
.section-title { font-size:clamp(36px,4vw,58px); color:var(--white); margin-bottom:18px; }
.section-body { font-size:15px; color:var(--offwhite); max-width:560px; }
.divider { width:56px; height:1px; background:var(--gold); margin:28px 0; }

.btn-gold {
  display:inline-block; background:var(--gold); color:var(--ink);
  padding:13px 30px; border-radius:3px;
  font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  transition:background .2s; border:none; cursor:pointer; font-family:'DM Sans',sans-serif;
}
.btn-gold:hover { background:var(--gold-lt); }
.btn-outline {
  display:inline-block; border:1px solid rgba(255,255,255,0.22); color:var(--offwhite);
  padding:13px 30px; border-radius:3px;
  font-size:11px; font-weight:500; letter-spacing:2px; text-transform:uppercase;
  transition:all .2s; background:none; font-family:'DM Sans',sans-serif;
}
.btn-outline:hover { border-color:var(--gold); color:var(--gold); }

/* ── HERO ── */
.hero {
  min-height:calc(100vh - 72px);
  display:grid; grid-template-columns:1fr 1fr;
  position:relative; overflow:hidden;
}
.hero-left {
  display:flex; flex-direction:column; justify-content:center;
  padding:80px 64px; position:relative; z-index:2;
}
.hero-tag {
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(196,151,58,0.4); padding:6px 14px; border-radius:2px;
  font-size:10px; letter-spacing:3px; text-transform:uppercase;
  color:var(--gold); margin-bottom:32px; width:fit-content;
}
.hero-h1 { font-size:clamp(54px,6vw,88px); letter-spacing:-1px; margin-bottom:24px; }
.hero-h1 em { font-style:italic; color:var(--gold); }
.hero-sub { font-size:15px; line-height:1.85; color:var(--offwhite); max-width:380px; margin-bottom:40px; }
.hero-btns { display:flex; gap:12px; }
.hero-right { position:relative; overflow:hidden; }
.hero-img-bg {
  position:absolute; inset:0;
  background:linear-gradient(135deg,var(--warm) 0%,var(--red) 60%,#2a0a0a 100%);
  display:flex; align-items:center; justify-content:center;
}
.hero-img-bg img { width:100%; height:100%; object-fit:cover; opacity:0.7; }
.hero-gradient {
  position:absolute; inset:0;
  background:linear-gradient(to right,var(--ink) 0%,transparent 35%);
  z-index:1;
}

/* ── SERVICE BAR ── */
.svc-bar { display:flex; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--warm); }
.svc-item { flex:1; padding:22px 28px; border-right:1px solid var(--border); display:flex; flex-direction:column; gap:3px; }
.svc-item:last-child { border-right:none; }
.svc-day { font-size:10px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:var(--gold); }
.svc-time { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:700; color:var(--white); }
.svc-name { font-size:12px; color:var(--muted); }
.svc-note { font-size:11px; color:var(--gold-lt); font-style:italic; margin-top:2px; }

/* ── WELCOME ── */
.welcome-wrap {
  padding:110px 64px; display:grid; grid-template-columns:1fr 1fr;
  gap:80px; max-width:1280px; margin:0 auto; align-items:center;
}
.welcome-img {
  aspect-ratio:4/5; background:var(--warm); border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); position:relative; overflow:hidden;
}
.welcome-img img { width:100%; height:100%; object-fit:cover; }
.welcome-quote-card {
  position:absolute; bottom:-20px; right:-20px;
  background:var(--gold); padding:22px 26px; border-radius:2px; max-width:210px;
}
.welcome-quote-card p { font-family:'Cormorant Garamond',serif; font-size:15px; font-style:italic; line-height:1.5; color:var(--ink); font-weight:600; }

/* ── MINISTRIES STRIP ── */
.min-strip { padding:90px 64px; background:var(--deep); }
.min-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); margin-top:40px; }
.min-card { background:var(--card); padding:32px 28px; position:relative; overflow:hidden; transition:background .25s; cursor:pointer; }
.min-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.min-card:hover { background:var(--warm); }
.min-card:hover::after { transform:scaleX(1); }
.min-icon { font-size:26px; margin-bottom:14px; }
.min-name { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:700; color:var(--white); margin-bottom:8px; }
.min-desc { font-size:12px; font-weight:300; line-height:1.7; color:var(--muted); }

/* ── EVENTS ── */
.event-card { background:var(--card); border:1px solid var(--border); border-radius:2px; overflow:hidden; transition:border-color .25s, transform .25s; }
.event-card:hover { border-color:var(--gold); transform:translateY(-3px); }
.event-img { aspect-ratio:16/9; background:var(--warm); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.event-img img { width:100%; height:100%; object-fit:cover; }
.event-badge { position:absolute; top:12px; left:12px; background:var(--gold); color:var(--ink); padding:4px 10px; border-radius:2px; font-size:10px; font-weight:700; letter-spacing:1px; }
.event-body { padding:18px 20px; }
.event-cat { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
.event-title { font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:700; color:var(--white); margin-bottom:6px; line-height:1.2; }
.event-meta { font-size:11px; color:var(--muted); line-height:1.6; }
.zoom-badge { display:inline-block; background:rgba(74,144,226,0.12); border:1px solid rgba(74,144,226,0.3); color:#74b3f5; font-size:9px; letter-spacing:1.5px; text-transform:uppercase; padding:3px 7px; border-radius:2px; margin-top:6px; }

/* ── SERMONS ── */
.sermon-embed iframe { width:100%; aspect-ratio:16/9; border:none; display:block; }
.sermon-side { padding:28px; display:flex; flex-direction:column; gap:14px; }
.sermon-ai-desc { background:var(--warm); border:1px solid var(--border); border-radius:2px; padding:14px; font-size:12px; line-height:1.75; color:var(--offwhite); flex:1; }
.ai-dot { width:5px; height:5px; background:var(--gold); border-radius:50%; display:inline-block; animation:pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }

/* ── CONNECT FORM ── */
.wpcf7-form input,
.wpcf7-form select,
.wpcf7-form textarea {
  width:100%; background:var(--card); border:1px solid var(--border);
  border-radius:2px; padding:12px 16px; color:var(--white);
  font-family:'DM Sans',sans-serif; font-size:14px; outline:none;
  transition:border-color .2s; margin-bottom:16px;
}
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus { border-color:var(--gold); }
.wpcf7-form input[type="submit"] {
  background:var(--gold); color:var(--ink); border:none; cursor:pointer;
  font-weight:700; letter-spacing:2px; text-transform:uppercase; transition:background .2s;
}
.wpcf7-form input[type="submit"]:hover { background:var(--gold-lt); }

/* ── FOOTER ── */
#site-footer { background:var(--deep); border-top:1px solid var(--border); padding:56px 64px 36px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer-desc { font-size:12px; line-height:1.8; color:var(--muted); max-width:240px; margin:12px 0 18px; }
.footer-socials { display:flex; gap:8px; }
.footer-soc { width:32px; height:32px; background:var(--card); border-radius:2px; display:flex; align-items:center; justify-content:center; font-size:13px; transition:background .2s; }
.footer-soc:hover { background:var(--warm); }
.footer-col h4 { font-family:'DM Sans',sans-serif; font-size:10px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:var(--white); margin-bottom:16px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
.footer-col ul a { font-size:12px; font-weight:300; color:var(--muted); transition:color .2s; }
.footer-col ul a:hover { color:var(--gold); }
.footer-bottom { border-top:1px solid var(--border); padding-top:24px; display:flex; justify-content:space-between; align-items:center; }
.footer-copy { font-size:11px; color:var(--muted); }
.footer-nat a { color:var(--gold); font-size:11px; }

/* ══ CONNECT FORM — white inputs for readability ══ */
.wpcf7-form input:not([type="submit"]),
.wpcf7-form select,
.wpcf7-form textarea {
  width:100%; background:#fff; border:1px solid rgba(0,0,0,0.15);
  border-radius:3px; padding:12px 16px; color:#111;
  font-family:'DM Sans',sans-serif; font-size:14px; outline:none;
  transition:border-color .2s; margin-bottom:14px; display:block;
}
.wpcf7-form input:focus,.wpcf7-form select:focus,.wpcf7-form textarea:focus {
  border-color:var(--gold); box-shadow:0 0 0 2px rgba(196,151,58,0.15);
}
.wpcf7-form label { color:#ffffff !important; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; font-weight:600; display:block; margin-bottom:6px; }
.wpcf7-form input[type="submit"] {
  width:100%; background:var(--gold); color:var(--ink); border:none; cursor:pointer;
  font-weight:700; letter-spacing:2px; text-transform:uppercase; transition:background .2s;
  font-size:12px; padding:14px; border-radius:3px; font-family:'DM Sans',sans-serif;
}
.wpcf7-form input[type="submit"]:hover { background:var(--gold-lt); }

/* WPForms specific overrides */
.wpforms-field label,
.wpforms-field-label,
.wpforms-field-container label,
div.wpforms-container label,
.wpforms-form .wpforms-field-label { 
  color:#ffffff !important; 
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:1.5px !important;
  text-transform:uppercase !important;
  font-family:'DM Sans',sans-serif !important;
  margin-bottom:7px !important;
  display:block !important;
}
.wpforms-field input,
.wpforms-field select,
.wpforms-field textarea {
  background:#ffffff !important;
  color:#111111 !important;
  border:1px solid rgba(0,0,0,0.2) !important;
  border-radius:3px !important;
  padding:12px 16px !important;
  font-size:14px !important;
  font-family:'DM Sans',sans-serif !important;
}
.wpforms-field input:focus,
.wpforms-field select:focus,
.wpforms-field textarea:focus {
  border-color:var(--gold) !important;
  outline:none !important;
  box-shadow:0 0 0 2px rgba(196,151,58,0.2) !important;
}
.wpforms-submit-container button[type="submit"],
.wpforms-form button[type="submit"] {
  background:var(--gold) !important;
  color:var(--ink) !important;
  border:none !important;
  padding:14px 32px !important;
  font-weight:700 !important;
  letter-spacing:2px !important;
  text-transform:uppercase !important;
  border-radius:3px !important;
  font-family:'DM Sans',sans-serif !important;
  font-size:12px !important;
  width:100% !important;
  cursor:pointer !important;
  transition:background .2s !important;
}
.wpforms-submit-container button[type="submit"]:hover { background:var(--gold-lt) !important; }
/* Required asterisk */
.wpforms-required-label { color:var(--gold) !important; }
/* Error messages */
.wpforms-error { color:#ff6b6b !important; font-size:12px !important; }

/* ══ FILTER BUTTONS ══ */
.filter-btn { transition:all .2s !important; }
.filter-btn.active { background:var(--gold) !important; color:var(--ink) !important; border-color:var(--gold) !important; }
.filter-btn:hover:not(.active) { border-color:var(--gold); color:var(--gold); }

/* ══ HAMBURGER ANIMATION ══ */
.nav-hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ══════════════════════════════
   MOBILE RESPONSIVE
══════════════════════════════ */
@media (max-width: 900px) {
  #site-nav { padding:0 20px; }
  .nav-menu { display:none !important; }
  .nav-hamburger { display:flex; }

  .hero { grid-template-columns:1fr; min-height:auto; }
  .hero-left { padding:48px 24px 40px; order:2; }
  .hero-right { height:240px; order:1; }
  .hero-gradient { background:linear-gradient(to top,var(--ink) 0%,transparent 60%); }
  .hero-h1 { font-size:clamp(42px,10vw,64px); }
  .hero-btns { flex-direction:column; gap:10px; }
  .hero-btns a,.hero-btns button { text-align:center; width:100%; }

  .svc-bar { flex-direction:column; }
  .svc-item { border-right:none; border-bottom:1px solid var(--border); padding:14px 24px; }
  .svc-item:last-child { border-bottom:none; }

  .welcome-wrap { grid-template-columns:1fr; gap:36px; padding:56px 24px; }
  .welcome-img { aspect-ratio:3/2; }
  .welcome-quote-card { position:relative; bottom:auto; right:auto; margin-top:12px; max-width:100%; }

  .min-strip { padding:56px 24px; }
  .min-grid { grid-template-columns:1fr 1fr; }

  .leaders-grid { grid-template-columns:1fr !important; }
  .leader-card { flex-direction:column !important; }

  #site-footer { padding:40px 24px 28px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px; }
  .footer-bottom { flex-direction:column; gap:10px; text-align:center; }

  .page-hero { padding:56px 24px 40px !important; }

  /* Sermons */
  div[style*="grid-template-columns:1fr 340px"] { display:block !important; }
  div[style*="grid-template-columns:1fr 340px"] > div:last-child { border-left:none !important; border-top:1px solid var(--border); }

  /* Connect */
  div[style*="grid-template-columns:1fr 1fr"][style*="min-height:100vh"] { display:block !important; }

  /* Ministry hero */
  div[style*="grid-template-columns:1fr 1fr"][style*="gap:60px"] { display:block !important; padding:40px 24px !important; }
  div[style*="grid-template-columns:1fr 1fr"][style*="gap:60px"] > div:last-child { margin-top:24px; }

  /* Events grid */
  #events-main-grid { grid-template-columns:1fr 1fr !important; padding:0 24px 60px !important; }
  #home-events-grid { grid-template-columns:1fr !important; }

  /* Ministry events */
  div[style*="padding:0 64px 64px"] { padding:0 24px 40px !important; }
  div[id^="min-events-"] { grid-template-columns:1fr 1fr !important; }

  /* Filter */
  div[style*="padding:28px 64px"] { padding:20px 24px 8px !important; }

  /* Ministry tabs */
  div[style*="padding:0 64px"][style*="border-bottom"] { padding:0 20px !important; }
}

@media (max-width: 600px) {
  .nav-logo-text b { font-size:11px; }
  .nav-logo-text small { display:none; }
  .nav-logo img { width:32px; height:32px; }

  .hero-left { padding:40px 16px 36px; }
  .hero-h1 { font-size:clamp(36px,12vw,52px); }
  .hero-right { height:180px; }

  .min-grid { grid-template-columns:1fr !important; }
  #events-main-grid { grid-template-columns:1fr !important; }
  #home-events-grid { grid-template-columns:1fr !important; }
  div[id^="min-events-"] { grid-template-columns:1fr !important; }
  #sermon-cards { grid-template-columns:1fr !important; }

  .footer-grid { grid-template-columns:1fr !important; }
  .footer-bottom { flex-direction:column; }

  .filter-btn { padding:6px 10px !important; font-size:10px !important; }
  .min-tab { padding:12px 14px !important; font-size:10px !important; }

  div[style*="padding:72px 64px"],[style*="padding:80px 64px"],[style*="padding:90px 64px"],[style*="padding:100px 64px"],[style*="padding:110px 64px"] {
    padding-left:16px !important; padding-right:16px !important;
  }
}

/* Animations */
@keyframes fadeUp { from{opacity:0;transform:translateY(18px);} to{opacity:1;transform:translateY(0);} }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }
.hero-left > * { animation:fadeUp .7s ease both; }
.hero-left > *:nth-child(1){animation-delay:.05s;}
.hero-left > *:nth-child(2){animation-delay:.15s;}
.hero-left > *:nth-child(3){animation-delay:.25s;}
.hero-left > *:nth-child(4){animation-delay:.35s;}

::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:var(--ink);}
::-webkit-scrollbar-thumb{background:var(--warm);border-radius:2px;}

/* ══ HOMEPAGE MOBILE CRITICAL FIXES ══ */
@media (max-width: 768px) {
  /* Force hero to stack */
  .hero {
    display:flex !important;
    flex-direction:column !important;
    min-height:auto !important;
  }
  .hero-right {
    order:1;
    height:220px !important;
    width:100% !important;
    flex-shrink:0;
  }
  .hero-left {
    order:2;
    padding:40px 20px 36px !important;
    width:100% !important;
  }
  .hero-h1 { font-size:42px !important; line-height:.95 !important; }
  .hero-sub { font-size:14px !important; }
  .hero-btns { flex-direction:column !important; gap:10px !important; }
  .hero-btns a, .hero-btns button { width:100% !important; text-align:center !important; display:block !important; }

  /* Service bar */
  .svc-bar { flex-direction:column !important; }
  .svc-item { border-right:none !important; border-bottom:1px solid var(--border); flex-direction:row !important; align-items:center !important; gap:12px !important; padding:14px 20px !important; flex-wrap:wrap; }
  .svc-item:last-child { border-bottom:none; }

  /* Welcome */
  .welcome-wrap { display:flex !important; flex-direction:column !important; padding:48px 20px !important; gap:32px !important; }
  .welcome-img { aspect-ratio:16/9 !important; }
  .welcome-quote-card { position:static !important; margin-top:12px !important; max-width:100% !important; }

  /* Ministries */
  .min-strip { padding:48px 20px !important; }
  .min-grid { grid-template-columns:1fr 1fr !important; gap:1px !important; }

  /* Events on homepage */
  #home-events-grid { grid-template-columns:1fr !important; gap:16px !important; }

  /* General padding fix */
  section[style*="padding:80px 64px"],
  section[style*="padding:90px 64px"],
  section[style*="padding:72px 64px"] {
    padding-left:20px !important;
    padding-right:20px !important;
    padding-top:48px !important;
    padding-bottom:48px !important;
  }

  /* Nav */
  #site-nav { padding:0 16px !important; }
  .nav-menu { display:none !important; }
  .nav-hamburger { display:flex !important; }

  /* Footer */
  #site-footer { padding:40px 20px 28px !important; }
  .footer-grid { grid-template-columns:1fr 1fr !important; gap:24px !important; }
}

@media (max-width: 480px) {
  .hero-h1 { font-size:34px !important; }
  .min-grid { grid-template-columns:1fr !important; }
  .footer-grid { grid-template-columns:1fr !important; }
  .footer-bottom { flex-direction:column !important; gap:8px !important; text-align:center !important; }
  /* Events and sermons */
  div[style*="grid-template-columns:repeat(3"] { grid-template-columns:1fr !important; }
  div[style*="padding:0 64px 80px"] { padding:0 16px 48px !important; }
  div[style*="padding:40px 64px"] { padding:24px 16px !important; }
}