/*
 * TechEffective Contact page
 *
 * Page-specific composition for page-contact.php.
 */


/*
 * Page layout
 */

.site-main {
    padding-block: 0;
}


/*
 * Hero
 */

.te-contact-hero {
    padding-block: clamp(3.5rem, 6vw, 5rem);
    color: #FFFFFF;
    background:
        linear-gradient(115deg,
            var(--te-color-primary-dark) 0%,
            var(--te-color-primary) 70%,
            var(--te-color-primary-mid) 100%);
}

.te-contact-hero__content {
    max-width: 1050px;
}

.te-contact-hero__eyebrow {
    margin-bottom: var(--te-space-3);
    color: var(--te-color-accent-light);
    font-size: var(--te-font-size-sm);
    font-weight: var(--te-font-weight-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.te-contact-hero__title {
    max-width: 1050px;
    margin-bottom: var(--te-space-5);
    color: #FFFFFF;
    font-size: clamp(2.5rem, 2rem + 1.6vw, 3.35rem);
    line-height: 1.08;
}

.te-contact-hero__lead {
    max-width: 900px;
    margin-bottom: var(--te-space-4);
    color: #FFFFFF;
    font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.4rem);
    font-weight: var(--te-font-weight-semibold);
    line-height: var(--te-line-height-tight);
}

.te-contact-hero__text {
    max-width: 900px;
    margin: 0;
    color: rgba(255, 255, 255, 0.94);
    line-height: var(--te-line-height-normal);
}


/*
 * Shared page patterns
 */

.te-contact-eyebrow {
    margin-bottom: var(--te-space-2);
    color: var(--te-color-accent);
    font-size: var(--te-font-size-sm);
    font-weight: var(--te-font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.te-contact-section-intro {
    max-width: 980px;
    margin-bottom: var(--te-space-7);
}

.te-contact-section-intro h2 {
    color: var(--te-color-primary-dark);
}

.te-contact-section-intro__text {
    max-width: 860px;
    margin: 0;
    font-size: var(--te-font-size-lg);
    line-height: var(--te-line-height-normal);
}


/*
 * Conversation starter and contact form
 */

.te-contact-conversation {
    padding-block: var(--te-section-space);
    background: var(--te-color-background-soft);
    scroll-margin-top: 2rem;
}

.te-contact-conversation__layout {
    display: grid;
    gap: var(--te-space-7);
    align-items: start;
}

.te-contact-conversation__content {
    max-width: 700px;
}

.te-contact-conversation__content h2 {
    color: var(--te-color-primary-dark);
}

.te-contact-conversation__content>p:last-of-type {
    margin-bottom: 0;
}

.te-contact-conversation__examples {
    display: grid;
    gap: var(--te-space-3);
    margin-top: var(--te-space-6);
}

.te-contact-conversation__examples p {
    margin: 0;
    padding: var(--te-space-3) var(--te-space-4);
    border-left: 4px solid var(--te-color-primary);
    color: var(--te-color-primary-dark);
    background: rgba(255, 255, 255, 0.72);
    font-weight: var(--te-font-weight-semibold);
    line-height: var(--te-line-height-normal);
}

.te-contact-conversation__alternate {
    margin: var(--te-space-5) 0 0;
    color: var(--te-color-text-muted);
    font-size: var(--te-font-size-sm);
    line-height: var(--te-line-height-normal);
}

.te-contact-conversation__alternate a {
    font-weight: var(--te-font-weight-semibold);
}

.te-contact-form {
    min-width: 0;
}

.te-contact-form__intro {
    margin-bottom: var(--te-space-4);
}

.te-contact-form__intro h2 {
    margin-bottom: var(--te-space-3);
    color: var(--te-color-primary-dark);
}

.te-contact-form__intro p:last-child {
    margin-bottom: 0;
}

.te-contact-form__panel {
    padding: var(--te-space-5);
    border-top: 4px solid var(--te-color-primary);
    background: #FFFFFF;
}

@media (min-width: 950px) {
    .te-contact-conversation__layout {
        grid-template-columns: minmax(0, 0.9fr) minmax(30rem, 1.1fr);
        gap: var(--te-space-8);
    }
}


/*
 * Contact Form 7
 */

.te-contact-form .wpcf7 {
    margin: 0;
}

.te-contact-form .wpcf7 form {
    margin: 0;
}

.te-contact-form .wpcf7-form>* {
    margin-top: 0;
}

.te-contact-form .wpcf7-form>*:last-child {
    margin-bottom: 0;
}

.te-contact-form .te-cf7-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--te-space-3) var(--te-space-5);
    margin-bottom: var(--te-space-3);
}

.te-contact-form .te-cf7-grid label {
    margin: 0;
}

.te-contact-form .wpcf7-form>label {
    display: block;
    margin-bottom: var(--te-space-3);
}

.te-contact-form .wpcf7-form label {
    color: var(--te-color-primary-dark);
    font-weight: var(--te-font-weight-semibold);
    line-height: 1.3;
}

.te-contact-form .wpcf7-form-control-wrap {
    display: block;
    margin-top: 0.35rem;
}

.te-contact-form .wpcf7-form-control:not(.wpcf7-submit) {
    width: 100%;
    min-height: 3rem;
    padding: 0.7rem 0.85rem;
    color: var(--te-color-text);
    background: #FFFFFF;
    border: 1px solid var(--te-color-border);
    border-radius: 0.35rem;
    font: inherit;
    line-height: var(--te-line-height-normal);
}

.te-contact-form textarea.wpcf7-form-control {
    min-height: 8.5rem;
    resize: vertical;
}

.te-contact-form .wpcf7-form-control:not(.wpcf7-submit):focus {
    outline: 3px solid rgba(3, 87, 161, 0.22);
    outline-offset: 2px;
    border-color: var(--te-color-primary);
}

.te-contact-form .te-required {
    color: var(--te-color-accent);
    font-weight: var(--te-font-weight-bold);
}

.te-contact-form .te-cf7-help {
    margin: 0 0 var(--te-space-3);
    color: var(--te-color-text-muted);
    font-size: var(--te-font-size-sm);
    line-height: 1.4;
}

.te-contact-form .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.8rem 1.35rem;
    color: #FFFFFF;
    background: var(--te-color-accent);
    border: 2px solid var(--te-color-accent);
    border-radius: 0.35rem;
    font: inherit;
    font-weight: var(--te-font-weight-bold);
    line-height: 1.2;
    cursor: pointer;
}

