/* ============================================
   KAYJAH DESIGN STUDIO — Contact Page
   kayjah/css/contact.css

   Split layout: dark info panel (left) + consultation form (right).
   Decorative map section with pulsing pin.
   WhatsApp floating button.
   Converted from contact.html.
   ============================================ */


/* ── Contact-only nav override (static, not fixed) ────────── */

.page-template-page-contact .nav {
  position: relative;
}

/* ── Scoped Variables ──────────────────────────────────────── */

.contact-split,
.contact-map,
.contact-whatsapp {
    --ct-dark:         var(--page-dark);
    --ct-dark-alt:     var(--page-dark-alt);
    --ct-dark-2:       #001E2B;
    --ct-accent:       var(--gold);
    --ct-accent-light: var(--gold-light);
    --ct-accent-dim:   var(--gold-muted);
    --ct-light:        var(--surface-0);
    --ct-light-2:      #E8E2D6;
    --ct-body:         #6B6B6B;
    --ct-body-light:   var(--body-on-dark);
    --ct-serif:        var(--serif);
    --ct-sans:         var(--sans);
}


/* ── Split Layout ──────────────────────────────────────────── */

.contact-split {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    min-height:            calc(100vh - 88px);
}


/* ── Overline ──────────────────────────────────────────────── */

.contact-overline {
    font-family:    var(--ct-sans);
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color:          var(--ct-accent);
    display:        flex;
    align-items:    center;
    gap:            12px;
}

.contact-overline::before {
    content:    '';
    display:    block;
    width:      28px;
    height:     1.5px;
    background: var(--ct-accent);
}


/* ── Info Panel (Dark Left Side) ───────────────────────────── */

.contact-info {
    background:      var(--ct-dark);
    padding:         clamp(48px, 6vw, 80px) clamp(32px, 5vw, 72px);
    display:         flex;
    flex-direction:  column;
    justify-content: center;
}

.contact-info__heading {
    font-family: var(--ct-serif);
    font-size:   clamp(32px, 4vw, 48px);
    font-weight: 300;
    color:       var(--ct-light);
    line-height: 1.12;
    margin:      16px 0 20px;
}

.contact-info__heading em {
    font-style: italic;
    color:      var(--ct-accent);
}

.contact-info__desc {
    font-family:   var(--ct-sans);
    font-size:     15px;
    color:         var(--ct-body-light);
    line-height:   1.8;
    max-width:     400px;
    margin-bottom: 48px;
}


/* ── Contact Detail Rows ───────────────────────────────────── */

.contact-detail {
    display:       flex;
    gap:           18px;
    align-items:   flex-start;
    margin-bottom: 28px;
}

.contact-detail__icon {
    width:           40px;
    height:          40px;
    border:          1px solid rgba(200,169,126,0.2);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    color:           var(--ct-accent);
    transition:      border-color 0.3s, background 0.3s;
}

.contact-detail:hover .contact-detail__icon {
    border-color: var(--ct-accent);
    background:   rgba(200,169,126,0.06);
}

.contact-detail__label {
    font-family:    var(--ct-sans);
    font-size:      10px;
    font-weight:    600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color:          var(--ct-accent);
    margin-bottom:  4px;
}

.contact-detail__value {
    font-family: var(--ct-sans);
    font-size:   14px;
    color:       var(--ct-body-light);
    line-height: 1.6;
}

.contact-detail__value a {
    color:      var(--ct-body-light);
    transition: color 0.3s;
}

.contact-detail__value a:hover {
    color: var(--ct-accent);
}


/* ── Social Links ──────────────────────────────────────────── */

.contact-socials {
    display:    flex;
    gap:        10px;
    margin-top: 48px;
}

