/* ============================================================
   3C Handyman Service — Shared CSS Variables
   Only brand-level tokens live here. Page-specific styles
   stay in each HTML file so visual iterations are isolated.
   ============================================================ */

:root {
  /* Surfaces */
  --bg: #f7f6f3;
  --surface: #fff;
  --border: #e0ddd6;
  --border-mid: #c8c4bc;

  /* Text */
  --text: #1a1a18;
  --text-2: #6b6860;
  --text-3: #9a9690;

  /* Brand accent (blue) */
  --accent: #2a6496;
  --accent-l: #e8f2fa;
  --accent-d: #1a4a74;

  /* Semantic colors */
  --green: #2d6a4f;
  --green-l: #e1f5ee;
  --red: #9b2226;
  --red-l: #fcebeb;
  --amber: #92600a;
  --amber-l: #faeeda;

  /* WhatsApp brand (for CTA) */
  --whatsapp: #25d366;
  --whatsapp-d: #1da851;

  /* Radii */
  --r: 10px;
  --rs: 6px;
}

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

/* ============================================================
   Site-wide nav links — shared across all pages.
   Add .nav-links inside .nav to activate. The .nav-cta button
   always stays visible; .nav-links collapses on mobile.
   ============================================================ */

.nav-links {
  display: flex;
  align-items: center;
  flex: 1;
}

.nav-link {
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  padding: 0 13px;
  height: 52px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  transition: color .15s;
}

.nav-link:hover { color: var(--text); }
.nav-link.active { color: var(--accent); font-weight: 600; }

.nav-cta {
  background: var(--accent);
  color: #fff;
  padding: 8px 14px;
  border-radius: var(--rs);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
  display: inline-block;
}

.nav-cta:hover { background: var(--accent-d); }
.nav-cta:visited { color: #fff; }

@media (max-width: 640px) {
  .nav-links { display: none; }
  .nav-cta { padding: 6px 11px; font-size: 12px; }
}