/* ==========================================================================
   GOSPEL LIGHT BAPTIST CHURCH — Shared Stylesheet
   Brand: Orange flame accent, charcoal type, alternating dark/light rhythm.
   ========================================================================== */

/* Google Barlow as a fallback for italics (scripture) and any other weights.
   @import must precede all other at-rules, so it stays at the very top. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,600;0,900;1,600;1,900&display=swap');

/* ---- Brand fonts (self-hosted) ---- */
/* Akira Expanded — display / wordmark, ALL CAPS only */
@font-face {
  font-family: 'Akira Expanded';
  src: url('fonts/AkiraExpanded.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/* Barlow Black (900) — headlines, subheads, emphasis */
@font-face {
  font-family: 'Barlow';
  src: url('fonts/Barlow-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* Barlow SemiBold (600) — body, captions */
@font-face {
  font-family: 'Barlow';
  src: url('fonts/Barlow-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---- Brand variables ---- */
:root {
  --orange:      #E05A1E; /* Accent Orange — signature accent (buttons, links, highlights) */
  --orange-dk:   #b8470f; /* darker hover state */
  --orange-flame:#DF6B47; /* Flame Orange — logo color, soft accents */
  --charcoal:    #373535;
  --slate:       #96989A;
  --black:       #000000;
  --white:       #FFFFFF;

  --font-display: 'Akira Expanded', 'Arial Black', sans-serif; /* display / wordmark, ALL CAPS */
  --font-head:    'Barlow', sans-serif; /* weight 900 = Barlow Black */
  --font-body:    'Barlow', sans-serif; /* weight 600 = Barlow SemiBold */

  --maxw: 1180px;
  --pad: clamp(1.25rem, 5vw, 4rem);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.6;
  font-size: 1.0625rem;
}
img { max-width: 100%; display: block; }
a { color: var(--orange); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Typography helpers ---- */
.display {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: 0;
}
/* Akira is a wide display face — keep long headlines from overflowing small screens */
.section-title, .hero h1 { letter-spacing: 0; overflow-wrap: break-word; word-break: break-word; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 900; line-height: 1.08; }
.scripture { font-style: italic; }
em, .scripture-ref { font-style: italic; }
.accent { color: var(--orange); }

/* ---- Layout ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
section { padding: clamp(3.5rem, 8vw, 7rem) 0; }

/* Alternating section backgrounds */
.sec-white    { background: var(--white);    color: var(--charcoal); }
.sec-charcoal { background: var(--charcoal);  color: var(--white); }
.sec-black    { background: var(--black);     color: var(--white); }
.sec-charcoal .accent, .sec-black .accent { color: var(--orange); }
.sec-charcoal h1, .sec-charcoal h2, .sec-charcoal h3,
.sec-black h1, .sec-black h2, .sec-black h3 { color: var(--white); }
.sec-charcoal .muted, .sec-black .muted { color: var(--slate); }
.muted { color: var(--slate); }

/* Faded watermark logo pattern behind dark sections */
.sec-charcoal.watermark, .sec-black.watermark { position: relative; overflow: hidden; }
.sec-charcoal.watermark::before, .sec-black.watermark::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 50% 40%, rgba(241,90,41,0.08) 0 2px, transparent 3px);
  background-size: 90px 90px;
  opacity: 0.5;
  pointer-events: none;
}
.sec-charcoal.watermark .wrap, .sec-black.watermark .wrap { position: relative; z-index: 1; }

/* ---- Section heading kit ---- */
.badge {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  color: var(--orange);
  border: 2px solid var(--orange);
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  margin-bottom: 1.5rem;
}
.section-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1.03;
  margin-bottom: 1.25rem;
}
.section-sub {
  font-family: var(--font-head);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--orange);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  margin-bottom: 2rem;
}
.lead { font-size: 1.15rem; max-width: 65ch; }

/* ---- Buttons (fully rounded pills) ---- */
.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  border: 2px solid var(--orange);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
  text-align: center;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary { background: var(--orange); color: var(--white); }
.btn-primary:hover { background: var(--orange-dk); border-color: var(--orange-dk); color: var(--white); }
.btn-outline { background: transparent; color: var(--orange); }
.btn-outline:hover { background: var(--orange); color: var(--white); }
.sec-charcoal .btn-outline, .sec-black .btn-outline { color: var(--white); border-color: var(--white); }
.sec-charcoal .btn-outline:hover, .sec-black .btn-outline:hover { background: var(--white); color: var(--charcoal); }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-bottom: 1px solid #ececec;
}
.header-inner {
  display: flex; align-items: center;
  gap: 1.75rem;
  padding: 0.85rem var(--pad);
  max-width: var(--maxw); margin: 0 auto;
}
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand img { height: 46px; width: auto; display: block; }
@media (max-width: 480px) { .brand img { height: 38px; } }
.site-footer .brand img { height: 58px; }

/* nav + phone pushed to the right, vertically centered with the logo */
.nav { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }
.nav a {
  font-family: var(--font-head);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--charcoal);
  white-space: nowrap;
  position: relative;
  padding: 0.3rem 0;
}
.nav a:not(.cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--orange); transform: scaleX(0); transform-origin: left;
  transition: transform 0.18s ease;
}
.nav a:not(.cta):hover { color: var(--orange); text-decoration: none; }
.nav a:not(.cta):hover::after { transform: scaleX(1); }
.nav a.cta { color: var(--white); background: var(--orange); padding: 0.6rem 1.2rem; border-radius: 999px; }
.nav a.cta:hover { background: var(--orange-dk); }
.header-phone {
  font-family: var(--font-head); font-weight: 900;
  color: var(--charcoal); white-space: nowrap; font-size: 0.95rem;
  flex: 0 0 auto;
}
.header-phone:hover { color: var(--orange); text-decoration: none; }

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; gap: 5px; padding: 6px;
}
.nav-toggle span { width: 26px; height: 3px; background: var(--charcoal); border-radius: 2px; }

