/* ==========================================================================
   Lorente Plumbing Services Inc. — shared stylesheet
   Brand: #549ecf (primary) · #1C1C1E (charcoal) · #FFFFFF
   ========================================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  font-family: 'Poppins', sans-serif;
}

/* Room for the sticky mobile call bar */
@media (max-width: 1023px) {
  body {
    padding-bottom: 4.5rem;
  }
}

/* A display utility (flex, grid, block) otherwise beats the [hidden] attribute. */
[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

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

/* --------------------------------------------------------------- header -- */

#site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid rgba(28, 28, 30, 0.07);
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Home page: transparent header floating over the banner.
   The scrim is a pseudo-element that extends well below the header box, so the
   fade finishes off-header and never draws a visible edge across the banner. */
#site-header.header-overlay {
  position: fixed;
  left: 0;
  right: 0;
  background: none;
  border-bottom: 0;
}

#site-header.header-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -4.5rem;
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.9) 30%,
      rgba(255, 255, 255, 0.62) 58%,
      rgba(255, 255, 255, 0.28) 80%,
      rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s ease;
}

#site-header.header-overlay > div {
  position: relative;
  z-index: 1;
}

#site-header.header-overlay.is-stuck {
  background: #ffffff;
  border-bottom: 1px solid rgba(28, 28, 30, 0.07);
  box-shadow: 0 6px 24px -12px rgba(28, 28, 30, 0.35);
}

#site-header.header-overlay.is-stuck::before {
  opacity: 0;
}

.nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(28, 28, 30, 0.75);
  transition: color 0.2s ease;
  white-space: nowrap;
}

.nav-link:hover {
  color: #549ecf;
}

.nav-link.is-active {
  color: #549ecf;
  font-weight: 600;
}

.mob-link {
  display: block;
  padding: 0.85rem 0.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1C1C1E;
  border-bottom: 1px solid rgba(28, 28, 30, 0.06);
}

.mob-link:last-of-type {
  border-bottom: none;
}

/* -------------------------------------------------------------- buttons -- */

.btn-primary,
.btn-whatsapp,
.btn-ghost,
.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 0.5rem;
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  white-space: nowrap;
}

.btn-primary {
  background: #549ecf;
  color: #fff;
  box-shadow: 0 12px 24px -14px rgba(84, 158, 207, 0.9);
}

.btn-primary:hover {
  background: #1a7ab5;
  transform: scale(1.04);
}

.btn-whatsapp {
  background: #25D366;
  color: #fff;
  box-shadow: 0 12px 24px -14px rgba(37, 211, 102, 0.9);
}

.btn-whatsapp:hover {
  background: #1da851;
  transform: scale(1.04);
}

.btn-ghost {
  background: #fff;
  color: #1C1C1E;
  border: 1px solid rgba(28, 28, 30, 0.15);
}

.btn-ghost:hover {
  background: #f7f9fb;
  transform: scale(1.04);
}

.btn-dark {
  background: #1C1C1E;
  color: #fff;
}

.btn-dark:hover {
  background: #549ecf;
  transform: scale(1.04);
}

/* Narrow phones: keep the header row on one line and stop wide CTA buttons
   from pushing the page sideways. The header call button must stay visible,
   so it shrinks rather than hiding the number. */
@media (max-width: 400px) {
  #site-header img {
    height: 2.75rem;
  }

  #site-header a[href^="tel:"] {
    gap: 0.35rem;
    padding-left: 0.65rem;
    padding-right: 0.75rem;
    font-size: 0.8125rem;
  }

  #site-header a[href^="tel:"] .material-symbols-outlined {
    font-size: 17px;
  }

  #menu-toggle {
    width: 2.5rem;
    height: 2.5rem;
  }

  .btn-primary,
  .btn-whatsapp,
  .btn-ghost,
  .btn-dark {
    white-space: normal;
    justify-content: center;
    text-align: center;
    padding: 0.8rem 1.1rem;
    font-size: 0.875rem;
  }
}

