/* Harbour Community Church
   ------------------------------------------------------------------
   One stylesheet for every page. Edit here, not in the HTML.
   Navy #0F2E52 is sampled directly from the logo.

   The logo's wordmark is a light, widely letterspaced sans, so the site
   follows it: sans throughout, light weights at large sizes, wide tracking
   on small caps labels. The earlier serif headings fought the mark.
   ------------------------------------------------------------------ */

:root {
  --navy:       #0F2E52;
  --navy-deep:  #0A2038;
  --navy-soft:  #E8EEF5;
  --ink:        #16233A;
  --muted:      #5C6B7A;
  --ground:     #FFFFFF;
  --ground-alt: #F5F8FB;
  --hair:       #DCE4EC;
  --field:      #FBFCFE;

  --ok-bg: #E9F1EA; --ok-br: #BAD5BF; --ok-tx: #1E4A2B;
  --er-bg: #FBECE8; --er-br: #EEC5B8; --er-tx: #7C3520;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { width: 100%; max-width: 40rem; margin: 0 auto; padding: 0 1.5rem; }

/* Screen-reader only, and the form honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Masthead ---------- */
/* ---------- Masthead ----------
   The whole row has to fit inside the 40rem reading column, which is 592px of usable width. The
   brand lockup and the nav together were 604px once YouTube joined Facebook and Instagram, so the
   nav wrapped onto a second line and looked like a bug rather than a choice.

   The letterspacing was where the money was: 0.16em across a 24-character wordmark spends roughly
   58px on air alone. Dialling the wordmark back to 0.9rem/0.14em and tightening the nav gap buys
   the row back without the lockup reading as shrunken. If a fourth social account ever appears,
   this budget is gone again - that is the point at which the icons should leave the masthead and
   live only in the footer. */
.site-header { padding: 2.25rem 0 0; }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem 1rem; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--navy); }
.brand svg { width: 34px; height: 34px; flex: 0 0 auto; }
/* Mirrors the lockup: caps, light, generously tracked */
.brand span {
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--navy); white-space: nowrap;
}
nav { display: flex; align-items: center; gap: 1.15rem; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; }
nav a { color: var(--muted); text-decoration: none; font-weight: 600; }
nav a:hover, nav a[aria-current="page"] { color: var(--navy); }
/* Cancels the icon's own left padding so the gap between GIVE and the first glyph matches the
   gap between the nav links themselves, rather than being padding + gap stacked. */
nav .social { margin-left: -0.8rem; }

/* ---------- Social ----------
   The icons live in a .social span that appears twice per page: once in the
   masthead <nav> and once in the footer link line. They inherit their colour
   from whatever surrounds them, so the same markup works in both places.

   TO ADD A NETWORK: copy one <a> inside every .social span on every page and
   swap the href, the aria-label and the <svg> path. Keep the paths on a
   24x24 viewBox with fill="currentColor" and they will size and colour
   themselves. There is no template here, so it really is every page.

   TOUCH TARGETS: the glyph is 1.15rem, which is 18.4px — rem is 16px here, the 17px on body does
   not change it. That is well under the 44px a thumb needs, and with the icons formerly 10px apart
   a tap aimed at Instagram landed on Facebook about as often as not. So each link carries 0.8rem
   of padding, giving 18.4 + 25.6 = 44px of hit area around an unchanged glyph, and the flex gap is
   0 because that padding now supplies all the visual spacing. The negative block margin claws the
   extra height back so a 44px tall target does not inflate the header and footer rows.
   Tune the padding, not the icon size. */
.social { display: inline-flex; align-items: center; gap: 0; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.8rem;
  margin-block: -0.8rem;
  color: var(--muted); text-decoration: none;
}
.social a:hover { color: var(--navy); }
.social svg { width: 1.15rem; height: 1.15rem; display: block; fill: currentColor; }

/* An account that is associated with the church but is NOT the church's own — right now that's
   @hhiyouth on the Kids page. It gets a named inline link in the body copy instead of a bare
   icon in the header and footer, and the distinction is the point: icons in the chrome are ours,
   a spelled-out handle in a sentence belongs to somebody else. Never promote one of these into
   the .social spans.

   Deliberately not inline-flex: this sits mid-sentence, and an inline-block icon on an explicit
   vertical-align lands on the text baseline predictably where a flex baseline does not. The icon
   sits OUTSIDE the <a> on purpose — inside it, the link underline draws straight through the
   glyph. */
