/* ==========================================================================
   IRONBEASTS - FOOTER
   Ported from the static draft (new-theme-draft/assets/css/components.css).
   Loaded on every page. Depends on the tokens in base.css.
   ========================================================================== */
/* Its own token, not the ink. They are the same thing on a light page; on a
   dark one the ink *is* the page, so the footer was painting itself the colour
   of what it sits on and losing its own edge entirely. Black there, the way
   the shop running today does it. */
.site-footer {
  background: var(--footer-bg);
  color: var(--on-dark-text);
}

/* ==========================================================================
   COLUMNS
   ========================================================================== */
.footer__top {
  display: grid;
  grid-template-columns: 1.5fr .8fr 1.2fr 1fr;
  gap: var(--sp-6);
  padding-block: var(--sp-8) var(--sp-7);
}

.footer__logo img {
  height: 84px;
  width: auto;
  margin-bottom: var(--sp-5);
}

.site-footer h4 {
  color: var(--ib-white);
  font-size: var(--fs-14);
  letter-spacing: var(--ls-7);
  margin-bottom: var(--sp-4);
}

.site-footer a {
  color: var(--on-dark-text);
  font-size: var(--fs-14);
  transition: color var(--t);
}

.site-footer a:hover {
  color: var(--ib-white);
}

/* ==========================================================================
   CONTACT AND SOCIAL
   ========================================================================== */
.footer__contact {
  margin-bottom: var(--sp-4);
}

.footer__contact li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: var(--fs-14);
}

.footer__contact svg {
  width: 18px;
  height: 18px;
  color: var(--on-dark-muted);
  flex: none;
  margin-top: 2px;
}

.footer__social {
  display: flex;
  gap: .6rem;
  margin-top: var(--sp-4);
}

.footer__social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--on-dark-line-1);
  display: grid;
  place-items: center;
  transition: background var(--t), border-color var(--t), color var(--t);
}

.footer__social a:hover {
  background: var(--on-dark-fill-2);
  border-color: var(--on-dark-line-2);
  color: var(--ib-white);
}

.footer__social svg {
  width: 18px;
  height: 18px;
}

/* ==========================================================================
   BOTTOM BAR
   ========================================================================== */
.footer__bottom {
  border-top: 1px solid var(--on-dark-line-1);
  padding-block: var(--sp-4);
  font-size: var(--fs-13);
}

/* align-items, not the default stretch: the plate should be its own height,
   not pulled to the height of the row. */
.footer__bottom-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-4);
}

/* One plate behind the whole run, not one per logo. Several of these marks
   already carry their own background, so individual tiles doubled up and the
   varying widths made the row look ragged. */
/* inline-flex so the plate is exactly as wide and tall as the logos inside it,
   never stretched by the row around it. */
.footer__payments {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .55rem;
  padding: .45rem .7rem;
  background: var(--ib-white);
  border-radius: 6px;
}

/* Same height, natural width -- forcing every mark into an identical box looks
   wrong when the source files are a mix of official badge styles. */
.footer__payments li {
  height: 22px;
  display: flex;
  align-items: center;
}

.footer__payments img {
  display: block;
  height: 22px;
  width: auto;
  max-width: none;
}

/* Under the social buttons: the visitor's currency with its flag, opening
   upwards (the footer ends the page, so a list below it would lengthen the
   page) to all four. A <details>, so it works without script. */
.footer__currency {
  position: relative;
  display: inline-block;
  margin-top: var(--sp-4);
}

.footer__currency summary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 40px;
  padding-inline: .9rem;
  border: 1px solid var(--on-dark-line-1);
  border-radius: 999px;
  font-size: var(--fs-13);
  letter-spacing: var(--ls-7);
  cursor: pointer;
  list-style: none;
  transition: background var(--t), border-color var(--t), color var(--t);
}

.footer__currency summary::-webkit-details-marker {
  display: none;
}

.footer__currency summary::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-left: var(--sp-1);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(1px) rotate(-135deg);
  transition: transform var(--t);
}

.footer__currency[open] summary::after {
  transform: translateY(-2px) rotate(45deg);
}

.footer__currency summary:hover,
.footer__currency[open] summary {
  background: var(--on-dark-fill-2);
  border-color: var(--on-dark-line-2);
  color: var(--ib-white);
}

.footer__currency img {
  display: block;
  width: 20px;
  height: 15px;
  object-fit: cover;
}

.footer__currency ul {
  position: absolute;
  bottom: calc(100% + var(--sp-2));
  left: 0;
  z-index: 5;
  /* As wide as its longest name: by default it would shrink to the small
     button it hangs from, and the names would run out of it. */
  width: max-content;
  min-width: 240px;
  margin: 0;
  padding: var(--sp-2);
  list-style: none;
  background: var(--ib-900);
  border: 1px solid var(--on-dark-line-1);
  box-shadow: 0 20px 40px var(--shade-4);
  text-align: left;
}

.footer__currency li a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: .55rem .7rem;
  white-space: nowrap;
  transition: background var(--t), color var(--t);
}

.footer__currency li a:hover,
.footer__currency li a[aria-current] {
  background: var(--on-dark-fill-1);
  color: var(--ib-white);
}

.footer__copy {
  text-align: center;
  margin: var(--sp-3) 0 0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
  }
}

/* Stacked in one column, everything centred. Left-aligned text in a single
   narrow column leaves a lot of dead space down the right; centring closes it
   and the columns read as a list rather than a broken grid. */
@media (max-width: 520px) {
  .footer__bottom-row {
    gap: var(--sp-3);
  }

  .footer__top {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    padding-block: var(--sp-6) var(--sp-5);
    text-align: center;
  }

  .footer__logo img {
    height: 72px;
    margin-inline: auto;
  }

  .footer__contact li {
    justify-content: center;
  }

  .footer__social {
    justify-content: center;
  }

  .footer__currency ul {
    left: 50%;
    transform: translateX(-50%);
  }

  .site-footer h4 {
    margin-bottom: var(--sp-3);
  }
}