/* =========================================================
   City Church — Easter Landing Page (Minimal)
   File: easter.css
   ========================================================= */

/* -------------------------
   Color Profile (City Church)
------------------------- */
:root{
  --bg-dark: #1E2A32;     /* deep navy/charcoal */
  --bg-dark-2:#152029;    /* slightly deeper */
  --bg-light:#F5F3EF;     /* warm off-white */
  --accent:#B57CA8;       /* Easter mauve/rose */
  --accent-2:#7BAFC4;     /* Easter soft blue */
  --text-dark:#0F1720;
  --text-light:#FFFFFF;
  --muted:#8A9198;

  --card-dark: rgba(255,255,255,0.06);
  --card-light:#FFFFFF;

  --border-dark: rgba(255,255,255,0.14);
  --border-light: rgba(15,23,32,0.12);

  --shadow: 0 18px 60px rgba(0,0,0,0.28);
  --shadow-soft: 0 10px 40px rgba(0,0,0,0.12);

  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;

  --container: 1120px;

  --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-serif: "Playfair Display", ui-serif, Georgia, serif;

  --ease: cubic-bezier(.2,.8,.2,1);
}

/* -------------------------
   Base / Reset
------------------------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--text-dark);
  background:var(--bg-light);
  line-height:1.55;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

.container{
  width:min(var(--container), calc(100% - 48px));
  margin-inline:auto;
}

.skip-link{
  position:absolute;
  left:-999px;
  top:10px;
  background:var(--accent);
  color:var(--text-dark);
  padding:10px 14px;
  border-radius:10px;
  z-index:9999;
}
.skip-link:focus{ left:10px; }

/* =========================================================
   TOPBAR (Sticky)
   ========================================================= */
.topbar{
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;

  width: min(var(--container), calc(100% - 48px));
  border-radius: 18px;

  background: rgba(21,32,41,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 55px rgba(0,0,0,0.28);
}




.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;   /* 👈 changed from 14px 0 */
  gap:18px;
}


.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:800;
  letter-spacing:.2px;
  color:var(--text-light);
}
.brand__text{
  font-size:16px;
}
.topbar__nav{
  display:flex;
  align-items:center;
  gap:16px;
}
.navlink{
  color:rgba(255,255,255,0.86);
  font-weight:600;
  font-size:14px;
  padding:10px 10px;
  border-radius:12px;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.navlink:hover{
  background:rgba(255,255,255,0.08);
  color:var(--text-light);
}

.menu-btn{
  display:none;
  background:transparent;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:12px;
  padding:10px 10px;
  cursor:pointer;
}
.menu-btn__bar{
  display:block;
  width:22px;
  height:2px;
  background:rgba(255,255,255,0.85);
  margin:5px 0;
  border-radius:2px;
}

/* Mobile nav dropdown (JS toggles [hidden]) */
.mobile-nav{
  display:none;
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 12px);
  width: min(var(--container), calc(100% - 48px));
  background: rgba(21,32,41,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  padding: 12px 14px;
  z-index: 999;
}

/* Only show when NOT hidden */
.mobile-nav:not([hidden]){
  display:block;
}

.mobile-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color: rgba(255,255,255,0.92);
  padding: 12px 10px;
  font-weight: 750;
  border-radius: 14px;
}
.mobile-link:hover{
  background: rgba(255,255,255,0.08);
}


/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:999px;
  padding:13px 18px;
  font-weight:750;
  font-size:14px;
  border:1px solid transparent;
  cursor:pointer;
  transition: transform .15s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
  user-select:none;
  white-space:nowrap;
}
.btn:active{ transform: translateY(1px) scale(0.99); }
.btn--primary{
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #FFFFFF;
  box-shadow: 0 12px 30px rgba(181,124,168,0.30);
}
.btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(181,124,168,0.38);
}
.btn--ghost{
  background:rgba(255,255,255,0.06);
  color:var(--text-light);
  border-color: rgba(255,255,255,0.16);
}
.btn--ghost:hover{
  background:rgba(255,255,255,0.10);
}
.btn--sm{
  padding:10px 14px;
  font-size:13px;
}
.btn--block{
  width:100%;
}

.link{
  display:inline-block;
  margin-top:12px;
  font-weight:650;
  color:rgba(255,255,255,0.88);
}
.link:hover{ text-decoration:underline; }
.link--light{
  color:rgba(255,255,255,0.88);
}

/* =========================================================
   SECTIONS
   ========================================================= */
.section{
  padding:72px 0;
}
.section--dark{
  background:linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-dark-2) 100%);
  color:var(--text-light);
}
.section--light{
  background:var(--bg-light);
  color:var(--text-dark);
}