.handle { white-space: nowrap; color: var(--navy); }
.handle svg {
  width: 1rem; height: 1rem; fill: currentColor;
  display: inline-block; vertical-align: -0.16em; margin-right: 0.28em;
}

/* ---------- Type ---------- */
main { flex: 1 0 auto; padding: 4.5rem 0 4rem; }

.eyebrow {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em;
  font-weight: 600; color: var(--muted); margin-bottom: 1.6rem;
}
h1 {
  font-weight: 300;
  font-size: clamp(2.2rem, 6.4vw, 3.4rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: 1.5rem;
  text-wrap: balance;
}
h2 {
  font-weight: 500; font-size: 1.3rem; letter-spacing: -0.005em;
  color: var(--navy); margin: 2.6rem 0 0.7rem;
}
.rule + h2 { margin-top: 0; }

p { color: var(--muted); max-width: 34em; }
p + p { margin-top: 1.1rem; }
.lede { font-size: 1.1rem; }
.lede + .lede { margin-top: 1.1rem; }

.rule { border: 0; border-top: 1px solid var(--hair); margin: 3.25rem 0; }

/* ---------- Scripture ----------
   This is the page's closing note, not a quote pulled out of the middle of an argument. The old
   treatment was a left border rule, which is the universal blog-pullquote signal and made the verse
   read as something dropped in from elsewhere.

   Instead: a hairline the full measure, a lot of air above it, then the verse set in the same light
   navy as the headings at a size between body and h2, on a deliberately short measure. That reads
   as a coda — the page has finished talking and is signing off — which is what it is. The rule is
   the same hairline the rest of the site uses, so the coda belongs to the page rather than sitting
   on top of it. */
.verse {
  margin-top: 3.25rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--hair);
}
.verse p {
  font-size: 1.32rem;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--navy);
  max-width: 24em;
  margin: 0;
  text-wrap: balance;
}
.verse cite {
  display: block; margin-top: 1.1rem; font-style: normal;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted);
}

/* ---------- Forms ---------- */
.capture { margin-top: 2.75rem; }
.two { display: flex; gap: 0.6rem; }
.two input { flex: 1 1 0; min-width: 0; }
.capture .two { margin-bottom: 0.6rem; }

input[type="email"], input[type="text"] {
  width: 100%; min-width: 0;
  background: var(--field);
  border: 1px solid var(--hair);
  border-radius: 4px;
  padding: 0.85rem 0.95rem;
  font: inherit; color: var(--ink);
}
input::placeholder { color: #9AA7B4; }
input:focus { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }

button, .cta {
  display: inline-block;
  background: var(--navy); color: #fff;
  border: none; border-radius: 4px;
  padding: 0.85rem 1.8rem;
  font: inherit; font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer; text-decoration: none;
  -webkit-appearance: none; appearance: none;
  transition: background 0.15s ease;
}
button:hover, .cta:hover { background: var(--navy-deep); color: #fff; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
.cta { margin-top: 2.25rem; }

/* Secondary buttons, and the row they sit in. Stock and crypto giving lives under the main Give
   button, and three solid navy buttons in a column would make the page ask a question rather than
   answer one: nearly everyone wants the card form. Outlined, same size, same 44px target. */
.cta.alt {
  background: transparent; color: var(--navy);
  border: 1px solid var(--navy);
  padding: calc(0.85rem - 1px) calc(1.8rem - 1px);
}
.cta.alt:hover { background: var(--navy-soft); color: var(--navy-deep); }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.1rem; }
.cta-row .cta { margin-top: 0; }

.fine, .note { font-size: 0.86rem; line-height: 1.7; color: var(--muted); margin-top: 0.9rem; }
.note + .note { margin-top: 0.45rem; }
.note a, .fine a { color: var(--navy); }

.status { display: none; font-size: 0.95rem; border-radius: 4px; padding: 0.85rem 1rem; margin-top: 1rem; }
.status.ok  { display: block; background: var(--ok-bg); border: 1px solid var(--ok-br); color: var(--ok-tx); }
.status.err { display: block; background: var(--er-bg); border: 1px solid var(--er-br); color: var(--er-tx); }

/* ---------- Lists ---------- */
ul { margin: 1.1rem 0 0; padding-left: 1.1rem; color: var(--muted); max-width: 34em; }
li { margin-bottom: 0.6rem; }
li strong { color: var(--ink); font-weight: 600; }

/* ---------- Footer ---------- */
footer { flex: 0 0 auto; background: var(--ground-alt); border-top: 1px solid var(--hair); padding: 2rem 0 2.5rem; }
footer .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.25rem; justify-content: space-between; }
footer p { font-size: 0.9rem; color: var(--muted); }
footer p + p { margin-top: 0; }
footer a { color: var(--navy); }
/* Sits inline with 0.9rem text, so drop it onto that baseline. No left margin: the icon's own
   touch padding already supplies the gap after the email address. */
