/* ===========================================================
   UNAMIQ - Contact page
   Loaded last, after tokens -> base -> layout -> components.

   The form itself is styled in components.css and is already
   theme-aware through the tokens, so this file only holds the
   Contact-specific accents: the focus colour on the fields,
   the submit button, and the small dot beside the intro note.
=========================================================== */

.form-field input:focus,
.form-field textarea:focus{
    border-bottom-color:var(--accent);
}

.form-status.is-success{
    color:var(--success);
}

.form-status.is-error{
    color:var(--error);
}

.contact-note{
    position:relative;
    padding-left:16px;
}

.contact-note::before{
    content:"";
    position:absolute;
    left:0;
    top:.5em;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 6px rgba(var(--accent-rgb),.6);
}


/* ===========================================================
   DENSITY
   This page measured 100% empty surface with 1.4% ink - a
   heading and four fields floating in a very large room, on the
   one page that actually has a job to do.

   The form now sits in a panel and the company's own details
   sit beside it, so the page gives something as well as asking.
   See docs/style/60-30-10.md.
=========================================================== */

.contact-layout{
    display:grid;
    grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr);
    gap:56px;
    align-items:start;
}

.contact-panel{
    padding:40px 44px 44px;
    background:var(--bg-alt);
    border:1px solid var(--border-color);
}

.contact-panel .contact-form{
    max-width:none;
}

/* ---------- the details column ---------- */

.contact-aside{
    padding-top:8px;
}

.contact-aside-title{
    font-size:var(--fs-base);
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;

    margin-bottom:22px;
    padding-bottom:14px;
    border-bottom:2px solid var(--accent);
}

.contact-details{
    margin-bottom:28px;
}

.contact-details dt{
    font-family:"Space Mono", monospace;
    font-size:var(--fs-2xs);
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--text-faint);
    margin-bottom:4px;
}

.contact-details dd{
    font-size:var(--fs-base);
    line-height:1.6;
    color:var(--text-strong);
    margin:0 0 20px;
}

.contact-details a{
    color:var(--accent-ink);
    text-underline-offset:3px;
}

.contact-aside-note{
    font-size:var(--fs-base);
    line-height:1.7;
    color:var(--text-muted);

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

/* ---------- the submit button ----------
   It was an outline button on a page with no other colour. On
   the one control that matters most, an accent FILL is worth
   the 10%.

   Filled with --accent-ink rather than --accent: that is the rust
   red #B23A06 in light and the vivid orange #FF6B35 in dark, so
   the button reads as red on the light theme without needing a
   theme override here.

   The text on it has to flip direction between the themes, which
   is what --on-accent-ink is for. White on #B23A06 is 6.00:1;
   near-black on it is 2.87:1 and fails. On dark it is the other
   way round — near-black on #FF6B35 is 6.08:1, white is 2.84:1.
   This used to be a literal #fff, which was right in light and
   would have been wrong the moment the hover state mattered in
   dark. tools/check-contrast.py measures both pairs now. */

.contact-submit{
    background-color:var(--accent-ink);
    border-color:var(--accent-ink);
    color:var(--on-accent-ink);
}

.contact-submit:hover{
    background-color:var(--accent);
    border-color:var(--accent);
    color:var(--on-accent);
}

@media(max-width:900px){

    .contact-layout{
        grid-template-columns:1fr;
        gap:44px;
    }

}

@media(max-width:600px){

    .contact-panel{
        padding:26px 22px 30px;
    }

}