/* Countryside Christian Church
   Static rebuild of the Weblium site at cccmonett.org.

   Live values measured 2026-09-21 at a 1642px viewport and again at 375px.
   Type and section padding on the old site interpolate linearly between a
   320px and a 1216px viewport, so every clamp below uses that same range.
   Measured: h1 60 to 90, h2 30 to 34, h3 22 to 26, h4 20 to 22,
   lead 20 fixed, body 16 weight 300, small 12 weight 300.
*/

:root {
  --brand: #17678b;          /* teal bands, icon circles, header social tiles */
  --accent: #11a8e7;         /* primary buttons, address line, links */
  --dark: #062a38;           /* secondary button, icon glyphs */
  --header-bg: #222222;
  --ink: #222222;
  --ink-soft: #212121;
  --muted: #707070;
  --lavender: #f0e8f8;       /* footer social tiles */
  --page-bg: #ffffff;
  --field-bg: rgba(34, 34, 34, 0.12);
  --rule: rgba(34, 34, 34, 0.15);

  --container: 1200px;
  --gutter: 15px;
  --header-h: 126px;

  --display: "Merriweather", Georgia, "Times New Roman", serif;
  --ui: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Floor is 54px, not the measured 60px. At 60px the word Countryside is
     wider than a 375px screen and the live site breaks it mid word. Same
     value from 1216px up. */
  --fs-h1: clamp(54px, calc(41.143px + 4.018vw), 90px);
  --fs-h2: clamp(30px, calc(28.571px + 0.446vw), 34px);
  --fs-h3: clamp(22px, calc(20.571px + 0.446vw), 26px);
  --fs-h4: clamp(20px, calc(19.286px + 0.223vw), 22px);
  --fs-address: clamp(24px, calc(21.857px + 0.67vw), 30px);
  --fs-lead: 20px;
  --fs-body: 16px;
  --fs-small: 12px;

  /* Band padding is set from the measured total height of each band on the
     live site, not from its CSS padding value. Weblium adds its own inner
     spacing on top of the declared 100px, so a straight 100px here lands the
     rebuilt bands roughly 30 percent short. */
  --pad-hero: clamp(110px, calc(65.714px + 13.839vw), 234px);
  --pad-band: clamp(90px, calc(35px + 17.188vw), 244px);
  --pad-sermon: clamp(90px, calc(17.857px + 22.545vw), 292px);
  --pad-wide: clamp(110px, calc(73.214px + 11.496vw), 213px);
  --pad-contact: clamp(90px, calc(64.964px + 8.147vw), 163px);
}

@media (max-width: 900px) {
  :root { --header-h: 87px; --gutter: 24px; }
}

/* ---------- reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.56;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }

h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.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;
}

/* ---------- layout ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.band { padding: var(--pad-band) 0; }
.band--teal { background: var(--brand); color: #fff; }
.band--white { background: #fff; }
.band--flush { padding: 0; }
.band--sermon { padding: var(--pad-sermon) 0; }
.band--wide { padding: var(--pad-wide) 0; }
.band--contact { padding: var(--pad-contact) 0; }
.band--people { padding: clamp(110px, calc(90px + 6.25vw), 166px) 0; }

/* ---------- type ---------- */

.h1, .h2, .h3, .h4 { font-family: var(--display); font-weight: 700; }

.h1 {
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.02em;
}

.h2 {
  font-size: var(--fs-h2);
  line-height: 1.18;
  letter-spacing: -0.021em;
}

.h3 { font-size: var(--fs-h3); line-height: 1.31; }
.h4 { font-size: var(--fs-h4); line-height: 1.36; }

.lead { font-size: var(--fs-lead); font-weight: 400; line-height: 1.5; }
.lead--muted { color: var(--muted); }
.small { font-size: var(--fs-small); line-height: 1.67; }

.prose p + p { margin-top: 1em; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--ui);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 0;
  padding: 18px 30px;
  font-size: 15.4px;
  cursor: pointer;
  transition: background 0.18s ease;
}

