/* Issue #268 (WP8) — contact.html only: the contact blocks, the message form
   and the public FAQ accordion. Logical properties only (no left/right), so
   the same rules serve RTL and LTR and nothing here needs scripts/gen-ltr.py;
   this file is not one of its sources. Colours and sizes are tokens.css
   tokens (issue #261); the focus ring is tokens.css's global two-tone rule. */

.wv-contact {
    padding-block: var(--wv-section-y);
    background: var(--wv-surface);
}

.wv-contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wv-sp-7);
    max-width: var(--wv-w-content);
    margin-inline: auto;
}

@media (min-width: 992px) {
    .wv-contact__grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: start;
    }
}

/* Issue #362: the details column is filled from GET /api/settings after
   first paint. Until js/contact.js has answered (it removes
   data-wv-pending), the hidden column keeps its grid cell invisibly, so on
   wide screens the form does not jump from the first column to the second.
   Below 992px the form comes first, so the column filling in only moves
   what is below the form. When there is nothing to show, the column then
   collapses (the one remaining shift, accepted on the issue). */
.wv-contact__details[hidden][data-wv-pending] {
    display: block;
    visibility: hidden;
}

@media (max-width: 991.98px) {
    .wv-contact__details { order: 2; }
}

/* Issue #362: at phone width the intro paragraph is two lines once loaded,
   but in English it was one line for part of the load (measured at 375px),
   moving the form up and back down. */
@media (max-width: 480px) {
    .page-header p { min-height: 2lh; }
}

.wv-contact__title {
    margin: 0 0 var(--wv-sp-4);
    font-family: var(--wv-ff);
    font-size: var(--wv-fs-h3);
    line-height: var(--wv-lh-h3);
    font-weight: var(--wv-fw-bold);
    color: var(--wv-primary);
}

/* ── Contact blocks ─────────────────────────────────────────────── */
.wv-contact-list {
    display: grid;
    gap: var(--wv-sp-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wv-contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--wv-sp-4);
    padding: var(--wv-sp-4);
    border: 1px solid var(--wv-border-subtle);
    border-radius: var(--wv-r-lg);
    background: var(--wv-surface-soft);
}

.wv-contact-item__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: var(--wv-r-circle);
    background: var(--wv-primary-50);
    color: var(--wv-primary);
    font-size: 18px;
}

.wv-contact-item__body {
    display: flex;
    flex-direction: column;
    gap: var(--wv-sp-1);
    min-inline-size: 0;
}

.wv-contact-item__label {
    font-size: var(--wv-fs-sm);
    line-height: var(--wv-lh-sm);
    color: var(--wv-text-muted);
}

.wv-contact-item__value {
    font-size: var(--wv-fs-body);
    line-height: var(--wv-lh-body);
    font-weight: var(--wv-fw-bold);
    color: var(--wv-text);
    overflow-wrap: anywhere;
}

a.wv-contact-item__value {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    color: var(--wv-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

a.wv-contact-item__value:hover {
    color: var(--wv-primary-2);
}

.wv-contact-item__value--pre {
    white-space: pre-line;
    font-weight: var(--wv-fw-regular);
}

.wv-contact-item__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wv-sp-2);
}

.wv-contact-item__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border: 1px solid var(--wv-border);
    border-radius: var(--wv-r-circle);
    background: var(--wv-surface);
    color: var(--wv-primary);
    font-size: 18px;
}

.wv-contact-item__social-glyph {
    font-family: Arial, sans-serif;
    font-weight: var(--wv-fw-black);
    line-height: 1;
}

.wv-contact-item__social-link:hover {
    background: var(--wv-primary-50);
}

/* ── Message form ───────────────────────────────────────────────── */
.wv-contact-form {
    padding: var(--wv-sp-6);
    border: 1px solid var(--wv-border-subtle);
    border-radius: var(--wv-r-xl);
    background: var(--wv-surface);
    box-shadow: var(--wv-sh-sm);
}

@media (min-width: 768px) {
    .wv-contact-form {
        padding: var(--wv-sp-8);
    }
}

.wv-contact-form__note {
    margin: 0 0 var(--wv-sp-5);
    font-size: var(--wv-fs-sm);
    color: var(--wv-text-muted);
}

.wv-contact-form__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--wv-sp-5);
}

