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

/* ========== PAGE HEADER (INTRO) ==========
   Recreated from about.css/available-kittens.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 dark bands the bright gold has ~10:1 contrast. */
.page-header .section-label,
.trust-band .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, available-kittens.css),
   recreated here as a reusable utility for sections that aren't card grids. */
.alt-bg {
    background-color: var(--color-gray-lightest);
}

/* ========== SECTION 2: GET IN TOUCH ========== */
.touch-content {
    max-width: 750px;
    margin: 0 auto;
}

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

/* Reuses the gold-left-border card-list treatment from about.css's
   .principle-list / available-kittens.css's .gohome-list, rather than
   inventing a new "contact methods" component. */
.contact-list {
    margin-top: var(--spacing-md);
}

.contact-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;
}

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

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

/* Inline pending-input marker for placeholders that sit inside flowing text
   (e.g. email/phone/response time here). Recreated from
   available-kittens.css's .pending-inline. */
.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;
}

.contact-list li .pending-inline {
    background-color: var(--color-gray-lightest);
}

/* ========== SECTION 3: CONTACT FORM (TECHNICAL CENTERPIECE) ==========
   Anchor target for the FaceTime/Visit CTAs — scroll-margin-top clears the
   fixed nav, same pattern as our-cats.css's .cat-profile. */
.contact-form-section {
    scroll-margin-top: 90px;
}

.form-intro {
    max-width: 650px;
    margin: var(--spacing-sm) auto 0;
}

.contact-form {
    max-width: 640px;
    margin: 0 auto;
}

.form-row {
    margin-bottom: var(--spacing-md);
}

.contact-form label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--color-black);
    margin-bottom: 0.5rem;
}

.required-mark {
    color: var(--color-gold-dark);
}

.optional-mark {
    font-weight: 400;
    font-style: italic;
    color: var(--color-gray-medium);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-black);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-light);
    padding: 0.75rem 1rem;
    transition: var(--transition-fast);
}

.contact-form textarea {
    resize: vertical;
    min-height: 8rem;
}

/* Gold-dark focus ring, matching the site's established focus treatment
   (responsive.css's global a/button/input/textarea :focus outline) rather
   than introducing a new focus color. */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: 2px solid var(--color-gold-dark);
    outline-offset: 1px;
    border-color: var(--color-gold-dark);
}

.field-helper {
    font-size: 0.8125rem;
    color: var(--color-gray-medium);
    margin: 0.4rem 0 0;
}

/* Error state — reuses design-system gray/gold-dark tones rather than
   introducing a new alert color. Hidden by default; contact.js toggles
   .has-error on the row and fills in the message. */
.field-error {
    display: none;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-gold-dark);
    margin: 0.4rem 0 0;
}

.form-row.has-error input,
.form-row.has-error select,
.form-row.has-error textarea {
    border-color: var(--color-gold-dark);
    border-width: 2px;
}

.form-row.has-error .field-error {
    display: block;
}

/* Honeypot: visually hidden but still present/focusable-by-bots in the DOM,
   which is what makes it effective against simple form-filling bots. */
.hp-field {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.contact-form .btn {
    margin-top: var(--spacing-xs);
}

/* Honest "form isn't live yet" message shown after a valid client-side
   submit attempt, in place of a fake success state. */
.form-not-live {
    margin-top: var(--spacing-md);
    background-color: var(--color-gray-lightest);
    border-left: 3px solid var(--color-gold);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.9375rem;
    color: var(--color-gray-medium);
    line-height: 1.7;
}

.form-note {
    max-width: 640px;
    margin: var(--spacing-md) auto 0;
    font-size: 0.875rem;
    color: var(--color-gray-medium);
    text-align: center;
}

/* ========== SECTION 4: FACETIME TRUST BAND ==========
   Recreated from about.css's .trust-band dark-band pattern. */
.trust-band {
    background: linear-gradient(135deg, var(--color-gray-dark) 0%, var(--color-black) 100%);
    color: var(--color-white);
}

.trust-band .section-title {
    color: var(--color-white);
}

.trust-content {
    max-width: 750px;
    margin: 0 auto;
}

.trust-content .lead {
    color: var(--color-white);
    text-align: left;
}

.trust-content > p:not(.lead) {
    color: var(--color-gray-light);
    text-align: left;
}

.trust-content strong {
    color: var(--color-white);
}

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

/* ========== SECTION 5: VISIT US ========== */
.visit-content {
    max-width: 750px;
    margin: 0 auto;
}

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

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

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

/* ========== SECTION 6: FOLLOW ALONG ========== */
.follow-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

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

.follow-content .owner-input-note {
    margin-top: var(--spacing-md);
    text-align: left;
}

/* Visible placeholder for copy the owner still needs to supply. Recreated
   from about.css/available-kittens.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 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/
   available-kittens.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;
    }

    .contact-form-section {
        scroll-margin-top: 64px;
    }

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

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

    .contact-form .btn {
        width: 100%;
    }
}