.section__header{
  max-width:720px;
  margin-bottom:28px;
}
.section__title{
  margin:0 0 10px;
  font-size:36px;
  letter-spacing:-0.6px;
  line-height:1.1;
  font-family:var(--font-serif);
}
.section__subtitle{
  margin:0;
  color:rgba(255,255,255,0.74);
  font-size:16px;
  font-weight:500;
}
.section--light .section__subtitle{
  color:rgba(15,23,32,0.70);
}

/* =========================================================
   HERO
   ========================================================= */
/* =========================================================
   HERO — IMAGE ONLY SECTION (Layer 1)
   ========================================================= */
.hero{
  position: relative;
  width: 100%;
  /* 16:9 aspect ratio — image always shows fully, no cropping */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: block;
  background: var(--bg-dark);
  /* Push down so fixed topbar doesn't overlap the image */
  margin-top: 72px;
}

/* The background image fills the section at full 16:9 */
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url("img/hero-easter2.jpg") center center / 100% 100% no-repeat;
  z-index: 0;
}

/* Scroll hint sits at the bottom of the image */
.hero .hero__scrollhint{
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

/* =========================================================
   HERO INVITE — SEPARATE SOLID SECTION (Layer 2)
   No image, no bleed, fully isolated background
   ========================================================= */
.hero-invite{
  position: relative;        /* new stacking context — cuts off image bleed */
  z-index: 1;
  background: #1E1B2E;       /* deep Easter plum — distinct from image */
  color: var(--text-light);
  padding: 80px 0 88px;
  /* subtle top border to visually separate from image */
  border-top: 1px solid rgba(181,124,168,0.20);
}

/* Optional soft gradient overlay inside invite section for depth */
.hero-invite::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 500px at 15% 50%, rgba(181,124,168,0.10), transparent 65%),
    radial-gradient(600px 400px at 85% 20%, rgba(123,175,196,0.08), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.hero-invite__content{
  position: relative;
  z-index: 1;
  max-width: 820px;
}

/* Legacy .hero__content — kept for any other uses */
.hero__content{
  position: relative;
  padding: 86px 0 70px;
  max-width: 900px;
}

/* =========================================================
   HERO TEXT STYLES (shared, used in hero-invite)
   ========================================================= */
/* Countdown */
.countdown{
  margin-top: 26px;
  max-width: 640px;
  padding: 16px 16px 14px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
}
.countdown__label{
  font-weight:750;
  font-size:13px;
  color: rgba(255,255,255,0.90);
  margin-bottom: 12px;
}
.countdown__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.countdown__cell{
  border-radius: 14px;
  background: rgba(0,0,0,0.20);
  border:1px solid rgba(255,255,255,0.10);
  padding: 12px 10px;
  text-align:center;
}
.countdown__num{
  font-size: 22px;
  font-weight: 850;
  letter-spacing: -0.3px;
  color: var(--accent-2);
}
.countdown__txt{
  font-size: 12px;
  color: rgba(255,255,255,0.74);
  margin-top: 2px;
}
.countdown__note{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.70);
}

/* Centered countdown variant (used in CTA section) */
.countdown--center{
  margin-inline: auto;
  text-align: center;
}
.countdown--center .countdown__label{
  text-align: center;
}
.countdown code{
  background: rgba(201,162,77,0.14);
  border:1px solid rgba(201,162,77,0.22);
  padding:2px 6px;
  border-radius: 10px;
  color: rgba(255,255,255,0.90);
}

/* Scroll hint */
.hero__scrollhint{
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.9;
}
.scrollhint__dot{
  width: 22px;
  height: 36px;
  border:1px solid rgba(255,255,255,0.34);
  border-radius: 999px;
  position:relative;
}
.scrollhint__dot::after{
  content:"";
  width: 6px;
  height: 6px;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  position:absolute;
  left:50%;
  top:8px;
  transform: translateX(-50%);
  animation: scrollDot 1.5s infinite;
}
.scrollhint__text{
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
@keyframes scrollDot{
  0%{ transform: translate(-50%, 0); opacity: 0.9; }
  70%{ transform: translate(-50%, 14px); opacity: 0.35; }
  100%{ transform: translate(-50%, 0); opacity: 0.9; }
}

/* =========================================================
   SERVICE TIMES
   ========================================================= */
.times-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:18px;
  margin-top: 10px;
}

