/* Shared layout for a country's "bringing pets by boat" page.
   Another country uses the same classes. The copy lives in tools/pets/<id>.json. */

.pets-hero {
  background: var(--dark);
  color: var(--on-dark);
  padding: 28px 26px 32px;
  margin: 8px 0 32px;
}
.pets-hero h2 {
  color: #fff;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1.2;
  margin: 0 0 14px;
}
.pets-hero blockquote {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.5;
}
.pets-hero .pets-cite {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
}
.pets-hero a { color: #fff; }
.pets-plain {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--gold);
  font-family: var(--head-font);
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  font-weight: 500;
  line-height: 1.35;
}
.pets-plain + .pets-plain { margin-top: 10px; padding-top: 0; border-top: 0; }

.pets-download { margin: 22px 0 0; }
.pets-hero .pets-download .btn-light,
.pets-download .btn { margin-top: 4px; }
.pets-hero .btn-light { background: #fff; color: var(--dark); border-color: #fff; }
.pets-hero .btn-light:hover { background: transparent; color: #fff; }
.pets-download-note {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--body-font);
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.45;
}
.pets-topic .pets-download-note { color: var(--ink); }

.pets-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.pets-toc a { font-size: 0.95rem; }

.pets-topic { margin: 2.2rem 0; }
.pets-topic > h2 { margin-bottom: 0.4em; }

.pets-voices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.pets-voices.stack { grid-template-columns: 1fr; }

.pets-voice {
  border: 1px solid var(--border);
  background: #fff;
  padding: 14px 16px 16px;
  min-width: 0;
}
.pets-voice h3 {
  margin: 0 0 10px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pets-voice p,
.pets-voice li { font-size: 0.98rem; }
.pets-voice p { margin: 0 0 0.75em; }
.pets-voice p:last-child,
.pets-voice ul:last-child { margin-bottom: 0; }
.pets-voice ul { margin: 0.4em 0 0.75em; padding-left: 1.15em; }
.pets-voice-rules { border-top: 4px solid var(--turquoise); }
.pets-voice-officials { border-top: 4px solid var(--gold); }
.pets-voice-us { border-top: 4px solid var(--dark); }
.pets-cite { font-size: 0.88rem; color: var(--ink-dim); }

.pets-outcome {
  border: 2px solid var(--gold);
  background: #fffaf0;
  padding: 16px 18px;
  margin: 14px 0 0;
  font-size: 1.08rem;
  line-height: 1.45;
}

.pets-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.pets-card {
  border: 1px solid var(--border);
  padding: 16px;
  background: #fff;
}
.pets-card h3 { margin: 0 0 8px; font-size: 1.05rem; }
.pets-card p { margin: 0 0 0.7em; }
.pets-card p:last-child { margin-bottom: 0; }

.titer-check {
  border: 1px solid var(--border);
  background: var(--dim);
  padding: 18px 18px 8px;
  margin-top: 16px;
}
.titer-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 16px;
}
.titer-check label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 500;
}
.titer-check input[type="date"] {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
}
.titer-check .btn { margin: 14px 0; }
.titer-result {
  margin: 0 0 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border);
}
.titer-result p { margin: 0 0 0.55em; }
.titer-result p:last-child { margin-bottom: 0; }
.titer-result.titer-ok { border-color: var(--turquoise); }
.titer-result.titer-early { border-color: var(--gold); }
.titer-result.titer-expired { border-color: #9a3b2f; }

.pets-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.pets-table th,
.pets-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.pets-table th { font-weight: 500; }

@media (max-width: 800px) {
  .pets-voices { grid-template-columns: 1fr; }
  .pets-hero { padding: 22px 18px 26px; }
}