/*
Theme Name: Spotless Cleaners
Theme URI: https://spotlesscleaners.co.uk/
Author: OpenAI for Spotless Cleaners
Description: Lightweight native block theme for Spotless Cleaners, Worcestershire. High-conversion local cleaning theme inspired by premium service-site UX.
Version: 1.1.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: spotless-cleaners
*/

:root {
  --spotless-blue: #0064FF;
  --spotless-blue-deep: #0047C8;
  --spotless-midnight: #0D1B2A;
  --spotless-aqua: #48D7E8;
  --spotless-soft-blue: #EAF2FF;
  --spotless-ice-aqua: #E9FBFD;
  --spotless-cloud: #F7F9FC;
  --spotless-slate: #566176;
  --spotless-border: #DDE5F0;
  --spotless-white: #FFFFFF;
  --spotless-shadow: 0 22px 60px rgba(13,27,42,.09);
  --spotless-shadow-soft: 0 10px 32px rgba(13,27,42,.055);
  --spotless-radius: 26px;
  --spotless-radius-sm: 18px;
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }

/* Critical FSE spacing reset. Prevents Gutenberg's top-level flow margin from
   creating visible white bands between full-width patterns/template parts. */
.wp-site-blocks { min-height: 100vh; padding: 0; }
.wp-site-blocks > * { margin-block-start: 0 !important; }
.wp-site-blocks > .alignfull { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.spotless-section { margin-block: 0 !important; padding-block: clamp(4rem, 6.5vw, 6.25rem); }
.spotless-section--compact { margin-block: 0 !important; padding-block: clamp(1.65rem, 3vw, 2.5rem); }
.spotless-section--tight { margin-block: 0 !important; padding-block: clamp(3rem, 5vw, 4.25rem); }

.spotless-shell { box-sizing: border-box; }
.spotless-eyebrow,
.spotless-kicker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .1rem;
  color: var(--spotless-blue);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.spotless-eyebrow::before,
.spotless-kicker::before {
  content: '';
  width: .65rem;
  height: .65rem;
  flex: 0 0 .65rem;
  border-radius: 3px;
  background: var(--spotless-aqua);
  transform: rotate(45deg);
  box-shadow: 0 0 0 5px rgba(72,215,232,.14);
}

.spotless-display { max-width: 960px; }
.spotless-lead { max-width: 720px; color: var(--spotless-slate); }
.spotless-muted { color: var(--spotless-slate); }

.spotless-card {
  height: 100%;
  background: var(--spotless-white);
  border: 1px solid var(--spotless-border);
  border-radius: var(--spotless-radius);
  box-shadow: var(--spotless-shadow-soft);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.spotless-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0,100,255,.24);
  box-shadow: var(--spotless-shadow);
}

.spotless-service-card { position: relative; overflow: hidden; }
.spotless-service-card::after {
  content: '';
  position: absolute;
  width: 160px; height: 160px;
  right: -88px; top: -92px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(72,215,232,.18), rgba(72,215,232,0) 70%);
  pointer-events: none;
}
.spotless-service-card .wp-block-image { margin: 0 0 1.25rem; }
.spotless-service-card .wp-block-image img { display: block; }

.spotless-icon-badge {
  width: 58px; height: 58px;
  display: inline-grid;
  place-items: center;
  border-radius: 18px;
  background: var(--spotless-soft-blue);
  color: var(--spotless-blue);
}
.spotless-icon-badge img { width: 30px; height: 30px; display: block; }

.spotless-benefit {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.spotless-benefit-icon {
  width: 46px; height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--spotless-soft-blue);
}
.spotless-benefit-icon img { width: 24px; height: 24px; }

.spotless-trust-item {
  display: flex;
  gap: .7rem;
  align-items: center;
  font-weight: 700;
  color: var(--spotless-midnight);
}
.spotless-trust-item::before {
  content: '✓';
  display: grid;
  place-items: center;
  width: 1.55rem; height: 1.55rem;
  flex: 0 0 1.55rem;
  border-radius: 999px;
  color: #fff;
  background: var(--spotless-blue);
  font-size: .82rem;
}

.spotless-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 8%, rgba(72,215,232,.22), transparent 24%),
    radial-gradient(circle at 15% 95%, rgba(0,100,255,.11), transparent 30%),
    linear-gradient(145deg, #FFFFFF 0%, #F5F9FF 46%, #EAF2FF 100%);
}
.spotless-hero-copy { max-width: 710px; }
.spotless-hero .wp-block-heading.has-hero-font-size { max-width: 760px; }
.spotless-hero .spotless-hero-sub { max-width: 650px; }

