/* base.css - neutral foundation for a small-business site. It has no look of its own: paste the
   :root tokens from `pick_style.mjs --tokens <id>` ABOVE this file's rules, then style sections
   from the style card. Token names: --ground --surface --ink --muted --accent --accent-ink
   --field --field-ink --font-display --font-text (--font-accent optional). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); /* 17-19px */
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; line-height: 1.02; text-wrap: balance; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
p { max-width: 68ch; text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.18em; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Fluid type steps. A style uses two or three of these, not all. */
:root {
  --step-hero: clamp(2.75rem, 1rem + 8vw, 9rem);
  --step-1: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  --step-2: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
  --step-small: 0.875rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);      /* 16-32px side margins */
  --section: clamp(4.5rem, 3rem + 8vw, 11rem);      /* gap between sections */
  --bar-h: 64px;                                     /* sticky mobile action bar */
}

.wrap { width: min(100% - 2 * var(--gutter), 76rem); margin-inline: auto; }
.section { padding-block: var(--section); }
.field { background: var(--field); color: var(--field-ink); }
.surface { background: var(--surface); }
.muted { color: var(--muted); }

/* Buttons: shape (radius, border, shadow) comes from the style card. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0.8em 1.4em;
  background: var(--accent); color: var(--accent-ink);
  border: 0; text-decoration: none; font-weight: 600; cursor: pointer;
}
.btn--quiet { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }

/* Focus, selection, skip link */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.field :focus-visible { outline-color: var(--field-ink); }
::selection { background: var(--accent); color: var(--accent-ink); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: 0.5rem; z-index: 100; background: var(--ink); color: var(--ground); padding: 0.5rem 1rem; }

/* Sticky mobile action bar (markup in contact-kit.html). Hidden on wide screens. */
.actionbar {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  min-height: var(--bar-h); padding-bottom: env(safe-area-inset-bottom);
  background: var(--ink); transform: translateY(110%); transition: transform 0.25s ease;
}
.actionbar.is-on { transform: none; }
.actionbar a { display: grid; place-items: center; color: var(--ground); text-decoration: none; font-weight: 700; }
.actionbar a:first-child { background: var(--accent); color: var(--accent-ink); }
body.has-actionbar { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .actionbar { display: none; } body.has-actionbar { padding-bottom: 0; } }

/* Forms */
.form { display: grid; gap: 1rem; max-width: 34rem; }
.form label { display: grid; gap: 0.35rem; font-weight: 600; }
.form input, .form select, .form textarea {
  width: 100%; min-height: 48px; padding: 0.7em 0.9em;
  background: var(--ground); color: var(--ink); border: 2px solid var(--muted); border-radius: inherit;
}
.form .hp { position: absolute; left: -9999px; }      /* honeypot */
.form-note { font-size: var(--step-small); color: var(--muted); }

/* Motion: everything decorative is opt-in and drops under reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}