/**
 * TODO (https://sofiinc.atlassian.net/browse/MGROWTH-5961): Utilize CSS tokens from
 * supernova->wordpress token exporter pipeline (Pacific tokens)
 */

/*
 * Guarantee the same TT Norms font files are used on every template.
 * Template-specific bundles (builder.min.css, sofiv4-wrapper.css) either
 * omit weight 500 entirely or point weights to a different CDN path (/v3/).
 * global-footer.css is enqueued after SOFI_CSS (declared as a dependency),
 * so these declarations override any earlier conflicting @font-face rules.
 */
@font-face {
  font-family: "TT Norms";
  src: url("https://d32ijn7u0aqfv4.cloudfront.net/assets/fonts/TTNorms.woff2") format("woff2"),
       url("https://d32ijn7u0aqfv4.cloudfront.net/assets/fonts/TTNorms.woff") format("woff"),
       url("https://d32ijn7u0aqfv4.cloudfront.net/assets/fonts/TTNorms.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TT Norms";
  src: url("https://d32ijn7u0aqfv4.cloudfront.net/fonts/TTNorms-medium.woff2") format("woff2"),
       url("https://d32ijn7u0aqfv4.cloudfront.net/fonts/TTNorms-medium.woff") format("woff"),
       url("https://d32ijn7u0aqfv4.cloudfront.net/fonts/TTNorms-medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TT Norms";
  src: url("https://d32ijn7u0aqfv4.cloudfront.net/assets/fonts/TTNorms-bold.woff2") format("woff2"),
       url("https://d32ijn7u0aqfv4.cloudfront.net/assets/fonts/TTNorms-bold.woff") format("woff"),
       url("https://d32ijn7u0aqfv4.cloudfront.net/assets/fonts/TTNorms-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Outer wrapper ───────────────────────────────────────────────────────── */

.sofi-gftr {
  background-color: #f0eeeb;
  font-family: "TT Norms", -apple-system, BlinkMacSystemFont, sans-serif;
  color: #1a1919;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "pnum";
}

/* ── Base resets ─────────────────────────────────────────────────────────── */
/*
 * sofi-header-footer.css scopes { h1…h6, p { margin: 0 0 $small-spacing } }
 * to .header-wrapper, .footer, .subfooter — none of which match .sofi-gftr —
 * so the resets below are for sofi.css / sofiv4-wrapper.css cascade only.
 * Reset proactively to keep layout predictable on all templates.
 */

.sofi-gftr *,
.sofi-gftr *::before,
.sofi-gftr *::after {
  box-sizing: border-box;
}

/*
 * Reset margins only. Do NOT reset font-size/weight/line-height here —
 * doing so via `.sofi-gftr h3` (specificity 0-1-1) would override the BEM
 * class rules `.sofi-gftr__column-heading`
 * (specificity 0-1-0) and cause headings to inherit body styles instead of
 * the explicit 14px / 700 values set in those classes.
 */
.sofi-gftr h3,
.sofi-gftr h4 {
  margin: 0;
}


.sofi-gftr ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sofi-gftr a {
  color: inherit;
  text-decoration: none;
}

/*
 * sofiv4-wrapper.css sets:
 *   .sofi-v4 .header-wrapper button { … } (0-2-1)
 * The footer lives outside .header-wrapper so that rule does not apply here,
 * but defensive button resets prevent bleed from other legacy bundles.
 */
.sofi-gftr button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/*
 * The legacy _footer.scss applies span-columns() (Neat float grid) to
 * .footer__col--signup. Reset float/width so the new CSS Grid layout
 * in .sofi-gftr__inner takes over inside the self-serve footer.
 */
.sofi-gftr .footer__col--signup,
.sofi-gftr .footer__signup {
  float: none;
  width: auto;
  margin-right: 0;
}

/* ── Inner container ─────────────────────────────────────────────────────── */

.sofi-gftr__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px 20px 40px;

  /* Mobile: single flex column; visual order managed via `order` */
  display: flex;
  flex-direction: column;
}

/* ── Visibility utilities (app badge QR / store badge show-hide) ─────────── */
/*
 * QR code:          class="… hide@mobile hide@tablet"  → visible on desktop only
 * App store badges: class="… hide@desktop"             → visible on mobile + tablet
 * Selectors use \@ to escape the @ character in CSS.
 */

.sofi-gftr .hide\@mobile { display: none; }

@media (min-width: 768px) {
  .sofi-gftr .hide\@mobile  { display: block; }
  .sofi-gftr .hide\@tablet  { display: none; }
}

@media (min-width: 992px) {
  .sofi-gftr .hide\@tablet  { display: block; }
  .sofi-gftr .hide\@desktop { display: none; }
}

/* ── Back to top ─────────────────────────────────────────────────────────── */
/* Injected inside the 4th nav column (or last if < 4 exist) by global-footer.php. */

/* Scoped to .sofi-gftr to override .footer button rules from sofi-v4 (specificity 0,2,0 > 0,1,1). */
.sofi-gftr .sofi-gftr__back-to-top {
  display: inline-block;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #1a1919;
  text-decoration: underline;
  text-align: left;
  margin-top: 24px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  min-width: 0;
  cursor: pointer;
}

.sofi-gftr .sofi-gftr__back-to-top:hover {
  color: #00a2c7;
}

.sofi-gftr .sofi-gftr__back-to-top:focus {
  outline: 2px solid #00819d;
  outline-offset: 2px;
}

.sofi-gftr .sofi-gftr__back-to-top:focus:not(:focus-visible) {
  outline: none;
}

.sofi-gftr .sofi-gftr__back-to-top:focus-visible {
  outline: 2px solid #00819d;
  outline-offset: 2px;
}

/* ── Nav columns wrapper ─────────────────────────────────────────────────── */

.sofi-gftr__columns {
  order: 1;
}

/* ── Individual column ───────────────────────────────────────────────────── */

/* ── Column heading (accordion trigger on mobile / tablet) ──────────────── */

.sofi-gftr__column-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #1a1919;
  /*
   * uppercase here is a no-JS fallback only. accordion.js normalizes editors'
   * arbitrary ACF casing to real Title Case in the DOM (toTitleCase()) and
   * adds .sofi-gftr--js — once that runs, the override below lets the actual
   * (already-correct) text show through instead of forcing it back to caps.
   */
  text-transform: uppercase;
  padding: 8px 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
}

.sofi-gftr--js .sofi-gftr__column-heading {
  text-transform: none;
}

/* Mobile/tablet only — applyMobileAria() (accordion.js) wraps the heading
 * text in this <button> for a11y. Browser default button styles don't
 * reliably inherit text-transform/font/color from the parent <h3>, so force
 * them explicitly. Deliberately NOT touching display/width here — the
 * heading's chevron is an ::after sibling laid out via justify-content:
 * space-between, and a full-width button would leave it no room. */
.sofi-gftr__column-heading-btn {
  font: inherit;
  color: inherit;
  text-transform: inherit;
}

/*
 * Chevron indicator — matches Figma glyph-chevronDown (13×7.25 px path in a
 * 16×16 container, per the Figma component spec). The container is always
 * 16×16 px; the path fills 13×7.25 px centred inside it.
 *
 * JS adds .sofi-gftr--js to <footer> (progressive enhancement hook) and
 * .sofi-gftr__column--has-accordion to each accordion column — so the
 * chevron only appears when both JS is active AND the column has a body to
 * toggle. Non-accordion columns (e.g. Legal) never get the marker class and
 * therefore never show a chevron.
 *
 * The desktop @media (min-width: 992px) block below overrides the chevron
 * with the same specificity (0,3,0 vs 0,3,0) so cascade order wins — the
 * later desktop rule hides the chevron on desktop.
 */
.sofi-gftr--js .sofi-gftr__column--has-accordion .sofi-gftr__column-heading::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  /* viewBox matches Figma: 13 wide × 7.25 tall, centred in a 16×16 space.
     Path: left tip (0,7.25) → apex (6.5,0) → right tip (13,7.25).        */
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 5.625l6.5 6.5 6.5-6.5' stroke='%231a1919' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.sofi-gftr--js .sofi-gftr__column--has-accordion.is-open > .sofi-gftr__column-heading::after {
  /* Direct-child combinator: the "Also of Interest" column can be nested
     inside another column's DOM (brightedge-autopilot's front/footer.js).
     A descendant selector here would also rotate that nested column's own
     chevron whenever its parent opens, even though its own is-open state
     is untouched. */
  transform: rotate(180deg); /* flip to point up */
}

/* ── Column body — hidden (collapsed) by default on mobile / tablet ──────── */
/* Only hidden when .sofi-gftr--js is present (added by accordion.js on       */
/* init). Without JS, column bodies are always visible — no content blocked.  */
/* JS adds .is-open to .sofi-gftr__column to reveal. Desktop always shows     */
/* via the @media (min-width: 992px) override below (same specificity, so     */
/* cascade order determines the winner — the later desktop rule wins).        */

.sofi-gftr--js .sofi-gftr__column-body {
  max-height: 0;
  overflow: hidden;
  visibility: hidden; /* removes closed content from tab order and a11y tree */
  margin-top: 0; /* reset any margin inherited from legacy sofi.css / sofiv4-wrapper.css */
  padding-bottom: 0;
  /* visibility delay matches max-height duration — hides after collapse finishes */
  transition: max-height 0.25s ease, padding-bottom 0.25s ease, visibility 0s linear 0.25s;
}

.sofi-gftr--js .sofi-gftr__column.is-open > .sofi-gftr__column-body {
  /* Ceiling sized off the tallest column today: PRODUCTS has 48 items ×
     ~28px (24px line-height + item-link padding) ≈ 1350px, plus margin —
     same ratio the previous 600px cap used for its ~15-item estimate.
     Sized close to real content on purpose: transition-duration is fixed
     at 0.25s, so an oversized value (we tried 5000px) makes the box reach
     its real height almost instantly, which reads as a jump-cut, not an
     animation. If a column grows well past 48 items, bump this again. */
  max-height: 2000px;
  padding-bottom: 8px;
  visibility: visible; /* re-expose to tab order and a11y tree */
  /* no visibility delay on open — content is accessible as soon as expand starts */
  transition: max-height 0.25s ease, padding-bottom 0.25s ease, visibility 0s linear 0s;
}

/* ── Items list ──────────────────────────────────────────────────────────── */

.sofi-gftr__item {
  margin: 0;
  padding: 0;
}

.sofi-gftr__item--bold .sofi-gftr__item-link {
  font-weight: 700;
}

/* ── Item links ──────────────────────────────────────────────────────────── */

.sofi-gftr__item-link {
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 24px;
  color: #1a1919;
  text-decoration: none;
  padding: 2px 0;
}

/* Mobile/tablet only — desktop keeps the 2px base value (and its own
   padding-right override for ellipsis truncation, set separately below). */
@media (max-width: 991px) {
  .sofi-gftr__item-link {
    padding: 8px 0;
  }
}

.sofi-gftr__item-link:hover {
  color: #00a2c7;
  text-decoration: none;
}

.sofi-gftr__item-link:focus {
  outline: 2px solid #00819d;
  outline-offset: 2px;
}

.sofi-gftr__item-link:focus:not(:focus-visible) {
  outline: none;
}

.sofi-gftr__item-link:focus-visible {
  outline: 2px solid #00819d;
  outline-offset: 2px;
}

/*
 * OneTrust privacy toggle link.
 * id="privacy-options-link" is preserved from the legacy footer so OneTrust
 * can attach its SDK behavior without code changes. Color and underline
 * distinguish it from regular nav links per Figma.
 * The SVG toggle icon is rendered inline in global-footer-item.php;
 * inline-flex + gap align it alongside the link text.
 */
#privacy-options-link.sofi-gftr__item-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700; /* TT Norms Bold per Figma */
  /* #00819d only reaches 3.91:1 against this footer's #f0eeeb background —
     below the WCAG 1.4.3 AA minimum of 4.5:1 for 12px bold text (bold text
     only gets the 3:1 large-text exception at >=14pt/~18.66px). #006e86 is
     the same teal darkened just enough to clear 4.5:1 (5.07:1). */
  color: #006e86;
  text-decoration: underline;
}

