/* ============================================================================
   Contact page — "Editorial split-screen" style
   Drop-in stylesheet. Include AFTER theme.css on the contact page only.
   No Liquid changes required — works on the existing markup:
     .contact-us > .container > .row > .col-md-6.col-md-offset-3
       > .wh-part > .wh-part-head + .wh-part-body
   ============================================================================ */

/* ---------- Design tokens (scoped to the contact page) ---------------- */
.contact-us {
    --c-bg-1:        var(--color-primary-light);
    --c-bg-2:        var(--color-primary);
    --c-text:        #1a1a1a;
    --c-text-muted:  #6b6b6b;
    --c-accent:      var(--color-primary, #e3175a);
    --c-accent-soft: rgba(227, 23, 90, 0.10);
    --c-surface:     #ffffff;
    --c-border:      #ebe5e1;
    --c-border-focus:rgba(227, 23, 90, 0.45);
    --c-r-card:      20px;
    --c-r-input:     12px;
    --c-r-pill:      999px;
    --c-shadow-sm:   0 1px 3px rgba(15, 23, 42, .04);
    --c-shadow-md:   0 10px 32px -10px rgba(15, 23, 42, .14);
    --c-shadow-lg:   0 28px 60px -24px rgba(15, 23, 42, .25);
    --c-t:           260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Page background — soft gradient --------------------------- */
.contact-us {
    background: linear-gradient(135deg, var(--c-bg-1) 0%, var(--c-bg-2) 100%);
    padding: 4rem 0 5rem;
    min-height: calc(100vh - 200px);
    position: relative;
    overflow: hidden;
}
/* Decorative blurred blobs in the background */
.contact-us::before,
.contact-us::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
}
.contact-us::before {
    width: 420px;
    height: 420px;
    background: var(--c-accent);
    top: -120px;
    left: -80px;
    opacity: 0.12;
}
.contact-us::after {
    width: 320px;
    height: 320px;
    background: #ffd7ad;
    bottom: -80px;
    right: -60px;
    opacity: 0.4;
}

/* ---------- Widen the centered column to make room for split ---------- */
.contact-us .container { position: relative; z-index: 1; }
.contact-us .col-md-6.col-md-offset-3 {
    max-width: 1100px;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* ---------- Split layout (head left / body right) --------------------- */
@media (min-width: 901px) {
    .contact-us .wh-part {
        display: grid;
        grid-template-columns: 1fr 1.15fr;
        gap: 5rem;
        align-items: start;
    }
}

/* ---------- LEFT: editorial title + decorative info ------------------- */
.contact-us .wh-part-head { position: relative; }

.contact-us .contact-page-head {
    position: sticky;
    top: 2rem;
}

.contact-us .page-title {
    font-size: clamp(2.75rem, 5.5vw, 4.25rem);
    font-weight: 800 !important;
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: var(--c-text);
    margin: 0 0 1.25rem;
    position: relative;
}
.contact-us .page-title::after {
    content: '';
    display: block;
    width: 56px;
    height: 4px;
    background: var(--c-accent);
    border-radius: 999px;
    margin-top: 1.5rem;
}

.contact-us .subtitle {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--c-text-muted);
    margin: 0 0 2.5rem;
    max-width: 28ch;
}

/* Decorative "talk to us" info block — pure CSS, appears under the title */
.contact-us .wh-part-head::after {
    content: '';
    display: block;
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--c-border);
}
.contact-us .wh-part-head::before {
    content: 'We usually reply within 24 hours.\A Mon — Fri, 9am to 6pm.';
    white-space: pre;
    display: block;
    margin-top: 3rem;
    padding-left: 2.5rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--c-text-muted);
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3175a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/></svg>") no-repeat 0 0.15em / 1.5rem 1.5rem;
}

/* ---------- RIGHT: form card ------------------------------------------ */
.contact-us .wh-part-body {
    position: relative;
    background: var(--c-surface);
    border-radius: var(--c-r-card);
    padding: 2.5rem;
    box-shadow: var(--c-shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Success alert */
.contact-us .alert-success {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    border-radius: var(--c-r-input);
    padding: 1rem 1.25rem;
    margin: 0 0 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
}

/* Intro paragraph */
.contact-us .about_contact_page {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--c-text-muted);
    margin: 0 0 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--c-border);
}

