/* ------------------------------------------------------------------
   CS1-theme colour palettes (Theme → Colour Palette).
   Active only when <html> has the class .cs1-palette; the colours come
   from CSS variables printed in the page head:
     --cs1-p1  darkest   (top bar, footer, headings, buttons, links)
     --cs1-p2  middle    (menu bar, sidebar border)
     --cs1-p3  lightest  (dropdowns, highlights, tints)
     --cs1-on-p1/2/3     readable text colour on each of them
   The content background stays white.
   ------------------------------------------------------------------ */

/* ---------- Text on primary-coloured elements ---------- */
.cs1-palette .btn-primary,
.cs1-palette .btn-primary:hover,
.cs1-palette .btn-primary:focus,
.cs1-palette .btn-primary.text-white,
.cs1-palette .bg-primary.text-white,
.cs1-palette .bg-primary .text-white,
.cs1-palette .bg-primary > i,
.cs1-palette .back-to-top i {
    color: var(--cs1-on-p1) !important;
}
.cs1-palette .btn-primary:hover {
    background-color: var(--cs1-p2);
    border-color: var(--cs1-p2);
    color: var(--cs1-on-p2) !important;
}

/* ---------- Headings ---------- */
.cs1-palette h1, .cs1-palette h2, .cs1-palette h3,
.cs1-palette h4, .cs1-palette h5, .cs1-palette h6 {
    color: var(--cs1-p1);
}
.cs1-palette .news-2 h3::after {
    background: var(--cs1-p2);
    opacity: .6;
}

/* ---------- Header: code-block strip ---------- */
.cs1-palette .cs1-header-blocks {
    background: var(--cs1-p3) !important;
    color: var(--cs1-on-p3);
}

/* ---------- Header: top bar ---------- */
.cs1-palette .topbar {
    background: var(--cs1-p1) !important;
}
.cs1-palette .topbar,
.cs1-palette .topbar p,
.cs1-palette .topbar a,
.cs1-palette .topbar i,
.cs1-palette .topbar .text-white,
.cs1-palette .topbar .text-body {
    color: var(--cs1-on-p1) !important;
}
.cs1-palette .topbar .border-white,
.cs1-palette .topbar .border-secondary {
    border-color: var(--cs1-on-p1) !important;
    opacity: 1;
}
.cs1-palette .topbar .top-info > .bg-primary {
    background: var(--cs1-p3) !important;
}
.cs1-palette .topbar .top-info > .bg-primary i {
    color: var(--cs1-on-p3) !important;
}
.cs1-palette .topbar .border-primary {
    border-color: var(--cs1-p3) !important;
}
.cs1-palette .topbar a:hover p,
.cs1-palette .topbar a:hover i {
    opacity: .75;
}

/* ---------- Header: menu bar ---------- */
.cs1-palette .sticky-top {
    background: var(--cs1-p2);
}
.cs1-palette .sticky-top > .container-fluid.bg-light,
.cs1-palette #navbarCollapse.bg-light {
    background: var(--cs1-p2) !important;
}
.cs1-palette .navbar-brand .text-primary,
.cs1-palette .navbar-brand .text-body,
.cs1-palette .navbar .fa-calendar-alt.text-primary,
.cs1-palette .navbar .navbar-collapse .text-body,
.cs1-palette .navbar .navbar-collapse small,
.cs1-palette .navbar .cs1-clock,
.cs1-palette .navbar-toggler .text-primary {
    color: var(--cs1-on-p2) !important;
}
.cs1-palette .navbar-toggler {
    border-color: var(--cs1-on-p2);
}
html.cs1-palette .navbar .navbar-nav .nav-link {
    color: var(--cs1-on-p2);
    border-radius: 6px;
}
html.cs1-palette .navbar .navbar-nav .nav-link:hover,
html.cs1-palette .navbar .navbar-nav .nav-link:focus,
html.cs1-palette .navbar .navbar-nav .nav-link.active,
html.cs1-palette .navbar .navbar-nav .show > .nav-link {
    background: var(--cs1-p1);
    color: var(--cs1-on-p1);
}
html.cs1-palette .navbar .dropdown-menu,
html.cs1-palette .navbar .nav-item:hover .dropdown-menu {
    background: var(--cs1-p3) !important;
}
html.cs1-palette .navbar .dropdown-menu .dropdown-item {
    color: var(--cs1-on-p3);
}
html.cs1-palette .navbar .dropdown-menu .dropdown-item:hover,
html.cs1-palette .navbar .dropdown-menu .dropdown-item.active {
    background: var(--cs1-p1);
    color: var(--cs1-on-p1);
}
.cs1-palette .btn-search {
    border-color: var(--cs1-p1) !important;
}
.cs1-palette .navbar .navbar-collapse .border-top {
    border-color: rgba(0, 0, 0, .12) !important;
}

