/* Contact page styles.
   Moved out of an inline <style> block that sat at the END of pages/contact.php,
   after the page content: on slower phones the form was painted unstyled and
   then jumped into place (Cumulative Layout Shift ≈ 0.65). Loading the same
   rules in the <head> means the first paint is already styled. */
/* ── CONTACT STYLES ── */
.contact-page { background: var(--white); padding-bottom: 100px; }

.contact-hero {
    height: 60vh; background: var(--ink); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--white); position: relative; overflow: hidden;
}
.hero-content { position: relative; z-index: 2; padding: 0 24px; max-width: 800px; }
.hero-eyebrow { font-family: "Cormorant SC",serif; font-size: 12px; letter-spacing: .4em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 20px; }
.hero-title { font-family: "Cormorant Garamond",serif; font-size: clamp(40px, 6vw, 72px); font-weight: 300; line-height: 1.1; margin-bottom: 24px; }
.hero-sub { font-family: "EB Garamond",serif; font-size: 18px; color: rgba(255,255,255,.7); line-height: 1.6; }

.contact-container { max-width: 1400px; margin: 0 auto; padding: 0 40px; margin-top: -80px; position: relative; z-index: 10; }

.contact-grid {
    display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; background: var(--white); padding: 80px; box-shadow: 0 30px 60px rgba(0,0,0,.05);
}

.info-block { margin-bottom: 48px; }
.info-label { font-family: "Cormorant SC",serif; font-size: 10px; letter-spacing: .3em; color: var(--gold); text-transform: uppercase; display: block; margin-bottom: 16px; }
.info-h2 { font-family: "Cormorant Garamond",serif; font-size: 32px; font-weight: 400; color: var(--ink); line-height: 1.2; margin-bottom: 12px; }
.info-text { font-family: "EB Garamond",serif; font-size: 17px; color: var(--ink-mid); line-height: 1.8; }

.contact-social { display: flex; gap: 30px; margin-top: 20px; }
.social-link { font-family: "Cormorant SC",serif; font-size: 11px; letter-spacing: .2em; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 4px; transition: opacity .3s; }
.social-link:hover { opacity: .6; }

.contact-form-wrap { padding-left: 40px; border-left: 1px solid rgba(184,150,62,.15); position: relative; }
.form-row { display: flex; gap: 30px; margin-bottom: 24px; }
.form-group { flex: 1; display: flex; flex-direction: column; }
.form-group label { font-family: "Cormorant SC",serif; font-size: 10px; letter-spacing: .2em; color: var(--ink-light); text-transform: uppercase; margin-bottom: 10px; }
.form-group input, .form-group select, .form-group textarea {
    background: var(--cream); border: 1px solid transparent; padding: 14px 18px; font-family: "EB Garamond",serif; font-size: 16px; color: var(--ink); transition: all .3s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none; border-color: var(--gold); background: var(--white);
}
.form-group input.error, .form-group select.error, .form-group textarea.error {
    border-color: #c0392b !important; background: #fff5f4;
}

.submit-btn {
    background: var(--gold); color: var(--white); border: none; padding: 18px 48px; font-family: "Cormorant SC",serif; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; cursor: none; transition: all .3s; margin-top: 20px; position: relative;
}
.submit-btn:hover { background: var(--ink); }
.submit-btn:disabled { opacity: .55; cursor: none; pointer-events: none; }
.submit-btn.is-loading::after {
    content: ""; display:inline-block; width:12px; height:12px; margin-left:12px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius:50%;
    animation: bdk-spin .8s linear infinite; vertical-align: middle;
}
@keyframes bdk-spin { to { transform: rotate(360deg); } }

.contact-alert {
    padding: 14px 20px;
    font-family: "EB Garamond",serif;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 22px;
    border-radius: 2px;
}
.contact-alert.is-success {
    background: #f2f8ef;
    color: #2f5d2d;
    border-left: 3px solid #5a9a53;
}
.contact-alert.is-error {
    background: #fdf1ef;
    color: #7a2b21;
    border-left: 3px solid #c0392b;
}

.contact-map { margin-top: 80px; }
.map-container { background: var(--cream-mid); padding: 10px; border: 1px solid rgba(184,150,62,.1); position: relative; }

/* ── Map teaser (tap-to-load) ── */
.map-teaser {
    height: 450px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(160deg, var(--cream) 0%, var(--cream-mid) 100%);
    text-align: center; padding: 24px;
}
.map-teaser-pin { width: 40px; height: 40px; margin-bottom: 6px; }
.map-teaser-pin svg { width: 100%; height: 100%; fill: var(--gold); }
.map-teaser-title { font-family: "Cormorant Garamond",serif; font-size: 20px; color: var(--ink); }
.map-teaser-sub { font-family: "EB Garamond",serif; font-style: italic; font-size: 15px; color: var(--ink-light); margin-bottom: 14px; }
.map-teaser-btn {
    font-family: "Cormorant SC",serif; font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
    background: var(--gold); color: var(--white); border: none; padding: 14px 32px; cursor: pointer; transition: background .3s;
}
.map-teaser-btn:hover { background: var(--ink); }

