/*
 * ============================================================
 * FEARANN ALBA — contact.css
 * ============================================================
 * Shared styles for BOTH contact page templates:
 *   - templates/page-contact-drone.php
 *   - templates/page-contact-time-travel.php
 *
 * It does two jobs:
 *   1. LAYOUT — the page header band and the two-column
 *      "info + form" body.
 *   2. CONTACT FORM 7 THEMING — restyles the default markup
 *      that Contact Form 7 outputs (inputs, textarea, select,
 *      submit button, validation messages) so the plugin's
 *      form matches the dark / gold / square-cornered identity
 *      of the rest of the site.
 *
 * Depends on main.css for the brand tokens (var(--color-*)),
 * the .container / .section helpers, and .btn styles.
 *
 * The form fields are styled by the GENERIC element selectors
 * AND the Contact Form 7 class hooks (.wpcf7-text etc.), so any
 * form you build in the CF7 editor is themed automatically — you
 * do not have to add classes to your fields for it to look right.
 * ============================================================
 */


/*
 * ============================================================
 * 1. PAGE HEADER BAND
 * ============================================================
 * A short hero strip at the top of the page. A background photo
 * sits behind two gradient overlays (top + bottom fade to black)
 * exactly like the site hero, with the page title centred over
 * the top. The two service templates each set their own
 * background image via an inline style on .contact-hero__bg.
 *
 * It is NOT full-height like the homepage hero — it is sized to
 * sit neatly below the fixed 70px header and introduce the page.
 * ============================================================
 */

.contact-hero {
    position: relative;
    /* Tall enough to feel like a header, short enough to get the
       form above the fold on most laptops. */
    min-height: 52vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;

    /* Clear the fixed 70px navigation bar, with breathing room. */
    padding-top: 130px;
    padding-bottom: 4rem;
}

/* The background photograph — covers the whole band. */
.contact-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

/* Top + bottom gradient overlays so the title stays legible and
   the band fades cleanly into the black page below. */
.contact-hero__gradient {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.contact-hero__gradient--top {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.35) 45%,
        rgba(0, 0, 0, 0.55) 100%
    );
}

.contact-hero__gradient--bottom {
    background: linear-gradient(
        to top,
        var(--color-bg) 0%,
        rgba(0, 0, 0, 0.4) 35%,
        transparent 100%
    );
}

/* Title + subtitle sit above the overlays. */
.contact-hero__inner {
    position: relative;
    z-index: 2;
}

/* The small gold mono label above the title (.label from main.css)
   gets a little spacing here. */
.contact-hero__label {
    display: inline-block;
    margin-bottom: 1.25rem;
}

/* Split-weight title — matches the site hero treatment:
   a light (100) word next to a bold (700) word. */
.contact-hero__title {
    font-size: clamp(2.75rem, 8vw, 5.5rem);
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-weight: var(--weight-regular);
    margin: 0;
}

.contact-hero__title--light { font-weight: var(--weight-light); }
.contact-hero__title--bold  { font-weight: var(--weight-bold); }

.contact-hero__subtitle {
    margin: 1.5rem auto 0;
    max-width: 50ch;
    color: var(--color-text-muted);
    font-size: 1.05rem;
}


/*
 * ============================================================
 * 2. CONTACT BODY — TWO-COLUMN LAYOUT
 * ============================================================
 * Left column: introduction copy + contact details.
 * Right column: the panel that holds your Contact Form 7 form.
 *
 * On desktop the form column is given a little more width than
 * the info column. Below 880px the two stack into one column.
 * ============================================================
 */

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 4rem;
    align-items: start;
}

/* --- Left column: info --- */

.contact-info__heading {
    margin: 0.75rem 0 1.25rem;
}

.contact-info__intro {
    /* Override the global centred-paragraph behaviour so copy
       sits left-aligned in this column. */
    margin-left: 0;
    color: var(--color-text-muted);
}

/* Contact details list — each row an icon + text. */
.contact-details {
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-details__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

/* The square gold-bordered icon tile. */
.contact-details__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-gold);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-details__item:hover .contact-details__icon {
    border-color: var(--color-gold);
    box-shadow: 0 0 16px var(--color-gold-glow);
}

