/* ============================================
   A to Z Construction | design polish layer
   Loaded last on every page. Refines type, press
   feedback, depth and motion without changing layout.
   ============================================ */

/* ── TYPE ─────────────────────────────────────────── */
html { scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; font-kerning: normal; }
::selection { background: rgba(124, 194, 66, 0.28); }

/* Large display type gets tighter tracking and leading; body stays near zero */
h1 { letter-spacing: -0.022em; line-height: 1.04; }
h2 { letter-spacing: -0.018em; line-height: 1.08; }
h3 { letter-spacing: -0.01em; line-height: 1.18; }
h1, h2, h3 { text-wrap: balance; }
p, li, blockquote, figcaption { text-wrap: pretty; }
p.lead, .lead { line-height: 1.6; }

/* ── PRESS FEEDBACK ───────────────────────────────── */
/* Respond on press, not release: short scale-down, slower settle back */
.btn, .nav-cta, .mobile-menu-cta, .cta-phone, .review-badge, .sticky-call,
button, [type="submit"] {
  -webkit-tap-highlight-color: transparent;
  transition-property: background-color, color, border-color, box-shadow, transform, opacity;
  transition-duration: 0.35s;
  transition-timing-function: var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.btn:active, .nav-cta:active, .mobile-menu-cta:active, .cta-phone:active,
.review-badge:active, .sticky-call:active,
button:not(:disabled):active, [type="submit"]:not(:disabled):active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}
.btn-primary { box-shadow: 0 1px 2px rgba(31, 31, 33, 0.08), 0 8px 22px -6px rgba(124, 194, 66, 0.55); }
.btn-primary:hover { box-shadow: 0 2px 4px rgba(31, 31, 33, 0.08), 0 14px 32px -8px rgba(124, 194, 66, 0.6); }

/* Clear keyboard focus without showing rings on mouse clicks */
a:focus-visible, button:focus-visible, [type="submit"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brand-green, #7CC242);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── NAV MATERIAL ─────────────────────────────────── */
/* Translucent bar with content visible underneath, soft edge instead of a hard line */
.nav.scrolled, .nav.always-solid {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 rgba(31, 31, 33, 0.06), 0 8px 24px -16px rgba(31, 31, 33, 0.18);
}

/* Menu items never break onto two lines */
.nav-links a, .nav-cta, .nav-phone { white-space: nowrap; }
.nav-logo { flex-shrink: 0; }

/* Small laptops: tighter spacing so the full menu fits on one line */
@media (min-width: 1061px) and (max-width: 1240px) {
  .nav, .nav.scrolled, .nav.always-solid { padding-left: 1.25rem; padding-right: 1.25rem; }
  .nav-links { gap: 1.3rem; }
  .nav-links a { font-size: 0.84rem; }
  .nav-cta { padding: 0.6rem 1.1rem; }
}

/* Wide screens: full menu only (service and blog stylesheets showed both) */
@media (min-width: 1061px) {
  .hamburger { display: none; }
}

/* Tablets: the full menu does not fit, so use the hamburger menu */
@media (max-width: 1060px) {
  .hamburger { display: flex; }
  .nav-links { display: none !important; }
}

/* ── CARDS & DEPTH ────────────────────────────────── */
/* Layered shadows read as real depth; hover lift stays small */
.testimonial, .blog-card, .related-card, .tier-card, .driver-card,
.article-cta-card, .lp-review {
  transition: opacity 0.9s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
              transform 0.5s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
              box-shadow 0.5s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
              border-color 0.5s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.testimonial:hover, .blog-card:hover, .related-card:hover, .tier-card:hover, .driver-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(31, 31, 33, 0.04), 0 4px 10px -2px rgba(31, 31, 33, 0.06), 0 22px 44px -18px rgba(31, 31, 33, 0.2);
}
.testimonial:active, .blog-card:active, .related-card:active, .service-card:active {
  transform: translateY(-1px) scale(0.99);
  transition-duration: 0.12s;
}
.service-card { box-shadow: 0 1px 2px rgba(31, 31, 33, 0.06), 0 16px 36px -20px rgba(31, 31, 33, 0.35); }
.service-card-img, .blog-card-img img { transition-duration: 0.9s; }

/* ── REVIEW TITLES ────────────────────────────────── */
.testimonial-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.125rem, 1.6vw, 1.3rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ink, #1f1f21);
  margin: 0 0 0.75rem;
  text-wrap: balance;
}
.lp-review .testimonial-title { margin-top: 0.5rem; }

/* ── FOOTER SOCIAL ────────────────────────────────── */
.footer-social { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
  transition: background-color 0.3s var(--ease, ease), color 0.3s var(--ease, ease),
              border-color 0.3s var(--ease, ease), transform 0.35s var(--ease, ease);
}
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }
.footer-social a:hover { background: var(--brand-green, #7CC242); border-color: var(--brand-green, #7CC242); color: #fff; transform: translateY(-2px); }
.footer-social a:active { transform: scale(0.94); transition-duration: 0.1s; }

/* ── FORMS ────────────────────────────────────────── */
input, select, textarea { caret-color: var(--brand-green-dark, #5fa130); }

/* ── SCROLL REVEAL ────────────────────────────────── */
/* Shorter travel, quicker settle: content arrives, it does not fly in */
.reveal { transform: translateY(20px); transition-duration: 0.9s, 0.9s; }
.reveal.in { transform: none; }

/* ── ACCESSIBILITY PREFERENCES ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none !important; transition: opacity 0.3s ease !important; }
  .btn:active, .nav-cta:active, button:active, .testimonial:active,
  .blog-card:active, .related-card:active, .service-card:active { transform: none !important; }
  .testimonial:hover, .blog-card:hover, .related-card:hover, .tier-card:hover,
  .driver-card:hover, .service-card:hover { transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav.scrolled, .nav.always-solid { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .nav.scrolled, .nav.always-solid { background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
  .testimonial, .blog-card, .tier-card { border-color: rgba(0, 0, 0, 0.4); }
}