/*
 * ChildcareDataServices — legacy shim scoped to .legacy-content (replaces old layout
 * CSS + page-concierge for this view). Unlayered headings / .button beat Tailwind preflight.
 * @scope: Chrome 118+, Safari 17.4+, Firefox 128+.
 */

@layer base {
    @scope (.legacy-content) {
        *,
        ::before,
        ::after {
            border-color: #e5e7eb;
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-rotate: 0;
            --tw-skew-x: 0;
            --tw-skew-y: 0;
            --tw-scale-x: 1;
            --tw-scale-y: 1;
            --tw-scroll-snap-strictness: proximity;
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-ring-shadow: 0 0 #0000;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-colored: 0 0 #0000;
        }

        ::before,
        ::after {
            --tw-content: "";
        }

        :scope {
            background: transparent;
            color: #231673;
            font-family: "Nunito", sans-serif;
            font-weight: 300;
            font-style: normal;
            font-size: 100%;
            line-height: 1;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            word-wrap: break-word;
        }

        p {
            font-family: inherit;
            font-weight: 300;
            font-size: 1.125rem;
            line-height: 1.6;
            text-rendering: optimizeLegibility;
        }

        a {
            color: #231673;
            text-decoration: none;
            line-height: inherit;
        }

        img {
            display: inline-block;
            vertical-align: middle;
            max-width: 100%;
            height: auto;
            border: none;
        }

        ul,
        ol,
        dl {
            font-size: 1.125rem;
            line-height: 1.6;
            margin-bottom: 1.25rem;
            list-style-position: outside;
            font-family: inherit;
        }

        ul {
            margin-left: 1.1rem;
        }
        ol {
            margin-left: 1.4rem;
        }
    }
}

