/*
 * FRAN — SiteHub integration layer. Loaded after the designer's styles.css.
 * Holds everything the static mockup couldn't know about: self-hosted fonts,
 * the multi-page nav, the interior page opener, and platform component skins
 * (.sh-events, .sh-form).
 * Keep styles.css pristine (designer's file) — site adjustments belong here.
 */

/*
 * Fonts. The mockup loads Shantell Sans + Nunito from the Google Fonts CDN;
 * SiteHub self-hosts instead (no third-party request, no CDN availability
 * risk). Same families, same subsets/unicode-ranges Google serves — Shantell
 * Sans is a variable face, so one file covers the 600/700 the design uses.
 */
@font-face {
  font-family: 'Shantell Sans';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/sites/fransalem/fonts/shantell-sans-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Shantell Sans';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/sites/fransalem/fonts/shantell-sans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/sites/fransalem/fonts/nunito-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/sites/fransalem/fonts/nunito-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Multi-page nav. The mockup is a single page with anchor links; the live site
 * adds real routes for the events feed and the contact form, so links need a
 * current-page state, and the CTA slot carries the EN/ES toggle.
 */
.site-header .nav-links a.active {
  position: relative;
  background: var(--color-light-grey);
  color: var(--color-blue-dark);
}
.site-header .nav-links a.active::after {
  content: "";
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: .3rem;
  height: 2px;
  border-radius: 2px;
  background: var(--color-blue-dark);
}
.site-header .nav-links .lang-toggle { margin-left: .35rem; }
@media (max-width: 900px) {
  .site-header .nav-links a.active::after { left: .85rem; right: auto; width: 1.75rem; }
}

/* Interior page opener (events, contact). */
.page-head {
  padding: clamp(2.25rem, 5vw, 3.25rem) 0 clamp(1.25rem, 3vw, 1.75rem);
  background: var(--color-light-grey);
  border-bottom: 1px solid var(--color-border);
}
.page-head .section-title { font-size: clamp(1.9rem, 3.6vw, 3.2rem); }
.page-head .lead { margin-inline: auto; }

/* Contact page: form beside the visit/email details. */
.contact-page-layout { align-items: start; gap: clamp(1.5rem, 3vw, 2.6rem); }

/*
 * Events band on the home one-pager. The mockup has no events section — the
 * feed is live (Need Navigator), so home carries a bounded teaser and the full
 * listing lives at /events, where it can grow without stretching the homepage.
 */
.events-band { background: var(--color-light-grey); }
.events-teaser { width: min(820px, 100%); margin: 2rem auto 0; }
.events-more { margin: 1.5rem 0 0; }

/*
 * Events feed (Need Navigator) — platform component DOM, design-language skin.
 * Card geometry matches .provider-card / .service-card so the feed reads as
 * part of the same system.
 */
.sh-events { display: grid; gap: 1rem; }
.sh-event {
  display: flex;
  gap: 1.1rem;
  padding: 1.15rem;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-white);
}
.sh-event__date {
  flex: none;
  width: 68px;
  height: fit-content;
  padding: .6rem 0;
  text-align: center;
  border: 1px solid rgba(125,152,178,.45);
  border-radius: 10px;
  background: var(--color-light-grey);
  color: var(--color-blue-dark);
}
.sh-event__month {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sh-event__day {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.05;
}
.sh-event__body { min-width: 0; }
.sh-event__title {
  margin: 0 0 .3rem;
  color: var(--color-black);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.sh-event__when,
.sh-event__location { margin: 0; color: var(--color-muted); font-size: .92rem; font-weight: 700; }
.sh-event__description { margin: .55rem 0 0; font-size: .95rem; line-height: 1.5; }
.sh-event__register {
  display: inline-flex;
  align-items: center;
  margin-top: .8rem;
  padding: .65rem .95rem;
  border: 1px solid var(--color-blue-dark);
  border-radius: 10px;
  background: var(--color-blue);
  color: var(--color-white);
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.1;
  transition: background-color .2s ease, border-color .2s ease;
}
.sh-event__register:hover,
.sh-event__register:focus-visible { background: var(--color-blue-dark); }
.sh-event__register:focus-visible { outline: 3px solid rgba(125,152,178,.35); outline-offset: 3px; }
@media (max-width: 560px) {
  .sh-event { flex-direction: column; gap: .85rem; }
}

/* Contact form — platform component DOM, mockup panel look. */
.sh-form {
  max-width: 560px;
  padding: clamp(1.2rem, 2.4vw, 1.6rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}
.sh-form__field { display: grid; gap: .35rem; margin: 0 0 .9rem; }
.sh-form__field label { color: var(--color-black); font-weight: 800; }
.sh-form__field input,
.sh-form__field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: .85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-white);
  color: var(--color-black);
  font: inherit;
}
.sh-form__field input:focus-visible,
.sh-form__field textarea:focus-visible {
  border-color: var(--color-blue-dark);
  outline: 3px solid rgba(125,152,178,.35);
  outline-offset: 2px;
}
.sh-form__field textarea { min-height: 120px; resize: vertical; }
.sh-form__hp { position: absolute; left: -9999px; }
.sh-form .cf-turnstile { margin: 0 0 .9rem; }
.sh-form__actions { margin: .4rem 0 0; }
.sh-form__actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .9rem 1.25rem;
  border: 1px solid var(--color-blue-dark);
  border-radius: 10px;
  background: var(--color-blue);
  color: var(--color-white);
  font: inherit;
  font-weight: 800;
  line-height: 1.1;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.sh-form__actions button:hover,
.sh-form__actions button:focus-visible { background: var(--color-blue-dark); }
.sh-form__actions button:focus-visible { outline: 3px solid rgba(125,152,178,.35); outline-offset: 3px; }
.sh-form__success,
.sh-form__error {
  margin: 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-weight: 700;
}
.sh-form__success { border-left: 6px solid var(--color-green); }
.sh-form__error { margin-bottom: 1rem; border-left: 6px solid var(--color-brown); }

/* Footer link column reads better with room between the stacked links. */
.footer-links p { line-height: 2.1; }

/*
 * Aug 2026 content update (client PDF 8.26.26): footer moves from black to the
 * FRAN blue. The darker brand blue keeps white text readable (the lighter
 * #7d98b2 fails contrast for body copy); tagline centers between the logos.
 */
.footer { background: var(--color-blue-dark); }
.footer-tagline { text-align: center; }
.footer-bottom { color: rgba(255, 255, 255, .85); }

/*
 * Linked info blocks (About "What You Can Do Here", Contact sidebar). Same
 * .notice look, but the whole block is the link.
 */
a.notice-link {
  display: block;
  color: var(--color-text);
  font-weight: 400;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
a.notice-link:hover,
a.notice-link:focus-visible {
  border-color: var(--color-blue-dark);
  border-left-color: var(--color-blue-dark);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
a.notice-link:focus-visible { outline: 3px solid rgba(125, 152, 178, .35); outline-offset: 2px; }

/* About page: founder quote and the building photo under the link boxes. */
.about-quote {
  margin: 1.4rem 0 0;
  padding: .2rem 0 .2rem 1.1rem;
  border-left: 4px solid var(--color-blue);
}
.about-quote p { margin: 0; }
.about-quote footer { margin-top: .8rem; font-weight: 700; color: var(--color-blue-dark); }
.about-page-photo { height: 280px; margin: var(--space-2) 0 0; }

/* Contact page: embedded map (FRAN is too new to surface in map searches). */
.contact-map iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
}

/*
 * Find Support page: the grey name-mark is the link to the partner's site and
 * every card reads centered (client PDF 8.26.26).
 */
.find-support-grid .provider-card { text-align: center; }
a.partner-name-mark {
  width: 100%;
  box-sizing: border-box;
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease;
}
a.partner-name-mark:hover,
a.partner-name-mark:focus-visible {
  border-color: var(--color-blue-dark);
  background: var(--color-white);
}
a.partner-name-mark:focus-visible { outline: 3px solid rgba(125, 152, 178, .35); outline-offset: 2px; }
.partner-categories {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--color-muted);
}

/*
 * Home "Explore Partners" disclosure on the four service-area cards: a
 * <details> keeps it dependency-free; the summary wears the button skin.
 */
.partner-dropdown { width: 100%; margin-top: 1rem; }
.partner-dropdown summary { cursor: pointer; list-style: none; }
.partner-dropdown summary::-webkit-details-marker { display: none; }
.partner-dropdown summary::marker { content: ""; }
.partner-dropdown .service-learn-more { margin-top: 0; }
.partner-dropdown-list {
  display: grid;
  gap: .45rem;
  margin: .8rem 0 0;
  padding: .9rem 1rem;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-light-grey);
  text-align: left;
}
.partner-dropdown-list a { font-weight: 700; color: var(--color-blue-dark); }

