/* ==========================================================
   Kata – Royal Blue & Silver colour system
   This file intentionally loads after the original demo theme.
========================================================== */

:root {
    /* Core palette */
    --royal-blue: #0f52ba;
    --true-blue: #1e5ed8;
    --brilliant-blue: #3b82f6;
    --sky-blue: #6ea8fe;
    --silver: #c0c0c0;
    --steel-gray: #b8c2cc;
    --light-silver: #d9dee3;
    --pearl-silver: #eef2f5;

    /* Crafto theme tokens */
    --base-color: var(--royal-blue);
    --dark-gray: #0b1b44;
    --medium-gray: #69758a;
    --very-light-gray: var(--pearl-silver);
    --extra-medium-gray: var(--steel-gray);
    --soft-red: #e8eef8;
    --prime-violet: var(--light-silver);
    --forest-green: var(--true-blue);
    --golden-yellow: var(--brilliant-blue);
}

::selection {
    color: #fff;
    background: var(--royal-blue);
}

/* Backgrounds and decorative gradients */
.bg-base-color,
.btn.btn-base-color {
    background-color: var(--royal-blue);
}

.bg-very-light-gray {
    background-color: var(--pearl-silver);
}

.bg-dark-gray {
    background-color: var(--dark-gray);
}

.bg-gradient-fast-pink-light-yellow,
.btn-gradient-base-color {
    background-image: linear-gradient(to right, var(--royal-blue), var(--brilliant-blue), var(--royal-blue));
    background-size: 200% auto;
    color: #fff;
}

.btn-gradient-dark-gray {
    background-image: linear-gradient(to right, var(--dark-gray), var(--medium-gray), var(--dark-gray));
    background-size: 200% auto;
    color: #fff;
}

.bg-base-color-transparent {
    background-color: rgb(15 82 186 / 10%);
}

.border-color-prime-violet {
    border-color: var(--light-silver) !important;
}

.shape-image-animation path:first-of-type {
    fill: var(--light-silver);
}

.shape-image-animation path:nth-of-type(2) {
    fill: var(--pearl-silver);
}

/* Typography and links */
.text-base-color,
a.text-base-color,
.hover-detail-inner span:first-child {
    color: var(--royal-blue) !important;
}

.text-dark-gray {
    color: var(--dark-gray) !important;
}

.text-medium-gray {
    color: var(--medium-gray) !important;
}

.text-golden-yellow,
.text-green {
    color: var(--brilliant-blue) !important;
}

a {
    text-decoration-color: var(--sky-blue);
}

/* Buttons */
.btn.btn-base-color {
    border-color: var(--royal-blue);
    color: #fff;
    background-image: linear-gradient(
        100deg,
        var(--royal-blue),
        var(--true-blue)
    );
}

.btn.btn-base-color:hover,
.btn.btn-base-color:focus {
    border-color: var(--dark-gray);
    background-color: var(--dark-gray);
    background-image: none;
    color: #fff;
}

.btn.btn-dark-gray {
    border-color: var(--dark-gray);
    background-color: var(--dark-gray);
}

.btn.btn-dark-gray:hover,
.btn.btn-dark-gray:focus {
    border-color: var(--royal-blue);
    background-color: var(--royal-blue);
}

.btn.btn-link {
    color: var(--royal-blue);
}

.btn.btn-link:hover {
    color: var(--true-blue);
}

.btn.btn-white:hover {
    border-color: var(--royal-blue);
    background-color: var(--royal-blue);
    color: #fff;
}

/* Header and navigation */
header .navbar .navbar-nav .nav-link:hover {
    color: #f0d060;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

header .navbar .navbar-nav .nav-item.active .nav-link {
    color: #f5d96a;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.7), 0 0 24px rgba(240, 200, 60, 0.4);
}

header .navbar-brand img {
    max-height: 67px;
}

.header-reverse .navbar,
.sticky .navbar {
    border-bottom-color: rgb(184 194 204 / 35%);
}

.navbar-toggler-line {
    background-color: var(--dark-gray);
}

/* Homepage hero: keep the selected Crafto artwork and recolour it */
.home-hero {
    background-color: var(--royal-blue) !important;
    background-image: url("../images/demo-yoga-and-meditation-about-title-bg.jpg") !important;
    background-position: center;
    background-size: cover;
    background-blend-mode: luminosity;
}

#slide-01-layer-04 {
    background: radial-gradient(
        circle,
        rgb(5 31 91 / 90%) 0%,
        rgb(15 82 186 / 72%) 34%,
        rgb(15 82 186 / 0%) 72%
    ) !important;
}

.wave-sonar {
    background-color: var(--sky-blue);
}

/* Cards, forms and interactive elements */
.box-shadow-quadruple-large,
.box-shadow-extra-large,
.box-shadow-large,
.btn-box-shadow {
    box-shadow: 0 12px 35px rgb(11 27 68 / 14%);
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    border-color: var(--royal-blue) !important;
    box-shadow: 0 0 0 3px rgb(15 82 186 / 12%);
}

.accordion .accordion-item.active-accordion .accordion-title,
.accordion .accordion-title:hover {
    color: var(--royal-blue);
}

.process-step-icon {
    border-color: var(--light-silver);
}

.process-step-icon[style*="255, 124, 85"] {
    background: rgb(15 82 186 / 12%) !important;
}

.bg-golden-yellow {
    background-color: var(--brilliant-blue) !important;
}

/* Page headers and footer */
footer.cover-background {
    /*
     * Keep the original template background image declared inline.
     * The blend changes only its colour mood to royal blue.
     */
    background-color: var(--dark-gray);
    background-blend-mode: luminosity;
}

.footer-dark p,
.footer-dark a:not(.btn) {
    color: var(--medium-gray);
}

footer a:hover,
footer .elements-social a:hover {
    color: var(--royal-blue) !important;
}

.scroll-progress-circle path {
    stroke: var(--royal-blue);
}

.circle-cursor-inner {
    background-color: var(--royal-blue);
}

.circle-cursor-outer {
    border-color: var(--royal-blue);
}

/* Real brand photography */
.brand-photo {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.brand-photo-landscape {
    aspect-ratio: 4 / 3;
}

.brand-photo-portrait {
    aspect-ratio: 3 / 4;
}

.brand-photo-square {
    aspect-ratio: 1;
}

.brand-photo-small {
    width: 160px;
}

.brand-photo-medium {
    width: 280px;
}

/* Crafto's built-in icon font, used instead of image placeholders */
.template-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--royal-blue);
    font-size: 64px;
    line-height: 1;
}

.template-icon-small {
    font-size: 52px;
}

.template-icon-seal {
    width: 106px;
    height: 106px;
    border-radius: 50%;
    color: #fff;
    font-size: 48px;
    background: linear-gradient(135deg, var(--royal-blue), var(--brilliant-blue));
}

.icon-with-text-style-10:hover .template-icon {
    color: #fff;
}

@media (max-width: 991px) {
    .navbar-collapse {
        background-color: var(--pearl-silver);
    }

    header .navbar .navbar-nav .nav-link {
        color: var(--dark-gray);
    }
}