/* contact-us.css — contact details card, map placeholder and the enquiry form
   (the only form on the site, so its styles live with the page). */

.contact__grid {
    display: grid;
    align-items: start;
    gap: var(--space-2xl);
}

/* ============================================================ (a) Contact details */
.contact-details {
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-block-start: 2px solid var(--color-accent);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
}

.contact-details__title,
.contact-form__title { font-size: var(--fs-h3); }

.contact-details__list {
    display: grid;
    gap: var(--space-md);
    margin-block-start: var(--space-lg);
}

.contact-details__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-md);
}

.contact-details__icon { grid-row: span 2; }

.contact-details__label {
    font-family: var(--font-heading);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.contact-details__value {
    color: var(--color-heading);
    font-size: var(--fs-md);
    font-weight: 400;
}

/* Phone and e-mail: 44px tap height without moving the layout (Fix 9) */
.contact-details__link {
    display: inline-block;
    justify-self: start;
    padding-block: var(--space-sm);
    margin-block: calc(var(--space-sm) * -1);
    transition: color var(--transition-fast);
}

.contact-details__link:hover {
    color: var(--color-accent-deep);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
}

.contact-details__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-block-start: var(--space-xl);
}

/* Stylised map — hairline grid and gold pin; links to Google Maps, no embed */
.map-placeholder { margin-block-start: var(--space-xl); }

.map-placeholder__canvas {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface-sand);
    background-image:
        linear-gradient(var(--color-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
    background-size: var(--space-2xl) var(--space-2xl);
    border-radius: var(--radius-card);
    transition: border-color var(--transition-base);
}

.map-placeholder__canvas:hover { border-color: var(--color-accent); }

.map-placeholder__pin {
    display: inline-flex;
    color: var(--color-accent-deep);
}

.map-placeholder__pin .icon--lg {
    inline-size: calc(var(--icon-lg) * var(--icon-card-scale));
    block-size: calc(var(--icon-lg) * var(--icon-card-scale));
}

.map-placeholder__caption { margin-block-start: var(--space-sm); }

/* ============================================================ (b) Enquiry form */
.contact-form__note {
    margin-block: var(--space-xs) var(--space-lg);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.form__row {
    display: grid;
    column-gap: var(--space-lg);
}

.form__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-block-end: var(--space-lg);
}

.form__label {
    font-family: var(--font-heading);
    color: var(--color-heading);
    font-size: var(--fs-md);
    font-weight: 400;
}

.form__input {
    inline-size: 100%;
    min-block-size: var(--btn-size);
    padding-block: var(--space-sm);
    padding-inline: var(--space-md);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-input);
    background-color: var(--color-bg);
    color: var(--color-text);
    font-size: var(--fs-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Focus (BASAM 2026-09-15): a thicker dark-gold border — the 1px border plus a 1px inset line, so the text
   does not shift — and a bright gold glow. The transparent outline shows in forced-colours mode. */
.form__input:focus {
    border-color: var(--color-accent-deep);
    outline: 2px solid transparent;
    box-shadow: inset 0 0 0 1px var(--color-accent-deep), var(--shadow-focus-gold);
}

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

.form__input[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1px var(--color-danger), var(--shadow-focus-gold); }

.form__input--textarea { min-block-size: calc(var(--space-3xl) * 2.5); }

/* Select: native control, custom chevron drawn with the sprite (currentColor) */
.form__select { position: relative; }

.form__select .form__input {
    appearance: none;
    padding-inline-end: calc(var(--space-xl) + var(--space-sm));
    cursor: pointer;
}

.form__select-icon {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: var(--space-md);
    color: var(--color-accent-deep);
    pointer-events: none;
    transform: translateY(-50%) rotate(90deg);
}

.form__error {
    color: var(--color-danger);
    font-size: var(--fs-sm);
}

.form__actions { margin-block-start: var(--space-sm); }

/* The paper-plane points in the reading direction */
[dir="rtl"] .icon--send { transform: scaleX(-1); }

.form__status {
    margin-block-start: var(--space-md);
    font-size: var(--fs-md);
    font-weight: 400;
}

.form__status.is-error { color: var(--color-danger); }
.form__status.is-success { color: var(--color-success); }

/* ============================================================ .NET build additions (same tokens, no new look) */

/* Direct contact offered when the enquiry could not be sent */
.form__status-contact {
    display: block;
    margin-block-start: var(--space-xs);
}

.form__status a {
    color: var(--color-heading);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
}

/* Honeypot: off-screen, hidden from assistive technology and skipped by Tab */
.form__trap {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: -9999px;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
}

/* Google Maps embed (Company:MapEmbedUrl), framed like the stylised map */
.map-placeholder__frame {
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}

/* Social profile links (Company:Social) */
.contact-details__social {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-md);
}

/* No contact details configured: the form stands alone at its usual reading width */
.contact__grid--form-only .contact-form {
    inline-size: 100%;
    max-inline-size: var(--container-narrow);
    margin-inline: auto;
}

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

@media (min-width: 768px) {
    .contact-details { padding: var(--space-xl); }
}

@media (min-width: 992px) {
    .contact__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
        gap: calc(var(--space-3xl) + var(--space-md));
    }

    .contact__grid--form-only { grid-template-columns: minmax(0, 1fr); }
}