/* Keeps any img injected by the OneTrust SDK (if present) aligned correctly. */
#privacy-options-link.sofi-gftr__item-link img {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

#privacy-options-link.sofi-gftr__item-link:hover {
  color: #00a2c7;
}

#privacy-options-link.sofi-gftr__item-link:focus:not(:focus-visible) {
  outline: none;
}

#privacy-options-link.sofi-gftr__item-link:focus-visible {
  outline: 2px solid #00819d;
  outline-offset: 2px;
}

/* ── BrightEdge "Also of Interest" ───────────────────────────────────────── */
/*
 * front/footer.js (brightedge-autopilot) renders this content twice, each
 * targeted at one breakpoint — only one is ever visible at a time:
 *   · Desktop (≥992px): a <div class="be-ix-link-block"> nested inside the
 *     anchor column's body, appended after its own items.
 *   · Mobile/tablet (<992px): a standalone .sofi-gftr__column--brightedge,
 *     structured like the other accordion columns (wired by accordion.js's
 *     MutationObserver since it's added after the accordion initialises).
 */

.sofi-gftr [data-gftr-brightedge-anchor] .be-ix-link-block {
  display: none;
  margin-top: 16px;
}

@media (min-width: 992px) {
  .sofi-gftr [data-gftr-brightedge-anchor] .be-ix-link-block {
    display: block;
  }
}