.contact-details__icon svg {
    width: 20px;
    height: 20px;
}

.contact-details__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 0.2rem;
}

/* The value (email / phone / location). text-align left and no
   max-width so it never gets the centred-paragraph treatment. */
.contact-details__value,
.contact-details__value a {
    margin: 0;
    max-width: none;
    font-size: 1rem;
    color: var(--color-text);
    line-height: 1.5;
}

.contact-details__value a:hover { color: var(--color-gold); }


/*
 * ============================================================
 * 3. THE FORM PANEL
 * ============================================================
 * The bordered surface card that your Contact Form 7 shortcode
 * renders inside. Gives the form a clear frame and lifts it off
 * the black background.
 * ============================================================
 */

.contact-form-panel {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    padding: 2.5rem;
}

/* Optional small heading you can place above the form. */
.contact-form-panel__title {
    font-size: 1.5rem;
    font-weight: var(--weight-light);
    margin-bottom: 0.5rem;
}

.contact-form-panel__note {
    margin: 0 0 2rem;
    max-width: none;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* Placeholder shown only while no form has been added yet — see
   the templates. Helps you see where the form will appear. */
.contact-form-placeholder {
    border: 1px dashed var(--color-border);
    padding: 2rem;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.contact-form-placeholder code {
    font-family: var(--font-mono);
    color: var(--color-gold);
    font-size: 0.85rem;
}


/*
 * ============================================================
 * 4. CONTACT FORM 7 — FIELD THEMING
 * ============================================================
 * These rules target the markup Contact Form 7 outputs. They are
 * written defensively against BOTH the generic element types and
 * CF7's own classes, so your form is themed no matter how you
 * build it in the CF7 editor.
 * ============================================================
 */

/* Remove the small default top margin CF7 adds to its form. */
.contact-form-panel .wpcf7 { margin: 0; }

/* CF7 wraps each field in a <p>. Use it as the vertical rhythm. */
.contact-form-panel .wpcf7-form p {
    margin: 0 0 1.5rem;
    max-width: none;
}

.contact-form-panel .wpcf7-form p:last-of-type { margin-bottom: 0; }

/* Field labels. In CF7 you typically wrap the field in a <label>
   with the label text inline — this styles that text. */
.contact-form-panel .wpcf7-form label {
    display: block;
    font-size: 0.75rem;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.6rem;
}

/* The wrap CF7 puts around each control. */
.contact-form-panel .wpcf7-form-control-wrap { display: block; }

/* --- Text inputs, textarea, select --- */
.contact-form-panel .wpcf7-form input[type="text"],
.contact-form-panel .wpcf7-form input[type="email"],
.contact-form-panel .wpcf7-form input[type="tel"],
.contact-form-panel .wpcf7-form input[type="url"],
.contact-form-panel .wpcf7-form input[type="number"],
.contact-form-panel .wpcf7-form input[type="date"],
.contact-form-panel .wpcf7-form textarea,
.contact-form-panel .wpcf7-form select {
    width: 100%;
    padding: 0.85rem 1rem;
    font-family: var(--font-primary);
    font-size: 0.95rem;
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);

    /* Square corners — core to the brand identity. */
    border-radius: 0;

    -webkit-appearance: none;
    appearance: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.contact-form-panel .wpcf7-form textarea {
    min-height: 160px;
    resize: vertical;
    line-height: 1.6;
}

/* Placeholder colour. */
.contact-form-panel .wpcf7-form ::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

/* Focus state — gold border + soft glow, matching button hovers. */
.contact-form-panel .wpcf7-form input:focus,
.contact-form-panel .wpcf7-form textarea:focus,
.contact-form-panel .wpcf7-form select:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 1px var(--color-gold), 0 0 18px var(--color-gold-glow);
    background-color: var(--color-surface);
}

/* Autofill — stop the browser's blue/white fill clashing with the
   dark theme. */
.contact-form-panel .wpcf7-form input:-webkit-autofill,
.contact-form-panel .wpcf7-form textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--color-text);
    -webkit-box-shadow: 0 0 0 1000px var(--color-bg) inset;
    caret-color: var(--color-text);
}

/* --- Select dropdown arrow --- */
/* appearance:none removed the native arrow above, so draw a small
   gold chevron with a background SVG. */
