/* Help Container - uses .page-container from site.css */

/* Help Intro */

.help-card .section-title{
    padding-bottom: 0px;
    margin-bottom: 0px;
    border-bottom: none;
}

.help-card .section-description {
    margin-top: 10px;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.95rem;
    color: #666;
    margin: 0;
    border-bottom: 2px solid #F1F1F1;
    padding-bottom: 15px;
    margin-bottom: 25px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-separator {
    display: none;
}

/* Help Form Section - uses .section-wrapper and .section-title from site.css */
/* Form styles come from form.css */

.help-card .require-alert {
    margin-bottom: 20px;
}

.help-form-section .form-container {
    padding: 0;
}

.help-submit-div {
    display: flex;
    justify-content: center;
    padding-top: 10px;
}

.help-submit-div button {
    width: 100%;
}

.optional-label {
    font-weight: 400;
    color: #999;
    font-size: 12px;
}

/* Tablet and Desktop */

@media (min-width: 600px) {

    .contact-info {
        flex-direction: row;
        gap: 15px;
    }

    .contact-separator {
        display: inline;
    }

    .help-submit-div button {
        width: auto;
    }

}

/* This page is reachable signed in or signed out. Signed out there is no side nav, so
   the shell's desktop offset would leave an empty 54px gutter on the left, and the
   header stays fixed at this width instead of being replaced by the nav, so the page
   needs the same top margin it gets on mobile. */
@media (min-width: 1000px) {

    body:has(#not-signed-in-header) #main-content {
        width: 100%;
        margin-left: 0;
    }

    body:has(#not-signed-in-header) main {
        margin-top: calc(50px + env(safe-area-inset-top));
    }

}