/* Contact Page Styles */

/* ========================================
   CONTACT HERO
   ======================================== */

.contact-page {
    background-color: var(--color-white);
}

/* Override the default 60px body padding since header is not fixed initially */
body.contact-page {
    padding-top: 0;
}

/* Contact page header behavior: starts in normal flow */
.contact-page .header {
    position: relative;
    transform: none;
}

/* When scrolling up, header becomes fixed and slides in from top */
.contact-page .header.header--sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    transform: translateY(0);
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

/* Hidden state - slide up */
.contact-page .header.header--sticky.header--hidden {
    transform: translateY(-100%);
}

.contact-hero {
    padding-bottom: 2rem;
    padding-top: var(--space-lg);
}

.contact-hero__content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 1.5rem;
}

.contact-hero__heading {
    flex: 1;
    max-width: 500px;
}

/* Heading with mixed font sizes - use flexbox for proper baseline alignment */
.contact-heading {
    font-family: var(--font-secondary);
    font-weight: var(--fw-semibold);
    color: var(--color-black);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Each line uses flexbox with baseline alignment */
.contact-heading__line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25em;
}

/* "Need more" and "template" - 25px */
.contact-heading__normal {
    font-size: 25px;
    line-height: 1.2;
}

/* "personalized" - 49px, salmon color */
.contact-heading .text-highlight {
    color: var(--color-highlight);
    font-size: 49px;
    line-height: 1.1;
}

/* "at your business?" - 39px, dark blue sub */
.contact-heading .text-primary-blue {
    color: var(--color-dark-blue-sub);
    font-size: 39px;
    line-height: 1.1;
}

.contact-hero__description {
    flex: 0 0 45%;
    max-width: 518px;
}

.contact-hero__description p {
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    color: var(--color-black);
    margin: 0;
}

/* ========================================
   CONTACT FORM
   ======================================== */

.contact-form-section {
    padding: 6rem 0;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 55px;
}

/* Form Section */
.form-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-section__title {
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
    color: var(--color-black);
    margin: 0;
}

/* Form Rows */
.form-row {
    display: flex;
    gap: 24px;
}

.form-row--two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.form-row--textarea {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
}

/* Form Group */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-group__label {
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
    color: var(--color-black);
    margin: 0;
}

.form-group--textarea {
    flex: 1;
}

/* Form Input - underline style with light blue placeholder */
.form-input {
    width: 100%;
    padding: 0.5rem 0;
    font-family: var(--font-primary);
    font-size: 17px;
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--color-dark-blue);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-light-blue);
    outline: none;
    transition: border-color var(--transition-base);
}

/* Placeholder color: #BADEEF (light blue) per Figma */
.form-input::placeholder {
    color: var(--color-light-blue);
    opacity: 1;
}

.form-input:focus {
    border-bottom-color: var(--color-primary-blue);
}

/* Form Textarea */
.form-textarea {
    width: 100%;
    padding: 0.5rem 0;
    font-family: var(--font-primary);
    font-size: 17px;
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--color-dark-blue);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-light-blue);
    outline: none;
    resize: none;
    transition: border-color var(--transition-base);
}

/* Placeholder color: #BADEEF (light blue) per Figma */
.form-textarea::placeholder {
    color: var(--color-light-blue);
    opacity: 1;
}

.form-textarea:focus {
    border-bottom-color: var(--color-primary-blue);
}

/* ========================================
   PILL BUTTONS - Filled style, no outlines
   ======================================== */

.pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Base pill - unselected state with light blue background */
.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    color: var(--color-white);
    background-color: #BADEEF;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all var(--transition-base);
}

.pill:hover {
    background-color: #a8d4ec;
}

/* Active state - pink/salmon highlight color */
.pill--active {
    background-color: var(--color-highlight);
    color: var(--color-white);
}

.pill--active:hover {
    background-color: #e08e8e;
}

/* Highlight variant - salmon/pink color */
.pill--highlight {
    background-color: var(--color-highlight);
    color: var(--color-white);
}

.pill--highlight:hover {
    background-color: #e08e8e;
}

/* ========================================
   SLIDER BUTTON FOR SUBMIT
   ======================================== */

/* Use existing slider-button component, just position it */
.form-row--textarea .slider-button {
    flex-shrink: 0;
}

/* Override slider button text for Submit */
.slider-button--submit .slider-button__text {
    padding-left: 50px;
}

/* ========================================
   MAIN CONTENT MIN HEIGHT (Desktop)
   ======================================== */

@media (min-width: 1024px) {
    .contact-page #main-content {
        min-height: calc(100vh - 100px - 286px - 3rem);
    }
}

/* ========================================
   RESPONSIVE - TABLET
   ======================================== */

@media (max-width: 1023px) {
    .contact-hero__content {
        flex-direction: column;
        gap: 1.5rem;
    }

    .contact-hero__heading {
        max-width: 100%;
    }

    .contact-hero__description {
        flex: none;
        max-width: 100%;
    }

    .contact-heading .text-highlight {
        font-size: 40px;
    }

    .contact-heading .text-primary-blue {
        font-size: 32px;
    }

    .contact-heading__normal {
        font-size: 22px;
    }
}

/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */

@media (max-width: 767px) {
    .contact-hero {
        padding-top: 1.5rem;
        padding-bottom: 1rem;
    }

    .contact-heading__normal {
        font-size: 18px;
    }

    .contact-heading .text-highlight {
        font-size: 32px;
    }

    .contact-heading .text-primary-blue {
        font-size: 26px;
    }

    .contact-form-section {
        padding: 1.5rem 0 4rem;
    }

    .contact-form {
        gap: 35px;
    }

    .form-row--two-cols {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .form-row--textarea {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }

    .form-row--textarea .slider-button {
        width: 100%;
        max-width: 350px;
    }

    .pill-group {
        gap: 0.5rem;
    }

    .pill {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
}