/* ==========================================================================
   PAGE-CONTACT.CSS — Contact page only (banner, intro + info row,
   enquiry form + image, map + why-reach-out).
   Enqueued conditionally via dcinterior_is_contact_page() in
   functions.php, matching page-contact.php.
   Depends on variables/utilities in main.css.
   ========================================================================== */

/* ==========================================================================
   DIVINE CREATIONS — CONTACT PAGE
   01. CONTACT BANNER
   ========================================================================== */

.contact-banner {
    position: relative !important;
    overflow: hidden !important;

    /* IMPORTANT:
       Do NOT change the existing banner height here.
       Keep the height/min-height you already have.
    */

    background: #242520 !important;
    color: #ffffff !important;
}


/* --------------------------------------------------------------------------
   BANNER IMAGE
   -------------------------------------------------------------------------- */

.contact-banner-bg {
    position: absolute !important;
    inset: 0 !important;

    z-index: 0 !important;

    width: 100% !important;
    height: 100% !important;

    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;

    transform: scale(1.01) !important;
}


/* --------------------------------------------------------------------------
   DARK LEFT-TO-RIGHT SHADE
   This is the same principle used successfully on About page.
   -------------------------------------------------------------------------- */

.contact-banner::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    z-index: 1 !important;

    background: linear-gradient(
        90deg,
        rgba(18, 18, 15, 0.82) 0%,
        rgba(18, 18, 15, 0.62) 38%,
        rgba(18, 18, 15, 0.34) 70%,
        rgba(18, 18, 15, 0.18) 100%
    ) !important;

    pointer-events: none !important;
}


/* --------------------------------------------------------------------------
   BOTTOM DARK SHADE
   -------------------------------------------------------------------------- */

.contact-banner::after {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    z-index: 2 !important;

    background: linear-gradient(
        0deg,
        rgba(12, 12, 10, 0.72) 0%,
        rgba(12, 12, 10, 0.20) 44%,
        transparent 75%
    ) !important;

    pointer-events: none !important;
}


/* --------------------------------------------------------------------------
   IF THE PHP ALREADY CONTAINS .contact-banner-overlay
   We don't need a third overlay.
   -------------------------------------------------------------------------- */

.contact-banner-overlay {
    display: none !important;
}


/* --------------------------------------------------------------------------
   BANNER CONTENT
   -------------------------------------------------------------------------- */

.contact-banner-inner {
    position: relative !important;

    z-index: 5 !important;

    width: 100% !important;
    max-width: 1240px !important;

    margin: 0 auto !important;

    /*
     * Keep the existing vertical spacing if it is already correct.
     * These values reproduce the successful About-page positioning.
     */
    padding: 125px 30px 55px !important;

    box-sizing: border-box !important;
}


/* --------------------------------------------------------------------------
   BREADCRUMB
   -------------------------------------------------------------------------- */

.contact-banner .breadcrumb,
.contact-breadcrumb {
    position: relative !important;

    z-index: 6 !important;

    display: flex !important;
    align-items: center !important;

    gap: 10px !important;

    margin: 0 0 17px !important;
    padding: 0 !important;

    color: rgba(255, 255, 255, 0.84) !important;

    font-family:
        "Poppins",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 11px !important;
    font-weight: 400 !important;

    letter-spacing: 0.8px !important;
    line-height: 1.5 !important;
}


.contact-banner .breadcrumb a,
.contact-breadcrumb a {
    color: rgba(255, 255, 255, 0.84) !important;

    text-decoration: none !important;

    transition: color 0.25s ease !important;
}


.contact-banner .breadcrumb a:hover,
.contact-breadcrumb a:hover {
    color: #c9ad73 !important;
}


.contact-banner .breadcrumb span,
.contact-breadcrumb span {
    color: rgba(255, 255, 255, 0.75) !important;
}


.contact-banner .breadcrumb span[aria-current="page"],
.contact-breadcrumb span[aria-current="page"] {
    color: #c9ad73 !important;
}


/* --------------------------------------------------------------------------
   MAIN TITLE
   -------------------------------------------------------------------------- */

.contact-banner h1,
.contact-banner-title {
    position: relative !important;

    z-index: 6 !important;

    display: block !important;

    width: 100% !important;
    max-width: 850px !important;

    margin: 0 0 12px !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-family:
        "Playfair Display",
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: clamp(42px, 4.8vw, 64px) !important;

    font-weight: 500 !important;

    line-height: 1.08 !important;

    letter-spacing: -1px !important;

    text-shadow:
        0 2px 18px rgba(0, 0, 0, 0.40) !important;
}


/* --------------------------------------------------------------------------
   SUBTITLE
   -------------------------------------------------------------------------- */

.contact-banner p,
.contact-banner-subtitle {
    position: relative !important;

    z-index: 6 !important;

    display: block !important;

    max-width: 620px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: rgba(255, 255, 255, 0.92) !important;

    font-family:
        "Poppins",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 14px !important;

    font-weight: 300 !important;

    line-height: 1.8 !important;

    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.40) !important;
}


