@charset "UTF-8";

/* ==========================================
   CONTACT CSS
   Noah Lab
========================================== */


/* ==========================================
   Contact Page
========================================== */

.contact-page {
    width: 100%;
}


/* ==========================================
   Contact Section
========================================== */

.contact-section {
    width: 100%;

    padding-block: var(--space-7);

    border-top: 1px solid var(--border-color);
}


/* ==========================================
   First Contact Section
========================================== */

.contact-section:first-of-type {
    border-top: 0;
}


/* ==========================================
   Contact Section Heading
========================================== */

.contact-section-heading {
    margin: 0 0 var(--space-5);

    font-size: var(--font-xl);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-tight);

    color: var(--text-main);
}


/* ==========================================
   Contact Text
========================================== */

.contact-text {
    display: flex;
    flex-direction: column;

    gap: var(--space-4);
}


.contact-text p {
    margin: 0;

    font-size: var(--font-sm);
    line-height: var(--line-height-base);

    color: var(--text-main);
}


/* ==========================================
   Contact Form
========================================== */

.contact-form {
    width: 100%;

    padding: var(--space-5);

    background-color: var(--bg-sub);

    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}


/* ==========================================
   Contact Form Fields
========================================== */

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


/* ==========================================
   Contact Form Field
========================================== */

.contact-form-field {
    display: flex;
    flex-direction: column;

    gap: var(--space-2);

    margin-bottom: var(--space-5);
}


.contact-form-field:last-child {
    margin-bottom: 0;
}


/* ==========================================
   Contact Form Label
========================================== */

.contact-form-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: var(--space-2);

    width: 100%;
    margin: 0;

    font-family: var(--font-sans);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);

    color: var(--text-main);
}


/* ==========================================
   Label Text
========================================== */

.contact-form-label-text {
    display: inline-flex;
    align-items: center;

    line-height: 1.4;
}


/* ==========================================
   Required
========================================== */

.contact-form-required {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    min-height: 20px;

    padding:
        3px
        var(--space-2);

    font-family: var(--font-sans);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1;

    color: var(--bg-card);

    background-color: var(--accent-beige);

    border-radius: var(--radius-full);
}


/* ==========================================
   Contact Form Input
========================================== */

.contact-form-input {
    display: block;

    width: 100%;
    min-height: 48px;

    padding:
        var(--space-3)
        var(--space-4);

    font-family: var(--font-sans);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-regular);
    line-height: 1.6;

    color: var(--text-main);

    background-color: var(--bg-card);

    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);

    outline: none;

    transition:
        border-color var(--transition-base),
        background-color var(--transition-base),
        box-shadow var(--transition-base);
}


/* ==========================================
   Contact Form Textarea
========================================== */

.contact-form-textarea {
    display: block;

    width: 100%;
    min-height: 180px;

    padding:
        var(--space-3)
        var(--space-4);

    font-family: var(--font-sans);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-regular);
    line-height: 1.7;

    color: var(--text-main);

    background-color: var(--bg-card);

    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);

    outline: none;

    resize: vertical;

    transition:
        border-color var(--transition-base),
        background-color var(--transition-base),
        box-shadow var(--transition-base);
}


/* ==========================================
   Placeholder
========================================== */

.contact-form-input::placeholder,
.contact-form-textarea::placeholder {
    color: var(--text-sub);

    opacity: 0.8;
}


/* ==========================================
   Focus
========================================== */

.contact-form-input:focus,
.contact-form-textarea:focus {
    background-color: var(--bg-main);

    border-color: var(--focus-color);

    box-shadow:
        0 0 0 3px
        rgba(125, 143, 163, 0.12);
}


/* ==========================================
   Acceptance / Agreement
========================================== */

.contact-form-agreement {
    width: 100%;

    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
}


/* ==========================================
   Acceptance
========================================== */

.contact-form-checkbox {
    display: flex;
    align-items: flex-start;

    width: 100%;

    margin: 0;
    padding: 0;

    font-family: var(--font-sans);
    font-size: var(--font-xs);
    line-height: 1.6;

    color: var(--text-sub);

    cursor: pointer;
}


/* ==========================================
   Contact Form 7 Acceptance Wrapper
========================================== */

.contact-form-checkbox .wpcf7-list-item {
    display: flex;
    align-items: flex-start;

    width: auto;

    margin: 0;
}


/* ==========================================
   Checkbox
========================================== */

.contact-form-checkbox input[type="checkbox"] {
    display: inline-block;

    flex: 0 0 16px;

    width: 16px;
    height: 16px;

    margin:
        2px
        var(--space-2)
        0
        0;

    padding: 0;

    accent-color: var(--focus-color);

    cursor: pointer;
}


/* ==========================================
   Checkbox Text
========================================== */

.contact-form-checkbox-text {
    display: inline;

    margin: 0;

    line-height: 1.6;
}


/* ==========================================
   Privacy Policy Link
========================================== */

.contact-form-checkbox-text a {
    display: inline;

    margin: 0;

    color: var(--text-main);

    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;

    transition:
        color var(--transition-fast),
        opacity var(--transition-fast);
}


.contact-form-checkbox-text a:hover {
    color: var(--accent-beige);

    opacity: 1;
}


/* ==========================================
   Submit Area
========================================== */

.contact-form-submit {
    display: flex;
    justify-content: center;

    margin-top: var(--space-6);
}


/* ==========================================
   Submit Button
========================================== */

