/*
Theme Name: Ellis Memorial — Haven of Hope
Theme URI: https://www.emcogic.org/
Author: Ellis Memorial Church of God in Christ
Description: A responsive custom WordPress theme for Ellis Memorial Church of God in Christ, inspired by contemporary ministry websites with prominent worship, events, leadership, giving, and ministry sections.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ellis-memorial-haven
Tags: custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, wide-blocks, full-site-width
*/

:root {
  --em-primary: #102b56;
  --em-primary-dark: #081a36;
  --em-accent: #d2ad5c;
  --em-ink: #10151d;
  --em-muted: #667085;
  --em-paper: #ffffff;
  --em-soft: #f5f6f8;
  --em-border: #e5e7eb;
  --em-radius: 18px;
  --em-shadow: 0 18px 45px rgba(8, 26, 54, .12);
  --em-container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--em-ink);
  background: var(--em-paper);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--em-primary); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--em-primary-dark); }
img { max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }

.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.screen-reader-text:focus { position: fixed; top: 12px; left: 12px; width: auto; height: auto; padding: 12px 16px; background: #fff; z-index: 100000; clip: auto; }

.em-container { width: min(calc(100% - 40px), var(--em-container)); margin-inline: auto; }
.em-section { padding: 86px 0; }
.em-section--soft { background: var(--em-soft); }
.em-section--dark { background: var(--em-primary-dark); color: #fff; }
.em-eyebrow { margin: 0 0 10px; color: var(--em-accent); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; font-size: .78rem; }
.em-section-title { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.08; }
.em-section-copy { max-width: 720px; color: var(--em-muted); font-size: 1.08rem; }
.em-section--dark .em-section-copy { color: rgba(255,255,255,.78); }

.em-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 1px solid transparent; background: var(--em-accent); color: #111; font-weight: 800; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.em-btn:hover { transform: translateY(-1px); color: #111; box-shadow: 0 12px 28px rgba(0,0,0,.15); }
.em-btn--light { background: #fff; color: var(--em-primary-dark); }
.em-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.em-btn--ghost:hover { color: #fff; background: rgba(255,255,255,.1); }

/* Header */
.em-topbar { background: var(--em-primary-dark); color: rgba(255,255,255,.9); font-size: .86rem; }
.em-topbar .em-container { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.em-topbar a { color: #fff; text-decoration: none; }
.em-header { position: sticky; top: 0; z-index: 999; background: rgba(255,255,255,.96); border-bottom: 1px solid rgba(0,0,0,.06); backdrop-filter: blur(14px); }
.admin-bar .em-header { top: 32px; }
.em-header__inner { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.em-brand { display: inline-flex; align-items: center; gap: 14px; color: var(--em-primary-dark); text-decoration: none; min-width: 0; }
.em-brand .custom-logo { max-height: 68px; width: auto; }
.em-brand__text { display: flex; flex-direction: column; min-width: 0; }
.em-brand__name { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 1.15rem; line-height: 1.1; }
.em-brand__tag { color: var(--em-muted); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.em-menu-toggle { display: none; border: 0; background: var(--em-primary); color: #fff; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.em-nav ul { display: flex; align-items: center; gap: 24px; margin: 0; padding: 0; list-style: none; }
.em-nav li { position: relative; }
.em-nav a { display: block; color: var(--em-ink); text-decoration: none; font-weight: 700; font-size: .95rem; padding: 10px 0; }
.em-nav a:hover, .em-nav .current-menu-item > a, .em-nav .current_page_item > a { color: var(--em-primary); }
.em-nav .sub-menu { display: none; position: absolute; top: 100%; left: -18px; min-width: 230px; padding: 12px 0; background: #fff; border: 1px solid var(--em-border); border-radius: 14px; box-shadow: var(--em-shadow); }
.em-nav li:hover > .sub-menu, .em-nav li:focus-within > .sub-menu { display: block; }
.em-nav .sub-menu a { padding: 9px 18px; }

/* Hero */
.em-hero { position: relative; min-height: 680px; display: grid; align-items: end; overflow: hidden; background: linear-gradient(135deg, var(--em-primary-dark), var(--em-primary)); color: #fff; }
.em-hero__media { position: absolute; inset: 0; background-size: cover; background-position: center; }
.em-hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,16,35,.92) 0%, rgba(5,16,35,.68) 48%, rgba(5,16,35,.26) 100%), linear-gradient(0deg, rgba(5,16,35,.58), transparent 50%); }
.em-hero__inner { position: relative; z-index: 2; padding: 120px 0 92px; }
.em-hero__content { max-width: 790px; }
.em-hero h1 { margin: 0 0 18px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(3rem, 8vw, 6.4rem); line-height: .95; letter-spacing: -.035em; }
.em-hero p { max-width: 650px; margin: 0 0 28px; font-size: clamp(1.05rem, 2vw, 1.3rem); color: rgba(255,255,255,.88); }
.em-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.em-hero__kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; color: var(--em-accent); }

/* CTA cards */
.em-quicklinks { position: relative; z-index: 3; margin-top: -46px; }
.em-quicklinks__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.em-quickcard { min-height: 220px; padding: 32px; border-radius: var(--em-radius); background: #fff; box-shadow: var(--em-shadow); text-decoration: none; color: inherit; border-top: 5px solid var(--em-accent); transition: transform .2s ease; }
.em-quickcard:hover { transform: translateY(-4px); color: inherit; }
.em-quickcard h2 { margin: 0 0 10px; font-family: Georgia, 'Times New Roman', serif; font-size: 1.7rem; }
.em-quickcard p { margin: 0 0 16px; color: var(--em-muted); }
.em-quickcard strong { color: var(--em-primary); }

/* Cards */
.em-grid { display: grid; gap: 24px; }
.em-grid--3 { grid-template-columns: repeat(3,1fr); }
.em-card { overflow: hidden; background: #fff; border: 1px solid var(--em-border); border-radius: var(--em-radius); box-shadow: 0 10px 30px rgba(16,43,86,.06); }
.em-card__image { aspect-ratio: 16/10; background: linear-gradient(135deg, #dfe5ef, #f7f8fa); overflow: hidden; }
.em-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.em-card:hover .em-card__image img { transform: scale(1.03); }
.em-card__body { padding: 24px; }
.em-card__meta { color: var(--em-primary); font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; }
.em-card h3 { margin: 7px 0 10px; font-family: Georgia, 'Times New Roman', serif; font-size: 1.55rem; line-height: 1.2; }
.em-card h3 a { color: inherit; text-decoration: none; }
.em-card p { margin: 0; color: var(--em-muted); }
.em-card__link { display: inline-block; margin-top: 16px; font-weight: 800; }

/* Leader */
.em-leader { display: grid; grid-template-columns: minmax(320px,.9fr) minmax(0,1.1fr); align-items: stretch; min-height: 620px; overflow: hidden; border-radius: 28px; background: var(--em-primary-dark); color: #fff; box-shadow: var(--em-shadow); }
.em-leader__photo { min-height: 560px; background: #d8dde6; }
.em-leader__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.em-leader__content { display: flex; flex-direction: column; justify-content: center; padding: clamp(42px, 7vw, 86px); }
.em-leader__content h2 { margin: 0 0 6px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.3rem,4vw,4rem); line-height: 1.04; }
.em-leader__title { margin: 0 0 24px; color: var(--em-accent); font-weight: 800; }
.em-leader__content p { color: rgba(255,255,255,.78); }

/* Give */
.em-give { position: relative; overflow: hidden; border-radius: 28px; padding: clamp(48px,8vw,90px); background: linear-gradient(135deg, var(--em-primary), var(--em-primary-dark)); color: #fff; }
.em-give::after { content: ''; position: absolute; width: 420px; height: 420px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; right: -100px; top: -180px; box-shadow: 0 0 0 55px rgba(255,255,255,.025), 0 0 0 110px rgba(255,255,255,.02); }
.em-give__content { position: relative; z-index: 2; max-width: 720px; }
.em-give h2 { margin: 0 0 14px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.4rem,5vw,4.4rem); }
.em-give p { color: rgba(255,255,255,.82); font-size: 1.08rem; }

/* Content */
.em-page-hero { padding: 86px 0 52px; background: var(--em-primary-dark); color: #fff; }
.em-page-hero h1 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.5rem,6vw,4.8rem); }
.em-content { padding: 64px 0 90px; }
.em-prose { max-width: 860px; font-size: 1.04rem; }
.em-prose h2, .em-prose h3 { font-family: Georgia, 'Times New Roman', serif; line-height: 1.15; }
.em-prose img { border-radius: 14px; }
.em-post-meta { color: var(--em-muted); margin-top: 10px; }

/* Footer */
.em-footer { background: #07162d; color: #fff; padding: 72px 0 26px; }
.em-footer__grid { display: grid; grid-template-columns: 1.3fr .8fr .8fr 1fr; gap: 34px; }
.em-footer h3 { margin: 0 0 14px; font-family: Georgia, 'Times New Roman', serif; font-size: 1.2rem; }
.em-footer p, .em-footer li, .em-footer a { color: rgba(255,255,255,.72); }
.em-footer a { text-decoration: none; }
.em-footer a:hover { color: #fff; }
.em-footer ul { list-style: none; padding: 0; margin: 0; }
.em-footer li { margin: 8px 0; }
.em-footer__bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 52px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: .86rem; color: rgba(255,255,255,.55); }

/* WordPress */
.alignwide { width: min(1180px, calc(100vw - 40px)); max-width: none; margin-left: 50%; transform: translateX(-50%); }
.alignfull { width: 100vw; max-width: none; margin-left: 50%; transform: translateX(-50%); }
.wp-caption, .gallery-caption { max-width: 100%; }
.bypostauthor { font-weight: inherit; }
.sticky { outline: 1px solid var(--em-accent); }

@media (max-width: 980px) {
  .em-menu-toggle { display: inline-flex; }
  .em-nav { display: none; position: absolute; top: 100%; left: 20px; right: 20px; background: #fff; border: 1px solid var(--em-border); border-radius: 16px; padding: 14px 20px; box-shadow: var(--em-shadow); }
  .em-nav.is-open { display: block; }
  .em-nav ul { display: block; }
  .em-nav .sub-menu { display: block; position: static; box-shadow: none; border: 0; padding: 0 0 0 18px; }
  .em-quicklinks__grid, .em-grid--3 { grid-template-columns: 1fr 1fr; }
  .em-leader { grid-template-columns: 1fr; }
  .em-leader__photo { min-height: 500px; }
  .em-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .admin-bar .em-header { top: 46px; }
  .em-topbar { display: none; }
  .em-container { width: min(calc(100% - 28px), var(--em-container)); }
  .em-header__inner { min-height: 74px; }
  .em-brand__tag { display: none; }
  .em-hero { min-height: 610px; }
  .em-hero__inner { padding: 100px 0 76px; }
  .em-quicklinks { margin-top: -28px; }
  .em-quicklinks__grid, .em-grid--3, .em-footer__grid { grid-template-columns: 1fr; }
  .em-section { padding: 64px 0; }
  .em-leader__photo { min-height: 390px; }
  .em-leader__content { padding: 38px 28px; }
  .em-footer__bottom { flex-direction: column; }
}