/*
 * Nesa Underwear site footer.
 */

body:has(.bp-footer) .oxa-site-footer { display: none; }

.bp-footer {
  background: #F1ECE8;
  color: #000;
  font-family: var(--oxa-font-sans);
  font-size: 17px;
  line-height: 1.6;
  /* No margin-top: the last homepage section already pays its own
   * padding-block, and the border-top is what separates the two. Together with
   * the doubled padding below, this stacked to ~290px of blank space between
   * the last category tile and the first footer heading. */
  margin-top: 0;
}
.bp-footer a {
  color: #000;
  transition: opacity var(--oxa-dur) var(--oxa-ease);
}
.bp-footer a:hover { opacity: 0.7; }

/* No hover effect on the phone (tel:) link. */
.bp-footer a[href^="tel:"]:hover,
.bp-footer a[href^="tel:"]:focus {
  opacity: 1;
  color: #000;
}

/*
 * Full-bleed on the page gutter, exactly like .bp-site-header .bp-container.
 *
 * This was `max-width: 1200px; margin-inline: auto`, inherited from a build
 * whose footer had to line up with a 1200px video section. Against a
 * full-bleed header and a full-bleed product rail it left the footer columns
 * marooned in the middle of a wide screen. Rewritten in place rather than
 * overridden further down, so no max-width resolves underneath.
 */
.bp-footer .bp-container {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  /* Left gets the logo's optical inset on top of the gutter, the same as
   * .bp-mega__inner — so the first footer heading, the footer wordmark and the
   * header logo mark all sit on one vertical. See --nesa-logo-inset. */
  padding-inline: calc(var(--nesa-gutter) + var(--nesa-logo-inset)) var(--nesa-gutter);
  box-sizing: border-box;
}

/* ── Main ──
 * The single source of the footer's vertical rhythm. .bp-footer__grid used to
 * add a second padding-block of its own on top of this one, which is where the
 * ~144px above the first column heading came from.
 */
.bp-footer__main { padding-block: var(--oxa-space-6) var(--oxa-space-5); }
.bp-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.2fr;
  gap: 3rem 2.5rem;
  align-items: start;
}

.bp-footer__col-title {
  color: #000;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 1.25rem;
}

.bp-footer__links,
.bp-footer__contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.bp-footer__links a,
.bp-footer__contact-list a,
.bp-footer__contact-list li {
  color: #000;
  font-size: 17px;
  line-height: 1.4;
}
/* No standing underline on the link columns — only on hover, which the Nesa
 * block below sets. The rule that used to underline every one of them lived
 * here; the socials keep their rule (a border-bottom) and are the only
 * permanently underlined thing in the footer. */
.bp-footer__links a { text-decoration: none; }
.bp-footer__contact-list a { text-decoration: none; }

/* ── Brand column ──
 * `gap` is the only spacing in this column. The logo, the address/email and
 * the social row each used to add a margin on top of it, so email-to-socials
 * came out at 20 + 8 + 24 = 52px and the four items read as separate blocks
 * rather than one address card. Those margins are zeroed below; the two small
 * ones that remain are deliberate — a little more air under the wordmark and
 * above the socials than between the address and the email.
 */
.bp-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--oxa-space-2);
}
/*
 * Left-aligned with the address below it.
 *
 * This carried `align-self: center`, which centred the wordmark inside the
 * brand column while the address and email stayed at the column's left edge —
 * the mixed alignment read as accidental. .bp-footer__brand already sets
 * `align-items: flex-start`, so dropping the override is all it takes.
 */
.bp-footer__logo {
  display: inline-flex;
}
/* Source is 500x500 (1:1). Reserve the full box up front so the logo can't
 * reflow / "grow" once the PNG finishes decoding, and never animate it. */
.bp-footer__logo-img {
  height: 72px;
  width: 72px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  transition: none;
  animation: none;
}
.bp-footer__about {
  color: #000;
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
  max-width: 34ch;
}

