/* HatDat™ Pet Rescue: shared stylesheet for every page.
   Light pages for sunlight; a dark brand band across the top of every page.
   Colour tokens match PROJECT_SPECS.md. */
:root {
  /* Light page (PROJECT_SPECS.md) */
  --bg: #F7F8F5;            /* page background, soft ivory */
  --card: #FFFFFF;          /* cards, panels, modals */
  --border: #DDE5DF;        /* decorative edges and dividers */
  --border-input: #7D8D85;  /* form fields and controls */
  --text: #202A27;          /* main text, green-charcoal */
  --text-muted: #596760;    /* supporting text */
  --primary: #066B61;       /* deep teal: primary buttons, links */
  --primary-hover: #06665C;
  --primary-text: #FFFFFF;
  --secondary-bg: #B3D9CF;  /* teal tint: secondary buttons */
  --brand-gold: #8A5A12;    /* "Hat" on light backgrounds */
  --accent: #E5A43B;        /* amber: fills and badges only, never text */
  --success: #287A4B;
  --error: #B42318;

  /* Dark brand band (hub colours, dark backgrounds only) */
  --band-bg: #1a1410;
  --band-edge: #332a24;
  --band-gold: #d4a04a;     /* "Hat" on dark */
  --band-teal: #8bb8a6;     /* "Dat" on dark */
  --band-text: #e8ddd0;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--primary); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* Dark brand band */
.band {
  background: var(--band-bg); border-bottom: 3px solid var(--band-edge);
  padding: 0.9rem 1.25rem;
}
.band :focus-visible { outline-color: var(--band-gold); }
.brand {
  display: inline-block; color: var(--band-text); text-decoration: none;
  font-size: 1.35rem; font-weight: 800; letter-spacing: 0.01em;
}
.brand .hat { color: var(--band-gold); }
.brand .dat { color: var(--band-teal); }
.brand .tm  { color: var(--band-gold); font-size: 0.6em; vertical-align: super; }
.brand .sub { color: var(--band-text); font-weight: 700; }

/* Page body */
main { max-width: 560px; margin: 0 auto; padding: 2rem 1.25rem 1rem; text-align: center; }
h1 { font-size: 1.9rem; line-height: 1.2; margin: 0.5rem 0 0.75rem; color: var(--text); }
.lead { color: var(--text-muted); margin: 0 0 1.75rem; }

/* Buttons: no ghost buttons, every button has a solid fill (PROJECT_SPECS.md) */
.btn {
  display: block; width: 100%; min-height: 56px; padding: 0.9rem 1rem; margin: 0 0 0.85rem;
  border-radius: 12px; font: inherit; font-size: 1.15rem; font-weight: 800;
  text-decoration: none; text-align: center; cursor: pointer; border: 2px solid var(--primary);
}
.btn-primary { background: var(--primary); color: var(--primary-text); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--secondary-bg); color: var(--text); }

/* Safety line */
.safety {
  margin: 1.5rem 0 0; padding: 0.9rem 1rem; background: var(--card);
  border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 0.95rem;
}

/* Footer: dark, matches the brand band */
.site-footer {
  margin-top: 2.5rem; padding: 1.5rem 1.25rem 2rem; text-align: center;
  background: var(--band-bg); border-top: 3px solid var(--band-edge);
  color: var(--band-text); font-size: 0.95rem;
}
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.25rem; }
.foot-links a {
  display: inline-block; padding: 0.5rem 0.25rem; min-height: 44px; line-height: 2;
  color: var(--band-text); text-decoration: underline; text-underline-offset: 3px;
}
.foot-links a:hover { color: var(--band-gold); }
.site-footer :focus-visible { outline-color: var(--band-gold); }
.copy { margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--band-text); }
.copy .hat { color: var(--band-gold); font-weight: 800; }
.copy .dat { color: var(--band-teal); font-weight: 800; }

/* Pop-up */
dialog {
  max-width: 380px; width: 88%; border: 2px solid var(--primary); border-radius: 12px;
  padding: 1.5rem; text-align: center; color: var(--text); background: var(--card); font: inherit;
}
dialog::backdrop { background: rgba(32, 42, 39, 0.55); }
dialog .btn { margin: 1rem 0 0; }

