/* =========================================================
CONTACT — One-screen panel with Footer under fixed header
========================================================= */

.contact {
    /* Reduced height so contact + footer fit in one screen */
    min-height: calc(100svh - var(--header-h, 56px) - var(--footer-h, 100px));
    /* Padding for content */
    padding: 36px min(6vw, 48px) 24px;
    /* Grid lets us center the form */
    display: grid;
    align-content: center;
    justify-items: center;
    /* Scroll offset - use larger value so footer is visible */
    scroll-margin-top: calc(var(--header-h, 56px) - 60px);
    }
    
    /* Scope the section title to Contact only */
    .contact .section-title {
    margin: 0 0 12px;
    text-align: center;
    }
    
    /* The form is capped by the panel height so the footer stays visible */
    .talk-form {
    width: min(560px, 92vw);
    max-height: 100%;
    overflow: auto;
    justify-self: center;
    background: var(--contact-form-bg);
    border: 2px solid var(--contact-form-border);
    border-radius: 10px;
    padding: 18px 18px 22px;
    display: grid;
    gap: 10px;
    }
    
    /* Intro copy */
    .tf-intro {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--contact-form-text);
    }
    
    /* Labels */
    .tf-label {
    font-size: 13px;
    color: var(--contact-form-text);
    opacity: .9;
    }
    
    /* Inputs and textarea */
    input.tf-input,
    textarea.tf-textarea {
    width: 100%;
    background: var(--contact-input-bg);
    color: var(--contact-form-text);
    border: 2px solid var(--contact-input-border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    }
    
    textarea.tf-textarea {
    min-height: 120px;
    resize: vertical;
    }
    
    /* Submit button — centered */
    .tf-submit {
    margin-top: 8px;
    justify-self: center;
    padding: 10px 16px;
    border-radius: 8px;
    border: 2px solid var(--contact-input-border);
    background: var(--contact-submit-bg);
    color: var(--contact-form-text);
    font-weight: 600;
    cursor: pointer;
    }
    
    /* Focus styles for accessibility */
    input.tf-input:focus-visible,
    textarea.tf-textarea:focus-visible {
    outline: 2px solid var(--focus-outline);
    outline-offset: 2px;
    border-color: var(--contact-input-focus);
    }
    
    /* Error/help text */
    .tf-help {
    font-size: 12px;
    color: var(--contact-error);
    margin-top: 4px;
    }
    
    .is-invalid {
    border-color: var(--contact-invalid) !important;
    }
    
    /* Inline status message shown after successful submit */
    .tf-status {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--contact-status-border);
    background: var(--contact-status-bg);
    color: var(--contact-form-text);
    font-size: 13px;
    }
    
    /* Short viewports */
    @media (max-height: 720px) {
    .contact { padding-top: 24px; }
    .talk-form { max-height: calc(100% - 8px); }
    }
    
    /* Very small viewports */
    @media (max-height: 700px) {
    .contact { padding-bottom: 12px; }
    }