/* Second Chance Dogs — built on the Miami Vein "Spanish Villa Spa" design system.
   Tokens come from colors_and_type.css (imported first in each page). */

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-7); }

/* ---------- Header — centered serif wordmark, caps nav (from Header.jsx) ---------- */
header.site {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250,247,241,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-1);
}
header.site .wrap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
.wordmark {
  font-family: var(--font-display); font-weight: 500; font-size: 1.6rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-900);
  text-decoration: none; padding-left: .18em;
}
.wordmark small { font-size: .7em; letter-spacing: .14em; }
.wordmark-divider { width: 38px; height: 1px; background: var(--line-gilt); }
header.site nav { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; justify-content: center; }
header.site nav a {
  font-family: var(--font-ui); font-size: .78rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-700); transition: color .2s;
}
header.site nav a:hover { color: var(--accent-deep); }

/* ---------- Full-bleed warm hero (from HeroFullbleed + Scene) ---------- */
.hero {
  position: relative; min-height: 76vh; display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
  background: radial-gradient(120% 90% at 75% 15%, #F4E7D2 0%, #E7CFAE 38%, #D6A985 70%, #B6815f 100%);
}
.hero::before { /* warm overlay scrim for legibility */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(44,38,31,.18) 0%, rgba(44,38,31,.46) 100%);
}
.hero::after { /* soft sun bloom */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 78% 12%, rgba(255,248,235,.5), transparent 60%);
}
.hero .inner { position: relative; z-index: 2; max-width: 760px; padding: var(--sp-9) var(--sp-6); display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); }
.hero .mvc-eyebrow { color: rgba(247,241,232,.92); }
.hero h1 {
  font-family: var(--font-display); font-weight: 500; color: #FBF6EE; margin: 0;
  font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.06; letter-spacing: .01em;
  text-shadow: 0 4px 40px rgba(33,60,82,.35);
}
.hero h1 .accent-italic { font-family: var(--font-accent); font-style: italic; color: #F0D9BE; }
.hero .lead { color: rgba(247,241,232,.94); max-width: 560px; margin: 0; }
.hero .cta-row { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-3); }

/* ---------- Trust strip ---------- */
.trust { border-top: 1px solid var(--line-1); border-bottom: 1px solid var(--line-1); background: var(--bg-accent-soft); }
.trust .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4); padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
.trust .item { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: .9rem; font-weight: 600; color: var(--ink-700); }
.trust .item i { color: var(--accent-terra-deep); font-size: 1.3rem; }

/* ---------- Section heading ---------- */
.section { padding: var(--sp-9) 0 var(--sp-6); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto var(--sp-7); }
.section-head .mvc-eyebrow { display: block; margin-bottom: var(--sp-3); }
.section-head h2 { margin: 0; }
.section-head .lead { margin-top: var(--sp-3); }

/* Decorative dashed rule */
.rule { display: flex; align-items: center; gap: 16px; max-width: 380px; margin: 0 auto; }
.rule::before, .rule::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--line-gilt), transparent); }
.rule span { font-family: var(--font-accent); font-style: italic; font-weight: 500; font-size: 1.35rem; color: var(--accent-terra-deep); white-space: nowrap; }
.rule.light::before, .rule.light::after { background: linear-gradient(90deg, transparent, rgba(244,238,227,.5), transparent); }
.rule.light span { color: #E9DCC6; }

/* ---------- Filters ---------- */
.filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; margin-bottom: var(--sp-6); }
.filters button {
  font-family: var(--font-ui); font-weight: 600; font-size: var(--t-small);
  border: 1px solid var(--line-2); background: transparent; color: var(--fg-2);
  padding: var(--sp-2) var(--sp-5); border-radius: var(--r-pill); cursor: pointer; transition: all .2s ease;
}
.filters button:hover { background: var(--bg-sunken); }
.filters button.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- Grid & cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-6); }
.card {
  background: var(--bg-surface); border: 1px solid var(--line-1); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md); overflow: hidden; display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card .photo { display: block; aspect-ratio: 4/3; background: var(--bg-sunken) center/cover no-repeat; position: relative; }
