/* contact.css — the contact page in the sky look. The desk scene sits at the
   bottom with its base on the charcoal footer, and a small contact form is laid
   over the monitor screen, tilted to match the screen's 3/4 perspective.

   Everything about the on-screen form is a variable on .scene below — nudge those
   to line the form up with the monitor in contact-page.jpg. */

.contact {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: min(1440px, 100vw - 40px);
    margin: 0 auto 12rem;
    padding: clamp(1.75rem, 4vw, 3.5rem) 0;   /* vertical only — sides bleed to the card edge */
    background: #fff;
    border: 2px solid #000;             /* comic card, same as About's .page */
    border-radius: 18px;
    box-shadow: 5px 5px 0 #000;
    overflow: hidden;                   /* clip the full-width scene to the rounded corners */
    text-align: center;
}
.contact h1 {
    color: #00f;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    margin: 0;
    text-shadow: 0 2px 0 #fff, 0 0 22px rgba(255, 247, 224, .95);
}

/* Two-column contact details under the heading. Also adds height that pushes the
   desk scene down off the sky band. */
.contact__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 5vw, 64px);
    max-width: 820px;
    margin: 1.5rem auto 2.5rem;
    text-align: left;
}
.contact__cols h2 {
    color: #00f;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    margin: 0 0 .5rem;
}
.contact__cols a {
    color: #00f;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.15rem;
}
.contact__cols a:hover { text-decoration: underline; }
.contact__address {
    font-style: normal;          /* <address> defaults to italic */
    line-height: 1.6;
    color: #15243a;
}

/* The desk scene. Caps at the art's native 1000px; the form is positioned as a
   percentage of this box and sized in container units, so it scales with the art. */
.scene {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;          /* clips the hero when the inner is zoomed on mobile */

    /* ---- form box over the monitor screen; tune to fit ---- */
    --screen-left: 8%;         /* distance from the art's left edge */
    --screen-top: 10%;         /* distance from the top */
    --screen-width: 53%;       /* width of the form box */
    --screen-height: 35%;      /* height of the form box */

    /* ---- video takeover box = the full monitor screen (red area); tune to fit ---- */
    --video-left: 4%;
    --video-top: 5%;
    --video-width: 61%;
    --video-height: 45%;
}
/* The form is positioned against this inner box, so scaling it on mobile scales
   the form with the monitor. Left-anchored, so the hero overflows off the right. */
.scene__inner {
    position: relative;
    width: 100%;
    container-type: inline-size;
}
.scene__art { display: block; width: 100%; height: auto; }

.screen-form {
    position: absolute;
    left: var(--screen-left);
    top: var(--screen-top);
    width: var(--screen-width);
    height: var(--screen-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.6cqw;
}

/* Title row on the monitor (title left, Send button right), above the form. */
.screen-form__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.6cqw;
}
.screen-form__title {
    margin: 0;
    text-align: left;
    font-family: 'Bangers', system-ui, cursive;
    font-size: 3.6cqw;
    letter-spacing: .5px;
    line-height: 1;
    color: #00f;
}

/* Labels kept for screen readers but hidden visually (placeholders carry the UI). */
.screen-form label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.screen-form input,
.screen-form textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 1.7cqw;
    color: #15243a;
    background: rgba(255, 255, 255, .92);
    border: 0.15cqw solid #8aa0bd;
    border-radius: 0.4cqw;
    padding: 1.2cqw 1.6cqw;
}
.screen-form textarea { flex: 1 1 auto; min-height: 11cqw; resize: none; }
.screen-form input:focus,
.screen-form textarea:focus {
    outline: 0.18cqw solid #00f;       /* royal-blue focus, not the UA black */
    border-color: #00f;
}

/* Name + email share one line, freeing height for the message box. */
.screen-form__row { display: flex; gap: 1.6cqw; }
.screen-form__row input { flex: 1 1 0; width: auto; min-width: 0; }

/* Postcard — FROM address, a note, and the TO address overlaid on the postcard art
   (postcard-landscape.jpg above 640px; postcard-portrait.jpg below, swapped via
   <picture> — see the mobile block). Same technique as the monitor form; regions are
   tunable per-orientation variables. */
