/* ============================================================
   MORTGAGE PTSD — UNIVERSAL CHROME SKIN
   ------------------------------------------------------------
   The look of the shared header and footer, in ONE place, for every
   page on the site. Pairs with assets/chrome.js, which owns the
   markup. Load this LAST in <head> (after site-1.css and after any
   page-level <style>) so it wins on equal specificity:

       <link rel="stylesheet" href="assets/chrome.css" />

   Before this existed the footer was defined four separate times and
   the sub-pages had drifted to a transparent footer while the home
   page had a navy one, which is the main reason the pages felt like
   different websites.
============================================================ */

/* Images are wrapped in <picture> so the browser can pick AVIF/WebP and fall
   back to the original raster. `display: contents` makes that wrapper vanish
   from layout, so every existing `.some-parent img { ... }` rule and every
   flex/grid parent keeps behaving exactly as it did when the <img> was the
   direct child. Without this, `.footer-marks img { height: 48px }` would size
   the img but the <picture> flex item around it would be free to shrink. */
picture { display: contents; }

/* ---- FOOTER: navy panel, light text, pink accents ---- */
.footer {
  padding: 76px 0 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  background: #16213e;
  color: #ffffff;
  /* Redefining the text tokens locally flips every descendant to the
     light-on-navy treatment without needing a rule per element. */
  /* Pink and gold TEXT go back to the bright values on this navy
     surface: #ff4d8d is 5.07:1 here, and the darker --accent-text
     would drop to 3.10:1. Same reason --light flips above. */
  --accent-text: var(--accent);
  --gold-text: var(--gold);
  --light: #ffffff;
  --light-dim: rgba(255, 255, 255, 0.76);
  --light-mute: rgba(255, 255, 255, 0.50);
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);
}
.footer-grid { margin-bottom: 40px; }
.footer a { color: rgba(255, 255, 255, 0.76); }
.footer a:hover { color: #ffffff; }
.footer-states strong { color: var(--accent-text); }
.footer-col h5 { color: var(--accent-text); }
.footer-social a { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.22); color: #ffffff; }

.footer-disclaimer {
  padding-top: 36px; margin-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; flex-direction: column; gap: 14px;
}
.footer-legal-head {
  font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--accent-text); margin: 0 0 4px; font-weight: 800;
}
/* The Barrett wordmark and the Equal Housing marks are dark artwork and
   all but vanished on navy, so they are knocked out to white. */
.footer-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 38px; padding-bottom: 6px; }
.footer-marks a { display: inline-flex; }
.footer-marks img { filter: brightness(0) invert(1); opacity: 0.85; width: auto; display: block; }
.footer-marks a img { height: 48px; }
.footer-marks > img { height: 40px; }
/* MortgagePTSD badge sits immediately left of "powered by Barrett" so the two
   read as one lockup. */
.footer-lockup { display: inline-flex; align-items: center; gap: 16px; }
/* The badge is a full-colour brand mark, so it must escape the white knockout
   applied to the Barrett / Equal Housing marks. Specificity beats the rule
   above without needing !important. */
.footer-marks .footer-mark-logo { filter: none; opacity: 1; height: 58px; }
@media (max-width: 480px) {
  .footer-lockup { gap: 12px; }
  .footer-marks .footer-mark-logo { height: 46px; }
  .footer-marks a img { height: 40px; }
}
.footer-nmls { color: #ffffff; }
.footer-nmls a, .footer-disclaimer a { color: var(--accent-text); }
.footer-nmls a:hover, .footer-disclaimer a:hover { color: var(--accent-soft, #ff6fa6); }

/* Long legal URLs must be allowed to break rather than widen the page.
   Scoped to links inside prose so nav items and buttons keep nowrap.
   A bare nmlsconsumeraccess.org URL was pushing the disclaimers page
   124px wider than a 375px phone. */
.footer-disclaimer, .footer-disclaimer p, .footer-disclaimer a,
.footer p, .footer a,
p a, li a, dd a { overflow-wrap: anywhere; word-break: break-word; }

/* ---- HEADER: white glass bar ---- */
.nav { background: rgba(255, 255, 255, 0.72); border-bottom: 1px solid rgba(22, 33, 62, 0.12); }
.nav.scrolled { background: rgba(255, 255, 255, 0.90); box-shadow: 0 10px 30px -14px rgba(22, 33, 62, 0.18); }
.nav-links a { color: #16213e; font-weight: 700; }
.nav-links a:hover, .nav-links a.current { color: var(--accent-text); }
.mobile-menu { background: rgba(255, 255, 255, 0.98); }
.mobile-menu li > a { color: #16213e; }
/* "Schedule a Call" is an outline button on white, so it needs ink text.
   Some pages still carried the dark theme's white-on-white version. */
.nav .btn-neumorphic { color: #16213e; }
.nav .btn-primary { color: #ffffff; }
.hamburger span, .hamburger span::before, .hamburger span::after { background: #16213e; }
.hamburger.open span { background: transparent; }
