/* ==========================================================================
   Families Renewed, Inc. — site styles
   Palette taken from the Family Walking Toward The Cross mark:
   deep navy silhouettes, a blue gradient, warm stone ground.
   ========================================================================== */

:root {
  --navy-900: #092e5c;   /* card: the wordmark fill, taken from the vector */
  --navy-800: #0d3a70;
  --navy-700: #14477f;
  --band:     #254E78;   /* card: the wave band blue */
  --blue-600: #2f6fb5;
  --blue-500: #3f86d1;
  --blue-200: #b9d3ee;
  --blue-100: #e2edf9;

  --stone-50:  #fbfaf8;
  --stone-100: #f4f2ee;
  --stone-200: #e7e3db;
  --stone-300: #d3cdc2;

  --text:  #22303f;
  --muted: #5b6b7c;
  --paper: #ffffff;

  --sun:      #c67c1e;
  --sun-dark: #a4650f;

  --measure: 68ch;
  --radius: 10px;
  --shadow-sm: 0 1px 2px rgba(12, 30, 58, .08), 0 2px 8px rgba(12, 30, 58, .06);
  --shadow-md: 0 4px 12px rgba(12, 30, 58, .10), 0 12px 32px rgba(12, 30, 58, .08);

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --logo-serif: "Lora", Georgia, "Times New Roman", serif;
  --sans:  Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------- base */

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

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

body {
  margin: 0;
  background: var(--stone-50);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
}

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

a { color: var(--blue-600); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy-800); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--navy-900);
  line-height: 1.2;
  margin: 0 0 .5em;
  font-weight: 600;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
h3 { font-size: 1.25rem; }

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

blockquote {
  margin: 1.5em 0;
  padding: .25em 0 .25em 1.25em;
  border-left: 4px solid var(--blue-200);
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--navy-800);
}

hr { border: 0; border-top: 1px solid var(--stone-200); margin: 2.5rem 0; }

.wrap { width: min(1140px, 100% - 2.5rem); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px;
  background: var(--navy-900); color: #fff; padding: .75rem 1rem; z-index: 100;
}

/* Visible to screen readers only. */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 2px; }

/* --------------------------------------------------------- crisis bar */

.crisisbar {
  background: var(--navy-900);
  color: #eaf1fa;
  font-size: .875rem;
}
.crisisbar .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.25rem;
  padding: .5rem 0;
}
.crisisbar__label { color: var(--blue-200); font-weight: 600; }
.crisisbar a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.crisisbar a:hover { color: #fff; border-bottom-color: #fff; }
.crisisbar__ours { margin-left: auto; }

/* --------------------------------------------------------- header + nav */

.siteheader {
  background: var(--paper);
  border-bottom: 1px solid var(--stone-200);
  position: sticky; top: 0; z-index: 50;
}
.siteheader__inner {
  display: flex; align-items: center; gap: 1rem;
  padding: .75rem 0;
}

/* The mark rides beside the lockup at every width; only the words beside it
   change — name and tagline on wide screens, name alone when space is short. */
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand__mark { display: block; height: 44px; width: auto; flex: none; }
.brand__logo { display: block; height: 40px; width: auto; }
.brand__wordmark { display: none; width: min(230px, calc(100vw - 190px)); height: auto; }
.brand__words { display: block; min-width: 0; }
.brand__name {
  display: block;
  font-family: var(--logo-serif); font-weight: 600;
  font-size: clamp(1rem, .84rem + .8vw, 1.18rem);
  color: var(--navy-900); line-height: 1.12; letter-spacing: .004em;
}
.brand__tag {
  display: block;
  font-family: var(--logo-serif); font-style: italic; font-weight: 500;
  font-size: clamp(.7rem, .58rem + .68vw, .84rem);
  color: var(--blue-600); line-height: 1.22; margin-top: .1em;
}

.navtoggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: .5rem;
  background: var(--stone-100); border: 1px solid var(--stone-200);
  border-radius: var(--radius); padding: .5rem .8rem;
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--navy-800); cursor: pointer;
}
.navtoggle__bars, .navtoggle__bars::before, .navtoggle__bars::after {
  display: block; width: 18px; height: 2px; background: var(--navy-800); position: relative;
}
.navtoggle__bars::before, .navtoggle__bars::after { content: ""; position: absolute; left: 0; }
.navtoggle__bars::before { top: -6px; }
.navtoggle__bars::after  { top: 6px; }