@media (max-width: 340px) {
  #site-header img {
    height: 2.5rem;
  }

  #site-header a[href^="tel:"] {
    gap: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 0.6rem;
    font-size: 0.75rem;
  }

  #site-header a[href^="tel:"] .material-symbols-outlined {
    font-size: 16px;
  }

  #menu-toggle {
    width: 2.25rem;
    height: 2.25rem;
  }

  .mobile-bar-btn {
    font-size: 0.8125rem;
    padding: 0.9rem 0.35rem;
  }
}

/* --------------------------------------------------------- hero heading -- */

/* Two guaranteed lines: "Your Local" / "Plumbers And Contractors".
   Each line is nowrap and the size is fluid, so it can never wrap to a
   third line at any viewport width. */
.hero-title {
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  /* Sized so the longest line ("Plumbers And Contractors") always fits its
     column. Measured on the real element: rendered width is 13.19x the
     font-size in Poppins Bold, and the gutter is up to 63px once a classic
     scrollbar is present — so 5.8vw is the widest coefficient that still
     fits at 280px, the narrowest viewport worth supporting. */
  font-size: clamp(0.95rem, 5.8vw, 2.6rem);
}

.hero-title span {
  display: block;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .hero-title {
    font-size: clamp(2.1rem, 5.4vw, 3rem);
  }
}

@media (min-width: 1024px) {
  /* Text column is 57.5% of a 1232px max container, so 3.15rem is the ceiling. */
  .hero-title {
    font-size: clamp(2.3rem, 3.5vw, 3.15rem);
  }
}

/* Banner overlay on the home page */
.banner-gradient-overlay {
  display: none;
}

@media (min-width: 1024px) {
  .banner-gradient-overlay {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 5;
    /* Near-solid white across the full width of the text column, then a long
       fade so the photo is still visible on the right. */
    background: linear-gradient(to right,
        rgba(255, 255, 255, 0.97) 0%,
        rgba(255, 255, 255, 0.95) 38%,
        rgba(255, 255, 255, 0.87) 54%,
        rgba(255, 255, 255, 0.6) 70%,
        rgba(255, 255, 255, 0.22) 85%,
        rgba(255, 255, 255, 0) 96%);
    pointer-events: none;
  }
}

/* ---------------------------------------------------------------- cards -- */

.svc-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(28, 28, 30, 0.08);
  border-radius: 1rem;
  padding: 2rem;
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.svc-card:hover {
  box-shadow: 0 24px 48px -28px rgba(28, 28, 30, 0.45);
  border-color: rgba(84, 158, 207, 0.4);
  transform: translateY(-4px);
}

.svc-card h3 {
  font-weight: 700;
  font-size: 1.0625rem;
  margin-bottom: 0.5rem;
}

.svc-card p {
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgba(28, 28, 30, 0.62);
  flex: 1;
}

.svc-card .svc-more {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #549ecf;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.lic-card {
  background: #fff;
  border: 1px solid rgba(28, 28, 30, 0.08);
  border-left: 4px solid #549ecf;
  border-radius: 0.75rem;
  padding: 1.5rem;
}

.lic-number {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1C1C1E;
}

/* --------------------------------------------------------------- prose --- */

.prose-block p {
  color: rgba(28, 28, 30, 0.72);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.prose-block p:last-child {
  margin-bottom: 0;
}

.check-list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(28, 28, 30, 0.72);
}

.check-list li::before {
  content: "check_circle";
  font-family: 'Material Symbols Outlined';
  font-size: 1.25rem;
  line-height: 1.35;
  color: #549ecf;
  flex-shrink: 0;
}

/* ------------------------------------------------------------------ faq -- */

.faq-item {
  border-bottom: 1px solid rgba(28, 28, 30, 0.08);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 0;
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "add";
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  color: #549ecf;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.faq-item[open] summary::after {
  content: "remove";
}

.faq-item p {
  padding: 0 0 1.35rem;
  color: rgba(28, 28, 30, 0.68);
  line-height: 1.75;
  font-size: 0.9375rem;
}

/* ---------------------------------------------------------- mobile bar --- */

.mobile-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  gap: 1px;
  background: rgba(28, 28, 30, 0.1);
  box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, 0.6);
}

.mobile-bar-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
}

/* -------------------------------------------------------------- marquee -- */

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  animation: marquee 45s linear infinite;
}

@media (max-width: 768px) {
  .animate-marquee {
    animation: marquee 28s linear infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animate-marquee {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }
}