/*
 * ContactUs page legacy styles — extracted from Foundation 5 (c4k.css),
 * app.css, page-home.css, page-sign_up.css, home-stye1.css.
 *
 * Isolation strategy (same as directory.css):
 *   1. `@scope (.legacy-content)` — rules apply ONLY to descendants of
 *      <div class="legacy-content">, keeping TopNav/Footer (outside the
 *      wrapper) on Tailwind v4 styling from site-v4.min.css.
 *   2. `@layer base / components` — Tailwind v4 declares
 *      `@layer theme, base, components, utilities` first. Our rules join
 *      those layers so any Tailwind utility (`@layer utilities`) wins by
 *      default. Rules that must beat utilities are placed unlayered at the
 *      bottom (highest cascade priority).
 *
 * 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/.
 *
 * Browser support: `@scope` in Chrome 118+, Safari 17.4+, Firefox 128+.
 */

:root {
    /* Named color fallbacks used by legacy rules below */
    --c4k-dark-purple: var(--c4k-dark-purple, #231673);
}

/* ============================================================
   BASE LAYER — preflight compat + element resets
   ============================================================ */
@layer base {
    @scope (.legacy-content) {
        /* Tailwind v3 → v4 preflight compat (same as directory.css) */
        *,
        ::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: "";
        }

        /*
         * Foundation body defaults (c4k.css 48 + app.css 2). `html`/`body`
         * cannot match inside @scope (they are ancestors of the wrapper),
         * so apply on :scope — the `.legacy-content` element itself
         * inherits the font-family / color to all descendants.
         *
         *   - font-family "Nunito" — the whole legacy app runs on Nunito
         *     (loaded by _Layout_2025 via /css/fonts-nunito.css).
         *   - color #231673 — dark purple, Foundation's default text color.
         *   - line-height 1 — legacy tight leading, NOT the browser default 1.5.
         *   - font-weight 300 — legacy uses light weight by default.
         */
        :scope {
            background: #ebeee8;
            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;
        }

        /* Foundation headings (from c4k.css 5297+).
           ContactUs uses h2/h4/h6 with Tailwind utility classes (font-bold
           text-4xl etc.) which live in @layer utilities and override these.
           These rules only apply to bare headings like <h6>&nbsp;</h6>. */
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: "Poppins", sans-serif;
            font-weight: bold;
            font-style: normal;
            color: #231673;
            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;
        }

        /* Foundation paragraph (from c4k.css 5277+) */
        p {
            font-family: inherit;
            font-weight: 300;
            font-size: 1.125rem;
            line-height: 1.6;
            margin-bottom: 1.25rem;
            text-rendering: optimizeLegibility;
        }

        /* Foundation link defaults (from c4k.css 5263+).
           Tailwind v4 preflight strips `a { color }`, so without this
           anchors inherit parent color and look like plain text. */
        a {
            color: #231673;
            text-decoration: none;
            line-height: inherit;
        }

        a img {
            border: none;
        }

        /* Foundation form element resets (from c4k.css 2620, 2651, 2892+) */
        form {
            margin: 0 0 1rem;
        }

        /*
         * CRITICAL (from c4k.css 7741) — `form input, form textarea, form select`
         * with `!important` kills the 1rem margin-bottom that
         * `input[type="radio"] { margin: 0 0 1rem 0 }` (also from c4k.css)
         * otherwise puts under every radio button. Without this line, the
         * radios end up with a visible 16px gap below them, breaking the
         * inline-row of radio + label used in the enquiry-type picker.
         */
        form input,
        form textarea,
        form select {
            margin-bottom: 0 !important;
        }

        /* from c4k.css 7756 — radio button border-radius (redundant with
           the unlayered `revert` block at the bottom, kept for safety). */
        form input[type="radio"] {
            border-radius: 100% !important;
        }

        /*
         * Form <fieldset><ol><li> structure (from page-sign_up.css 70, 87).
         *
         *   - Every <label> directly inside a form's ol/li is HIDDEN by
         *     default — the input's `placeholder` is the intended label.
         *     This hides "Name:", "Email Address:", "Comment/Enquiry:" in
         *     ContactUs.
         *   - The <label for="enquiryType" class="bold block"> on the
         *     radio group still shows because `.block { display: block }`
         *     (specificity 0,1,0) beats `form fieldset ol li label`
         *     (specificity 0,0,5).
         *   - The labels next to each radio (General/Technical/Registration)
         *     also still show — Foundation's
         *     `input[type="radio"] + label { display: inline-block }`
         *     (specificity 0,1,2) wins over the hide rule.
         */
        form fieldset ol li label {
            display: none;
        }

        /* Spacing between form rows (page-sign_up.css 87). */
        form fieldset ol li {
            margin-bottom: 15px;
        }

        /* Validation summary list style (c4k.css 7784 / page-sign_up.css 313).
           When `<small class="error top_error">@Html.ValidationSummary()</small>`
           renders a <ul> of error messages, each bullet is a small square. */
        form small ul,
        form small ul li {
            font-size: 0.6875rem !important;
            list-style: square;
        }

        fieldset {
            border: solid 0px #ddd;
            padding: 0;
            margin: 0;
        }

        fieldset legend {
            font-weight: bold;
            background: transparent;
            padding: 0 0.1875rem;
            margin: 0 0 0 -0.1875rem;
        }

        /* Foundation label (from c4k.css 2651+).
           Tailwind v4 preflight doesn't style labels but Foundation relies
           on label color #231673 + block display + font-size 0.875rem. */
        label {
            font-size: 0.875rem;
            color: #231673;
            cursor: pointer;
            display: block;
            font-weight: 500;
            line-height: 1.5;
            margin-bottom: 0.1875rem;
        }

        /*
         * CRITICAL: Foundation text input defaults (from c4k.css 2830+).
         * Without this block, Tailwind v4 preflight (background-color:
         * transparent, border-width: 0, padding: 0) makes every input look
         * like a line of bare text. Foundation's original rules live here
         * so inputs show white background + 1px solid border + padding.
         */
        input[type="text"],
        input[type="password"],
        input[type="date"],
        input[type="datetime"],
        input[type="datetime-local"],
        input[type="month"],
        input[type="week"],
        input[type="email"],
        input[type="number"],
        input[type="search"],
        input[type="tel"],
        input[type="time"],
        input[type="url"],
        textarea {
            -webkit-appearance: none;
            appearance: none;
            background-color: #fff;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            border: 1px solid #d0d6d5;
            box-shadow: none;
            color: #22282b;
            display: block;
            font-size: 0.875rem;
            margin: 0 0 1rem 0;
            padding: 0.5rem;
            height: 2.3125rem;
            width: 100%;
            box-sizing: border-box;
            transition: all 0.15s linear;
        }

        input[type="text"]:focus,
        input[type="password"]:focus,
        input[type="email"]:focus,
        input[type="number"]:focus,
        input[type="search"]:focus,
        input[type="tel"]:focus,
        input[type="url"]:focus,
        textarea:focus {
            background: #fafafa;
            border-color: #d0d6d5;
            outline: none;
        }

        textarea {
            height: auto;
            min-height: 50px;
        }

        /* Foundation select (from c4k.css 2676+).
           Note: original uses an inline SVG data-URL for the chevron —
           preserved verbatim. */
        select {
            -webkit-appearance: none !important;
            appearance: none !important;
            background: #fff
                url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==")
                no-repeat;
            background-position-x: 97%;
            background-position-y: center;
            border: 1px solid #d0d6d5;
            padding: 0.5rem;
            font-size: 0.875rem;
            border-radius: 0;
            height: 2.3125rem;
        }

        input[type="file"],
        input[type="checkbox"],
        input[type="radio"],
        select {
            margin: 0 0 1rem 0;
        }

        /* Foundation list defaults (from c4k.css 5377+) */
        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;
        }

        /*
         * Foundation error messages (c4k.css 2922+).
         *
         * Intentional design: base `small.error` has `color` EQUAL to
         * `background` — text is invisible for inline field errors
         * (error state signalled only by the red bar behind the input).
         * The `.top_error` variant (unlayered, at bottom of this file)
         * overrides to `color: #fff` so the validation-summary banner
         * shows white text on red. Do NOT "fix" the matching colors.
         */
        span.error,
        small.error {
            display: block;
            padding: 0.375rem 0 0.5625rem;
            margin-top: -1px;
            margin-bottom: 1rem;
            font-size: 0.75rem;
            font-weight: bold;
            font-style: normal;
            background: #dd3e3e;
            color: #dd3e3e;
        }

        .error input,
        .error textarea,
        .error select {
            margin-bottom: 0;
        }

        .error label,
        .error label.error {
            color: #dd3e3e;
        }

        /* Form input reset (from app.css 1142+) */
        input {
            border-radius: 0 !important;
        }

        input[type="submit"],
        input[type="button"] {
            border-radius: 4px !important;
        }

        input[type="checkbox"] + label,
        input[type="radio"] + label {
            display: inline-block;
            margin-left: 0.3rem;
            margin-right: 0.5rem;
            margin-bottom: 0;
            vertical-align: baseline;
        }

        input[type="file"] {
            width: 100%;
        }

        /* form > fieldset > ol defaults (from app.css 1052+) */
        form fieldset ol {
            list-style: none outside none;
        }

        /*
         * Global Foundation overrides (c4k.css 8789-8823).
         * These sit at the END of the legacy Foundation bundle and tweak
         * Foundation element defaults to match the C4K app look. Placed
         * in @layer base (not unlayered) so that:
         *   - Within the base layer, specificity resolves naturally
         *     (e.g. `span.error, small.error { color: #dd3e3e }` at 0,1,1
         *     still beats `small { color: #fff }` at 0,0,1 for <small class="error">).
         *   - Tailwind v4 utility classes still win when applied.
         */
        input {
            font-weight: 200;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            text-transform: uppercase;
            text-rendering: optimizeLegibility;
        }

        h2 {
            margin-bottom: 30px;
        }

        h3 {
            line-height: 32px;
        }

        /* `small` — forces Nunito 0.75rem white with `font !important` so
           small text has the right family/size. `small.error` (declared
           earlier in this same layer with higher specificity) overrides
           the color to #dd3e3e; `small.error.top_error` (unlayered) takes
           the color back to white. */
        small,
        .small-text {
            color: #fff;
            font-size: 12px;
            font:
                normal 0.75rem "Nunito",
                sans-serif !important;
            line-height: 1rem;
            margin: 0.625rem 0 0;
            padding: 0;
        }

        .small-caps {
            color: #fff;
            font-size: 12px;
            font:
                normal 0.75rem "Nunito",
                sans-serif !important;
            line-height: 1rem;
            margin: 0.625rem 0 0;
            padding: 0;
            text-transform: uppercase;
        }
    }
}

