/*
 * AboutUs — legacy shim scoped to .legacy-content (replaces old _Layout.cshtml
 * load order: c4k.css -> page-landings -> app.css -> site.min.css). Same pattern
 * as childcare-data-services.css / contactus-success.css.
 * @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;
        }
    }
}

@layer components {
    @scope (.legacy-content) {
        /* Foundation grid — only .small-12 used by this view, keep base .row/.columns */
        .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;
        }

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

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

        @media only screen {
            .small-12 {
                width: 100%;
            }
        }

        /* Page-specific rules extracted from app.css (#about-top, .aboutContent,
           .topImage-intro, .icon-fly, .paddingtb25). */
        .text-center {
            text-align: center;
        }

        .paddingtb25 {
            padding: 25px 0 !important;
        }

        #about-top {
            height: 400px;
            background: url("/content/assets/img/about-us-3.jpg") center top;
            background-size: cover;
        }

        .topImage-intro {
            margin-top: -25px;
            background: #fff;
            padding: 10px 20px;
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
            margin-bottom: 70px;
        }

        .aboutContent {
            background: #f3f8f6;
        }

        .aboutContent .topImage-intro {
            box-shadow: none;
            padding: 25px;
        }

        .icon-fly {
            width: 96px;
            height: 96px;
            background: #e8e8e7 url("/content/assets/img/fly_icon.png") no-repeat center center;
            background-size: 100%;
            border-radius: 50%;
            display: inline-block;
        }

        /* Responsive — match legacy breakpoints. */
        @media only screen and (min-width: 990px) and (max-width: 1395px) {
            .row {
                max-width: 990px !important;
                width: 990px;
            }
        }

        @media only screen and (max-width: 1360px) {
            #about-top {
                height: 250px;
            }
            .topImage-intro {
                margin-top: -15px;
            }
        }

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

        @media only screen and (max-width: 767px) {
            #about-top {
                height: 200px;
                background-position: 69% 0%;
            }
            .row {
                max-width: 100%;
                width: 100%;
            }
        }
    }
}

/* Unlayered headings / anchors — match old _Layout.cshtml cascade
   (c4k.css:5297 h1-h6 Poppins + site.min.css h* size/margin overrides).
   Beat Tailwind preflight. <p> inherits Nunito from :scope (matches
   production where body font-family is var(--font-default) = Nunito). */
@scope (.legacy-content) {
    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;
        line-height: 1.25rem;
        font-weight: 700;
    }
}