/* ============================================================
   FloreData — Contact page ("Get in Touch")
   Spec: floredata/design/specs/page-contact.md
   ============================================================ */

/* The Contact body is a ROUNDED Dirty-Cream CARD inset on the light-grey page
   (per .ai p5 — rounded corners, grey gutter showing around it), not full-bleed.
   The fixed header pill floats over the top of the card. */
body.fd-page-contact { background: var(--wp--preset--color--dirty-cream); }          /* cream page bg → no white gutter/footer-gap (Sandro 2026-06-28) */
body.fd-page-contact #fd-main { padding-top: 0; background: var(--wp--preset--color--dirty-cream); }

.fd-section--contact {
    background: var(--wp--preset--color--dirty-cream);   /* var(--wp--preset--color--dirty-cream) */
    margin: 0;                                           /* full-bleed — was 16px 24px gutter (Sandro 2026-06-28) */
    border-radius: 0;                                    /* was 40px rounded card */
    padding: clamp(120px, 11vw, 172px) clamp(1.5rem, 4vw, 80px) clamp(56px, 6vw, 84px);
}

.fd-contact__grid {
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.fd-contact__left  { padding-right: clamp(2rem, 4vw, 72px); }
.fd-contact__right {
    border-left: 1px solid rgba(40, 40, 57, 0.14);  /* the .ai x=960 hairline — --line (var(--wp--preset--color--line)) was invisible on cream */
    padding-left: clamp(2rem, 4vw, 72px);
}

/* H1 — Bold Italic display (override the Light-300 inner-page H1) */
.fd-contact__title {
    font-family: var(--wp--preset--font-family--satoshi);
    font-weight: 700;
    font-style: italic;
    font-size: clamp(3rem, 1.6rem + 5vw, 5.97rem);   /* 48 → 95.5px */
    line-height: 1;
    letter-spacing: -0.02em;
    color: #000;
    margin: 0 0 20px;
}

/* green-highlighted strapline (Sage band behind italic text) */
.fd-contact__strap { margin: 0 0 26px; }
.fd-contact__strap .fd-hl {
    background: var(--wp--preset--color--sage);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 4px 8px;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(1.25rem, 1rem + 0.7vw, 1.875rem);   /* 20 → 30px */
    color: var(--wp--preset--color--text);
    line-height: 1.5;
}

.fd-contact__lead {
    font-weight: 500;
    font-size: clamp(1rem, 0.85rem + 0.5vw, 1.5rem);     /* 16 → 24px */
    line-height: 1.35;
    color: var(--wp--preset--color--text);
    max-width: 32ch;
    margin: 0 0 30px;
}
.fd-contact__form-title {
    font-weight: 700;
    font-style: italic;
    font-size: clamp(1.25rem, 1rem + 0.7vw, 1.875rem);   /* 30px */
    color: var(--wp--preset--color--text);
    margin: 0 0 16px;
}

/* NEW tangerine CTA variant + white circle arrow */
.fd-btn--tangerine {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    width: fit-content;
    background: var(--wp--preset--color--tangerine);
    color: var(--wp--preset--color--text);
    font-family: var(--wp--preset--font-family--satoshi);
    font-weight: 700;
    font-size: 1.22rem;                                  /* 19.5px */
    line-height: 1;
    padding: 13px 13px 13px 26px;
    border: none;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.fd-btn--tangerine:hover { background: #f7c49a; transform: translateY(-1px); }
.fd-btn--tangerine:focus-visible { outline: 2px solid var(--wp--preset--color--text); outline-offset: 3px; }

.fd-arrow-circle {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    flex: none;
}
.fd-arrow-circle svg { width: 18px; height: 18px; display: block; }

/* socials + contact lines */
.fd-contact__socials { display: flex; gap: 16px; list-style: none; margin: 28px 0 18px; padding: 0; }
.fd-contact__socials a {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px;            /* a11y touch target; the 28px icon stays centred */
    color: var(--wp--preset--color--surface-dark);
    transition: color 0.15s ease, transform 0.15s ease;
}
.fd-contact__socials a:hover { color: var(--wp--preset--color--primary); transform: translateY(-2px); }
.fd-contact__socials a:focus-visible { outline: 2px solid var(--wp--preset--color--surface-dark); outline-offset: 4px; border-radius: 6px; }
.fd-contact__socials svg { width: 28px; height: 28px; display: block; }

.fd-contact__lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.fd-contact__lines li { display: inline-flex; align-items: center; gap: 14px; }
.fd-contact__lines a { font-weight: 700; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); color: #000; text-decoration: none; }
.fd-contact__lines a:hover { color: var(--wp--preset--color--primary); }
.fd-contact__lines svg { width: 26px; height: 26px; flex: none; color: var(--wp--preset--color--surface-dark); }

/* --- form ---
   Scoped under .fd-contact-form so the field bg/border beat GeneratePress's
   `input[type="text"]{background:#fff;border:…}` (0,1,1) — a bare `.fd-field`
   (0,1,0) lost, which is why Name/Email rendered white while the textarea
   (un-styled by GP) stayed grey. */
.fd-contact-form { display: flex; flex-direction: column; gap: 12px; }
.fd-contact-form .fd-field {
    --fd-field: #DCDCE1;                 /* clean light-grey field (was #8f8f94 + white text = 3.1:1, read unfinished) */
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--fd-field);
    border: 1px solid rgba(40, 40, 57, 0.12);
    border-radius: 16px;                 /* consistent radius across ALL fields (inputs + textarea) */
    padding: 16px 22px;
    font-family: var(--wp--preset--font-family--satoshi);
    font-weight: 500;
    font-size: clamp(1.05rem, 0.9rem + 0.4vw, 1.5rem);
    color: #282839;                      /* dark ink → 10.7:1 on the light field */
    line-height: 1.2;
    box-shadow: none;
}
.fd-contact-form .fd-field::placeholder { color: #5f5f6a; opacity: 1; }   /* legible 4.75:1 — not washed-out white */
.fd-contact-form .fd-field:focus { background-color: var(--fd-field); }
.fd-contact-form .fd-field:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }
.fd-contact-form .fd-field--area { border-radius: 16px; min-height: 200px; resize: vertical; line-height: 1.45; }
.fd-contact-form__submit { width: 100%; justify-content: center; margin-top: 8px; padding-left: 26px; }

/* honeypot — hidden from everyone but bots */
.fd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* form feedback */
.fd-formnote { border-radius: 14px; padding: 14px 20px; font-weight: 600; margin: 0 0 16px; }
.fd-formnote--ok  { background: var(--wp--preset--color--sage);   color: var(--wp--preset--color--growth); }
.fd-formnote--err { background: var(--wp--preset--color--rose-milk); color: var(--wp--preset--color--text); }

/* active-nav: CONTACT US becomes a Tangerine pill on this page (.ai) */
body.fd-page-contact .fd-header__cta {
    background: var(--wp--preset--color--tangerine);
    color: var(--wp--preset--color--text);
}
body.fd-page-contact .fd-header__cta:hover { background: #f7c49a; color: var(--wp--preset--color--text); }

/* --- office map (keyless Google embed; subtle on-brand desaturation + a
       floating address card — researched "great site" pattern: map stays
       interactive, brand card carries the info) ------------------------------ */
.fd-contact__map {
    position: relative;
    max-width: 1440px;
    margin: clamp(48px, 6vw, 88px) auto 0;
    height: clamp(300px, 40vw, 480px);
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(40, 40, 57, 0.12);
    box-shadow: 0 24px 60px -28px rgba(40, 40, 57, 0.45);
    background: #e9e7e0;                       /* placeholder tone while the iframe loads */
}
.fd-contact__map-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    filter: grayscale(0.22) contrast(1.03);   /* tones down loud Google colours → reads on-brand */
}
.fd-contact__map-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;                      /* map stays fully pan/zoomable */
    background:
        linear-gradient(180deg, rgba(40, 40, 57, 0.10) 0%, rgba(40, 40, 57, 0) 20%),
        linear-gradient(0deg, rgba(102, 49, 225, 0.14) 0%, rgba(102, 49, 225, 0) 30%);
}
.fd-contact__map-card {
    position: absolute;
    left: clamp(16px, 2.2vw, 30px);
    bottom: clamp(16px, 2.2vw, 30px);
    max-width: 290px;
    background: var(--wp--preset--color--background);
    border-radius: 18px;
    padding: 20px 24px 22px;
    box-shadow: 0 18px 44px -16px rgba(40, 40, 57, 0.4);
}
.fd-contact__map-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-weight: 700;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--wp--preset--color--primary);
}
.fd-contact__map-label svg { width: 20px; height: 20px; flex: none; }
.fd-contact__map-addr {
    margin: 0 0 12px;
    font-weight: 500;
    font-size: 1.02rem;
    line-height: 1.42;
    color: var(--wp--preset--color--text);
}
.fd-contact__map-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--wp--preset--color--surface-dark);
    text-decoration: none;
}
.fd-contact__map-link:hover { color: var(--wp--preset--color--primary); }
.fd-contact__map-link:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 3px; border-radius: 6px; }

/* --- responsive --- */
@media (max-width: 900px) {
    .fd-section--contact { margin: 12px; border-radius: 28px; padding-top: 116px; }
    .fd-contact__grid { grid-template-columns: 1fr; gap: 36px; }
    .fd-contact__right { border-left: none; padding-left: 0; }
    .fd-contact__left { padding-right: 0; }
    .fd-contact-form .fd-field--area { min-height: 140px; }   /* tighter textarea on small screens */
}

@media (max-width: 640px) {
    /* stack: map on top, address card as a clean bar beneath it (no floating
       card eating the small map) */
    .fd-contact__map { height: auto; border-radius: 20px; margin-top: clamp(36px, 9vw, 56px); }
    .fd-contact__map-frame { height: 260px; }
    .fd-contact__map-overlay { display: none; }
    .fd-contact__map-card {
        position: static;
        max-width: none;
        border-radius: 0;
        box-shadow: none;
        padding: 18px 20px 20px;
    }
}