.card h3 .name-link { color: inherit; text-decoration: none; }
.card h3 .name-link:hover { color: var(--accent-deep); }
.card .badge {
  position: absolute; top: var(--sp-3); left: var(--sp-3); padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill); font-family: var(--font-ui); font-size: var(--t-eyebrow);
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff;
}
.badge.available { background: var(--accent); }
.badge.pending { background: var(--accent-terra-deep); }
.badge.adopted { background: var(--ink-300); }
.card .body { padding: var(--sp-5) var(--sp-5) var(--sp-6); }
.card h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h3); margin: 0 0 var(--sp-1); color: var(--fg-1); }
.card .meta { font-family: var(--font-ui); font-size: var(--t-small); color: var(--fg-3); margin-bottom: var(--sp-3); }
.card .desc { font-size: var(--t-body); color: var(--fg-2); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card .adopt { margin-top: var(--sp-4); }

.empty { text-align: center; color: var(--fg-3); padding: var(--sp-9) var(--sp-5); font-family: var(--font-accent); font-style: italic; font-size: var(--t-lead); }

/* ---------- Dark "happy tails" band ---------- */
.band-dark { background: var(--bg-inverse); padding: var(--sp-9) var(--sp-6); text-align: center; }
.band-dark .wrap { max-width: 860px; }
.band-dark blockquote {
  font-family: var(--font-display); font-weight: 500; font-style: italic; color: #F4EEE3;
  font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.3; margin: var(--sp-6) 0 var(--sp-5);
}
.band-dark .attr { font-family: var(--font-ui); font-size: .9rem; font-weight: 600; color: var(--fg-on-dark-2); letter-spacing: .04em; }

/* ---------- CTA band ---------- */
.cta { padding: var(--sp-9) 0; }
.cta .box {
  background: linear-gradient(135deg, var(--bg-accent-soft), #FBF0E8); border: 1px solid #EAD7C8;
  border-radius: var(--r-lg); padding: var(--sp-8) var(--sp-7); text-align: center; box-shadow: var(--shadow-md);
}
.cta .box .mvc-eyebrow { display: block; margin-bottom: var(--sp-3); }
.cta .box h2 { margin: 0 auto; max-width: 640px; }
.cta .box .lead { max-width: 540px; margin: var(--sp-4) auto 0; }
.cta .box .btn { margin-top: var(--sp-6); }

footer.site { text-align: center; color: var(--fg-3); font-size: var(--t-small); padding: var(--sp-7) var(--sp-5); border-top: 1px solid var(--line-1); }
footer.site .rule { margin-bottom: var(--sp-4); }
.contact-line { font-family: var(--font-ui); font-size: var(--t-small); color: var(--fg-2); margin: var(--sp-4) 0 0; }
.contact-line a { color: var(--accent-deep); text-decoration: none; }
.contact-line a:hover { text-decoration: underline; }
.cta .contact-line { margin-top: var(--sp-5); }
.contact-line i { vertical-align: -2px; color: var(--accent-terra-deep); }
.footer-admin { margin-top: var(--sp-5); }
.footer-admin a { font-family: var(--font-ui); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-300); text-decoration: none; opacity: .65; transition: opacity .2s, color .2s; }
.footer-admin a:hover { opacity: 1; color: var(--accent-deep); }

/* ---------- Buttons (pills) ---------- */
.btn {
  display: inline-block; font-family: var(--font-ui); font-weight: 600; font-size: var(--t-small);
  border: 1px solid var(--ink-900); background: var(--ink-900); color: #F4EEE3; text-decoration: none;
  padding: var(--sp-3) var(--sp-6); border-radius: var(--r-pill); cursor: pointer; transition: all .2s ease;
}
.btn:hover { background: #1d1813; transform: translateY(-1px); }
.btn:active { transform: scale(.98); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn.light { background: rgba(248,245,240,.95); border-color: rgba(248,245,240,.95); color: var(--ink-900); }
.btn.light:hover { background: #fff; }
.btn.ghost-light { background: transparent; border-color: rgba(244,238,227,.55); color: #F4EEE3; }
.btn.ghost-light:hover { background: rgba(244,238,227,.14); }
.btn.secondary { background: transparent; color: var(--ink-900); border-color: var(--line-2); }
.btn.secondary:hover { background: var(--sand-beige); }
.btn.danger { background: var(--accent-terra-deep); border-color: var(--accent-terra-deep); color: #fff; }
.btn.danger:hover { filter: brightness(.92); }
.btn:disabled { opacity: .55; cursor: default; }
.btn i { vertical-align: -2px; margin-right: 4px; font-size: 1.05em; }

/* Language toggle */
.lang-toggle { display: inline-flex; gap: 2px; margin-left: var(--sp-4); border: 1px solid var(--line-2); border-radius: var(--r-pill); overflow: hidden; }
.lang-toggle button { font-family: var(--font-ui); font-size: .7rem; font-weight: 600; letter-spacing: .1em; padding: 5px 11px; background: transparent; color: var(--ink-700); border: none; cursor: pointer; }
.lang-toggle button.active { background: var(--accent); color: #fff; }

/* ---------- Forms (admin) ---------- */
.panel { background: var(--bg-surface); border: 1px solid var(--line-1); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: var(--sp-7); margin: var(--sp-6) 0; }
.panel > h2 { margin-top: 0; }
.field { margin-bottom: var(--sp-4); }
.field label { display: block; font-family: var(--font-ui); font-weight: 600; font-size: var(--t-small); margin-bottom: var(--sp-2); color: var(--fg-1); }
.field input, .field select, .field textarea {
  width: 100%; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: var(--t-body); background: var(--bg-surface); color: var(--fg-1);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--bg-blue-soft); }
.field textarea { min-height: 120px; resize: vertical; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.note { color: var(--fg-3); font-size: var(--t-small); margin-top: var(--sp-2); }
.msg { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); margin: var(--sp-3) 0; font-size: var(--t-small); font-family: var(--font-ui); }
.msg.ok { background: var(--bg-blue-soft); color: var(--accent-deep); }
.msg.err { background: var(--bg-accent-soft); color: var(--accent-terra-deep); }

.thumbs { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-3); }
.thumb { width: 96px; height: 96px; border-radius: var(--r-sm); background: var(--bg-sunken) center/cover; position: relative; border: 1px solid var(--line-1); }
.thumb button { position: absolute; top: -8px; right: -8px; background: var(--accent-terra-deep); color: #fff; border: none; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-weight: 700; line-height: 1; }

.admin-list { display: grid; gap: var(--sp-3); }
.admin-row { display: flex; align-items: center; gap: var(--sp-4); background: var(--bg-surface); border: 1px solid var(--line-1); border-radius: var(--r-md); padding: var(--sp-3); box-shadow: var(--shadow-sm); }
.admin-row .ph { width: 64px; height: 64px; border-radius: var(--r-sm); background: var(--bg-sunken) center/cover; flex-shrink: 0; }
.admin-row .info { flex: 1; min-width: 0; }
.admin-row .info b { font-family: var(--font-ui); display: block; color: var(--fg-1); }
.admin-row .info span { color: var(--fg-3); font-size: var(--t-small); }
.admin-row .acts { display: flex; gap: var(--sp-2); }
.center-narrow { max-width: 440px; margin: var(--sp-9) auto; }

/* ---------- Dog profile page ---------- */
.profile { padding-top: var(--sp-7); padding-bottom: var(--sp-9); }
.profile .loading { color: var(--fg-3); text-align: center; padding: var(--sp-9) 0; }
.profile .back { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--t-small); font-weight: 600; text-decoration: none; color: var(--accent-deep); margin-bottom: var(--sp-6); }
.profile .back:hover { color: var(--accent); }
.profile-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-8); align-items: start; }
.profile-photo { aspect-ratio: 4/3; background: var(--bg-sunken) center/cover no-repeat; border-radius: var(--r-lg); box-shadow: var(--shadow-md); position: relative; }
.profile-photo .badge { position: absolute; top: var(--sp-4); left: var(--sp-4); }
.profile-thumbs { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); flex-wrap: wrap; }
.pthumb { width: 84px; height: 84px; border-radius: var(--r-sm); background: var(--bg-sunken) center/cover; cursor: pointer; border: 2px solid transparent; transition: border-color .2s; }
.pthumb:hover { border-color: var(--line-2); }
.pthumb.active { border-color: var(--accent); }
.profile-info { padding-top: var(--sp-3); }
.profile-info .mvc-eyebrow { display: block; margin-bottom: var(--sp-3); }
.profile-info h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--t-h1); margin: 0 0 var(--sp-2); }
.profile-meta { font-family: var(--font-ui); color: var(--fg-3); font-size: var(--t-body); margin-bottom: var(--sp-5); }
.profile-desc { font-size: var(--t-lead); line-height: 1.7; color: var(--fg-2); margin-bottom: var(--sp-6); white-space: pre-line; }
.adopted-note { font-family: var(--font-accent); font-style: italic; font-size: var(--t-lead); color: var(--accent-terra-deep); }

