/*!
 * True Makeup Theme — contact-page.css
 *
 * Styles for the contact page: two-column layout (form left,
 * sticky sidebar right), form field chrome with the gradient-
 * border focus state, and the blush/grey widget cards.
 *
 * Used by both the legacy contact-page.twig and the
 * contact-page-redesign.twig views — enqueued from
 * functions.php whenever either page renders.
 */


.tmt-contact                  { padding: 70px 0 80px; }
.tmt-contact__inner           { max-width: var(--layout-max-width, 1700px); margin: 0 auto; }


/* ─── Heading strip ─────────────────────────────── */

.tmt-contact-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 40px;
    padding: 48px 40px;
    background: #F4F4F5;
}
.tmt-contact-hero__title {
    margin: 0;
    color: #000;
    font-family: var(--font-secondary);
    font-size: 40px;
    font-weight: 400;
}
.tmt-contact-hero__desc {
    margin: 8px 0 0;
    color: #000;
    opacity: 0.6;
    font-family: var(--font-primary);
    font-size: 14px;
    line-height: 1.6;
}


/* ─── Two-column layout ─────────────────────────── */

.tmt-contact-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 64px;
    align-items: start;
}
@media (max-width: 1023px) {
    /* Tighten the top gap between the masthead and the hero strip on
       mobile — the desktop 70px crown reads as too much breathing room
       on phones. Trim to 24px so the hero block sits right under the
       sticky nav. Bottom padding stays generous so the form/widgets
       don't crash into the footer. */
    .tmt-contact { padding: 24px 0 48px; }

    .tmt-contact-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Centre the security-check label + input on mobile so the
       narrow 120px input sits in the middle of the column instead
       of clinging to the left edge. Desktop stays left-aligned to
       match the rest of the form's natural flow. */
    .tmt-contact-math { text-align: center; }

    /* Centre the form heading ("Customers" etc.) and the intro
       paragraph on mobile so the column reads as a unified block
       beneath the centred hero strip. Desktop keeps left-aligned
       so the form labels line up with the heading edge. */
    .tmt-contact-form h2,
    .tmt-contact-form__intro { text-align: center; }
}

.tmt-contact-sidebar { position: sticky; top: 120px; }


/* ─── Form — intro + inputs ─────────────────────── */

.tmt-contact-form h2 {
    margin: 0 0 12px;
    color: #000;
    font-family: var(--font-secondary);
    font-size: 32px;
    font-weight: 700;
}
.tmt-contact-form__intro {
    margin-bottom: 32px;
    color: #000;
    opacity: 0.7;
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.75;
}

.tmt-contact-form input[type="text"],
.tmt-contact-form input[type="email"],
.tmt-contact-form input[type="tel"],
.tmt-contact-form textarea,
.tmt-contact-form select {
    width: 100%;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: #F4F4F5;
    color: #000;
    border: 3px solid #e0e0e0;
    border-radius: 0 !important;
    outline: none;
    font-family: var(--font-primary);
    font-size: 14px;
    transition: border-color 0.3s;
}

.tmt-contact-form input:hover,
.tmt-contact-form input:focus,
.tmt-contact-form textarea:hover,
.tmt-contact-form textarea:focus,
.tmt-contact-form select:hover,
.tmt-contact-form select:focus {
    border-image: linear-gradient(90deg, #554350, #B07B5F, #CC9E80, #E0BAB2, #FAE8DD) 1;
}

.tmt-contact-form textarea {
    min-height: 150px;
    resize: vertical;
}

.tmt-contact-form input[type="submit"],
.tmt-contact-form .wpcf7-submit {
    display: inline-block;
    padding: 14px 36px;
    background: #000;
    color: #fff;
    border: 1px solid #000;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.tmt-contact-form input[type="submit"]:hover,
.tmt-contact-form .wpcf7-submit:hover {
    background: #FFF0EF;
    color: #000;
    border-color: #FFF0EF;
}

.tmt-contact-label {
    display: block;
    margin-bottom: 6px;
    color: #000;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


/* ─── Sidebar widgets ───────────────────────────── */

.tmt-contact-widget {
    position: relative;
    margin-bottom: 16px;
    padding: 40px;
    background: #FFF0EF;
}
.tmt-contact-widget::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #554350, #B07B5F, #CC9E80, #E0BAB2, #FAE8DD, #E0BAB2, #CC9E80, #B07B5F, #554350);
    background-size: 200% 100%;
    animation: tmt-gradient-flow 4s ease infinite;
}
.tmt-contact-widget:nth-child(2) { background: #F4F4F5; }

.tmt-contact-widget h4 {
    margin: 0 0 16px;
    color: #000;
    font-family: var(--font-secondary);
    font-size: 20px;
    font-weight: 700;
}
.tmt-contact-widget p,
.tmt-contact-widget a {
    color: #000;
    font-family: var(--font-primary);
    font-size: 14px;
    line-height: 1.7;
}