/**
 * Get Started Today (Dark Background) Block Styles
 * Based on Figma Design
 */

/* Main Block Container */
.get-started-dark-block {
    width: 100%;
    background-color: var(--color-bg-get-started-dark);
    /* Base UI-Four from Figma */
    padding: 120px 0;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Full Width Alignment */
.get-started-dark-block.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}


.get-started-dark-container {
    max-width: 1728px;
    width: 100%;
    margin: 0 auto;
    padding-left: 9.375rem;
    padding-right: 9.375rem;
    box-sizing: border-box;
}

@media (min-width: 1541px) {
    .get-started-dark-container {
        padding-left: clamp(6rem, 15.046vw, 16.25rem);
        padding-right: clamp(6rem, 15.046vw, 16.25rem);
    }
}

@media (min-width: 1281px) and (max-width: 1540px) {
    .get-started-dark-container {
        padding: 0 9.375rem;
    }
}

@media (min-width: 1025px) and (max-width: 1280px) {
    .get-started-dark-container {
        padding: 0 5rem !important;
    }
}


@media (min-width: 871px) and (max-width: 1024px) {
    .get-started-dark-container {
        padding: 0 3.125rem !important;
    }
}

@media (min-width: 769px) and (max-width: 870px) {
    .get-started-dark-container  {
        padding-left: 3.125rem !important;
        padding-right: 3.125rem !important;
    }
}

@media (max-width: 768px) {
    .get-started-dark-container {
        padding: 0 1rem;
    }
}

.get-started-dark-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Form Section */
.get-started-dark-form-wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

/* Header Section */
.get-started-dark-header {
    max-width: 100%;
    /* Full width within left column */
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* Gap from Figma */
}

.get-started-dark-heading {
    font-family: 'Outfit', sans-serif;
    font-size: 32px;
    /* 32px from figma */
    font-weight: 600;
    /* SemiBold from image */
    line-height: 40px;
    color: var(--color-white) !important;
    /* color from figma */
    margin: 0;
    padding: 0;
}

.get-started-dark-description {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    /* 16px from figma */
    font-weight: 300;
    /* 300 from figma */
    line-height: 24px;
    color: var(--color-white);
    /* white from figma */
    margin: 0;
    padding: 0;
    max-width: 384px;
}

/* Divider */
.get-started-dark-divider {
    width: 100%;
    height: 1px;
    background-color: var(--color-bg-get-started-dark-border);
    /* Base UI-Three from Figma */
}

/* Form Section */
.get-started-dark-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.get-started-dark-form-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 columns on desktop */
    gap: 24px;
}

.get-started-dark-form-column {
    display: contents;
    /* Make children direct grid items */
}

/* Form Fields */
.get-started-dark-form-field {
    position: relative;
    width: 100%;
}

.get-started-dark-form-field input,
.get-started-dark-form-field select {
    width: 100%;

    padding: 16px;
    /* 16px from image */
    background-color: var(--color-white);
    /* White from image */
    border: 1px solid rgba(172, 180, 188, 0.3);
    /* Very subtle light gray border from image */
    border-radius: 8px;
    /* 8px from image */
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    /* 18px from image */
    font-weight: 300;
    line-height: 1.4444em;
    color: var(--color-primary-dark);
    /* Dark gray text from image */
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.get-started-dark-form-field textarea {
    width: 100%;
    border-radius: 10px;
    padding: 16px;
    background-color: var(--color-white);
    border: 1px solid rgba(172, 180, 188, 0.3);
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.4444em;
    color: var(--color-primary-dark);
    box-sizing: border-box;
    transition: border-color 0.2s ease;
    min-height: 100px;
    resize: vertical;
}

.get-started-dark-form-field input:focus,
.get-started-dark-form-field select:focus,
.get-started-dark-form-field textarea:focus {
    outline: none;
    border-color: var(--color-green-soft-ui);
    /* Green focus state from image */
}

.get-started-dark-form-field input::placeholder {
    color: var(--color-text-disabled);
    /* Placeholder color from image */
    opacity: 1;
}

/* File Upload Helper Text */
.get-started-dark-form-field small {
    display: block;
    color: var(--color-white);
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5em;
    margin-top: 8px;
}

/* Select Field Styling */
.get-started-dark-form-field select {
    appearance: none;
    cursor: pointer;
    padding-right: 48px;
    /* Space for custom arrow */
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='8' viewBox='0 0 15 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.29167 7.45833L0.25 1.41667C0.166667 1.33333 0.104167 1.24306 0.0625 1.14583C0.0208333 1.04861 0 0.944445 0 0.833333C0 0.611111 0.0763889 0.416667 0.229167 0.25C0.381944 0.0833333 0.583333 0 0.833333 0H13.5C13.75 0 13.9514 0.0833333 14.1042 0.25C14.2569 0.416667 14.3333 0.611111 14.3333 0.833333C14.3333 0.888889 14.25 1.08333 14.0833 1.41667L8.04167 7.45833C7.90278 7.59722 7.76389 7.69445 7.625 7.75C7.48611 7.80556 7.33333 7.83333 7.16667 7.83333C7 7.83333 6.84722 7.80556 6.70833 7.75C6.56944 7.69445 6.43056 7.59722 6.29167 7.45833Z' fill='%23141A1E'/%3E%3C/svg%3E");
    background-position: right 20px center;
    background-repeat: no-repeat;
    background-size: 15px 8px;
    color: var(--color-gray-700-ui);
}

.get-started-dark-form-field select option {
    font-weight: 300;
    color: var(--color-primary-dark);
}

/* Custom Dropdown Arrow */
.get-started-dark-form-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    width: 40px;
    height: 40px;
}

