/*
  Global footer redesign — link columns and the reorganised standard layout.
  Approved spec: website-files/footer-redesign/footer-redesign-preview.html
  (Matt Howells-Barby, July 31 2026). Values below are lifted from that file.

  WHY THIS IS A HAND-WRITTEN STYLESHEET AND NOT SCSS
  --------------------------------------------------
  build/css/style.min.css is what production serves (verified byte-identical to
  the live URL), and it has drifted from src/styles/**. Rebuilding it from the
  current source would drop 212 live rules and introduce 146 never-shipped ones
  across ~40 components, so the CSS build is not safe to run in this MR. New
  footer styling therefore ships here, following the pattern already used by
  capture-form-block.css, pricing-cards.css and article-v2.css. See the MR notes.

  src/styles/components/footer.scss has been reconciled to deployed reality in
  the same commit, so whoever repairs the build toolchain does not silently
  revert the live footer. The column rules below are intentionally NOT duplicated
  into that SCSS: one owner per rule set. Move them there once the build works.

  LOAD ORDER
  ----------
  Enqueued from templates/blocks/footer.twig, which lands after style.min.css in
  the document, so equal-specificity rules here win. Selectors that must beat an
  existing theme rule are commented individually.

  SCOPE
  -----
  .footer__middle--cols marks the standard footer. The .footer--landing variant
  keeps its previous DOM and styling and is only touched to hide the new columns.
*/

/* ------------------------------------------------------------------ *\
   Landing variant safety net.
   footer.twig does not render the link columns for .footer--landing at all, so
   this is belt and braces: it mirrors the long-standing
   .footer--landing .footer__middle .footer__nav rule and keeps the v1 landing
   footer correct if the columns are ever rendered under that variant.
\* ------------------------------------------------------------------ */
.footer--landing .footer__cols {
  display: none;
}

/* ------------------------------------------------------------------ *\
   Shell
\* ------------------------------------------------------------------ */

/* Beats .footer{padding:144px 0} (0,1,0) on specificity, not just load order.
   Scoped away from .footer--landing, which keeps its own padding. */
.footer:not(.footer--landing) {
  padding: 120px 0 56px;
}

/* .footer__middle is a plain wrapper in the new layout; the grid lives on
   .footer__middle-box so the mailing card can be a sibling of the columns.
   Resets the inherited flex row + gap:15%. */
.footer .footer__middle--cols {
  display: block;
  gap: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

/* The layout grid. 0,3,0 to beat
   .footer__middle-box:first-of-type{display:flex;gap:32px;...} (0,2,0). */
.footer .footer__middle--cols .footer__middle-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  grid-template-areas:
    "brand form"
    "cols  form"
    "icons form";
  column-gap: 64px;
  row-gap: 0;
  align-items: start;
}

/* ------------------------------------------------------------------ *\
   Brand block: logo, tagline, support email
\* ------------------------------------------------------------------ */
.footer__middle--cols .footer__brand {
  grid-area: brand;
  min-width: 0;
}

.footer__middle--cols .footer__logo {
  display: block;
  width: 188px;
  height: 51px;
}

/* Tagline and support email are the two paragraphs of the block's text2 WYSIWYG
   field. Colour and size already match the spec in style.min.css (#008df3 20px);
   this only sets the spacing the new layout needs. */
.footer__middle--cols .footer__info.textbox {
  margin: 28px 0 0;
  line-height: 1.5;
}

.footer__middle--cols .footer__info.textbox p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ *\
   Link columns
\* ------------------------------------------------------------------ */
.footer__middle--cols .footer__cols {
  grid-area: cols;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 36px;
  margin-top: 56px;
}

.footer__col {
  min-width: 0;
}

/* Legacy fallback link row, shown only when no footer menu is assigned yet.
   Not the approved design — placed explicitly so that safety-net state is
   deterministic and legible rather than auto-placed into an arbitrary cell. */
.footer__middle--cols .footer__nav {
  grid-area: cols;
  margin-top: 48px;
}

/* Rendered as an h2; the base h1-h6 rule sets margin-bottom:20px, so margin is
   declared in full here. */
.footer__col-title {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #008df3;
}

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

.footer__col li {
  margin: 0 0 13px;
  list-style-type: none;
}

.footer__col li:last-child {
  margin-bottom: 0;
}

.footer__col-link {
  display: inline-block;
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  text-decoration: none;
  transition: color 0.3s;
}

