/*==========================================================================
   CONTACT
   Desktop values measured off ContactBlueprint.pdf, same convention as the
   rest of the site: the 8001px export is a 1920px design, so a measurement
   of N export px is N/4.167 CSS px and N/8001 of the page width.

   Two sections at 1920:
     1  "Get in touch!"   86 - 344.7    white + watermark
     2  the form          344.7 - 938   #287492
==========================================================================*/

/* Matches the last section, so the strip below it on a short page does
   not show as bare body. See the note on `body` in style.css. */
body { background: var(--teal); }   /* the collaborate section */

/*==========================================================================
   1. "Get in touch!"
==========================================================================*/
/* Mobile follows ContactMobile.png, written in --u — one percent of the
   design width — the same as the other mobile layouts. */
.get-in-touch {
    display: grid;
    place-items: center;
    padding: calc(var(--u) * 10.2) calc(var(--u) * 10.93)
             calc(var(--u) * 11.09);
}

.get-in-touch__heading {
    margin: 0;
    font-size: max(1.9rem, calc(var(--u) * 11.3));
    font-weight: 600;
    line-height: 1;
    text-align: center;
    color: var(--blue);
}

/*==========================================================================
   2. Let's collaborate + the form
==========================================================================*/
.collaborate {
    display: grid;
    gap: 0;
    padding: calc(var(--u) * 10.32) calc(var(--u) * 10.93)
             max(calc(var(--u) * 4.84), 1.25rem);
    background: var(--teal);
    color: var(--white);
}

/* The reference lines the heading, the paragraph, the two links and the
   placeholder text inside the fields all up on one edge. A field's own inner
   padding sets its text 2.99% of the page in from the box, so the text block
   above carries the same offset and the whole column reads as one edge. */
.collaborate__intro { padding-left: calc(var(--u) * 2.4); }

.collaborate__heading {
    margin: 0 0 calc(var(--u) * 5.16);
    font-size: max(1.15rem, calc(var(--u) * 7.6));
    font-weight: 900;
    line-height: 1.15;
}

.collaborate__blurb {
    margin: 0;
    font-size: max(0.68rem, calc(var(--u) * 3.45));
    font-weight: 400;
    line-height: 1.988;
}

/*--------------------------------------------------------------------------
   Resume + LinkedIn. Icon on the left here, unlike the About page where the
   same pair sits icon-right.
--------------------------------------------------------------------------*/
/* Mobile: the two sit side by side in one row, as the reference has them. */
.collaborate__links {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: calc(var(--u) * 6.93);   /* 6.93% of the page, as the reference */
    margin: calc(var(--u) * 7.25) 0 0;
    padding: 0;
    list-style: none;
}

.collaborate__links a {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 2.33);
    color: var(--white);
}

.collaborate__links img {
    flex: none;
    width: calc(var(--u) * 8.16);
    height: auto;
}

/* Sized off the reference, which is what lets the pair sit on one line down
   to a 320px screen. */
.collaborate__links span {
    font-size: max(0.62rem, calc(var(--u) * 2.93));
    line-height: 1.0;
}

.collaborate__links a:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 4px;
}

@media (hover: hover) {
    .collaborate__links a { transition: transform 0.2s var(--ease); }
    .collaborate__links a:hover { transform: translateY(-2px); }
}

/*--------------------------------------------------------------------------
   The form
--------------------------------------------------------------------------*/
.contact-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--u) * 2.20) calc(var(--u) * 4.07);
    margin-top: calc(var(--u) * 11.05);
}

.contact-form__field {
    margin: 0;
}

.contact-form__field--full,
.contact-form__actions,
.contact-form__status {
    grid-column: 1 / -1;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    /* Matches the offset the text block above carries, so a field's own
       text lines up with the heading and the paragraph. */
    padding: 0.28em calc(var(--u) * 2.4 - 2px);
    font: inherit;
    font-size: max(1rem, calc(var(--u) * 3.2));
    color: var(--teal);
    background: var(--white);
    border: 2px solid transparent;
    border-radius: 0.42vw;          /* ~8px at 1920 */
    border-radius: max(0.4rem, 0.42vw);
}

.contact-form textarea {
    resize: vertical;
    height: calc(var(--u) * 31.11);
    min-height: 6rem;
}

.contact-form__field--full { margin-top: calc(var(--u) * 0.60); }

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--teal);
    opacity: 1;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
    outline: none;
    border-color: var(--navy);
}

/* Flagged only once the field has actually been left in a bad state, so the
   form does not turn red while someone is still filling it in. */
.contact-form input[aria-invalid="true"] {
    border-color: var(--red);
}

/* Mobile: the button runs the full width of the form, in the darker navy
   with its label centred, as the reference draws it. */
.contact-form__actions {
    margin: calc(var(--u) * 2.20) 0 0;
    text-align: center;
}

