@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

:root {
  --background: 0 0% 100%;
  --foreground: 220 15% 13%;
  --card: 0 0% 100%;
  --card-foreground: 220 15% 13%;
  --popover: 0 0% 100%;
  --popover-foreground: 220 15% 13%;
  --primary: 24 95% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220 15% 13%;
  --secondary-foreground: 0 0% 100%;
  --muted: 30 10% 95%;
  --muted-foreground: 220 10% 40%;
  --accent: 40 100% 50%;
  --accent-foreground: 220 15% 13%;
  --border: 30 15% 88%;
  --input: 30 15% 88%;
  --ring: 24 95% 50%;
  --radius: 0.5rem;
}

* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body { margin: 0; font-family: 'Open Sans', sans-serif; background: hsl(var(--background)); color: hsl(var(--foreground)); }
h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', sans-serif; }

/* Sticky header: prevent jump/shake on scroll — own compositor layer */
header.sticky {
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Header scroll effect: smaller logo + adjusted bg when scrolled; nav height stays fixed to prevent jump */
.header-nav {
  min-height: 110px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
@media (min-width: 640px) {
  .header-nav { min-height: 130px; }
}
@media (min-width: 768px) {
  .header-nav { min-height: 150px; }
}
@media (min-width: 1024px) {
  .header-nav { min-height: 180px; }
}
header .header-logo {
  transition: height 0.3s ease, width 0.3s ease, margin 0.3s ease;
}
/* Scrolled: compact logo + darker solid bg and shadow */
header.header--scrolled .header-nav {
  background-color: hsl(220 15% 8%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
header.header--scrolled .header-logo {
  height: 72px !important;
  width: 72px !important;
  margin: -8px 0 !important;
}

.font-heading { font-family: 'Open Sans', sans-serif; }
.container-narrow { max-width: 80rem; margin-left: auto; margin-right: auto; }
.section-padding { padding: 4rem 1rem; }
@media (min-width: 768px) { .section-padding { padding: 4rem 2rem; } }
@media (min-width: 1024px) { .section-padding { padding: 6rem 4rem; } }
.hero-overlay { position: absolute; inset: 0; background: hsl(var(--secondary) / 0.8); }
.hero-subtitle { color: white; text-shadow: -1px -1px 0 rgba(0,0,0,0.8), 1px -1px 0 rgba(0,0,0,0.8), -1px 1px 0 rgba(0,0,0,0.8), 1px 1px 0 rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.5); }
.card-hover { transition: all 0.3s; }
.card-hover:hover { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); transform: translateY(-4px); }
.text-gradient { background-clip: text; -webkit-background-clip: text; color: transparent; background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--accent))); }
.animate-fade-in { animation: fadeIn 0.6s ease-out forwards; }
.animate-slide-up { animation: slideUp 0.6s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.bg-background { background-color: hsl(var(--background)); }
.bg-primary { background-color: hsl(var(--primary)); }
.bg-primary\/10 { background-color: hsl(var(--primary) / 0.1); }
.bg-primary\/20 { background-color: hsl(var(--primary) / 0.2); }
.bg-secondary { background-color: hsl(var(--secondary)); }
.bg-secondary\/20 { background-color: hsl(var(--secondary) / 0.2); }
.bg-secondary\/40 { background-color: hsl(var(--secondary) / 0.4); }
.bg-secondary\/80 { background-color: hsl(var(--secondary) / 0.8); }
.bg-secondary\/90 { background-color: hsl(var(--secondary) / 0.9); }
.bg-card { background-color: hsl(var(--card)); }
.bg-muted { background-color: hsl(var(--muted)); }
.bg-muted\/10 { background-color: hsl(var(--muted) / 0.1); }

.text-foreground { color: hsl(var(--foreground)); }
.text-primary { color: hsl(var(--primary)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.text-primary-foreground\/70 { color: hsl(var(--primary-foreground) / 0.7); }
.text-primary-foreground\/80 { color: hsl(var(--primary-foreground) / 0.8); }
.text-secondary-foreground { color: hsl(var(--secondary-foreground)); }
.text-secondary-foreground\/50 { color: hsl(var(--secondary-foreground) / 0.5); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-card-foreground { color: hsl(var(--card-foreground)); }

.border-border { border-color: hsl(var(--border)); }
.border-border\/20 { border-color: hsl(var(--border) / 0.2); }
.border-border\/30 { border-color: hsl(var(--border) / 0.3); }
.border-input { border-color: hsl(var(--input)); }

/* ——— FAQ / Accordion (all pages) ——— */
.accordion-trigger {
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  border: none;
  font: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  padding: 0.875rem 1rem;
}
.accordion-trigger:hover {
  background-color: hsl(var(--muted) / 0.7);
}
.accordion-trigger[aria-expanded="true"] {
  background-color: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
  box-shadow: inset 4px 0 0 0 hsl(var(--primary));
}
.accordion-trigger[aria-expanded="true"] .accordion-chevron {
  color: hsl(var(--primary));
  transform: rotate(180deg);
}
.accordion-chevron {
  flex-shrink: 0;
  margin-left: 0.25rem;
  transition: transform 0.2s ease, color 0.2s ease;
}
/* Accordion content: hidden by default, shown when opened */
.accordion-content {
  transition: height 0.25s ease-out, opacity 0.2s ease;
  overflow: hidden;
  line-height: 1.6;
}
.accordion-content[data-state="closed"] {
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  border-top-width: 0 !important;
  opacity: 0;
  pointer-events: none;
}
.accordion-content[data-state="open"] {
  height: auto;
  overflow: visible;
  opacity: 1;
  pointer-events: auto;
}

/* FAQ section wrapper (faqs.html and any page with .faq-accordion-section) */
.faq-accordion-section .faq-item {
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  background-color: hsl(var(--card));
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.06);
}
.faq-accordion-section .faq-item:hover {
  box-shadow: 0 2px 6px 0 rgb(0 0 0 / 0.08);
}
.faq-accordion-section .faq-item:last-child {
  margin-bottom: 0;
}
.faq-accordion-section .accordion-trigger {
  padding: 1rem 1.25rem;
}
.faq-accordion-section .accordion-content {
  padding: 0.75rem 1.25rem 1rem;
  border-top: 1px solid hsl(var(--border));
}
.faq-accordion-section .accordion-content[data-state="closed"] {
  padding: 0 !important;
  border-top-width: 0 !important;
}

.scrollbar-hide { scrollbar-width: none; -ms-overflow-style: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ——— Contact Form 7 (contact page) ——— */
/* Screenshot layout: row1 Full Name | Email, row2 Phone | Service, full width Message, then Send Message button */
.runyon-contact-form.space-y-5,
.runyon-contact-form.space-y-6 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .runyon-contact-form.space-y-5,
  .runyon-contact-form.space-y-6 { grid-template-columns: 1fr 1fr; gap: 1.25rem 1.25rem; }
  /* Message (textarea) and Submit full width */
  .runyon-contact-form.space-y-5 > p:has(textarea),
  .runyon-contact-form.space-y-5 > p:has(input[type="submit"]),
  .runyon-contact-form.space-y-6 > p:has(textarea),
  .runyon-contact-form.space-y-6 > p:has(input[type="submit"]) { grid-column: 1 / -1; }
}
.runyon-contact-form .wpcf7-form-control-wrap { display: block; margin-top: 0.375rem; }
.runyon-contact-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 0.375rem;
}
/* Inputs: white bg, light grey border, rounded-lg, dark text — match screenshot */
.runyon-contact-form input[type="text"],
.runyon-contact-form input[type="email"],
.runyon-contact-form input[type="tel"],
.runyon-contact-form input[type="number"],
.runyon-contact-form select.wpcf7-form-control,
.runyon-contact-form textarea.wpcf7-form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: hsl(var(--foreground));
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  border-radius: 0.5rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.runyon-contact-form input::placeholder,
.runyon-contact-form textarea::placeholder { color: hsl(var(--muted-foreground)); }
.runyon-contact-form select.wpcf7-form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1.25rem;
  padding-right: 2.5rem;
}
.runyon-contact-form input:focus,
.runyon-contact-form select:focus,
.runyon-contact-form textarea:focus {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 1px hsl(var(--primary));
}
.runyon-contact-form textarea.wpcf7-form-control { resize: none; min-height: 10rem; }
/* Submit: orange button, white text, rounded-lg, shadow — match screenshot */
.runyon-contact-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: hsl(var(--primary-foreground));
  background-color: hsl(var(--primary));
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: filter 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.runyon-contact-form input[type="submit"]:hover { filter: brightness(1.1); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.runyon-contact-form .wpcf7-not-valid-tip { font-size: 0.875rem; margin-top: 0.25rem; }
.runyon-contact-form .wpcf7-response-output { margin: 1rem 0 0; padding: 0.75rem 1rem; border-radius: 0.5rem; }

/* Contact page sidebar: dark block, clear spacing */
.contact-info-block { background-color: hsl(var(--secondary)); border-radius: 0.5rem; }
.contact-info-block__details > * + * { margin-top: 1rem; }
.contact-info-block__details a { color: inherit; transition: color 0.2s; }
.contact-info-block__details a:hover { color: hsl(var(--primary)); }

/* ——— Quote popup form ——— */
#quote-dialog textarea,
#quote-dialog .quote-popup-textarea,
.runyon-quote-form textarea.wpcf7-form-control {
  min-height: 5rem;
  resize: none;
}
.runyon-quote-form.space-y-4 > p { margin-bottom: 1rem; }
.runyon-quote-form.space-y-4 > p:last-child { margin-bottom: 0; }
.runyon-quote-form .wpcf7-form-control-wrap { display: block; margin-top: 0.25rem; }
.runyon-quote-form label { display: block; font-size: 0.875rem; font-weight: 500; color: hsl(var(--foreground)); margin-bottom: 0.25rem; }
.runyon-quote-form input[type="submit"] {
  width: 100%;
  padding: 0.75rem 1.5rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: hsl(var(--primary-foreground));
  background-color: hsl(var(--primary));
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: filter 0.2s ease;
}
.runyon-quote-form input[type="submit"]:hover { filter: brightness(1.1); }
.runyon-quote-form .wpcf7-response-output { margin-top: 1rem; font-size: 0.875rem; }