/* ==========================================================================
   House of Winners — footer
   Scoped to .hw-footer. The mobile bottom tab bar (.footer-mobile) is a
   separate component the Figma doesn't cover, and is left untouched.
   ========================================================================== */

/* Neutralise the legacy <footer class="footer"> shell. style.css:5611 paints
   it #fff with its own colour and 1.4rem type, which shows around and through
   the redesigned block. */
.hw-footer-root{
  background-color:var(--hw-footer-bg,#171717);
  color:var(--hw-on-surface,#FFFFFF);
  font-size:var(--hw-fs-sm,1.2rem);
  font-weight:400;
}
.hw-footer-root a:hover,
.hw-footer-root a:focus{color:var(--hw-gold,#FACF5A);}

.hw-footer{
  background:var(--hw-footer-bg,#171717);
  font-family:var(--hw-font);
  color:var(--hw-on-surface,#FFFFFF);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  padding-block:20px;
}
.hw-footer *,
.hw-footer *::before,
.hw-footer *::after{box-sizing:border-box;}
.hw-footer a{text-decoration:none;color:inherit;}
.hw-footer ul{list-style:none;margin:0;padding:0;}
.hw-footer img{max-width:100%;display:block;}

/* --------------------------------------------------------------------------
   Link columns
   -------------------------------------------------------------------------- */
/* All three lower blocks share one content box so their left and right
   edges line up. Previously __seo and __trust had max-width:1255px AND the
   100px padding, making them ~200px narrower than the columns. */
.hw-footer__cols,
.hw-footer__seo,
.hw-footer__trust{
  width:100%;
  max-width:1440px;
  margin-inline:auto;
  padding-inline:clamp(20px,7vw,100px);
}
.hw-footer__cols{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:clamp(28px,7vw,100px);
  padding-block:20px;
}
.hw-fcol{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:113px;
}
.hw-fcol__title{
  margin:0;
  font-size:16px;
  line-height:18px;
  font-weight:700;
  color:var(--hw-heading,#FEFEFE);
}
.hw-fcol ul{display:flex;flex-direction:column;gap:12px;}
.hw-fcol a{
  font-size:var(--hw-fs-sm,1.2rem);
  line-height:14px;
  font-weight:400;
  color:var(--hw-muted,#B3B3B3);
  transition:color .15s ease;
}
.hw-fcol a:hover,
.hw-fcol a:focus-visible{color:var(--hw-gold,#FACF5A);}

/* Social */
.hw-social{display:flex;align-items:flex-end;gap:9px;}
.hw-footer .hw-social__link{
  width:25px;height:25px;
  display:block;
  transition:transform .15s ease,opacity .15s ease;
}
.hw-footer .hw-social__link:hover{transform:translateY(-2px);opacity:.85;}
.hw-social__link svg{width:100%;height:100%;display:block;}

/* --------------------------------------------------------------------------
   SEO paragraph — content comes from $footerInfo (admin WYSIWYG), so style
   the tags it may emit rather than assuming a single <p>.
   -------------------------------------------------------------------------- */
.hw-footer__seo{
  font-size:var(--hw-fs-sm,1.2rem);
  line-height:18px;
  font-weight:400;
  color:var(--hw-muted,#B3B3B3);
}
/* Colour repeated on the <p> itself: a legacy rule of equal specificity paints
   these #777 (4:1 on the footer's #171717), which the shorthand above loses to. */
.hw-footer__seo p{margin:0 0 6px;color:var(--hw-muted,#B3B3B3);}
.hw-footer__seo p:last-child{margin-bottom:0;}
.hw-footer__seo strong,
.hw-footer__seo b,
.hw-footer__seo h1,
.hw-footer__seo h2,
.hw-footer__seo h3,
.hw-footer__seo h4{
  display:block;
  margin:0 0 4px;
  font-size:var(--hw-fs-sm,1.2rem);
  line-height:18px;
  font-weight:700;
  color:var(--hw-heading,#FEFEFE);
}
.hw-footer__seo a{color:var(--hw-gold,#FACF5A);}

/* --------------------------------------------------------------------------
   Trust strip — four labelled groups, each reading images/footer/<group>/.
   All supplied logos are 34px tall with varying widths.
   -------------------------------------------------------------------------- */
/* Four groups always on one row; the LOGOS wrap inside each group, which is
   how the Figma does it (Payment Method runs 7 + 2). Column proportions are
   the Figma's own container widths: 350 / 350 / 350 / 205. */
.hw-footer__trust{
  display:grid;
  grid-template-columns:350fr 350fr 350fr 205fr;
  gap:20px;
  align-items:start;
}
.hw-trust__col{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.hw-trust__title{
  margin:0;
  font-size:13px;
  line-height:16px;
  font-weight:700;
  color:var(--hw-heading,#FEFEFE);
}
.hw-trust__logos{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  min-height:34px;
}
/* Shown only when a group folder is empty. */
.hw-trust__slot{
  display:block;
  width:34px;
  height:34px;
  border:1px dashed rgba(255,255,255,.14);
  border-radius:4px;
  background:rgba(255,255,255,.03);
}
/* Every supplied logo is exactly 34px tall with a varying width. */
.hw-trust__logos img{height:34px;width:auto;max-width:none;display:block;}

/* --------------------------------------------------------------------------
   Copyright
   -------------------------------------------------------------------------- */
.hw-footer__copy{
  width:100%;
  padding-inline:20px;
  text-align:center;
  font-size:var(--hw-fs-sm,1.2rem);
  line-height:14px;
  font-weight:400;
  color:var(--hw-heading,#FEFEFE);
}

/* --------------------------------------------------------------------------
   A11y + responsive (responsive is invented — no mobile footer frame)
   -------------------------------------------------------------------------- */
.hw-footer a:focus-visible{
  outline:2px solid var(--hw-focus,#FACF5A);
  outline-offset:3px;
  border-radius:2px;
}
@media (max-width:900px){
  .hw-footer__trust{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .hw-footer__cols{gap:28px;}
  .hw-fcol{flex:1 1 140px;}
  .hw-footer__trust{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .hw-footer *{transition:none !important;}
}

/* ==========================================================================
   MOBILE BOTTOM TAB BAR — from the mobile Figma
   Fixed, 75px, #0A0A0F with a gold top edge and 18px top corners.
   ========================================================================== */
.hw-tabbar{
  background:none;
}
@media (max-width:991px){
  /* Legacy main-style.css:375 uses `.footer .footer-mobile .bottom-nav`
     (0,3,0) — it outranks a plain `.hw-tabbar` selector, so these match its
     specificity and explicitly undo what it sets. */
  .footer .footer-mobile.hw-tabbar{
    display:block;
    position:static;
    background:none;
    padding:0;
  }
  .footer .footer-mobile.hw-tabbar .container{max-width:100%;padding:0;}

  .footer .footer-mobile.hw-tabbar .bottom-nav{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:900;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:45px;                      /* Figma: 45px between 33px items */
    height:75px;                   /* legacy says 80 */
    padding:0;
    background-image:none;         /* legacy footer_menu_background.png */
    background-color:#0A0A0F;
    border-top:1px solid var(--hw-gold,#FACF5A);
    border-radius:18px 18px 0 0;
  }

  .footer .footer-mobile.hw-tabbar .bottom-nav-item{
    flex:0 0 33px;                 /* legacy: flex-grow:1; width:20% */
    width:33px;
    height:46px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:7px;
    padding:0;
    margin:0;
    text-align:center;
    text-decoration:none;
    background:none;
    border:0;
    /* undo the legacy italic/black/900 type */
    font-style:normal;
    font-weight:400;
    color:#A7A7A7;
  }

  .footer .footer-mobile.hw-tabbar .hw-tabbar__icon{
    width:25px;height:25px;display:block;flex:0 0 auto;margin:0;
  }
  .footer .footer-mobile.hw-tabbar .hw-tabbar__icon img{
    width:25px;height:25px;object-fit:contain;display:block;margin:0;
  }
  /* Labels run wider than their 33px item (Live Chat is 51px) and overflow
     centred into the gaps — that is how the Figma lays it out. */
  .footer .footer-mobile.hw-tabbar .hw-tabbar__label{
    font-family:var(--hw-font);
    font-size:12px;
    line-height:14px;
    font-weight:400;
    font-style:normal;
    text-align:center;
    white-space:nowrap;
    color:#A7A7A7;
    transition:color .15s ease;
  }
  .footer .footer-mobile.hw-tabbar .bottom-nav-item.active .hw-tabbar__label,
  .footer .footer-mobile.hw-tabbar .bottom-nav-item:hover .hw-tabbar__label{
    color:var(--hw-gold,#FACF5A);
  }

  /* The bar is fixed, so the page needs room beneath it — 75px of bar plus its
     1px top border.

     Two things this has to get right:

     1. The rule sits on .page-wrapper, not body. style.css:9 sets
        `html, body { height: 100% }`, and on a block with a fixed height whose
        content overflows, padding-bottom is laid out after that height, not
        after the content — so the tail of a long page spilled straight past it
        and ended up under the bar. .page-wrapper is min-height:100%, so it
        grows with the content and the padding lands where it should.

     2. The reserved strip is painted. .page-wrapper is transparent, so it
        would otherwise show the legacy body{background:#fff} — a white band
        directly above the dark bar on every redesigned page. The gradient
        paints only the bottom 76px, leaving the rest of the wrapper
        transparent so the legacy white member pages are untouched. */
  .page-wrapper{
    padding-bottom:76px;
    background-image:linear-gradient(#0A0A0F,#0A0A0F);
    background-repeat:no-repeat;
    background-position:left bottom;
    background-size:100% 76px;
  }

  /* Column footer is desktop-only in the design. */
  .hw-footer-root .footer-desktop{display:none;}
}