footer .social { vertical-align: -0.3em; }
footer .social a { color: var(--navy); }
footer .social a:hover { color: var(--navy-deep); }
/* The ESV copyright notice. It used to be a lighter grey than --muted, which came out at 2.92:1
   against the footer and failed WCAG AA. Size alone carries the hierarchy now — a licence notice
   someone may actually need to read should not be the least legible thing on the page. */
.credit { flex-basis: 100%; font-size: 0.76rem; color: var(--muted); margin-top: 0.7rem; }

/* Social icons leave the masthead below 40rem, which is the width at which the reading column stops
   growing and the lockup + nav + three 44px targets stop fitting on one line. This is its own query
   rather than part of the phone block below, because the squeeze starts on tablets in portrait -
   well before anything else about the layout needs to change.

   All three icons are in the footer of every page at the same size, so nothing is lost. The nav
   itself is never hidden: there are two destinations on this site, and putting Kids and Give behind
   a hamburger would cost a tap to reveal the only two things there are. */
@media (max-width: 40rem) {
  .site-header .social { display: none; }
}

/* ---------- Small screens ---------- */
@media (max-width: 34rem) {
  main { padding: 3rem 0 2.5rem; }
  .two { flex-direction: column; }
  button, .cta { width: 100%; text-align: center; }
  /* Stacked, not squeezed: two outlined buttons side by side on a phone give two narrow targets
     with wrapped labels. */
  .cta-row { flex-direction: column; }
  /* MASTHEAD ON PHONES. "HARBOUR COMMUNITY CHURCH" in letterspaced caps is a wide lockup, and with
     two nav links plus three 44px social targets the row could not hold one line, so it wrapped and
     the nav fell under the brand looking like a mistake.

     The fix is to drop the social icons here, not to hide the nav behind a hamburger. There are two
     destinations on this whole site; putting Kids and Give behind a tap costs a tap and hides the
     only two things there are. The icons, by contrast, are pure duplication - all three sit in the
     footer of every page at the same 44px - and selling a follow is not the masthead's job on a
     pre-launch site. Removing them is what buys the room for one clean line.

     If a third page ever appears, revisit: three links plus the brand is where a real menu starts
     to earn its place. */
  /* 20px gutters instead of 24px on phones. Standard for the size, gives the body copy a little
     more measure, and the 16px it returns to the masthead is what lets the wordmark keep some of
     its letterspacing instead of being squeezed to nothing to fit. */
  .wrap { padding: 0 1.25rem; }
  .site-header .wrap { gap: 0.6rem 0.6rem; }
  nav { gap: 0.9rem; font-size: 0.74rem; }
  .brand { gap: 0.5rem; }
  .brand svg { width: 28px; height: 28px; }
  /* Fluid rather than a fixed step. The wordmark is 24 characters and dominates the row, so at a
     fixed size it clears 390px and fails 360px by a pixel or two - a margin too thin to trust
     across font rendering. Scaling it with the viewport keeps a real gap at every phone width and
     lets it grow back toward the desktop size as the screen allows, instead of jumping. */
  .brand span { font-size: clamp(0.6rem, 2.6vw, 0.9rem); letter-spacing: 0.06em; }
  .rule { margin: 2.75rem 0; }
  .verse { margin-top: 2.5rem; padding-top: 1.75rem; }
  .verse p { font-size: 1.18rem; }
}