/*
Theme Name: Shiloh A.M.E. Zion Preview
Theme URI: https://example.invalid/shiloh
Author: Shiloh Website Project
Description: Prototype WordPress theme based on the approved Shiloh A.M.E. Zion Church design direction. Intended for private staging and design review.
Version: 0.5.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: shiloh-preview
*/

:root {
  --shiloh-charcoal: #17151a;
  --shiloh-charcoal-2: #24202a;
  --shiloh-plum: #6d304f;
  --shiloh-plum-deep: #4a263a;
  --shiloh-burnt: #c46f3d;
  --shiloh-gold: #d8912f;
  --shiloh-cream: #f8f2e9;
  --shiloh-white: #fffdf9;
  --shiloh-ink: #2d2628;
  --shiloh-muted: #6d6562;
  --shiloh-border: rgba(74,38,58,.17);
  --shiloh-radius: 14px;
  --shiloh-shadow: 0 12px 32px rgba(30,21,27,.10);
  --shiloh-max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--shiloh-ink); background: var(--shiloh-cream); font-family: Arial, Helvetica, sans-serif; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
.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; }
.shiloh-container { width: min(var(--shiloh-max), calc(100% - 40px)); margin-inline: auto; }
.shiloh-serif { font-family: Georgia, 'Times New Roman', serif; }
.shiloh-eyebrow { color: var(--shiloh-gold); font-weight: 800; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 8px; }
.shiloh-section { padding: 58px 0; }
.shiloh-section-title { font: 400 clamp(2rem, 4vw, 3.1rem)/1.05 Georgia, 'Times New Roman', serif; margin: 0 0 18px; color: var(--shiloh-charcoal); }
.shiloh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 22px; border-radius: 8px; border: 1px solid transparent; font-weight: 700; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.shiloh-btn:hover { transform: translateY(-1px); }
.shiloh-btn-primary { background: linear-gradient(135deg, var(--shiloh-burnt), var(--shiloh-gold)); color: #fff; box-shadow: 0 8px 20px rgba(196,111,61,.24); }
.shiloh-btn-outline { color: #fff; border-color: rgba(255,255,255,.72); background: rgba(23,21,26,.18); backdrop-filter: blur(4px); }
.shiloh-btn-light { color: var(--shiloh-plum-deep); border-color: var(--shiloh-plum); background: transparent; }

/* Header */
.shiloh-header { position:absolute; inset:0 0 auto 0; z-index:20; color:#fff; }
.shiloh-nav { height: 92px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.shiloh-logo img { width: 124px; max-height: 105px; object-fit:contain; }
.shiloh-nav-links { display:flex; align-items:center; gap:32px; font-family: Georgia, 'Times New Roman', serif; font-size:1rem; }
.shiloh-nav-links a { opacity:.94; }
.shiloh-nav-links a:hover { color:#f0ad46; }
.shiloh-menu-toggle { display:none; border:1px solid rgba(255,255,255,.65); color:#fff; background:rgba(0,0,0,.18); border-radius:7px; padding:9px 11px; font-size:1.05rem; }

/* Hero */
.shiloh-hero { min-height: 560px; color:#fff; position:relative; background: var(--shiloh-charcoal); overflow:hidden; display:flex; align-items:center; }
.shiloh-hero:before { content:''; position:absolute; inset:0; background-image: linear-gradient(90deg, rgba(23,21,26,.98) 0%, rgba(63,37,47,.92) 34%, rgba(23,21,26,.42) 69%, rgba(23,21,26,.16) 100%), var(--hero-image); background-size:cover; background-position:center right; }
.shiloh-hero:after { content:''; position:absolute; inset:0; background: radial-gradient(circle at 22% 45%, rgba(109,48,79,.24), transparent 40%); pointer-events:none; }
.shiloh-hero-content { position:relative; z-index:2; padding-top:100px; width:min(610px,100%); }
.shiloh-hero h1 { font:400 clamp(3.4rem, 7vw, 6rem)/.92 Georgia, 'Times New Roman', serif; margin:0; letter-spacing:-.035em; }
.shiloh-hero-title-primary { color:#fff; }
.shiloh-hero-title-secondary { color:#e0a03f; margin-left:.18em; }
.shiloh-tagline { font:italic 400 1.06rem/1.5 Georgia, 'Times New Roman', serif; margin:22px 0 16px; color:#f4e9e1; }
.shiloh-location { display:flex; gap:9px; align-items:center; margin-bottom:22px; color:#f8f1ec; }
.shiloh-hero-meta { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.shiloh-hero-actions { display:flex; gap:14px; flex-wrap:wrap; }



/* Desktop-only v0.5 refinements. Mobile behavior remains unchanged pending review. */
@media (min-width: 901px) {
  .shiloh-nav {
    height: 68px;
    justify-content: flex-start;
    gap: 18px;
  }
  .shiloh-nav-links {
    flex: 1 1 auto;
  }
  .shiloh-hero {
    height: 200px;
    min-height: 200px;
    align-items: flex-start;
  }
  .shiloh-hero:before {
    /* Keep the worshipper's face clear of the title by concentrating the image on the right. */
    background-size: cover, auto 290%;
    background-position: center, right 34%;
    background-repeat: no-repeat;
  }
  .shiloh-hero-content {
    padding-top: 58px;
    padding-bottom: 10px;
    width: min(1040px, 100%);
  }
  .shiloh-hero h1 {
    font-size: clamp(2.55rem, 4.2vw, 4.15rem);
    line-height: .98;
    white-space: nowrap;
  }
  .shiloh-tagline {
    margin: 6px 0 8px;
    font-size: .98rem;
    line-height: 1.3;
  }
  .shiloh-hero-meta {
    flex-wrap: nowrap;
    gap: 14px;
    align-items: center;
  }
  .shiloh-location {
    margin-bottom: 0;
    font-size: .94rem;
    white-space: nowrap;
  }
  .shiloh-hero-actions {
    flex-wrap: nowrap;
    gap: 10px;
  }
  .shiloh-btn {
    min-height: 38px;
    padding: 0 16px;
  }

  /* Tighten only the second and third homepage rails. */
  .shiloh-feature-section {
    padding-top: 36px;
    padding-bottom: 36px;
  }
  .shiloh-events {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .shiloh-events .shiloh-center-head {
    margin-bottom: 18px;
  }
}

/* Pastor / latest message */
.shiloh-feature-grid { display:grid; grid-template-columns: 1.05fr 1fr; gap:36px; align-items:stretch; }
.shiloh-pastor { display:grid; grid-template-columns: 210px 1fr; gap:28px; align-items:center; padding-right:28px; border-right:1px solid var(--shiloh-border); }
.shiloh-pastor-photo { width:100%; aspect-ratio: .78; object-fit:cover; border-radius:12px; box-shadow:var(--shiloh-shadow); object-position:center 22%; }
.shiloh-pastor h2 { font:400 2.1rem/1.1 Georgia, 'Times New Roman', serif; margin:0 0 10px; }
.shiloh-pastor h2 em { display:block; color:var(--shiloh-plum); font-weight:400; }
.shiloh-pastor-copy { color:#4f4847; font-size:.96rem; }
.shiloh-pastor-name { margin:18px 0 4px; color:var(--shiloh-plum); font:italic 400 1.25rem Georgia, 'Times New Roman', serif; }
.shiloh-pastor-title { font-size:.73rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; }
.shiloh-message-card { background:#fff; border:1px solid var(--shiloh-border); border-radius:var(--shiloh-radius); overflow:hidden; box-shadow:var(--shiloh-shadow); }
.shiloh-message-thumb { position:relative; aspect-ratio:16/9; background: linear-gradient(145deg,#342a26,#8c542d); display:grid; place-items:center; overflow:hidden; }
.shiloh-message-thumb img { width:100%; height:100%; object-fit:cover; opacity:.72; }
.shiloh-play { position:absolute; width:76px; height:76px; border:3px solid rgba(255,255,255,.9); border-radius:50%; display:grid; place-items:center; background:rgba(23,21,26,.32); color:#fff; font-size:1.8rem; padding-left:4px; }
.shiloh-message-body { padding:18px 20px 20px; }
.shiloh-message-body h3 { font:400 1.7rem/1.1 Georgia, 'Times New Roman', serif; margin:0 0 6px; }

/* Events */
.shiloh-events { background:#fffaf4; border-top:1px solid rgba(109,48,79,.08); border-bottom:1px solid rgba(109,48,79,.08); }
.shiloh-center-head { text-align:center; margin-bottom:28px; }
.shiloh-events-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.shiloh-event { background:#fff; border:1px solid var(--shiloh-border); border-radius:12px; padding:22px; display:grid; grid-template-columns:78px 1fr; gap:18px; box-shadow:0 7px 20px rgba(55,35,44,.06); }
.shiloh-event-date { border-right:1px solid var(--shiloh-border); text-align:center; padding-right:14px; }
.shiloh-event-month { color:var(--shiloh-plum); font-size:.73rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.shiloh-event-day { font:400 2.4rem/1 Georgia, serif; color:var(--shiloh-charcoal); }
.shiloh-event h3 { margin:0 0 5px; font:400 1.18rem/1.2 Georgia,serif; }
.shiloh-event p { font-size:.86rem; margin:0; color:var(--shiloh-muted); }

/* Connect */
.shiloh-connect { color:#fff; background:linear-gradient(100deg,#5a2945 0%,#7e3a50 47%,#d17834 100%); }
.shiloh-connect .shiloh-section-title { color:#fff; text-align:center; font-size:1.3rem; letter-spacing:.16em; text-transform:uppercase; }
.shiloh-connect-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.shiloh-connect-card { background:rgba(255,253,249,.96); color:var(--shiloh-ink); border-radius:11px; padding:24px 20px; min-height:185px; }
.shiloh-icon { width:52px; height:52px; border:1.5px solid var(--shiloh-gold); border-radius:50%; display:grid; place-items:center; color:var(--shiloh-burnt); font-size:1.35rem; margin-bottom:14px; }
.shiloh-connect-card h3 { font:400 1.1rem Georgia,serif; letter-spacing:.05em; text-transform:uppercase; margin:0 0 8px; }
.shiloh-connect-card p { font-size:.86rem; color:var(--shiloh-muted); }
.shiloh-text-link { color:var(--shiloh-plum); font-weight:700; font-size:.86rem; }

/* Footer */
.shiloh-footer { color:#fff; background:linear-gradient(120deg,#14131a,#20212a); padding:38px 0 0; }
.shiloh-footer-grid { display:grid; grid-template-columns:1.35fr 1.1fr 1fr .7fr; gap:34px; align-items:start; }
.shiloh-footer h3 { font:400 1rem Georgia,serif; letter-spacing:.08em; text-transform:uppercase; margin:0 0 14px; }
.shiloh-footer p, .shiloh-footer li { color:#e2dedc; font-size:.9rem; }
.shiloh-footer ul { list-style:none; padding:0; margin:0; }
.shiloh-footer li { margin-bottom:8px; }
.shiloh-footer-logo img { width:145px; }
.shiloh-copyright { margin-top:30px; padding:16px 0; border-top:1px solid rgba(255,255,255,.12); text-align:center; color:#cfcbca; font-size:.76rem; }

/* Interior */
.shiloh-page-hero { padding:160px 0 72px; background:linear-gradient(120deg,var(--shiloh-charcoal),var(--shiloh-plum-deep)); color:#fff; }
.shiloh-page-hero h1 { font:400 clamp(2.8rem,6vw,5rem)/1 Georgia,serif; margin:0; }
.shiloh-content { padding:58px 0; min-height:45vh; }
.shiloh-content .entry-content { max-width:820px; }

@media (max-width: 900px) {
  .shiloh-nav-links { display:none; position:absolute; top:82px; left:20px; right:20px; background:rgba(23,21,26,.98); border:1px solid rgba(255,255,255,.15); border-radius:12px; padding:18px; flex-direction:column; align-items:stretch; gap:0; }
  .shiloh-nav-links.is-open { display:flex; }
  .shiloh-nav-links a { padding:11px 8px; }
  .shiloh-menu-toggle { display:block; }
  .shiloh-nav-give { display:none; }
  .shiloh-feature-grid { grid-template-columns:1fr; }
  .shiloh-pastor { border-right:0; border-bottom:1px solid var(--shiloh-border); padding:0 0 34px; }
  .shiloh-events-grid { grid-template-columns:1fr; }
  .shiloh-connect-grid { grid-template-columns:repeat(2,1fr); }
  .shiloh-footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 620px) {
  .shiloh-container { width:min(100% - 28px, var(--shiloh-max)); }
  .shiloh-nav { height:76px; }
  .shiloh-logo img { width:96px; }
  .shiloh-hero { min-height:640px; align-items:flex-end; }
  .shiloh-hero:before { background-image:linear-gradient(0deg, rgba(23,21,26,.98) 8%, rgba(23,21,26,.83) 50%, rgba(23,21,26,.35) 100%), var(--hero-image); background-position:62% center; }
  .shiloh-hero-content { padding:128px 0 58px; }
  .shiloh-hero h1 { font-size:3.25rem; }
  .shiloh-hero-title-primary, .shiloh-hero-title-secondary { display:block; }
  .shiloh-hero-title-secondary { margin-left:0; font-size:.58em; margin-top:10px; }
  .shiloh-hero-meta { display:block; }
  .shiloh-location { margin-bottom:22px; }
  .shiloh-pastor { grid-template-columns:1fr; }
  .shiloh-pastor-photo { max-height:460px; object-position:center 20%; }
  .shiloh-connect-grid, .shiloh-footer-grid { grid-template-columns:1fr; }
  .shiloh-section { padding:44px 0; }
}