/* Homepage hero: upload box (converter style) */
.drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem;
  min-height: 190px; padding: 1.5rem 1rem; margin: 0 0 0.75rem;
  background: var(--card); border: 3px dashed var(--primary); border-radius: 14px;
  cursor: pointer; text-align: center;
}
.drop:hover, .drop.over { background: #EEF6F3; border-style: solid; }
.drop:focus-within { outline: 3px solid var(--primary); outline-offset: 3px; }
.drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop .icon { font-size: 2.6rem; line-height: 1; }
.drop .cta {
  display: inline-block; margin-top: 0.4rem; padding: 0.8rem 1.4rem; min-height: 52px;
  background: var(--primary); color: var(--primary-text); border-radius: 10px;
  font-size: 1.2rem; font-weight: 800;
}
.drop .or { color: var(--text-muted); font-size: 0.95rem; }
.drop img { max-width: 100%; max-height: 260px; border-radius: 8px; }
.drop .change { color: var(--primary); font-weight: 700; text-decoration: underline; }
.fine { color: var(--text-muted); font-size: 0.85rem; margin: 0 0 0.75rem; }
.emergency { margin: 0 0 1.25rem; font-size: 0.95rem; color: var(--text); }
.emergency a { color: var(--error); font-weight: 800; }
.msg-bad { color: var(--error); font-weight: 700; margin: 0 0 0.75rem; }
@media (hover: none) { .drop .or { display: none; } }
.kicker {
  margin: 0; color: var(--primary); font-size: 0.8rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.kicker span { white-space: nowrap; }

/* Header nav: links in the band on computers, a ☰ menu on phones */
.band-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.menu-btn {
  min-height: 44px; padding: 0.4rem 0.8rem; font: inherit; font-weight: 700;
  background: transparent; color: var(--band-text);
  border: 2px solid var(--band-edge); border-radius: 8px; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
}
.site-nav { display: none; flex-direction: column; margin-top: 0.75rem; }
.site-nav.open { display: flex; }
.site-nav a {
  display: block; padding: 0.8rem 0.25rem; min-height: 48px;
  color: var(--band-text); font-weight: 700; text-decoration: none;
  border-top: 1px solid var(--band-edge);
}
.site-nav a:hover { color: var(--band-gold); }
.site-nav a.pill {
  margin-top: 0.6rem; padding: 0.7rem 1rem; border: 0; border-radius: 999px; text-align: center;
  background: var(--band-gold); color: var(--band-bg);
}
.site-nav a.pill:hover { background: #e8c87a; color: var(--band-bg); }
.brand .sub { display: block; font-size: 0.8rem; letter-spacing: 0.04em; margin-top: 0.1rem; white-space: nowrap; }
@media (max-width: 359px) {
  .band { padding: 0.9rem 0.9rem; }
  .brand .sub { font-size: 0.72rem; letter-spacing: 0; }
}
@media (min-width: 1000px) {
  .band { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .menu-btn { display: none; }
  .site-nav { display: flex; flex-direction: row; align-items: center; gap: 0.25rem; margin: 0; }
  .site-nav a { border: 0; padding: 0.5rem 0.7rem; min-height: 44px; line-height: 1.7; white-space: nowrap; }
  .site-nav a.pill { margin: 0 0 0 0.5rem; padding: 0.5rem 1rem; }
}

/* Homepage: intro line and How it works */
.intro { margin: 0 0 1.25rem; color: var(--text); }
.intro strong { color: var(--primary); }
.how { margin: 2rem 0 0; text-align: left; }
.how h2 { text-align: center; font-size: 1.4rem; margin: 0 0 0.75rem; }
.how ol { margin: 0; padding-left: 1.5rem; }
.how li { margin: 0 0 0.65rem; padding-left: 0.25rem; }
.how li::marker { color: var(--primary); font-weight: 800; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.wd { white-space: nowrap; color: var(--primary); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.how .btn { margin-top: 1.25rem; }
/* Keep the footer at the bottom on short pages */
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; width: 100%; }

/* Report form (after the photo) and the thank-you exit */
.report { text-align: left; margin: 0.5rem 0 1rem; }
.report h2 { font-size: 1.25rem; margin: 1.25rem 0 0.25rem; }
.report .hint { color: var(--text-muted); font-size: 0.95rem; margin: 0 0 0.6rem; }
.report label { display: block; margin-top: 0.85rem; font-weight: 700; }
.report input, .report select {
  width: 100%; margin-top: 0.3rem; padding: 0.7rem; min-height: 48px; font: inherit;
  border: 1px solid var(--border-input); border-radius: 8px; background: var(--card); color: var(--text);
}
.report .row { display: flex; gap: 0.75rem; }
.report .row > label { flex: 1; }
.report .count { float: right; font-weight: 400; color: var(--text-muted); font-size: 0.9rem; }
.report .btn { margin-top: 0.85rem; }
.map { height: 280px; border: 2px solid var(--primary); border-radius: 12px; z-index: 0; }
.hp { position: absolute; left: -9999px; }
.ts { margin-top: 1rem; min-height: 65px; }
.thanks { text-align: center; padding: 1rem 0; }
.thanks:focus { outline: none; }
.thanks .paw { font-size: 3rem; line-height: 1; }
.thanks h1 { margin-top: 0.5rem; }
.code-box { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; margin: 1.25rem 0; }
.code-box p { margin: 0 0 0.5rem; }
.code { font: 700 1.3rem/1.3 ui-monospace, monospace; letter-spacing: 0.08em; word-break: break-all; color: var(--primary); }

/* Report steps: AI draft, where, review */
.report textarea {
  width: 100%; margin-top: 0.3rem; padding: 0.7rem; font: inherit; resize: vertical;
  border: 1px solid var(--border-input); border-radius: 8px; background: var(--card); color: var(--text);
}
.report > .step > label[for] { display: block; margin-top: 0.85rem; font-weight: 700; }
.stepno { margin: 1rem 0 0; color: var(--primary); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.step h2 { margin-top: 0.15rem; }
.ai-status { margin: 0.25rem 0 0; font-weight: 700; color: var(--primary); }
.choices { display: grid; gap: 0.6rem; }
.choices .btn { margin: 0; text-align: left; }
.search-row { display: flex; gap: 0.5rem; align-items: stretch; margin-top: 0.3rem; }
.search-row input { margin-top: 0; }
.search-row .btn { width: auto; margin: 0; min-height: 48px; padding: 0.6rem 1rem; }
.results { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.results button {
  width: 100%; text-align: left; margin: 0 0 0.4rem; padding: 0.7rem; min-height: 48px; font: inherit;
  background: var(--card); color: var(--text); border: 1px solid var(--border-input); border-radius: 8px; cursor: pointer;
}
.results button:hover { border-color: var(--primary); }
.step .map { margin-top: 0.75rem; }
.where { margin: 0.6rem 0 0; font-weight: 700; color: var(--success); }
.review-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; }
.review-card img { width: 100%; max-height: 300px; object-fit: cover; border-radius: 8px; }
.rv-desc { font-size: 1.1rem; font-weight: 700; margin: 0.75rem 0 0.5rem; }
.rv-facts { list-style: none; margin: 0; padding: 0; }
.rv-facts li { margin: 0 0 0.35rem; }

/* Report steps: AI draft, where, review */
.report textarea {
  width: 100%; margin-top: 0.3rem; padding: 0.7rem; font: inherit; resize: vertical;
  border: 1px solid var(--border-input); border-radius: 8px; background: var(--card); color: var(--text);
}
.report > .step > label[for] { display: block; margin-top: 0.85rem; font-weight: 700; }
.stepno { margin: 1rem 0 0; color: var(--primary); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.step h2 { margin-top: 0.15rem; }
.ai-status { margin: 0.25rem 0 0; font-weight: 700; color: var(--primary); }
.choices { display: grid; gap: 0.6rem; }
.choices .btn { margin: 0; text-align: left; }
.search-row { display: flex; gap: 0.5rem; align-items: stretch; margin-top: 0.3rem; }
.search-row input { margin-top: 0; }
.search-row .btn { width: auto; margin: 0; min-height: 48px; padding: 0.6rem 1rem; }
.results { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.results button {
  width: 100%; text-align: left; margin: 0 0 0.4rem; padding: 0.7rem; min-height: 48px; font: inherit;
  background: var(--card); color: var(--text); border: 1px solid var(--border-input); border-radius: 8px; cursor: pointer;
}
.results button:hover { border-color: var(--primary); }
.step .map { margin-top: 0.75rem; }
.where { margin: 0.6rem 0 0; font-weight: 700; color: var(--success); }
.review-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; }
.review-card img { width: 100%; max-height: 300px; object-fit: cover; border-radius: 8px; }
.rv-desc { font-size: 1.1rem; font-weight: 700; margin: 0.75rem 0 0.5rem; }
.rv-facts { list-style: none; margin: 0; padding: 0; }
.rv-facts li { margin: 0 0 0.35rem; }

/* Reunion email opt-in on the thank-you screen */
.notify { text-align: left; background: var(--card); border: 2px solid var(--primary); border-radius: 12px; padding: 1rem; margin: 0 0 1.25rem; }
.notify h2 { font-size: 1.2rem; margin: 0 0 0.4rem; }
.notify p { margin: 0 0 0.6rem; }
.notify label[for] { display: block; font-weight: 700; margin-top: 0.5rem; }
.notify input[type=email] {
  width: 100%; margin-top: 0.3rem; padding: 0.7rem; min-height: 48px; font: inherit;
  border: 1px solid var(--border-input); border-radius: 8px; background: var(--card); color: var(--text);
}
.notify .tick { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 0.75rem; }
.notify .tick input { width: 22px; height: 22px; margin-top: 0.1rem; flex: none; accent-color: var(--primary); }
.notify .btn { margin-top: 0.75rem; }
.notify-done { font-weight: 800; color: var(--success); margin: 0; }