/* ──────────────────────────────────────────────────────────────────────
   SITE.CSS — Resolve Legal Services shared visual system
   Sitewide, additive, non-destructive polish layer.

   Load order on every page (do not change):
     1. page's own inline <style> block   (page-specific tokens + layout)
     2. assets/css/site.css               (THIS FILE — shared refinements)
     3. assets/css/mobile.css             (responsive breakpoints, !important)

   This file intentionally does NOT redeclare :root tokens — every page
   already defines --gold / --green / --dark / --mid / --light / --white /
   --serif / --sans in its own inline <style>, and custom properties
   resolve globally, so this file simply consumes them. Because it loads
   after the inline block, equal-specificity rules here (e.g. plain
   `body { }`) win over the inline ones without needing !important —
   mobile.css still loads last and keeps its !important responsive rules
   in full control.
   ────────────────────────────────────────────────────────────────────── */

/* ── Accessibility: visible keyboard focus everywhere (previously absent) ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold, #c9a84c);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Buttons already have their own background/border — tighten the offset
   so the outline doesn't look detached on solid pill/button shapes. */
.btn:focus-visible,
.btn-dark:focus-visible,
.btn-outline:focus-visible,
.btn-white:focus-visible,
.btn-outline-dark:focus-visible,
.btn-submit:focus-visible,
.nav-cta:focus-visible,
.card:focus-visible {
  outline-offset: 2px;
}

/* ── Heading safety net: headings stay serif even if inherited from a
   sans body, so pages that switch body copy to --sans keep the brand's
   serif heading voice without needing per-heading overrides. ── */
h1, h2, h3, h4 {
  font-family: var(--serif, 'Georgia', serif);
}

/* ── Reusable nav CTA pill (previously only defined inline on index.html;
   every other page hand-rolled its own "Instructions" link with inline
   styles and no matching "Book a Consultation" pill). ── */
.nav-cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--sans, 'Helvetica Neue', Arial, sans-serif);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  padding: 10px 22px;
  border-radius: 2px;
  white-space: nowrap;
  background: var(--green, #0A2D12);
  transition: background 0.2s, transform 0.15s;
}
.nav-cta:hover { background: #0d3d18; transform: translateY(-1px); }
.nav-cta.nav-cta-outline {
  background: transparent;
  color: var(--dark, #1a1a1a);
  border: 1px solid #d0ccc6;
}
.nav-cta.nav-cta-outline:hover { background: #f0ede8; }
/* "Instructions" keeps a slightly deeper tone so the two CTAs read as
   primary (Instructions) / secondary (Book a Consultation) at a glance. */
.nav-cta.nav-cta-primary { background: var(--green, #0A2D12); }
.nav-cta.nav-cta-secondary {
  background: transparent;
  color: var(--dark, #1a1a1a);
  border: 1px solid #d0ccc6;
}
.nav-cta.nav-cta-secondary:hover { background: #f0ede8; color: var(--dark, #1a1a1a); }

/* ── Comfortable tap targets (min ~44px) on primary interactive controls ── */
.btn, .btn-dark, .btn-outline, .btn-white, .btn-outline-dark,
.btn-submit, .nav-cta, .card, a.card, .service-card a.btn {
  min-height: 44px;
}
.btn, .btn-dark, .btn-outline, .btn-white, .btn-outline-dark, .btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Consistent, subtle premium polish on buttons: gentle lift + shadow
   on hover instead of a flat color swap only. Respects each page's own
   colors — only adds motion/depth. ── */
.btn, .btn-dark, .btn-outline, .btn-white, .btn-outline-dark, .btn-submit {
  transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn:hover, .btn-dark:hover, .btn-white:hover, .btn-outline-dark:hover, .btn-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(10, 45, 18, 0.15);
}
.btn-outline:hover {
  transform: translateY(-1px);
}

/* ── Card lift consistency across index (.card), about/advocacy (.pillar),
   expertise (.service-card) — index already had this; extending it. ── */
.pillar, .service-card {
  transition: border-top-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.pillar:hover, .service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}

/* ── Form fields: slightly clearer focus affordance beyond the gold
   underline already used on contact.html, without altering layout,
   names, or JS. ── */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  box-shadow: 0 1px 0 0 var(--gold, #c9a84c);
}

/* ── Reduce nav crowding just below the hamburger breakpoint by trimming
   link gap slightly on narrower desktop widths — additive, does not
   change the 1024px breakpoint itself or any element's visibility. ── */
@media (max-width: 1220px) {
  .nav-links { gap: 26px; }
}