.nav__list { list-style: none; margin: 0; padding: 0; }
.nav__list a, .nav__top {
  display: block; text-decoration: none; color: var(--navy-800);
  font-weight: 500; font-size: .95rem;
}
.nav__top {
  background: none; border: 0; font-family: inherit; cursor: pointer;
  padding: 0; color: var(--navy-800); font-weight: 500; font-size: .95rem;
}
.caret {
  display: inline-block; width: 0; height: 0; margin-left: .3em; vertical-align: middle;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .6;
}
.is-current { color: var(--blue-600); font-weight: 600; }

.nav__cta, .nav__give {
  border-radius: 999px; padding: .4rem .9rem !important; font-weight: 600 !important;
}
.nav__cta  { background: var(--blue-100); color: var(--navy-800) !important; }
.nav__cta:hover { background: var(--blue-200); }
.nav__give { background: var(--sun); color: #fff !important; }
.nav__give:hover { background: var(--sun-dark); }

/* mobile nav */
/* Below the width where the tagline stays legible, drop to mark + name. */
@media (max-width: 620px) {
  .brand__logo { display: none; }
  .brand__wordmark { display: block; }
  .brand__mark { height: 40px; }
}

@media (max-width: 979px) {
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper); border-bottom: 1px solid var(--stone-200);
    box-shadow: var(--shadow-md);
  }
  .nav.is-open { display: block; }
  .nav__list { width: min(1140px, 100% - 2.5rem); margin-inline: auto; padding: .5rem 0 1.25rem; }
  .nav__list > li { border-top: 1px solid var(--stone-100); }
  .nav__list > li > a, .nav__top { width: 100%; text-align: left; padding: .8rem 0; font-size: 1rem; }
  .nav__sub { list-style: none; margin: 0 0 .5rem; padding: 0 0 0 1rem; display: none; }
  .nav__has-sub.is-open .nav__sub { display: block; }
  .nav__sub a { padding: .5rem 0; color: var(--muted); }
  .nav__cta, .nav__give { display: inline-block !important; width: auto; margin: .6rem 0; }
}

/* desktop nav */
@media (min-width: 980px) {
  .navtoggle { display: none; }
  .nav { margin-left: auto; }
  .nav__list { display: flex; align-items: center; gap: 1.15rem; }
  .nav__has-sub { position: relative; }
  .nav__sub {
    display: none; position: absolute; left: -.9rem; top: calc(100% + .6rem);
    min-width: 17rem; background: var(--paper); list-style: none; margin: 0;
    padding: .5rem; border: 1px solid var(--stone-200); border-radius: var(--radius);
    box-shadow: var(--shadow-md);
  }
  /* The submenu sits .6rem below its menu item. Without this bridge the
     pointer crosses dead space on the way down and the menu closes. The
     bridge is an invisible strip spanning that gap, and because it belongs
     to the menu item, hovering it keeps the item hovered. */
  .nav__has-sub::after {
    content: ""; display: none; position: absolute;
    left: 0; right: 0; top: 100%; height: .75rem;
  }
  .nav__has-sub:hover::after,
  .nav__has-sub:focus-within::after,
  .nav__has-sub.is-open::after { display: block; }

  .nav__has-sub:hover .nav__sub,
  .nav__has-sub:focus-within .nav__sub,
  .nav__has-sub.is-open .nav__sub { display: block; }

  /* Escape dismisses the menu even though its button still has focus.
     This rule comes last so it wins over :hover and :focus-within. */
  .nav__has-sub.is-dismissed .nav__sub,
  .nav__has-sub.is-dismissed::after { display: none; }

  /* A little breathing room so the pointer has somewhere to land. */
  .nav__sub { padding: .45rem; }
  .nav__sub a { padding: .5rem .65rem; border-radius: 6px; font-size: .92rem; }
  .nav__sub a:hover { background: var(--blue-100); }
  .siteheader__inner { padding: .9rem 0; }
  .brand__logo { height: 46px; }
  .brand__mark { height: 50px; }
}

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