/* Consent Checkbox */
.get-started-dark-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    /* Gap from Figma */
    max-width: 664px;
    /* Width from Figma */
}

.get-started-dark-consent input[type="checkbox"] {
    width: 24px;
    /* Size from Figma */
    height: 24px;
    min-width: 24px;
    flex-shrink: 0;
    cursor: pointer;
    margin-top: 2px;
    background: transparent;
    border: 1px solid var(--color-white);
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.get-started-dark-consent input[type="checkbox"]:checked {
    background: transparent;
    border: 1px solid var(--color-white);
    position: relative;
}

.get-started-dark-consent input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--color-white);
}

.get-started-dark-consent label {
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    /* Body Light 12 from Figma */
    font-weight: 300;
    /* Light from Figma */
    line-height: 1.3333em;
    /* 1.3333em from Figma */
    color: var(--color-gray-ui);
    /* Base UI-Two from Figma */
    cursor: pointer;
}

.get-started-dark-consent label p {
    margin: 0;
}

/* Contact Form 7 Checkbox Alignment */
.get-started-dark-form-wrapper .wpcf7-list-item,
.get-started-dark-block .wpcf7-list-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.get-started-dark-form-wrapper .wpcf7-list-item label,
.get-started-dark-block .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.3333em;
    color: var(--color-gray-ui);
    cursor: pointer;
    margin: 0;
}

.get-started-dark-form-wrapper .wpcf7-list-item label input[type="checkbox"],
.get-started-dark-block .wpcf7-list-item label input[type="checkbox"] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
    margin-top: 3px;
    align-self: flex-start;
    background: transparent;
    border: 0.125rem solid var(--color-gray-ui);
    border-radius: 0.125rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.get-started-dark-form-wrapper .wpcf7-list-item label input[type="checkbox"]:checked,
.get-started-dark-block .wpcf7-list-item label input[type="checkbox"]:checked {
    background: transparent;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_994_1481' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_994_1481)'%3E%3Cpath d='M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H17.475C17.7583 3 17.9958 3.09583 18.1875 3.2875C18.3792 3.47917 18.475 3.71667 18.475 4C18.475 4.28333 18.3792 4.52083 18.1875 4.7125C17.9958 4.90417 17.7583 5 17.475 5H5V19H19V12.5C19 12.2167 19.0958 11.9792 19.2875 11.7875C19.4792 11.5958 19.7167 11.5 20 11.5C20.2833 11.5 20.5208 11.5958 20.7125 11.7875C20.9042 11.9792 21 12.2167 21 12.5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM11.525 14.2L20.025 5.7C20.2083 5.51667 20.4333 5.425 20.7 5.425C20.9667 5.425 21.2 5.51667 21.4 5.7C21.6 5.88333 21.7 6.11667 21.7 6.4C21.7 6.68333 21.6 6.925 21.4 7.125L12.225 16.3C12.025 16.5 11.7917 16.6 11.525 16.6C11.2583 16.6 11.025 16.5 10.825 16.3L6.575 12.05C6.39167 11.8667 6.3 11.6333 6.3 11.35C6.3 11.0667 6.39167 10.8333 6.575 10.65C6.75833 10.4667 6.99167 10.375 7.275 10.375C7.55833 10.375 7.79167 10.4667 7.975 10.65L11.525 14.2Z' fill='%23DADEE0'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    height: 24px;
    width: 24px;
}

.get-started-dark-form-wrapper .wpcf7-list-item-label,
.get-started-dark-block .wpcf7-list-item-label {
    display: inline;
    flex: 1;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 300;
    line-height: 16px;
    color: var(--color-gray-ui);
    margin: 0;
    padding: 0;
}

