/* ============================================================================
   THE BETTERYOU+ GLOBAL FOOTER
   Loaded on every page, so every byte here is paid for site-wide. No images
   beyond the wordmark, no icon font, no JavaScript, no third party.

   The old footer had four equal 266px columns on a 1440px screen with the
   second one EMPTY — 266 wide, 0 tall — and the other three at 170, 300 and
   257px. Equal columns of unequal importance is what made it read as a
   widget area rather than the end of a publication. The brand column is now
   twice the width of the others, which is what gives the row a subject.
   ============================================================================ */

/* Every colour is stated. The footer sits at the end of a page whose theme it does not
   control, and inheriting even one value from the parent is how it ended up as a black band
   with invisible headings in light mode. */
.byp-footer{background:var(--byp-canvas);color:var(--byp-ink);
  border-top:1px solid var(--byp-rule);margin-top:0;text-align:left}
.byp-footer *{text-align:inherit}
/* 2fr for the brand left a 500px track holding 309px of content — the dead space came
   back in a smaller form. The brand needs enough width for a readable description line and
   no more, so it is a bounded track rather than a share of what is left over, and the three
   navigation columns divide the remainder evenly. */
.byp-footer__inner{max-width:1280px;margin:0 auto;padding:52px 28px 40px;
  display:grid;grid-template-columns:minmax(260px,360px) repeat(3,minmax(130px,1fr));
  gap:40px 48px;align-items:start}

/* ------------------------------------------------------------------ brand */
.byp-footer__brand{max-width:none}
.byp-footer__logo{display:inline-block;line-height:0;margin-bottom:16px}
.byp-footer__logo-img{height:38px;width:auto;display:block}
.byp-footer__logo-img--dark{display:none}
.byp-footer__promise{font-family:var(--byp-ui);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--byp-authority);margin:0 0 10px}
.byp-footer__desc{font-family:var(--byp-body);font-size:15px;line-height:1.6;
  color:var(--byp-meta);margin:0 0 20px}

.byp-footer__social{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.byp-footer__social a{display:inline-block;min-height:32px;font-family:var(--byp-ui);font-size:11px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  color:var(--byp-meta);border:1px solid var(--byp-rule);border-radius:999px;
  padding:7px 13px;transition:color .15s ease,border-color .15s ease}
.byp-footer__social a:hover,.byp-footer__social a:focus-visible{color:var(--byp-authority);
  border-color:var(--byp-authority)}

/* ------------------------------------------------------------------ columns */
.byp-footer__h{font-family:var(--byp-ui);font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--byp-ink);margin:0 0 14px}
.byp-footer__d{margin:0}
.byp-footer__s{list-style:none;display:block;cursor:default}
.byp-footer__s::-webkit-details-marker{display:none}
.byp-footer__list{list-style:none;margin:0;padding:0}
.byp-footer__list li{margin:0}
/* WCAG 2.5.8 wants a 24px pointer target. The inline-text exception covers a link inside a
   sentence; a footer navigation list is not a sentence, and these were measuring 15px. The
   padding buys the height without moving the text, so the list looks identical. */
.byp-footer__list a{display:inline-block;padding:5px 0;min-height:24px;
  font-family:var(--byp-ui);font-size:14px;line-height:1.45;
  color:var(--byp-meta);text-decoration:none;border-bottom:1px solid transparent;
  transition:color .15s ease,border-color .15s ease}
.byp-footer__list a:hover,.byp-footer__list a:focus-visible{color:var(--byp-ink);
  border-bottom-color:var(--byp-authority)}

/* ------------------------------------------------------------------ legal bar */
.byp-footer__bar{border-top:1px solid var(--byp-rule)}
.byp-footer__cr{max-width:1280px;margin:0 auto;padding:16px 28px;
  font-family:var(--byp-ui);font-size:12.5px;color:var(--byp-meta);
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline}
.byp-footer__pub a{color:var(--byp-meta);text-decoration:none;
  border-bottom:1px solid var(--byp-rule)}
.byp-footer__pub a:hover,.byp-footer__pub a:focus-visible{color:var(--byp-ink);
  border-bottom-color:var(--byp-authority)}

/* ------------------------------------------------------------------ dark
   Not an inversion. The tokens already carry a dark palette; the only thing the
   footer needs is the dark wordmark and a ground that separates it from the
   article without becoming a second black band under a dark page. */
:root.pcdark-mode .byp-footer,body.pcdark-mode .byp-footer{background:var(--byp-canvas)}
:root.pcdark-mode .byp-footer__logo-img--light,
body.pcdark-mode .byp-footer__logo-img--light{display:none}
:root.pcdark-mode .byp-footer__logo-img--dark,
body.pcdark-mode .byp-footer__logo-img--dark{display:block}

/* ------------------------------------------------------------------ tablet */
@media (max-width:1000px){
  .byp-footer__inner{grid-template-columns:1fr 1fr 1fr;gap:34px 32px;padding:44px 24px 34px}
  .byp-footer__brand{grid-column:1/-1;max-width:52ch}
}

/* ------------------------------------------------------------------ mobile
   One column with collapsible groups, which is the pattern the research is
   consistent about. The markup ships OPEN so a reader without JavaScript gets
   the whole footer; the script below only ever closes, and only here. The old
   footer was 1,018px on a phone — more than a screen of it. */
@media (max-width:700px){
  .byp-footer__inner{grid-template-columns:1fr;gap:0;padding:36px 20px 20px}
  .byp-footer__brand{max-width:none;margin-bottom:26px}
  .byp-footer__col{border-top:1px solid var(--byp-rule)}
  .byp-footer__s{cursor:pointer;display:flex;align-items:center;justify-content:space-between;
    min-height:46px;padding:2px 0}
  .byp-footer__h{margin:0}
  .byp-footer__s::after{content:"";width:8px;height:8px;flex:0 0 8px;
    border-right:2px solid var(--byp-meta);border-bottom:2px solid var(--byp-meta);
    transform:rotate(45deg) translateY(-2px);transition:transform .18s ease}
  .byp-footer__d[open] .byp-footer__s::after{transform:rotate(-135deg) translateY(-2px)}
  .byp-footer__list{padding:2px 0 14px}
  .byp-footer__list li{margin:0 0 4px}
  .byp-footer__list a{display:block;padding:8px 0;min-height:24px}
  .byp-footer__cr{padding:14px 20px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .byp-footer__s::after,.byp-footer__social a,.byp-footer__list a{transition:none}
}