/*
 * footer.css v1.5.0
 *
 * Three-column white-on-cabernet site footer (ADR-009).
 *
 * Version history:
 *   v1.5.0 — Footer slim + three-column row alignment.
 *            (a) SLIM: trimmed vertical padding — desktop 60px/40px
 *                top/bottom → 32px/32px (var(--space-8)); mobile top
 *                32px → 24px. Inter-element vertical rhythm in each
 *                column tightened from per-element margins to a single
 *                8px grid row-gap (desktop).
 *            (b) ALIGN (desktop >=768px only): each column is now a
 *                3-row grid (logo zone / line 1 / line 2). The logo
 *                zone is a fixed 135px (the LORE logo height) with
 *                items bottom-aligned, so the differing logo heights
 *                (LORE 135 / KW 80) share a common bottom edge and the
 *                two text lines beneath each logo sit on the same
 *                baselines. The Quick Links heading bottom-aligns in
 *                the zone, dropping its nav row onto that same line-1
 *                baseline (per 2026-05-29 user direction). Mobile is
 *                untouched — it stays a single stacked column where
 *                cross-column alignment is moot. justify-items:start
 *                keeps the logos at intrinsic width (grid's default
 *                stretch would distort the fixed-height images).
 *
 *   v1.0.0 — Initial extraction from inline functions.php styles.
 *   v1.1.0 — Mobile-first column stacking (BACKLOG §3.2.6).
 *   v1.2.0 — Mobile-specific sizing refinement (ADR-015).
 *   v1.3.0 — Quick Links stacked vertically (44px min-height per
 *            item) across ALL breakpoints. Touch-target win on
 *            mobile, but on desktop the horizontal three-column
 *            footer ends up with a vertically-stacked middle
 *            column that looks bottom-heavy relative to the
 *            brand column (logo + copyright, ~2 vertical units)
 *            and the broker column (KW logo + 2 lines, ~3
 *            vertical units). At 4 vertical units (heading + 3
 *            44px-tall stacked links), the middle column drives
 *            the entire footer row's height for no benefit on a
 *            mouse-driven surface.
 *
 *   v1.4.1 — SCOPE-7.4 Phase 4 §5.5. Brand column gains a
 *            .lore-footer__mailto line (forsale@loremultifamily
 *            .com) below the copyright. White text on cabernet to
 *            match footer base; underline on hover; focus-visible
 *            ring for keyboard users; mobile and desktop use the
 *            same styling (no breakpoint variants).
 *
 *   v1.4.0 — Quick Links responsive flow per 2026-05-17 user
 *            direction:
 *
 *            (a) MOBILE (<768px): keep the vertical stack with
 *                44px min-height tap targets (WCAG 2.5.5,
 *                iOS HIG). This is what the v1.3.0 work earned
 *                and is correct for touch input.
 *
 *            (b) DESKTOP (>=768px): nav becomes horizontal flex
 *                row with the original gap, no min-height tap
 *                target (mouse input doesn't need it, and the
 *                44px height was adding unnecessary vertical
 *                weight to the middle column). Items wrap onto
 *                a second line if the column happens to be
 *                narrow (defensive — Terms / Privacy / Contact
 *                fits comfortably on one line at typical
 *                viewport widths but flex-wrap keeps it from
 *                clipping if a longer link ever joins them).
 *                12px gap between items.
 *
 *            (c) Hover/focus polish for the Quick Links anchors.
 *                v1.3.0's only :hover treatment was an underline,
 *                and the UA default focus state — a thin outline
 *                box around the link's bounding rect — drew on
 *                BOTH hover-via-click AND keyboard-Tab in some
 *                browsers, visible as a faint box against the
 *                cabernet background (per user screenshot
 *                2026-05-17). Fix mirrors the gallery polish in
 *                listing.css v1.0.12: outline: none on the base
 *                anchor state (suppress UA default), keyboard-
 *                nav-only focus via :focus-visible (clean white
 *                ring). Hover state retains the underline plus
 *                gains an explicit color preservation rule so
 *                no parent-style underlay can darken it. Active
 *                / mousedown state also explicit.
 *
 * Hex literals replaced with brand tokens (ADR-012). Articulat /
 * Inter fallback per the brand book.
 *
 * Non-tokenized values intentional:
 *   135px logo zone + 135px / 80px / 80px / 55px logo heights
 *   1400px max-width
 *   44px nav-link min-height ON MOBILE ONLY (iOS HIG)
 *   12px horizontal gap between desktop nav items (component-
 *     level rhythm; matches --space-3)
 */