@media (min-width: 992px) {
  .sofi-gftr__column--brightedge {
    display: none;
  }
}

.sofi-gftr .be-ix-link-block h4 {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #1a1919;
  /* Casing is normalized by front/footer.js's toTitleCase() — no text-transform needed here. */
  margin: 0 0 2px;
}

.sofi-gftr .be-ix-link-block li {
  margin: 0;
  padding: 2px 0;
}

.sofi-gftr .be-ix-link-block a {
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 24px;
  color: #1a1919;
  text-decoration: none;
  /* BrightEdge titles are third-party SEO content of variable length; some
     overflow this fixed column width and wrap to 2 lines, breaking the
     single-line rhythm of every other footer item. Truncate to one line.
     padding-right leaves breathing room before the next column — unlike
     the other columns' items, truncated text fills the full column width,
     so without it the ellipsis would sit flush against the next column. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 12px;
}

.sofi-gftr .be-ix-link-block a:hover {
  color: #00a2c7;
  text-decoration: none;
}

/* ── Newsletter / OTM signup section ────────────────────────────────────── */

.sofi-gftr .footer__col--signup {
  order: 3;
  margin-top: 32px;
}

.sofi-gftr .footer__signup {
  width: 100%;
  text-align: left; /* reset legacy sofi-v4 text-align: center inherited from .footer__signup */
}

.sofi-gftr .otm-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sofi-gftr .otm-section > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* prevent flex stretch from expanding img to container width */
  gap: 10px; /* Figma: 9.68px between image bottom and tagline text top */
}