.contact-form-panel .wpcf7-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23B8960C' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}

/* --- Checkboxes & radios --- */
.contact-form-panel .wpcf7-form .wpcf7-checkbox .wpcf7-list-item,
.contact-form-panel .wpcf7-form .wpcf7-radio .wpcf7-list-item {
    display: block;
    margin: 0 0 0.5rem;
}

.contact-form-panel .wpcf7-form .wpcf7-list-item-label {
    color: var(--color-text);
    text-transform: none;
    letter-spacing: 0;
    font-weight: var(--weight-regular);
    font-size: 0.95rem;
}

.contact-form-panel .wpcf7-form input[type="checkbox"],
.contact-form-panel .wpcf7-form input[type="radio"] {
    accent-color: var(--color-gold);
    margin-right: 0.5rem;
}

/* --- Optional two-column row helper --- */
/* Wrap two fields in <div class="cf-row"> in the CF7 editor to sit
   them side by side (e.g. Name + Email). Collapses on mobile. */
.contact-form-panel .wpcf7-form .cf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.contact-form-panel .wpcf7-form .cf-row p { margin-bottom: 1.5rem; }


/*
 * ============================================================
 * 5. CONTACT FORM 7 — SUBMIT BUTTON
 * ============================================================
 * Restyle CF7's submit input to match the site's gold button.
 * ============================================================
 */

.contact-form-panel .wpcf7-form input[type="submit"],
.contact-form-panel .wpcf7-form .wpcf7-submit {
    display: inline-block;
    width: auto;
    margin-top: 0.5rem;
    padding: 1rem 2.5rem;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: #000000;
    background-color: var(--color-gold);
    border: 1px solid var(--color-gold);
    border-radius: 0;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

.contact-form-panel .wpcf7-form input[type="submit"]:hover,
.contact-form-panel .wpcf7-form .wpcf7-submit:hover {
    background-color: transparent;
    color: var(--color-gold);
    box-shadow: 0 0 20px var(--color-gold-glow);
}

/* The little loading spinner CF7 shows while submitting. */
.contact-form-panel .wpcf7-spinner {
    margin: 0 0 0 1rem;
    background-color: var(--color-gold);
}


/*
 * ============================================================
 * 6. CONTACT FORM 7 — VALIDATION & RESPONSE MESSAGES
 * ============================================================
 * CF7 shows a small tip under invalid fields and a summary line
 * at the bottom of the form. Restyle both for the dark theme.
 * ============================================================
 */

/* Invalid field — red border so the error reads clearly. */
.contact-form-panel .wpcf7-form input.wpcf7-not-valid,
.contact-form-panel .wpcf7-form textarea.wpcf7-not-valid,
.contact-form-panel .wpcf7-form select.wpcf7-not-valid {
    border-color: #e0564f;
}

/* The inline "this field is required" tip. */
.contact-form-panel .wpcf7-not-valid-tip {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: #e0564f;
}

/* The summary response line at the bottom of the form. */
.contact-form-panel .wpcf7-response-output {
    margin: 1.5rem 0 0;
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-border);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text);
    border-radius: 0;
}

/* Validation error summary. */
.contact-form-panel .wpcf7-form.invalid .wpcf7-response-output,
.contact-form-panel .wpcf7-form.unaccepted .wpcf7-response-output,
.contact-form-panel .wpcf7-form.payment-required .wpcf7-response-output {
    border-color: #e0564f;
    color: #f0a09b;
}

/* Successful send. Stays on-brand with a gold accent. */
.contact-form-panel .wpcf7-form.sent .wpcf7-response-output {
    border-color: var(--color-gold);
    color: var(--color-gold);
}


/*
 * ============================================================
 * 7. RESPONSIVE
 * ============================================================
 */

@media (max-width: 880px) {

    /* Stack info above the form on tablet / mobile. */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .contact-form-panel { padding: 1.75rem; }

    /* Side-by-side field rows collapse to a single column. */
    .contact-form-panel .wpcf7-form .cf-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media (max-width: 600px) {
    .contact-hero { min-height: 44vh; }
    .contact-form-panel { padding: 1.5rem; }
}