/*
 * Directory page component styles — extracted from legacy site.min.css
 * (lines 16246-16738) to preserve pixel-perfect rendering.
 *
 * Isolation strategy — two layers of defense:
 *
 * 1. `@scope (.legacy-content)` limits these rules to descendants of
 *    <div class="legacy-content">, so Layout 2025 TopNav/Footer (which
 *    live outside that wrapper) keep their Tailwind v4 styling from
 *    site-v4.min.css untouched.
 *
 * 2. `@layer base` / `@layer components` place these rules in the
 *    Tailwind v4 cascade layers (declared by site-v4.min.css as
 *    `@layer theme, base, components, utilities`). The `utilities`
 *    layer comes last, so any Tailwind utility (e.g. `md:w-[300px]`,
 *    `md:pl-[30px]`) loaded from site-v4.min.css automatically wins
 *    over a conflicting rule in the `components` layer — regardless of
 *    stylesheet load order. This is what `_Layout_V2` used to give us
 *    for free by compiling everything into a single Tailwind v3 bundle.
 *
 * Used by /parent-playbook (DirectoryController.Index). Image url() paths
 * were rewritten from `../img/...` (relative to /css/) to `../../img/...`
 * (relative to /css/pages/).
 *
 * Browser support: `@scope` ships in Chrome 118+, Safari 17.4+, Firefox 128+.
 * `@layer` ships in all the same (and earlier) versions.
 */

/*
 * `--black` is defined in root.css (loaded only by certain layouts); provide
 * a fallback at :root so rules inside @scope that read `var(--black)` still
 * resolve under Layout 2025 where root.css is absent.
 */
:root {
    --black: var(--black, #000000);
}

/*
 * Tailwind v3 → v4 compat preflight (scoped to .legacy-content only).
 *
 * v3 (site.min.css) had a preflight that initialized dozens of --tw-*
 * CSS variables on `*, ::before, ::after` AND defaulted border-color to
 * gray-200. v4 (site-v4.min.css) dropped both. Legacy rules below depend
 * on these defaults:
 *   1. `.border` utility would inherit currentColor (dark) instead of
 *      gray-200 — visible in _parents_card.
 *   2. Composite transform rules like `.features .swiper-slide-active`
 *      build `transform: translate(var(--tw-translate-x), ...) rotate(var(--tw-rotate)) ... scaleX/Y(...)` —
 *      without defaults the whole transform string is invalid CSS and
 *      the browser drops it, so the carousel scale animation disappears.
 *
 * Placed in `@layer base` so Tailwind utilities in `@layer utilities` still
 * win when the markup opts into them (e.g. `.border-red-500`).
 */
@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: "";
        }

        /* Restore legacy body font — Layout 2025 sets body to Inter via
           --default-font-family in site-v4.min.css, but the old _Layout.cshtml
           rendered Directory with Nunito inherited from body. Set on the
           scope root so every descendant inherits Nunito unless a more
           specific rule (e.g. .directory-* ui-sans-serif stacks) wins. */
        :scope {
            font-family: "Nunito", sans-serif;
        }
    }
}