/* Per-brand icon shapes, no uniform circle background */
/* align-self dropped for the same reason as the wordmark above: the row starts
 * at the column's left edge, under the address. align-items stays — that is
 * what keeps the three labels on a shared baseline. */
.bp-social {
  display: flex;
  gap: 0.875rem;
  align-items: center;
}
.bp-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nesa-ink);
  transition: opacity var(--oxa-dur) var(--oxa-ease);
}
.bp-social__link svg { width: 24px; height: 24px; display: block; }
.bp-social__link:hover { opacity: 0.7; color: var(--nesa-ink); }

/* ── Bottom bar ── */
.bp-footer__bottom {
  background: #F1ECE8;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  padding-block: 1.25rem;
}
.bp-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.bp-footer__legal,
.bp-footer__legal a,
.bp-footer__powered {
  color: #000;
  font-size: 17px;
}
.bp-footer__powered {
  text-decoration: none;
  font-weight: 600;
}
.bp-footer__powered:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .bp-footer__grid { grid-template-columns: 1fr 1fr; gap: 2.25rem 1.5rem; }
}
@media (max-width: 560px) {
  .bp-footer__grid { grid-template-columns: 1fr; }
  .bp-footer__bottom-inner { justify-content: center; text-align: center; }
}
/* ── Nesa footer ───────────────────────────────────────────────────────────
 * Appended after the inherited rules so these win on source order.
 */

.bp-footer {
  background: var(--nesa-bg);
  color: var(--nesa-ink);
  border-top: 1px solid var(--nesa-line);
}

.bp-footer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 1.2fr;
  /* No padding-block — .bp-footer__main owns the vertical rhythm. The column
   * gap is fixed rather than 4vw, which reached 56px on a wide monitor. */
  gap: var(--oxa-space-4);
}

.bp-footer__col-title {
  margin: 0 0 var(--oxa-space-3);
  font-family: var(--nesa-font-sans);
  font-size: var(--oxa-fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--nesa-track-wide);
  color: var(--nesa-ink-soft);
}

.bp-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--oxa-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bp-footer__links a {
  font-size: var(--oxa-fs-md);
  color: var(--nesa-ink);
}
.bp-footer__links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Brand column */

.bp-footer__logo { display: inline-block; margin-bottom: var(--oxa-space-1); }

.bp-footer__wordmark {
  font-family: var(--nesa-font-serif);
  font-size: 1.75rem;
  letter-spacing: .18em;
  color: var(--nesa-ink);
}

/*
 * Full-strength ink, not --nesa-ink-soft.
 *
 * The soft grey made the address and email visibly lighter than the link
 * columns beside them, so the brand column looked washed out rather than
 * quieter. The column headings keep the soft grey — they are labels, and that
 * is the one place the contrast step is intentional.
 */
.bp-footer__address,
.bp-footer__email {
  margin: 0;
  font-size: var(--oxa-fs-md);
  line-height: 1.6;
  color: var(--nesa-ink);
}

.bp-footer__email a { color: inherit; }
.bp-footer__email a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Socials are word links in this design, not icon buttons. */
.bp-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oxa-space-3);
  margin-top: var(--oxa-space-1);
}

.bp-social__link {
  font-family: var(--nesa-font-sans);
  font-size: var(--oxa-fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--nesa-track-ui);
  color: var(--nesa-ink);
  border-bottom: 1px solid var(--nesa-line);
  padding-bottom: 2px;
  transition: border-color var(--oxa-dur) var(--oxa-ease);
}
.bp-social__link:hover { border-color: var(--nesa-ink); }

/* Bottom bar */

.bp-footer__bottom {
  border-top: 1px solid var(--nesa-line);
  padding-block: var(--oxa-space-3);
}

.bp-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--oxa-space-2);
}

.bp-footer__legal,
.bp-footer__powered {
  font-size: var(--oxa-fs-xs);
  color: var(--nesa-ink-soft);
  letter-spacing: .04em;
}

@media (max-width: 900px) {
  .bp-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .bp-footer__grid { grid-template-columns: 1fr; }
}