/* ============================================================
   COMPONENTS LAYER — grid, block-grid, utilities, page-specific
   Tailwind utilities in `@layer utilities` win on conflict.
   ============================================================ */
@layer components {
    @scope (.legacy-content) {
        /* ----------------------------------------
           Foundation grid — .row (from c4k.css 121, with override at 8784). */
        .row {
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            margin-top: 0;
            margin-bottom: 0;
            max-width: 62.5rem;
        }

        /*
         * .row override (c4k.css 8784). The app widens .row from 1000px to
         * 1396px and uses !important on max-width to beat any responsive
         * narrowing. Declared AFTER the base rule so later-declared wins.
         */
        .row {
            max-width: 1396px !important;
            width: 1396px;
        }

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

        .row:after {
            clear: both;
        }

        .row.collapse > .column,
        .row.collapse > .columns {
            padding-left: 0;
            padding-right: 0;
            float: left;
        }

        .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;
        }

        /* Foundation small grid — always applies */
        @media only screen {
            .column,
            .columns {
                position: relative;
                padding-left: 0.9375rem;
                padding-right: 0.9375rem;
                float: left;
            }

            .column.small-centered,
            .columns.small-centered {
                margin-left: auto;
                margin-right: auto;
                float: none;
            }

            .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;
            }
        }

        /* Foundation medium grid — min-width 990 */
        @media only screen and (min-width: 990px) {
            .column.medium-centered,
            .columns.medium-centered {
                margin-left: auto;
                margin-right: auto;
                float: none;
            }

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

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

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

        /* Foundation large grid — min-width 1396 */
        @media only screen and (min-width: 1396px) {
            .column.large-centered,
            .columns.large-centered {
                margin-left: auto;
                margin-right: auto;
                float: none;
            }

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

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

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

        /* ----------------------------------------
           Foundation block-grid (from c4k.css 1176+) */
        [class*="block-grid-"] {
            display: block;
            padding: 0;
            margin: 0 -0.625rem;
        }

        [class*="block-grid-"]:before,
        [class*="block-grid-"]:after {
            content: " ";
            display: table;
        }

        [class*="block-grid-"]:after {
            clear: both;
        }

        [class*="block-grid-"] > li {
            display: block;
            height: auto;
            float: left;
            padding: 0 0.625rem 1.25rem;
        }

        @media only screen {
            .small-block-grid-1 > li {
                width: 100%;
                list-style: none;
            }
            .small-block-grid-1 > li:nth-of-type(n) {
                clear: none;
            }
            .small-block-grid-1 > li:nth-of-type(1n + 1) {
                clear: both;
            }

            .small-block-grid-2 > li {
                width: 50%;
                list-style: none;
            }
            .small-block-grid-2 > li:nth-of-type(n) {
                clear: none;
            }
            .small-block-grid-2 > li:nth-of-type(2n + 1) {
                clear: both;
            }

            .small-block-grid-3 > li {
                width: 33.33333%;
                list-style: none;
            }
            .small-block-grid-3 > li:nth-of-type(n) {
                clear: none;
            }
            .small-block-grid-3 > li:nth-of-type(3n + 1) {
                clear: both;
            }
        }

        @media only screen and (min-width: 990px) {
            .medium-block-grid-1 > li {
                width: 100%;
                list-style: none;
            }
            .medium-block-grid-1 > li:nth-of-type(n) {
                clear: none;
            }
            .medium-block-grid-1 > li:nth-of-type(1n + 1) {
                clear: both;
            }

            .medium-block-grid-2 > li {
                width: 50%;
                list-style: none;
            }
            .medium-block-grid-2 > li:nth-of-type(n) {
                clear: none;
            }
            .medium-block-grid-2 > li:nth-of-type(2n + 1) {
                clear: both;
            }
        }

        @media only screen and (min-width: 1396px) {
            .large-block-grid-1 > li {
                width: 100%;
                list-style: none;
            }
            .large-block-grid-1 > li:nth-of-type(n) {
                clear: none;
            }
            .large-block-grid-1 > li:nth-of-type(1n + 1) {
                clear: both;
            }

            .large-block-grid-2 > li {
                width: 50%;
                list-style: none;
            }
            .large-block-grid-2 > li:nth-of-type(n) {
                clear: none;
            }
            .large-block-grid-2 > li:nth-of-type(2n + 1) {
                clear: both;
            }
        }

        /* ----------------------------------------
           Foundation text-align utilities (c4k.css 5062+) */
        .text-left {
            text-align: left !important;
        }
        .text-right {
            text-align: right !important;
        }
        .text-center {
            text-align: center !important;
        }
        .text-justify {
            text-align: justify !important;
        }

        /* Foundation float helpers (c4k.css 82+) — used by
           <div class="... form left text-center"> in ContactUs. Without
           this the form column doesn't float and layout collapses. */
        .left {
            float: left !important;
        }
        .right {
            float: right !important;
        }

        /* ----------------------------------------
           ContactUs form container (page-sign_up.css 928).
           The form sits inside a translucent white box; `.contactUs_top`
           overrides the background (see block further down). */
        .form {
            background: rgba(255, 255, 255, 0.7);
            padding: 40px;
            margin: 0 auto 60px auto;
        }

        /* ----------------------------------------
           Helper utilities (from app.css) */
        .inline-block {
            display: inline-block !important;
        }
        .margin0 {
            margin: 0 !important;
        }
        .block {
            display: block;
        }
        .bold {
            font-weight: bold !important;
        }
        .paddingbottom100 {
            padding-bottom: 50px !important;
        }
        .hide {
            display: none;
        }

        /* Responsive visibility (app.css + mobile media queries) */
        .show-only-mobile {
            display: none;
        }

        @media only screen and (max-width: 989px) {
            .hide-only-tab {
                display: none !important;
            }
        }

        @media only screen and (max-width: 767px) {
            .hide-only-mobile {
                display: none !important;
                visibility: hidden;
            }
            .show-only-mobile {
                display: block;
            }
        }

        /* ----------------------------------------
           Social list (from app.css 1055+) */
        ul.social li {
            list-style: none;
        }

        ul.social li a {
            color: white;
            display: block;
            font-family: "Nunito", sans-serif;
        }

        ul.social li a i {
            font-size: 1.875rem;
            vertical-align: middle;
            line-height: 1.6;
        }

        ul.social li.facebook {
            background: #3b5998;
        }
        ul.social li.twitter {
            background: #4099ff;
        }
        ul.social li.instagram {
            background: #d1006a;
        }

        /* ----------------------------------------
           ContactUs form (from page-sign_up.css 1515+) */
        #form.contactUs_top {
            background: url("/content/assets/img/bg_contact.jpg") no-repeat center center;
            background-size: cover;
        }

        #form.contactUs_top .form {
            background: transparent;
        }

        #form.contactUs_top .form input:not([type="submit"]),
        #form.contactUs_top .form textarea,
        #form.contactUs_top .form select {
            border-radius: 2px !important;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
            border: none;
            color: #0f0f0f;
        }

        #form.contactUs_top .form input[type="radio"] {
            vertical-align: middle;
            box-shadow: none;
        }

        .contact_action {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .contact_action .ratingCaptha {
            padding: 0;
        }

        @media only screen and (max-width: 990px) {
            #form.contactUs_top {
                background-image: none;
                background-color: #f3f3f3;
            }
        }

        @media only screen and (max-width: 676px) {
            .contact_action {
                flex-direction: column;
            }
            .contact_action .ratingCaptha {
                padding: 10px 0 15px 0;
                align-self: baseline;
            }
            #form.contactUs_top .form {
                padding: 20px;
            }
            #form.contactUs_top h2 {
                margin-bottom: 15px;
            }
        }

        /* ----------------------------------------
           #news section (from page-home.css 389+) */
        #news {
            padding: 50px 0 200px;
            text-align: center;
            background: #ffffff;
        }

        #news h4 {
            margin: 10px 0 50px;
        }

        /* Responsive #news — from page-home.css 1898+ (max-width 989)
           and 2044+ (max-width 767). */
        @media only screen and (max-width: 989px) {
            #news {
                padding: 20px;
            }
            #news h4 {
                font-size: 1.5rem;
            }
            #news .row {
                margin: auto;
            }
            #news .posts {
                margin-bottom: 40px;
            }
        }

        @media only screen and (max-width: 767px) {
            #news {
                padding: 60px 10px;
            }
            #news h4 {
                font-size: 1.5rem;
            }
            #news .row {
                margin: auto;
            }
            #news .posts {
                margin-bottom: 40px;
            }
        }

        /* ----------------------------------------
           .icon sprite (from c4k.css 7278).
           Powers <i class="icon news"> above the ADDRESS heading on
           ContactUs. Sprite url() was rewritten to absolute /content/... */
        .icon {
            background-color: rgba(255, 255, 255, 0.6);
            background-image: url("/content/assets/img/sprite.png");
            background-repeat: no-repeat;
            border-radius: 35px;
            display: inline-block;
            height: 70px;
            width: 70px;
        }

        .icon.news {
            background-position: 11px -248px;
        }

        @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {
            .icon {
                background-image: url("/content/assets/img/sprite@2x.png");
            }
        }

        /* Second retina block — c4k.css 7322. The @2x sprite (108x748) is
           larger than the 1x sprite (54x414), but the rendered box stays
           70x70, so `background-size: 89%` shrinks the @2x sprite to match
           the 1x layout. `.icon.news` has its own size/position override. */
        @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {
            .icon {
                background-size: 89%;
            }

            .icon.news {
                background-size: 80%;
                background-position: 11px -215px;
            }
        }

        /* ----------------------------------------
           News address-list cards (from page-home.css 1267+).
           Each <li> inside `<ul class="... news">` is a 174px-tall gray
           card with a 1px light border; hover darkens slightly. */
        .news li {
            background: #d0d6d5;
            border: 1px solid #ebeee8;
            line-height: 0.625rem;
            height: 174px;
            padding: 0;
            text-align: left;
        }

        .news li a {
            display: block;
            height: 100%;
            padding: 20px;
        }

        .news li:hover {
            background: #c2cac9;
        }

        /* News list typography */
        .news li .news-title {
            font-size: 1.375rem;
            font-weight: 300;
            line-height: 1.5625rem;
        }

        .news li .news-source {
            color: #788b94;
            display: block;
            font-family: "Nunito", sans-serif;
            font-size: 0.75rem;
            font-weight: 500;
            line-height: 0.875rem;
            margin-top: 10px;
            text-transform: uppercase;
        }

        .news li.more {
            background: #c6cccd;
            font-family: "Nunito", sans-serif;
            text-align: center;
            text-transform: uppercase;
        }

        .news li.more a {
            color: #7c43c0;
            font-size: 1.5rem;
            font-weight: 800;
            line-height: 184px;
            padding: 0 45px;
        }

        .news li.more a span {
            display: inline-block;
            line-height: 25px;
        }

        .news li.more:hover {
            background: #b8c0c1;
        }

        @media only screen and (min-width: 990px) and (max-width: 1395px) {
            .news li {
                height: auto !important;
            }
            .news li .news-title {
                font-size: 1.25rem;
                line-height: 1.4375rem;
            }
            .news li.more a {
                font-size: 1.25rem;
                line-height: normal;
                padding: 20px;
            }
        }

        @media only screen and (max-width: 989px) {
            .news li {
                height: auto !important;
                width: 100%;
            }
            .news li .news-title {
                font-size: 1.25rem;
                line-height: 1.4375rem;
            }
            .news li.more {
                padding: 20px;
            }
            .news li.more a {
                font-size: 1.25rem;
                line-height: normal;
            }
        }

        @media only screen and (max-width: 767px) {
            .news li {
                height: auto !important;
                width: 100%;
            }
            .news li .news-title {
                font-size: 1.25rem;
                line-height: 1.4375rem;
            }
            .news li.more {
                padding: 20px;
            }
            .news li.more a {
                font-size: 1.1875rem;
                line-height: normal;
                padding: 0;
            }
        }

        /* ----------------------------------------
           Newsletter partial (from home-stye1.css 730+) */
        .c4k--NewsletterArea {
            padding: 0 0 40px 0;
        }

        @media (max-width: 767px) {
            .c4k--NewsletterArea {
                background: #ffffff;
            }
        }

        .c4k--NewsletterArea.white {
            background: #ffffff;
        }

        .c4k--Newsletter {
            display: flex;
            flex-direction: row;
            background: #7c43c0;
            border-radius: 4px;
            margin: 40px 0;
        }

        @media (max-width: 990px) {
            .c4k--Newsletter {
                flex-direction: column;
            }
        }

        .c4k--Newsletter--img {
            flex: 1;
            width: 50%;
        }

        @media (max-width: 990px) {
            .c4k--Newsletter--img {
                width: 100%;
            }
        }

        .c4k--Newsletter--img img {
            width: 100%;
            border-radius: 4px 0 0 4px;
        }

        @media (max-width: 767px) {
            .c4k--Newsletter--img img {
                border-radius: 4px 4px 0 0;
            }
        }

        .c4k--Newsletter--cont {
            flex: 1;
            width: 50%;
            padding: 10px 40px;
            display: flex;
            justify-content: center;
            flex-direction: column;
        }

        @media (max-width: 1367px) {
            .c4k--Newsletter--cont {
                padding: 15px 20px;
            }
        }

        @media (max-width: 990px) {
            .c4k--Newsletter--cont {
                width: 100%;
                padding: 15px 30px;
            }
        }

        .c4k--Newsletter--title {
            color: #ffffff;
            font-weight: 700;
            font-size: 1.375rem;
            position: relative;
            max-width: 370px;
            line-height: 1.2;
            margin: 0 0 20px 0;
        }

        @media (max-width: 990px) {
            .c4k--Newsletter--title {
                max-width: 100%;
            }
        }

        @media (max-width: 767px) {
            .c4k--Newsletter--title {
                font-size: 1.0625rem;
                margin: 0 0 10px 0;
            }
        }

        .c4k--Newsletter--title span {
            display: block;
            font-size: 1.125rem;
            font-weight: 600;
            padding: 10px 0 25px 0;
        }

        @media (max-width: 767px) {
            .c4k--Newsletter--title span {
                font-size: 0.875rem;
                padding: 10px 0 15px 0;
            }
        }

        .c4k--Newsletter--title:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100px;
            height: 7px;
            background: #168ccc;
        }

        .c4k--Newsletter--form {
            padding: 10px 0 0 0;
        }

        .c4k--Newsletter--form__fields {
            display: flex;
            flex-direction: row;
            margin-bottom: 0;
        }

        @media (max-width: 767px) {
            .c4k--Newsletter--form__fields {
                flex-direction: column;
            }
        }

        .c4k--Newsletter--form__fields input {
            height: 45px;
            font-weight: 600;
            font-size: 0.925rem;
            color: #666666;
            outline: none;
            border: none;
            border-radius: 4px !important;
            padding: 5px 15px;
        }

        .c4k--Newsletter--form__fields input::placeholder {
            color: #666666;
        }

        @media (max-width: 767px) {
            .c4k--Newsletter--form__fields input {
                height: 40px;
                font-size: 0.75rem;
                font-weight: 500;
            }
        }

        /* `.c4k--Newsletter--form__fields .submit` is declared UNLAYERED at
           the bottom of this file (below the `.button` unlayered block) so
           it can beat `.button`'s margin/padding via specificity. Putting it
           in @layer components would lose to unlayered `.button`. */

        /* ----------------------------------------
           Global responsive overrides for .row — c4k.css 9096 (990-1395),
           9107 (max 989), 9193 (max 767). Without these, the hard-coded
           `.row { width: 1396px }` above causes horizontal overflow on
           anything narrower than desktop XL. Declared LAST in @layer
           components so later-declared wins within the same layer. */
        @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%;
            }
            h2 {
                font-size: 1.75rem;
                line-height: 26px;
            }
            h3 {
                font-size: 1.5rem;
            }
        }

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

        /* Mobile social/form tweaks — app.css 6028+ (max-width 767).
           Legacy rule was `ul.social li a span { display: none }`, meant to
           hide the text label (" Facebook" etc). Narrowed to `> span:last-child`
           because the Instagram link wraps its icon in a <span> for sizing —
           hiding all spans would hide the icon and collapse the <li> to 0. */
        @media only screen and (max-width: 767px) {
            ul.social li a > span:last-child {
                display: none;
            }
            ul.social li a > span {
                margin: auto;
            }
            #form h4 {
                font-size: 1rem;
            }
        }
    }
}

