/**
 * Contact page styles
 * File: /wp-content/themes/wrestlerfinder/assets/css/contact.css
 *
 * Enqueued only on /contact/. Hero on top, then a two-column
 * (form + info cards) that stacks on mobile, then a FAQ teaser.
 * All colors + spacing come from design-system.css tokens.
 *
 * @package WrestlerFinder
 */

/* =============================================================================
   Hero
============================================================================= */

.wf-contact-hero {
    padding-block: var(--space-16) var(--space-10);
    background:    var(--color-bg);
    text-align:    center;
}

.wf-contact-hero__inner {
    max-width: 720px;
}

.wf-contact-hero__headline {
    margin:      0 0 var(--space-3);
    font-family: var(--font-heading);
    font-size:   var(--text-4xl);
    font-weight: 700;
    line-height: 1.1;
    color:       var(--color-text);
    letter-spacing: -0.01em;
}

@media (min-width: 768px) {
    .wf-contact-hero__headline {
        font-size: var(--text-5xl);
    }
}

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

/* =============================================================================
   Two-column grid (form + info)
============================================================================= */

.wf-contact-section {
    padding-block: var(--space-4) var(--space-12);
    background:    var(--color-bg);
}

.wf-contact-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--space-8);
    align-items:           start;
}

@media (min-width: 900px) {
    .wf-contact-grid {
        grid-template-columns: 3fr 2fr;
        gap:                   var(--space-10);
    }
}

/* =============================================================================
   Contact form
============================================================================= */

.wf-contact-form {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding:       var(--space-6);
    display:        flex;
    flex-direction: column;
    gap:            var(--space-4);
}

@media (min-width: 640px) {
    .wf-contact-form {
        padding: var(--space-8);
    }
}

.wf-contact-field {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-1);
}

.wf-contact-field label {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    gap:             var(--space-3);
    font-family:     var(--font-heading);
    font-size:       var(--text-sm);
    font-weight:     700;
    letter-spacing:  0.02em;
    color:           var(--color-text);
}

.wf-contact-field input,
.wf-contact-field select,
.wf-contact-field textarea {
    width:         100%;
    padding:       var(--space-3);
    background:    var(--color-surface-2);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    color:         var(--color-text);
    font:          inherit;
    line-height:   1.4;
    transition:    border-color 0.15s ease, background 0.15s ease;
}

.wf-contact-field textarea {
    resize:      vertical;
    min-height:  140px;
}

.wf-contact-field input:focus,
.wf-contact-field select:focus,
.wf-contact-field textarea:focus {
    outline:      none;
    border-color: var(--color-teal);
    background:   var(--color-surface-3);
}

.wf-contact-field__counter {
    font-family: var(--font-body, inherit);
    font-size:   var(--text-xs);
    color:       var(--color-text-muted);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.wf-contact-field__counter.is-warn {
    color: var(--color-warning);
}

.wf-contact-field__error {
    margin:    var(--space-1) 0 0;
    font-size: var(--text-xs);
    color:     var(--color-error);
}

/* Honeypot — visually hidden but present in the DOM + tab order for
   bots. Real users never see or interact with it. */
.wf-contact-honeypot {
    position:   absolute;
    left:       -9999px;
    top:        -9999px;
    width:      1px;
    height:     1px;
    overflow:   hidden;
}

.wf-contact-form__actions {
    display:     flex;
    align-items: center;
    gap:         var(--space-4);
    margin-top:  var(--space-2);
}

.wf-contact-form__submit {
    min-width: 180px;
}

.wf-contact-form__error {
    margin:        0;
    padding:       var(--space-3) var(--space-4);
    background:    rgba(255, 77, 106, 0.10);
    border:        1px solid var(--color-error);
    border-radius: var(--radius-md);
    color:         var(--color-error);
    font-size:     var(--text-sm);
    line-height:   1.4;
}

/* =============================================================================
   Success state — swapped in after a successful POST
============================================================================= */

.wf-contact-success {
    background:    var(--color-surface);
    border:        1px solid var(--color-teal);
    border-radius: var(--radius-xl);
    padding:       var(--space-10) var(--space-6);
    text-align:    center;
}

.wf-contact-success__icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           56px;
    height:          56px;
    border-radius:   50%;
    background:      var(--color-teal);
    color:           var(--color-bg);
    font-size:       28px;
    font-weight:     700;
    line-height:     1;
    margin-bottom:   var(--space-4);
}

.wf-contact-success__headline {
    margin:      0 0 var(--space-2);
    font-family: var(--font-heading);
    font-size:   var(--text-2xl);
    font-weight: 700;
    color:       var(--color-text);
}

.wf-contact-success__body {
    margin:    0;
    color:     var(--color-text-muted);
    font-size: var(--text-base);
}

/* =============================================================================
   Info cards
============================================================================= */

.wf-contact-info-col {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-4);
}

.wf-contact-card {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding:       var(--space-5);
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
}

.wf-contact-card__icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    border-radius:   var(--radius-md);
    background:      var(--color-teal-dim);
    color:           var(--color-primary);
    margin-bottom:   var(--space-1);
}

.wf-contact-card__label {
    margin:         0;
    font-family:    var(--font-heading);
    font-size:      var(--text-xs);
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--color-text-muted);
}

.wf-contact-card__value {
    margin:      0;
    font-family: var(--font-heading);
    font-size:   var(--text-lg);
    font-weight: 700;
    color:       var(--color-text);
    line-height: 1.3;
}

.wf-contact-card__value a {
    color:           var(--color-primary);
    text-decoration: none;
}

.wf-contact-card__value a:hover,
.wf-contact-card__value a:focus-visible {
    text-decoration: underline;
}

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

/* =============================================================================
   FAQ teaser
============================================================================= */

.wf-contact-faq-teaser {
    padding-block: var(--space-10) var(--space-14);
    background:    var(--color-surface);
    border-top:    1px solid var(--color-border-subtle);
}

.wf-contact-faq-teaser__inner {
    text-align: center;
    max-width:  640px;
}

.wf-contact-faq-teaser__headline {
    margin:      0 0 var(--space-2);
    font-family: var(--font-heading);
    font-size:   var(--text-2xl);
    font-weight: 700;
    color:       var(--color-text);
}

.wf-contact-faq-teaser__sub {
    margin:      0 0 var(--space-5);
    color:       var(--color-text-muted);
    line-height: 1.5;
}