.contact-social-btn {
    width:           38px;
    height:          38px;
    color:           var(--ct-body-light);
    border:          1px solid rgba(200,169,126,0.15);
    background:      none;
    transition:      all 0.3s ease;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.contact-social-btn svg {
    display:     block;
    flex-shrink: 0;
}

.contact-social-btn:hover {
    border-color: var(--ct-accent);
    color:        var(--ct-accent);
    background:   rgba(200,169,126,0.06);
}


/* ── Form Panel (Light Right Side) ─────────────────────────── */

.contact-form-panel {
    padding:         clamp(48px, 6vw, 80px) clamp(32px, 5vw, 72px);
    display:         flex;
    flex-direction:  column;
    justify-content: center;
}

.contact-form__title {
    font-family:   var(--ct-serif);
    font-size:     30px;
    font-weight:   400;
    color:         var(--ct-dark);
    margin-bottom: 8px;
}

.contact-form__subtitle {
    font-family:   var(--ct-sans);
    font-size:     13px;
    color:         var(--ct-body);
    margin-bottom: 40px;
    line-height:   1.6;
}


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

.contact-form__row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   20px;
    margin-bottom:         20px;
}

.contact-form__group--full {
    grid-column: 1 / -1;
}

.contact-form__label {
    display:        block;
    font-family:    var(--ct-sans);
    font-size:      10px;
    font-weight:    600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color:          var(--ct-dark-alt);
    margin-bottom:  8px;
}

.contact-form__input,
.contact-form__select,
.contact-form__textarea {
    width:       100%;
    padding:     15px 18px;
    border:      1px solid rgba(0,0,0,0.08);
    background:  #fff;
    font-family: var(--ct-sans);
    font-size:   14px;
    color:       var(--ct-dark);
    transition:  border-color 0.3s, box-shadow 0.3s;
}

.contact-form__input:focus-visible,
.contact-form__select:focus-visible,
.contact-form__textarea:focus-visible {
    outline: 2px solid var(--ct-accent);
    outline-offset: 2px;
}

.contact-form__input:focus:not(:focus-visible),
.contact-form__select:focus:not(:focus-visible),
.contact-form__textarea:focus:not(:focus-visible) {
    outline: none;
}

.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
    border-color: var(--ct-accent);
    box-shadow:   0 0 0 3px rgba(200,169,126,0.12);
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
    color: #bbb;
}

.contact-form__select {
    appearance:          none;
    -webkit-appearance:  none;
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23999' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 16px center;
    padding-right:       40px;
}

.contact-form__textarea {
    resize:     vertical;
    min-height: 120px;
}


/* ── Submit Button ─────────────────────────────────────────── */

.contact-form__submit {
    width:          100%;
    padding:        18px;
    border:         none;
    background:     var(--ct-accent);
    color:          var(--ct-dark);
    font-family:    var(--ct-sans);
    font-size:      12px;
    font-weight:    600;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor:         pointer;
    transition:     background 0.3s, transform 0.2s;
    margin-top:     8px;
}

.contact-form__submit:hover {
    background: #b89a6f;
}

.contact-form__submit:active {
    transform: scale(0.98);
}


/* ── Form Success State ────────────────────────────────────── */

.contact-form__success {
    text-align: center;
    padding:    60px 20px;
    display:    none;
}

.contact-form__success.visible {
    display: block;
}

.contact-form__success-icon {
    width:           68px;
    height:          68px;
    border-radius:   50%;
    background:      var(--ct-accent-light);
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          0 auto 24px;
    animation:       contactSuccessPop 0.5s cubic-bezier(.175,.885,.32,1.275) forwards;
}

.contact-form__success-icon svg {
    width:  28px;
    height: 28px;
}

.contact-form__success h3 {
    font-family:   var(--ct-serif);
    font-size:     32px;
    font-weight:   400;
    color:         var(--ct-dark);
    margin-bottom: 12px;
}

.contact-form__success p {
    font-family: var(--ct-sans);
    font-size:   15px;
    color:       var(--ct-body);
    line-height: 1.6;
}

@keyframes contactSuccessPop {
    0%   { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}


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

.contact-map__decorative {
    position:        relative;
    height:          380px;
    background:      var(--ct-dark-2);
    display:         flex;
    align-items:     center;
    justify-content: center;
    overflow:        hidden;
}

.contact-map__embed {
    width:  100%;
    height: 380px;
}

.contact-map__embed iframe {
    width:   100%;
    height:  100%;
    border:  0;
    display: block;
}

.contact-map__grid {
    position:         absolute;
    inset:            0;
    opacity:          0.06;
    background-image:
        linear-gradient(rgba(200,169,126,0.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200,169,126,0.4) 1px, transparent 1px);
    background-size:  48px 48px;
}

.contact-map__pin {
    position:   relative;
    z-index:    2;
    text-align: center;
}

.contact-map__dot {
    width:         16px;
    height:        16px;
    border-radius: 50%;
    background:    var(--ct-accent);
    margin:        0 auto 16px;
    position:      relative;
    animation:     contactMapPulse 2.5s ease-in-out infinite;
}

.contact-map__dot::before {
    content:       '';
    position:      absolute;
    inset:         -8px;
    border-radius: 50%;
    border:        1.5px solid rgba(200,169,126,0.3);
}

.contact-map__dot::after {
    content:       '';
    position:      absolute;
    inset:         -18px;
    border-radius: 50%;
    border:        1px solid rgba(200,169,126,0.12);
}

@keyframes contactMapPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200,169,126,0.4); }
    50%      { box-shadow: 0 0 0 12px rgba(200,169,126,0); }
}