.postcard {
    position: relative;
    container-type: inline-size;
    width: min(860px, 100% - 3.5rem);   /* re-inset from the card edges (card L/R padding removed) */
    margin: 1rem auto 2.5rem;

    --from-name-left: 14%; --from-name-top: 6%;   /* "Herosite" only, beside the printed FROM: */
    --from-left: 6%;   --from-top: 13%;   --from-width: 50%;
    --msg-left: 6%;    --msg-top: 32%;    --msg-width: 40%;
    --to-left: 55%;    --to-top: 53%;     --to-width: 38%;
}
.postcard__art { display: block; width: 100%; height: auto; }
.postcard__from,
.postcard__from-name,
.postcard__to,
.postcard__msg {
    position: absolute;
    text-align: left;
    font-style: normal;
    color: #15243a;
    font-family: "Shadows Into Light Two", cursive;   /* handwritten postcard ink */
}
.postcard__from-name {
    left: var(--from-name-left); top: var(--from-name-top);
    margin: 0;
    font-size: 3cqw; font-weight: 700;                /* bold, beside "FROM:" */
}
.postcard__from {
    left: var(--from-left); top: var(--from-top); width: var(--from-width);
    font-size: 3cqw; line-height: 1.55;
}
.postcard__to {
    left: var(--to-left); top: var(--to-top); width: var(--to-width);
    font-size: 3cqw; line-height: 1.7;
}
.postcard__msg {
    left: var(--msg-left); top: var(--msg-top); width: var(--msg-width);
    margin-top: 30px;
    font-size: 3.5cqw; line-height: 1.35;
}
.postcard__msg p { margin: 0 0 1.5cqw; }
.postcard__msg a { color: #00f; }

/* A line break (4R7 / CANADA) that appears on the narrow portrait card only. */
.postcard .br-mobile { display: none; }

/* Inline map-pin (one SVG, no icon set). Sizes with the text, royal-blue fill. */
.postcard .pin {
    color: #00f;
    margin-left: .2em;
    line-height: 0;
    vertical-align: -0.12em;
}
.postcard .pin svg { width: 1.2em; height: 1.2em; fill: currentColor; }

/* reCAPTCHA: hide Google's floating badge; the text disclosure below carries the
   required attribution (Google allows hiding the badge if this text is shown). */
.grecaptcha-badge { visibility: hidden !important; }
.recaptcha-note {
    margin: 1.5rem auto 0;
    padding: 0 15px;
    max-width: 60ch;
    text-align: center;
    font-size: .8rem;
    color: #5a6473;
}
.recaptcha-note a { color: #5a6473; text-decoration: underline; }
.recaptcha-note a:hover { color: #00f; }

/* Vimeo takeover after the thank-you — overlaid on the monitor screen (added by
   contact-form.js into .scene__inner, so it scales with the art like the form). */
.video-takeover {
    position: absolute;
    left: var(--video-left);
    top: var(--video-top);
    width: var(--video-width);
    height: var(--video-height);
    z-index: 3;
    background: #000;
}
.video-takeover iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.screen-form button {
    align-self: center;
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.7cqw;
    text-transform: uppercase;
    color: #000;
    background: #ff0;
    border: 0.2cqw solid #000;
    border-radius: 0.6cqw;
    box-shadow: 0.35cqw 0.35cqw 0 #000;       /* thick comic border at rest */
    padding: 1cqw 3.5cqw;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.screen-form button:hover {
    box-shadow: none;                          /* border drops away on rollover */
    transform: translate(0.35cqw, 0.35cqw);    /* presses into where the shadow was */
}
/* Sent / disabled: light grey + depressed (no offset border). */
.screen-form button:disabled {
    background: #ccc;
    color: #777;
    border-color: #999;
    box-shadow: none;
    transform: translate(0.35cqw, 0.35cqw);
    cursor: default;
}

/* Form fields vs the post-send thank-you — swapped by .is-sent. */
.screen-form__body {
    display: flex;
    flex-direction: column;
    gap: 1.6cqw;
    flex: 1 1 auto;
    min-height: 0;
}
.screen-form__thanks { display: none; }
.screen-form.is-sent .screen-form__body { display: none; }
.screen-form.is-sent .screen-form__thanks {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 700;
    font-size: 2.6cqw;
    line-height: 1.3;
    color: #15243a;
}

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

    /* Mobile: swap to the centred iMac (iMac-mobile.png) at full width — no zoom — so
       the whole computer (and the Send button) stays on screen. The form maps onto this
       image's larger, centred screen; its container-relative sizes are bumped (~1.7x)
       since it now fills ~92% of the monitor (vs 53% on desktop), and name/email stack. */
    .scene__inner { width: 100%; }
    .scene {
        --screen-left: 5%;  --screen-top: 5%;   --screen-width: 90%;  --screen-height: 49%;
        --video-left: 5%;   --video-top: 5%;    --video-width: 90%;   --video-height: 49%;
    }
    .screen-form { gap: 2cqw; }
    .screen-form__head { gap: 2.6cqw; }
    .screen-form__title { font-size: 7.5cqw; }
    .screen-form__body { gap: 2cqw; }
    .screen-form__row { flex-direction: column; gap: 2cqw; }   /* stack name + email */
    .screen-form input,
    .screen-form textarea { font-size: 4.6cqw; padding: 1.4cqw 2.4cqw; }
    .screen-form textarea { min-height: 6cqw; }                /* ~1 line shorter, freeing room for bigger text */
    .screen-form button { font-size: 4.6cqw; padding: 1.2cqw 5cqw; }
    .screen-form__thanks { font-size: 5.5cqw; }

    /* Portrait postcard (postcard-portrait.jpg, swapped in via <picture>): FROM + its
       lines top-left, the open middle for the note, TO + its lines lower-centre — its
       own region coords plus a small handwriting bump for legibility at phone width.
       First-pass placements; nudge the percentages to taste. */
    .postcard {
        --from-name-left: 23%; --from-name-top: 3%;
        --from-left: 8%;   --from-top: 9%;    --from-width: 55%;
        --msg-left: 9%;    --msg-top: 27%;    --msg-width: 85%;
        --to-left: 34%;    --to-top: 65.5%;   --to-width: 52%;
    }
    .postcard__from-name { font-size: 6cqw; }
    .postcard__from { font-size: 5cqw; }
    .postcard__to { font-size: 6cqw; line-height: 1.55; }
    .postcard__msg { margin-top: 0; font-size: 6.5cqw; }
    .postcard__msg p:nth-last-child(2) { margin-bottom: 0; }   /* "Here to serve," hugs the sign-off */
    .postcard .br-mobile { display: inline; }
}