/* ==========================================================================
   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: #0c1e3a;
  --navy-800: #143059;
  --navy-700: #1d4272;
  --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;
}

.brand { display: flex; align-items: center; text-decoration: none; }
.brand__logo { display: block; height: 40px; width: auto; }

/* Narrow screens rebuild the lockup from live text, in the logo's own
   typeface, so the name and the tagline can size and wrap to the space. */
.brand__compact { display: none; align-items: center; gap: .55rem; }
.brand__mark { height: 40px; width: auto; display: block; flex: none; }
.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__compact { display: flex; }
}

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

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

.hero {
  background:
    radial-gradient(1200px 420px at 50% -140px, rgba(63,134,209,.28), transparent 70%),
    linear-gradient(180deg, var(--navy-900), var(--navy-700));
  color: #fff;
  padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) 0;
}
.hero h1 { color: #fff; max-width: 20ch; }
.hero p { color: #dbe6f4; 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(215px, 46vw);
  filter: drop-shadow(0 0 46px rgba(127, 178, 229, .40));
}
@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: rgba(255,255,255,.55); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.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); }

/* --------------------------------------------------------- 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; }
.sitefooter__mark { width: 38px; 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; }
}