/* =========================================================
   Keeping Dogs Safe — shared stylesheet
   Distinct identity from BBB: Kanit (display) + Arimo (body),
   consolidated on the real brown/tan accent already in use
   across the live pages (rgb(169,124,84)), dropping the
   competing purple-mauve that drifted in and reads too close
   to BBB's own violet.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;600;700;800&family=Arimo:wght@400;500;600;700&display=swap');

:root {
  --surface-default: #FFFFFF;
  --surface-subtle: #F6F1EB;
  --surface-accent-subtle: #F0E4D8;
  --surface-warning-subtle: #FBEAE7;

  --border-default: #E4D9CC;
  --border-accent: #A97C54;

  --text-default: #2B2420;
  --text-secondary: #6B5F54;
  --text-accent: #7A5738;
  --text-on-accent: #FFFFFF;

  --icon-default: #6B5F54;
  --icon-accent: #A97C54;
  --icon-warning: #A3352A;

  --brown: #A97C54;
  --brown-deep: #7A5738;

  --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem;
  --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem;

  --radius: 8px;
  --max: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--surface-default); color: var(--text-default); font-family:'Arimo', sans-serif; line-height:1.6; -webkit-font-smoothing: antialiased; }
img { max-width:100%; display:block; }
a { color: inherit; text-decoration: none; }

.display-hero { font-family:'Kanit', sans-serif; font-weight:800; font-size: 42px; line-height:1.15; }
.display-page { font-family:'Kanit', sans-serif; font-weight:700; font-size: 34px; line-height:1.2; }
.heading-lg   { font-family:'Kanit', sans-serif; font-weight:700; font-size: 28px; line-height:1.25; }
.heading-md   { font-family:'Kanit', sans-serif; font-weight:600; font-size: 21px; line-height:1.3; }
.heading-sm   { font-family:'Arimo', sans-serif; font-weight:700; font-size: 18px; }
.body-lede    { font-family:'Arimo', sans-serif; font-weight:400; font-size: 17px; }
.body-default { font-family:'Arimo', sans-serif; font-weight:400; font-size: 15.5px; }
.body-button  { font-family:'Arimo', sans-serif; font-weight:700; font-size: 15px; }
.label-kicker { font-family:'Arimo', sans-serif; font-weight:700; font-size: 13px; text-transform:uppercase; letter-spacing:.065em; }
.meta-small   { font-family:'Arimo', sans-serif; font-weight:500; font-size: 12px; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--border-accent); outline-offset: 2px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

.container { max-width: var(--max); margin:0 auto; padding: 0 var(--sp-5); }
.section { padding: var(--sp-9) 0; }
.section-subtle { background: var(--surface-subtle); }
.section-head { max-width:640px; margin-bottom: var(--sp-7); }
.section-head.center { margin-left:auto; margin-right:auto; text-align:center; }

.navbar { border-bottom:1px solid var(--border-default); background:var(--surface-default); position:sticky; top:0; z-index:40; }
.navbar .container { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap: var(--sp-4); padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.navbar-brand { display:flex; align-items:center; gap:10px; }
.navbar-brand img { height:2.75rem; }
.navbar-brand .wordmark { font-family:'Kanit'; font-weight:700; font-size:17px; color:var(--text-default); }
.navbar-links { display:flex; flex-wrap:wrap; gap: var(--sp-5); align-items:center; }
.navbar-links a { font-family:'Arimo'; font-weight:700; font-size:13.5px; color: var(--text-accent); }
.navbar-links a:hover { color: var(--brown-deep); }
.navbar-links a.current { border-bottom:2px solid var(--brown); padding-bottom:4px; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:'Arimo'; font-weight:700; font-size:15px; padding:14px 28px; border-radius:6px; border:none; cursor:pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.btn-primary { background: var(--brown); color: var(--text-on-accent); }
.btn-primary:hover { background: var(--brown-deep); }
.btn-ghost { background:transparent; color: var(--text-accent); border:1.5px solid var(--border-default); }
.btn-ghost:hover { border-color: var(--brown); }
.btn-link { background:none; border:none; color: var(--text-accent); font-weight:700; font-size:14px; padding:0; cursor:pointer; }
.btn-link:hover { color: var(--brown-deep); }

.hero { position:relative; background-size:cover; background-position:center; color: var(--text-on-accent); padding: var(--sp-9) 0; }
.hero-inner { max-width:640px; }
.hero .display-hero { color: var(--text-on-accent); margin:0 0 var(--sp-4); }
.hero .body-lede { color: rgba(255,255,255,.92); margin:0 0 var(--sp-6); }

.card { background: var(--surface-default); border:1px solid var(--border-default); border-radius: var(--radius); overflow:hidden; display:flex; flex-direction:column; height:100%; }
.card-img { aspect-ratio:4/3; overflow:hidden; background: var(--surface-subtle); }
.card-img img { width:100%; height:100%; object-fit:cover; }
.card-body { padding: var(--sp-5); display:flex; flex-direction:column; gap: var(--sp-3); flex:1; }
.card-body .heading-sm { margin:0; }
.card-body .body-default { color: var(--text-secondary); margin:0; flex:1; }

.grid { display:grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
@media (max-width:900px) { .grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.badge { display:inline-flex; align-items:center; gap:6px; background: var(--surface-accent-subtle); color: var(--text-accent); padding:4px 12px; border-radius:999px; font-family:'Arimo'; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.05em; width:fit-content; }

.cover-thumb { background: var(--surface-subtle); border:1px solid var(--border-default); border-radius: var(--radius); padding: var(--sp-5); display:flex; align-items:center; justify-content:center; }
.cover-thumb img { max-height:260px; width:auto; object-fit:contain; box-shadow: 0 6px 18px rgba(43,36,32,.18); }
.book-row { display:flex; gap: var(--sp-6); align-items:flex-start; margin-bottom: var(--sp-7); }
.book-row .cover-thumb { flex-shrink:0; width:180px; }
@media (max-width:640px) { .book-row { flex-direction:column; } .book-row .cover-thumb { width:100%; } }

.footer { border-top:1px solid var(--border-default); padding: var(--sp-6) 0; background: var(--surface-subtle); }
.footer .container { display:flex; flex-wrap:wrap; justify-content:space-between; gap: var(--sp-4); align-items:center; }
.footer-links { display:flex; gap: var(--sp-5); flex-wrap:wrap; }
.footer-links a { color: var(--text-accent); font-size:13.5px; font-weight:700; }
.footer .meta-small { color: var(--text-secondary); }

.text-secondary { color: var(--text-secondary); }
.center { text-align:center; }
.mt-0 { margin-top:0; } .mb-0 { margin-bottom:0; }

/* Route trail — replaces the flat arrow-separated route line */
.trail { position:relative; padding-left:48px; margin-top: var(--sp-6); }
.trail::before {
  content:''; position:absolute; left:15px; top:6px; bottom:6px; width:2px;
  background-image: repeating-linear-gradient(to bottom, var(--brown) 0 6px, transparent 6px 13px);
}
.trail-stop { position:relative; padding-bottom: var(--sp-6); }
.trail-stop:last-child { padding-bottom:0; }
.trail-marker {
  position:absolute; left:-48px; top:0; width:32px; height:32px; border-radius:50%;
  background: var(--brown); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:'Kanit'; font-weight:700; font-size:13px; flex-shrink:0;
}
.trail-marker.is-home { background: var(--brown-deep); }
.trail-city { font-family:'Kanit'; font-weight:700; font-size:18px; color:var(--text-default); }
.trail-note { font-size:13px; color:var(--text-secondary); margin-top:2px; }

/* Forms */
.field { margin-bottom: var(--sp-5); }
.field label { display:block; font-weight:700; font-size:13.5px; margin-bottom:8px; }
.field input, .field select, .field textarea {
  width:100%; font-family:inherit; font-size:15px; padding:12px 14px;
  border:1.5px solid var(--border-default); border-radius:8px; background: var(--surface-default); color: var(--text-default);
}
.field .hint { font-size:12px; color: var(--text-secondary); margin-top:6px; }
.form-card { background: var(--surface-subtle); border-radius: var(--radius); padding: var(--sp-7) var(--sp-6); }
.form-success { display:none; background: var(--surface-accent-subtle); border-radius: var(--radius); padding: var(--sp-6); }
.form-success.show { display:block; }
.form-success p { margin:0; color: var(--text-accent); font-weight:700; }