.contact-form-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 160px;
    min-height: 48px;

    padding:
        var(--space-3)
        var(--space-6);

    font-family: var(--font-sans);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1;

    color: var(--bg-card);

    background-color: var(--focus-color);

    border: 1px solid var(--focus-color);
    border-radius: var(--radius-sm);

    cursor: pointer;

    transition:
        background-color var(--transition-base),
        border-color var(--transition-base),
        transform var(--transition-base),
        box-shadow var(--transition-base);
}


.contact-form-button:hover {
    color: var(--bg-card);

    background-color: var(--accent-blue);

    border-color: var(--accent-blue);

    box-shadow: var(--shadow-sm);

    transform: translateY(-1px);

    opacity: 1;
}


.contact-form-button:focus-visible {
    outline: 2px solid var(--focus-color);

    outline-offset: 3px;
}


.contact-form-button:active {
    transform: translateY(0);

    box-shadow: none;
}


/* ==========================================
   Contact Form 7 Validation
========================================== */


/* Validation Error */

.wpcf7-not-valid-tip {
    display: block;

    margin-top: var(--space-2);

    font-family: var(--font-sans);
    font-size: var(--font-xs);
    line-height: 1.6;

    color: var(--accent-beige);
}


/* Invalid Input */

.contact-form-input.wpcf7-not-valid,
.contact-form-textarea.wpcf7-not-valid {
    border-color: var(--accent-beige);
}


/* Validation Message */

.wpcf7-response-output {
    margin:
        var(--space-5)
        0 0;

    padding:
        var(--space-3)
        var(--space-4);

    font-family: var(--font-sans);
    font-size: var(--font-xs);
    line-height: 1.7;

    color: var(--text-main);

    background-color: var(--bg-card);

    border:
        1px solid
        var(--border-color);

    border-radius: var(--radius-sm);
}


/* ==========================================
   Contact Form 7 Spinner
========================================== */

.wpcf7-spinner {
    margin:
        0
        0
        0
        var(--space-2);
}


/* ==========================================
   Contact Notes
========================================== */

.contact-notes-list {
    display: grid;

    grid-template-columns: 1fr;

    gap: var(--space-4);

    margin: 0;
    padding: 0;

    list-style: none;
}


/* ==========================================
   Contact Note
========================================== */

.contact-note {
    padding: var(--space-5);

    background-color: var(--bg-card);

    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}


/* ==========================================
   Contact Note Title
========================================== */

.contact-note-title {
    margin: 0;

    font-size: var(--font-lg);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-tight);

    color: var(--text-main);
}


.contact-note-title::before {
    display: inline-block;

    width: 3px;
    height: 1em;

    margin-right: var(--space-2);

    vertical-align: -0.1em;

    background-color: var(--accent-beige);

    border-radius: var(--radius-full);

    content: "";
}


/* ==========================================
   Contact Note Text
========================================== */

.contact-note-text {
    margin: var(--space-3) 0 0;

    font-size: var(--font-sm);
    line-height: var(--line-height-base);

    color: var(--text-sub);
}


.contact-note-text + .contact-note-text {
    margin-top: var(--space-3);
}


/* ==========================================
   Contact Note Link
========================================== */

.contact-note-text a {
    color: var(--text-main);

    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;

    transition:
        color var(--transition-fast),
        opacity var(--transition-fast);
}


.contact-note-text a:hover {
    color: var(--accent-beige);

    opacity: 1;
}


/* ==========================================
   Contact Form 7 Accessibility
========================================== */

.contact-form .screen-reader-response {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* ==========================================
   PC
========================================== */

@media (min-width: 768px) {


    /* ======================================
       Contact Section
    ====================================== */

    .contact-section {
        padding-block: var(--space-8);
    }


    /* ======================================
       Contact Section Heading
    ====================================== */

    .contact-section-heading {
        margin-bottom: var(--space-6);

        font-size: var(--font-2xl);
    }


    /* ======================================
       Contact Text
    ====================================== */

    .contact-text p {
        font-size: var(--font-base);
    }


    /* ======================================
       Contact Form
    ====================================== */

    .contact-form {
        padding: var(--space-7);
    }


    /* ======================================
       Contact Form Field
    ====================================== */

    .contact-form-field {
        margin-bottom: var(--space-6);
    }


    /* ======================================
       Contact Form Label
    ====================================== */

    .contact-form-label {
        font-size: var(--font-base);
    }


    /* ======================================
       Contact Form Input
    ====================================== */

    .contact-form-input,
    .contact-form-textarea {
        font-size: var(--font-base);
    }


    /* ======================================
       Contact Form Textarea
    ====================================== */

    .contact-form-textarea {
        min-height: 220px;
    }


    /* ======================================
       Contact Form Agreement
    ====================================== */

    .contact-form-agreement {
        margin-top: var(--space-7);
        margin-bottom: var(--space-7);
    }


    /* ======================================
       Submit
    ====================================== */

    .contact-form-submit {
        margin-top: var(--space-7);
    }


    /* ======================================
       Contact Notes
    ====================================== */

    .contact-notes-list {
        grid-template-columns: repeat(3, 1fr);

        gap: var(--space-5);
    }


    /* ======================================
       Contact Note
    ====================================== */

    .contact-note {
        padding: var(--space-6);
    }


    /* ======================================
       Contact Note Text
    ====================================== */

    .contact-note-text {
        font-size: var(--font-base);
    }

}