/* CE Abuja Ministry Center - PHP 8 live-stream site.
   Palette matched to the original site: deep purple nav, orange live
   banner, pale lavender card band, dark navy footer. */

body {
  font-family: 'Noto Sans', Arial, sans-serif;
  color: #333;
  background: #fff;
}

h1, h2, h3, h4, .montserrat { font-family: 'Montserrat', 'Noto Sans', sans-serif; }
.serif { font-family: 'Noto Serif', Georgia, serif; }

.theme-layout { overflow-x: hidden; }

/* ---------- header ---------- */
.topbar {
  background: #1a1a1a;
  color: #cfcfcf;
  font-size: 12px;
  padding: 8px 0;
}
.topbar a { color: #fff; }
.topbar p { margin: 2px 10px 2px 0; }
.topbar .fa { margin-right: 5px; }

.mainnav {
  background-color: #270a70;
  box-shadow: #270a70 0 -1px 0 inset;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.mainnav .logo img { max-height: 62px; padding: 6px 0; }
.navlinks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.navlinks > li { position: relative; }
.navlinks > li > a,
.navlinks > li > span.dead {
  display: block;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 24px 14px;
  text-decoration: none;
  cursor: pointer;
}
.navlinks > li.current > a { color: #fdaa49; }
.navlinks > li > a:hover { color: #fdaa49; }
.navlinks span.dead { opacity: .55; cursor: default; }
.navlinks .sub {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 210px;
  background: #1d0754;
  list-style: none;
  margin: 0;
  padding: 6px 0;
}
.navlinks .has-sub:hover .sub { display: block; }
.navlinks .sub a,
.navlinks .sub span.dead {
  display: block;
  color: #fff;
  font-size: 13px;
  padding: 9px 16px;
  text-decoration: none;
}
.navlinks .sub a:hover { background: #9329c7; color: #fff; }
.nav-toggle {
  background: #9329c7;
  border: none;
  color: #fff;
  font-size: 20px;
  padding: 6px 12px;
  border-radius: 4px;
}

/* ---------- hero ---------- */
.hero { background-color: #9329c7; }
.hero video { width: 100%; display: block; max-height: 70vh; object-fit: cover; }

/* ---------- live banner ---------- */
.live-banner { background-color: #fdaa49; color: #fff; }
.live-banner h3 { font-size: 20px; text-align: center; margin: 0; }
.live-banner h5 { font-size: 16px; font-weight: 400; text-align: center; margin: 0; }
.live-banner .pad { padding: 25px 0; }
.btn-watch {
  display: inline-block;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  border: 2px solid #fff;
  background-color: #fdaa49;
  padding: 10px 24px;
  text-transform: uppercase;
  text-decoration: none;
}
.btn-watch:hover { background: #fff; color: #fdaa49; text-decoration: none; }

/* ---------- cards ---------- */
.cardband { background-color: #e7e5ef; padding-top: 30px; padding-bottom: 50px; }
.post {
  margin: 0 0 30px;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.post-preview img { width: 100%; height: 200px; object-fit: cover; display: block; }
.post-preview .ph {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 44px;
}
.ph-1 { background: #270a70; }
.ph-2 { background: #9329c7; }
.ph-3 { background: #192744; }
.post-content { padding: 30px 25px; }
.post-title { font-size: 19px; margin-bottom: 10px; }
.post-title a { color: #270a70; }
.btn-link-base { color: #9329c7; font-weight: 700; padding-left: 0; }

/* ---------- vision / mission ---------- */
.title2 { text-align: center; margin-bottom: 15px; }
.title2 h2 span { font-family: 'Montserrat', sans-serif; font-size: 34px; color: #270a70; }
.narrow { max-width: 860px; margin: 0 auto; text-align: center; font-size: 14px; }

/* ---------- parallax strip ---------- */
.parallax-strip {
  min-height: 180px;
  background: #270a70 url('https://e4r8y4v6.stackpathcdn.com/images/parallax1.jpg') center/cover;
}

/* ---------- service trio ---------- */
.title h2 { font-size: 22px; color: #270a70; margin: 25px 0 12px; text-align: center; }
.service-block { text-align: center; margin-bottom: 30px; }
.service-block img { max-width: 100%; height: auto; border-radius: 4px; }

/* ---------- get involved ---------- */
.getinvolved { padding-top: 70px; padding-bottom: 50px; }
.module-header h2 { letter-spacing: 5px; font-size: 34px; text-transform: uppercase; }
.module-header .lead { line-height: 1.8; font-weight: 400; font-size: 16px; }
.box-icon-left, .box-icon-right { padding: 5px 0 5px 25px; margin-bottom: 25px; }
.box-icon-right { text-align: right; padding: 5px 25px 5px 0; }
.icon-box-icon .fa {
  font-size: 30px;
  color: #9329c7;
  width: 56px; height: 56px;
  line-height: 56px;
  text-align: center;
  border: 2px solid #9329c7;
  border-radius: 50%;
  margin-bottom: 10px;
}
.box-icon-left h4, .box-icon-right h4 { font-size: 16px; }
.box-icon-left h4 span, .box-icon-right h4 span { color: #270a70; }

/* ---------- salvation banner ---------- */
.salvation {
  background: #192744;
  color: #fff;
  padding: 56px 0;
  text-align: center;
}
.salvation h2 { font-size: 25px; margin-bottom: 30px; text-transform: uppercase; }
.btn-white-big {
  display: inline-block;
  background: #fff;
  color: #270a70;
  font-weight: 800;
  padding: 15px 29px;
  border-radius: 30px;
  text-decoration: none;
}
.btn-white-big:hover { text-decoration: none; background: #fdaa49; color: #fff; }

/* ---------- page top (inner pages) ---------- */
.page-top {
  background: #270a70 url('https://e4r8y4v6.stackpathcdn.com/images/parallax1.jpg') center/cover;
  padding: 70px 0;
  text-align: center;
}
.page-top h1 { color: #fff; font-size: 40px; letter-spacing: 3px; margin: 0; }
.page-top h1 span { color: #fdaa49; }
.page-top p { color: #eee; margin: 10px 0 0; }

/* ---------- forms ---------- */
.theme-form label { font-weight: 700; font-size: 13px; margin-top: 10px; }
.theme-form .submit {
  background: #9329c7;
  color: #fff;
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  padding: 12px 34px;
  margin-top: 18px;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
}
.theme-form .submit:hover { background: #270a70; }
.form-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* ---------- live page ---------- */
.player-wrap { background: #000; border-radius: 6px; overflow: hidden; }
.meta { margin: 12px 0 25px; color: #777; font-size: 13px; }
.widget {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 18px;
  margin-bottom: 25px;
}
.widget-title h4 { font-size: 15px; color: #270a70; border-bottom: 2px solid #fdaa49; padding-bottom: 8px; }
#commentsHolder { list-style: none; padding: 0; margin: 0; }
#commentsHolder li { border-bottom: 1px solid #f0f0f0; padding: 10px 0; }
#commentsHolder h5 { font-size: 13px; color: #270a70; margin-bottom: 4px; }
#commentsHolder h5 span { color: #999; font-weight: 400; font-size: 12px; margin-left: 6px; }
#commentsHolder p { font-size: 13px; margin: 0; }
.comments-scroll { max-height: 400px; overflow-y: auto; }
.leave-comment h4 { font-size: 15px; color: #270a70; }
.bank-box { font-size: 13px; line-height: 1.9; }

/* ---------- footer ---------- */
.footer { background-color: #192744; color: #fff; padding: 50px 0 20px; margin-top: 40px; }
.footer .widget { background: transparent; border: none; padding: 0; }
.footer h6 { color: #fdaa49; font-size: 14px; margin-bottom: 15px; }
.footer p, .footer address { color: #fff; font-size: 13px; line-height: 1.8; }
.footer a { color: #fdaa49; }
.footer .dead-inline { color: #fdaa49; opacity: .6; }
.footer .copyright { border-top: 1px solid rgba(255,255,255,.15); margin-top: 25px; padding-top: 15px; }

/* ---------- responsive nav ---------- */
@media (max-width: 767px) {
  .navlinks { display: none; width: 100%; flex-direction: column; }
  .navlinks.open { display: flex; }
  .navlinks > li > a, .navlinks > li > span.dead { padding: 12px 4px; }
  .navlinks .sub { position: static; }
  .navlinks .has-sub:hover .sub { display: block; }
}