.hero {
  /* Light, like the card. The artwork's glow only exists against white. */
  background:
    radial-gradient(900px 520px at 72% 38%, rgba(180, 209, 240, .30), transparent 68%),
    linear-gradient(180deg, #ffffff 0%, var(--stone-50) 100%);
  color: var(--text);
  padding: clamp(2rem, 1.2rem + 3.5vw, 3.75rem) 0 clamp(2.25rem, 1.4rem + 4vw, 4rem);
}
.hero h1 { color: var(--navy-900); max-width: 20ch; }
.hero p { color: var(--muted); font-size: 1.15rem; max-width: 58ch; }
.hero__inner { display: grid; gap: 2rem; align-items: center; }
.hero__art { justify-self: center; }
/* Reversed to white and set straight on the navy, with a soft halo that
   picks up the light-from-the-cross idea rather than boxing the mark in. */
.hero__art img {
  display: block; width: min(380px, 74vw); height: auto;
  /* The artwork ships on white. Multiply drops that white into the page so
     there is no visible box, and leaves the glow where it belongs. */
  mix-blend-mode: multiply;
}
@media (min-width: 800px) {
  .hero__inner { grid-template-columns: 1fr auto; }
}
.hero .btn-row { margin-top: 1.5rem; }

.pagehead {
  background: linear-gradient(180deg, var(--blue-100), var(--stone-50));
  border-bottom: 1px solid var(--stone-200);
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem) 0;
}
.pagehead h1 { margin-bottom: .25em; }
.pagehead p { color: var(--muted); font-size: 1.1rem; max-width: var(--measure); margin: 0; }

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

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.btn {
  display: inline-block; padding: .7rem 1.35rem; border-radius: 999px;
  font-weight: 600; font-size: 1rem; text-decoration: none; border: 2px solid transparent;
  cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.btn--primary { background: var(--sun); color: #fff; }
.btn--primary:hover { background: var(--sun-dark); color: #fff; }
.btn--blue { background: var(--blue-600); color: #fff; }
.btn--blue:hover { background: var(--navy-800); color: #fff; }
.btn--ghost { border-color: var(--navy-700); color: var(--navy-900); }
.btn--ghost:hover { background: var(--blue-100); color: var(--navy-900); }
.btn--outline { border-color: var(--blue-600); color: var(--blue-600); background: transparent; }
.btn--outline:hover { background: var(--blue-100); color: var(--navy-800); }

/* --------------------------------------------------------- sections + prose */

.section { padding: clamp(2.25rem, 1.5rem + 3vw, 4rem) 0; }
.section--stone { background: var(--stone-100); border-block: 1px solid var(--stone-200); }
.section__head { max-width: var(--measure); margin-bottom: 2rem; }
.section__head p { color: var(--muted); font-size: 1.08rem; margin: 0; }

.prose { max-width: var(--measure); }
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.75em; }
.prose li { margin-bottom: .35em; }
.prose > :first-child { margin-top: 0; }

.lede { font-size: 1.2rem; color: var(--navy-800); font-family: var(--serif); }

/* --------------------------------------------------------- cards */

.cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
@media (min-width: 760px) {
  .cards--four { grid-template-columns: repeat(2, 1fr); }
}

.card {
  background: var(--paper); border: 1px solid var(--stone-200); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.card h3 { margin-bottom: .4em; }
.card p { color: var(--muted); margin-bottom: 1rem; }
.card__more { margin-top: auto; font-weight: 600; text-decoration: none; }
.card__more::after { content: " \2192"; }
.card__kicker {
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue-600); margin-bottom: .5rem;
}

/* --------------------------------------------------------- callouts */

.callout {
  border-left: 4px solid var(--blue-500); background: var(--blue-100);
  padding: 1.15rem 1.35rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1.75rem 0;
}
.callout > :last-child { margin-bottom: 0; }
.callout--urgent { border-left-color: var(--sun); background: #fdf3e4; }
.callout h3 { margin-top: 0; }

.notice {
  background: var(--stone-100); border: 1px solid var(--stone-200);
  border-radius: var(--radius); padding: 1.15rem 1.35rem; margin: 1.75rem 0; color: var(--muted);
}
.notice > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------- news */

.newslist { list-style: none; margin: 0; padding: 0; }
.newslist > li { border-top: 1px solid var(--stone-200); padding: 1.5rem 0; }
.newslist > li:first-child { border-top: 0; padding-top: 0; }
.newsitem h3 { margin-bottom: .25em; }
.newsitem h3 a { text-decoration: none; color: var(--navy-900); }
.newsitem h3 a:hover { color: var(--blue-600); }
.newsitem p { margin-bottom: .5em; color: var(--muted); }

.newsmeta { font-size: .85rem; color: var(--muted); letter-spacing: .01em; }
.newsmeta time { font-weight: 600; color: var(--navy-800); }

.article { max-width: var(--measure); }
.article__head { margin-bottom: 2rem; }
.article__body img { border-radius: var(--radius); }
.article__foot { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--stone-200); }

.archive h2 { margin-top: 2.5rem; font-size: 1.15rem; color: var(--muted); font-family: var(--sans); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.archive ul { list-style: none; padding: 0; }
.archive li { padding: .45rem 0; border-bottom: 1px solid var(--stone-200); display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.archive time { color: var(--muted); font-size: .9rem; min-width: 9rem; }

/* --------------------------------------------------------- helpers panel (Get Help) */

.helppanel { border: 1px solid var(--stone-200); border-radius: var(--radius); background: var(--paper); margin-bottom: 1rem; overflow: hidden; }
.helppanel__btn {
  width: 100%; text-align: left; background: var(--paper); border: 0; cursor: pointer;
  font: inherit; font-family: var(--serif); font-size: 1.2rem; font-weight: 600; color: var(--navy-900);
  padding: 1.1rem 1.35rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.helppanel__btn:hover { background: var(--blue-100); }
.helppanel__btn::after { content: "+"; font-family: var(--sans); font-size: 1.5rem; color: var(--blue-600); line-height: 1; }
.helppanel__btn[aria-expanded="true"]::after { content: "\2013"; }
.helppanel__body { padding: 0 1.35rem 1.35rem; border-top: 1px solid var(--stone-200); }
.helppanel__body > :first-child { margin-top: 1.1rem; }
.helppanel__body[hidden] { display: none; }

/* --------------------------------------------------------- forms */

.form { max-width: 40rem; }
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .35rem; color: var(--navy-800); }
.field input, .field textarea, .field select {
  width: 100%; padding: .65rem .8rem; font: inherit;
  border: 1px solid var(--stone-300); border-radius: 8px; background: var(--paper); color: var(--text);
}
.field input:focus, .field textarea:focus { border-color: var(--blue-500); }
.field .hint { font-size: .85rem; color: var(--muted); margin-top: .3rem; }
.required { color: var(--sun-dark); }

/* Per-field validation message, shown under the field it belongs to. */
.field-error {
  font-size: .88rem; font-weight: 500; color: #a3320f; margin: .35rem 0 0;
}
.field [aria-invalid="true"] { border-color: #c0522c; background: #fdf6f3; }

/* Honeypot. Hidden from people without display:none, which some bots skip. */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* --------------------------------------------------------- give widget */

.givebox { background: var(--paper); border: 1px solid var(--stone-200); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); }

.split { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1.35fr 1fr; } }

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

.sitefooter { background: var(--navy-900); color: #c9d7e8; margin-top: 4rem; font-size: .95rem; }
.sitefooter__grid { display: grid; gap: 2rem; padding: 3rem 0 2.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.sitefooter h2 { color: #fff; font-family: var(--sans); font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; margin-bottom: .9rem; }
.sitefooter ul { list-style: none; margin: 0; padding: 0; }
.sitefooter li { margin-bottom: .5rem; }
.sitefooter a { color: #dce8f6; text-decoration: none; }
.sitefooter a:hover { color: #fff; text-decoration: underline; }
/* Sized by height: the 2026 mark is taller and narrower than the old one. */
.sitefooter__mark { height: 66px; width: auto; margin-bottom: .85rem; opacity: .92; }
.sitefooter__name { font-family: var(--serif); font-size: 1.1rem; color: #fff; margin-bottom: .5rem; }
.sitefooter__legal { border-top: 1px solid rgba(255,255,255,.14); padding: 1.25rem 0 2rem; font-size: .85rem; color: #97aac2; }
.sitefooter__legal p { margin: 0 0 .5rem; }
.sitefooter__note { max-width: 70ch; }

/* --------------------------------------------------------- print */

@media print {
  .crisisbar, .siteheader, .sitefooter__grid, .btn-row, .navtoggle { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
}


/* --------------------------------------------------------- wave + strip
   Both carried over from the 2026 business card: a soft two-tone wave
   where the white meets the navy, and the letterspaced strip beneath. */

.wave { display: block; width: 100%; height: clamp(48px, 6vw, 92px); margin-bottom: -1px; }
.wave path.wave__crest { fill: var(--band); }
.wave path.wave__navy  { fill: var(--navy-900); }

.sitefooter { margin-top: 0; }

/* Flex so the three phrases can drop to a second line on a narrow phone;
   as one inline run they had no break point and pushed the page sideways. */
.strip {
  background: var(--band);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  color: #eaf1fa;
  text-align: center;
  padding: .85rem 1rem;
  font-family: var(--logo-serif);
  font-size: clamp(.68rem, .58rem + .4vw, .82rem);
  letter-spacing: .34em;
  text-transform: uppercase;
}
.strip span { white-space: nowrap; }
.strip i { font-style: normal; opacity: .55; margin: 0 .55em; }