@media (max-width: 1080px) {
  .nav-toggle { display: flex; order: 3; }
  .header-phone { margin-left: auto; order: 2; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; margin-left: 0;
    background: var(--white); border-bottom: 1px solid #ececec;
    padding: 0.5rem var(--pad) 1.25rem;
    display: none;
    box-shadow: 0 14px 24px rgba(0,0,0,0.08);
  }
  .nav.open { display: flex; }
  .nav a { padding: 0.85rem 0; border-bottom: 1px solid #f1f1f1; font-size: 0.95rem; }
  .nav a:not(.cta)::after { display: none; }
  .nav a.cta { text-align: center; margin-top: 0.85rem; padding: 0.8rem 1.2rem; }
}
@media (max-width: 520px) {
  .header-phone { display: none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  background: var(--charcoal);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.hero .hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.32;
}
.hero .wrap { position: relative; z-index: 2; padding-top: clamp(4rem, 10vw, 8rem); padding-bottom: clamp(4rem, 10vw, 8rem); }
.hero h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2.4rem, 8vw, 5.5rem);
  line-height: 1.0;
  max-width: 16ch;
}
.hero p.lead { margin-top: 1.5rem; color: #e7e7e7; }
.hero .btn-row { margin-top: 2.25rem; }

/* ---- Mission list ---- */
.mission-list { list-style: none; margin-top: 1.5rem; display: grid; gap: 1.1rem; max-width: 60ch; }
.mission-list li {
  padding-left: 2.25rem; position: relative; font-size: 1.1rem;
}
.mission-list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 20px; height: 3px; background: var(--orange);
}

/* ==========================================================================
   BUTTON ROWS / GRIDS
   ========================================================================== */
.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.card-grid {
  display: grid; gap: 1.75rem;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .card-grid { grid-template-columns: 1fr; } }

.card {
  background: var(--white);
  color: var(--charcoal);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #ececec;
  display: flex; flex-direction: column;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.12); }
.card img { width: 100%; height: 190px; object-fit: cover; background: #ddd; }
.card .card-body { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.card h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.15rem; margin-bottom: 0.6rem;
}
.card p { color: #555; margin-bottom: 1.2rem; flex: 1; }
.card .btn { align-self: flex-start; }

/* ==========================================================================
   PROSE (doctrine, gospel, ministries text)
   ========================================================================== */
.prose { max-width: 75ch; }
.prose p { margin-bottom: 1.4rem; font-size: 1.08rem; }
.doctrine-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  color: var(--charcoal);
  margin: 2.75rem 0 0.9rem;
  padding-top: 1.75rem;
  border-top: 3px solid var(--orange);
}
.doctrine-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.sec-charcoal .doctrine-title, .sec-black .doctrine-title { color: var(--white); }
.prose .scripture-ref { color: var(--orange); font-style: italic; }
.sec-charcoal .prose .scripture-ref, .sec-black .prose .scripture-ref { color: var(--orange); }

/* Distinctive / ministry blocks */
.block { max-width: 80ch; margin-bottom: 2.25rem; }
.block h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.3rem; margin-bottom: 0.6rem;
}
.block h3 .accent { color: var(--orange); }
.block p { font-size: 1.06rem; }
.block .scripture-ref { display: block; margin-top: 0.6rem; font-style: italic; color: var(--orange); font-size: 0.95rem; }

