/* Site chrome for financialwellness4acause.com: header (partials/header.html) and the GRC footer (partials/footer.html).
   Colours = GRC brand: navy #1a2d5a, blue #044389, gold #FFD700. */

/* Header: 95% of the viewport width in any device or orientation. */
.fw-header { position: relative; z-index: 80; width: 95%; margin: 0 auto; box-sizing: border-box;
  background: linear-gradient(90deg, #1a2d5a, #044389); color: #fff; border-radius: 0 0 .9rem .9rem;
  box-shadow: 0 6px 22px rgba(10, 20, 45, .18); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.fw-header *, .fw-header *::before, .fw-header *::after { box-sizing: border-box; }
.fw-header__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem 1.5rem; padding: .8rem clamp(.9rem, 2.5vw, 2rem) .6rem; }
.fw-header__nav { display: flex; align-items: center; justify-content: flex-end; padding: .35rem clamp(.9rem, 2.5vw, 2rem) .6rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.fw-brand { display: flex; align-items: center; gap: .65rem; color: #fff; text-decoration: none; min-width: 0; }
/* Left-corner logo: Trish's photo, the same image as the chatbot button. */
.fw-brand__logo { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; object-position: center top;
  border: 2px solid #FFD700; box-shadow: 0 0 0 3px rgba(255, 215, 0, .18); background: #fff; }
.fw-brand__text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.fw-brand__text strong { font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 800; letter-spacing: .01em; white-space: nowrap; }
.fw-brand__text em { font-style: normal; color: #FFD700; }
.fw-brand__text small { font-size: .78rem; color: #ccd4e0; letter-spacing: .02em; margin-top: .15rem; }
.fw-serving { display: flex; align-items: center; gap: .35rem; margin-top: .3rem; font-size: .72rem; font-weight: 700; color: #FFD700; letter-spacing: .03em; }
.fw-serving img { width: 1.5rem; height: 1rem; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); display: block; }
.fw-menu-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.fw-menu-btn { display: none; }
.fw-nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .2rem .4rem; }
.fw-nav a { color: #e6ebf3; text-decoration: none; font-size: .9rem; font-weight: 600; padding: .45rem .65rem; border-radius: .45rem; }
.fw-nav a:hover, .fw-nav a:focus-visible { color: #FFD700; background: rgba(255, 255, 255, .08); }
.fw-nav a.fw-nav__cta { background: #FFD700; color: #1a2d5a; font-weight: 800; padding: .5rem .95rem; }
.fw-nav a.fw-nav__cta:hover { background: #fff; color: #1a2d5a; }
@media (max-width: 899px) {
  .fw-menu-btn { display: flex; flex-direction: column; justify-content: center; gap: 4px; flex: none; width: 2.6rem; height: 2.6rem; padding: .55rem; border-radius: .5rem; background: rgba(255, 255, 255, .1); cursor: pointer; }
  .fw-menu-btn span { display: block; height: 2px; background: #fff; border-radius: 2px; }
  .fw-menu-toggle:focus-visible + .fw-menu-btn { outline: 2px solid #FFD700; outline-offset: 2px; }
  .fw-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch;
    background: #1a2d5a; padding: .6rem; border-radius: 0 0 .9rem .9rem; box-shadow: 0 12px 26px rgba(10, 20, 45, .28); }
  .fw-menu-toggle:checked ~ .fw-nav { display: flex; }
  .fw-nav a { padding: .7rem .8rem; }
  .fw-header { border-radius: 0 0 .7rem .7rem; }
}
@media (max-width: 420px) { .fw-brand__logo { width: 3rem; height: 3rem; } .fw-brand__text strong { font-size: .95rem; } .fw-brand__text small { font-size: .7rem; } }
/* Header stands apart from the lesson below it: gold rule and breathing room. */
.fw-header { border-bottom: 3px solid #FFD700; margin-bottom: clamp(1.25rem, 3vw, 2.25rem); }
.fw-cta { display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem; padding: .55rem 1.1rem; border-radius: 999px; background: #FFD700; color: #1a2d5a;
  font-weight: 800; font-size: .92rem; text-decoration: none; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); transition: transform .15s, background .15s; }
.fw-cta:hover, .fw-cta:focus-visible { background: #fff; transform: translateY(-1px); }

/* Trish's qualifications (same badges as the GRC header) and the "Connect with Trish" icons. */
.fw-quals { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.fw-quals__badges { display: flex; align-items: center; gap: .4rem; }
.fw-quals__badges img { height: 32px; width: auto; background: #fff; border-radius: .2rem; padding: 2px; display: block; }
.fw-meet { display: inline-flex; flex-direction: column; align-items: center; margin-left: .4rem; color: #fff; text-decoration: none; line-height: 1; }
.fw-meet span { font-size: 1.35rem; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .22)); }
.fw-meet b { color: #FFD700; font-size: .56rem; font-weight: 900; letter-spacing: .08em; margin-top: .15rem; }
.fw-meet:hover b { color: #fff; }
.fw-quals__note { font-size: .7rem; font-weight: 600; color: rgba(255, 255, 255, .8); letter-spacing: .03em; text-align: center; }
.fw-connect { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.fw-connect__label { font-size: .68rem; font-weight: 800; color: #FFD700; letter-spacing: .08em; text-transform: uppercase; }
.fw-social { display: flex; gap: .45rem; }
.fw-social a { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .42); color: #fff; text-decoration: none; transition: all .2s; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.fw-social a:hover, .fw-social a:focus-visible { background: #FFD700; border-color: #FFD700; color: #1a2d5a; transform: translateY(-2px); }
.fw-social a svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.fw-social a[data-tooltip]::before { content: attr(data-tooltip); position: absolute; left: 50%; top: calc(100% + .4rem); transform: translateX(-50%); padding: .25rem .45rem;
  border-radius: .35rem; background: rgba(8, 18, 42, .96); border: 1px solid rgba(255, 215, 0, .42); color: #fff; font-size: .68rem; font-weight: 800; white-space: nowrap;
  pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .12s; z-index: 5; }
.fw-social a[data-tooltip]:hover::before, .fw-social a[data-tooltip]:focus-visible::before { opacity: 1; visibility: visible; }
@media (max-width: 1100px) {
  .fw-header__inner { justify-content: center; }
  .fw-brand { flex: 1 1 100%; justify-content: center; }
  .fw-connect { align-items: center; }
}
@media (max-width: 899px) {
  .fw-header__nav { justify-content: space-between; }
  .fw-header__nav::before { content: "Menu"; font-size: .8rem; font-weight: 700; color: #ccd4e0; letter-spacing: .05em; }
}
@media (max-width: 580px) {
  .fw-header__inner { gap: .6rem .9rem; }
  .fw-brand { justify-content: flex-start; }
  .fw-quals__badges img { height: 26px; }
  .fw-meet span { font-size: 1.1rem; }
  .fw-quals__note { font-size: .62rem; }
  .fw-social { gap: .3rem; }
  .fw-social a { width: 30px; height: 30px; }
  .fw-social a svg { width: 15px; height: 15px; }
  .fw-connect__label { font-size: .6rem; }
  .fw-cta { font-size: .85rem; padding: .5rem 1rem; }
}

/* /review/ (the first draft page) had its own header; the site header replaces it. Its own footer stays (disclosures). */
.fw-header ~ .site-head { display: none; }

/* Footer: same markup and rules as the GRC Cloudflare Worker pages (grc-shared/grc-shell.js). */
.grc-footer, .grc-footer * { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; box-sizing: border-box; }
.grc-footer { display: block !important; visibility: visible !important; background: #1a2d5a; color: #ccd4e0; padding: 3rem 1.5rem 1.5rem; position: relative; z-index: 80; text-align: left; }
.grc-footer-inner { max-width: 1200px; margin: 0 auto; }
.grc-footer-grid { display: grid; grid-template-columns: 2fr 1.5fr 1fr 1.2fr; gap: 2rem; }
.grc-footer h4 { color: #FFD700; font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; margin: 0 0 .9rem; font-weight: 800; }
.grc-footer ul { list-style: none; margin: 0; padding: 0; }
.grc-footer ul li { margin-bottom: .45rem; }
.grc-footer ul li a { color: #ccd4e0; text-decoration: none; font-size: .83rem; }
.grc-footer ul li a:hover { color: #FFD700; }
.grc-footer ul li span { font-size: .83rem; }
.grc-footer p { font-size: .83rem; line-height: 1.7; margin: 0; color: #ccd4e0; }
.grc-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 1.1rem; margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; font-size: .76rem; color: rgba(255, 255, 255, .45); }
.grc-footer-bottom a { color: rgba(255, 255, 255, .45); text-decoration: none; }
.grc-footer-bottom a:hover { color: #FFD700; }
.footer-social-row { display: flex; gap: .6rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.footer-social-row a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .15); color: #ccd4e0; text-decoration: none; transition: all .2s; }
.footer-social-row a:hover { background: #FFD700; border-color: #FFD700; color: #1a2d5a; transform: translateY(-2px); }
.footer-social-row a svg { width: 17px; height: 17px; fill: currentColor; }
.badge-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; align-items: center; }
.badge-row img { height: 38px; width: auto; border-radius: .2rem; background: #fff; padding: 2px; }
@media (max-width: 900px) { .grc-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .grc-footer-grid { grid-template-columns: 1fr; } }
/* Footer brand block (Financial Wellness in place of the GRC long logo). */
.fw-foot-brand { display: inline-flex; align-items: center; gap: .65rem; margin-bottom: .9rem; color: #fff; text-decoration: none; }
.fw-foot-brand img { width: 3.25rem; height: 3.25rem; border-radius: 50%; object-fit: cover; object-position: center top; border: 2px solid #FFD700; }
.fw-foot-brand span { display: flex; flex-direction: column; line-height: 1.2; }
.fw-foot-brand strong { font-size: 1.05rem; font-weight: 800; }
.fw-foot-brand em { font-style: normal; color: #FFD700; }
.fw-foot-brand small { font-size: .74rem; color: #ccd4e0; }
/* Homepage: the side folio stays hidden on the opening section (the page itself names the lesson there). */
.folio:has(.folio__num:empty):has(.folio__title:empty) { display: none; }

/* Account menu: user icon at the top right of the header, like the GRC header's profile dropdown. */
.fw-header__inner { position: relative; }
.fw-account-slot { order: 10; display: flex; align-items: flex-start; align-self: flex-start; }
.fw-account { position: relative; }
.fw-account__btn { list-style: none; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .42); color: #fff; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); transition: all .2s; }
.fw-account__btn::-webkit-details-marker { display: none; }
.fw-account__btn svg { width: 20px; height: 20px; fill: currentColor; }
.fw-account__btn:hover, .fw-account[open] .fw-account__btn { background: #FFD700; border-color: #FFD700; color: #1a2d5a; }
.fw-account__dot { position: absolute; right: 1px; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: #22c55e; border: 2px solid #1a2d5a; }
.fw-account__menu { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 120; min-width: 250px; max-width: min(92vw, 300px); padding: .45rem;
  background: linear-gradient(180deg, #0d1f45, #132d60); border: 1px solid rgba(115, 160, 255, .2); border-radius: .9rem; box-shadow: 0 18px 44px rgba(0, 0, 0, .42); }
.fw-account__hello { margin: .3rem .6rem .45rem; font-size: .72rem; color: #FFD700; font-weight: 700; letter-spacing: .03em; }
.fw-account__menu a { display: block; padding: .62rem .7rem; border-radius: .55rem; color: #e6ebf3; text-decoration: none; font-size: .9rem; font-weight: 600; }
.fw-account__menu a:hover, .fw-account__menu a:focus-visible { background: rgba(255, 255, 255, .09); color: #FFD700; }
@media (min-width: 1101px) { .fw-connect { margin-left: auto; } }
@media (max-width: 1100px) {
  .fw-account-slot { position: absolute; top: .8rem; right: clamp(.9rem, 2.5vw, 2rem); }
  .fw-brand { padding-right: 3.2rem; }
}
@media (max-width: 580px) { .fw-account__btn { width: 38px; height: 38px; } .fw-account-slot { top: .7rem; right: .7rem; } }

/* "Save this lesson" buttons added by /assets/fw-save.js. */
.fw-save { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: 999px; border: 1.5px solid #1a2d5a; background: #fff; color: #1a2d5a;
  font: 700 .85rem/1 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; cursor: pointer; transition: all .15s; }
.fw-save:hover { background: #1a2d5a; color: #fff; }
.fw-save[aria-pressed="true"] { background: #FFD700; border-color: #e0bd00; color: #1a2d5a; }
.fw-save-row { margin: 1rem 0 0; }
.fw-toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 2000; max-width: min(92vw, 440px); padding: .8rem 1rem; border-radius: .7rem;
  background: #1a2d5a; color: #fff; font: 600 .9rem/1.4 Inter, -apple-system, sans-serif; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); }
.fw-toast a { color: #FFD700; }
/* Save buttons sit above the lesson's animated layers (step three's peak section covers its own text otherwise). */
.fw-save-row { position: relative; z-index: 45; pointer-events: auto; }
.fw-save { position: relative; z-index: 45; pointer-events: auto; }