/* --------------------------------------------------------------------------
   RIGHT-SIDE STATEMENT
   -------------------------------------------------------------------------- */

.contact-banner-tag {
    position: absolute !important;

    right: 5% !important;
    bottom: 48px !important;

    z-index: 6 !important;

    display: block !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 0 0 17px !important;

    border-left: 1px solid #c9ad73 !important;

    color: rgba(255, 255, 255, 0.92) !important;

    font-family:
        "Poppins",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 9px !important;

    font-weight: 600 !important;

    letter-spacing: 2.5px !important;

    line-height: 1.8 !important;

    text-transform: uppercase !important;

    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.45) !important;
}

/* ---------- INTRO + INFO ROW ---------- */
.contact-intro{ padding:90px 0 70px; background:var(--color-cream); }
.contact-intro-head{
  display:grid; grid-template-columns:1fr 1.1fr auto; gap:40px; align-items:start; margin-bottom:56px;
}
.contact-intro-text{ font-size:0.92rem; color:#6b6156; align-self:center; }
.contact-signature{
  font-family:var(--font-heading); font-style:italic; color:var(--color-gold);
  font-size:1.15rem; line-height:1.4; text-align:right; position:relative; padding-bottom:14px;
}
.contact-signature::after{ content:''; position:absolute; right:0; bottom:0; width:34px; height:2px; background:var(--color-gold); }

.contact-info-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:30px;
}
.contact-info-item{ display:flex; align-items:flex-start; gap:14px; }
.contact-info-icon{
  flex-shrink:0; width:48px; height:48px; border-radius:50%; background:var(--color-gold-soft);
  display:flex; align-items:center; justify-content:center; font-size:1.15rem; color:var(--color-dark);
}
.contact-info-item h4{ font-family:var(--font-heading); font-size:0.98rem; margin-bottom:6px; }
.contact-info-item a, .contact-info-item span{ display:block; font-size:0.85rem; color:#6b6156; }
.contact-info-item a:hover{ color:var(--color-gold); }

/* ---------- FORM + IMAGE ---------- */
.contact-form-section{ padding:0 0 100px; background:var(--color-cream); }
.contact-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:stretch; }