/* ---------- Home: feature strip, newsletter banner ---------- */
.cs1-palette .cs1-banner {
    background: rgba(var(--cs1-p3-rgb), .22);
}

/* ---------- Sidebar ---------- */
.cs1-palette .cs1-sidebar {
    border-color: var(--cs1-p2) !important;
    background: rgba(var(--cs1-p3-rgb), .08);
}
.cs1-palette .cs1-sidebar .border-bottom {
    border-color: var(--cs1-p3) !important;
}
/* Stay Connected buttons cycle through the three palette colours */
.cs1-palette .cs1-sidebar a.btn.w-100:nth-of-type(3n+1) { background: var(--cs1-p1); border-color: var(--cs1-p1); }
.cs1-palette .cs1-sidebar a.btn.w-100:nth-of-type(3n+2) { background: var(--cs1-p2); border-color: var(--cs1-p2); }
.cs1-palette .cs1-sidebar a.btn.w-100:nth-of-type(3n+3) { background: var(--cs1-p3); border-color: var(--cs1-p3); }
.cs1-palette .cs1-sidebar a.btn.w-100:nth-of-type(3n+1) > span { color: var(--cs1-on-p1) !important; }
.cs1-palette .cs1-sidebar a.btn.w-100:nth-of-type(3n+2) > span { color: var(--cs1-on-p2) !important; }
.cs1-palette .cs1-sidebar a.btn.w-100:nth-of-type(3n+3) > span { color: var(--cs1-on-p3) !important; }
.cs1-palette .cs1-sidebar a.btn.w-100:hover { filter: brightness(.93); }
.cs1-palette .cs1-sidebar .nav-pills .bg-light,
.cs1-palette .cs1-cat-pills .bg-light,
.cs1-palette .populer-news .tab-class .nav-item a.bg-light:not(.active) {
    background: rgba(var(--cs1-p3-rgb), .22) !important;
}

/* ---------- Footer ---------- */
.cs1-palette .footer.bg-dark {
    background: var(--cs1-p1) !important;
}
.cs1-palette .copyright.bg-dark {
    background: var(--cs1-p-deep) !important;
}
.cs1-palette .footer,
.cs1-palette .footer h4,
.cs1-palette .footer p,
.cs1-palette .footer a,
.cs1-palette .footer i,
.cs1-palette .footer small,
.cs1-palette .footer span,
.cs1-palette .footer .text-white,
.cs1-palette .footer .text-light,
.cs1-palette .footer .text-secondary {
    color: var(--cs1-on-p1) !important;
}
.cs1-palette .footer .text-secondary {
    opacity: .8;
}
.cs1-palette .footer a:hover,
.cs1-palette .footer a:hover i {
    color: var(--cs1-on-p1) !important;
    text-decoration: underline;
}
.cs1-palette .footer .btn-light i {
    color: #111 !important;
}
.cs1-palette .footer .border-primary {
    border-color: var(--cs1-p3) !important;
}
.cs1-palette .footer .btn-primary {
    background: var(--cs1-p3) !important;
    color: var(--cs1-on-p3) !important;
}
.cs1-palette .footer [style*="border-bottom"] {
    border-color: rgba(0, 0, 0, .12) !important;
}
.cs1-palette .copyright,
.cs1-palette .copyright a,
.cs1-palette .copyright i,
.cs1-palette .copyright span,
.cs1-palette .copyright .text-white,
.cs1-palette .copyright .text-light {
    color: var(--cs1-on-p-deep) !important;
}
.cs1-palette .copyright a {
    text-decoration: underline;
}

/* Footer code-block strip above the footer */
.cs1-palette .cs1-footer-blocks.bg-light {
    background: rgba(var(--cs1-p3-rgb), .22) !important;
}