/* ==========================================================================
   SprinklerRepair.com Houston — Theme CSS
   Mirrors the CSS variables and base layer from the React project's index.css
   so Tailwind utility classes like `bg-primary`, `text-muted-foreground`, etc.
   render identically on the WordPress build.
   ========================================================================== */

:root {
  --background: 40 20% 97%;
  --foreground: 215 25% 15%;
  --border: 215 20% 88%;
  --card: 0 0% 100%;
  --card-foreground: 215 25% 15%;
  --popover: 0 0% 100%;
  --popover-foreground: 215 25% 15%;
  --primary: 145 55% 32%;
  --primary-foreground: 0 0% 100%;
  --secondary: 215 25% 92%;
  --secondary-foreground: 215 25% 20%;
  --muted: 215 20% 93%;
  --muted-foreground: 215 15% 45%;
  --accent: 200 60% 92%;
  --accent-foreground: 200 50% 20%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --input: 215 20% 85%;
  --ring: 145 55% 32%;
  --radius: 0.375rem;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

/* Content lives below the fixed navbar — matches React MainLayout's pt-[72px] */
main.site-main {
  padding-top: 72px;
}

/* Scrolled state on the fixed header — mirrors the React Navbar behavior:
   py-5 → py-3, opaque white → translucent white with blur + subtle shadow. */
#site-header {
  transition: padding 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
#site-header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Sticky sub-nav on services/service-areas uses top-[72px] already; keep offsets working */

/* Hide horizontal scrollbar on in-page quick navs (services, service-areas) */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Prose (Tailwind typography substitute) — used on blog post articles */
.prose { color: #374151; line-height: 1.75; max-width: none; }
.prose p { margin: 0 0 1.25em; }
.prose h2 {
  font-weight: 700;
  font-size: 1.5rem;
  color: #111827;
  margin: 2em 0 0.75em;
  line-height: 1.3;
}
.prose h3 {
  font-weight: 700;
  font-size: 1.25rem;
  color: #111827;
  margin: 1.75em 0 0.6em;
}
.prose ul { list-style: disc; padding-left: 1.5rem; margin: 0 0 1.25em; }
.prose ol { list-style: decimal; padding-left: 1.5rem; margin: 0 0 1.25em; }
.prose li { margin: 0.4em 0; }
.prose a { color: hsl(var(--primary)); text-decoration: underline; }
.prose a:hover { color: hsl(145 55% 26%); }
.prose strong { color: #111827; font-weight: 600; }
.prose blockquote {
  border-left: 4px solid hsl(var(--primary));
  padding-left: 1rem;
  font-style: italic;
  color: #4b5563;
  margin: 1.5em 0;
}

/* Tailwind's line-clamp utilities (kept for blog excerpts) */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Override: ensure `container` centers like the React config */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 768px) { .container { max-width: 768px; padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }

/* Small polish — make buttons inside main content inherit pointer */
button { cursor: pointer; font-family: inherit; }

/* A11y: visible focus rings on keyboard focus */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

/* FAQ accordion */
.faq-item[aria-expanded="false"] .faq-body { display: none; }
.faq-item[aria-expanded="true"] .faq-icon-closed { display: none; }
.faq-item[aria-expanded="false"] .faq-icon-open { display: none; }

/* Form success/error messaging slide-in */
.form-success {
  animation: fadeIn 0.35s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Skip link for screen-reader/keyboard users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 0.75rem 1rem;
  background: hsl(var(--primary));
  color: #fff;
  text-decoration: none;
  border-radius: 0 0 0.375rem 0;
}
.skip-link:focus { left: 0; }