.sofi-gftr .otm-section img {
  display: block;
  height: 60px;
  width: auto;
}

.sofi-gftr .otm-section strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  color: #1a1919;
}

/* ── OTM email signup form ───────────────────────────────────────────────── */

.sofi-gftr__otm-form {
  margin-top: 16px;
  width: 100%;
}

.sofi-gftr__otm-form-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  width: 100%;
}

/*
 * Reset legacy sofi-header-footer.css input rules (width:100%, padding:0.75em,
 * border, box-shadow) so the Figma-spec styles apply cleanly.
 */
.sofi-gftr .sofi-gftr__otm-input {
  flex: 1;
  min-width: 0;
  height: 60px;
  background: #fff;
  border: 1px solid rgba(10, 10, 10, 0.1);
  border-radius: 20px;
  padding: 0 20px;
  font-family: "TT Norms", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #1a1919;
  width: auto; /* override legacy width:100% */
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
}

.sofi-gftr .sofi-gftr__otm-input::placeholder {
  color: #717076;
}

.sofi-gftr .sofi-gftr__otm-input:focus {
  border-color: rgba(10, 10, 10, 0.1);
  outline: 2px solid #00819d;
  outline-offset: 2px;
}

.sofi-gftr .sofi-gftr__otm-input:focus:not(:focus-visible) {
  outline: none;
}

.sofi-gftr .sofi-gftr__otm-input:focus-visible {
  outline: 2px solid #00819d;
  outline-offset: 2px;
}

