/* =========================================================================
   FOOTER + COOKIE CONSENT + BACK-TO-TOP  — for css/footer.chrome.css
   Self-contained; uses brand.css tokens. The footer is held dark in BOTH
   themes (literal colours); the cookie banner and back-to-top adapt to the
   theme (token colours) since they float over page content.

   GUTTER NOTE: never use shorthand `padding` on `.wrap` — it resets the
   horizontal gutter (the V4 cascade trap). Longhand only, as below.
   ========================================================================= */

footer{background:var(--night);color:#cfcfcf;margin-top:80px}
footer .wrap{padding-top:56px;padding-bottom:32px}

/* always-dark footer → always show the light-on-dark logo.
   If your file naming is the other way round, swap logo-l / logo-d here. */
footer .logo{height:32px;width:auto;margin-bottom:14px}
footer .logo-d{display:none}
footer .logo-l{display:block}

/* top band: brand (left) + social (right) */
.foot-top{display:flex;flex-wrap:wrap;gap:24px 32px;align-items:flex-start;justify-content:space-between;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.08)}
.foot-brand{flex:1 1 360px}
.foot-blurb{max-width:52ch;color:#9a9a9a;font-size:13.5px;line-height:1.65}

/* social */
.foot-social{display:flex;gap:8px;flex:0 0 auto}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid rgba(255,255,255,.16);color:#cfcfcf;transition:border-color .15s,color .15s}
.foot-social a:hover{border-color:#fff;color:#fff}
.foot-social svg{width:15px;height:15px}

/* link columns */
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;padding-top:38px}
.foot-col h4{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#7a7a7a;margin-bottom:14px}
.foot-col a{display:block;color:#cfcfcf;font-size:13.5px;line-height:1;padding:7px 0;transition:color .15s}
.foot-col a:hover{color:#fff}

/* legal + payment bar */
.foot-bar{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:flex-end;justify-content:space-between;margin-top:36px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08)}
.foot-legal{font-size:12px;color:#8a8a8a;line-height:1.7;margin:0}
.foot-legal strong{color:#bdbdbd;font-weight:600}
.foot-bar-end{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.pay{list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0;padding:0}
.pay li{background:#fff;border-radius:3px;padding:5px 8px;display:inline-flex;align-items:center;height:28px}
.pay img{height:18px;width:auto}
.cookie-reopen{background:none;border:0;padding:0;font:inherit;font-size:12px;color:#8a8a8a;letter-spacing:.04em;text-decoration:underline;text-underline-offset:2px;transition:color .15s}
.cookie-reopen:hover{color:#fff}

/* responsive (footer) */
@media(max-width:900px){
  footer{margin-top:56px}
  footer .wrap{padding-top:40px}
  .foot-cols{grid-template-columns:1fr 1fr;gap:30px 22px}
  .foot-bar{align-items:flex-start}
  .foot-bar-end{align-items:flex-start}
}
@media(max-width:560px){
  .foot-cols{grid-template-columns:1fr}
}

/* =========================================================================
   COOKIE CONSENT — slide-in bottom-left card (theme-aware)
   ========================================================================= */
.hoc-cookie{
  position:fixed;left:24px;bottom:24px;z-index:1000;
  width:min(380px,calc(100vw - 48px));
  background:var(--card);color:var(--ink);
  border:1px solid var(--line);
  box-shadow:0 12px 40px rgba(0,0,0,.18);
  padding:22px 22px 20px;
  opacity:0;visibility:hidden;transform:translateY(16px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s;
}
.hoc-cookie.show{opacity:1;visibility:visible;transform:none}
.hoc-cookie__label{margin-bottom:8px}
.hoc-cookie__title{font-size:17px;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.hoc-cookie__body{font-size:13px;line-height:1.6;color:var(--ink-2);margin-bottom:16px}
.hoc-cookie__body a{color:var(--green-text);text-decoration:underline;text-underline-offset:2px}
.hoc-cookie__actions{display:flex;gap:10px}
.hoc-cookie__btn{
  flex:1;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:12px 14px;border:1px solid transparent;transition:background .15s,border-color .15s,color .15s;
}
.hoc-cookie__btn--decline{background:transparent;border-color:var(--line);color:var(--ink-2)}
.hoc-cookie__btn--decline:hover{border-color:var(--ink);color:var(--ink)}
.hoc-cookie__btn--accept{background:var(--green);color:#fff}
.hoc-cookie__btn--accept:hover{background:var(--green-deep)}

/* persistent toggle — bottom-left, appears after first choice */
.hoc-cookie-toggle{
  position:fixed;left:24px;bottom:24px;z-index:998;
  width:42px;height:42px;display:none;align-items:center;justify-content:center;
  background:var(--card);color:var(--ink-3);border:1px solid var(--line);
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  transition:opacity .2s ease,transform .2s ease,border-color .15s,color .15s;
}
.hoc-cookie-toggle.show{display:inline-flex}
.hoc-cookie-toggle:hover{border-color:var(--ink);color:var(--ink-2)}
.hoc-cookie-toggle.is-accepted{color:var(--green-text);border-color:var(--green)}
.hoc-cookie-toggle svg{width:21px;height:21px}
.hoc-banner-open .hoc-cookie-toggle{display:none}

/* inline "feature needs cookies" pill (rendered by HOCCookies.renderHint) */
.hoc-cookie-hint{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);background:var(--paper-2);border-left:2px solid var(--load);padding:6px 10px}
.hoc-cookie-hint a{color:var(--green-text);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* =========================================================================
   BACK TO TOP — bottom-right (theme-aware). Hidden while banner is open.
   ========================================================================= */
.to-top{
  position:fixed;right:24px;bottom:24px;z-index:999;
  width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--card);color:var(--ink-2);border:1px solid var(--line);
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility .2s,border-color .15s,color .15s;
}
.to-top.show{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.to-top:hover{border-color:var(--green);color:var(--green-text)}
.to-top svg{width:20px;height:20px}
.hoc-banner-open .to-top{opacity:0;visibility:hidden;pointer-events:none}

@media(max-width:560px){
  .hoc-cookie{left:12px;right:12px;bottom:12px;width:auto}
  .to-top{right:14px;bottom:14px}
  .hoc-cookie-toggle{left:14px;bottom:14px}
}