/* Carfix industrial visual layer; Tailwind remains the primary layout system. */
:root {
    --carfix-navy: #173a63;
    --carfix-blue: #173a63;
    --carfix-orange: #c04f00;
    --carfix-orange-dark: #8f3b00;
    --carfix-surface: #f8fafc;
    --carfix-line: #e2e8f0;
}

body {
    background: var(--carfix-surface);
    color: #111827;
}

/* Normalize legacy component colors that are not generated by Tailwind. */
:root {
    --primary-color: var(--carfix-navy);
    --secondary-color: var(--carfix-orange);
    --accent-color: var(--carfix-blue);
}

body.home main>section::after,
body.front-page main>section::after {
    background-image: url("../img/carfix-technical-grid.svg") !important;
    background-position: left -60px top -70px !important;
    background-repeat: no-repeat !important;
    background-size: 280px 280px !important;
    opacity: .12 !important;
}

/* Give the public sections a restrained navy-to-orange atmosphere without reducing text contrast. */
body.home main>section:not(#home-hero),
body.front-page main>section:not(#home-hero) {
    background-image: radial-gradient(circle at 7% 8%, rgba(23, 58, 99, .045), transparent 25%), radial-gradient(circle at 93% 92%, rgba(192, 79, 0, .08), transparent 28%);
}

/* Keep cards, inputs, notices, and interactive controls inside one visual system. */
main :is(article, .card, [class*="rounded-"]):not([class*="bg-slate-9"]):not([class*="bg-primary"]):not([class*="bg-warm"]) {
    border-color: var(--carfix-line);
}

main :is(button, a)[class*="bg-teal"],
main :is(button, a)[class*="bg-emerald"],
main :is(button, a)[class*="bg-green"] {
    background-color: var(--carfix-navy) !important;
}

main [class*="text-teal"],
main [class*="text-emerald"],
main [class*="text-green"] {
    color: var(--carfix-blue) !important;
}

main [class*="border-teal"],
main [class*="border-emerald"],
main [class*="border-green"] {
    border-color: var(--carfix-line) !important;
}

#home-hero {
    background: #ffffff !important;
}

.hero-shell {
    background: radial-gradient(circle at 87% 18%, rgba(6, 43, 131, .08), transparent 26%), radial-gradient(circle at 15% 85%, rgba(192, 79, 0, .10), transparent 28%), linear-gradient(135deg, #ffffff 0%, #f8fafc 58%, #eef3fb 100%);
}

.hero-shell>* {
    position: relative;
    z-index: 1;
}

.hero-shell::before {
    position: absolute;
    top: 15%;
    bottom: 20%;
    left: 7%;
    width: 19%;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(192, 79, 0, .95), rgba(192, 79, 0, .32));
    content: "";
    pointer-events: none;
    z-index: 0;
    transform: skewX(-42deg);
}

.hero-shell::after {
    position: absolute;
    top: 3rem;
    left: 3rem;
    width: 5rem;
    height: 5rem;
    background-image: radial-gradient(rgba(6, 43, 131, .24) 1.2px, transparent 1.2px);
    background-size: 10px 10px;
    content: "";
    opacity: .62;
    pointer-events: none;
}

#home-hero img {
    filter: drop-shadow(0 20px 24px rgba(6, 43, 131, .18));
}

/* Use orange as the visible Carfix accent while navy remains the primary action color. */
/* body.home main > section:not(#home-hero) .text-primary,
body.front-page main > section:not(#home-hero) .text-primary {
    color: var(--carfix-orange) !important;
} */

/* body.home main>section:not(#home-hero) a.border-primary,
body.front-page main>section:not(#home-hero) a.border-primary {
    border-color: rgba(192, 79, 0, .62) !important;
}

body.home main>section:not(#home-hero) a.border-primary:hover,
body.front-page main>section:not(#home-hero) a.border-primary:hover {
    background-color: var(--carfix-orange) !important;
    border-color: var(--carfix-orange) !important;
    color: #ffffff !important;
}

body.home main>section:not(#home-hero) .group:hover,
body.front-page main>section:not(#home-hero) .group:hover {
    border-color: rgba(192, 79, 0, .48) !important;
} */

.swiper-pagination-bullet-active {
    background: var(--carfix-orange) !important;
}

/* Cover legacy green utility output and hard-coded components with the Carfix palette. */
:is(.bg-teal-50, .bg-emerald-50, .bg-green-50) {
    background-color: #f8fafc !important;
}

:is(.text-teal-600, .text-emerald-600, .text-green-600) {
    color: #173a63 !important;
}

:is(.text-teal-300, .text-emerald-300, .text-green-300) {
    color: #cbd5e1 !important;
}

:is(.border-teal-200, .border-emerald-200, .border-green-200) {
    border-color: #cbd5e1 !important;
}

main a:focus-visible,
main button:focus-visible {
    outline: 3px solid rgba(192, 79, 0, .45);
    outline-offset: 3px;
}

/* Keep actions clearly interactive across every public template. */
main :is(a, button, input[type="submit"], input[type="button"]):not([disabled]) {
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

main :is(a, button, input[type="submit"], input[type="button"]):not([disabled]):active {
    transform: translateY(1px);
}

/* main :is(a, button)[class*="bg-primary"]:not([disabled]):hover {
    background-color: #102b4a !important;
    box-shadow: 0 10px 22px rgba(23, 58, 99, .2);
} */

main :is(a, button)[class*="bg-warm"]:not([disabled]):hover {
    background-color: var(--carfix-orange-dark) !important;
    box-shadow: 0 10px 22px rgba(192, 79, 0, .2);
}

main :is(a, button)[class*="border-primary"]:not([disabled]):hover {
    border-color: var(--carfix-blue) !important;
    background-color: rgba(23, 58, 99, .06);
}

/* Prevent long Persian labels, media, and Swiper slides from creating mobile horizontal scroll. */
html,
body {
    max-width: 100%;
    overflow-x: clip;
}

main img,
main video,
main iframe,
main svg {
    max-width: 100%;
}

@media (max-width: 1023px) {
    main :is(input, select, textarea, button) {
        max-width: 100%;
    }

    .swiper {
        overflow: visible;
    }
}