/* Scoped to .sofi-gftr (0-2-0) to beat the base .sofi-gftr button reset (0-1-1) */
.sofi-gftr .sofi-gftr__otm-submit {
  flex-shrink: 0;
  width: 72px; /* Figma: 71.94px */
  height: 60px;
  background: #201747;
  border: none;
  border-radius: 20px;
  color: #fff;
  font-family: "TT Norms", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sofi-gftr .sofi-gftr__otm-submit:hover {
  background: #150f36;
}

.sofi-gftr .sofi-gftr__otm-submit:focus {
  outline: 2px solid #00819d;
  outline-offset: 2px;
}

.sofi-gftr .sofi-gftr__otm-submit:focus:not(:focus-visible) {
  outline: none;
}

.sofi-gftr .sofi-gftr__otm-submit:focus-visible {
  outline: 2px solid #00819d;
  outline-offset: 2px;
}

.sofi-gftr__otm-disclaimer {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #1a1919;
  margin-top: 8px;
}

.sofi-gftr__otm-disclaimer a {
  color: inherit;
  text-decoration: underline;
}

.sofi-gftr__otm-disclaimer a:hover {
  color: #00a2c7;
}

/* ── Social-row wrapper: social + app badges side by side within newsletter col ── */

.sofi-gftr__social-row {
  margin-top: 32px;
}

/* ── Social section ──────────────────────────────────────────────────────── */

.sofi-gftr__social-heading {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #1a1919;
  margin: 0 0 10px;
}

.sofi-gftr__social-items {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.sofi-gftr__social-item {
  margin: 0;
  padding: 0;
}

.sofi-gftr__social-link,
.sofi-gftr__social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.sofi-gftr__social-link img,
.sofi-gftr__social-btn img {
  display: block;
  width: 28px;
  height: 28px;
}

.sofi-gftr__social-link:hover,
.sofi-gftr__social-btn:hover {
  opacity: 0.8;
}

.sofi-gftr__social-link:focus,
.sofi-gftr__social-btn:focus {
  outline: 2px solid #00819d;
  outline-offset: 2px;
  border-radius: 50%;
}

.sofi-gftr__social-link:focus:not(:focus-visible),
.sofi-gftr__social-btn:focus:not(:focus-visible) {
  outline: none;
}

.sofi-gftr__social-link:focus-visible,
.sofi-gftr__social-btn:focus-visible {
  outline: 2px solid #00819d;
  outline-offset: 2px;
  border-radius: 50%;
}

/* ── App badges section ──────────────────────────────────────────────────── */

.sofi-gftr__app-badges {
  margin-top: 32px;
}

.sofi-gftr__app-badges-heading {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #1a1919;
  margin: 0 0 10px;
}

.sofi-gftr__app-badges-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sofi-gftr__app-badge {
  margin: 0;
  padding: 0;
}

.sofi-gftr__app-badge--apple a,
.sofi-gftr__app-badge--android a {
  display: block;
}

.sofi-gftr__app-badge--apple a:focus-visible,
.sofi-gftr__app-badge--android a:focus-visible {
  outline: 2px solid #00819d;
  outline-offset: 2px;
  border-radius: 4px;
}

.sofi-gftr__app-badge--apple img,
.sofi-gftr__app-badge--android img {
  display: block;
  height: 34px;
  width: auto;
}

/* QR code — white card with rounded corners + shadow, matching Figma */
.sofi-gftr__app-badge--qr {
  background: #fff;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 0 1.5px rgba(20, 20, 20, 0.1), 0 7px 15px -7px rgba(20, 20, 20, 0.06);
  display: inline-block;
}

.sofi-gftr__app-badge--qr img {
  display: block;
  width: 139px;
  height: auto;
}

/* =============================================================================
   Tablet layout  ·  min-width: 768px
   Two columns: left = nav accordion  |  right = newsletter + social + badges
   ============================================================================= */

@media (min-width: 768px) {

  .sofi-gftr__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    padding: 40px;
    align-items: start;
  }

  /* Left column — nav accordion */
  .sofi-gftr__columns {
    grid-column: 1;
    grid-row: 1;
    order: unset;
  }

  /* Back to top — inside Legal column, not a grid item. Reset order. */
  .sofi-gftr .sofi-gftr__back-to-top {
    order: unset;
  }

  /* Right column — newsletter (row 1) */
  .sofi-gftr .footer__col--signup {
    grid-column: 2;
    grid-row: 1;
    order: unset;
    margin-top: 0;
  }

  /*
   * Social and app badges are inside .footer__col--signup — not grid items.
   * .sofi-gftr__social-row provides the spacing; no grid rules needed here.
   */

}

/* =============================================================================
   Desktop layout  ·  min-width: 992px
   Five columns: 4 equal nav cols (1–4)  +  1 wider newsletter col (5).
   Social and App Badges live INSIDE the newsletter col (not as grid items)
   so they stack below the OTM form within the same column.
   Back to top is injected inside the 4th nav column by the PHP template.
   ============================================================================= */

@media (min-width: 992px) {

  .sofi-gftr__inner {
    display: grid;
    /*
     * 4 equal nav cols (1–4) + 1 wider newsletter col (5).
     * Nav columns are flex children of .sofi-gftr__columns (grid-col 1/5).
     * Social and app badges live inside the newsletter column (grid-col 5).
     */
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 2fr);
    column-gap: 0;
    padding: 48px 68px;
    align-items: start;
  }

  /* Nav columns — spans all 4 left columns, row 1 */
  .sofi-gftr__columns {
    grid-column: 1 / 5;
    grid-row: 1;
    display: flex;
    align-items: flex-start;
  }

  /*
   * Each individual column — equal flex child. No padding-right gutter here:
   * with flex: 1 (flex-basis: 0%) + box-sizing: border-box, a per-item
   * padding-right gets front-loaded into that item's used size before
   * growth is distributed, so columns 1-3 rendered ~16px wider than column 4
   * (last-child had padding-right: 0) — compounding into a growing
   * rightward drift for every column after the first. Item links already
   * leave enough right-hand whitespace, so no explicit gutter is needed.
   */
  .sofi-gftr__column {
    flex: 1;
    min-width: 0;
  }

  /*
   * Long labels (e.g. "Medical/Dental Resident Refinancing") can exceed the
   * width of these narrow flex columns at desktop widths near the 992px
   * breakpoint, wrapping to a 2nd line and breaking the single-line rhythm
   * of the list. Truncate to one line with an ellipsis — same pattern as
   * the BrightEdge "Also of Interest" links above. Full text is still
   * available via the `title` attribute (global-footer-item.php).
   */
  .sofi-gftr__item-link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 12px;
  }

  /*
   * Exempt the OneTrust privacy toggle: it pairs an icon with bold text via
   * inline-flex, not a plain text column item, so single-line ellipsis
   * truncation would clip it awkwardly instead of just shortening text.
   */
  #privacy-options-link.sofi-gftr__item-link {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  /*
   * Column heading — not an accordion trigger on desktop.
   * Remove chevron and pointer; column body is always visible.
   * No padding-bottom: spacing between heading and items is purely
   * typographic (24px line-height), matching the Figma layout.
   */
  .sofi-gftr__column-heading {
    cursor: default;
    pointer-events: none;
    padding: 0;
  }

  /* Chevron hidden on desktop — same specificity as the base rule above
     (0,3,0 vs 0,3,0), so cascade order wins (this later rule overrides). */
  .sofi-gftr--js .sofi-gftr__column--has-accordion .sofi-gftr__column-heading::after {
    display: none;
  }

  /* Column body always visible on desktop — override the mobile collapsed
     state (max-height:0, visibility:hidden). Same specificity (0,2,0) as
     the base rule, cascade order wins. No transition on desktop. */
  .sofi-gftr--js .sofi-gftr__column-body {
    max-height: none;
    overflow: visible;
    visibility: visible;
    padding-bottom: 0;
    transition: none;
  }

  /* Newsletter — col 5, row 1. Social + app-badges live INSIDE this column. */
  .sofi-gftr .footer__col--signup {
    grid-column: 5;
    grid-row: 1;
    margin-top: 0;
  }

  /* Social: reset base margin-top so it sits flush inside the flex row */
  .sofi-gftr__app-badges {
    margin-top: 0;
  }

  /* Two-column row: social (left) + app badges (right) within newsletter col */
  .sofi-gftr__social-row {
    display: flex;
    margin-top: 24px;
    align-items: flex-start;
  }

  .sofi-gftr__social-row .sofi-gftr__social {
    flex: 1;
    min-width: 0;
  }

  .sofi-gftr__social-row .sofi-gftr__app-badges {
    flex: 1;
    min-width: 0;
  }

  /*
   * Social icons — cap width to produce 2 rows on desktop (FB / IG / X then
   * LinkedIn / YT), matching the Figma layout.
   * 3 icons × 28px + 2 gaps × 12px = 108px; add a small buffer.
   */
  .sofi-gftr__social-items {
    max-width: 124px;
  }

}

/*
 * Subfooter supplemental block (e.g. events advisory, rc-blog FINRA disclosure).
 * Mirrors .subfooter__right (clear: left) so the block starts on a new line
 * after the floated .subfooter__links copyright line on desktop.
 */
@media screen and (min-width: 768px) {
  .subfooter__legal--supplemental {
    clear: left;
    margin-top: 10px;
  }
}