.time-card{
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 50px rgba(0,0,0,0.20);
  padding: 22px 20px;
  overflow:hidden;
  position:relative;
}
.time-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(420px 220px at 18% 0%, rgba(181,124,168,0.14), transparent 62%);
  pointer-events:none;
}
.time-card__top{
  position:relative;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.time-card__day{
  margin:0;
  font-size:20px;
  font-weight:850;
  letter-spacing:-0.2px;
}
.time-card__date{
  margin:0;
  color: rgba(255,255,255,0.72);
  font-weight:650;
  font-size: 13px;
}

.time-card__time{
  position:relative;
  margin: 14px 0 10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.time-card__time-big{
  display:inline-flex;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.10);
  font-weight: 850;
  letter-spacing: -0.3px;
}

.time-card__actions{
  position:relative;
  margin-top: 10px;
}
.time-card .link{
  color: rgba(255,255,255,0.78);
}
.time-card .link:hover{
  color: rgba(255,255,255,0.95);
}

.micro-note{
  margin-top: 20px;
  color: rgba(255,255,255,0.76);
  font-size: 14px;
}

/* =========================================================
   GOOD FRIDAY FEATURE CARD
   ========================================================= */
.feature-card{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 24px;
  padding: 22px;
  border-radius: var(--radius-xl);
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-soft);
}

.feature-card__media img{
  width:100%;
  height:100%;
  max-height: 320px;
  object-fit:cover;
  border-radius: 18px;
}

.kicker{
  display:inline-block;
  margin:0 0 10px;
  font-weight: 850;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(15,23,32,0.65);
}
.feature-card__title{
  margin:0 0 10px;
  font-size: 34px;
  line-height:1.1;
  letter-spacing: -0.6px;
  font-family: var(--font-serif);
}
.feature-card__text{
  margin:0 0 14px;
  color: rgba(15,23,32,0.72);
}

.details{
  margin: 0 0 18px;
  padding-left: 18px;
  color: rgba(15,23,32,0.78);
}
.details li{ margin: 8px 0; }

.feature-card__actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.section--light .btn--ghost{
  background: rgba(15,23,32,0.05);
  color: var(--text-dark);
  border-color: rgba(15,23,32,0.14);
}
.section--light .btn--ghost:hover{
  background: rgba(15,23,32,0.08);
}

/* =========================================================
   DIRECTIONS / SPLIT SECTION
   ========================================================= */
.split{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 22px;
  align-items:start;
}
.video{
  border-radius: var(--radius-xl);
  overflow:hidden;
  border:1px solid var(--border-light);
  box-shadow: var(--shadow-soft);
  background: #000;
}
.video iframe{
  width:100%;
  aspect-ratio: 16 / 9;
  border:0;
  display:block;
}

.address{
  margin: 0 0 12px;
  color: rgba(15,23,32,0.86);
}
.muted{
  margin: 0 0 16px;
  color: rgba(15,23,32,0.70);
}

.stack{
  display:grid;
  gap:10px;
  margin: 14px 0 18px;
}

.mini-faq{
  border-radius: var(--radius-xl);
  background: rgba(15,23,32,0.04);
  border:1px solid rgba(15,23,32,0.10);
  padding: 16px 16px;
}
.mini-faq__item{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding: 10px 0;
  border-bottom:1px solid rgba(15,23,32,0.08);
}
.mini-faq__item:last-child{ border-bottom:none; }
.mini-faq__q{
  font-weight: 800;
  color: rgba(15,23,32,0.86);
}
.mini-faq__a{
  color: rgba(15,23,32,0.66);
  text-align:right;
}

/* =========================================================
   FINAL CTA
   ========================================================= */
.section--cta{
  padding: 78px 0;
}
.cta{
  text-align:center;
  max-width: 860px;
  margin-inline:auto;
}
.cta__title{
  margin:0 0 10px;
  font-size: 44px;
  line-height:1.05;
  letter-spacing: -0.8px;
  font-family: var(--font-serif);
}
.cta__text{
  margin:0 auto 18px;
  max-width: 620px;
  color: rgba(255,255,255,0.78);
}
.cta__actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

/* =========================================================
   FOOTER (Image background + overlay)
   ========================================================= */
.footer{
  position:relative;
  background: var(--bg-dark);
  color: var(--text-light);
  padding: 64px 0 34px;
  overflow:hidden;
}
.footer::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("img/footer-bg.jpg") center/cover no-repeat;
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.03);
}
.footer__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(21,32,41,0.90) 0%, rgba(21,32,41,0.66) 55%, rgba(21,32,41,0.86) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.46));
}
.footer__inner{
  position:relative;
}

