/*
  ============================================================
  GEPVOLT Footer  -  mobile-first
  ============================================================
  Structure: 3 text columns | social + copyright | B.A.U.M. badge | bottom bar
  Base = mobile (single column, stacked). Larger viewports
  opt in via min-width queries (token breakpoints).
*/

/* No blockGap between main and footer */
main + .gp-site-footer {
  margin-block-start: 0;
}

.gp-footer {
  color: var(--gp-text-body);
  font-size: 0.95rem;
  /* Top breathing room above the footer (bottom padding stays
     on the block inline). Scales up on desktop for visual balance. */
  padding-block-start: var(--gp-space-xl);
}

/* ===== Column layout (base: stacked) ===== */
.gp-footer-cols {
  gap: var(--gp-space-l);
  align-items: flex-start;
}

.gp-footer-cols .gp-footer-contact,
.gp-footer-cols .gp-footer-nav {
  flex-basis: 100%;
}

/* ===== Headings ===== */
.gp-footer-heading {
  margin: 0 0 var(--gp-space-l);
  color: var(--gp-text-heading);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ===== Contact column ===== */
.gp-footer-address {
  font-style: normal;
  line-height: 1.8;
  color: var(--gp-text-body);
}

.gp-footer-address a {
  color: var(--gp-text-body);
  text-decoration: none;
}

.gp-footer-address a:hover { color: var(--gp-green-dark); text-decoration: underline; }

.gp-footer-address a:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: 2px;
  border-radius: var(--gp-radius-sm);
}

.gp-footer-contact-btn {
  /* inline-flex (not inline-block) so the tertiary button's gap + arrow-slide
     hover work exactly like the home solution-tile CTA. */
  display: inline-flex;
  margin-top: var(--gp-space-m);
}

/* ===== Navigation lists ===== */
.gp-footer-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.gp-footer-nav ul li {
  margin: 0;
}

.gp-footer-cols a:not(.gp-btn) {
  color: var(--gp-text-body);
  text-decoration: none;
}

.gp-footer-cols a:not(.gp-btn):hover {
  color: var(--gp-green-dark);
  text-decoration: underline;
}

.gp-footer-cols a:not(.gp-btn):focus-visible {
  color: var(--gp-green-dark);
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: 2px;
  border-radius: var(--gp-radius-sm);
}

/* ===== Meta block (social + copyright + badge) - base: single column ===== */
.gp-footer-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gp-space-m);
  margin-top: var(--gp-space-m);
  padding-top: var(--gp-space-m);
  border-top: 1px solid var(--gp-border);
  text-align: center;
}

.gp-footer-meta-center {
  text-align: center;
}

.gp-footer-follow {
  margin: 0 0 0.75rem;
  color: var(--gp-text-muted);
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ===== Social Icons ===== */
.gp-footer-social {
  display: flex;
  justify-content: center;
  gap: var(--gp-space-m);
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
}

.gp-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--gp-touch);
  height: var(--gp-touch);
  border-radius: 50%;
  background: var(--gp-green);
  transition: background var(--gp-trans-fast), transform var(--gp-trans-fast);
}

.gp-footer-social a:hover {
  background: var(--gp-green-dark);
  transform: translateY(-2px);
}

.gp-footer-social a:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-navy);
  outline-offset: var(--gp-focus-offset);
  background: var(--gp-green-dark);
}

.gp-footer-social svg {
  width: 20px;
  height: 20px;
  fill: var(--gp-text-on-dark);
  pointer-events: none;
}

.gp-footer-copyright {
  margin: 0;
  color: var(--gp-text-muted);
  font-size: 0.875rem;
}

/* ===== B.A.U.M. badge (base: centered) ===== */
.gp-footer-badge {
  justify-self: center;
}

.gp-footer-badge a:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: var(--gp-focus-offset);
  border-radius: var(--gp-radius-sm);
  display: inline-block;
}

.gp-footer-badge img {
  display: block;
  width: 120px;
  height: auto;
}

/* ===== Bottom bar (base: stacked) ===== */
.gp-footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gp-space-s);
  margin-top: var(--gp-space-m);
  padding-top: var(--gp-space-m);
  border-top: 1px solid var(--gp-border);
}

.gp-footer-bottom nav {
  margin: 0;
}

.gp-footer-bottom p {
  margin: 0;
  font-size: 0.85rem;
}

/* 4.0:1 on #F4F4F4, WCAG AA ok for large/bold text */
.gp-footer-legal {
  color: var(--gp-green-dark);
  text-align: center;
}

.gp-footer-bottom a {
  color: var(--gp-green-dark);
  text-decoration: none;
}

.gp-footer-bottom a:hover {
  color: var(--gp-navy);
  text-decoration: underline;
}

.gp-footer-bottom a:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: 2px;
  border-radius: var(--gp-radius-sm);
  color: var(--gp-navy);
}

/* ============================================================
   Responsive - mobile-first (min-width, token breakpoints)
   ============================================================ */

/* from tablet (--bp-sm + 1): meta two columns, bottom bar in one row */
@media (min-width: 640px) {
  .gp-footer-meta {
    grid-template-columns: 1fr auto;
    justify-items: start;
    text-align: left;
  }

  .gp-footer-meta-center {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
  }

  .gp-footer-social {
    justify-content: flex-start;
  }

  .gp-footer-badge {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
  }

  .gp-footer-bottom {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gp-space-s) var(--gp-space-l);
  }
}

/* from desktop (--bp-md + 1): text columns side by side, meta three columns
   with centered social icons (matches the stacking of the WP columns) */
@media (min-width: 782px) {
  .gp-footer {
    padding-block-start: var(--gp-space-2xl);
  }

  .gp-footer-cols {
    gap: var(--gp-space-2xl);
  }

  .gp-footer-cols .gp-footer-contact,
  .gp-footer-cols .gp-footer-nav {
    flex-basis: 0;
    flex-grow: 1;
  }

  .gp-footer-meta {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--gp-space-l);
    margin-top: var(--gp-space-l);
    padding-top: var(--gp-space-l);
  }

  .gp-footer-meta-center {
    grid-column: 2;
    text-align: center;
  }

  .gp-footer-social {
    justify-content: center;
  }

  .gp-footer-badge {
    grid-column: 3;
    justify-self: end;
  }
}