/**
 * Footer Identity (Phase 2C).
 *
 * The footer's original rules live in assets/css/header.css (a pre-existing
 * naming/organization issue, not introduced here) under a
 * ".alm-footer" block. This file is loaded AFTER header.css and overrides
 * those same selectors using the brand tokens from assets/css/brand.css, via
 * normal CSS cascade — header.css itself was intentionally left untouched to
 * avoid any risk to the header. New footer-only rules also live here.
 */

.alm-footer { background: var(--alm-navy); }

/* Fixes a pre-existing low-contrast bug: footer links were a dark
   rgba(73,68,68,.9) — nearly invisible on the dark navy background. */
.alm-footer a { color: rgba(255, 255, 255, .82); }
.alm-footer a:hover { color: var(--alm-gold); }

.alm-footer__top {
  background: linear-gradient(135deg, var(--alm-navy), var(--alm-navy-2));
}
.alm-footer__toptext span { color: var(--alm-gold); }

.alm-footer__mark {
  background: radial-gradient(circle at 30% 30%, var(--alm-gold), var(--alm-navy-2));
}

.alm-footer__title { color: var(--alm-gold); }
.alm-footer__legal a:hover { color: var(--alm-gold); }

.alm-footer__slogan {
  margin: 10px 0 0;
  font-weight: 900;
  color: var(--alm-gold);
}

/*
 * 4-column layout (Phase 2C: Brand / Services / Areas / Contact) — desktop
 * only. Scoped to the same breakpoint header.css's own default (unscoped)
 * .alm-footer__grid rule effectively covers, so header.css's own
 * "max-width: 1100px" (2 columns) and "max-width: 700px" (1 column) media
 * queries keep working exactly as before: an unscoped rule here would beat
 * them on source order despite equal specificity and break mobile stacking.
 */
@media (min-width: 1101px) {
  .alm-footer__grid {
    grid-template-columns: 1.3fr 1fr 1.1fr 1fr;
  }
}

/*
 * Footer-scoped CTA contrast fix. Since Phase 2D made WhatsApp green
 * (assets/css/buttons.css) the sitewide default, only the "call" button
 * still needs a footer-specific override here: the global default is a navy
 * background, which would blend into the footer's own dark navy background.
 */
.alm-footer .alm-btn--primary {
  background: var(--alm-white);
  color: var(--alm-navy);
}

@media (max-width: 700px) {
  /* Footer must never sit under the mobile sticky bottom bar (Phase 1). */
  .alm-footer__bottom { padding-bottom: calc(14px + 64px); }
}