@media (min-width: 768px) {
    .wv-contact-form__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.wv-field {
    display: flex;
    flex-direction: column;
    gap: var(--wv-sp-2);
    margin-block-end: var(--wv-sp-5);
}

.wv-field label {
    font-size: var(--wv-fs-label);
    line-height: var(--wv-lh-label);
    font-weight: var(--wv-fw-bold);
    color: var(--wv-text);
}

.wv-field__req {
    color: var(--wv-danger-ink);
}

.wv-field__optional {
    font-weight: var(--wv-fw-regular);
    color: var(--wv-text-muted);
}

.wv-field input,
.wv-field textarea {
    inline-size: 100%;
    min-block-size: 48px;
    padding-block: var(--wv-sp-3);
    padding-inline: var(--wv-sp-4);
    border: 1.5px solid var(--wv-border-input);
    border-radius: var(--wv-r-md);
    background: var(--wv-surface);
    color: var(--wv-text);
    font-family: inherit;
    font-size: var(--wv-fs-body);
    line-height: var(--wv-lh-sm);
    box-sizing: border-box;
}

.wv-field textarea {
    min-block-size: 140px;
    resize: vertical;
}

.wv-field input[dir="ltr"] {
    text-align: start;
}

.wv-field input:focus,
.wv-field textarea:focus {
    border-color: var(--wv-primary);
    outline: none;
    box-shadow: var(--wv-sh-focus);
}

.wv-field [aria-invalid="true"] {
    border-color: var(--wv-danger);
}

.wv-field__error {
    display: flex;
    align-items: flex-start;
    gap: var(--wv-sp-1);
    margin: 0;
    font-size: var(--wv-fs-sm);
    line-height: var(--wv-lh-sm);
    color: var(--wv-danger-ink);
}

.wv-contact-form__feedback:not(:empty) {
    margin-block-end: var(--wv-sp-4);
    padding-block: var(--wv-sp-3);
    padding-inline: var(--wv-sp-4);
    border-radius: var(--wv-r-md);
    font-size: var(--wv-fs-sm);
    line-height: var(--wv-lh-sm);
    white-space: pre-line;
}

.wv-contact-form__feedback[data-tone="success"] {
    background: var(--wv-success-soft);
    color: var(--wv-success-ink);
}

.wv-contact-form__feedback[data-tone="error"] {
    background: var(--wv-danger-soft);
    color: var(--wv-danger-ink);
}

.wv-spinner {
    inline-size: 18px;
    block-size: 18px;
    border: 2px solid currentColor;
    border-block-start-color: transparent;
    border-radius: var(--wv-r-circle);
    animation: wv-spin 0.8s linear infinite;
}

.wv-spinner[hidden] {
    display: none;
}

@keyframes wv-spin {
    to { transform: rotate(360deg); }
}

/* ── FAQ accordion ──────────────────────────────────────────────── */
.wv-faq {
    padding-block: var(--wv-section-y);
    background: var(--wv-surface-app);
    scroll-margin-block-start: var(--wv-header-h, 0px);
}

.wv-faq[hidden] {
    display: none;
}

.wv-faq__inner {
    max-width: 880px;
    margin-inline: auto;
}

.wv-faq__title {
    margin: 0 0 var(--wv-sp-6);
    font-family: var(--wv-ff);
    font-size: var(--wv-fs-h2);
    line-height: var(--wv-lh-h2);
    font-weight: var(--wv-fw-bold);
    color: var(--wv-primary);
    text-align: center;
}

.wv-faq__list {
    display: grid;
    gap: var(--wv-sp-3);
}

.wv-faq__item {
    border: 1px solid var(--wv-border-subtle);
    border-radius: var(--wv-r-lg);
    background: var(--wv-surface);
    box-shadow: var(--wv-sh-xs);
}

.wv-faq__q {
    margin: 0;
    font-size: var(--wv-fs-body-lg);
    line-height: var(--wv-lh-h4);
}

.wv-faq__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wv-sp-4);
    inline-size: 100%;
    min-block-size: 56px;
    padding-block: var(--wv-sp-4);
    padding-inline: var(--wv-sp-5);
    border: 0;
    border-radius: var(--wv-r-lg);
    background: transparent;
    color: var(--wv-primary);
    font-family: var(--wv-ff);
    font-size: inherit;
    font-weight: var(--wv-fw-bold);
    line-height: inherit;
    text-align: start;
    cursor: pointer;
}

.wv-faq__btn:hover {
    background: var(--wv-primary-50);
}

.wv-faq__q-text {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

/* A plus that turns into a minus — drawn with two bars, no icon font. */
.wv-faq__icon {
    position: relative;
    flex: none;
    inline-size: 32px;
    block-size: 32px;
    border-radius: var(--wv-r-circle);
    background: var(--wv-primary-50);
}

.wv-faq__icon::before,
.wv-faq__icon::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: 12px;
    block-size: 2px;
    margin-block-start: -1px;
    margin-inline-start: -6px;
    border-radius: 1px;
    background: var(--wv-primary);
    transition: transform var(--wv-t-fast) var(--wv-ease);
}

.wv-faq__icon::after {
    transform: rotate(90deg);
}

.wv-faq__btn[aria-expanded="true"] .wv-faq__icon::after {
    transform: rotate(0deg);
}

.wv-faq__a-inner {
    padding-block: 0 var(--wv-sp-5);
    padding-inline: var(--wv-sp-5);
    font-size: var(--wv-fs-body);
    line-height: var(--wv-lh-body);
    color: var(--wv-text-2);
    overflow-wrap: anywhere;
}

.wv-faq__a-inner a {
    color: var(--wv-accent-ink);
    font-weight: var(--wv-fw-bold);
}

.wv-faq__a-inner > :first-child {
    margin-block-start: 0;
}

.wv-faq__a-inner > :last-child {
    margin-block-end: 0;
}