.site-footer {
  background: var(--color-cabernet);
  padding: 0;
  margin: 0;
}

.lore-footer {
  background: var(--color-cabernet);
  color: var(--color-white);
  padding: var(--space-6) var(--space-4) var(--space-6);
  font-family: var(--font-body);
}

.lore-footer__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}

.lore-footer__col {
  text-align: left;
}

.lore-footer__logo {
  display: block;
  height: 80px;
  width: auto;
  margin: 0 0 var(--space-6);
}

.lore-footer__copy {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.lore-footer__heading {
  margin: var(--space-2) 0 var(--space-6);
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
  color: var(--color-white);
}

/* Mobile (base): vertical stack with 44px tap targets per item.
   Desktop override flips this back to a horizontal row. */
.lore-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.lore-footer__nav a {
  color: var(--color-white);
  text-decoration: none;
  font-size: var(--fs-base);
  display: flex;
  align-items: center;
  min-height: 44px;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: text-decoration-color 150ms ease;
}

.lore-footer__nav a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

.lore-footer__nav a:active {
  color: var(--color-white);
}

/* Keyboard-nav focus only. Click/tap does not draw a ring. */
.lore-footer__nav a:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
  border-radius: 2px;
}

.lore-footer__kw {
  display: block;
  height: 55px;
  width: auto;
  margin: 0 0 var(--space-4);
}

.lore-footer__broker-line {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.lore-footer__dre {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* Phase 4 (v1.4.1) — Brand-column mailto. SCOPE-7.4 §5.5. White on
   cabernet to match the rest of the footer; underline on hover for
   discoverability. Sits below the copyright line. */
.lore-footer__mailto {
  display: inline-block;
  margin: var(--space-2) 0 0;
  color: var(--color-white);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: text-decoration-color 150ms ease;
}

.lore-footer__mailto:hover,
.lore-footer__mailto:focus-visible {
  color: var(--color-white);
  text-decoration: underline;
}

.lore-footer__mailto:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (min-width: 768px) {
  .lore-footer {
    padding: var(--space-8) var(--space-10) var(--space-8);
  }

  .lore-footer__inner {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-12);
  }

  /* v1.5.0 — Align all three columns onto a shared row grid. Each column
     is a 3-row grid: row 1 is a fixed 135px logo zone, rows 2-3 are the
     two text lines. align-items:end bottom-aligns the logos (and the
     Quick Links heading) within the zone, so the differing logo heights
     share a common bottom edge and the text lines below line up across
     columns; the Quick Links nav drops onto the line-1 baseline.
     justify-items:start keeps logos at intrinsic width (default stretch
     would distort the fixed-height images). row-gap owns vertical rhythm
     (the per-element margins below are zeroed for desktop). */
  .lore-footer__col {
    display: grid;
    grid-template-rows: 135px auto auto;
    align-items: end;
    justify-items: start;
    row-gap: var(--space-2);
  }

  .lore-footer__logo,
  .lore-footer__kw {
    margin-bottom: 0;
  }

  .lore-footer__heading {
    margin: 0;
  }

  .lore-footer__mailto {
    margin-top: 0;
  }

  .lore-footer__broker-line {
    margin-bottom: 0;
  }

  .lore-footer__logo {
    height: 135px;
  }

  .lore-footer__kw {
    height: 80px;
  }

  /* Desktop: Quick Links flow horizontally with their original
     spacing. flex-wrap as a defensive measure if a longer link
     joins the list later. 44px min-height per item is dropped on
     desktop — mouse input doesn't need the touch target and the
     extra height was making the middle column drive footer-row
     height unnecessarily. */
  .lore-footer__nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 20px;
  }

  .lore-footer__nav a {
    min-height: 0;
    display: inline-flex;
  }
}