/*
  Contact.

  Contact stays out of the primary header (by design) but must be easy to reach: it is linked from
  the footer, from account Help, from the mascot support panel and from this direct localized route.
  The page itself is a plain, generous form — the controls come from components/forms.css so they
  match every other input on the site.
*/

.contact-page {
    display: grid;
    gap: var(--space-lg);
    max-inline-size: calc(var(--container-narrow) + var(--container-pad) * 2);
    padding-block: var(--section-gap-tight) var(--section-gap);
    justify-items: start;
}

.contact-page h1 {
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-display);
    margin: 0;
}

.contact-form {
    display: grid;
    gap: var(--space-lg);
    inline-size: 100%;
    margin-block-start: var(--space-md);
}

.contact-privacy {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

.contact-success {
    padding: var(--space-lg);
    border-inline-start: 3px solid var(--color-accent);
    background: var(--color-surface-muted);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.form-errors:empty { display: none; }

.form-errors {
    padding: var(--space-md) var(--space-lg);
    border-inline-start: 3px solid var(--color-danger);
    background: var(--color-danger-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--color-danger);
    font-size: var(--text-sm);
}

/* Honeypot: hidden from sight and from assistive technology, present in the DOM for bots. */
.honeypot {
    position: absolute;
    left: -9999px;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
}

/* ---- Confirmation after sending ------------------------------------------------------------------
   A centred panel rather than three loose elements on an empty page. The complaint (PPT slide 5) was
   that the screen looked broken; almost all of that was the absence of any composition at all. */

.contact-page--sent { display: grid; place-items: center; }

.contact-sent {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: var(--space-md);
    max-inline-size: 44ch;
    padding: var(--space-3xl) var(--space-lg);
}

.contact-sent__mark {
    inline-size: 72px;
    block-size: 72px;
    object-fit: contain;
}

.contact-sent__title { margin: 0; }

.contact-sent__message {
    margin: 0;
    font-size: var(--text-lg);
    line-height: 1.5;
    color: var(--color-text-muted);
}

.contact-sent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    margin-block-start: var(--space-sm);
}

/* =========================================================================
   REDESIGN LAYER — two columns: who you are writing to, and the form
   Left, a dark panel on the kiln floor with the mascot, the heading and the channels the site
   already has; right, the form in a card. Stacked on a phone, panel first.
   ========================================================================= */
.contact-page:not(.contact-page--sent) {
    max-inline-size: var(--container-max);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    justify-items: stretch;
    gap: var(--space-xl);
}

.contact-page__intro {
    position: relative;
    display: grid;
    gap: var(--space-md);
    justify-items: start;
    align-content: start;
    min-inline-size: 0;
    padding: clamp(1.75rem, 1rem + 3vw, 3.25rem);
    border-radius: var(--radius-2xl);
    background: var(--cg-black);
    color: var(--color-on-deep);
    overflow: hidden;
}

.contact-page__intro h1 {
    font-size: clamp(2.1rem, 1.2rem + 2.8vw, 3.5rem);
    font-stretch: 108%;
    overflow-wrap: anywhere;
    font-weight: 900;
    line-height: 0.95;
    color: var(--color-on-deep-strong);
}

.contact-page__intro p { color: var(--color-on-deep); font-size: var(--text-lg); margin: 0; }

.contact-page__mascot {
    inline-size: 5.5rem;
    block-size: auto;
    padding: 0.6rem;
    border-radius: var(--radius-xl);
    background: var(--cg-paper);
    box-shadow: 0 20px 40px -24px rgb(0 0 0 / 0.8);
}

@media (prefers-reduced-motion: no-preference) {
    .contact-page__mascot { animation: cg-contact-float 6s var(--ease-in-out) infinite alternate; }
}

@keyframes cg-contact-float {
    from { transform: translateY(-4px) rotate(-3deg); }
    to { transform: translateY(4px) rotate(2deg); }
}

.contact-channels {
    display: grid;
    gap: var(--space-sm);
    inline-size: 100%;
    margin: var(--space-md) 0 0;
    padding: 0;
    list-style: none;
}

.contact-channel {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-block-size: 3.4rem;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-on-deep-border);
    border-radius: var(--radius-lg);
    background: rgb(255 255 255 / 0.03);
    color: var(--color-on-deep-strong);
    font-weight: var(--weight-bold);
    font-stretch: var(--stretch-label);
    transition: border-color var(--transition-base), background-color var(--transition-base), transform var(--transition-base);
}

.contact-channel:hover {
    border-color: color-mix(in srgb, var(--kiln-ember) 60%, transparent);
    background: rgb(255 122 47 / 0.08);
    transform: translateX(4px);
}

.contact-channel:focus-visible { outline: 2px solid var(--cg-red-on-dark); outline-offset: 2px; }

.contact-channel__icon {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    border-radius: 50%;
    background: rgb(255 59 78 / 0.14);
    color: var(--cg-red-on-dark);
}

.contact-channel__icon svg {
    inline-size: 1.2rem;
    block-size: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-page:not(.contact-page--sent) .contact-form {
    margin: 0;
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    background: var(--color-surface);
    box-shadow: 0 40px 80px -60px rgb(20 14 12 / 0.5);
}

.contact-form .button--primary { justify-self: start; min-inline-size: 12rem; }

@media (min-width: 62rem) {
    .contact-page:not(.contact-page--sent) { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-2xl); }
    .contact-page__intro { position: sticky; inset-block-start: calc(var(--header-height) + var(--space-lg)); }
}