.contact-form__submit {
    width: 100%;
    padding: 0.42em 1.9em;
    font: inherit;
    font-size: max(0.95rem, calc(var(--u) * 3.6));
    font-weight: 800;
    color: var(--white);
    background: var(--navy);
    border: 2px solid var(--navy);
    border-radius: max(0.4rem, 0.42vw);
    cursor: pointer;
    transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

@media (hover: hover) {
    .contact-form__submit:hover {
        color: var(--navy);
        background: var(--white);
        border-color: var(--white);
    }
}

.contact-form__submit:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 3px;
}

.contact-form__status {
    margin: 0.75rem 0 0;
    min-height: 1.4em;
    font-size: clamp(0.85rem, 3.4vw, 1rem);
    line-height: 1.4;
}

.contact-form__status[data-state="error"] { font-weight: 800; }

/*==========================================================================
   DESKTOP — the blueprint layout
   Held to 64em like the rest of the site: the blueprint is a 1920px design
   and its 18px body copy would land near 7px at 768.
==========================================================================*/
@media (min-width: 64em) {

    /*------------------------------------------------ 1. Get in touch --*/
    .get-in-touch {
        padding: 0 0 var(--divider-half);
        min-height: 13.47vw;        /* 258.7px at 1920 */
        align-content: center;
    }

    .get-in-touch__heading {
        font-size: 6.13vw;          /* ~117.7px at 1920 */
        transform: translateY(0.18vw);
    }

    /*---------------------------------------------- 2. Collaborate ------*/
    .collaborate {
        /* Two tracks. The first is a share of the CONTENT box (1920 less
           the 207.6px indent), not of the page, which is what puts the form
           at x=669.5. */
        grid-template-columns: 26.97% minmax(0, 1fr);
        align-items: start;
        gap: 0;
        padding: calc(var(--divider-half) + 4.25vw) 0
                 max(1.5vw, var(--footer-badge-clear)) 10.81%;
        min-height: 30.9vw;         /* 593.3px at 1920 */
    }

    .collaborate__intro {
        padding-left: 0;
        display: flex;
        flex-direction: column;
        /* The blueprint's 367px column, but not below 15rem — the body
           copy hits its size floor around 1300 and a narrower column just
           adds lines, which pushes the links off the message box. */
        max-width: max(15rem, 19.11vw);
        /* Down to where the message box ends, so the two links can sit on
           its bottom edge. min- rather than a fixed height, so a paragraph
           that wraps longer at some width pushes them down instead of
           overlapping them. */
        min-height: 18.26vw;        /* the message box's bottom, y=806.9 */
    }

    .collaborate__heading {
        font-size: 2.03vw;          /* ~39px at 1920 */
        margin: 0 0 0.62em;
    }

    .collaborate__blurb {
        font-size: max(0.8rem, 0.93vw);
        line-height: 1.93;          /* 34.5px of leading at 1920 */
    }

    .collaborate__links {
        display: grid;
        margin: auto 0 0;
        /* Left edge shared with the heading and the paragraph above. */
        justify-content: start;
        justify-items: start;
        gap: 0.80vw;                /* icon centres 51.6px apart at 1920 */
        margin-top: auto;           /* bottom-aligned with the message box */
    }

    .collaborate__links a { gap: 1.18vw; }

    .collaborate__links img {
        width: max(1.9rem, 1.8vw);  /* 34.5px at 1920 — its native size */
    }

    .collaborate__links span {
        font-size: max(0.75rem, 0.9vw);
        line-height: 1.05;
    }

    /* The form sits in the third track, starting at x=669.5. */
    .contact-form {
        grid-column: 2;
        margin-top: 0.47vw;         /* fields sit 9px below the heading */
        gap: 0;
        grid-template-columns: repeat(2, 14.39vw);   /* 276.2px each */
        justify-content: start;
        column-gap: 1.61vw;         /* 31px at 1920 */
        row-gap: 0.9vw;             /* 17.3px at 1920 */
    }

    .contact-form input,
    .contact-form textarea {
        font-size: max(0.8rem, 0.94vw);
        padding: 0 1.24em;          /* text starts 22.3px in at 1920 */
    }

    .contact-form input {
        height: 1.79vw;             /* 34.3px at 1920 */
    }

    .contact-form textarea {
        padding-block: 0.6em;
    }

    .contact-form textarea {
        /* The blueprint's 233.7px, with a floor so the box does not shrink
           to something cramped on a small laptop. */
        height: auto;
        min-height: max(9.5rem, 12.17vw);
    }

    .contact-form__field--full {
        margin-top: 0.24vw;         /* 21.8px below the row above */
    }

    .contact-form__actions {
        margin: 0.5rem 0 0;
        text-align: right;
    }

    .contact-form__submit {
        width: auto;
        padding: 0.6em 1.9em;
        font-size: max(0.8rem, 0.94vw);
        color: var(--teal);
        background: var(--white);
        border-color: var(--white);
    }
}

/* The desktop button rests white, so its hover is the other way round. */
@media (min-width: 64em) and (hover: hover) {
    .contact-form__submit:hover {
        color: var(--white);
        background: var(--navy);
        border-color: var(--navy);
    }
}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.contact-form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}