/* Events "Happening Soon" leads center under their titles (home + /events). */
.events-band .lead,
.page-head .lead { margin-inline: auto; text-align: center; }

/*
 * The mockup's hero eyebrow was the "[Family Resources in One Place]" badge;
 * the new hero keeps the eyebrow as plain text (client: reads as a button
 * otherwise — Chris's hand-fix 8/31, migrated here from styles.css).
 */
.hero-copy .eyebrow {
  padding: .45rem 0;
  border-radius: 0;
  background: none;
  font-size: 1.25rem;
}

/*
 * Full-bleed card photos: the base img{max-width:100%} caps the photo at the
 * card's padded content width, defeating width:calc(100% + 2.3rem) — flush
 * left via the negative margin, ~2.3rem white gap on the right (the "weird
 * white gap" from the client PDF).
 */
.image-service-card .card-photo { max-width: none; }

/*
 * Sept 2026 client review (9.16.26): Shantell Sans carries tall ascenders and
 * deep descenders, so the designer's .98 leading has the two- and three-line
 * titles collide letter-to-letter. Loosen the display headings; single-line
 * titles are untouched because leading only shows up on a wrap.
 */
.hero h1,
.section-title { line-height: 1.14; }
.partner-name-mark,
.provider-card h3,
.service-card h3 { line-height: 1.3; }