/* Submit Button */
.get-started-dark-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 282px;
    height: 64px;
    border-radius: 100px;
    padding-top: 19px;
    padding-right: 32px;
    padding-bottom: 19px;
    padding-left: 48px;
    gap: 4px;
    opacity: 1;
    background-color: var(--color-btn-get-started-dark);
    border: none;
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    /* 18px from image */
    font-weight: 600;
    /* SemiBold from image */
    line-height: 1.4444em;
    color: var(--color-btn-get-started-dark-text);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: none;
}

.get-started-dark-submit::after {
    content: '';
    width: 24px;
    height: 24px;
    /* Color the arrow using the dark button text token so themes control the arrow color */
    background-color: var(--color-btn-get-started-dark-text);
    -webkit-mask-image: url('../../../images/arrow_forward_mask.svg');
    mask-image: url('../../../images/arrow_forward_mask.svg');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-size: 100% 100%;
    filter: none;
    display: inline-block;
    transition: background-color 0.2s ease;
}

.get-started-dark-submit:hover {
    background-color: var(--color-green-pale-ui);
    /* Slightly darker green on hover */
    transform: translateY(-1px);
    color: var(--color-btn-get-started-dark-text-hover);
    box-shadow: 0px 4px 8px 0px rgba(40, 50, 60, 0.16);
}

.get-started-dark-submit:hover::after {
    background-color: var(--color-btn-get-started-dark-text-hover);
}

.get-started-dark-submit:active {
    transform: translateY(0);
}

/* Hide SVG elements inside submit button (using ::after for arrow instead) */
.get-started-dark-submit svg {
    display: none;
}

/* Screen Reader Only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Hide Contact Form 7 Honeypot Field (Anti-Spam) */
/* Hide on frontend and in editor */
.get-started-dark-form-wrapper label:has(textarea[name="_wpcf7_ak_hp_textarea"]),
.get-started-dark-form-wrapper textarea[name="_wpcf7_ak_hp_textarea"],
label:has(textarea[name="_wpcf7_ak_hp_textarea"]),
textarea[name="_wpcf7_ak_hp_textarea"],
.wpcf7-form label:has(textarea[name="_wpcf7_ak_hp_textarea"]),
.wpcf7-form textarea[name="_wpcf7_ak_hp_textarea"],
/* Hide any label containing honeypot textarea */
label:has(textarea[name*="_wpcf7_ak_hp"]),
textarea[name*="_wpcf7_ak_hp"],
/* Hide honeypot fields in block editor */
.block-editor-block-list__layout label:has(textarea[name*="_wpcf7_ak_hp"]),
.block-editor-block-list__layout textarea[name*="_wpcf7_ak_hp"],
.editor-styles-wrapper label:has(textarea[name*="_wpcf7_ak_hp"]),
.editor-styles-wrapper textarea[name*="_wpcf7_ak_hp"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

/* Alternative selector for older browsers - target by name attribute */
label[for*="_wpcf7_ak_hp"],
textarea[name*="_wpcf7_ak_hp"],
input[name*="_wpcf7_ak_hp"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Contact Form 7 Response Output Styling */
.get-started-dark-form-wrapper .wpcf7-response-output,
.get-started-dark-block .wpcf7-response-output {
    color: var(--color-white) !important;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    margin: 16px 0 0 0;
    padding: 12px 16px;
    border-radius: 8px;
}

/* Success message styling */
.get-started-dark-form-wrapper .wpcf7-mail-sent-ok,
.get-started-dark-block .wpcf7-mail-sent-ok {
    color: var(--color-white) !important;
    background-color: rgba(159, 232, 112, 0.1);
    border: 1px solid var(--color-green-soft-ui);
}

/* Error message styling */
.get-started-dark-form-wrapper .wpcf7-validation-errors,
.get-started-dark-form-wrapper .wpcf7-mail-sent-ng,
.get-started-dark-block .wpcf7-validation-errors,
.get-started-dark-block .wpcf7-mail-sent-ng {
    color: var(--color-white) !important;
    background-color: rgba(255, 107, 107, 0.1);
    border: 1px solid var(--color-danger-soft);
}

/* Spam message styling */
.get-started-dark-form-wrapper .wpcf7-spam,
.get-started-dark-block .wpcf7-spam {
    color: var(--color-white) !important;
    background-color: rgba(255, 165, 0, 0.1);
    border: 1px solid var(--color-warning-soft);
}

.wpcf7-list-item {
    margin: 0 !important;
}

/* ===================================
   RESPONSIVE STYLES
   =================================== */

/* 1280px and below */
@media (max-width: 1280px) {
    .get-started-dark-container {
        padding: 0 40px;
    }
}

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
    .get-started-dark-block {
        padding: 80px 0;
    }

    .get-started-dark-container {
        padding: 0 40px;
    }

    .get-started-dark-form-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns on tablet */
    }

    .get-started-dark-consent {
        max-width: 100%;
    }
}