/* ---------- Form elements (defensive selectors) ----------------------- */
.contact-us form { margin: 0; }

.contact-us .form-group {
    margin-bottom: 1.5rem;
}

.contact-us label,
.contact-us .control-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--c-text);
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.contact-us input[type="text"],
.contact-us input[type="email"],
.contact-us input[type="tel"],
.contact-us input[type="url"],
.contact-us textarea,
.contact-us select,
.contact-us .form-control {
    width: 100%;
    background: #fafafa;
    border: 1.5px solid var(--c-border);
    border-radius: var(--c-r-input);
    padding: 0.875rem 1rem;
    font-size: 1rem;
    color: var(--c-text);
    transition: border-color var(--c-t), background var(--c-t), box-shadow var(--c-t);
    box-shadow: none;
    line-height: 1.4;
}

.contact-us input[type="text"]:hover,
.contact-us input[type="email"]:hover,
.contact-us textarea:hover {
    background: #fff;
    border-color: #d6d0cb;
}

.contact-us input[type="text"]:focus,
.contact-us input[type="email"]:focus,
.contact-us input[type="tel"]:focus,
.contact-us textarea:focus,
.contact-us select:focus,
.contact-us .form-control:focus {
    outline: none;
    background: #fff;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 4px var(--c-accent-soft);
}

.contact-us textarea {
    min-height: 160px;
    resize: vertical;
    font-family: inherit;
}

/* ---------- Submit button --------------------------------------------- */
.contact-us button[type="submit"],
.contact-us input[type="submit"],
.contact-us .btn-primary,
.contact-us button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--c-text) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--c-r-pill);
    padding: 1rem 2rem !important;
    font-size: 0.9375rem !important;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.5rem;
    box-shadow: var(--c-shadow-sm);
    transition: transform var(--c-t), box-shadow var(--c-t), background var(--c-t);
    width: auto;
    text-decoration: none !important;
}
.contact-us button[type="submit"]:hover,
.contact-us input[type="submit"]:hover,
.contact-us .btn-primary:hover,
.contact-us button.btn:hover {
    background: #000 !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: var(--c-shadow-md);
}
.contact-us button[type="submit"]::after,
.contact-us input[type="submit"]::after {
    content: '→';
    font-size: 1.125rem;
    line-height: 1;
    transition: transform var(--c-t);
}
.contact-us button[type="submit"]:hover::after {
    transform: translateX(3px);
}

/* ---------- Error states ---------------------------------------------- */
.contact-us .has-error input,
.contact-us .has-error textarea {
    border-color: #ef4444;
    background: #fef2f2;
}
.contact-us .help-block,
.contact-us .error-message {
    color: #ef4444;
    font-size: 0.8125rem;
    margin-top: 0.5rem;
}

/* ---------- Required field marker ------------------------------------ */
.contact-us .control-label .required,
.contact-us label .required,
.contact-us label.required::after {
    color: var(--c-accent);
    margin-left: 0.25rem;
}

/* ---------- Responsive ------------------------------------------------ */
@media (max-width: 900px) {
    .contact-us {
        padding: 2.5rem 0 3rem;
    }
    .contact-us::before,
    .contact-us::after { display: none; }
    .contact-us .wh-part {
        display: block;
    }
    .contact-us .contact-page-head {
        position: static;
        margin-bottom: 2.5rem;
    }
    .contact-us .wh-part-head::before {
        display: none;
    }
    .contact-us .wh-part-head::after {
        margin-top: 1.5rem;
        padding-top: 0;
        border: 0;
    }
    .contact-us .wh-part-body {
        padding: 1.75rem;
    }
    .contact-us .page-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    .contact-us .wh-part-body {
        padding: 1.25rem;
        border-radius: 16px;
    }
    .contact-us button[type="submit"],
    .contact-us input[type="submit"] {
        width: 100%;
    }
}

/* ---------- Print ---------------------------------------------------- */
@media print {
    .contact-us {
        background: #fff;
        padding: 0;
    }
    .contact-us::before,
    .contact-us::after { display: none; }
    .contact-us .wh-part-body {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}