.contact-map__label {
    font-family:   var(--ct-sans);
    font-size:     14px;
    font-weight:   500;
    color:         var(--ct-light);
    margin-bottom: 6px;
}

.contact-map__sublabel {
    font-family: var(--ct-sans);
    font-size:   12px;
    color:       var(--ct-body-light);
}

.contact-map__directions {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    margin-top:     20px;
    font-family:    var(--ct-sans);
    font-size:      12px;
    font-weight:    500;
    color:          var(--ct-accent);
    padding:        10px 24px;
    border:         1px solid rgba(200,169,126,0.25);
    background:     none;
    transition:     all 0.3s;
}

.contact-map__directions:hover {
    background:   rgba(200,169,126,0.08);
    border-color: var(--ct-accent);
}


/* ── WhatsApp Float ────────────────────────────────────────── */

.contact-whatsapp {
    position:        fixed;
    bottom:          28px;
    right:           28px;
    width:           56px;
    height:          56px;
    border-radius:   50%;
    background:      #25D366;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      0 4px 16px rgba(37,211,102,0.3);
    z-index:         var(--z-whatsapp);
    transition:      transform 0.3s, box-shadow 0.3s;
}

.contact-whatsapp:hover {
    transform:  scale(1.08);
    box-shadow: 0 6px 24px rgba(37,211,102,0.4);
}

.contact-whatsapp svg {
    width:  26px;
    height: 26px;
    fill:   #fff;
}


/* ── Scroll Reveal ─────────────────────────────────────────── */

.contact-split .reveal {
    opacity:    0;
    transform:  translateY(30px);
    transition: opacity 0.7s cubic-bezier(.4,0,.2,1),
                transform 0.7s cubic-bezier(.4,0,.2,1);
}

.contact-split .reveal.visible {
    opacity:   1;
    transform: translateY(0);
}


/* ── Responsive: 1024px ────────────────────────────────────── */

@media (max-width: 1024px) {
    .contact-split {
        grid-template-columns: 1fr;
    }

    .contact-info {
        padding: 60px 32px;
    }

    .contact-form-panel {
        padding: 60px 32px;
    }
}


/* ── Responsive: 768px ─────────────────────────────────────── */

@media (max-width: 768px) {
    .contact-form__row {
        grid-template-columns: 1fr;
    }

    .contact-socials {
        flex-wrap: wrap;
    }

    .contact-map__decorative {
        height: 300px;
    }

    .contact-map__embed {
        height: 300px;
    }
}


/* ── Responsive: 480px ─────────────────────────────────────── */

@media (max-width: 480px) {
    .contact-info__heading {
        font-size: 32px;
    }

    .contact-info {
        padding: 48px 24px;
    }

    .contact-form-panel {
        padding: 48px 24px;
    }
}


/* ── Focus-Visible ────────────────────────────────────────── */

.contact-social-btn:focus-visible,
.contact-form__submit:focus-visible,
.contact-map__directions:focus-visible,
.contact-whatsapp:focus-visible {
    outline: 2px solid var(--ct-accent);
    outline-offset: 3px;
}

.contact-social-btn:focus:not(:focus-visible),
.contact-form__submit:focus:not(:focus-visible),
.contact-map__directions:focus:not(:focus-visible),
.contact-whatsapp:focus:not(:focus-visible) {
    outline: none;
}


/* ── Reduced Motion ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .contact-map__dot {
        animation: none;
    }

    .contact-form__success-icon {
        animation: none;
    }

    .contact-split .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}