/* ── Address / hours / directions beneath the map ── */
.map-details {
    display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px;
    padding: 28px 10px 0;
}
.map-detail-item { display: flex; flex-direction: column; gap: 4px; }
.map-detail-label {
    font-family: "Cormorant SC",serif; font-size: 10px; letter-spacing: .28em;
    color: var(--gold); text-transform: uppercase;
}
.map-detail-item a, .map-detail-item span:not(.map-detail-label) {
    font-family: "EB Garamond",serif; font-size: 15.5px; color: var(--ink-mid); text-decoration: none;
}
.map-detail-item a:hover { color: var(--gold); }
.map-directions-btn {
    font-family: "Cormorant SC",serif; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
    color: var(--ink); border: 1px solid rgba(184,150,62,.35); padding: 12px 26px;
    text-decoration: none; transition: all .3s; margin-left: auto;
}
.map-directions-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--white); }

@media (max-width: 1024px) {
    .contact-grid { grid-template-columns: 1fr; gap: 60px; padding: 40px; }
    .contact-form-wrap { padding-left: 0; border-left: none; border-top: 1px solid rgba(184,150,62,.15); padding-top: 60px; }
}
@media (max-width: 768px) {
    .contact-container { padding: 0 20px; margin-top: -40px; }
    .form-row { flex-direction: column; gap: 20px; }
    .contact-hero { height: 50vh; }
    .contact-page { padding-bottom: 48px; }
    .contact-map { margin-top: 40px; }
    .map-teaser { height: 320px; }
    .map-details { padding-top: 22px; }
    .map-directions-btn { margin-left: 0; width: 100%; text-align: center; }
}

/* ── APPOINTMENT MODAL ── */
.modal-overlay {
    position: fixed; inset: 0; z-index: 990;
    background: rgba(8,6,3,.86);
    backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .4s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box {
    background: var(--white);
    max-width: 580px; width: 92%;
    padding: 60px 56px 52px;
    position: relative;
    transform: translateY(22px);
    transition: transform .4s;
    max-height: 90vh;
    overflow-y: auto;
}
.modal-overlay.open .modal-box { transform: translateY(0); }
.modal-close {
    position: absolute; top: 22px; right: 26px;
    background: none; border: none; cursor: pointer;
    font-family: "Cormorant Garamond",serif;
    font-size: 24px; color: var(--ink-light);
    line-height: 1; transition: color .3s;
}
.modal-close:hover { color: var(--ink); }
.modal-eyebrow {
    font-family: "Cormorant SC",serif;
    font-size: 9.5px; letter-spacing: .48em;
    color: var(--gold); text-transform: uppercase;
    display: block; margin-bottom: 16px;
}
.modal-title {
    font-family: "Cormorant Garamond",serif;
    font-size: clamp(26px,3vw,36px);
    font-weight: 300; color: var(--ink);
    line-height: 1.1; margin-bottom: 0;
}
.modal-title em { font-style: italic; }
.modal-rule {
    width: 36px; height: 1px;
    background: rgba(184,150,62,.3);
    margin: 24px 0;
}
.modal-body {
    font-family: "EB Garamond",serif;
    font-size: 17.5px; line-height: 1.92;
    color: var(--ink-mid); margin-bottom: 14px;
}
.modal-body-i {
    font-family: "Cormorant Garamond",serif;
    font-style: italic; font-size: 16.5px;
    color: var(--ink-light); line-height: 1.85;
    margin-bottom: 26px;
}
.modal-form {
    display: flex; flex-direction: column;
    gap: 14px; margin-bottom: 20px;
}
.modal-field { display: flex; flex-direction: column; gap: 6px; }
.modal-label {
    font-family: "Cormorant SC",serif;
    font-size: 9px; letter-spacing: .36em;
    color: var(--ink-light); text-transform: uppercase;
}
.modal-input {
    border: none;
    border-bottom: 1px solid rgba(107,100,89,.22);
    padding: 9px 0;
    font-family: "EB Garamond",serif;
    font-size: 17px; color: var(--ink);
    background: transparent; outline: none;
    transition: border-color .3s;
}
.modal-input::placeholder { color: rgba(107,100,89,.38); }
.modal-input:focus { border-bottom-color: var(--gold); }
.modal-actions { display: flex; flex-direction: column; gap: 12px; }
.modal-btn-wa {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    background: #1A1A1A; color: rgba(240,228,195,.9);
    font-family: "Cormorant SC",serif;
    font-size: 10.5px; letter-spacing: .28em;
    text-transform: uppercase;
    padding: 16px 32px; border: none; cursor: pointer;
    text-decoration: none; transition: background .3s;
}
.modal-btn-wa:hover { background: #111; }
.modal-btn-wa svg { width: 18px; height: 18px; flex-shrink: 0; }
.modal-btn-email {
    font-family: "Cormorant SC",serif;
    font-size: 10px; letter-spacing: .26em;
    color: var(--ink-light); text-transform: uppercase;
    background: none;
    border: 1px solid rgba(107,100,89,.2);
    padding: 13px 28px; cursor: pointer;
    text-decoration: none; text-align: center;
    transition: all .3s;
}
.modal-btn-email:hover {
    border-color: rgba(184,150,62,.45);
    color: var(--gold);
}
.modal-note {
    font-family: "Cormorant Garamond",serif;
    font-style: italic; font-size: 13.5px;
    color: rgba(107,100,89,.5);
    text-align: center; margin-top: 6px;
    line-height: 1.7;
}
@media (max-width: 640px) {
    .modal-box { padding: 44px 28px 36px; }
}