/**
 * contact.css — Aqua Source Boise
 * Contact page styles.
 *
 * @author Fudo
 * @date   2026-05-02
 * @package aquasource
 */

/* ── Page Hero ───────────────────────────────────────────────────────────── */

.page-hero--navy {
    background-color: var(--navy-900);
    padding-block: var(--space-20);
    text-align: center;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.page-hero--navy .section-eyebrow {
    color: rgba(255,255,255,0.75);
}

.page-hero--navy .page-hero__subtitle {
    color: var(--blue-100);
}

/* ── Contact Layout ──────────────────────────────────────────────────────── */

.section--contact {
    padding-block: var(--space-20);
}

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

.contact__col-title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin-bottom: var(--space-6);
}

/* ── Form ────────────────────────────────────────────────────────────────── */

.contact__form-wrap {
    background-color: var(--bg-soft);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    border: 1px solid var(--color-border);
}

/* Fluent Forms overrides */
.contact__form-wrap .ff-el-group {
    margin-bottom: var(--space-5);
}

.contact__form-wrap .ff-el-input--label label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-2);
    display: block;
}

.contact__form-wrap input[type="text"],
.contact__form-wrap input[type="email"],
.contact__form-wrap input[type="number"],
.contact__form-wrap input[type="tel"],
.contact__form-wrap textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    font-family: inherit;
    color: var(--color-text);
    background-color: var(--color-bg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.contact__form-wrap input[type="text"]:focus,
.contact__form-wrap input[type="email"]:focus,
.contact__form-wrap input[type="number"]:focus,
.contact__form-wrap input[type="tel"]:focus,
.contact__form-wrap textarea:focus {
    outline: none;
    border-color: var(--navy-700);
    box-shadow: 0 0 0 3px rgba(20, 83, 196, 0.15);
}

.contact__form-wrap textarea {
    resize: vertical;
    min-height: 120px;
}

.contact__form-wrap .ff-name-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.contact__form-wrap .ff_submit_btn_container .ff-btn-submit,
.contact__form-wrap button[type="submit"] {
    background-color: var(--orange) !important;
    border-color: var(--orange) !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-weight: var(--weight-bold) !important;
    font-size: var(--text-sm) !important;
    letter-spacing: var(--tracking-wide) !important;
    text-transform: uppercase !important;
    padding: var(--space-3) var(--space-8) !important;
    border-radius: var(--radius-full) !important;
    cursor: pointer !important;
    transition: background-color var(--transition-fast) !important;
    border: 2px solid var(--orange) !important;
}

.contact__form-wrap .ff_submit_btn_container .ff-btn-submit:hover,
.contact__form-wrap button[type="submit"]:hover {
    background-color: var(--orange-deep) !important;
    border-color: var(--orange-deep) !important;
}

.contact__form-wrap .ff-message-success {
    background-color: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    color: #166534;
    font-weight: var(--weight-medium);
}

.contact__form-wrap .ff-errors-head,
.contact__form-wrap .error {
    color: #dc2626;
    font-size: var(--text-xs);
    margin-top: var(--space-1);
}

/* ── Info Column ─────────────────────────────────────────────────────────── */

.contact__info-body {
    color: var(--color-text-soft);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-8);
}

.contact__details {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.contact__detail-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.contact__detail-icon {
    width: 44px;
    height: 44px;
    background-color: var(--navy-900);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    padding: var(--space-2);
}

.contact__detail-icon svg {
    width: 20px;
    height: 20px;
}

.contact__detail-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.contact__detail-content strong {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.contact__detail-content span,
.contact__detail-content a {
    font-size: var(--text-base);
    color: var(--color-text-soft);
    line-height: var(--leading-relaxed);
}

.contact__detail-content a:hover {
    color: var(--navy-700);
}

/* ── Map ─────────────────────────────────────────────────────────────────── */

.section--map {
    line-height: 0;
}

.map__embed {
    width: 100%;
    height: 400px;
}

.map__embed iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .contact__inner {
        grid-template-columns: 1fr;
        gap: var(--space-12);
    }
}

@media (max-width: 768px) {
    .contact__form-wrap .ff-name-fields {
        grid-template-columns: 1fr;
    }

    .map__embed {
        height: 300px;
    }
}

/* ── Page Hero with Background Image ────────────────────────────────────── */

.page-hero--navy {
    position: relative;
    overflow: hidden;
}

.page-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.page-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.page-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        135deg,
        rgba(6, 33, 79, 0.88) 0%,
        rgba(6, 33, 79, 0.70) 50%,
        rgba(6, 33, 79, 0.55) 100%
    );
}

.page-hero--has-image .page-hero__inner {
    position: relative;
    z-index: 2;
}

.page-hero--has-image .page-hero__title {
    text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.page-hero--has-image .page-hero__subtitle {
    text-shadow: 0 1px 6px rgba(0,0,0,0.2);
}