/* Mobile (768px and below) — match common form layout */
@media (max-width: 768px) {
    .get-started-dark-block {
        padding: 3.75rem 0 5rem;
    }

    .get-started-dark-container {
        padding: 0 1rem;
    }

    .get-started-dark-content {
        gap: 0;
    }

    .get-started-dark-form-wrapper {
        gap: 0;
    }

    .get-started-dark-header {
        gap: 0;
    }

    .get-started-dark-heading {
        font-family: 'Outfit', sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 32px;
        line-height: 40px;
        letter-spacing: 0;
        margin-bottom: 1.5rem;
        padding: 0 1rem;
    }

    .get-started-dark-description {
        font-family: 'Outfit', sans-serif;
        font-weight: 300;
        font-style: normal;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0;
        width: 100%;
        max-width: 100%;
        margin-bottom: 2rem;
        padding: 0 1rem;
    }

    .get-started-dark-divider {
        display: none;
    }

    .get-started-dark-form {
        gap: 1.5rem;
    }

    .get-started-dark-form-grid {
        grid-template-columns: 1fr 1fr;
        row-gap: 1.5rem;
        column-gap: 1rem;
    }

    /* Default: all fields span full width */

    /* Reorder fields to match common form: firstname, lastname, email, phone, state, zipcode, campus, program */
    .get-started-dark-form-column:first-child .get-started-dark-form-field:nth-child(1) {
        order: 1;
    }

    /* firstname */
    .get-started-dark-form-column:first-child .get-started-dark-form-field:nth-child(2) {
        order: 2;
    }

    /* lastname */
    .get-started-dark-form-column:last-child .get-started-dark-form-field:nth-child(1) {
        order: 3;
    }

    /* email */
    .get-started-dark-form-column:last-child .get-started-dark-form-field:nth-child(2) {
        order: 4;
    }

    /* phone */
    .get-started-dark-form-column:first-child .get-started-dark-form-field:nth-child(3) {
        order: 5;
        grid-column: 1;
    }

    /* state - half width */
    .get-started-dark-form-column:first-child .get-started-dark-form-field:nth-child(4) {
        order: 6;
        grid-column: 2;
    }

    /* zipcode - half width */
    .get-started-dark-form-column:last-child .get-started-dark-form-field:nth-child(3) {
        order: 7;
    }

    /* campus */
    .get-started-dark-form-column:last-child .get-started-dark-form-field:nth-child(4) {
        order: 8;
    }

    /* program */

    .get-started-dark-form-field input,
    .get-started-dark-form-field select {
        height: 56px;
        padding: 16px;
        font-size: 18px;
        line-height: 26px;
    }

    .get-started-dark-consent {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        max-width: 100%;
    }

    .get-started-dark-form-wrapper .wpcf7-list-item-label,
    .get-started-dark-block .wpcf7-list-item-label {
        font-family: 'Outfit', sans-serif;
        font-weight: 300;
        font-style: normal;
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 0;
    }

    .get-started-dark-submit {
        margin: 0 auto;
        width: 100%;
        max-width: 240px;
        height: auto;
        padding: 19px 32px;
        font-size: 18px;
        line-height: 24px;
        box-sizing: border-box;
        text-align: center;
    }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    .get-started-dark-block {
        padding: 3.75rem 0 5rem;
    }

    .get-started-dark-container {
        padding: 0 1rem;
    }

    .get-started-dark-header {
        max-width: 100%;
    }

    .get-started-dark-heading,
    .get-started-dark-description {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    .get-started-dark-form-grid {
        grid-template-columns: 1fr 1fr;
        row-gap: 1.5rem;
        column-gap: 1rem;
    }

    /* Keep state+zipcode side by side */
    .get-started-dark-form-column:first-child .get-started-dark-form-field:nth-child(3) {
        grid-column: 1;
    }

    .get-started-dark-form-column:first-child .get-started-dark-form-field:nth-child(4) {
        grid-column: 2;
    }

    .get-started-dark-submit {
        max-width: 240px;
        width: 100%;
    }
}

/* Extra small devices (320px and below) */
@media (max-width: 320px) {
    .get-started-dark-block {
        padding: 3.75rem 0 5rem;
    }

    .get-started-dark-heading,
    .get-started-dark-description {
        padding: 0 4px;
    }
}

@media (max-width: 767px) {
    .get-started-dark-form-grid>*,
    .get-started-dark-form-grid .get-started-dark-form-field {
        grid-column: 1 / -1;
    }
}