/*
|--------------------------------------------------------------------------
| CyberDojo - Contact Page
|--------------------------------------------------------------------------
|
| Public contact page styling.
|
| Handles:
|
| - Contact hero
| - Contact information cards
| - Contact form layout
| - Response information
| - Form controls
| - Character counter
| - Submit/loading state
| - Success/error alerts
| - Dojo location cards
| - Google map
| - Responsive layouts
|
*/


/*
|--------------------------------------------------------------------------
| Sections
|--------------------------------------------------------------------------
*/

.contact-hero,
.contact-information,
.contact-form-section,
.contact-locations {
    position: relative;

    width: 100%;

    padding:
        var(--space-20)
        0;
}


.contact-hero,
.contact-form-section {
    background:
        var(--bg-primary);
}


.contact-information,
.contact-locations {
    background:
        var(--bg-secondary);
}


/*
|--------------------------------------------------------------------------
| Container
|--------------------------------------------------------------------------
*/

.contact-container {
    width:
        min(
            var(--container-width),
            calc(
                100%
                - (
                    var(--container-padding)
                    * 2
                )
            )
        );

    margin:
        0
        auto;
}


/*
|--------------------------------------------------------------------------
| Section Eyebrow
|--------------------------------------------------------------------------
*/

.contact-page
.section-eyebrow {
    display: inline-flex;

    align-items: center;

    gap:
        var(--space-3);

    color:
        var(--accent);

    font-size:
        var(--text-sm);

    font-weight:
        var(--font-black);

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.contact-page
.section-eyebrow::before {
    content: "";

    width: 30px;
    height: 3px;

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

    background:
        var(--accent);
}


/*
|--------------------------------------------------------------------------
| Contact Hero
|--------------------------------------------------------------------------
*/

.contact-hero {
    overflow: hidden;
}


.contact-hero::before {
    content: "";

    position: absolute;

    top: -180px;
    right: -120px;

    width: 460px;
    height: 460px;

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

    background:
        radial-gradient(
            circle,
            rgba(
                var(--accent-rgb),
                0.10
            ),
            transparent 70%
        );

    pointer-events: none;
}


.contact-hero-content {
    position: relative;

    z-index: 1;

    max-width:
        800px;
}


.contact-hero-content h1 {
    margin:
        var(--space-3)
        0
        var(--space-5);

    color:
        var(--text-primary);

    font-size:
        clamp(
            2.6rem,
            5vw,
            4.7rem
        );

    font-weight:
        var(--font-black);

    line-height:
        0.98;

    letter-spacing:
        -0.045em;
}


.contact-hero-content h1 span {
    color:
        var(--accent);
}


.contact-hero-content p {
    max-width:
        720px;

    margin: 0;

    color:
        var(--text-muted);

    font-size:
        var(--text-lg);

    line-height:
        var(--leading-relaxed);
}


/*
|--------------------------------------------------------------------------
| Contact Information Grid
|--------------------------------------------------------------------------
*/

.contact-info-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

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


/*
|--------------------------------------------------------------------------
| Contact Information Card
|--------------------------------------------------------------------------
*/

.contact-info-card {
    display: block;

    min-width: 0;

    padding:
        var(--space-6);

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

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

    background:
        linear-gradient(
            145deg,
            var(--bg-card),
            rgba(
                var(--accent-rgb),
                0.02
            )
        );

    color:
        var(--text-primary);

    text-align:
        center;

    text-decoration: none;

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

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


a.contact-info-card:hover {
    border-color:
        var(--border-hover);

    transform:
        translateY(-4px);

    box-shadow:
        var(--shadow-accent);
}


/*
|--------------------------------------------------------------------------
| Contact Information Icon
|--------------------------------------------------------------------------
*/

.contact-info-icon {
    display: grid;

    place-items: center;

    width: 54px;
    height: 54px;

    margin:
        0
        auto
        var(--space-4);

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

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

    background:
        var(--accent-bg);

    color:
        var(--accent);

    font-size:
        1.15rem;
}


/*
|--------------------------------------------------------------------------
| Contact Information Text
|--------------------------------------------------------------------------
*/

.contact-info-label,
.contact-info-card strong,
.contact-info-card small {
    display: block;
}


.contact-info-label {
    color:
        var(--accent);

    font-size:
        var(--text-xs);

    font-weight:
        var(--font-black);

    letter-spacing:
        0.05em;

    text-transform:
        uppercase;
}


.contact-info-card strong {
    margin-top:
        var(--space-2);

    overflow-wrap:
        anywhere;

    color:
        var(--text-primary);

    font-size:
        var(--text-base);

    font-weight:
        var(--font-extrabold);
}


.contact-info-card small {
    margin-top:
        var(--space-2);

    color:
        var(--text-muted);

    font-size:
        var(--text-xs);

    line-height:
        1.5;
}


/*
|--------------------------------------------------------------------------
| Contact Form Grid
|--------------------------------------------------------------------------
*/

.contact-grid {
    display: grid;

    grid-template-columns:
        minmax(
            0,
            0.8fr
        )
        minmax(
            0,
            1.2fr
        );

    gap:
        var(--space-12);

    align-items:
        start;
}


/*
|--------------------------------------------------------------------------
| Form Intro
|--------------------------------------------------------------------------
*/

.contact-form-intro {
    min-width: 0;
}


.contact-form-intro h2 {
    margin:
        var(--space-3)
        0
        var(--space-4);

    color:
        var(--text-primary);

    font-size:
        clamp(
            2rem,
            4vw,
            3.2rem
        );

    font-weight:
        var(--font-black);

    line-height:
        1.08;
}


.contact-form-intro h2 span {
    color:
        var(--accent);
}


.contact-form-intro > p {
    max-width:
        560px;

    margin: 0;

    color:
        var(--text-muted);

    line-height:
        var(--leading-relaxed);
}


/*
|--------------------------------------------------------------------------
| Contact Response Information
|--------------------------------------------------------------------------
*/

.contact-response {
    display: flex;

    align-items: flex-start;

    gap:
        var(--space-3);

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

    padding:
        var(--space-4);

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

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

    background:
        rgba(
            255,
            255,
            255,
            0.018
        );
}


.contact-response-icon {
    display: grid;

    place-items: center;

    width: 40px;
    height: 40px;

    flex:
        0
        0
        40px;

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

    background:
        var(--accent-bg);

    color:
        var(--accent);

    font-size:
        1rem;
}


.contact-response strong,
.contact-response span {
    display: block;
}


.contact-response strong {
    color:
        var(--text-primary);

    font-size:
        var(--text-sm);

    font-weight:
        var(--font-extrabold);
}


.contact-response span {
    margin-top:
        4px;

    color:
        var(--text-muted);

    font-size:
        var(--text-xs);

    line-height:
        1.55;
}


/*
|--------------------------------------------------------------------------
| Contact Form Card
|--------------------------------------------------------------------------
*/

.contact-form-card {
    min-width: 0;

    padding:
        var(--space-7, 28px);

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

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

    background:
        linear-gradient(
            145deg,
            var(--bg-card),
            rgba(
                var(--accent-rgb),
                0.015
            )
        );

    box-shadow:
        var(--shadow-md);
}


/*
|--------------------------------------------------------------------------
| Contact Form
|--------------------------------------------------------------------------
*/

.contact-form {
    display: grid;

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


/*
|--------------------------------------------------------------------------
| Form Group
|--------------------------------------------------------------------------
*/

.form-group {
    min-width: 0;
}


.form-group label {
    display: block;

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

    color:
        var(--text-secondary);

    font-size:
        var(--text-sm);

    font-weight:
        var(--font-bold);
}


.required {
    color:
        var(--accent);
}


/*
|--------------------------------------------------------------------------
| Form Control Wrapper
|--------------------------------------------------------------------------
*/

.form-control-wrapper {
    position: relative;

    min-width: 0;
}


/*
|--------------------------------------------------------------------------
| Form Icon
|--------------------------------------------------------------------------
*/

.form-control-wrapper > i {
    position: absolute;

    top: 50%;
    left: 15px;

    z-index: 1;

    transform:
        translateY(-50%);

    color:
        var(--accent);

    font-size:
        0.95rem;

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| Inputs / Textarea
|--------------------------------------------------------------------------
*/

.form-control-wrapper input,
.form-control-wrapper textarea {
    width: 100%;

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

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

    background:
        var(--input-bg);

    color:
        var(--input-text);

    font-family:
        var(--font-primary);

    font-size:
        var(--text-sm);

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


.form-control-wrapper input {
    min-height:
        var(--input-height);

    padding:
        0
        14px
        0
        44px;
}


.form-control-wrapper textarea {
    min-height:
        170px;

    padding:
        15px
        14px
        15px
        44px;

    resize:
        vertical;

    line-height:
        1.6;
}


/*
|--------------------------------------------------------------------------
| Placeholder
|--------------------------------------------------------------------------
*/

.form-control-wrapper input::placeholder,
.form-control-wrapper textarea::placeholder {
    color:
        var(--input-placeholder);

    opacity: 1;
}


/*
|--------------------------------------------------------------------------
| Textarea Icon
|--------------------------------------------------------------------------
*/

.form-textarea-wrapper > i {
    top: 17px;

    transform:
        none;
}


/*
|--------------------------------------------------------------------------
| Form Focus
|--------------------------------------------------------------------------
*/

.form-control-wrapper input:focus,
.form-control-wrapper textarea:focus {
    outline: 0;

    border-color:
        var(--accent);

    background:
        var(--bg-elevated);

    box-shadow:
        0
        0
        0
        3px
        var(--accent-bg);
}


/*
|--------------------------------------------------------------------------
| Autofill
|--------------------------------------------------------------------------
*/

.form-control-wrapper input:-webkit-autofill,
.form-control-wrapper input:-webkit-autofill:hover,
.form-control-wrapper input:-webkit-autofill:focus {
    -webkit-text-fill-color:
        var(--text-primary);

    box-shadow:
        0
        0
        0
        1000px
        var(--input-bg)
        inset;

    transition:
        background-color
        9999s
        ease-in-out
        0s;
}


/*
|--------------------------------------------------------------------------
| Character Counter
|--------------------------------------------------------------------------
*/

.contact-character-counter {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap:
        3px;

    margin-top:
        7px;

    color:
        var(--text-subtle);

    font-size:
        0.7rem;

    font-weight:
        var(--font-medium);
}


.contact-character-counter
span:first-child {
    color:
        var(--text-muted);
}


/*
|--------------------------------------------------------------------------
| Submit Button
|--------------------------------------------------------------------------
*/

.contact-submit {
    position: relative;

    width: 100%;

    min-height:
        48px;
}


/*
|--------------------------------------------------------------------------
| Loading State
|--------------------------------------------------------------------------
*/

.contact-submit.is-loading,
.contact-submit:disabled {
    opacity:
        0.72;

    cursor:
        wait;

    pointer-events:
        none;
}


.contact-submit.is-loading i {
    animation:
        contact-send-pulse
        1s
        ease-in-out
        infinite;
}


@keyframes contact-send-pulse {

    0%,
    100% {
        opacity: 0.45;

        transform:
            translateX(0);
    }

    50% {
        opacity: 1;

        transform:
            translateX(3px);
    }

}


/*
|--------------------------------------------------------------------------
| Form Alerts
|--------------------------------------------------------------------------
*/

.form-alert {
    display: flex;

    align-items: flex-start;

    gap:
        var(--space-3);

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

    padding:
        var(--space-4);

    border:
        1px solid
        transparent;

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

    font-size:
        var(--text-sm);

    line-height:
        1.55;
}


.form-alert > i {
    flex-shrink: 0;

    margin-top:
        2px;

    font-size:
        1rem;
}


/*
|--------------------------------------------------------------------------
| Success Alert
|--------------------------------------------------------------------------
*/

.form-alert-success {
    border-color:
        rgba(
            var(--success-rgb),
            0.18
        );

    background:
        rgba(
            var(--success-rgb),
            0.08
        );

    color:
        var(--success);
}


/*
|--------------------------------------------------------------------------
| Error Alert
|--------------------------------------------------------------------------
*/

.form-alert-error {
    border-color:
        rgba(
            var(--danger-rgb),
            0.18
        );

    background:
        rgba(
            var(--danger-rgb),
            0.08
        );

    color:
        var(--danger);
}


/*
|--------------------------------------------------------------------------
| Locations Heading
|--------------------------------------------------------------------------
*/

.contact-section-heading {
    max-width:
        760px;

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


.contact-section-heading h2 {
    margin:
        var(--space-3)
        0
        var(--space-4);

    color:
        var(--text-primary);

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    font-weight:
        var(--font-black);

    line-height:
        1.08;
}


.contact-section-heading h2 span {
    color:
        var(--accent);
}


.contact-section-heading p {
    margin: 0;

    color:
        var(--text-muted);

    line-height:
        var(--leading-relaxed);
}


/*
|--------------------------------------------------------------------------
| Location Grid
|--------------------------------------------------------------------------
*/

.contact-location-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

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


/*
|--------------------------------------------------------------------------
| Location Card
|--------------------------------------------------------------------------
*/

.contact-location-card {
    display: flex;

    align-items: flex-start;

    gap:
        var(--space-4);

    min-width: 0;

    padding:
        var(--space-6);

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

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

    background:
        var(--bg-card);

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

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


.contact-location-card:hover {
    border-color:
        var(--border-hover);

    transform:
        translateY(-3px);

    box-shadow:
        var(--shadow-accent);
}


/*
|--------------------------------------------------------------------------
| Location Icon
|--------------------------------------------------------------------------
*/

.contact-location-icon {
    display: grid;

    place-items: center;

    width: 44px;
    height: 44px;

    flex:
        0
        0
        44px;

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

    background:
        var(--accent-bg);

    color:
        var(--accent);

    font-size:
        1.15rem;
}


/*
|--------------------------------------------------------------------------
| Location Text
|--------------------------------------------------------------------------
*/

.contact-location-card span {
    color:
        var(--accent);

    font-size:
        var(--text-xs);

    font-weight:
        var(--font-black);

    letter-spacing:
        0.05em;

    text-transform:
        uppercase;
}


.contact-location-card h3 {
    margin:
        var(--space-2)
        0
        0;

    color:
        var(--text-primary);

    font-size:
        var(--text-lg);

    font-weight:
        var(--font-extrabold);

    line-height:
        1.25;
}


.contact-location-card p {
    margin:
        var(--space-2)
        0
        0;

    color:
        var(--text-muted);

    font-size:
        var(--text-sm);

    line-height:
        1.5;
}


/*
|--------------------------------------------------------------------------
| Map
|--------------------------------------------------------------------------
*/

.contact-map {
    margin-top:
        var(--space-6);

    overflow:
        hidden;

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

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

    background:
        var(--bg-card);

    box-shadow:
        var(--shadow-md);
}


.contact-map iframe {
    display: block;

    width: 100%;

    min-height:
        430px;

    border: 0;
}


/*
|--------------------------------------------------------------------------
| Page Ready
|--------------------------------------------------------------------------
*/

.contact-page-ready
.contact-form-card {
    visibility:
        visible;
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .contact-hero,
    .contact-information,
    .contact-form-section,
    .contact-locations {
        padding:
            var(--space-16)
            0;
    }


    .contact-grid {
        grid-template-columns:
            1fr;

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

}


/*
|--------------------------------------------------------------------------
| Smaller Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 850px) {

    .contact-info-grid,
    .contact-location-grid {
        grid-template-columns:
            1fr;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {

    .contact-hero,
    .contact-information,
    .contact-form-section,
    .contact-locations {
        padding:
            var(--space-12)
            0;
    }


    .contact-hero-content h1 {
        font-size:
            clamp(
                2.3rem,
                12vw,
                3.3rem
            );
    }


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


    .contact-info-card {
        padding:
            var(--space-5);
    }


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


    .contact-location-card {
        padding:
            var(--space-5);
    }


    .contact-map iframe {
        min-height:
            340px;
    }

}


/*
|--------------------------------------------------------------------------
| Very Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 430px) {

    .contact-response {
        padding:
            var(--space-3);
    }


    .contact-response-icon {
        width: 36px;
        height: 36px;

        flex-basis:
            36px;
    }


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


    .form-control-wrapper input {
        min-height:
            46px;
    }


    .contact-location-card {
        gap:
            var(--space-3);
    }


    .contact-location-icon {
        width: 40px;
        height: 40px;

        flex-basis:
            40px;
    }

}


/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    .contact-info-card,
    .contact-location-card,
    .form-control-wrapper input,
    .form-control-wrapper textarea {
        transition:
            none;
    }


    .contact-submit.is-loading i {
        animation:
            none;
    }

}