/* Shaggy Removals — custom styles that sit on top of Tailwind (Play CDN) */

html {
  scroll-behavior: smooth;
}

html,
body,
button,
input,
select,
textarea,
optgroup {
  font-family: "Public Sans", ui-sans-serif, system-ui, sans-serif !important;
}
/* .font-display {
  font-family: 'Bebas Neue', ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: 0.02em;
} */

/* Consistent page gutter that mirrors the 120px desktop margins from the design */
.container-custom {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1350px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media (min-width: 640px) {
  .container-custom {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container-custom {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

/* hero section custom container */

.container-custom-hero {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1450px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media (min-width: 640px) {
  .container-custom-hero {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container-custom-hero {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}


/* slider custom container */

.container-custom-slider {
  width: 100%;
  padding-left: 0rem;
  padding-right: 0rem;
}

@media (min-width: 640px) {
  .container-custom-slider {
    padding-left: 0rem;
    padding-right: 0rem;
  }
}

@media (min-width: 1024px) {
  .container-custom-slider {
    padding-left: 0rem;
    padding-right: 0rem;
  }
}

/* Scrollbar-less horizontal carousels, still keyboard/touch scrollable */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

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

/* Dashed connector behind the "How It Works" step circles */
.step-line {
  background-image: repeating-linear-gradient(
    90deg,
    #ba0013 0px,
    #ba0013 10px,
    transparent 10px,
    transparent 20px
  );
}

/* Hero + gallery placeholder art (no external image hosts are reachable) */
.photo-placeholder {
  position: relative;
  background-color: #10182a;
  background-image:
    radial-gradient(
      circle at 20% 20%,
      rgba(227, 30, 36, 0.35),
      transparent 45%
    ),
    radial-gradient(
      circle at 80% 75%,
      rgba(168, 189, 208, 0.25),
      transparent 40%
    ),
    linear-gradient(135deg, #1b2a3b 0%, #0e1622 100%);
}

.photo-placeholder-light {
  position: relative;
  background-color: #f3f0ec;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(186, 0, 19, 0.12), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(27, 42, 59, 0.1), transparent 40%),
    linear-gradient(135deg, #efe9e2 0%, #e4dcd2 100%);
}

.photo-placeholder::before,
.photo-placeholder-light::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.photo-placeholder-light::before {
  background-image:
    linear-gradient(rgba(27, 42, 59, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 42, 59, 0.05) 1px, transparent 1px);
}

/* Mobile nav panel */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

#mobile-menu.open {
  max-height: 640px;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
}

.blob-shape {
  border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
}

.nav-dropdown-toggle svg {
  transition: transform 0.15s ease;
}

.nav-dropdown-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.input-form-quote {
  width: 100% !important;
  border-radius: 8px !important;
  border: 1px solid #dde3ec !important;
  background-color: #edf1f5 !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  color: #1e293b !important;
}

.input-form-quote::placeholder {
  color: #1e293b !important;
  font-size: 14px !important;
}

.input-form-quote:focus {
  border-color: #e10a05 !important; /* accent-red */
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(225, 10, 5, 0.2) !important;
}

#gallery-track {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

#gallery-track.cursor-grabbing {
  cursor: grabbing;
}

#gallery-track img {
  pointer-events: none;
}

/* contact form */

/* Detailed quote request form (Contact page) */
.input-detailed-quote {
  padding: 10px 14px !important;
  border-color: #926f6b !important;
  border-radius: 8px !important;
}

.job-size-btn {
  padding: 10px 14px !important;
  border-color: #926f6b !important;
  border-radius: 8px !important;
}

.job-size-btn.is-selected {
  background-color: #291715 !important;
  border-color: #291715 !important;
  color: #ffffff !important;
}

.input-detailed-quote::placeholder {
  color: #6b7280 !important;
}

.faq-panel {
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  transition:
    max-height 0.5s ease,
    padding-top 0.5s ease,
    padding-bottom 0.5s ease;
}

.faq-panel.is-open {
  max-height: 500px;
  padding-top: 1rem;
  padding-bottom: 1rem;
}



.page-hero-bg {
    background-image: url('https://shaggyremovalservice.com.au/wp-content/uploads/2026/07/shaggy-removal-1.webp');
}