/* Bootsie's Mobile Grooming Co. — one stylesheet.
 *
 * Hand-written CSS, no framework and no build step. The design is one small site
 * and one admin tool; a utility framework would be more configuration than the
 * whole stylesheet.
 *
 * ON THE COLOURS. The client's style guide specifies #FF6FAE pink and #2EC4C7
 * teal. Both fail WCAG AA as text on white (~2.6:1 and ~2.4:1 against a 4.5:1
 * requirement), a finding reported in her own client guide. So her exact colours
 * carry LARGE DECORATIVE FILLS — headers, wave dividers, button backgrounds —
 * where the brand is what a visitor recognises and the contrast rules are
 * looser, and darker variants of the same hues carry anything that is read.
 * Kept in sync with src/presentation/constants.py.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Smooth scroll for the in-page navigation links, per the client's developer
 * notes — but never for a visitor who has asked the OS for reduced motion, for
 * whom a long animated scroll can trigger nausea. `scroll-padding-top` keeps an
 * anchored target from landing underneath the sticky masthead. */
html {
  scroll-padding-top: 96px;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  /* Body copy under ~16px measurably slows reading, and this page is read by
   * people deciding whether to trust a stranger with their dog. */
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

/* Icons inherit their container's colour and are sized per use with width/height,
 * so there is no class per size. Each symbol declares its own fill and stroke —
 * some are outlines, some are solid — so nothing is overridden here. */
svg[aria-hidden="true"] {
  vertical-align: middle;
}

h1,
h2,
h3 {
  line-height: 1.15;
  margin: 0 0 var(--space-4);
  font-weight: 800;
}

h1 {
  font-size: clamp(2.25rem, 5.2vw, 3.5rem);
  letter-spacing: -0.02em;
}
h2 {
  font-size: clamp(1.625rem, 3.2vw, 2.375rem);
}
h3 {
  font-size: 1.25rem;
  font-weight: 700;
}

p {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--teal-text);
}

/* A visible focus ring on everything interactive. Removing it is an
 * accessibility regression, not a style choice — keyboard users navigate by it,
 * and the review screen below is designed to be worked without a mouse. */
:focus-visible {
  outline: 3px solid var(--teal-text);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lifted);
}

.shell {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}