/* ------------------------------------------------------------------
   Clean Leeds LTD - static site additions
   Loaded after style.css (the original compiled build).
   Everything here replaces behaviour that used to come from React.
-------------------------------------------------------------------*/

/* Mobile navigation panel ---------------------------------------- */
.cl-mobile-nav {
  display: flex !important;
  flex-direction: column;
  gap: .125rem;
  padding: .75rem 0 .25rem;
  border-top: 1px solid #e5e7eb;
  margin-top: 1rem;
}
.cl-mobile-nav[hidden] { display: none !important; }
@media (min-width: 768px) { .cl-mobile-nav { display: none !important; } }

.cl-mobile-link {
  display: block;
  width: 100%;
  padding: .8rem .5rem;
  color: #374151;
  text-decoration: none;
  font-weight: 500;
  border-radius: .375rem;
  transition: background .15s, color .15s;
}
.cl-mobile-link:hover,
.cl-mobile-link:focus { color: #158f8f; background: #f3f4f6; }

nav a[aria-current="page"] { color: #158f8f; font-weight: 600; }

/* Quote form status message --------------------------------------- */
.cl-form-status {
  margin-top: 1rem;
  padding: .85rem 1rem;
  border-radius: .5rem;
  font-size: .925rem;
  line-height: 1.45;
}
.cl-form-status[hidden] { display: none !important; }
.cl-form-status.is-ok    { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.cl-form-status.is-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* Before / after slider ------------------------------------------- */
[data-cl-slider] { touch-action: pan-y; }
[data-cl-slider]:focus-visible { outline: 3px solid #158f8f; outline-offset: 3px; }

/* Misc ------------------------------------------------------------ */
html { scroll-behavior: smooth; }
img { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}