.btn:hover { background: #0d93cc; }
.btn--dark { background: var(--dark); }
.btn--dark:hover { background: #0b3d52; }
.btn--sm { padding: 15px 26px; font-size: 14px; }

/* ---------- header ---------- */

.site-header {
  background: var(--header-bg);
  color: #fff;
  position: relative;
  z-index: 60;
}

/* The rule under the top bar sits inside the container on the live site,
   not across the full width. */
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 52px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.topbar a {
  font-size: var(--fs-small);
  line-height: 1.67;
  color: #fff;
  text-decoration: none;
}

.topbar a:hover { color: var(--accent); }

.header-main__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 74px;
}

.wordmark {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: #fff;
  text-decoration: none;
  flex: 0 1 auto;
}

.header-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }

.main-nav ul { display: flex; align-items: center; gap: 30px; }

.main-nav a {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}

/* The live site gives the current page no visual treatment in the nav.
   aria-current is kept for screen readers only. */
.main-nav a:hover { color: var(--accent); }

.social { display: flex; align-items: center; gap: 8px; }
.social a { display: block; line-height: 0; }
.social svg { width: 30px; height: 30px; display: block; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 10px;
  background: none; border: 0; cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: #fff;
  margin: 5px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (max-width: 900px) {
  .topbar { display: none; }
  .header-main__inner { height: 87px; gap: 12px; }
  .wordmark { max-width: calc(100% - 56px); }
  .nav-toggle { display: block; flex: 0 0 44px; }

  .header-nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0; bottom: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 24px;
    background: var(--header-bg);
    overflow-y: auto;
    transform: translateX(100%);
    /* visibility keeps the closed panel out of the tab order */
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }

  .header-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s;
  }

  .main-nav { width: 100%; }
  .main-nav ul { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
  .main-nav li { width: 100%; }
  .main-nav a { display: block; padding: 16px 0; font-size: 20px; }

  .header-nav .btn { margin: 16px 0 24px; }
  .social { padding-top: 8px; }

  body.nav-open { overflow: hidden; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding: var(--pad-hero) 0;
  color: #fff;
  background-image: url("/images/hero-home.webp"),
                    linear-gradient(0deg, #6b84ff 0%, #222222 100%);
  background-size: cover;
  background-position: 52% 39%;
  background-repeat: no-repeat;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(34, 34, 34, 0.56);
  z-index: -1;
}

/* 760px, not a ch value: wide enough for "Christian Church" on one line and
   too narrow for "Countryside Christian", which is how the live site breaks
   the title at the measured 90px size. */
.hero__title { max-width: 760px; }

.hero__verse {
  font-size: var(--fs-lead);
  font-style: italic;
  line-height: 1.5;
  margin: 24px 0 32px;
}

/* ---------- address band ---------- */

.addressbar { background: var(--brand); padding: 30px 0; }

.addressbar a {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-size: var(--fs-address);
  font-weight: 700;
  line-height: 1.27;
  letter-spacing: -0.02em;
  color: var(--accent);
  text-decoration: none;
}

.addressbar a:hover { color: #fff; }

/* ---------- service times ---------- */

.section-head { text-align: center; max-width: 760px; margin: 0 auto 60px; }
.section-head .lead { margin-top: 14px; }

.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 60px;
}

.service { display: flex; align-items: flex-start; gap: 20px; }

.service__icon {
  flex: 0 0 100px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: var(--brand);
  display: grid;
  place-items: center;
}

.service__icon svg { width: 60px; height: 60px; fill: #fff; }
@media (max-width: 767px) { .service__icon { display: none; } }
.service__time { margin-bottom: 18px; }
.service__name { font-size: var(--fs-h4); font-weight: 700; line-height: 1.36; }

.center { text-align: center; }

/* ---------- split bands: sermon, announcements, contact ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.split__text .lead,
.split__text p { margin-top: 18px; }

.video {
  position: relative;
  width: 100%;
  max-width: 544px;
  aspect-ratio: 16 / 9;
}

.video iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

.fb-embed { width: 100%; max-width: 300px; }
.fb-embed iframe { width: 100%; height: 500px; border: 0; overflow: hidden; }

/* ---------- purpose ---------- */

.purpose {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 450px;
}

.purpose__media { position: relative; min-height: 450px; }

.purpose__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.purpose__text {
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px clamp(20px, 3vw, 44px);
}

.purpose__text em { display: block; margin: 14px 0 12px; }

/* ---------- contact form ---------- */

/* form_embed.js flips the iframe to position: absolute while it measures and
   on this layout it never flips back, which collapses the wrapper to zero and
   drops the form out of the band. Forcing it back to relative lets the
   iframe's own inline height drive the wrapper, including when the script
   resizes it after a submission. A min-height here instead would leave a
   permanent blank gap under the form. */
.form-wrap { position: relative; }

.form-wrap iframe {
  position: relative !important;
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
}

/* ---------- page title band ---------- */

.page-title {
  background: var(--brand);
  color: #fff;
  padding: 50px 0;
  text-align: center;
}

/* ---------- about: what we believe ---------- */

.believe {
  position: relative;
  background: #fff;
  padding: clamp(90px, calc(72.143px + 5.58vw), 140px) 0
           clamp(90px, calc(76.429px + 8.259vw), 150px);
}

/* Full bleed 50/50, not the 1200px container. The live site runs the photo to
   the left viewport edge and gives the accordion the whole right half. */
.believe__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

.believe__media {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 50vw;
  max-width: calc(50vw);
}

.believe__media img { width: 100%; height: 100%; object-fit: cover; }

/* The accordion block is centred in the right half, capped at the measured
   570px and shrinking to the column width less 60px below that. */
.believe__body {
  grid-column: 2;
  display: flex;
  justify-content: center;
  padding: 0 30px;
}

.believe__inner { width: 100%; max-width: 570px; }
.believe__inner .h2 { margin-bottom: 28px; }

.accordion__item { border-bottom: 1px solid var(--rule); }

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.31;
}

.accordion__trigger svg {
  flex: 0 0 16px;
  width: 16px; height: 16px;
  transition: transform 0.2s ease;
}

.accordion__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.accordion__panel { display: none; padding: 0 0 22px; }
.accordion__panel.is-open { display: block; }
.accordion__panel p { max-width: 62ch; }

/* ---------- about: elders ---------- */

.people {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.people .h2 { margin-bottom: 22px; }
.people .h4 { margin-bottom: 22px; }
.people a { color: #fff; text-decoration: none; }
.people a:hover { text-decoration: underline; }

/* ---------- proposals ---------- */

.doc-list { margin-top: 32px; display: grid; gap: 8px; }

.doc-list a {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--accent);
  text-decoration: none;
  font-size: var(--fs-body);
  padding: 4px 0;
}

.doc-list a:hover { text-decoration: underline; }
.doc-list svg { flex: 0 0 22px; width: 22px; height: 22px; }

/* ---------- footer ---------- */

.site-footer { background: #fff; padding: 90px 0 0; }

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding-bottom: 60px;
}

.site-footer .wordmark { color: var(--ink); font-size: 24px; }
.site-footer__tag { color: var(--muted); margin-top: 16px; }
.site-footer .social { margin-top: 24px; }

.footer-nav__head {
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.36;
  padding-bottom: 10px;
  margin-bottom: 14px;
  position: relative;
}

.footer-nav__head::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 48px; height: 2px;
  background: var(--dark);
}

.footer-nav a {
  display: block;
  padding: 4px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
}

.footer-nav a:hover { color: var(--accent); }

.site-footer__bar {
  border-top: 1px solid var(--rule);
  padding: 24px 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.site-footer__bar a { color: var(--ink); text-decoration: none; }
.site-footer__bar a:hover { color: var(--accent); }

/* ---------- 404 ---------- */

.notfound { padding: clamp(90px, calc(72.143px + 5.58vw), 160px) 0; text-align: center; }
.notfound .lead { margin: 20px auto 32px; max-width: 46ch; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split__media { justify-self: start; width: 100%; }
  .video { max-width: none; }

  .services { grid-template-columns: 1fr; gap: 36px; margin-bottom: 48px; }
  .section-head { margin-bottom: 44px; }

  .purpose { grid-template-columns: 1fr; }
  .purpose__media { min-height: 260px; }
  .purpose__text { padding: 48px var(--gutter); }

  .believe { padding-top: 0; }
  .believe__grid { grid-template-columns: 1fr; }
  .believe__body { grid-column: 1; padding: 0 var(--gutter); }
  .believe__inner { max-width: none; }
  .believe__media {
    position: relative;
    width: auto;
    max-width: none;
    height: 320px;
    margin: 0 0 44px;
  }

  .people { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }

  .site-footer { padding-top: 60px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 560px) {
  .service { flex-direction: column; }
  .people { grid-template-columns: 1fr; }
  .site-footer__bar { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}