/*
  West Cleaners homepage
  ----------------------
  Most of the styling is done with readable Tailwind classes in index.html.
  This file contains only the few custom styles that are easier to maintain here.
*/

:root {
  color-scheme: light;
  --navy: #102238;
  --blue: #173653;
  --gold: #a0782b;
  --gold-light: #d3af63;
  --page: #f7f8fa;
  --text: #132338;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--gold-light);
  color: var(--navy);
}

.section-kicker {
  color: #9a722a;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Decorative map-style grid behind the address section. */
.map-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.55) 1px, transparent 1px),
    radial-gradient(
      circle at 20% 65%,
      transparent 0 5rem,
      rgba(255, 255, 255, 0.75) 5.1rem 5.25rem,
      transparent 5.35rem
    ),
    radial-gradient(
      circle at 80% 20%,
      transparent 0 7rem,
      rgba(255, 255, 255, 0.75) 7.1rem 7.25rem,
      transparent 7.35rem
    );
  background-size:
    52px 52px,
    52px 52px,
    100% 100%,
    100% 100%;
  transform: rotate(-8deg) scale(1.2);
}

/* Respect visitors who prefer less animation. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}