.spotless-hero-panel {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: linear-gradient(145deg, #0064FF 0%, #0759DF 48%, #0D1B2A 140%);
  color: #fff;
  box-shadow: 0 28px 80px rgba(0,71,200,.22);
}
.spotless-hero-panel::after {
  content: '';
  position: absolute;
  width: 260px; height: 260px;
  right: -120px; bottom: -130px;
  border-radius: 999px;
  background: rgba(72,215,232,.18);
}
.spotless-hero-panel > * { position: relative; z-index: 1; }
.spotless-hero-panel .wp-block-heading { color: #fff; }
.spotless-hero-panel .spotless-kicker { color: #fff; }
.spotless-hero-panel .spotless-kicker::before { background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.14); }
.spotless-hero-panel .wp-block-button__link { background: #fff !important; color: var(--spotless-blue-deep) !important; }

.spotless-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  border-radius: 999px;
  padding: .58rem .9rem;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,100,255,.13);
  color: var(--spotless-midnight);
  font-size: .88rem;
  font-weight: 700;
}

.spotless-statbar {
  border-top: 1px solid var(--spotless-border);
  border-bottom: 1px solid var(--spotless-border);
  background: #fff;
}
.spotless-statbar .wp-block-group { row-gap: 1rem; }

.spotless-gradient-blue { background: linear-gradient(135deg, #0064FF 0%, #0047C8 100%); }
.spotless-gradient-fresh { background: linear-gradient(135deg, #0064FF 0%, #48D7E8 100%); }
.spotless-gradient-dark { background: linear-gradient(135deg, #0D1B2A 0%, #0047C8 100%); }
.spotless-gradient-soft { background: linear-gradient(135deg, #F8FAFD 0%, #EAF2FF 100%); }

.spotless-process-card {
  border-top: 2px solid var(--spotless-blue);
  padding-top: 1.4rem;
}
.spotless-process-number {
  color: var(--spotless-blue);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .1em;
}

.spotless-review-stars { margin-bottom: .65rem; letter-spacing: .16em; color: var(--spotless-blue); }
.spotless-review-card { position: relative; }
.spotless-review-card::before {
  content: '“';
  position: absolute;
  top: 8px; right: 22px;
  color: var(--spotless-soft-blue);
  font-size: 6rem;
  line-height: 1;
  font-weight: 800;
  pointer-events: none;
}

.spotless-area-list { columns: 2; column-gap: 2.5rem; padding-left: 1.1rem; }
.spotless-area-list li { break-inside: avoid; margin-bottom: .45rem; }

.spotless-faq .wp-block-details {
  margin: 0;
  border-bottom: 1px solid var(--spotless-border);
  padding: 1.25rem 0;
}
.spotless-faq .wp-block-details:first-child { border-top: 1px solid var(--spotless-border); }
.spotless-faq summary { cursor: pointer; font-weight: 750; color: var(--spotless-midnight); }
.spotless-faq details > p { color: var(--spotless-slate); max-width: 760px; }

.spotless-quote-box {
  border-radius: 30px;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: #fff;
  box-shadow: 0 24px 80px rgba(13,27,42,.11);
}

.spotless-portal-link a { opacity: .78; font-weight: 700; }
.spotless-portal-link a:hover { opacity: 1; }
.spotless-footer a { color: inherit; }

/* WPForms: make plugin output feel native to the theme. */
.wpforms-container { margin-block: 0 !important; }
.wpforms-container .wpforms-field { padding-top: 8px !important; padding-bottom: 8px !important; }
.wpforms-container .wpforms-field-label { color: var(--spotless-midnight) !important; font-weight: 700 !important; }
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=tel],
.wpforms-container input[type=number],
.wpforms-container select,
.wpforms-container textarea {
  min-height: 52px !important;
  border: 1px solid #C9D3E0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 16px !important;
  color: var(--spotless-midnight) !important;
}
.wpforms-container textarea { min-height: 140px !important; }
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
  border-color: var(--spotless-blue) !important;
  box-shadow: 0 0 0 3px rgba(0,100,255,.10) !important;
  outline: none !important;
}
.wpforms-container button[type=submit],
.wpforms-container input[type=submit] {
  min-height: 50px !important;
  padding: .8rem 1.5rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--spotless-blue) !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 750 !important;
  box-shadow: none !important;
}
.wpforms-container button[type=submit]:hover,
.wpforms-container input[type=submit]:hover { background: var(--spotless-blue-deep) !important; }

@media (max-width: 900px) {
  .spotless-section { padding-block: 3.75rem; }
  .spotless-section--tight { padding-block: 3rem; }
  .spotless-hero { padding-block: 3.5rem; }
  .spotless-area-list { columns: 1; }
}

@media (max-width: 781px) {
  .spotless-section { padding-block: 3rem; }
  .spotless-section--compact { padding-block: 1.35rem; }
  .spotless-section--tight { padding-block: 2.5rem; }
  .spotless-mobile-stack { gap: 1.4rem !important; }
  .spotless-hide-mobile { display: none !important; }
  .spotless-hero { padding-block: 2.75rem; }
  .spotless-hero .has-large-font-size { font-size: 1.12rem !important; line-height: 1.55 !important; }
  .spotless-hero-panel { border-radius: 24px; }
  .spotless-statbar .wp-block-group { justify-content: flex-start !important; }
  .wp-block-buttons { gap: .7rem; }
  .wp-block-button__link { padding: .82rem 1.15rem !important; }

  /* WPForms two-column layouts should never squeeze fields side by side on phones. */
  .wpforms-container .wpforms-field-row { max-width: 100% !important; }
  .wpforms-container .wpforms-field-row-block,
  .wpforms-container .wpforms-field-layout-column,
  .wpforms-container .wpforms-layout-column {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .wpforms-container .wpforms-field-layout-columns,
  .wpforms-container .wpforms-layout-columns { display: block !important; }
}

@media (max-width: 520px) {
  .spotless-section { padding-block: 2.6rem; }
  .spotless-hero { padding-block: 2.4rem; }
  .spotless-quote-box { border-radius: 22px; }
  .spotless-pill { font-size: .82rem; }
}

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