.contact-form-card{
  background:#fff; border-radius:6px; padding:40px; box-shadow:0 10px 30px rgba(58,51,44,.06);
}
.contact-form-sub{ font-size:0.85rem; color:#8a8074; margin:14px 0 26px; }

.enquiry-form .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-field{ margin-bottom:18px; }
.form-field label{ display:block; font-size:0.8rem; color:#544c43; margin-bottom:8px; }
.form-field label span{ color:#c0392b; margin-left:2px; }
.form-field input,
.form-field select,
.form-field textarea{
  width:100%; padding:14px 16px; border:1px solid rgba(58,51,44,.15); border-radius:4px;
  background:var(--color-cream); font-family:var(--font-body); font-size:0.9rem; color:var(--color-text-dark);
  transition:border-color var(--transition), box-shadow var(--transition);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none; border-color:var(--color-gold); box-shadow:0 0 0 3px rgba(198,154,91,.15);
}
.form-field textarea{ resize:vertical; min-height:120px; }
.form-field select{ appearance:none; background-image:linear-gradient(45deg, transparent 50%, #8a8074 50%), linear-gradient(135deg, #8a8074 50%, transparent 50%); background-position:calc(100% - 20px) center, calc(100% - 15px) center; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }

.form-field input:invalid:not(:placeholder-shown){ border-color:#c0392b; }

/* Honeypot: visually and structurally hidden from real users/AT. */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-status{ min-height:20px; font-size:0.82rem; margin:6px 0 4px; }
.form-status.is-error{ color:#c0392b; }
.form-status.is-success{ color:#3f8e5a; }

.contact-form-image{ position:relative; border-radius:6px; overflow:hidden; min-height:340px; }
.contact-form-image img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.contact-form-image-tag{
  position:absolute; top:36px; right:32px; z-index:2;
  font-family:var(--font-heading); font-size:1.4rem; line-height:1.35; color:var(--color-cream);
  text-align:right;
}

/* ---------- MAP + WHY REACH OUT ---------- */
.contact-map-section{ padding:0 0 100px; background:var(--color-cream); }
.contact-map-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:30px; }

.contact-map{ position:relative; border-radius:6px; overflow:hidden; min-height:420px; }
.contact-map iframe{ position:absolute; inset:0; width:100%; height:100%; }
.map-info-card{
  position:absolute; top:28px; left:28px; z-index:2; width:260px;
  background:#fff; border-radius:6px; padding:20px; box-shadow:0 14px 30px rgba(0,0,0,.18);
}
.map-info-card h4{ font-family:var(--font-heading); font-size:1rem; margin-bottom:8px; }
.map-info-card p{ font-size:0.8rem; color:#6b6156; margin-bottom:16px; }
.map-info-card .btn{ padding:10px 18px; font-size:0.72rem; }

.contact-why{ padding:20px; }
.why-checklist{ margin:24px 0 34px; }
.why-checklist li{ display:flex; align-items:center; gap:12px; margin-bottom:16px; font-size:0.9rem; color:#544c43; }
.check-icon{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--color-gold-soft);
  display:flex; align-items:center; justify-content:center; font-size:0.75rem; color:var(--color-dark);
}
.contact-why-signature{
  display:block; font-family:var(--font-heading); font-style:italic; color:var(--color-gold);
  font-size:1.1rem; line-height:1.4;
}
/* ==========================================================================
   CONTACT PAGE — FINAL LAYOUT OVERRIDES
   These rules protect the Contact page from Astra/global responsive CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CONTACT INTRO CONTAINER
   -------------------------------------------------------------------------- */

.contact-page-wrapper .contact-intro > .container {
    width: 100% !important;
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    box-sizing: border-box !important;
}


/* --------------------------------------------------------------------------
   INTRO HEADER — DESKTOP
   -------------------------------------------------------------------------- */

.contact-page-wrapper .contact-intro-head {
    display: grid !important;
    grid-template-columns:
        minmax(220px, 1fr)
        minmax(320px, 1.1fr)
        minmax(120px, auto) !important;

    column-gap: 40px !important;
    row-gap: 0 !important;

    align-items: start !important;
    width: 100% !important;
    margin: 0 0 56px !important;
    padding: 0 !important;
}


/* Section label */
.contact-page-wrapper .contact-intro-head .section-tag {
    display: block !important;
    width: auto !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
}


/* Main heading */
.contact-page-wrapper .contact-intro-head .section-title {
    display: block !important;
    width: auto !important;
    max-width: 520px !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* Paragraph */
.contact-page-wrapper .contact-intro-text {
    display: block !important;
    width: auto !important;
    max-width: 520px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
}


/* Signature */
.contact-page-wrapper .contact-signature {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 0 14px !important;
    align-self: end !important;
    text-align: right !important;
}


/* --------------------------------------------------------------------------
   CONTACT INFORMATION — DESKTOP
   -------------------------------------------------------------------------- */

.contact-page-wrapper .contact-info-row {
    display: grid !important;
    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 30px !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* Individual contact item */
.contact-page-wrapper .contact-info-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 14px !important;

    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* Icon */
/* --------------------------------------------------------------------------
   CONTACT INFO ICONS — LARGER
   -------------------------------------------------------------------------- */

.contact-page-wrapper .contact-info-icon {
    flex: 0 0 62px !important;
    width: 62px !important;
    min-width: 62px !important;
    height: 62px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    background: var(--color-gold-soft) !important;

    color: var(--color-dark) !important;

    font-size: 1.5rem !important;
    line-height: 1 !important;
}


/* Contact content */
.contact-page-wrapper .contact-info-content {
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* Contact title */
.contact-page-wrapper .contact-info-item h4 {
    display: block !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
}


/* Phone / email / address lines */
.contact-page-wrapper .contact-info-item a,
.contact-page-wrapper .contact-info-item span {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* --------------------------------------------------------------------------
   FORM GRID
   -------------------------------------------------------------------------- */

.contact-page-wrapper .contact-form-grid {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    gap: 30px !important;
    width: 100% !important;
}


/* --------------------------------------------------------------------------
   MAP GRID
   -------------------------------------------------------------------------- */

.contact-page-wrapper .contact-map-grid {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(0, 1fr) !important;

    gap: 30px !important;
    width: 100% !important;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    .contact-page-wrapper .contact-intro-head {
        grid-template-columns: 1fr 1fr !important;
        gap: 30px !important;
    }

    .contact-page-wrapper .contact-signature {
        grid-column: 2 !important;
        grid-row: 1 / span 2 !important;
        align-self: center !important;
    }

    .contact-page-wrapper .contact-info-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 30px 24px !important;
    }

    .contact-page-wrapper .contact-form-grid,
    .contact-page-wrapper .contact-map-grid {
        grid-template-columns: 1fr !important;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .contact-page-wrapper .contact-intro {
        padding: 65px 0 55px !important;
    }

    .contact-page-wrapper .contact-intro > .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .contact-page-wrapper .contact-intro-head {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        margin-bottom: 45px !important;
    }

    .contact-page-wrapper .contact-signature {
        grid-column: auto !important;
        grid-row: auto !important;
        justify-self: start !important;
        text-align: left !important;
    }

    .contact-page-wrapper .contact-signature::after {
        left: 0 !important;
        right: auto !important;
    }

    .contact-page-wrapper .contact-info-row {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .contact-page-wrapper .contact-info-item {
        width: 100% !important;
    }

    .contact-page-wrapper .contact-form-card {
        padding: 28px 22px !important;
    }

    .contact-page-wrapper .enquiry-form .form-row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .contact-page-wrapper .contact-form-image {
        min-height: 320px !important;
    }

    .contact-page-wrapper .contact-map {
        min-height: 360px !important;
    }

    .contact-page-wrapper .map-info-card {
        left: 15px !important;
        right: 15px !important;
        width: auto !important;
    }

}