/* ==========================================================================
   Audrey the Groomer - site styles
   --------------------------------------------------------------------------
   Palette is PROVISIONAL. It matches the logo concepts from July 2026 but no
   final brand decision has been made. Every color used anywhere on the site is
   declared once below, so changing her mind later is a five line edit.
   ========================================================================== */

:root {
  --ink: #1f4e4a;          /* deep teal, headings and primary actions */
  --ink-soft: #7c8b80;     /* muted text */
  --body: #2a2a2a;         /* body copy */
  --cream: #f7f1e6;        /* page background */
  --surface: #ffffff;      /* cards and form */
  --line: #e3d9c6;         /* hairlines */
  --accent: #e08a6b;       /* coral, used sparingly */
  --max: 62rem;
}

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; color: var(--ink); line-height: 1.25; }
h1 { font-size: 2.1rem; margin: 0 0 .5rem; }
h2 { font-size: 1.5rem; margin: 2.5rem 0 .75rem; }
h3 { font-size: 1.15rem; margin: 1.75rem 0 .4rem; }
p { margin: 0 0 1rem; }
a { color: var(--ink); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }
.narrow { max-width: 44rem; }

/* Header ------------------------------------------------------------------ */
.site-header { border-bottom: 1px solid var(--line); background: var(--surface); }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem; padding-top: 1rem; padding-bottom: 1rem;
}
.brand { text-decoration: none; line-height: 1.1; }
.brand .name { display: block; font-family: Georgia, serif; font-size: 1.6rem; color: var(--ink); }
.brand .tag { display: block; font-size: .72rem; letter-spacing: .18em; color: var(--ink-soft); }
.site-nav a { margin-left: 1.25rem; text-decoration: none; font-size: .95rem; }
.site-nav a:hover { color: var(--accent); }

/* Sections ---------------------------------------------------------------- */
.hero { padding: 3.5rem 0 2.5rem; }
.hero p.lead { font-size: 1.15rem; color: var(--body); max-width: 34rem; }
section { padding: 1rem 0 2rem; }
.band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.cards { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.25rem 0; }
@media (min-width: 40rem) { .cards { grid-template-columns: 1fr 1fr; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1.1rem 1.25rem; }
.card h3 { margin-top: 0; }
.card p { margin-bottom: 0; color: var(--ink-soft); font-size: .95rem; }

ul.plain { padding-left: 1.1rem; }
ul.plain li { margin-bottom: .4rem; }

.note {
  border-left: 3px solid var(--accent);
  background: var(--surface);
  padding: .9rem 1.1rem;
  margin: 1.5rem 0;
  font-size: .95rem;
}

/* Buttons and form -------------------------------------------------------- */
.btn {
  display: inline-block; background: var(--ink); color: var(--cream);
  text-decoration: none; border: 0; border-radius: 8px;
  padding: .8rem 1.4rem; font-size: 1rem; cursor: pointer;
}
.btn:hover { background: #17403c; }

form.contact { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .9rem; margin-bottom: .3rem; color: var(--ink); }
.field input:not([type="checkbox"]), .field textarea {
  width: 100%; padding: .7rem .8rem; font: inherit; font-size: 1rem;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--body);
}
.field textarea { min-height: 8rem; resize: vertical; }

/* The consent row is a small checkbox beside a long label. The checkbox has to
   be excluded from the full width rule above, otherwise it fills the flex row
   and pushes the label off the edge of the form. */
.consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; }
.consent input[type="checkbox"] {
  flex: 0 0 auto; width: 1.05rem; height: 1.05rem;
  margin: .25rem 0 0; accent-color: var(--ink);
}
.consent label { flex: 1 1 auto; margin-bottom: 0; line-height: 1.5; color: var(--body); }
.hp { position: absolute; left: -9999px; }        /* honeypot, hidden from humans */
#form-status { margin-top: .8rem; font-size: .95rem; }

/* Footer ------------------------------------------------------------------ */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); margin-top: 2.5rem; padding: 1.75rem 0; font-size: .9rem; color: var(--ink-soft); }
.site-footer a { color: var(--ink-soft); }
.site-footer .row { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; justify-content: space-between; }