/* public_contact.css */
/**
 * Contact page — UserAuth public module.
 *
 * Shipped with the module and imported into the assets table on install, so
 * the site owner can edit it in Admin → Assets. Every rule is scoped to
 * .contact-page; the page container itself is .contact-page in
 * public/css/components.css, shared with the news index.
 */

/* ── Contact page — all rules scoped to .contact-page ────────── */
.contact-page {
    --cp-paper:     #FFFFFF;
    --cp-paper-2:   #FAFAFA;
    --cp-ink:       var(--ink,     #333333);
    --cp-ink-2:     var(--ink-2,   #46494D);
    --cp-muted:     var(--muted,   #767B80);
    --cp-muted-2:   var(--muted-2, #9A9FA5);
    --cp-line:      var(--line,    #E0E0E0);
    --cp-line-2:    var(--line-2,  #EFEFEF);
    --cp-accent:      var(--accent,      #2C3E50);
    --cp-accent-hov:  var(--accent-hov,  #3D556E);
    --cp-accent-soft: var(--accent-soft, #EDF1F5);
    --cp-accent-bd:   var(--accent-bd,   #DCE3EA);
    --cp-req:       #C0392B;
    --cp-ok:        #2F5C3E;
    --cp-shadow-sm: 0 1px 2px rgba(44,62,80,.05);
    --cp-shadow-md: 0 8px 22px -10px rgba(44,62,80,.16), 0 2px 6px -2px rgba(44,62,80,.06);
    --cp-serif:     'Fraunces', ui-serif, Georgia, serif;
    --cp-mono:      'Geist Mono', ui-monospace, monospace;

    -webkit-font-smoothing: antialiased;
    /* Container (max-width/margin/padding) comes from .contact-page in
       components.css, shared with the news index. */
}

.contact-page a { color: inherit; text-decoration: none; }

/* Page head */
.cp-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    margin-bottom: 36px;
}


.cp-head h1 {
    font-family: var(--cp-serif);
    font-optical-sizing: auto;
    font-weight: 500;
    font-size: clamp(36px, 4.4vw, 54px);
    line-height: 1.04;
    letter-spacing: -.022em;
    margin: 6px 0 0;
    color: var(--cp-ink);
    text-wrap: balance;
}
.cp-head h1 em {
    font-style: italic;
    color: var(--cp-accent);
    font-weight: 500;
}

/* Grid */
.cp-grid {
    display: grid;
    grid-template-columns: 1.35fr .85fr;
    gap: 24px;
    align-items: start;
}
@media (max-width: 920px) {
    .cp-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* Cards */
.cp-card {
    background: var(--cp-paper);
    border: 1px solid var(--cp-line);
    border-radius: 16px;
    box-shadow: var(--cp-shadow-sm);
}

.cp-card-head {
    padding: 18px 26px 0;
}

.cp-eyebrow {
    font: 500 11px/1 var(--cp-mono);
    color: var(--cp-muted);
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Form */
.cp-form-body { padding: 18px 26px 26px; }

.cp-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 16px;
}

.cp-field label {
    font: 600 11.5px/1 var(--cp-mono);
    color: var(--cp-ink-2);
    letter-spacing: .1em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cp-req { color: var(--cp-req); font-weight: 500; }

.cp-input,
.cp-select,
.cp-textarea {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    border: 1px solid var(--cp-line);
    background: var(--cp-paper);
    color: var(--cp-ink);
    font: 500 14px/1.5 var(--font-body);
    border-radius: 10px;
    padding: 12px 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cp-input    { height: 46px; line-height: 1; }
.cp-textarea { min-height: 148px; resize: vertical; line-height: 1.55; }
.cp-input::placeholder,
.cp-textarea::placeholder { color: var(--cp-muted-2); }
.cp-input:hover, .cp-textarea:hover, .cp-select:hover { border-color: #CFD4D9; }
.cp-input:focus, .cp-textarea:focus, .cp-select:focus {
    outline: none;
    border-color: var(--cp-accent);
    box-shadow: 0 0 0 4px rgba(44,62,80,.12);
}

.cp-select {
    padding-right: 38px;
    height: 46px;
    background-color: var(--cp-paper);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    cursor: pointer;
}

.cp-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 560px) {
    .cp-field-row { grid-template-columns: 1fr; }
}

.cp-char-count {
    display: flex;
    justify-content: flex-end;
    margin-top: 7px;
    font: 500 11.5px/1 var(--cp-mono);
    color: var(--cp-muted);
    letter-spacing: .04em;
}

/* Error banner */
.cp-error-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(192,57,43,.06);
    border: 1px solid rgba(192,57,43,.22);
    color: #96291D;
    font: 500 13.5px/1.5 var(--font-body);
    margin-bottom: 4px;
}
.cp-error-banner ul { margin: 0; padding: 0 0 0 16px; }
.cp-error-banner li + li { margin-top: 4px; }

/* Form footer */
.cp-form-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed var(--cp-line);
}

/* Submit button */
.cp-btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    border-radius: 8px;
    font: 500 13.5px/1 var(--font-body);
    white-space: nowrap;
    cursor: pointer;
    border: none;
    background: var(--cp-accent);
    color: #fff;
    box-shadow: var(--cp-shadow-md);
    transition: background .15s ease, transform .06s ease;
}
.cp-btn-submit:hover:not(:disabled) { background: var(--cp-accent-hov); }
.cp-btn-submit:active:not(:disabled) { transform: translateY(1px); }
.cp-btn-submit:disabled { opacity: .7; cursor: not-allowed; }

/* Side rail */
.cp-side { display: flex; flex-direction: column; gap: 14px; }

.cp-side-card {
    padding: 22px 24px;
}
.cp-side-card h3 {
    font-family: var(--cp-serif);
    font-optical-sizing: auto;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -.01em;
    margin: 6px 0 14px;
    color: var(--cp-ink);
}

.cp-info-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cp-info-list li {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 12px;
    align-items: flex-start;
}
.cp-info-ic {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-accent-soft);
    color: var(--cp-accent);
    border: 1px solid var(--cp-accent-bd);
    flex-shrink: 0;
}
.cp-info-label {
    font: 500 10.5px/1 var(--cp-mono);
    color: var(--cp-muted);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.cp-info-val {
    font: 500 14px/1.4 var(--font-body);
    color: var(--cp-ink);
}
.cp-info-val a:hover { color: var(--cp-accent-hov); }
.cp-info-sub {
    font: 500 12.5px/1.45 var(--cp-mono);
    color: var(--cp-muted);
    margin-top: 2px;
}

@media (max-width: 680px) {
    .cp-head { padding: 0 0 28px; }
}

/* Honeypot — visually hidden, not accessible to humans */
.cp-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    pointer-events: none;
}