/* ============================================================
   UNLAYERED (highest priority — beats Tailwind utilities)
   Mirrors how these rules sat in the legacy bundle, after all
   Tailwind utilities in source order.
   ============================================================ */
@scope (.legacy-content) {
    /*
     * Foundation .button (from c4k.css 1744).
     * Unlayered so it beats Tailwind v4's base layer which would otherwise
     * reset <button> padding/background to nothing, and beats any
     * `bg-*`/`text-*` utility a developer might accidentally add to a
     * submit button inside legacy content.
     */
    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;
        transition: background-color 300ms ease-out;
        -webkit-appearance: none;
        border: none;
    }

    /*
     * Newsletter submit button (home-stye1.css 909). Declared AFTER `.button`
     * so specificity (0,2,0 vs 0,1,0) lets its margin/padding win without
     * !important — mirroring legacy where c4k.css is loaded before
     * home-stye1.css. The <button class="button submit"> inside the newsletter
     * form needs its own compact size (180x45, 0 10px padding).
     */
    .c4k--Newsletter--form__fields .submit {
        width: 180px;
        margin: 0 0 0 20px;
        max-height: 45px;
        line-height: 45px;
        padding: 0 10px;
    }

    @media (max-width: 767px) {
        .c4k--Newsletter--form__fields .submit {
            margin: 10px auto 0 auto;
            max-height: 35px;
            line-height: 35px;
        }
    }

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

    /*
     * small.error.top_error — unlayered to beat v4 preflight which
     * normalizes <small> font-size/color.
     */
    small.error.top_error {
        color: #fff;
        text-transform: uppercase;
        padding: 8px 10px;
    }

    /*
     * Radio + checkbox — restore browser-native rendering.
     *
     * Tailwind v4 ships `@tailwindcss/forms` in its `base` layer which
     * heavily restyles [type="radio"] / [type="checkbox"]:
     *   appearance: none; width: 1rem; height: 1rem; background-color: #fff;
     *   background-image: <svg>; border: 1px solid #6b7280; border-radius;
     *   padding: 0; color: #2563eb; ...
     *
     * Foundation (and the rest of the legacy app) expects native OS radios.
     * The inline <style> block in ContactUs.cshtml only overrides
     * appearance/width/height — background-image, border, padding remain
     * from v4, so the control still looks like a gray square with an SVG
     * dot on check. Reverting all the affected properties here (unlayered
     * so we beat v4's base layer) restores the browser default look.
     */
    input[type="radio"],
    input[type="checkbox"] {
        -webkit-appearance: auto;
        appearance: auto;
        width: auto;
        height: auto;
        background-color: revert;
        background-image: revert;
        background-size: revert;
        background-position: revert;
        background-repeat: revert;
        background-origin: revert;
        border: revert;
        border-radius: revert;
        padding: revert;
        color: revert;
        box-shadow: none;
        flex-shrink: revert;
        display: revert;
    }

    input[type="radio"]:checked,
    input[type="checkbox"]:checked {
        background-color: revert;
        background-image: revert;
        border-color: revert;
    }
}