/**
 * Contact Page Styles
 *
 * Figma: Contact Us (386:9066)
 * Desktop: 386:9345 (1920px) | Mobile: 481:15899 (430px)
 *
 * Structure:
 *   Page bg: white + gradient #E4E1F2 → transparent (top 23%)
 *   Hero: flex-row, gap 220px, pad-top 120px
 *     Left (500px): title + subtitle + illustration SVG
 *     Right (675px): form card (radius 16, border #E6E3EB, pad 40)
 *   Map: bg #1D004B, decorative ellipse
 *     Title + world map + overlay SVG with dots+labels
 */

/* Page background: white base + light purple gradient top */
.contact-page {
    background: #FFFFFF;
    background-image:
        linear-gradient(to bottom, #E4E1F2 0%, rgba(228, 225, 242, 0) 23%);
}

/* ===== Hero Section ===== */
/* Figma: 386:9652 — flex-row, gap 220px, pad-top 120px */
.contact-hero {
    padding-top: 120px;
    padding-bottom: 40px;
}

.contact-hero__inner {
    display: flex;
    flex-direction: row;
    gap: 220px;
    align-items: flex-start;
    justify-content: center;
}

/* Left column: title + illustration */
/* Figma: 481:16488 — flex-col, gap 60px, width 500px */
.contact-hero__left {
    display: flex;
    flex-direction: column;
    gap: 60px;
    width: 500px;
    flex-shrink: 0;
}

/* Heading group */
/* Figma: 386:9653 — flex-col, gap 20px */
.contact-hero__heading {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Title: H1 */
/* Figma: 386:9657 — 60/600/120%/0.3px, #1D004B */
.contact-hero__title {
    font: var(--font-h1);
    letter-spacing: var(--font-h1-spacing);
    color: var(--color-purple-dark, #1D004B);
    margin: 0;
}

/* Subtitle */
/* Figma: 386:9661 — 18/300/140%, #000 */
.contact-hero__subtitle {
    font: var(--font-body);
    color: var(--color-text, #000);
    margin: 0;
}

/* Illustration SVG */
.contact-hero__illustration {
    width: 500px;
}

.contact-hero__illustration img {
    width: 100%;
    height: auto;
}

/* ===== Form Card ===== */
/* Figma: 386:9707 — 675px, radius 16px, border 1px solid #E6E3EB, pad 40px, gap 24px */
.contact-hero__form-wrapper {
    width: 675px;
    flex-shrink: 0;
    padding: 40px;
    border-radius: 16px;
    border: 1px solid #E6E3EB;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Form title */
/* Figma: 386:9709 — H3 28/600/120%, #1D004B, centered */
.contact-hero__form-title {
    font: var(--font-h3);
    color: var(--color-purple-dark, #1D004B);
    text-align: center;
    margin: 0;
}

/* Form contents */
.contact-hero__form {
    width: 100%;
}

/* ===== HubSpot Iframe Sizing ===== */
/* Form styles injected into iframe via cssRequired (hubspot-form.css) */
.contact-hero__form iframe {
    width: 100% !important;
    min-height: 600px;
    border: none !important;
}

/* ===== Map Section ===== */
/* Figma: 481:15488 — bg #1D004B, overflow hidden */
.contact-map {
    background: var(--color-purple-dark, #1D004B);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

/* Decorative ellipse */
/* Figma: 481:15886 — 1486px circle, gradient, opacity 0.6 */
.contact-map__bg-ellipse {
    display: none;
}

/* Map title */
/* Figma: 481:15606 — H2, white, centered */
.contact-map__title {
    font: var(--font-h2);
    letter-spacing: var(--font-h2-spacing);
    color: #FFFFFF;
    text-align: center;
    margin: 0 0 60px;
    position: relative;
    z-index: 1;
}

/* Map visual: world map + overlay SVG stacked */
.contact-map__visual {
    position: relative;
    max-width: 1420px;
    margin: 0 auto;
    z-index: 1;
}

.contact-map__world {
    width: 100%;
    height: auto;
}

/* ===== Office Markers (dynamic HTML/CSS) ===== */
/* Each marker: card (city+country) → stem line → green dot */
/* Positioned by left/top % from ACF, dot is the anchor point */

.contact-map__marker {
    position: absolute;
    z-index: 2;
}

/* White label card — hidden by default, shown on dot click */
/* Positioned top-right of dot with 10px gap */
.contact-map__marker-card {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    background: #FFFFFF;
    border-radius: 4px;
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.contact-map__marker:hover {
    z-index: 10;
}

.contact-map__marker:hover .contact-map__marker-card {
    opacity: 1;
    pointer-events: auto;
}

.contact-map__marker-city {
    font-family: "Funnel Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: 0.08px;
    color: #000000;
}

.contact-map__marker-country {
    font-family: "Funnel Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: 0.08px;
    color: var(--color-primary, #7336E3);
}

/* Vertical stem connecting card to dot */
.contact-map__marker-stem {
    width: 2px;
    height: 16px;
    background: rgba(167, 223, 102, 0.6);
}

/* Green dot — clickable with pulse */
/* Figma: circle r=5.15, fill #A7DF66 */
.contact-map__marker-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #A7DF66;
    flex-shrink: 0;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
}

.contact-map__marker-dot::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: rgba(167, 223, 102, 0.4);
    animation: dot-pulse 2.5s ease-in-out infinite;
}

@keyframes dot-pulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(2.2); opacity: 0; }
}

/* ===== JP Map variant ===== */
.contact-map--jp .contact-map__visual {
    width: 401px;
    max-width: 100%;
    margin: 0 auto;
}


/* ===== Responsive ===== */

@media (max-width: 1440px) {
    .contact-hero__inner {
        gap: 120px;
    }
}

@media (max-width: 1280px) {
    .contact-hero__inner {
        gap: 60px;
    }

    .contact-hero__left {
        width: auto;
        flex: 1;
    }

    .contact-hero__form-wrapper {
        width: auto;
        flex: 1;
        max-width: 675px;
    }
}

@media (max-width: 1024px) {
    .contact-hero__inner {
        flex-direction: column;
        gap: 40px;
        align-items: center;
    }

    .contact-hero__left {
        width: 100%;
        max-width: 675px;
        gap: 40px;
        align-items: center;
        text-align: center;
    }

    .contact-hero__heading {
        align-items: center;
    }

    .contact-hero__illustration {
        width: 400px;
    }

    .contact-hero__form-wrapper {
        width: 100%;
        max-width: 675px;
    }
}

@media (max-width: 768px) {
    .contact-hero {
        padding-top: 60px;
        padding-bottom: 40px;
    }

    .contact-hero__title {
        font: var(--font-h1);
        letter-spacing: var(--font-h1-spacing);
    }

    .contact-hero__left {
        gap: 30px;
    }

    .contact-hero__illustration {
        width: 300px;
    }

    .contact-hero__form-wrapper {
        padding: 24px;
        border-radius: 12px;
    }

    .contact-hero__form-title {
        font-size: 22px;
    }

    .contact-map {
        padding: 60px 0;
    }

    .contact-map__title {
        font: var(--font-h3);
        letter-spacing: var(--font-h3-spacing);
        margin-bottom: 40px;
    }

    .contact-map__bg-ellipse {
        width: 514px;
        height: 514px;
    }

    /* Scale down markers on mobile */
    .contact-map__marker-card {
        padding: 6px 8px;
    }

    .contact-map__marker-city {
        font-size: 11px;
    }

    .contact-map__marker-country {
        font-size: 9px;
    }

    .contact-map__marker-stem {
        height: 8px;
    }

    .contact-map__marker-dot {
        width: 6px;
        height: 6px;
    }

    /* Form 2-col → 1-col on mobile */
    .contact-hero__form fieldset.form-columns-2 {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .contact-hero__form .hs-input,
    .contact-hero__form input[type="text"],
    .contact-hero__form input[type="email"],
    .contact-hero__form input[type="tel"],
    .contact-hero__form select {
        height: 48px !important;
        font-size: 15px !important;
    }

    .contact-hero__form .hs-button,
    .contact-hero__form input[type="submit"] {
        padding: 14px 20px !important;
        font-size: 18px !important;
    }
}

@media (max-width: 480px) {
    .contact-hero__form-wrapper {
        padding: 20px 16px;
    }

    .contact-hero__illustration {
        width: 100%;
    }
}