/* =========================================================
   3R Handyman Services — theme.css
   Custom design layer on top of Tailwind utility classes.
   Design tokens (see tailwind.config in functions.php) — matched to the
   client's real logo (charcoal-gray roofline text + terracotta-orange roof):
     navy        #1E1E22  primary dark / headers / footer / body text
     navy-light  #2E2E35  secondary dark panels
     amber       #E9603E  primary accent / CTAs (logo orange)
     amber-dark  #C94A2C  CTA hover
     cream       #FAF8F5  section background
     ink         #1E1E22  body text (alias of navy)
     brick       #BA5E4A  muted accent, used sparingly
   Type: Space Grotesk (display), Inter (body), IBM Plex Mono (numbers/labels)
   ========================================================= */

:root {
  --navy: #1e1e22;
  --navy-light: #2e2e35;
  --amber: #e9603e;
  --amber-dark: #c94a2c;
  --cream: #faf8f5;
  --ink: #1e1e22;
  --brick: #ba5e4a;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  background-color: var(--cream);
}

.font-display {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}

.font-mono-tag {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
}

/* Blueprint grid texture — signature background motif, used sparingly
   behind the hero and the PM-page hero only. Reads like a jobsite blueprint. */
.blueprint-grid {
  background-image:
    linear-gradient(rgba(233, 96, 62, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233, 96, 62, 0.09) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* "Work order" ticket styling for trust badges + pricing/quote cards —
   perforated top edge like a paper job ticket. */
.ticket-edge {
  position: relative;
}
.ticket-edge::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background-image: linear-gradient(
    to right,
    transparent 0,
    transparent 6px,
    rgba(30, 30, 34, 0.25) 6px,
    rgba(30, 30, 34, 0.25) 12px
  );
  background-size: 12px 1px;
}

/* Punch-list checklist marks used on the Property Manager turnover checklist */
.punch-check {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid var(--navy);
  border-radius: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Visible keyboard focus everywhere (accessibility floor) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Before/After placeholder blocks */
.photo-placeholder {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(30, 30, 34, 0.06),
    rgba(30, 30, 34, 0.06) 10px,
    rgba(30, 30, 34, 0.02) 10px,
    rgba(30, 30, 34, 0.02) 20px
  );
}

/* Star rating glyphs */
.star-row {
  color: var(--amber);
  letter-spacing: 0.15em;
}

/* Mobile nav panel */
.mobile-nav {
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.mobile-nav.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Form success / error banners */
.form-banner {
  display: none;
}
.form-banner.is-visible {
  display: block;
}