/* AEKE .sg — site footer.
 *
 * MEASURED AGAINST THE LIVE SITE at 1440, 768 and 375:
 *
 *   footer height      713 at 1440, 1151 at 768, 1044 at 375 (columns collapsed there)
 *   columns            4 menu columns then one text column
 *                        375   single column, page gutter 15px, column padding `0 4px`
 *                        768   three per row, page gutter 50px, column padding `0 15px`
 *                        1440  the 4 + 1 split, column 226px
 *   column title       17px, `--color-footer-heading`, mobile padding `25px 0`, desktop 0
 *   menu links         15px / 24px, `--color-footer-link` (measured #c0c4cc)
 *   menu list          `display: none` at 375, `display: block` at 768 — collapsed on
 *                      mobile, always open on desktop
 *   sub-footer         no padding of its own
 *
 * The colours are all pre-existing tokens: `--color-footer-link` measured exactly #c0c4cc
 * on the live page, so the token set already agreed with the rendering.
 */

.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
}

.site-footer__row,
.site-footer__sub-row {
  display: grid;
  grid-template-columns: 1fr;
  max-width: var(--grid-width-row);
  margin-right: auto;
  margin-left: auto;
  /* Live uses `.row` at 35px and `.columns` at 15px, so the total inset from the page
     edge to a column's content is 50px — the same figure our `--gutter` gives elsewhere.
     Reproducing both halves rather than collapsing them keeps the sub-footer aligned. */
  padding: 0 15px;
}

.site-footer__row {
  padding-top: 65px;
  padding-bottom: 65px;
}

@media (min-width: 48em) {
  .site-footer__row,
  .site-footer__sub-row {
    grid-template-columns: repeat(3, 1fr);
    padding-right: 35px;
    padding-left: 35px;
  }
}

@media (min-width: 66.75em) {
  /* 4 menu columns at 2/12 and the help column at 4/12, which on a six-track grid is
     one track each and two for the last. */
  .site-footer__row {
    grid-template-columns: repeat(6, 1fr);
  }

  .site-footer__col--help {
    grid-column: span 2;
  }
}

/* The sub-footer is the live 8/4 split: the locale takes two thirds and the payment
   marks one. That third is what makes them wrap onto several rows — at full width all
   fifteen fit on one line and the row is 24px tall where the live one is 77. */
@media (min-width: 48em) {
  .site-footer__sub-row {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }

  .site-footer__locale {
    grid-column: span 2;
  }

  .footer-payment-icons {
    grid-column: span 1;
  }

  .site-footer__copyright {
    grid-column: 1 / -1;
  }
}

.site-footer__col {
  padding: 0 4px;
}

@media (min-width: 48em) {
  .site-footer__col {
    padding: 0 15px;
  }
}

/* The first column needs no extra space: the row's 65px top padding is the live one. */

.site-footer__widget {
  border: 0;
}

/* The theme's inner `.widget` carries vertical padding of its own — the outer
   `.widget--menu-column` reports `0px 15px`, which is why every column measured taller
   than its title plus its links. Without this the footer lands ~100px short. */
@media (min-width: 48em) {
  .site-footer__widget {
    padding: 50px 0;
  }
}

.site-footer__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 25px 0;
  font-size: 1.0625rem; /* 17px, measured */
  font-weight: 600;
  color: var(--color-footer-heading);
  list-style: none;
  cursor: pointer;
}

/* The default disclosure triangle, removed in every engine that ships one. */
.site-footer__title::-webkit-details-marker {
  display: none;
}

.site-footer__title::marker {
  content: "";
}

.site-footer__chevron {
  display: inline-flex;
  color: var(--color-footer-heading);
  transition: transform var(--duration-theme) var(--ease-theme);
}

.site-footer__widget[open] .site-footer__chevron {
  transform: rotate(180deg);
}

@media (min-width: 48em) {
  .site-footer__title {
    margin-bottom: 20px;
    padding: 0;
    cursor: default;
  }

  /* Above 768 the list is always open, so the control is not a control any more and
     says so: no marker, no pointer, nothing to click. */
  .site-footer__chevron {
    display: none;
  }
}

.site-footer__menu {
  margin: 0;
  padding: 0 0 25px;
  list-style: none;
}

@media (min-width: 48em) {
  .site-footer__menu {
    padding: 0;
  }
}

.site-footer__menu li + li {
  margin-top: 2px;
}

.site-footer__menu a,
.site-footer__contacts a {
  font-size: 0.9375rem; /* 15px, measured */
  line-height: 1.6;
  color: var(--color-footer-link);
  text-decoration: none;
  transition: color var(--duration-theme) var(--ease-theme);
}

.site-footer__menu a:hover,
.site-footer__contacts a:hover {
  color: var(--color-footer-link-hover);
}

.site-footer__col--help {
  padding-top: 0;
}

.site-footer__contacts p {
  margin: 0 0 4px;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* A link inside a sentence needs a cue that is not a hue (WCAG 1.4.1, Level A).

   The three contact lines read "Support: hello@aeke.com" — the address sits *within* running text
   and was distinguished from it by colour alone, which axe reports on every page of the site. The
   footer menu links above are a list of destinations rather than prose, where colour is enough, so
   the underline is scoped to the contact block rather than applied to the whole footer. */
.site-footer__contacts p a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

/* 44x44 is the measured live hit area, not a 44px glyph — the mark inside stays small
   and the target is the size a finger needs. */
.site-footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-footer-heading);
}

.site-footer__socials svg {
  width: 20px;
  height: 20px;
}

/* No rule above it: the live sub-footer has `border-top: 0px none`. */
.site-footer__sub {
  padding: 0 0 65px;
}

.site-footer__sub-row {
  padding-top: 25px;
  padding-bottom: 25px;
  gap: 20px;
}

.site-footer__locale,
.site-footer__copyright {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-footer-text);
}

.site-footer__copyright {
  text-align: left;
}

@media (min-width: 66.75em) {
  .site-footer__copyright {
    text-align: right;
  }
}

/* The payment marks. `role="list"` on the wrapper and `role="listitem"` on each entry
   come from the partial, because it is generated. */
.site-footer__sub .footer-payment-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.site-footer__sub .footer-payment-icons > * {
  display: flex;
}

.site-footer__sub .footer-payment-icons svg {
  display: block;
  height: 24px;
  width: auto;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__chevron {
    transition: none;
  }
}