/* =====================================================================
   StartFosterCare.org — sitewide header, footer, and brand alignment
   Replace your Customizer Additional CSS with this entire file.
   /wp-admin/customize.php?autofocus[section]=custom_css
   ===================================================================== */

/* -------- BRAND TOKENS (reference) ----------------------------------
   Ink:          #1f1a14
   Accent:       #b4552f   (terracotta — primary)
   Accent dark:  #943f1f   (hover/active)
   Accent soft:  #d97757   (on dark bg)
   Bg warm:      #f7f2ec
   Body:         #6b5f51
   ------------------------------------------------------------------ */

/* -------- TYPOGRAPHY: Inter for everything -------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body,
body p,
body li,
body a,
body input,
body textarea,
body button,
.wp-site-blocks * {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

body h1, body h2, body h3, body h4, body h5, body h6,
.wp-site-blocks h1, .wp-site-blocks h2, .wp-site-blocks h3 {
  font-family: 'Inter', system-ui, sans-serif !important;
  letter-spacing: -0.01em;
}

/* Default heading color on light bg — but NOT inside dark callouts/footers */
body h1:not(.sfc-callout-h2):not(.sfc-callout-h3):not(.jfc-callout-h2),
body h2:not(.sfc-callout-h2):not(.sfc-callout-h3):not(.jfc-callout-h2),
body h3:not(.sfc-callout-h2):not(.sfc-callout-h3):not(.jfc-callout-h2),
body h4:not(.sfc-callout-h2):not(.sfc-callout-h3):not(.jfc-callout-h2),
body h5:not(.sfc-callout-h2):not(.sfc-callout-h3):not(.jfc-callout-h2),
body h6:not(.sfc-callout-h2):not(.sfc-callout-h3):not(.jfc-callout-h2) {
  color: #1f1a14;
}

/* Force white headings inside any dark-context wrapper */
.sfc-callout-inner h1, .sfc-callout-inner h2, .sfc-callout-inner h3,
.sfc-callout-inner .sfc-callout-h2,
.jfc-callout-wrap h1, .jfc-callout-wrap h2, .jfc-callout-wrap h3,
.sfc-footer-wrap h1, .sfc-footer-wrap h2, .sfc-footer-wrap h3,
.sfc-footer-wrap h4,
.sfc-tp-footer h1, .sfc-tp-footer h2, .sfc-tp-footer h3, .sfc-tp-footer h4,
footer.wp-block-template-part h1, footer.wp-block-template-part h2,
footer.wp-block-template-part h3, footer.wp-block-template-part h4 {
  color: #ffffff !important;
}

/* Soften body text to brand body color */
body, body p { color: #2a2520; }

/* Logo link — kill the black focus box */
header.wp-block-template-part .wp-block-site-logo a,
header.wp-block-template-part .wp-block-site-logo a:focus,
header.wp-block-template-part .wp-block-site-logo a:focus-visible,
header.wp-block-template-part .wp-block-site-logo a:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}
header.wp-block-template-part .wp-block-site-logo a:focus-visible img {
  outline: 2px solid rgba(180, 85, 47, 0.4);
  outline-offset: 4px;
  border-radius: 4px;
}

