/* ─────────────────────────────────────────────────────────────────────────
   Pets page styles — the tabbed manila folder and the pet profiles it holds.
   Specific to pets.html (structure driven by pet-tabs.js). Split out of
   components.css to keep that sheet focused on shared/site-wide components.
   Loaded after components.css, which still defines the shared --manila* palette
   (the manila colour also feeds the shared .postage-stamp primitive) and the
   .polaroid component these profiles reuse. Only pets.html needs this sheet.
   ───────────────────────────────────────────────────────────────────────── */

/* The folder chrome (.folder, .folder__tabs, .folder__tab, .folder__body) is a
   shared component in components.css. pets.css keeps only the pet-specific tab
   state (keyed to #tab-ben / #tab-esme) and the profile content below. */

/* Light up the tab whose radio is checked and pull it flush with the body. */
#tab-ben:checked ~ .folder__tabs label[for="tab-ben"],
#tab-esme:checked ~ .folder__tabs label[for="tab-esme"] {
    background: var(--manila);
    transform: translateY(0);
    font-weight: 600;
    z-index: 3;
}

/* The inner sheet each profile is printed on. */
.pet-profile {
    display: none;
    background: var(--manila-page);
    border-radius: 4px;
    padding: 22px 26px 30px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    animation: pet-page-in 0.25s ease;
}

#tab-ben:checked ~ .folder__body #page-ben,
#tab-esme:checked ~ .folder__body #page-esme {
    display: block;
}

@keyframes pet-page-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pet-profile__header {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
}

/* Slightly smaller in the folder so photo + bio share one row. */
.pet-profile .polaroid {
    max-width: 190px;
    flex: 0 0 auto;
}

.pet-profile__intro {
    flex: 1 1 160px;
    min-width: 150px;
}

.pet-profile__intro h2,
.pet-profile__content h2 {
    font-family: 'Tox Typewriter', serif;
    color: var(--dark-purple);
    margin: 0 0 4px;
}

.pet-profile__content h2 {
    text-align: start;
    margin: 1rem 0 1rem 1rem;
}

.pet-profile__tagline {
    font-family: 'Shorelines Script', cursive;
    font-size: 1.5rem;
    color: var(--purple-700);
    margin: 0 0 14px;
    text-align: center;
}

.pet-profile__content {
    margin: 1rem 0;
}

/* Biographical fields — a stack of "label: value" typewriter rows. */
.pet-bio {
    margin: 0;
}

.pet-bio div {
    display: flex;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px dashed var(--manila-edge);
    font-family: 'Tox Typewriter', serif;
    font-size: 0.95rem;
}

.pet-bio dt {
    flex: 0 0 34%;
    font-weight: 600;
    color: var(--purple-800);
    text-transform: lowercase;
}

.pet-bio dd {
    flex: 1 1 auto;
    margin: 0;
    color: black;
}