.te-contact-form .wpcf7-submit:hover {
    background: var(--te-color-accent-dark);
    border-color: var(--te-color-accent-dark);
}

.te-contact-form .wpcf7-submit:focus-visible {
    outline: 3px solid var(--te-color-primary);
    outline-offset: 3px;
}

.te-contact-form .wpcf7-spinner {
    margin: 0 0 0 var(--te-space-2);
    vertical-align: middle;
}

.te-contact-form .wpcf7-not-valid {
    border-color: var(--te-color-accent);
}

.te-contact-form .wpcf7-not-valid-tip {
    margin-top: 0.3rem;
    color: var(--te-color-accent-dark);
    font-size: var(--te-font-size-sm);
    font-weight: var(--te-font-weight-semibold);
}

.te-contact-form .wpcf7-response-output {
    margin: var(--te-space-3) 0 0 !important;
    padding: var(--te-space-4) var(--te-space-5);
    color: var(--te-color-primary-dark);
    background: #FFFFFF;
    border: 2px solid var(--te-color-primary);
    border-radius: 0.35rem;
    line-height: var(--te-line-height-normal);
}

.te-contact-form .wpcf7 form.invalid .wpcf7-response-output,
.te-contact-form .wpcf7 form.unaccepted .wpcf7-response-output,
.te-contact-form .wpcf7 form.payment-required .wpcf7-response-output,
.te-contact-form .wpcf7 form.spam .wpcf7-response-output,
.te-contact-form .wpcf7 form.failed .wpcf7-response-output,
.te-contact-form .wpcf7 form.aborted .wpcf7-response-output {
    border-color: var(--te-color-accent);
}

