/* Public-site palette aligned with the purple Eskoolsa admin experience. */
:root {
    --esk-public-primary: #6848ff;
    --esk-public-primary-dark: #5032d5;
    --esk-public-ink: #253044;
    --esk-public-surface: #ffffff;
    --esk-public-soft: #f1efff;
}

body { color: var(--esk-public-ink); background: var(--esk-public-surface); }
.bg-orange, .toparea, .newstab, .btnorange { background-color: var(--esk-public-primary) !important; }
.navborder, .affix#alert header, footer, .visionbg, .blue-box1 { background-color: var(--esk-public-primary-dark) !important; }
.navborder .navbar-nav > .active > a,
.navborder .navbar-nav > li > a:hover,
.navborder .navbar-nav > li > a:focus { color: #fff !important; background-color: rgba(255,255,255,.12) !important; }
.navborder .navbar-nav > .active > a { box-shadow: inset 0 -3px 0 #fff; }
.navborder .dropdown-menu { background-color: #39228d !important; }
.navborder .dropdown-menu > li > a:hover,
.navborder .dropdown-menu > li > a:focus { background-color: var(--esk-public-primary) !important; color: #fff !important; }
.navborder .login-btn { border-color: #fff !important; color: #fff !important; }
.navborder .login-btn:hover { background: #fff !important; color: var(--esk-public-primary-dark) !important; }
.navbar-toggle { background-color: var(--esk-public-primary) !important; border-color: var(--esk-public-primary-dark) !important; }

.divider, .whychooses:hover h3 a, .header-extras li i, .header-extras li .he-text,
.slide-arrow:hover, .btn-secondary, .scrollToTop:hover { color: var(--esk-public-primary) !important; }
.slide-arrow:hover, .btn-secondary, .scrollToTop:hover { background-color: var(--esk-public-soft) !important; }
.btnorange:hover, .btn-secondary:hover { background-color: var(--esk-public-primary-dark) !important; color: #fff !important; }

/* The homepage feature strip and carousel controls should not reintroduce navy/orange. */
.carousel-control, .left.carousel-control, .right.carousel-control { color: #fff !important; }
.carousel-control .fa, .carousel-control:hover .fa { background: var(--esk-public-primary-dark) !important; border-radius: 999px; padding: 11px 16px; }
.home .feature, .feature-box, .feature-list, .services .service-box { border-color: rgba(255,255,255,.28) !important; }
.home .feature, .feature-box, .feature-list, .services .service-box { background-color: rgba(80,50,213,.92) !important; color: #fff; }
.home .feature h1, .home .feature h2, .home .feature h3, .feature-box h1, .feature-box h2, .feature-box h3,
.feature-list h1, .feature-list h2, .feature-list h3, .services .service-box h3 a, .services .service-box p { color: #fff !important; }

a { color: var(--esk-public-primary-dark); }
a:hover, a:focus { color: var(--esk-public-primary); }

/*
 * Front-CMS logos can have very different canvas sizes.  The public header
 * must therefore constrain the brand area, not force an uploaded image into
 * a width/height pair.  Keeping both dimensions automatic preserves the
 * actual logo ratio and prevents a wide logo from stretching across the nav.
 */
#navbar_top header .navbar-brand.logo {
    width: 112px;
    height: 80px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#navbar_top header .navbar-brand.logo img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 56px !important;
    object-fit: contain;
}

.affix#alert header .navbar-brand.logo {
    height: 65px;
}

.affix#alert header .navbar-brand.logo img {
    max-height: 43px !important;
}

@media (max-width: 767px) {
    #navbar_top header .navbar-brand.logo {
        width: 86px;
        height: 65px;
        padding: 7px 12px;
    }

    #navbar_top header .navbar-brand.logo img {
        max-height: 44px !important;
    }
}