@layer components {
    @scope (.legacy-content) {
        .row {
            width: 1396px;
            max-width: 1396px !important;
            margin-left: auto;
            margin-right: auto;
            margin-top: 0;
            margin-bottom: 0;
        }

        .row:before,
        .row:after {
            content: " ";
            display: table;
        }

        .row:after {
            clear: both;
        }

        .row .row {
            width: auto;
            margin-left: -0.9375rem;
            margin-right: -0.9375rem;
            max-width: none;
        }

        .row .row:before,
        .row .row:after {
            content: " ";
            display: table;
        }

        .row .row:after {
            clear: both;
        }

        .column,
        .columns {
            padding-left: 0.9375rem;
            padding-right: 0.9375rem;
            width: 100%;
            float: left;
            position: relative;
        }

        [class*="column"] + [class*="column"]:last-child {
            float: right;
        }
        [class*="column"] + [class*="column"].end {
            float: left;
        }

        @media only screen {
            .small-1 {
                width: 8.33333%;
            }
            .small-2 {
                width: 16.66667%;
            }
            .small-3 {
                width: 25%;
            }
            .small-4 {
                width: 33.33333%;
            }
            .small-5 {
                width: 41.66667%;
            }
            .small-6 {
                width: 50%;
            }
            .small-7 {
                width: 58.33333%;
            }
            .small-8 {
                width: 66.66667%;
            }
            .small-9 {
                width: 75%;
            }
            .small-10 {
                width: 83.33333%;
            }
            .small-11 {
                width: 91.66667%;
            }
            .small-12 {
                width: 100%;
            }
        }

        @media only screen and (min-width: 990px) {
            .medium-1 {
                width: 8.33333%;
            }
            .medium-2 {
                width: 16.66667%;
            }
            .medium-3 {
                width: 25%;
            }
            .medium-4 {
                width: 33.33333%;
            }
            .medium-5 {
                width: 41.66667%;
            }
            .medium-6 {
                width: 50%;
            }
            .medium-7 {
                width: 58.33333%;
            }
            .medium-8 {
                width: 66.66667%;
            }
            .medium-9 {
                width: 75%;
            }
            .medium-10 {
                width: 83.33333%;
            }
            .medium-11 {
                width: 91.66667%;
            }
            .medium-12 {
                width: 100%;
            }

            .medium-offset-3 {
                margin-left: 25% !important;
            }
        }

        @media only screen and (min-width: 1396px) {
            .large-1 {
                width: 8.33333%;
            }
            .large-2 {
                width: 16.66667%;
            }
            .large-3 {
                width: 25%;
            }
            .large-4 {
                width: 33.33333%;
            }
            .large-5 {
                width: 41.66667%;
            }
            .large-6 {
                width: 50%;
            }
            .large-7 {
                width: 58.33333%;
            }
            .large-8 {
                width: 66.66667%;
            }
            .large-9 {
                width: 75%;
            }
            .large-10 {
                width: 83.33333%;
            }
            .large-11 {
                width: 91.66667%;
            }
            .large-12 {
                width: 100%;
            }

            .large-offset-4 {
                margin-left: 33.33333% !important;
            }
        }

        .show-for-small-only {
            display: none !important;
        }
        .hide-only-mobile {
            display: initial;
        }

        .text-center {
            text-align: center;
        }
        .bold {
            font-weight: bold !important;
        }
        .pb-25 {
            padding-bottom: 25px !important;
        }
        .paddingtop25 {
            padding-top: 25px !important;
        }
        .marginb20 {
            margin-bottom: 20px;
        }
        .font_medium {
            font-weight: 500;
        }
        .white_bg {
            background: #fff;
        }

        .hero_info_buisness {
            background: #3989c8 url("/content/assets/img/slider/buisness_hero_bg_2.jpg") no-repeat center top;
            background-size: 122%;
        }

        @media only screen and (min-width: 1366px) {
            .hero_info_buisness {
                background-size: 100%;
            }
        }

        .sidebar {
            background: #231673;
            padding: 0 15px 55px 15px;
            margin: 0 0 20px 0;
            position: relative;
            z-index: 10;
            min-height: 650px;
        }

        .hero_info_buisness .sidebar {
            min-height: 200px;
            margin-top: 30px;
            margin-bottom: 150px;
        }

        .search-top {
            padding: 15px 30px 0;
        }

        .searchIcon {
            background: none repeat scroll 0 0 #fff;
            border-radius: 100%;
            display: block;
            height: 90px;
            margin: 15px auto;
            padding: 16px;
            width: 90px;
        }

        .how_work_buisness {
            background: #efefef;
            padding: 50px 0 20px 0;
        }

        .how_work_buisness p {
            font-size: 1.3rem;
            line-height: 1.2;
            color: #000;
        }

        .c4k_flex {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -15px 0 -15px;
        }

        .c4k_flex--col {
            flex-basis: 0;
            flex-grow: 1;
            max-width: 100%;
            padding: 0 15px;
        }

        .bui_item {
            max-width: 200px;
        }

        .bui_item__info {
            padding: 20px 0 20px 0;
        }

        .bui_item p {
            font-weight: 700;
            font-size: 1.1rem;
            color: #666666;
            margin-left: 10px;
        }

        .con_icon {
            background: url("/content/assets/img/childcareguidicons@2x.png") no-repeat center center;
            display: inline-block;
            vertical-align: middle;
        }

        .con_icon--data {
            background-position: -256px -14px;
            width: 160px;
            height: 161px;
        }

        .con_icon--vacancies {
            background-position: -256px -204px;
            width: 160px;
            height: 161px;
        }

        .con_icon--fees {
            background-position: -256px -394px;
            width: 160px;
            height: 161px;
        }

        .con_icon--waitlisting {
            background-position: -250px -589px;
            width: 160px;
            height: 160px;
        }

        .con_icon--geographic {
            background-position: -243px -794px;
            width: 171px;
            height: 161px;
        }

        #midInfo {
            padding: 40px 0 30px 0;
        }

        .bui_content p {
            font-size: 1.1rem;
            color: #333333;
        }

        @media only screen and (min-width: 990px) and (max-width: 1395px) {
            .row {
                max-width: 990px !important;
                width: 990px;
            }
        }

        @media only screen and (max-width: 989px) {
            .small-12 {
                width: 100% !important;
            }
            .row {
                max-width: 100%;
                width: 100%;
            }
        }

        @media only screen and (max-width: 1030px) {
            .hero_info_buisness .sidebar {
                margin: 20px 0;
            }
        }

        @media only screen and (max-width: 979px) {
            .sidebar {
                margin-top: 20px;
                padding-bottom: 10px;
            }
            .how_work_buisness p {
                font-size: 1rem;
            }
            .bui_item {
                max-width: 250px;
                margin: 0 auto;
            }
            .how_work_buisness .c4k_flex {
                flex-direction: column;
            }
            .bui_item__icon {
                text-align: center;
            }
            .bui_content p {
                font-size: 1rem;
            }
        }

        @media only screen and (max-width: 767px) {
            .show-for-small-only {
                display: block !important;
            }
            .hide-for-small-only {
                display: none !important;
            }
            .hide-only-mobile {
                display: none !important;
            }
            .search-top {
                padding: 10px;
            }
            .searchIcon {
                height: 65px;
                margin: 0 auto 9px;
                padding: 15px;
                width: 65px;
            }
            .search-top p {
                margin-bottom: 1rem !important;
            }
            .c4k_flex--col {
                flex-basis: 100%;
            }
        }
    }
}

