/* ===================================================================
   New Hope United Methodist Church - Site Stylesheet
   -------------------------------------------------------------------
   VOLUNTEER NOTE:
   You almost never need to edit this file to change words on the site.
   All of the words live in the .html files.

   The only part of this file most people will ever want to touch is
   the "COLORS AND FONTS" block directly below. Change a color code
   there and it updates everywhere, on every page.
   =================================================================== */

/* ===================================================================
   1. COLORS AND FONTS (safe to edit)
   =================================================================== */
:root {
  /* Traditional Methodist cross-and-flame colors */
  --color-bg:          #fdfaf3; /* cream page background */
  --color-surface:     #ffffff; /* white cards and boxes */
  --color-surface-alt: #f4eee1; /* soft tan band */
  --color-ink:         #211f1c; /* main body text */
  --color-ink-soft:    #56504a; /* quieter text */
  --color-primary:     #1b3a6b; /* deep blue */
  --color-primary-dark:#132a4e; /* deep blue, darker */
  --color-primary-soft:#e7edf6; /* very light blue */
  --color-accent:      #bc3f16; /* warm flame red-orange */
  --color-accent-dark: #93300f;
  --color-accent-soft: #fbe9e0;
  --color-border:      #e2d9c6;
  --color-focus:       #bc3f16;

  /* Fonts (loaded from Google Fonts in the head of each page) */
  --font-head: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --font-accent: "Caveat", "Segoe Script", "Brush Script MT", cursive;

  /* Sizing */
  --wrap-max: 1120px;
  --radius: 10px;
  --shadow: 0 2px 10px rgba(33, 31, 28, 0.08);
  --shadow-lift: 0 6px 22px rgba(33, 31, 28, 0.12);
}

/* ===================================================================
   2. BASE (layout code, please leave alone)
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--color-primary-dark);
  line-height: 1.25;
  margin: 0 0 0.5em;
  font-weight: 600;
}
h1 { font-size: clamp(2rem, 4.5vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); }
h3 { font-size: 1.22rem; }
h4 { font-size: 1.05rem; }

p, ul, ol { margin: 0 0 1.1em; }

a { color: var(--color-primary); }
a:hover { color: var(--color-accent-dark); }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 20px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary-dark);
  color: #ffffff;
  padding: 12px 18px;
  z-index: 200;
}
.skip-link:focus { left: 12px; top: 12px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===================================================================
   3. HEADER AND NAVIGATION
   =================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-surface);
  border-bottom: 3px solid var(--color-primary);
  box-shadow: var(--shadow);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 78px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--color-primary-dark);
  padding: 10px 0;
}
.brand-mark { flex: 0 0 auto; display: block; }
.brand-name {
  display: block;
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
}
.brand-sub {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-ink-soft);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 14px;
  background: var(--color-primary);
  color: #ffffff;
  border: 0;
  border-radius: var(--radius);
  font: 600 1rem/1 var(--font-body);
  padding: 13px 16px;
  cursor: pointer;
}
.nav-toggle:hover { background: var(--color-primary-dark); }
.nav-toggle-bars {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background: #ffffff;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: #ffffff;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after  { top: 6px; }

.primary-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 0;
}
.primary-nav a {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--color-ink);
  font-weight: 600;
  font-size: 0.97rem;
  text-decoration: none;
}
.primary-nav a:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.primary-nav a.is-current {
  color: var(--color-accent-dark);
  box-shadow: inset 0 -3px 0 var(--color-accent);
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    display: none;
    width: 100%;
    padding-bottom: 12px;
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; gap: 0; }
  .primary-nav a {
    padding: 14px 10px;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
  }
  .primary-nav a.is-current { box-shadow: inset 4px 0 0 var(--color-accent); }
}

/* ===================================================================
   4. HERO AND PAGE HEADERS
   =================================================================== */
.hero {
  background: linear-gradient(160deg, #132a4e 0%, #1b3a6b 62%, #2a5490 100%);
  color: #ffffff;
  padding: 58px 0 52px;
}
.hero h1 { color: #ffffff; margin-bottom: 0.35em; }
.hero p { color: #e9eef7; font-size: 1.12rem; max-width: 48ch; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 38px;
  align-items: center;
}
.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  font-weight: 600;
  color: #f6cbb8;
  margin-bottom: 10px;
}
.hero-figure img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; gap: 26px; }
}

.page-head {
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  padding: 40px 0 34px;
}
.page-head p {
  color: var(--color-ink-soft);
  max-width: 62ch;
  margin-bottom: 0;
}

/* ===================================================================
   5. SECTIONS, CARDS, GRIDS
   =================================================================== */
.section { padding: 52px 0; }
.section--alt { background: var(--color-surface-alt); }
.section--tight { padding: 34px 0; }

.prose { max-width: 68ch; }
.prose h2 { margin-top: 1.4em; }
.prose h3 { margin-top: 1.5em; }

.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px 22px 18px;
  box-shadow: var(--shadow);
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card--accent { border-top: 4px solid var(--color-accent); }
.card--blue { border-top: 4px solid var(--color-primary); }

.figure { margin: 0; }
.figure img {
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  width: 100%;
}
.figure figcaption {
  font-size: 0.88rem;
  color: var(--color-ink-soft);
  padding-top: 8px;
}

/* ===================================================================
   6. BUTTONS
   =================================================================== */
