/*
 * Cleverics2026 — color scheme: Edu (example)
 *
 * Based on the default "cleverics" scheme: the accent family, the text colors
 * and the dark section backgrounds stay the same. Only the top bar, the
 * header and the footer are restyled, as on edu.cleverics.ru: a light gray
 * header with dark text and a dark gray footer. For a light header pick the
 * gray logo variant (cleverics-logo-gray.png) in the template settings.
 */

:root {
  /* Same palette as the default scheme */
  --cl-color-accent: #f57f25;
  --cl-color-dark: #3b3b3c;
  --cl-color-light: #e5e5e5;
  --cl-color-white: #fff;
  --cl-color-text: #3b3b3c;
  --cl-color-muted: #717073;
  --cl-color-border: #e2e1dd;
  --cl-color-surface: #fff;

  /* Extended palette */
  --cl-color-accent-text: #d96a12;
  --cl-color-accent-dark: #e55302;
  --cl-color-accent-soft: #fef1e7;
  --cl-color-dark-soft: #343645;
  --cl-color-dark-deep: #1f212a;
  --cl-color-surface-alt: #f5f6f8;
  --cl-color-surface-strong: #eceef1;

  /* Translucent whites for content on dark backgrounds */
  --cl-color-white-70: rgb(255 255 255 / 72%);
  --cl-color-white-55: rgb(255 255 255 / 55%);
  --cl-color-white-50: rgb(255 255 255 / 50%);
  --cl-color-white-25: rgb(255 255 255 / 25%);
  --cl-color-white-15: rgb(255 255 255 / 15%);
  --cl-color-white-12: rgb(255 255 255 / 12%);
  --cl-color-white-08: rgb(255 255 255 / 8%);
  --cl-color-white-05: rgb(255 255 255 / 5%);

  /* RGB triplets for alpha-based colors used by shadows and focus rings */
  --cl-color-accent-rgb: 245 127 37;
  --cl-color-dark-rgb: 40 42 53;

  /* Overlays applied on top of the full-width section backgrounds.
     The footer overlays use the dark gray of this scheme (#505050). */
  --cl-cta-overlay: linear-gradient(90deg, rgb(77 78 83 / 92%) 0%, rgb(92 93 98 / 70%) 100%);
  --cl-footer-overlay: linear-gradient(rgb(80 80 80 / 90%), rgb(80 80 80 / 90%));
  --cl-footer-menu-overlay: linear-gradient(rgb(80 80 80 / 88%), rgb(80 80 80 / 88%));
  --cl-hero-overlay: linear-gradient(90deg, rgb(47 49 65 / 96%) 0%, rgb(47 49 65 / 84%) 56%, rgb(47 49 65 / 52%) 100%);
}

/* --------------------------------------------------------------------------
   Light top bar
   -------------------------------------------------------------------------- */
.cleverics-topbar {
  color: var(--cl-color-muted);
  background: var(--cl-color-surface-alt);
  border-bottom: 1px solid #e7e7e7;
}

.cleverics-topbar a {
  color: var(--cl-color-muted);
}

/* --------------------------------------------------------------------------
   Light header
   -------------------------------------------------------------------------- */
.cleverics-header {
  color: var(--cl-color-text);
  background: #f8f8f8;
  border-bottom: 1px solid #e7e7e7;
}

.cleverics-logo {
  color: var(--cl-color-text);
}

.cleverics-logo:hover,
.cleverics-logo:focus-visible {
  color: var(--cl-color-text);
}

.cleverics-header__modules a {
  color: var(--cl-color-text);
}

.cleverics-header__modules a:hover,
.cleverics-header__modules a:focus-visible {
  color: var(--cl-color-accent);
}

.cleverics-header .mod-menu > .nav-item > a,
.cleverics-header .mod-menu > .nav-item > .mod-menu__heading {
  color: var(--cl-color-text);
}

.cleverics-header .mod-menu > .nav-item > a:hover,
.cleverics-header .mod-menu > .nav-item > a:focus-visible,
.cleverics-header .mod-menu > .nav-item > .mod-menu__heading:hover,
.cleverics-header .mod-menu > .nav-item > .mod-menu__heading:focus-visible {
  color: var(--cl-color-accent);
}

.cleverics-header .mod-menu > .nav-item.current > a,
.cleverics-header .mod-menu > .nav-item.active > a {
  color: var(--cl-color-accent);
}

.cleverics-header .mod-menu__toggle-sub {
  color: var(--cl-color-text);
}

.cleverics-header .mod-menu__toggle-sub:hover,
.cleverics-header .mod-menu__toggle-sub:focus-visible {
  color: var(--cl-color-accent);
}

.cleverics-icon-btn {
  border-color: #d8d8d8;
  color: var(--cl-color-text);
}

.cleverics-icon-btn:hover,
.cleverics-icon-btn:focus-visible {
  border-color: var(--cl-color-accent);
  color: var(--cl-color-accent);
}

.cleverics-icon-btn[aria-expanded="true"] {
  border-color: var(--cl-color-accent);
  color: var(--cl-color-white);
  background: var(--cl-color-accent);
}

/* Search panel on the light header */
.cleverics-search-panel {
  border-top-color: var(--cl-color-border);
  background: var(--cl-color-white);
}

.cleverics-search-form__input {
  border-color: var(--cl-color-border);
  color: var(--cl-color-text);
  background: var(--cl-color-white);
}

.cleverics-search-form__input::placeholder {
  color: var(--cl-color-muted);
}

.cleverics-search-form__input:focus {
  border-color: var(--cl-color-accent);
  color: var(--cl-color-text);
  background: var(--cl-color-white);
  box-shadow: 0 0 0 0.2rem rgb(var(--cl-color-accent-rgb) / 22%);
}

/* Mobile navigation on the light header */
@media (max-width: 899.98px) {
  .cleverics-header__nav {
    border-top-color: var(--cl-color-border);
    background: #f8f8f8;
  }

  .cleverics-header .mod-menu > .nav-item {
    border-bottom-color: var(--cl-color-border);
  }

  .cleverics-header .mod-menu__sub {
    border-left-color: var(--cl-color-border);
  }

  .cleverics-header .mod-menu__sub a,
  .cleverics-header .mod-menu__sub .mod-menu__heading {
    color: var(--cl-color-muted);
  }

  .cleverics-header .mod-menu__sub a:hover,
  .cleverics-header .mod-menu__sub a:focus-visible {
    color: var(--cl-color-text);
    background: var(--cl-color-surface-strong);
  }

  .cleverics-header .mod-menu__sub .mod-menu__separator hr {
    background: var(--cl-color-border);
  }
}

/* --------------------------------------------------------------------------
   Dark gray footer
   -------------------------------------------------------------------------- */
.cleverics-footer {
  background-color: #505050;
}