/* -------- HEADER: clean white, sticky, branded ---------------------- */
/* Force pure white on every layer that could bleed gray from the theme */
.wp-site-blocks > header,
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > .wp-block-template-part:first-child,
header.wp-block-template-part,
header.wp-block-template-part > div,
header.wp-block-template-part > .wp-block-group,
header.wp-block-template-part .wp-block-group.is-layout-flex,
header.wp-block-template-part .wp-block-group.alignwide,
header.wp-block-template-part .wp-block-group.alignfull {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

.wp-site-blocks > header,
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > .wp-block-template-part:first-child,
header.wp-block-template-part {
  border-bottom: 1px solid #e8e1d3 !important;
  box-shadow: 0 1px 0 rgba(31, 26, 20, 0.04), 0 8px 24px rgba(31, 26, 20, 0.06) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  padding-left: 80px !important;
  padding-right: 80px !important;
  margin-top: 0 !important;
  /* NOT flex — leave the header as a normal block so its single child fills it */
  display: block !important;
}

/* Inner wrapper: full-width, no extra constraint, just flex the logo + nav */
header.wp-block-template-part > .wp-block-group,
header.wp-block-template-part > div:first-child,
header.wp-block-template-part .wp-block-group.is-layout-flex {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 24px !important;
}

/* Logo block: pinned to the left, never shrinks */
header.wp-block-template-part .wp-block-site-logo {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  order: -1 !important;
}

/* The image inside the logo block — keep its rendered size */
header.wp-block-template-part .wp-block-site-logo img {
  flex-shrink: 0 !important;
}

/* Force the site-logo block to hug the left edge of its container */
header.wp-block-template-part .wp-block-site-logo {
  margin-left: 0 !important;
  margin-right: auto !important;
  padding-left: 0 !important;
}

/* Push the navigation to the right edge & keep items inline */
header.wp-block-template-part .wp-block-navigation {
  margin-left: auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}
header.wp-block-template-part .wp-block-navigation__container,
header.wp-block-template-part .wp-block-navigation > ul {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
header.wp-block-template-part .wp-block-navigation-item {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Nav links — ink on white, terracotta on hover, slightly more weight */
header.wp-block-template-part .wp-block-navigation a,
header.wp-block-template-part .wp-block-navigation-item__content {
  color: #1f1a14 !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  letter-spacing: -0.005em !important;
  transition: color 0.15s ease !important;
}
header.wp-block-template-part .wp-block-navigation a:hover,
header.wp-block-template-part .wp-block-navigation-item__content:hover,
header.wp-block-template-part .wp-block-navigation .current-menu-item > a {
  color: #b4552f !important;
}

/* Logo — bigger so the lockup tagline is legible */
header.wp-block-template-part .wp-block-site-logo,
header.wp-block-template-part .wp-block-site-logo a {
  display: block;
  line-height: 0;
}
header.wp-block-template-part .wp-block-site-logo img {
  max-height: 64px !important;
  height: 64px !important;
  width: auto !important;
  display: block !important;
}

/* Hide any leftover Site Title text block next to the logo (lockup includes it) */
header.wp-block-template-part .wp-block-site-title {
  display: none !important;
}

/* Surrounding viewport: ensure nothing gray bleeds in around a sticky header */
body, html { background: #ffffff !important; }
.wp-site-blocks { padding-top: 0 !important; background: #ffffff; }

/* -------- THEME FOOTER (interior pages) ----------------------------- */
footer.wp-block-template-part,
.wp-site-blocks > footer,
.wp-site-blocks > .wp-block-template-part:last-child {
  background: #1f1a14 !important;
  color: #cfcabe;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 56px 32px 32px;
  margin-top: 64px;
}

footer.wp-block-template-part > .wp-block-group,
footer.wp-block-template-part .wp-block-group.is-layout-flow,
footer.wp-block-template-part .wp-block-group.is-layout-constrained {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  background: transparent !important;
  color: #cfcabe;
}

footer.wp-block-template-part p,
footer.wp-block-template-part li {
  color: #cfcabe;
  font-size: 14px;
  line-height: 1.7;
}

footer.wp-block-template-part h1,
footer.wp-block-template-part h2,
footer.wp-block-template-part h3,
footer.wp-block-template-part h4,
footer.wp-block-template-part h5,
footer.wp-block-template-part h6 {
  color: #ffffff !important;
  font-weight: 600;
}

footer.wp-block-template-part a {
  color: #cfcabe;
  text-decoration: none;
  transition: color 0.15s ease;
}
footer.wp-block-template-part a:hover {
  color: #d97757;
  text-decoration: underline;
}

/* Block-based template-part footer */
.sfc-tp-footer {
  background: #1f1a14 !important;
  color: #cfcabe !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  position: relative !important;
}
.sfc-tp-footer > .wp-block-group__inner-container,
.sfc-tp-footer .wp-block-columns {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.sfc-tp-brand-h { color: #ffffff !important; font-size: 18px !important; font-weight: 600 !important; margin: 0 0 8px 0 !important; }
.sfc-tp-brand-p { color: #9c9485 !important; font-size: 14px !important; line-height: 1.5 !important; margin: 0 !important; max-width: 280px !important; }
.sfc-tp-col-h { color: #ffffff !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; margin: 0 0 16px 0 !important; }
.sfc-tp-col-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.sfc-tp-col-list li { margin-bottom: 10px !important; color: #cfcabe !important; font-size: 14px !important; }
.sfc-tp-col-list a, .sfc-tp-footer a { color: #cfcabe !important; text-decoration: none !important; font-size: 14px !important; }
.sfc-tp-col-list a:hover, .sfc-tp-footer a:hover { color: #d97757 !important; text-decoration: underline !important; }
.sfc-tp-sep { border: none !important; border-top: 1px solid #2a2520 !important; margin: 8px 0 24px !important; background: transparent !important; }
.sfc-tp-bottom-p { color: #9c9485 !important; font-size: 13px !important; margin: 0 !important; }
.sfc-tp-bottom-right a { color: #9c9485 !important; text-decoration: underline !important; }
.sfc-tp-bottom-right a:hover { color: #ffffff !important; }

/* -------- HOMEPAGE: hide theme footer (custom one is embedded) ------ */
body.home > .wp-site-blocks > footer.wp-block-template-part,
body.page-id-35 > .wp-site-blocks > footer.wp-block-template-part {
  display: none !important;
}

/* Custom homepage footer — full-bleed and dark */
.sfc-footer-wrap {
  display: block !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  background: #1f1a14 !important;
}
body.home .wp-block-post-content,
body.home main,
body.page-id-35 .wp-block-post-content,
body.page-id-35 main,
body.page-id-35 article {
  overflow: visible !important;
  max-width: 100% !important;
}
html, body { overflow-x: hidden !important; }

/* -------- INTERIOR PAGES: kill empty space ------------------------- */
body:not(.home) main,
body:not(.page-id-35) main,
body:not(.home) .wp-site-blocks,
body:not(.page-id-35) .wp-site-blocks {
  min-height: auto !important;
}

/* -------- BRAND COLOR ALIGNMENT (override stale rust where possible)  */
/* Any element using the old #d8613c gets the brand terracotta */
[style*="#d8613c"] { color: #b4552f !important; }
[style*="background:#d8613c"], [style*="background-color:#d8613c"] { background: #b4552f !important; }

/* -------- KILL Jetpack share & like ---------------------------------- */
.sharedaddy, .sd-sharing-enabled, .jp-sharing-input-touch, .jp-relatedposts,
div#jp-post-flair, .sd-block, .wp-block-jetpack-sharing-buttons,
.sharedaddy.sd-likes, .sd-like, .jetpack-likes-widget-wrapper,
.jetpack-likes-widget-unloaded, .jetpack-likes-widget-loaded,
#like-post-wrapper, .wp-block-jetpack-like { display: none !important; }

/* -------- MOBILE ----------------------------------------------------- */
@media (max-width: 768px) {
  header.wp-block-template-part {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  header.wp-block-template-part > .wp-block-group,
  header.wp-block-template-part .wp-block-group.is-layout-flex {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Mobile logo: full lockup including tagline */
  header.wp-block-template-part .wp-block-site-logo img {
    max-height: 44px !important;
    height: 44px !important;
    width: auto !important;
    max-width: 260px !important;
  }

  footer.wp-block-template-part,
  .wp-site-blocks > footer,
  .wp-site-blocks > .wp-block-template-part:last-child {
    padding: 40px 20px 28px;
    margin-top: 40px;
  }
  .sfc-tp-footer { padding: 32px 20px 20px !important; }
  .sfc-tp-footer-cols { flex-direction: column !important; gap: 24px !important; }

  /* Better headline wrapping on small screens */
  h1, h2, h3,
  .sfc-hero-h1, .sfc-section-h2, .sfc-callout-h2,
  .jfc-h1, .jfc-section-h2, .jfc-callout-h2,
  .abt-hero-h1, .abt-section-h2, .abt-cta-h2,
  .sfc-contact-h1 {
    text-wrap: balance;
    word-break: normal;
    overflow-wrap: break-word;
  }

  /* Tighter eyebrow letter-spacing on mobile so labels don't drop a word */
  .sfc-hero-eyebrow, .sfc-section-eyebrow, .sfc-callout-eyebrow,
  .jfc-eyebrow, .jfc-section-eyebrow, .jfc-callout-eyebrow,
  .abt-hero-eyebrow, .abt-section-eyebrow, .abt-cta-eyebrow,
  .sfc-contact-eyebrow {
    letter-spacing: 0.08em !important;
    font-size: 12px !important;
    text-wrap: balance;
  }

  /* Slightly looser body line height for easier reading on small screens */
  .sfc-hero-sub, .sfc-section-lede, .jfc-lede, .jfc-section-lede,
  .abt-hero-lede, .sfc-contact-lede {
    font-size: 17px !important;
    line-height: 1.6 !important;
  }
}

/* Extra-small phones (< 420px): even smaller logo */
@media (max-width: 420px) {
  header.wp-block-template-part {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  header.wp-block-template-part .wp-block-site-logo img {
    max-height: 38px !important;
    height: 38px !important;
    max-width: 220px !important;
  }
}