/* ==========================================================================
   EliteBlocc — Footer
   File: assets/css/global/eb-footer.css
   Version: 2.1 — 5-column grid (added Services column)

   Pairs with: template-parts/global/site-footer.php

   DESIGN
   Near-black #020604 background. Very muted text — the footer recedes
   rather than competes. Amber column titles at low opacity. Territory
   badges for UK + Caribbean. Emerald micro-accents only.

   SECTIONS
   01. Footer shell
   02. Wrap container
   03. Grid — brand + nav columns
   04. Brand column
   05. Territory badges
   06. Nav column titles + links
   07. Footer bar (copyright + legal)
   08. Responsive
   ========================================================================== */


/* ── 01. Footer shell ────────────────────────────────────────────────────── */

.eb-footer {
  background:  #020604;
  border-top:  1px solid rgba(16, 185, 129, 0.06);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
}


/* ── 02. Wrap container ──────────────────────────────────────────────────── */

.eb-footer .eb-wrap {
  max-width:     var(--eb-container-max, 1140px);
  margin:        0 auto;
  padding-left:  var(--eb-container-pad, clamp(1rem, 4vw, 2.5rem));
  padding-right: var(--eb-container-pad, clamp(1rem, 4vw, 2.5rem));
}


/* ── 03. Grid ────────────────────────────────────────────────────────────── */

.eb-footer__grid {
  display:               grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap:                   clamp(1.5rem, 3.5vw, 2.5rem);
  margin-bottom:         clamp(2rem, 4vw, 3rem);
}


/* ── 04. Brand column ────────────────────────────────────────────────────── */

.eb-footer__brand .eb-logo {
  font-size:     clamp(0.82rem, 1.1vw, 0.92rem);
  margin-bottom: 12px;
  display:       inline-flex;
}

/* Body copy — very muted, max 240px so it doesn't sprawl */
.eb-footer__brand p {
  font-size:  0.75rem;
  color:      rgba(220, 235, 225, 0.35);
  line-height: 1.72;
  max-width:  240px;
}


/* ── 05. Territory badges ────────────────────────────────────────────────── */

.eb-footer__territory {
  display:     flex;
  align-items: center;
  gap:         6px;
  margin-top:  10px;
}

.eb-footer__territory span {
  font-size:      0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          rgba(220, 235, 225, 0.3);
}

.eb-footer__territory-sep {
  color: rgba(245, 158, 11, 0.3);
}


/* ── 06. Nav column titles + links ───────────────────────────────────────── */

.eb-footer__col-title {
  display:        block;
  font-family:    monospace;
  font-size:      0.6rem;
  font-weight:    700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          rgba(245, 158, 11, 0.5);
  margin-bottom:  12px;
}

.eb-footer__col ul {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.eb-footer__col a {
  font-size:       0.75rem;
  color:           rgba(220, 235, 225, 0.4);
  text-decoration: none;
  line-height:     1.4;
  transition:      color 0.2s ease;
}

.eb-footer__col a:hover,
.eb-footer__col a:focus-visible {
  color: rgba(220, 235, 225, 0.82);
}


/* ── 07. Footer bar ──────────────────────────────────────────────────────── */

.eb-footer__bar {
  border-top:      1px solid rgba(16, 185, 129, 0.06);
  padding:         18px 0;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             10px;
}

.eb-footer__bar p {
  font-size:      0.68rem;
  color:          rgba(220, 235, 225, 0.18);
  letter-spacing: 0.05em;
  line-height:    1.5;
}

.eb-footer__bar-links {
  display:    flex;
  gap:        16px;
  list-style: none;
}

.eb-footer__bar-links a {
  font-size:       0.65rem;
  color:           rgba(220, 235, 225, 0.22);
  text-decoration: none;
  letter-spacing:  0.06em;
  transition:      color 0.2s ease;
}

.eb-footer__bar-links a:hover,
.eb-footer__bar-links a:focus-visible {
  color: rgba(220, 235, 225, 0.55);
}


/* ── 08. Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .eb-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.25rem, 3vw, 2rem);
  }

  /* Brand spans full width on tablet — 4 nav cols wrap to 2×2 grid */
  .eb-footer__brand {
    grid-column: 1 / -1;
  }

  .eb-footer__brand p {
    max-width: 100%;
  }
}

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

  .eb-footer__bar {
    flex-direction: column;
    align-items:    flex-start;
    gap:            6px;
  }
}