/*
 * CP-WC8R1 — Industrio Brand Color Hardening
 *
 * This file is loaded only when a customer custom palette is active.
 * Keep css/industrio.css and vendor/bootstrap/bootstrap.min.css untouched.
 *
 * Semantic mapping:
 *   customer Primary   -> Industrio orange identity role
 *   customer Secondary -> Industrio navy/dark identity role
 *
 * Neutral grays, white/light surfaces and Bootstrap status colors remain native.
 */

:root {
    --primary: var(--brand-primary);
    --dark: var(--brand-secondary);
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: var(--brand-primary-rgb);
    --bs-dark: var(--brand-secondary);
    --bs-dark-rgb: var(--brand-secondary-rgb);
}

/* --------------------------------------------------------------------------
 * Compiled Bootstrap typography + generic links
 * Bootstrap's generated CSS contains literal source-theme colors, so merely
 * changing --bs-primary/--bs-dark is not sufficient.
 * -------------------------------------------------------------------------- */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    color: var(--brand-secondary);
}

a {
    color: var(--brand-primary);
}

a:hover {
    color: var(--brand-primary);
    color: color-mix(in srgb, var(--brand-primary) 80%, #000000);
}

/* --------------------------------------------------------------------------
 * Primary CTA/button family
 * Use the customer contrast token instead of Industrio's hard-coded white.
 * Derived hover/active shades keep the native interaction rhythm while still
 * originating from the customer's single Primary color.
 * -------------------------------------------------------------------------- */
.btn-primary {
    color: var(--brand-primary-contrast);
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-primary:hover,
.btn-check:focus + .btn-primary,
.btn-primary:focus {
    color: var(--brand-primary-contrast);
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    background-color: color-mix(in srgb, var(--brand-primary) 86%, #FFFFFF);
    border-color: color-mix(in srgb, var(--brand-primary) 92%, #FFFFFF);
}

.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-check:checked + .btn-primary:focus,
.btn-check:active + .btn-primary:focus,
.btn-primary:active:focus,
.btn-primary.active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--brand-primary-rgb), .35);
}

.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    color: var(--brand-primary-contrast);
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    background-color: color-mix(in srgb, var(--brand-primary) 78%, #FFFFFF);
    border-color: color-mix(in srgb, var(--brand-primary) 88%, #FFFFFF);
}

.btn-primary:disabled,
.btn-primary.disabled {
    color: var(--brand-primary-contrast);
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-outline-primary {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-outline-primary:hover,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show {
    color: var(--brand-primary-contrast);
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-check:focus + .btn-outline-primary,
.btn-outline-primary:focus,
.btn-check:checked + .btn-outline-primary:focus,
.btn-check:active + .btn-outline-primary:focus,
.btn-outline-primary:active:focus,
.btn-outline-primary.active:focus,
.btn-outline-primary.dropdown-toggle.show:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--brand-primary-rgb), .35);
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
    color: var(--brand-primary);
    background-color: transparent;
}

.btn-link {
    color: var(--brand-primary);
}

.btn-link:hover {
    color: var(--brand-primary);
    color: color-mix(in srgb, var(--brand-primary) 80%, #000000);
}

/* --------------------------------------------------------------------------
 * Secondary/dark button + utility family
 * -------------------------------------------------------------------------- */
.btn-dark {
    color: var(--brand-secondary-contrast);
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
}

.btn-dark:hover,
.btn-check:focus + .btn-dark,
.btn-dark:focus {
    color: var(--brand-secondary-contrast);
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
    background-color: color-mix(in srgb, var(--brand-secondary) 88%, #000000);
    border-color: color-mix(in srgb, var(--brand-secondary) 92%, #000000);
}

.btn-check:focus + .btn-dark,
.btn-dark:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--brand-secondary-rgb), .35);
}

.btn-check:checked + .btn-dark,
.btn-check:active + .btn-dark,
.btn-dark:active,
.btn-dark.active,
.show > .btn-dark.dropdown-toggle {
    color: var(--brand-secondary-contrast);
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
    background-color: color-mix(in srgb, var(--brand-secondary) 78%, #000000);
    border-color: color-mix(in srgb, var(--brand-secondary) 84%, #000000);
}

.btn-dark:disabled,
.btn-dark.disabled {
    color: var(--brand-secondary-contrast);
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
}

.btn-outline-dark {
    color: var(--brand-secondary);
    border-color: var(--brand-secondary);
}

.btn-outline-dark:hover,
.btn-check:checked + .btn-outline-dark,
.btn-check:active + .btn-outline-dark,
.btn-outline-dark:active,
.btn-outline-dark.active,
.btn-outline-dark.dropdown-toggle.show {
    color: var(--brand-secondary-contrast);
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
}

.btn-check:focus + .btn-outline-dark,
.btn-outline-dark:focus,
.btn-check:checked + .btn-outline-dark:focus,
.btn-check:active + .btn-outline-dark:focus,
.btn-outline-dark:active:focus,
.btn-outline-dark.active:focus,
.btn-outline-dark.dropdown-toggle.show:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--brand-secondary-rgb), .35);
}

/* --------------------------------------------------------------------------
 * Bootstrap utilities/components actually used by the public theme contract
 * -------------------------------------------------------------------------- */
.text-primary { color: var(--brand-primary) !important; }
.bg-primary { background-color: var(--brand-primary) !important; }
.border-primary { border-color: var(--brand-primary) !important; }
.link-primary { color: var(--brand-primary); }

.text-dark { color: var(--brand-secondary) !important; }
.bg-dark { background-color: var(--brand-secondary) !important; }
.border-dark { border-color: var(--brand-secondary) !important; }
.link-dark { color: var(--brand-secondary); }
.link-dark:hover,
.link-dark:focus {
    color: var(--brand-secondary);
    color: color-mix(in srgb, var(--brand-secondary) 80%, #000000);
}

.dropdown-item.active,
.dropdown-item:active,
.dropdown-menu-dark .dropdown-item.active,
.dropdown-menu-dark .dropdown-item:active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.list-group-item.active,
.progress-bar {
    color: var(--brand-primary-contrast);
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* Pagination is generated by Laravel's Bootstrap 5 paginator. */
.page-link {
    color: var(--brand-primary);
}

.page-link:hover,
.page-link:focus {
    color: var(--brand-primary);
    color: color-mix(in srgb, var(--brand-primary) 80%, #000000);
}

.page-link:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--brand-primary-rgb), .25);
}

.page-item.active .page-link {
    color: var(--brand-primary-contrast);
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* Contact form + accordion focus affordances use Primary without recoloring
 * validation success/error semantic states. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.accordion-button:focus {
    border-color: var(--brand-primary);
    border-color: color-mix(in srgb, var(--brand-primary) 55%, #FFFFFF);
    box-shadow: 0 0 0 .25rem rgba(var(--brand-primary-rgb), .25);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate,
.form-range::-webkit-slider-thumb,
.form-range::-moz-range-thumb {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn:focus,
.btn-check:focus + .btn,
.btn-close:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--brand-primary-rgb), .25);
}

/* --------------------------------------------------------------------------
 * Industrio-native dark overlays that are literal rgba() in the upstream CSS.
 * These are identity roles, not neutral/status colors, so they follow customer
 * Secondary while retaining the source opacity/composition.
 * -------------------------------------------------------------------------- */
.carousel-caption {
    background: linear-gradient(
        to right,
        rgba(var(--brand-secondary-rgb), 1) 0%,
        rgba(var(--brand-secondary-rgb), 0) 100%
    );
}

.page-header {
    background:
        linear-gradient(
            to right,
            rgba(var(--brand-secondary-rgb), 1) 0%,
            rgba(var(--brand-secondary-rgb), 0) 100%
        ),
        url(../img/carousel-2.jpg) center center no-repeat;
    background-size: cover;
}

.service-item .service-text {
    background: rgba(var(--brand-secondary-rgb), .7);
}

/* --------------------------------------------------------------------------
 * CMS-only Industrio adaptation colors that were previously literal navy.
 * -------------------------------------------------------------------------- */
.industrio-hero-fallback {
    background: linear-gradient(
        120deg,
        var(--brand-secondary),
        rgba(var(--brand-secondary-rgb), .72)
    );
}

.industrio-gallery-overlay {
    background: rgba(var(--brand-secondary-rgb), .35);
}

.industrio-gallery-title {
    background: linear-gradient(
        transparent,
        rgba(var(--brand-secondary-rgb), .95)
    );
}

/* --------------------------------------------------------------------------
 * Contrast guards for customer palettes that are much lighter/darker than the
 * original orange/navy pair. These do not create new brand colors; they use the
 * contrast tokens already derived by the engine.
 * -------------------------------------------------------------------------- */
.bg-primary .text-white,
.bg-primary.text-white,
.navbar .navbar-brand .text-white,
.topbar-right.text-white,
.topbar-right .text-white {
    color: var(--brand-primary-contrast) !important;
}

.bg-dark .text-white,
.bg-dark.text-white,
.bg-dark .text-light {
    color: var(--brand-secondary-contrast) !important;
}

.carousel-caption .text-white,
.page-header .text-white,
.page-header .breadcrumb-item,
.page-header .breadcrumb-item a {
    color: var(--brand-secondary-contrast) !important;
}

.service-item .btn:hover,
.project-carousel .owl-nav .owl-prev,
.project-carousel .owl-nav .owl-next {
    color: var(--brand-primary-contrast);
}

.footer,
.copyright {
    color: var(--brand-secondary-contrast);
    color: color-mix(in srgb, var(--brand-secondary-contrast) 72%, var(--brand-secondary));
}

.footer .btn.btn-link {
    color: var(--brand-secondary-contrast);
    color: color-mix(in srgb, var(--brand-secondary-contrast) 72%, var(--brand-secondary));
}

.footer .btn.btn-link:hover {
    color: var(--brand-secondary-contrast);
}