.footer__brand{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom: 18px;
}
.brand-mark{
  width:46px;
  height:46px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  font-weight: 900;
  background: rgba(201,162,77,0.16);
  border:1px solid rgba(201,162,77,0.22);
  color: var(--accent);
  letter-spacing: 0.6px;
}
.footer__name{
  font-weight: 900;
  letter-spacing: -0.2px;
}
.footer__muted{
  color: rgba(255,255,255,0.70);
  font-size: 13px;
  margin-top: 2px;
}

.footer__cols{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.footer__title{
  margin:0 0 10px;
  font-size: 14px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.84);
}
.footer__text{
  margin:0 0 10px;
  color: rgba(255,255,255,0.74);
}
.social{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.social__link{
  color: rgba(255,255,255,0.82);
  font-weight: 650;
}
.social__link:hover{
  color: rgba(255,255,255,0.96);
  text-decoration: underline;
}

.footer__bottom{
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.70);
  font-size: 13px;
}

/* =========================================================
   REVEAL ANIMATIONS
   - Default: visible (so page works with no JS)
   - When JS loads, it adds .js to <html> and we animate
   ========================================================= */

/* Default (NO JS): show content */
.reveal{
  opacity: 1;
  transform: none;
}

/* JS-enabled animations */
html.js .reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .7s var(--ease);
}

html.js .reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}



/* =========================================================
   TIME CARD EXTRAS (desc + details inside cards)
   ========================================================= */
.time-card__desc{
  position: relative;
  margin: 12px 0 10px;
}
.time-card__desc p{
  margin: 0 0 8px;
  color: rgba(255,255,255,0.78);
  font-size: 14px;
  line-height: 1.55;
}
.time-card__details{
  list-style: none;
  margin: 0;
  padding: 0;
}
.time-card__details li{
  font-size: 13px;
  color: rgba(255,255,255,0.68);
  margin: 4px 0;
}

/* =========================================================
   WHAT TO EXPECT SECTION
   ========================================================= */
.section__header--center{
  text-align: center;
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: 36px;
}
.section__subtitle--dark{
  color: rgba(15,23,32,0.66) !important;
}

.expect-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 36px;
}
.expect-card{
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 28px 22px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.expect-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.expect-card__icon{
  font-size: 32px;
  margin-bottom: 14px;
  line-height: 1;
}
.expect-card__title{
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-dark);
}
.expect-card__text{
  margin: 0;
  font-size: 13px;
  color: rgba(15,23,32,0.66);
  line-height: 1.55;
}

.expect-cta{
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.btn--ghost.btn--dark{
  background: rgba(15,23,32,0.05);
  color: var(--text-dark);
  border-color: rgba(15,23,32,0.14);
}
.btn--ghost.btn--dark:hover{
  background: rgba(15,23,32,0.09);
}

/* =========================================================
   WHAT TO EXPECT — CENTERED
   ========================================================= */
.expect-center{
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}
.text-center{ text-align: center; }
.expect-subtitle{
  margin: 10px 0 28px;
  color: rgba(15,23,32,0.68);
  font-size: 16px;
  line-height: 1.6;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 920px){
  .times-grid{ grid-template-columns: 1fr; }
  .expect-grid{ grid-template-columns: repeat(2, 1fr); }
  .feature-card{ grid-template-columns: 1fr; }
  .feature-card__media img{ max-height: 360px; }
  .split{ grid-template-columns: 1fr; }
  .mini-faq__item{ flex-direction:column; align-items:flex-start; }
  .mini-faq__a{ text-align:left; }
}

@media (max-width: 760px){
  .topbar__nav{ display:none; }
  .menu-btn{ display:inline-flex; }
  .section{ padding: 58px 0; }
  .section__title{ font-size: 32px; }
  .cta__title{ font-size: 38px; }
  .hero__content{ padding: 78px 0 62px; }
  .countdown__grid{ grid-template-columns: repeat(2, 1fr); }
  .footer__cols{ grid-template-columns: 1fr; }
  .hero-invite{ padding: 48px 0 60px; }
  .hero__title{ font-size: clamp(34px, 8vw, 54px); }
}


@media (max-width: 480px){
  .hero-invite{ padding: 40px 0 52px; }
  .expect-grid{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ transition:none; transform:none; }
  .scrollhint__dot::after{ animation:none; }
}

.menu-btn svg{
  fill: none;
  stroke: var(--text-light);
  stroke-width: 0;
}

.menu-btn circle{
  fill: rgba(255,255,255,0.85);
}

.menu-btn:hover circle{
  fill: #fff;
}

.brand__logo{
  height: 50px;          /* key control */
  width: auto;
  display: block;
  object-fit: contain;
}