/* Mr. Rooter CT - Custom CSS */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Header scroll shadow */
#site-header.scrolled .shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.2), 0 8px 10px -6px rgba(0,0,0,.2);
}

/* Animate on scroll - initial state */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Hero slide transitions */
.hero-slide {
  transition: opacity 0.8s ease;
}

/* FAQ answer transition */
.faq-answer {
  transition: max-height 0.35s ease, opacity 0.25s ease;
}

/* Flashing mobile "Special Offers" button — high-contrast pulse so it
   pops against the red header. Yellow ↔ white flash with a bright glow
   and a periodic wiggle to grab attention. */
@keyframes mobile-offer-pulse {
  0%, 100% {
    background-color: #FFB81C;
    box-shadow:
      0 0 0 0 rgba(255, 255, 255, 0.9),
      0 0 16px 3px rgba(255, 184, 28, 0.95);
    transform: scale(1) rotate(0deg);
  }
  35% {
    transform: scale(1.05) rotate(-4deg);
  }
  50% {
    background-color: #ffffff;
    box-shadow:
      0 0 0 6px rgba(255, 255, 255, 0),
      0 0 26px 8px rgba(255, 234, 130, 1);
    transform: scale(1.12) rotate(0deg);
  }
  65% {
    transform: scale(1.05) rotate(4deg);
  }
}
.mobile-offer-flash {
  display: inline-flex;
  background-color: #FFB81C;
  color: #0A2540;
  border: 3px solid #ffffff;
  border-radius: 9999px;
  padding: 10px 16px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow:
    0 0 0 0 rgba(255, 255, 255, 0.9),
    0 4px 12px rgba(0, 0, 0, 0.25),
    0 0 16px 3px rgba(255, 184, 28, 0.95);
  animation: mobile-offer-pulse 1.05s ease-in-out infinite;
  transform-origin: center;
}
/* Tailwind's lg:hidden uses display:none and must beat the rule above. */
@media (min-width: 1024px) {
  .mobile-offer-flash.lg\:hidden { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-offer-flash { animation: none; }
}

/* Mobile menu transition */
#mobile-menu {
  transition: opacity 0.3s ease;
}

/* Prose styles for service full description */
.prose p {
  margin-bottom: 1rem;
  line-height: 1.75;
  color: #4b5563;
}
.prose h2, .prose h3 {
  font-weight: 800;
  color: #0A2540;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}
.prose ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.prose li {
  margin-bottom: 0.5rem;
  color: #4b5563;
}

/* Admin upload preview */
.upload-preview img {
  max-height: 80px;
  object-fit: contain;
}

/* Focus styles */
input:focus, textarea:focus, select:focus {
  outline: 2px solid #0A2540;
  outline-offset: 0;
}

/* Button active state */
button:active, a[class*="btn"]:active {
  transform: scale(0.98);
}

/* ── Inline Admin Editing ──────────────────────────────── */

/* Text editable: subtle dashed outline */
.ie-edit-mode [data-ie-text] {
  outline: 2px dashed rgba(211,47,47,.45);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Image editable: subtle overlay border */
.ie-edit-mode [data-ie-img] {
  outline: 2px dashed rgba(10,37,64,.45);
  outline-offset: -2px;
}

/* Base for all floating edit buttons (appended to body, position:fixed set here) */
.ie-float-btn {
  position: fixed;
  z-index: 9990;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: Inter, system-ui, sans-serif;
  letter-spacing: .04em;
  pointer-events: auto;
}

/* Pencil "Edit" badge for text elements */
.ie-float-btn.ie-float-text-btn {
  background: #D32F2F;
  color: #fff;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.ie-float-btn.ie-float-text-btn:hover { background: #b72424; }

/* "Change Photo" button for image containers */
.ie-float-btn.ie-float-img-btn {
  background: rgba(10,37,64,.88);
  color: #fff;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  transition: background .15s;
}
.ie-float-btn.ie-float-img-btn:hover { background: #D32F2F; }

/* "Edit Video" button for video containers */
.ie-edit-mode [data-ie-video] {
  outline: 2px dashed rgba(211,47,47,.45);
  outline-offset: -2px;
}
.ie-float-btn.ie-float-video-btn {
  background: rgba(211,47,47,.92);
  color: #fff;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  transition: background .15s;
}
.ie-float-btn.ie-float-video-btn:hover { background: #b72424; }

/* ── SEO: Extracted inline styles ─────────────────────── */

/* Utility bar height */
.utility-bar { height: 40px; }

/* Dropdown z-index */
.dropdown-z { z-index: 100; }

/* Mobile menu positioning */
.mobile-menu-top { top: 120px; }

/* Media picker modal */
.modal-max-h-82 { max-height: 82vh; }

/* Map container */
.map-container-h { height: 520px; }

/* Guarantee background cover */
.bg-cover-center { background-size: cover; background-position: center; }

/* Dot pattern backgrounds */
.bg-dot-pattern {
  background-image: radial-gradient(circle at 25% 50%, rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Offers diagonal clip */
.clip-diagonal { clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%); }

/* About gradient overlays */
.bg-about-gradient-1 {
  background-image: radial-gradient(circle at 20% 50%, rgba(255,184,28,0.15) 0%, transparent 50%),
                     radial-gradient(circle at 80% 50%, rgba(211,47,47,0.15) 0%, transparent 50%);
}
.bg-about-gradient-2 {
  background-image: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.1) 0%, transparent 50%);
}

/* SVG countdown ring transition */
.countdown-ring-transition { transition: stroke-dashoffset 1s linear; }

/* Honeypot hidden field */
.honeypot-hidden {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}



/* Desktop mega menus: bounded panels and readable city links. */
#site-header .desktop-mega-panel {
  position: fixed;
  left: 16px;
  right: auto;
  top: 96px;
  transform: none;
  margin: 0;
  width: min(760px, calc(100vw - 32px));
  max-height: var(--mega-menu-height, calc(100dvh - 112px));
  overflow-y: auto;
  overscroll-behavior: contain;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
}
#mega-menu > .flex { width: 100%; }
#areas-menu .areas-menu-content { display: block; }
#areas-menu .areas-menu-intro {
  width: 100%;
  padding: 20px 28px;
  align-items: flex-start;
  text-align: left;
}
#areas-menu .areas-menu-intro > svg { display: none; }
#areas-menu .areas-menu-intro p { color: #cbd5e1; font-weight: 500; }
#areas-menu .areas-menu-links { width: 100%; padding: 20px; }
#areas-menu .areas-city-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 12px;
}
#areas-menu .areas-city-grid a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 6px;
  color: #334155;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
#areas-menu .areas-city-grid a:hover,
#areas-menu .areas-city-grid a:focus-visible { background: #f1f5f9; color: #b72424; }
#site-header button[aria-controls]:focus-visible,
#site-header .desktop-mega-panel a:focus-visible {
  outline: 2px solid #FFB81C;
  outline-offset: 2px;
}
#site-header button[aria-expanded="true"] { color: #FFB81C; }
/* Keep the full navigation and CTAs from colliding on smaller desktops. */
@media (min-width: 1024px) and (max-width: 1279px) {
  #site-header nav { font-size: 12px; margin-right: 8px; }
  #site-header nav > a, #site-header nav > div { padding-left: 8px; padding-right: 8px; }
  #site-header > div > div > a:first-child img { max-width: 135px; }
}


/* Match disclosure buttons to the uppercase top-level navigation links. */
#services-trigger,
#areas-trigger { text-transform: uppercase; }