@media (min-width: 700px) {
    .te-contact-form .te-cf7-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/*
 * Other contact options
 */

.te-contact-options {
    padding-block: var(--te-section-space);
    background: var(--te-color-background);
}

.te-contact-options__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--te-space-4);
}

.te-contact-option {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--te-space-5);
    border-top: 4px solid var(--te-color-primary);
    background: var(--te-color-background-soft);
}

.te-contact-option__label {
    margin-bottom: var(--te-space-2);
    color: var(--te-color-text-muted);
    font-size: var(--te-font-size-xs);
    font-weight: var(--te-font-weight-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.te-contact-option h3 {
    margin-bottom: var(--te-space-3);
    color: var(--te-color-primary);
    font-size: var(--te-font-size-h4);
}

.te-contact-option p {
    line-height: var(--te-line-height-normal);
}

.te-contact-option .te-text-link {
    margin-top: auto;
}

.te-contact-schedule {
    display: flex;
    flex-direction: column;
    gap: var(--te-space-4);
    align-items: flex-start;
    justify-content: space-between;
    margin-top: var(--te-space-6);
    padding: var(--te-space-5);
    border: 1px solid var(--te-color-border);
    background: var(--te-color-background-soft);
}

.te-contact-schedule__label {
    margin-bottom: var(--te-space-2);
    color: var(--te-color-primary-dark);
    font-weight: var(--te-font-weight-bold);
}

.te-contact-schedule p:last-child {
    margin-bottom: 0;
}

.te-contact-linkedin {
    margin: var(--te-space-4) 0 0;
}

@media (min-width: 700px) {
    .te-contact-schedule {
        flex-direction: row;
        align-items: center;
    }
}

@media (min-width: 800px) {
    .te-contact-options__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/*
 * What happens next
 */

.te-contact-next {
    padding-block: var(--te-section-space);
    background: var(--te-color-background);
}

.te-contact-next__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--te-space-4);
}

.te-contact-next__item {
    padding: var(--te-space-5);
    border-top: 4px solid var(--te-color-primary);
    background: var(--te-color-background-soft);
}

.te-contact-next__number {
    margin-bottom: var(--te-space-2);
    color: var(--te-color-text-muted);
    font-size: var(--te-font-size-xs);
    font-weight: var(--te-font-weight-bold);
    letter-spacing: 0.05em;
}

.te-contact-next__item h3 {
    margin-bottom: var(--te-space-3);
    color: var(--te-color-primary);
    font-size: var(--te-font-size-h4);
}

.te-contact-next__item p:last-child {
    margin: 0;
    line-height: var(--te-line-height-normal);
}

@media (min-width: 800px) {
    .te-contact-next__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/*
 * Final reassurance
 */

.te-contact-reassurance {
    padding-block: var(--te-section-space-small);
    color: #FFFFFF;
    background:
        linear-gradient(115deg,
            var(--te-color-primary-dark) 0%,
            var(--te-color-primary) 100%);
}

.te-contact-reassurance__content {
    max-width: 900px;
}

.te-contact-reassurance__eyebrow {
    margin-bottom: var(--te-space-2);
    color: var(--te-color-accent-light);
    font-size: var(--te-font-size-sm);
    font-weight: var(--te-font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.te-contact-reassurance__content h2 {
    margin-bottom: var(--te-space-4);
    color: #FFFFFF;
}

.te-contact-reassurance__text {
    max-width: 820px;
    margin: 0;
    color: rgba(255, 255, 255, 0.94);
    font-size: var(--te-font-size-lg);
    line-height: var(--te-line-height-normal);
}

.te-contact-reassurance__note {
    margin: var(--te-space-4) 0 0;
    color: var(--te-color-accent-light);
    font-weight: var(--te-font-weight-bold);
}


/*
 * Responsive adjustments
 */

@media (max-width: 599px) {
    .te-contact-hero {
        padding-block: var(--te-space-7);
    }

    .te-contact-form__panel {
        padding: var(--te-space-4);
    }

    .te-contact-form .wpcf7-submit {
        width: 100%;
    }
}