/* ========================================
   CONTACT PAGE — dark mode.
   Deep-navy page, royal-blue form frame,
   wave-blue info panel.
   (League Spartan, footer stays site-white)
   ======================================== */

.contact-page {
    min-height: 0;
    background: #0f1330;
    font-family:
        'League Spartan',
        sans-serif;
    color: #e8ecf5;
}

html:has(body.contact-page) {
    background: #ffffff;
}

/* ---------- Top bar (same as siblings) ---------- */

.contact-topbar {
    background: #000000;
    padding: .8rem 1rem;
}

.contact-topbar-inner {
    width: min(1020px, 94vw);
    margin: 0 auto;
}

.contact-back-link {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .5px;
}

.contact-back-link:hover {
    text-decoration: underline;
}

/* ---------- Layout ---------- */

.contact-main {
    width: min(1020px, 94vw);
    margin: 0 auto;
    padding: 2.5rem 0 3rem;
}

.contact-intro {
    margin: 0 0 2rem;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #c9d2e8;
    max-width: 70ch;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

/* ---------- Form ----------
   Dark navy panel in a royal-blue frame,
   matching opencode/form.png reference. */

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;

    background: #232a52;

    border: 0;
    border-radius: 8px;

    padding: 1.5rem;

    color-scheme: dark;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .45);
}

.contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
}

.contact-field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    min-width: 0;
}

.contact-field label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #a9b2cf;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    font: inherit;
    font-size: 1rem;
    color: #ffffff;

    padding: .6rem .95rem;

    border: 0;
    border-radius: 8px;
    background: #141839;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: #8a93b2;
}

.contact-field select:invalid {
    color: #8a93b2;
}

.contact-field textarea {
    min-height: 165px;
    resize: vertical;
}

.contact-field input:focus-visible,
.contact-field select:focus-visible,
.contact-field textarea:focus-visible {
    outline: 3px solid #0ea5e9;
    outline-offset: 2px;
}

.contact-error {
    margin: 0;
    font-size: .9rem;
    font-weight: 700;
    color: #ff8fa3;
}

.contact-error[hidden] {
    display: none;
}

.contact-submit {
    align-self: flex-start;

    font: inherit;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;

    color: #ffffff;
    background: #1e5be0;

    border: 0;
    border-radius: 999px;
    padding: .8rem 2.2rem;

    cursor: pointer;

    box-shadow:
        0 8px 24px rgba(30, 91, 224, .45);

    transition:
        background .25s ease,
        transform .25s ease;
}

.contact-submit:hover {
    background: #3b74f2;
    transform: translateY(-2px);
}

.contact-note {
    margin: 0;
    font-size: .95rem;
    line-height: 1.6;
    color: #d7dce8;
    font-weight: 700;
}

.contact-note[hidden] {
    display: none;
}

/* ---------- Info panel ----------
   Same blue as the artists header (#245f9c),
   plain drop shadow (no glow). */

.contact-info {
    background: #245f9c;
    color: #ffffff;
    border-radius: 16px;
    padding: 1.75rem;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, .45);
}

.contact-info h2 {
    margin: 0 0 1rem;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.1;
}

.contact-info p {
    margin: 0 0 1rem;
    font-size: 1rem;
    line-height: 1.6;
}

.contact-info a {
    color: #ffffff;
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .55);
    text-underline-offset: 3px;
}

.contact-info a:hover {
    text-decoration-color: #ffffff;
}

.contact-social {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, .35);

    display: flex;
    flex-direction: column;
    gap: .6rem;
}

/* ---------- Halftone transition ----------
   Navy strip (continues the dark page), white
   dots growing top-to-bottom until they merge
   into the white footer. Dot sizing lives in
   images/contact-halftone.svg. */

.contact-halftone {
    position: relative;

    height:
        clamp(
            145px,
            20vw,
            230px
        );

    width: 100%;

    overflow: hidden;

    background: #0f1330;

    /*
     * Pull the white footer 1px up over the
     * strip so no hairline seam can ever show
     * at the joint (subpixel rounding, scaling).
     */

    margin-bottom: -1px;
}

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

    position: absolute;

    inset: 0;

    background-image:
        url("../images/contact-halftone-v2.svg?v=1");

    background-size:
        auto 100%;

    background-repeat:
        repeat-x;

    background-position:
        top center;
}

/*
 * Soft blend gradient: feathers the strip into
 * the dark page above and the white footer below
 * so page, dots, and footer read as one flow.
 */

.contact-halftone::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            transparent 70%,
            #ffffff 100%
        );

    pointer-events: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 800px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-submit {
        align-self: stretch;
        text-align: center;
    }
}

@media (max-width: 600px) {
    .contact-row {
        grid-template-columns: 1fr;
    }

    .contact-form {
        padding: 1.1rem;
    }
}