/* Hero column: unlayered widths beat Tailwind in prod build */
@scope (.legacy-content) {
    @media only screen {
        .hero_info_buisness > .row > .columns.small-12 {
            width: 100% !important;
        }
    }

    @media only screen and (min-width: 990px) {
        .hero_info_buisness > .row > .columns.medium-6 {
            width: 50% !important;
        }
    }

    @media only screen and (min-width: 1396px) {
        .hero_info_buisness > .row > .columns.large-5 {
            width: 41.66667% !important;
        }
    }

    @media only screen and (max-width: 989px) {
        .hero_info_buisness > .row > .columns {
            height: auto !important;
            min-height: 0;
        }
    }
}

@scope (.legacy-content) {
    /* Old _Layout.cshtml load order: c4k.css → page-concierge → app.css → site.min.css (Tailwind v3).
       Base from c4k.css:5297 (Poppins, uppercase, optimizeLegibility, normal style), site.min.css
       preflight resets font-size/font-weight to inherit + margin 0, then explicit h1-h4 rules
       set final font-size/line-height/mb from @apply utilities. */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: "Poppins", sans-serif;
        font-weight: inherit;
        font-style: normal;
        text-transform: uppercase;
        text-rendering: optimizeLegibility;
        margin: 0;
    }

    h1 {
        font-size: 2rem;
        line-height: 2.25rem;
        color: #231673;
        margin-bottom: 0.75rem;
        font-weight: 500;
    }

    h2 {
        color: #231673;
        margin-bottom: 0.75rem;
        font-size: 1.5rem;
        line-height: 1.25;
    }

    h3 {
        color: #231673;
        margin-bottom: 0.75rem;
        font-size: 1.25rem;
        line-height: 1.5rem;
    }

    h4 {
        color: #231673;
        margin-bottom: 0.75rem;
        font-size: 1rem;
        line-height: 1.25rem;
    }

    .sidebar h3 {
        margin-bottom: 30px;
        color: #fff;
        font-family: "Nunito", sans-serif;
    }

    .sidebar p {
        color: #fff;
        font-family: "Nunito", sans-serif;
        margin: 0;
    }

    /* page-concierge.css:569 — applies at all widths ≤1030px */
    @media only screen and (max-width: 1030px) {
        .sidebar h3 {
            font-size: 1.5rem;
        }
    }

    /* page-concierge.css:647 — mobile override */
    @media only screen and (max-width: 767px) {
        .sidebar .search-top h3 {
            font-size: 1.2rem !important;
            line-height: 1.2 !important;
            margin-bottom: 25px !important;
        }
    }

    button,
    .button {
        border: none;
        cursor: pointer;
        font-family: "Nunito", sans-serif;
        font-weight: 700 !important;
        line-height: 20px;
        margin: 0 0 1.25rem;
        position: relative;
        text-decoration: none;
        text-align: center;
        display: inline-block;
        padding: 1.0625rem 2rem 1rem 2rem;
        font-size: 1rem;
        background-color: #231673;
        color: #fff;
        transition: background-color 300ms ease-out;
        -webkit-appearance: none;
        text-transform: uppercase;
        border-radius: 4px;
    }

    button:hover,
    button:focus,
    .button:hover,
    .button:focus {
        color: #fff;
    }

    button.large,
    .button.large {
        padding: 1.125rem 2.25rem 1.1875rem 2.25rem;
        font-size: 1.25rem;
    }

    .button.purple {
        background-color: #7c43c0;
    }

    .block {
        display: block;
    }
}