.btn {
  display: inline-block;
  font: 600 1.02rem/1 var(--font-body);
  text-decoration: none;
  padding: 15px 26px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
}
.btn--primary { background: var(--color-accent); color: #ffffff; }
.btn--primary:hover { background: var(--color-accent-dark); color: #ffffff; }
.btn--secondary {
  background: transparent;
  color: var(--color-primary-dark);
  border-color: var(--color-primary);
}
.btn--secondary:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.btn--on-dark { background: #ffffff; color: var(--color-primary-dark); }
.btn--on-dark:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* ===================================================================
   7. INFO STRIP (service times, address, phone)
   =================================================================== */
.info-strip {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 22px 0;
}
.info-strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  text-align: center;
}
.info-strip h2 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent-dark);
  margin-bottom: 4px;
}
.info-strip p { margin: 0; font-size: 1.02rem; }
@media (max-width: 700px) { .info-strip-grid { grid-template-columns: 1fr; } }

/* ===================================================================
   8. LISTS, NOTES, PLACEHOLDER FLAGS
   =================================================================== */
.list-plain { list-style: none; padding: 0; }
.list-plain li { padding: 6px 0; border-bottom: 1px solid var(--color-border); }
.list-plain li:last-child { border-bottom: 0; }

.note {
  background: var(--color-accent-soft);
  border-left: 5px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 18px;
  margin: 0 0 22px;
}
.note p:last-child { margin-bottom: 0; }
.note strong { color: var(--color-accent-dark); }

/* Yellow flag for anything the church still needs to confirm.
   Open any .html file and search for the word "CONFIRM" or "REPLACE"
   to find every one of them. */
.todo {
  background: #fff3cd;
  border: 1px dashed #b98900;
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 0.92em;
  font-weight: 600;
  color: #6b4f00;
}

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px;
  text-align: center;
}
.stat-num {
  display: block;
  font-family: var(--font-head);
  font-size: 2rem;
  color: var(--color-primary);
  font-weight: 700;
}
.stat-label { font-size: 0.92rem; color: var(--color-ink-soft); }
@media (max-width: 760px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===================================================================
   8b. CHURCH TOUCHES
   Scripture band, the bulletin board, and the handwritten signature.
   =================================================================== */

/* Handwritten line used above a few headings, like "A word from our pastor" */
.script-line {
  font-family: var(--font-accent);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--color-accent-dark);
  margin: 0 0 2px;
}

/* Pastor's signature at the end of the welcome note */
.signature {
  font-family: var(--font-accent);
  font-size: 2.1rem;
  line-height: 1.1;
  color: var(--color-primary);
  margin: 18px 0 0;
}
.signature span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--color-ink-soft);
  letter-spacing: 0.02em;
}

/* Scripture verse band. To change the verse, edit the words in the
   <blockquote> and the reference in the <cite> on the home page. */
.verse-band {
  background: var(--color-primary-dark);
  color: #f1e8d9;
  padding: 46px 0;
  text-align: center;
}
.verse-band blockquote {
  margin: 0 auto;
  max-width: 52ch;
  font-family: var(--font-head);
  font-style: italic;
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  line-height: 1.55;
}
.verse-band cite {
  display: block;
  margin-top: 16px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f6cbb8;
}

/* The bulletin board. Styled like a paper notice pinned up in the hall. */
.bulletin {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 9px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 22px 26px 18px;
  box-shadow: var(--shadow);
}
.bulletin h3 { margin-top: 0; }
.bulletin ul { list-style: none; padding: 0; margin: 0; }
.bulletin li {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--color-border);
}
.bulletin li:last-child { border-bottom: 0; }
.bulletin .when {
  font-weight: 700;
  color: var(--color-primary);
}
.bulletin-foot {
  margin: 16px 0 0;
  font-size: 0.92rem;
  color: var(--color-ink-soft);
}
@media (max-width: 620px) {
  .bulletin li { grid-template-columns: 1fr; gap: 2px; }
}

/* ===================================================================
   9. MAP EMBED
   =================================================================== */
.map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 300px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
  background: var(--color-surface-alt);
}
.map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===================================================================
   10. EVENTS
   =================================================================== */
.event {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-primary);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 18px;
}
.event-when {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--color-accent-dark);
  font-size: 1.05rem;
}
.event h3 { margin-top: 0; }
.event p:last-child { margin-bottom: 0; }
@media (max-width: 620px) { .event { grid-template-columns: 1fr; gap: 6px; } }

/* ===================================================================
   11. FORMS
   =================================================================== */
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-weight: 600; margin-bottom: 6px; }
.form-field input,
.form-field textarea {
  width: 100%;
  font: inherit;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid #c9bda2;
  border-radius: var(--radius);
  padding: 12px 14px;
}
.form-field textarea { min-height: 150px; resize: vertical; }
.form-hint { font-size: 0.9rem; color: var(--color-ink-soft); }

/* ===================================================================
   12. FOOTER
   =================================================================== */
.site-footer {
  background: var(--color-primary-dark);
  color: #dfe6f1;
  padding: 44px 0 26px;
  margin-top: 10px;
}
.site-footer h2 {
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}
.site-footer a { color: #ffd9c7; }
.site-footer a:hover { color: #ffffff; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.footer-grid p { margin-bottom: 0.6em; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  margin-top: 30px;
  padding-top: 18px;
  font-size: 0.9rem;
  color: #c6d1e4;
}
.footer-bottom p { margin: 0 0 4px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 22px; } }

/* ===================================================================
   13. MOTION PREFERENCES
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}