/*
 * ChildCareGuide page legacy styles — extracted from Foundation 5 (c4k.css),
 * app.css, and page-concierge.css.
 *
 * Isolation strategy (same as contactus.css / directory.css):
 *   1. `@scope (.legacy-content)` — rules apply ONLY to descendants of
 *      <div class="legacy-content">, keeping TopNav/Footer on Tailwind v4.
 *   2. `@layer base / components` — Tailwind v4 declares
 *      `@layer theme, base, components, utilities` first. Rules that must
 *      beat Tailwind utilities are placed unlayered at the bottom.
 *
 * Image url() paths were rewritten to ABSOLUTE paths (`/content/assets/...`)
 * because this file lives at /css/pages/ whereas the originals lived at
 * /content/assets/css/.
 */

/* ============================================================
   BASE LAYER — preflight compat + element resets
   ============================================================ */
@layer base {
    @scope (.legacy-content) {
        *,
        ::before,
        ::after {
            border-color: #e5e7eb;
            /* Foundation 5 grid assumes border-box so padding on .columns
               doesn't overflow the declared width. Tailwind v4 preflight
               already sets this globally, but @scope ancestors (html/body)
               aren't in scope, so re-apply on every descendant to be safe. */
            box-sizing: border-box;
        }

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

        :scope {
            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;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: "Poppins", sans-serif;
            font-weight: bold;
            font-style: normal;
            color: #231673;
            /* Global uppercase from c4k.css 8793. Without this the hero
               h1 renders as "Child Care Guide" mixed-case instead of the
               legacy "CHILD CARE GUIDE". The `.careguide_info--cont h2`
               rule below resets text-transform:none for the info cards. */
            text-transform: uppercase;
            text-rendering: optimizeLegibility;
            margin-top: 0.2rem;
            margin-bottom: 0.5rem;
            line-height: 1.4;
        }
        h1 { font-size: 2rem; }
        h2 { font-size: 1.625rem; }
        h3 { font-size: 1.5625rem; }
        h4 { font-size: 1.1875rem; }
        h5 { font-size: 1.125rem; }
        h6 { font-size: 0.875rem; }

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

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

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

/* ============================================================
   COMPONENTS LAYER — Foundation grid + visibility + page layout
   ============================================================ */
@layer components {
    @scope (.legacy-content) {
        /* ----------------------------------------
           Foundation grid — .row / .columns (c4k.css 121 + 8784 override) */
        .row {
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            margin-top: 0;
            margin-bottom: 0;
            max-width: 62.5rem;
        }

        .row {
            max-width: 1396px !important;
            width: 1396px;
        }

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

        .row .row {
            width: auto;
            margin-left: -0.9375rem;
            margin-right: -0.9375rem;
            margin-top: 0;
            margin-bottom: 0;
            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;
        }

        @media only screen {
            .column,
            .columns {
                position: relative;
                padding-left: 0.9375rem;
                padding-right: 0.9375rem;
                float: left;
            }

            /* Note: `xsmall-6` appears in markup (legacy dead class — no
               rule in c4k.css/app.css/page-concierge.css). Intentionally
               NOT styled here; column falls back to `.columns { width: 100% }`
               on mobile, which is the legacy behavior. */
            .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%; }

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

        @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%; }

            /* Foundation offset helpers — needed for
               `large-offset-6 medium-offset-4` on the bottom CTA column. */
            .medium-offset-4 { margin-left: 33.33333% !important; }

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

        @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-6 { margin-left: 50% !important; }

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

        /* ----------------------------------------
           Foundation visibility helpers (c4k.css 6109 + 6142).
           Legacy "small" breakpoint in this project is <990px (not the
           Foundation default 641px) — the medium grid kicks in at 990px.
           So `.show-for-small-only` must stay visible until 990px. */
        .show-for-small-only { display: inherit !important; }

        @media only screen and (min-width: 990px) {
            .show-for-small-only { display: none !important; }
        }

        /* ----------------------------------------
           .row responsive overrides (c4k.css 9101 / 9168 / 9202).
           Legacy forces `.row { max-width: 1396px !important; width: 1396px }`
           as the base. Without these media overrides the row overflows the
           viewport on anything below 1396px and breaks the whole layout.
           Declared LAST in @layer components so later-declared wins. */
        @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: 767px) {
            .row {
                max-width: 100%;
                width: 100%;
            }
        }

        /* ----------------------------------------
           Utility helpers (from app.css) */
        .text-center { text-align: center !important; }
        .bold { font-weight: bold !important; }
        .margin0 { margin: 0 !important; }
        .marginb-10 { margin-bottom: 10px !important; }
        .paddingtop25 { padding-top: 25px !important; }

        /* ----------------------------------------
           Icon sprite (page-concierge.css 94 + specific positions).
           Only the four icons actually used by this page are kept. */
        .con_icon {
            background: url(/content/assets/img/childcareguidicons@2x.png) no-repeat center center;
            display: inline-block;
            vertical-align: middle;
        }

        .con_icon--way {
            background-position: -30px -33px;
            width: 94px;
            height: 94px;
        }
        .con_icon--bag {
            background-position: -29px -167px;
            width: 94px;
            height: 94px;
        }
        .con_icon--confused {
            background-position: -29px -301px;
            width: 94px;
            height: 94px;
        }
        .con_icon--adjust {
            background-position: -29px -455px;
            width: 94px;
            height: 94px;
        }

        /* ----------------------------------------
           Page-specific layout (page-concierge.css). */
        .childcareguide-page p { font-size: 1rem; }

        .hero_info_childcareguide {
            /* Country-specific background-image is set via inline style on the
               element; the base bg color + no-repeat sizing lives here. */
            background: #4ec4c3 no-repeat center top;
            background-size: 122%;
        }

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

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

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

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

        .childcareguide-page .sidebar {
            background: #8160a4;
            min-height: 100px;
            margin-top: 30px;
            margin-bottom: 50px;
            padding-bottom: 20px;
        }

        .childcareguide-page .sidebar h1 {
            font-size: 5rem;
            font-weight: 600;
            line-height: .9;
            color: #FFFFFF;
        }

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

        .careguide_info {
            max-width: 275px;
            margin: 0 auto;
            text-align: center;
        }

        .careguide_info--cont,
        .careguide_info--cont h2 {
            font-size: 1.2rem;
            font-weight: 500;
            color: #174976;
            padding: 15px 0 30px 0;
            line-height: 1.1;
        }

        .careguide_info--cont h2 {
            margin: 0;
            padding: 0;
            text-transform: none;
        }

        .careguide_bottomline {
            background: #fff url(/content/assets/img/slider/childCareGuide_bottom.jpg) no-repeat center center;
            background-size: cover;
        }

        .careguide_bottomline--content {
            margin-top: 80px;
            margin-bottom: 80px;
            background: #fff;
            padding: 20px 40px;
        }

        /* ----------------------------------------
           Responsive overrides (page-concierge.css) */
        @media only screen and (max-width: 1030px) {
            .sidebar h3 { font-size: 1.5rem; }
        }

        @media only screen and (max-width: 989px) {
            .hero_info_childcareguide {
                /* Mobile uses the <img class="show-for-small-only"> as hero. */
                background-image: none !important;
            }

            .sidebar {
                margin-top: 20px;
                padding-bottom: 10px;
            }

            .careguide_info--cont,
            .careguide_info--cont h2 {
                font-size: 1rem;
            }

            .careguide_bottomline { background: #fff; }

            .careguide_bottomline--content {
                margin: 30px 0;
                padding: 0 0 20px 0;
            }
        }

        @media only screen and (max-width: 767px) {
            .search-top { padding: 10px; }

            .searchIcon {
                height: 65px;
                margin: 0 auto 9px;
                padding: 15px;
                width: 65px;
            }

            .search-top .hero-title {
                font-size: 1.2rem !important;
                line-height: 1.2 !important;
                margin-bottom: 25px !important;
            }

            .search-top p { margin-bottom: 1rem !important; }

            .childcareguide-page .sidebar h1 {
                font-size: 3.2rem !important;
                line-height: 1 !important;
                margin-bottom: 5px !important;
            }

            .childcareguide-page .sidebar { padding-bottom: 0; }

            .childcareguide-page .sidebar .button.large {
                padding-left: 1.25rem;
                padding-right: 1.25rem;
            }

            .careguide_info--cont,
            .careguide_info--cont h2 {
                font-size: .8rem;
            }
        }

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

/* ============================================================
   UNLAYERED (highest priority — beats Tailwind utilities)
   ============================================================ */
@scope (.legacy-content) {
    /*
     * Foundation .button (c4k.css 1744) + color variants (c4k.css 7862+).
     * Unlayered so it beats Tailwind v4's preflight which resets <button>
     * styling.
     */
    button,
    .button {
        border-style: solid;
        border-width: 0;
        cursor: pointer;
        font-family: "Nunito", sans-serif;
        font-weight: 700 !important;
        line-height: normal;
        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;
        border-color: #002e56;
        color: #fff;
        text-transform: uppercase;
        border-radius: 4px;
        transition: background-color 300ms ease-out;
        -webkit-appearance: none;
        border: none;
    }

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

    .button.green { background-color: #4ec4c3; }
    .button.purple { background-color: #7C43C0; }

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