/*
 * Footer brand column, same review: the client's combined stacked mark carries
 * the FRAN logo, the tagline and "Professionally Managed By Fostering Hope
 * Initiative" in one image, replacing the three stacked blocks that were there.
 * Lives in img/ (not assets/) — assets/ is the designer's untouched delivery.
 * max-height has to be cleared: the old rule capped the wordmark at 88px.
 */
.footer-logo-card img {
  width: min(320px, 72vw);
  max-height: none;
}

/*
 * Find Support cards: the pipe-separated category run wrapped mid-phrase and
 * read as one blur, so each category is its own line now (client 9.16.26).
 */
ul.partner-categories {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.partner-categories li { line-height: 1.55; }

/*
 * Client review 9.16.26 (round two).
 *
 * Footer mark: "hard to read/see — if it could fill more of this space, that
 * would be great". The brand column is 1.35fr of the 1160px footer grid, so
 * ~485px is the usable width; 350 after two rounds (460 and 400 both read big at xl).
 */
.footer-logo-card img { width: min(350px, 80vw); }

/*
 * About page photo: the FRAN sign reads vertically down the wall and the N is
 * the last letter, sitting low in the frame — a centered cover crop at 280px
 * tall cut it in half. Anchor the crop to the bottom: the sky/roofline at the
 * top is what gets trimmed instead, and the whole sign survives.
 */
.about-page-photo img { object-position: center bottom; }

/*
 * Below 900px the footer grid stacks to one column (styles.css), so the
 * left-aligned mark sits over centered-looking columns and the contact block
 * lands beneath it ragged-left. Center the whole footer once it stacks — the
 * inline-flex logo card shrink-wraps its image, so text-align carries it too.
 */
@media (max-width: 900px) {
  .footer { text-align: center; }
  .footer-logo-card img { object-position: center; }
}

/*
 * Need Navigator flyers (feed addition, Sept 2026). Image flyers render as a
 * capped thumbnail linking to the full file; PDFs get a plain link that names
 * the type and size. The description stays the accessible version.
 */
.sh-event__flyer { margin: .7rem 0 0; }
.sh-event__flyer-image {
  display: block;
  width: min(100%, 220px);
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.sh-event__flyer-link--file { font-size: .9rem; font-weight: 800; color: var(--color-blue-dark); }
.sh-event__flyer-meta { font-weight: 400; color: var(--color-muted); }

/*
 * Client review 9.17.26.
 *
 * Footer: the link column started a line lower than "Contact FRAN" because its
 * <p> kept the browser's 1em top margin on top of the 2.1 leading. Zero the
 * margin and pull the first line box up by half the leading difference
 * ((2.1 - 1.65) / 2) so the two headings share a line.
 */
.footer-links p { margin: -.225em 0 0; }

/*
 * Contact page opener is now a photo banner: the windows shot that sat under
 * the map moves behind the heading. A gradient keeps the white type readable
 * over the bright cladding; min-height (not height) so the Spanish copy can run
 * long on a phone without clipping the lead.
 */
.page-head--banner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 400px;
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  border-bottom: 0;
  background: var(--color-blue-dark) url('/sites/fransalem/assets/photos/fran-windows.jpg') center 40% / cover no-repeat;
  color: var(--color-white);
}
.page-head--banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .55));
}
.page-head--banner .eyebrow,
.page-head--banner .section-title,
.page-head--banner .lead { color: var(--color-white); }

/*
 * Contact columns: the map stretches to the height of the info cards beside it
 * (a stretched grid item has a definite height, so the 100% chain resolves).
 * Under 900px the grid stacks and the cards go first, so the address and email
 * are the first thing a phone visitor sees; the map follows at a fixed height.
 */
.contact-page-layout { align-items: stretch; }
.contact-page-layout .contact-map { height: 100%; min-height: 380px; }
.contact-map iframe { height: 100%; min-height: 380px; }
@media (max-width: 900px) {
  .contact-page-layout > .stack:first-child { order: 2; }
  .contact-page-layout .contact-map,
  .contact-map iframe { height: 380px; }
}

/*
 * Events empty state (Sept 2026): FRAN has no classes in Need Navigator yet,
 * so the feed is empty by design. The page says so instead of showing a
 * heading over blank space.
 */
.sh-events--empty {
  margin: 0 auto;
  max-width: 36rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-light-grey);
  text-align: center;
}
.sh-events__empty { margin: 0; color: var(--color-text); font-size: 1.02rem; line-height: 1.6; }
.sh-events__empty a { font-weight: 800; color: var(--color-blue-dark); }