.footer__col-link:hover,
.footer__col-link:active,
.footer__col-link:focus,
.footer__col-link:focus-visible {
  color: #0da5fa;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Set "footer-link--strong" as the menu item's CSS class in wp-admin
   (Screen Options > CSS Classes). Used for "A Payward Company". */
.footer__col-link.footer-link--strong {
  font-weight: 700;
  color: #fff;
}

/* ------------------------------------------------------------------ *\
   OneTrust cookie settings trigger

   Rendered in place of an anchor for the menu item whose URL is
   "#cookie-settings", so its position stays editable in wp-admin. !important is
   required to beat the OneTrust SDK's own async-loaded stylesheet — the same
   reason the previous .footer__nav rule used it. Those older rules are scoped
   under .footer__nav and so do not reach this button.
\* ------------------------------------------------------------------ */
.footer__col #ot-sdk-btn.ot-sdk-show-settings {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  letter-spacing: normal !important;
  text-align: left !important;
  text-decoration: none !important;
  text-transform: none !important;
  color: rgba(255, 255, 255, 0.92) !important;
  cursor: pointer;
  transition: color 0.3s;
}

.footer__col #ot-sdk-btn.ot-sdk-show-settings:hover,
.footer__col #ot-sdk-btn.ot-sdk-show-settings:active,
.footer__col #ot-sdk-btn.ot-sdk-show-settings:focus {
  background: none !important;
  color: #0da5fa !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ *\
   Socials
\* ------------------------------------------------------------------ */
.footer__middle--cols .footer__icons {
  grid-area: icons;
  display: flex;
  gap: 24px;
  margin-top: 56px;
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ *\
   Mailing list card
   Card styling itself lives in capture-form-block.css and is untouched.
\* ------------------------------------------------------------------ */
.footer__middle--cols .footer__middle-form {
  grid-area: form;
  width: 100%;
  max-width: 400px;
  margin: 0;
}

/* ------------------------------------------------------------------ *\
   Copyright bar
\* ------------------------------------------------------------------ */
.footer__bottombar {
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid rgba(2, 104, 162, 0.55);
}

/* Resets the mobile padding/margin/border that .footer__copy carries in
   style.min.css, which was written for the old in-flow position. */
.footer__bottombar .footer__copy {
  margin: 0;
  padding: 0;
  border: 0;
  color: #008df3;
  font-size: 16px;
}

/* ------------------------------------------------------------------ *\
   Tablet and below: single column, mailing card directly under the brand
\* ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .footer:not(.footer--landing) {
    padding: 88px 0 48px;
  }

  .footer .footer__middle--cols .footer__middle-box {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "brand"
      "form"
      "cols"
      "icons";
    column-gap: 0;
  }

  .footer__middle--cols .footer__middle-form {
    max-width: 480px;
    margin-top: 40px;
  }

  .footer__middle--cols .footer__cols {
    margin-top: 48px;
  }

  .footer__middle--cols .footer__icons {
    margin-top: 48px;
  }
}

/* ------------------------------------------------------------------ *\
   Mobile: 2x2 link grid, short columns paired on the top row
\* ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .footer:not(.footer--landing) {
    padding: 72px 0 40px;
  }

  .footer__middle--cols .footer__logo {
    width: 150px;
    height: 41px;
  }

  /* 0,3,0 plus the media query beats .footer__info.textbox{font-size:20px} and
     the @767 margin-bottom:16px written for the old layout. */
  .footer .footer__middle--cols .footer__info.textbox {
    margin: 24px 0 0;
    font-size: 18px;
  }

  .footer__middle--cols .footer__middle-form {
    max-width: 100%;
    margin-top: 32px;
  }

  .footer__middle--cols .footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 24px;
    margin-top: 40px;
  }

  /* Pair the two short columns on the top row: Product + Legal, then
     Learn + Payward Family. These are auto-placed grid items, so order applies. */
  .footer__col--product {
    order: 1;
  }

  .footer__col--legal {
    order: 2;
  }

  .footer__col--learn {
    order: 3;
  }

  .footer__col--payward {
    order: 4;
  }

  .footer__col-link,
  .footer__col #ot-sdk-btn.ot-sdk-show-settings {
    font-size: 15px !important;
  }

  .footer__middle--cols .footer__icons {
    margin-top: 44px;
  }

  .footer__bottombar {
    margin-top: 48px;
    padding-top: 24px;
  }

  .footer__bottombar .footer__copy {
    font-size: 14px;
  }
}

/* ------------------------------------------------------------------ *\
   Motion preferences
\* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .footer__col-link,
  .footer__col #ot-sdk-btn.ot-sdk-show-settings {
    transition: none;
  }
}