@media (max-width: 720px) { .profile-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* ---------- Quiet PDF fallback note ---------- */
.pdf-note { font-family: var(--font-ui); font-size: var(--t-small); color: var(--fg-3); margin: var(--sp-4) 0 0; }
.pdf-note a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 2px; }
.pdf-note a:hover { color: var(--accent-deep); }

/* ---------- Adoption requirement callout ---------- */
.requirement {
  display: flex; gap: var(--sp-3); text-align: left;
  background: var(--bg-blue-soft); border: 1px solid var(--line-1); border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5); margin: var(--sp-5) auto 0; max-width: 640px;
  font-family: var(--font-ui); font-size: var(--t-small); line-height: 1.55; color: var(--ink-700);
}
.requirement i { color: var(--accent-deep); font-size: 1.3rem; flex-shrink: 0; }

/* ---------- Application form page ---------- */
.apply { padding-top: var(--sp-6); padding-bottom: var(--sp-9); max-width: 860px; }
.apply .back { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--t-small); font-weight: 600; text-decoration: none; color: var(--accent-deep); margin-bottom: var(--sp-5); }
.apply .back:hover { color: var(--accent); }
.apply h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--t-h1); margin: var(--sp-2) 0 0; }
.apply form h3 { margin: var(--sp-7) 0 var(--sp-4); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line-1); }
.apply form h3:first-of-type { margin-top: 0; }
#successBox h2 { margin-top: 0; }
#submitBtn { margin-top: var(--sp-4); }

@media (max-width: 720px) {
  .row2 { grid-template-columns: 1fr; }
  .wrap { padding: 0 var(--sp-5); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }