/* ============================================
   MAINE HAUS CATTERY - AVAILABLE KITTENS PAGE STYLES
   Loaded after main.css and responsive.css
   ============================================ */

/* ========== PAGE HEADER (INTRO) ==========
   Recreated from about.css/our-cats.css — page-specific CSS isn't shared
   between page stylesheets, so the dark intro-band pattern is duplicated here. */
.page-header {
    background: linear-gradient(135deg, var(--color-black) 0%, var(--color-gray-dark) 100%);
    color: var(--color-white);
    text-align: center;
    margin-top: 70px;
    padding: var(--spacing-xl) 0;
}

.page-header h1 {
    color: var(--color-white);
    margin-bottom: var(--spacing-sm);
}

.page-header .title-underline {
    margin-bottom: var(--spacing-md);
}

/* The site-wide .section-label uses the darker AA gold meant for light
   backgrounds; on this page's one dark band (the header) the bright gold has
   ~10:1 contrast. .current-status is now a light band (see below), so it
   keeps the site-wide default gold-dark label color instead of this override. */
.page-header .section-label {
    color: var(--color-gold);
}

.page-header-text {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.page-header-text .lead {
    color: var(--color-white);
}

/* ========== GENERIC ALTERNATING-SECTION BACKGROUND ==========
   Same gray-lightest tone used elsewhere (about.css, our-cats.css), recreated
   here as a reusable utility for sections that aren't card grids. */
.alt-bg {
    background-color: var(--color-gray-lightest);
}

/* ========== SECTION 2: CURRENT AVAILABILITY (LIGHT STATUS BAND) ==========
   Was a dark gradient — but that ran the dark .page-header straight into
   another dark band (~1200px of unbroken dark before the first light
   section). Switched to the same gray-lightest tone used for alternating
   sections elsewhere (about.css/our-cats.css's .alt-bg, main.css's
   .highlights) so the page breaks cadence right after the header. The
   shared .status-badge/.status-icon pattern (main.css) was tuned for a dark
   background, so it's re-themed here for the light one. */
.current-status {
    background-color: var(--color-gray-lightest);
}

.status-content {
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}

.current-status .status-badge {
    margin: 0 auto var(--spacing-md);
    background-color: var(--color-white);
    border-color: var(--color-gray-light);
    box-shadow: var(--shadow-subtle);
}

/* Shared .status-icon is bright gold for dark badges; on this page's white
   badge use the AA-safe dark gold so the paw doesn't wash out */
.current-status .status-icon {
    color: var(--color-gold-dark);
}

.status-content .lead {
    text-align: left;
}

.status-content > p:not(.lead):not(.last-updated) {
    text-align: left;
}

/* Visible, styled "freshness cue" stamp — small caps/letterspaced treatment
   per the research-backed convention this page is meant to establish and
   maintain going forward (see the /update-kittens skill). Recolored for the
   light background: gold-dark text (AA-safe on light per main.css's
   convention) and a white pill so the stamp still reads as a distinct chip. */
.last-updated {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--color-gold-dark);
    background-color: var(--color-white);
    border: 1px solid rgba(140, 109, 31, 0.35);
    padding: 0.5rem 1.25rem;
    margin: var(--spacing-sm) 0 var(--spacing-md);
}

.status-cta {
    text-align: center;
    margin-top: var(--spacing-sm);
}

/* ========== SECTION 3: UPCOMING PAIRINGS (CENTERPIECE) ==========
   .pairing-card recreates the white-card / gold-top-border / shadow-medium
   treatment from our-cats.css's .quick-facts card, adapted into a standalone
   centerpiece card rather than a stat panel. */
.pairing-card {
    max-width: 760px;
    margin: 0 auto;
    background-color: var(--color-white);
    border-top: 3px solid var(--color-gold);
    box-shadow: var(--shadow-medium);
    padding: var(--spacing-lg) var(--spacing-md);
    text-align: center;
}

.pairing-names {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.pairing-name {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 600;
    color: var(--color-black);
}

/* The Playfair "×" between the two names — the page's one deliberate
   ornamental flourish, echoing the "Kepler × Charlotte" framing used
   throughout the copy and on our-cats.html's closing CTA. */
.pairing-symbol {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-style: italic;
    color: var(--color-gold-dark);
}

.pairing-colors {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-gray-medium);
    margin-bottom: var(--spacing-md);
}

.pairing-colors-divider {
    margin: 0 0.5rem;
    color: var(--color-gold-dark); /* AA on the white card, matching .pairing-symbol */
}

/* Inline pending-input marker for placeholders that sit inside flowing text
   (e.g. the deposit amount in the waitlist steps) — same "pending" visual
   language as .gohome-list li.pending, adapted for inline use. */
.pending-inline {
    font-style: italic;
    color: var(--color-gray-medium);
    background-color: var(--color-gray-lightest);
    border: 1px dashed var(--color-gray-medium);
    border-radius: 3px;
    padding: 0 0.35em;
}

.pairing-card .lead,
.pairing-card > p {
    text-align: left;
}

/* Reuses main.css's shared .cat-details checkmark-list pattern (already
   used on the homepage's cat-card previews) rather than inventing a new
   credentials-list treatment. */
.pairing-credentials {
    max-width: 480px;
    margin: 0 auto var(--spacing-md);
    text-align: left;
    padding-left: 0;
}

.pairing-card .owner-input-note {
    text-align: left;
    margin: var(--spacing-sm) 0 var(--spacing-md);
}

.pairing-cta {
    margin-top: var(--spacing-sm);
}

/* Visible placeholder for copy the owner still needs to supply. Recreated
   from about.css/our-cats.css's .owner-input-note. */
.owner-input-note {
    font-style: italic;
    color: var(--color-gray-medium);
    background-color: var(--color-gray-lightest);
    border: 2px dashed var(--color-gray-medium);
    padding: var(--spacing-sm) var(--spacing-md);
}

.owner-input-note p:last-child {
    margin-bottom: 0;
}

/* ========== SECTION 4: HOW OUR WAITLIST WORKS ==========
   .waitlist-steps recreates the thin-gold-circle Playfair numeral treatment
   from our-cats.css's .verify-list — that page's dark band used translucent
   white cards; this section sits on a light background, so cards are solid
   white with a subtle shadow instead. */
.process-intro {
    max-width: 700px;
    margin: var(--spacing-sm) auto 0;
}

.waitlist-steps {
    counter-reset: waitlist-counter;
    max-width: 800px;
    margin: 0 auto var(--spacing-md);
    padding: 0;
    list-style: none;
}

.waitlist-steps li {
    counter-increment: waitlist-counter;
    position: relative;
    background-color: var(--color-white);
    box-shadow: var(--shadow-subtle);
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 4.5rem;
    margin-bottom: var(--spacing-sm);
    color: var(--color-gray-medium);
    line-height: 1.7;
}

.waitlist-steps li:last-child {
    margin-bottom: 0;
}

.waitlist-steps li::before {
    content: counter(waitlist-counter);
    position: absolute;
    left: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-gold);
    border-radius: 50%;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-gold-dark);
}

.waitlist-steps strong {
    color: var(--color-black);
}

.process-note {
    max-width: 700px;
    margin: 0 auto var(--spacing-md);
    font-weight: 500;
    color: var(--color-black);
    text-align: center;
}

.process-cta {
    text-align: center;
}

/* ========== SECTION 5: GO-HOME PACKAGE ==========
   .gohome-list recreates the gold-left-border list treatment from
   about.css's .principle-list / our-cats.css's .health-list; confirmed
   items keep the solid gold border, and consecutive pending items (five in
   a row in the copy) get a dashed-border variant of the same list style so
   they read as "clearly pending" without seven separate boxed callouts. */
.gohome-intro {
    max-width: 700px;
    margin: var(--spacing-sm) auto 0;
}

.gohome-list {
    max-width: 800px;
    margin: 0 auto var(--spacing-md);
}

.gohome-list li {
    background-color: var(--color-white);
    border-left: 3px solid var(--color-gold);
    box-shadow: var(--shadow-subtle);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    font-size: 0.9375rem;
    color: var(--color-gray-medium);
    line-height: 1.7;
}

.gohome-list li:last-child {
    margin-bottom: 0;
}

.gohome-list strong {
    color: var(--color-black);
}

.gohome-list li.pending {
    border-left: 3px dashed var(--color-gray-medium);
    background-color: var(--color-gray-lightest);
    box-shadow: none;
    font-style: italic;
}

.gohome-cta {
    text-align: center;
}

/* ========== SECTION 6: PRICING NOTE ==========
   Deliberately quiet — standard section-header + text column, no special
   emphasis, per the "keep this honest, not salesy" build note. */
.pricing-content {
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}

.pricing-content .lead,
.pricing-content > p {
    text-align: left;
}

.pricing-cta {
    text-align: center;
    margin-top: var(--spacing-sm);
}

/* ========== SECTION 7: CLOSING CTA ========== */
.cta-buttons {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--spacing-md);
}

/* Gold outline button — the shared .btn-secondary is white-on-dark only, so
   light backgrounds need this variant. Recreated from about.css/our-cats.css. */
.btn-outline-gold {
    background-color: transparent;
    color: var(--color-gold-dark);
    border-color: var(--color-gold-dark);
}

.btn-outline-gold:hover {
    background-color: var(--color-gold-dark);
    color: var(--color-white);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    /* Nav shrinks to 64px tall on mobile (40px logo + 0.75rem padding × 2);
       match it so no white seam shows above the dark header. */
    .page-header {
        margin-top: 64px;
    }

    .pairing-card {
        padding: var(--spacing-md) var(--spacing-sm);
    }

    .pairing-names {
        gap: var(--spacing-xs);
    }

    .waitlist-steps li {
        padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 3.75rem;
    }

    .waitlist-steps li::before {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
        left: 0.75rem;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .cta-buttons .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .pairing-colors {
        letter-spacing: 0.5px;
    }
}