@layer components {
    @scope (.legacy-content) {
        .directory-fieldset {
            margin-left: auto;
            margin-right: auto;
            margin-top: 0px;
            margin-bottom: 0px;
            border-radius: 45px;
            padding-left: 0.75rem;
            padding-right: 0.75rem;
            padding-top: 0px;
            padding-bottom: 0px;
        }

        @media (min-width: 576px) {
            .directory-fieldset {
                width: 30%;
                background-color: transparent;
            }
        }

        @media (min-width: 992px) {
            .directory-fieldset {
                width: -webkit-fit-content;
                width: -moz-fit-content;
                width: fit-content;
            }
        }

        .directory-search {
            width: 80%;
            --tw-bg-opacity: 1;
            background-color: rgb(255 255 255 / var(--tw-bg-opacity));
            background-size: cover;
            --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
            --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        }

        .directory-features {
            margin: 1rem;
        }

        .directory-search-button {
            margin-left: 0px;
            margin-right: 0px;
            margin-top: 0.5rem;
            margin-bottom: 0.5rem;
            height: inherit;
            width: 100%;
            border-radius: 40px;
            --tw-bg-opacity: 1;
            background-color: rgb(90 96 236 / var(--tw-bg-opacity));
        }

        @media (min-width: 992px) {
            .directory-search-button {
                height: 5rem;
                width: 5rem;
                padding: 0.75rem;
            }
        }

        .directory-heading-span {
            font-weight: 100;
            line-height: 1;
        }

        .directory-subheading {
            margin-bottom: 1rem;
            text-align: center;
            font-family:
                ui-sans-serif,
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                "Helvetica Neue",
                Arial,
                "Noto Sans",
                sans-serif,
                "Apple Color Emoji",
                "Segoe UI Emoji",
                "Segoe UI Symbol",
                "Noto Color Emoji";
            font-size: 20px;
            font-weight: 600;
            color: var(--black);
        }

        @media (min-width: 768px) {
            .directory-subheading {
                margin-bottom: 60px;
            }
        }

        .directory-heading-container {
            width: 80%;
            font-family:
                ui-sans-serif,
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                "Helvetica Neue",
                Arial,
                "Noto Sans",
                sans-serif,
                "Apple Color Emoji",
                "Segoe UI Emoji",
                "Segoe UI Symbol",
                "Noto Color Emoji";
        }

        .directory-main-hero {
            background-image: url("../../img/background.svg");
            background-size: cover;
            background-repeat: no-repeat;
        }

        .directory-row-field {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            background-image: none;
        }

        @media (min-width: 768px) {
            .directory-row-field {
                padding-right: 0px;
            }
        }

        @media (min-width: 992px) {
            .directory-row-field {
                flex-direction: row;
                border-radius: 50px;
                --tw-bg-opacity: 1;
                background-color: rgb(255 255 255 / var(--tw-bg-opacity));
                padding: 0.75rem;
                --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
                --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
            }
        }

        .directory-selection {
            margin-bottom: 20px;
            width: 250px;
            border-radius: 20px;
        }

        @media (min-width: 992px) {
            .directory-selection {
                width: inherit;
                gap: 0.5rem;
                border-radius: 0px;
                border-style: none;
                background-image: none;
            }
        }

        .directory-search-field {
            margin-left: auto;
            margin-right: auto;
            margin-top: 0px;
            margin-bottom: 0px;
            display: flex;
            width: 80%;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .directory-carousel-cell {
            display: flex;
            flex-direction: column;
            border-radius: 1rem;
            --tw-bg-opacity: 1;
            background-color: rgb(255 255 255 / var(--tw-bg-opacity));
            --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
            --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        }

        .vacancy-icon.directory-carousel-cell {
            background: red;
        }

        .directory-card-image {
            height: 250px;
            border-bottom-left-radius: 20px;
            background-size: auto;
            background-repeat: no-repeat;
        }

        @media (min-width: 992px) {
            .directory-card-image {
                width: 100%;
                background-size: cover;
            }
        }

        .directory-card-image-plain {
            border-bottom-left-radius: 20px;
            background-size: cover;
            background-repeat: no-repeat;
        }

        @media (min-width: 992px) {
            .directory-card-image-plain {
                width: 100%;
                background-size: cover;
            }
        }

        .directory-carousel-cell {
            margin-left: 20px;
            margin-right: 20px;
            width: inherit;
        }

        .directory-card-footer {
            display: flex;
            justify-content: space-between;
        }

        .directory-card-address {
            font-family:
                ui-sans-serif,
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                "Helvetica Neue",
                Arial,
                "Noto Sans",
                sans-serif,
                "Apple Color Emoji",
                "Segoe UI Emoji",
                "Segoe UI Symbol",
                "Noto Color Emoji";
            font-size: 0.875rem;
            font-weight: 500;
            --tw-text-opacity: 1;
            color: rgb(90 96 236 / var(--tw-text-opacity));
        }

        .directory-card-actions {
            font-family:
                ui-sans-serif,
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                "Helvetica Neue",
                Arial,
                "Noto Sans",
                sans-serif,
                "Apple Color Emoji",
                "Segoe UI Emoji",
                "Segoe UI Symbol",
                "Noto Color Emoji";
            font-size: 0.875rem;
            font-weight: 500;
            --tw-text-opacity: 1;
            color: rgb(39 39 39 / var(--tw-text-opacity));
        }

        .directory-card-title {
            text-align: left;
            font-family:
                ui-sans-serif,
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                "Helvetica Neue",
                Arial,
                "Noto Sans",
                sans-serif,
                "Apple Color Emoji",
                "Segoe UI Emoji",
                "Segoe UI Symbol",
                "Noto Color Emoji";
            font-size: 22px;
            font-weight: 700;
            --tw-text-opacity: 1;
            color: rgb(90 96 236 / var(--tw-text-opacity));
            color: var(--black);
        }

        .directory-card-description {
            text-align: left;
            font-family:
                ui-sans-serif,
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                "Helvetica Neue",
                Arial,
                "Noto Sans",
                sans-serif,
                "Apple Color Emoji",
                "Segoe UI Emoji",
                "Segoe UI Symbol",
                "Noto Color Emoji";
            font-size: 12px;
            font-weight: 400;
            --tw-text-opacity: 1;
            color: rgb(131 131 131 / var(--tw-text-opacity));
        }

        .directory-card-details {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            padding: 20px;
            text-align: left;
            font-family:
                ui-sans-serif,
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                "Helvetica Neue",
                Arial,
                "Noto Sans",
                sans-serif,
                "Apple Color Emoji",
                "Segoe UI Emoji",
                "Segoe UI Symbol",
                "Noto Color Emoji";
        }

        .directory-card-button {
            border-radius: 50px;
            padding-left: 12px;
            padding-right: 12px;
            padding-top: 5px;
            padding-bottom: 5px;
            font-size: 0.75rem;
            --tw-text-opacity: 1;
            color: rgb(255 255 255 / var(--tw-text-opacity));
        }

        .directory-card-company-logo {
            position: absolute;
            bottom: -8px;
            right: 20px;
            padding: 5px;
        }

        .directory-arrows {
            margin-top: 1.25rem;
            display: flex;
            justify-content: center;
            gap: 1rem;
        }

        .directory-features-heading {
            margin-bottom: 2rem;
            margin-top: 100px;
            font-family:
                ui-sans-serif,
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                "Helvetica Neue",
                Arial,
                "Noto Sans",
                sans-serif,
                "Apple Color Emoji",
                "Segoe UI Emoji",
                "Segoe UI Symbol",
                "Noto Color Emoji";
            font-size: 1.875rem;
            font-weight: 700;
            color: var(--black);
        }

        .carousel {
            margin: auto;
            display: flex;
            max-width: 800px;
            overflow-x: scroll;
            font-family:
                ui-sans-serif,
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                "Helvetica Neue",
                Arial,
                "Noto Sans",
                sans-serif,
                "Apple Color Emoji",
                "Segoe UI Emoji",
                "Segoe UI Symbol",
                "Noto Color Emoji";
        }

        .slides-container-div {
            display: flex;
            height: 18rem;
            scroll-snap-type: x var(--tw-scroll-snap-strictness);
            --tw-scroll-snap-strictness: mandatory;
        }

        .slides-container-div > :not([hidden]) ~ :not([hidden]) {
            --tw-space-x-reverse: 0;
            margin-right: calc(0.5rem * var(--tw-space-x-reverse));
            margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
        }

        .slides-container-div {
            overflow: hidden;
            overflow-x: auto;
            scroll-behavior: smooth;
            border-radius: 0.25rem;
        }

        .slides-container-div::before {
            width: 45vw;
            content: var(--tw-content);
            flex-shrink: 0;
        }

        .slides-container-div::after {
            width: 45vw;
            content: var(--tw-content);
            flex-shrink: 0;
        }

        @media (min-width: 768px) {
            .slides-container-div::before {
                content: var(--tw-content);
                width: 0px;
            }

            .slides-container-div::after {
                content: var(--tw-content);
                width: 0px;
            }
        }

        .slide-each {
            height: 100%;
            flex-shrink: 0;
            scroll-snap-align: center;
            overflow: hidden;
            border-radius: 0.25rem;
            aspect-ratio: 1 / 1;
        }

        .slide-size {
            height: 100%;
            width: 100%;
            -o-object-fit: cover;
            object-fit: cover;
        }

        .parents-slide-each {
            height: 100%;
            flex-shrink: 0;
            scroll-snap-align: center;
            overflow: hidden;
            border-radius: 0.25rem;
            aspect-ratio: 1 / 1;
        }

        .parents-slide-size {
            height: 100%;
            width: 100%;
            -o-object-fit: cover;
            object-fit: cover;
        }

        .small-card {
            --tw-scale-x: 0.8;
            --tw-scale-y: 0.8;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x))
                skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        }

        @media (min-width: 768px) {
            .small-card {
                --tw-scale-x: 1;
                --tw-scale-y: 1;
                transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
                    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
            }
        }

        .features .swiper-slide-active {
            --tw-scale-x: 1 !important;
            --tw-scale-y: 1 !important;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x))
                skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
        }

        @media (min-width: 768px) {
            .features .swiper-slide-active {
                --tw-scale-x: 1.14 !important;
                --tw-scale-y: 1.14 !important;
                transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
                    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
            }
        }

        .features .swiper-slide .swiper-slide-prev .swiper-slide-next {
            --tw-scale-x: 0.5;
            --tw-scale-y: 0.5;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x))
                skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        }

        .swiper-slide {
            --tw-shadow: 0 0 #0000;
            --tw-shadow-colored: 0 0 #0000;
            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        }

        @media (max-width: 640px) {
            .features .swiper-slide-active {
                transform: scale(1) !important;
            }
        }

        .parent-box {
            background-color: rgba(162, 185, 255, 1), rgba(187, 226, 255, 1);
        }

        .restrict-text {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .restrict-text-parent-card {
            display: -webkit-box;
            -webkit-line-clamp: 6;
            line-clamp: 6;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .find-local-background {
            background-image: linear-gradient(#f8eaff, #cab8ff);
        }

        /* NOTE: missing 'px' unit is intentional — preserves legacy behavior
       from site.min.css where this media query is invalid and never applies. */
        @media (max-width: 786) {
            .find-local-background {
                background-image: url("../../img/small-local-bg.svg");
            }
        }

        .search_box_shadow {
            box-shadow: 0px 9px 34.8px 0px rgba(128, 130, 202, 0.66);
        }

        @media (max-width: 992px) {
            .search_box_shadow {
                box-shadow: none;
            }
        }

        .see-more {
            width: -webkit-fit-content;
            width: -moz-fit-content;
            width: fit-content;
            border-radius: 25px;
            padding: 10px 20px;
        }

        /*
     * .hide-scrollbar — used by _directory_card (tag strip), _footer_nav,
     * _header_nav. Copied verbatim from legacy site.min.css:13525-13532.
     * Fixes: scrollbar + its 2 end arrow buttons (visible on Windows Chrome
     * with overflow-x: scroll) showing on tag strip inside card carousel.
     */
        .hide-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .tags::-webkit-scrollbar {
            height: 0px;
        }

        .tags::-webkit-scrollbar-thumb {
            border-radius: 6px;
        }

        .tags::-webkit-scrollbar-track {
            background-color: #f1f1f1;
        }

        .brand {
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 0px;
            margin-top: 6px;
            width: 80%;
        }

        @media (min-width: 768px) {
            .brand {
                width: 40%;
            }
        }
    }
}

/*
 * `.select-options` — intentionally UNLAYERED (and so beats every Tailwind
 * layer, including `utilities`). Mirrors the v3 cascade: in site.min.css
 * this rule sat at line 16688, after `.border-none` (line 8912). That meant
 * on <select class="border-none select-options md:border-b md:border-black">
 * the shorthand `border-bottom: 1px solid black` won the `border-bottom-style`
 * property over `.border-none`'s `border-style: none`, making the bottom
 * border visible at desktop. Under our component-layer shim, utilities
 * normally win — so `.select-options` must be hoisted out to preserve that
 * legacy behaviour. Used by Category/State selects in _search.cshtml.
 */
@scope (.legacy-content) {
    .select-options {
        border-bottom: 1px solid black;
    }

    @media (max-width: 992px) {
        .select-options {
            box-shadow: 0px 10px 31.3px 0px rgba(200, 201, 230, 0.69);
            border: none;
        }
    }
}