/* Acrostic capital letter for Baptist page */
.acrostic h3 .first { color: var(--orange); }

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee {
  background: var(--orange);
  color: var(--white);
  overflow: hidden;
  padding: 0.9rem 0;
}
/* Motion is driven by JavaScript (script.js), which recycles each word as
   it scrolls off the left. The moving element stays tiny and there is no
   keyframe "reset", so there is nothing for the browser to glitch on. */
.marquee .track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
  width: max-content;
  will-change: transform;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 0;
}
.marquee .track span { padding: 0 2rem; flex: 0 0 auto; }
@media (max-width: 600px) {
  .marquee .track { font-size: 0.8rem; }
  .marquee .track span { padding: 0 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee .track { animation: none; }
}

/* ==========================================================================
   SERVICE TIMES
   ========================================================================== */
.times-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 760px; }
@media (max-width: 600px) { .times-grid { grid-template-columns: 1fr; } }
.time-card {
  border: 2px solid var(--orange);
  border-radius: 18px;
  padding: 2rem 1.75rem;
  text-align: center;
}
.time-card .when { font-family: var(--font-display); text-transform: uppercase; color: var(--orange); font-size: 1.6rem; margin-top: 0.5rem; }
.time-card .label { font-family: var(--font-head); font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; }

/* ==========================================================================
   CONTACT / FORM / MAP
   ========================================================================== */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }

.form-field { margin-bottom: 1.1rem; }
.form-field label {
  display: block; font-family: var(--font-head); font-weight: 900;
  text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}
.form-field input, .form-field textarea {
  width: 100%; font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  padding: 0.85rem 1rem; border-radius: 12px; border: 2px solid #d9d9d9;
  background: var(--white); color: var(--charcoal);
}
.sec-charcoal .form-field input, .sec-charcoal .form-field textarea,
.sec-black .form-field input, .sec-black .form-field textarea {
  background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.25); color: var(--white);
}
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--orange); }
.form-field textarea { min-height: 130px; resize: vertical; }

.map-embed { width: 100%; border: 0; border-radius: 18px; min-height: 340px; }

/* ==========================================================================
   VIDEO / EMBED PLACEHOLDERS
   ========================================================================== */
.video-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #1c1b1b; border-radius: 18px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.12);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-frame .placeholder-note {
  color: var(--slate); font-family: var(--font-head); font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.08em; text-align: center; padding: 1rem;
}
.video-frame .play {
  width: 84px; height: 84px; border-radius: 50%; background: var(--orange);
  display: flex; align-items: center; justify-content: center;
}
.video-frame .play::after { content: ""; border-left: 26px solid var(--white); border-top: 16px solid transparent; border-bottom: 16px solid transparent; margin-left: 6px; }

.embed-placeholder {
  border: 2px dashed var(--orange); border-radius: 18px;
  padding: 3rem 1.5rem; text-align: center; color: var(--slate);
  font-family: var(--font-head); font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em;
}

/* ==========================================================================
   FACEBOOK / FOLLOW
   ========================================================================== */
.follow { text-align: center; }
.social-row { display: flex; gap: 1rem; justify-content: center; margin-top: 1.5rem; }
.social-row a {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--orange); color: var(--white);
}
.social-row a:hover { background: var(--orange-dk); text-decoration: none; }
.social-row svg { width: 26px; height: 26px; fill: currentColor; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--black); color: var(--slate); padding: 3.5rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; } }
.site-footer .brand .wordmark { color: var(--white); }
.site-footer h4 { color: var(--white); font-family: var(--font-display); text-transform: uppercase; font-size: 0.95rem; margin-bottom: 1rem; }
.site-footer a { color: var(--slate); }
.site-footer a:hover { color: var(--orange); }
.site-footer .foot-social { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.site-footer .foot-social a {
  width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center; color: var(--white);
}
.site-footer .foot-social a:hover { background: var(--orange); }
.site-footer .foot-social svg { width: 20px; height: 20px; fill: currentColor; }
.copyright {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.85rem; text-align: center;
}

/* ---- utility ---- */
.center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.spaced { margin-top: 1.25rem; }