@charset "utf-8";

/**
 * VrnTc Theme - Main CSS
 * Based on vrn-tc.ru design
 */

/*------------------------------------------------------------------------main*/

html {
  width: 100%;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
  overflow-x: hidden;
  background-color: #fff;
  width: 100%;
  font-style: normal;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: #686868;
}

/* Sticky header keeps its place in the flow, so no body offset needed. */
body.admin-user {
  padding-top: 0;
}

body img {
  max-width: 100%;
  -ms-flex-negative: 0 !important;
  flex-shrink: 0 !important;
}

a {
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/*------------------------------------------------------------------------header*/

/* Закреплённая шапка: header + главное меню прилипают к верху при скролле.
   position: sticky вместо fixed на .site-header, чтобы шапка и меню
   прилипали как единый блок и не перекрывали тулбар Drupal. */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #F6F6F6;
}

.site-header {
  color: #000;
  background: #F6F6F6;
  box-shadow: 0 7px 7px rgba(0, 0, 0, 0.25);
}

/* For authenticated admin users: keep sticky header, just no shadow.
   Sticky doesn't break the Drupal toolbar the way fixed did. */
body.admin-user .site-header {
  box-shadow: none;
}

.header-top {
  position: relative;
}

.top-brand {
  border-left: 4px solid #f8bf0f;
}

.brand-text {
  font-size: 15px;
  line-height: 1;
}

.brand-text .site-slogan {
  margin-bottom: 0.25rem;
}

.brand-text .site-name {
  font-weight: 600;
  font-size: 25px;
  text-transform: uppercase;
  margin-top: 1rem;
  display: block;
}

.tel a {
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  color: #000 !important;
}

.tel a:hover {
  color: #F8BF0F !important;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.tel img {
  max-width: 38px;
  height: auto;
}

.top-item-button {
  background: #fff;
  box-shadow: -3px 3px 9px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  font-weight: 600;
  font-size: 17px;
  color: #000 !important;
  text-decoration: none !important;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.top-item-button i {
  font-size: 25px;
}

.top-item-button:hover {
  color: #F8BF0F !important;
}

.top-item-button:active {
  box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.25);
}

/*------------------------------------------------------------------------main content*/

/* Remove previously broken rule that targeted .content-above.
   The offset is now applied on body above. */
body .content-above {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.page-wrapper {
  position: relative;
  width: 100%;
}

.main-content {
  position: relative;
  width: 100%;
  min-height: 71vh;
  overflow-x: hidden;
  background-color: #494D4E;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.25);
  color: #fff;
}

.content-area {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid #808283;
}

/* Region sections - same container width as primary menu */
.region-content-above,
.region-content-below,
.region-secondary-menu {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Hero section: halved vertical padding */
.region-hero {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background: #353839;
}

/* Highlighted content: halved vertical padding */
.region-highlighted {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background: #3a3d3e;
}

.region-content-above {
  background: #494D4E;
  padding: 2rem 0;
}

.region-content-below {
  background: #494D4E;
  border-top: 1px solid #808283;
}

.region-secondary-menu {
  background: #353839;
  border-top: 1px solid #808283;
}

/*------------------------------------------------------------------------footer*/

.site-footer {
  background: #494D4E;
  box-shadow: 0px -2px 9px rgba(0, 0, 0, 0.25);
}

.footer-top {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.footer-border {
  height: 1px;
  background-color: #808283;
}

.footer-column {
  padding: 0 15px;
}

.footer-bottom {
  padding: 0;
}

.copyright {
  font-weight: 600;
  font-size: 20px;
  color: #fff;
}

/*------------------------------------------------------------------------skip link*/

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: #F8BF0F;
  color: #000;
  padding: 10px 20px;
  z-index: 10000;
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  top: 0;
}

/*------------------------------------------------------------------------Utility classes*/

.text-uppercase {
  text-transform: uppercase;
}

.font-weight-bold {
  font-weight: 700;
}

.border-gray {
  border-color: #808283;
}

.bg-gold {
  background-color: #F8BF0F;
}

.text-gold {
  color: #F8BF0F;
}

.text-white {
  color: #fff;
}

.bg-dark {
  background-color: #494D4E;
}

/*------------------------------------------------------------------------Media queries*/

/*iPhone 12/13 PRO Max landscape*/
@media only screen and (max-width: 926px) and (orientation: landscape) and (hover: none) {
  .top-brand {
    border-left: none;
    border-top: 4px solid #f8bf0f;
  }

  .brand-text {
    font-size: 12px;
  }

  .brand-text .site-name {
    font-size: 18px;
  }

  .contact-tel a {
    font-size: 20px;
  }

  .login-button {
    font-size: 14px;
  }

  .login-button i {
    font-size: 20px;
  }
}

/*iPhone 12/13 PRO Max portrait*/
@media only screen and (max-width: 428px) and (orientation: portrait) and (hover: none) {
  .top-brand {
    border-left: none;
    border-top: 4px solid #f8bf0f;
  }

  .brand-text {
    font-size: 12px;
  }

  .brand-text .site-name {
    font-size: 18px;
  }

  .contact-tel a {
    font-size: 20px;
  }

  .login-button {
    font-size: 14px;
  }

  .login-button i {
    font-size: 20px;
  }
}

/*iPhone 6/7/8 Plus landscape*/
@media only screen and (max-width: 736px) and (orientation: landscape) and (hover: none) {
  .top-brand {
    border-left: none;
    border-top: 4px solid #f8bf0f;
  }

  .brand-text {
    font-size: 12px;
  }

  .brand-text .site-name {
    font-size: 16px;
  }

  .contact-tel a {
    font-size: 20px;
  }

  .contact-tel a img {
    max-width: 25px;
  }

  .login-button {
    font-size: 12px;
  }

  .login-button i {
    font-size: 18px;
  }
}

/*iPhone 6/7/8 Plus portrait*/
@media only screen and (max-width: 414px) and (orientation: portrait) and (hover: none) {
  .top-brand {
    border-left: none;
    border-top: 4px solid #f8bf0f;
  }

  .brand-text {
    font-size: 12px;
  }

  .brand-text .site-name {
    font-size: 16px;
  }

  .contact-tel a {
    font-size: 18px;
  }

  .contact-tel a img {
    max-width: 20px;
  }

  .login-button {
    font-size: 12px;
  }

  .login-button i {
    font-size: 15px;
  }
}

/*iPhone 5 landscape*/
@media only screen and (max-width: 568px) and (orientation: landscape) and (hover: none) {
  .top-brand {
    border-left: none;
    border-top: 4px solid #f8bf0f;
  }

  .brand-text {
    font-size: 10px;
  }

  .brand-text .site-name {
    font-size: 14px;
  }

  .contact-tel a {
    font-size: 18px;
  }

  .contact-tel a img {
    max-width: 20px;
  }

  .login-button {
    font-size: 10px;
  }

  .login-button i {
    font-size: 12px;
  }
}

/*iPhone 5 portrait*/
@media only screen and (max-width: 320px) and (orientation: portrait) and (hover: none) {
  .top-brand {
    border-left: none;
    border-top: 4px solid #f8bf0f;
  }

  .brand-text {
    font-size: 10px;
  }

  .brand-text .site-name {
    font-size: 14px;
  }

  .contact-tel a {
    font-size: 18px;
  }

  .login-button {
    font-size: 10px;
  }

  .login-button i {
    font-size: 12px;
  }
}
/*==========================================================================
  Форма авторизации (/user/login) — карточка в стиле карточек курсов.
  Жёлтый акцент #f8bf0f, тёмно-серый #494d4e, мягкие поля и кнопки.
==========================================================================*/
.user-login-form {
  max-width: var(--auth-card-w, 525px);
  margin: 2.5rem auto;
  padding: 2rem 2.25rem;
  background: #fff;
  border: 1px solid #e4e6e7;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* Заголовок страницы «Войти» — над карточкой, по центру. */
.block-page-title-block {
  text-align: center;
}

.user-login-form .form-item {
  margin-bottom: 1.25rem;
}

.user-login-form label {
  display: block;
  font-weight: 600;
  font-size: 15px;
  color: #263238;
  margin-bottom: 0.4rem;
}

.user-login-form input[type="text"],
.user-login-form input[type="password"] {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font-size: 15px;
  color: #263238;
  background: #fff;
  border: 1px solid #d0d3d4;
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.user-login-form input[type="text"]:focus,
.user-login-form input[type="password"]:focus {
  border-color: #f8bf0f;
  box-shadow: 0 0 0 3px rgba(248, 191, 15, 0.18);
  outline: none;
}

/* Кнопка «Войти» — фирменный жёлтый. */
.user-login-form .button,
.user-login-form input[type="submit"],
.user-login-form #edit-submit {
  width: 100%;
  padding: 0.8rem 1.5rem;
  font-size: 16px;
  font-weight: 700;
  color: #000;
  background: #f8bf0f;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  margin-top: 0.5rem;
}

.user-login-form .button:hover,
.user-login-form input[type="submit"]:hover,
.user-login-form #edit-submit:hover {
  background: #e0aa00;
}

/*==========================================================================
  Вкладки над формой авторизации (Войти / Восстановить пароль).
  Располагаем впритык к верху карточки, той же ширины, в виде вкладок.
==========================================================================*/
body.path-user .block-page-title-block {
  /* H1 «Войти» дублирует активную вкладку — скрываем. */
  display: none;
}

body.path-user {
  --auth-card-w: 525px; /* 420px * 1.25 */
}

body.path-user .local-tasks {
  max-width: var(--auth-card-w);
  margin: 2.5rem auto 0; /* отступ сверху, впритык к карточке снизу */
  padding: 0;
  text-align: center;
}

/* Карточка формы: без верхнего отступа, когда над ней есть вкладки. */
body.path-user .user-login-form {
  margin-top: 0;
}

body.path-user .local-tasks ul {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.path-user .local-tasks li {
  margin: 0;
}

body.path-user .local-tasks a {
  display: block;
  padding: 0.6rem 1.25rem;
  font-size: 15px;
  font-weight: 600;
  color: #6b7075;
  text-decoration: none;
  background: #eceef0;
  border: 1px solid #e4e6e7;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Активная вкладка — совпадает с карточкой (белая), без нижней границы.
   Класс .is-active ставит main.js по совпадению href с текущим путём,
   поэтому работает при любом наборе/порядке вкладок (напр. когда
   Регистрация отключена и остаётся 2 вкладки).
   Селектор дублирует body.path-user для специфичности — иначе проигрывает
   правилу body.path-user .local-tasks a (равная специфичность, но раньше). */
body.path-user .local-tasks a.is-active {
  color: #263238;
  background: #fff;
  border-bottom: 1px solid #fff;
  margin-bottom: -1px;
}

body.path-user .local-tasks a:hover:not(.is-active) {
  color: #263238;
  background: #e0e2e3;
}

/*==========================================================================
  Форма восстановления пароля (/user/password) — тот же карточный дизайн,
  что и форма входа. Класс формы — .user-pass.
==========================================================================*/
body.path-user-password .block-page-title-block {
  display: none;
}

.user-pass {
  max-width: var(--auth-card-w, 525px);
  margin: 0 auto;
  padding: 2rem 2.25rem;
  background: #fff;
  border: 1px solid #e4e6e7;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.user-pass .form-item {
  margin-bottom: 1.25rem;
}

.user-pass label {
  display: block;
  font-weight: 600;
  font-size: 15px;
  color: #263238;
  margin-bottom: 0.4rem;
}

.user-pass input[type="text"],
.user-pass input[type="email"] {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font-size: 15px;
  color: #263238;
  background: #fff;
  border: 1px solid #d0d3d4;
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.user-pass input[type="text"]:focus,
.user-pass input[type="email"]:focus {
  border-color: #f8bf0f;
  box-shadow: 0 0 0 3px rgba(248, 191, 15, 0.18);
  outline: none;
}

.user-pass .button,
.user-pass input[type="submit"],
.user-pass #edit-submit {
  width: 100%;
  padding: 0.8rem 1.5rem;
  font-size: 16px;
  font-weight: 700;
  color: #000;
  background: #f8bf0f;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  margin-top: 0.5rem;
}

.user-pass .button:hover,
.user-pass input[type="submit"]:hover,
.user-pass #edit-submit:hover {
  background: #e0aa00;
}

/* Пояснение под полем — приглушённым. */
.user-pass > p {
  font-size: 14px;
  line-height: 1.5;
  color: #6b7075;
  margin: 0 0 1rem;
}

/*==========================================================================
  Форма регистрации (/user/register) — тот же карточный дизайн.
  Класс формы — .user-register-form (3 вкладки: Войти / Регистрация / Пароль).
==========================================================================*/
body.path-user-register .block-page-title-block {
  display: none;
}

/* Активная вкладка «Регистрация» определяется через .is-active (main.js). */

.user-register-form {
  max-width: var(--auth-card-w, 525px);
  margin: 0 auto;
  padding: 2rem 2.25rem;
  background: #fff;
  border: 1px solid #e4e6e7;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.user-register-form .form-item {
  margin-bottom: 1.25rem;
}

.user-register-form label {
  display: block;
  font-weight: 600;
  font-size: 15px;
  color: #263238;
  margin-bottom: 0.4rem;
}

.user-register-form input[type="text"],
.user-register-form input[type="email"],
.user-register-form input[type="password"] {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font-size: 15px;
  color: #263238;
  background: #fff;
  border: 1px solid #d0d3d4;
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.user-register-form input:focus {
  border-color: #f8bf0f;
  box-shadow: 0 0 0 3px rgba(248, 191, 15, 0.18);
  outline: none;
}

.user-register-form .button,
.user-register-form input[type="submit"],
.user-register-form #edit-submit {
  width: 100%;
  padding: 0.8rem 1.5rem;
  font-size: 16px;
  font-weight: 700;
  color: #000;
  background: #f8bf0f;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  margin-top: 0.5rem;
}

.user-register-form .button:hover,
.user-register-form input[type="submit"]:hover,
.user-register-form #edit-submit:hover {
  background: #e0aa00;
}

/* Подсказки полей — приглушённым, мельче. */
.user-register-form .description {
  font-size: 13px;
  line-height: 1.45;
  color: #8a8f93;
  margin-top: 0.35rem;
}

/*==========================================================================
  Всплывающие тосты для системных сообщений Drupal.
  Расположение: справа вверху. Закрытие крестиком или авто через 5с (JS).
==========================================================================*/
.vrn-tc-toasts {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 380px;
  pointer-events: none;
}

/* Тост виден сразу (без анимации появления — иначе CSS-анимация
   буферизуется при вставке из MutationObserver и тост «залипает» на
   opacity:0). Анимация только на закрытие.
   Привлекает внимание: цветная иконка, заголовок типа, тонированный фон,
   «полосатая» рамка и пульс появления. */
.vrn-tc-toast {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 2rem 0.95rem 1rem;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-left: 5px solid #494d4e;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  font-size: 15px;
  line-height: 1.45;
  color: #263238;
  overflow: hidden;
  /* «Полосатая» диагональная штриховка по типу — задаётся фоном ниже. */
}

.vrn-tc-toast.is-hiding {
  animation: vrn-tc-toast-out 0.3s ease forwards;
}

@keyframes vrn-tc-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(120%); }
}

/* Пульс появления — короткий «пинок», привлекает внимание без анимации opacity. */
.vrn-tc-toast {
  animation: vrn-tc-toast-nudge 0.45s ease;
}

@keyframes vrn-tc-toast-nudge {
  0% { transform: translateX(120%); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

/* Иконка в цветном круге. */
.vrn-tc-toast__icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

/* Тело: заголовок типа + текст. */
.vrn-tc-toast__body {
  flex: 1;
  min-width: 0;
}

.vrn-tc-toast__title {
  display: block;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
  color: #263238;
}

.vrn-tc-toast__text {
  flex: 1;
}

.vrn-tc-toast__text a {
  color: #b8860b;
}

/* Прогресс-бар обратного отсчёта 5с. */
.vrn-tc-toast__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: currentColor;
  opacity: 0.85;
  transform-origin: left center;
  animation: vrn-tc-toast-countdown 5s linear forwards;
}

@keyframes vrn-tc-toast-countdown {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

.vrn-tc-toast__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  color: #6b7075;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.vrn-tc-toast__close:hover {
  background: rgba(0, 0, 0, 0.12);
  color: #263238;
}

/* --- Типы сообщений: цвет иконки, заголовка, фоновой подсветки --- */
/* Успех */
.vrn-tc-toast--status { border-left-color: #43a047; color: #2e7d32; }
.vrn-tc-toast--status .vrn-tc-toast__icon { background: #43a047; }
.vrn-tc-toast--status .vrn-tc-toast__title { color: #2e7d32; }
.vrn-tc-toast--status::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(67,160,71,0.07) 0 8px, transparent 8px 16px);
  pointer-events: none;
}

/* Предупреждение */
.vrn-tc-toast--warning { border-left-color: #f8bf0f; color: #b8860b; }
.vrn-tc-toast--warning .vrn-tc-toast__icon { background: #f8bf0f; color: #000; }
.vrn-tc-toast--warning .vrn-tc-toast__title { color: #b8860b; }
.vrn-tc-toast--warning::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(248,191,15,0.08) 0 8px, transparent 8px 16px);
  pointer-events: none;
}

/* Ошибка */
.vrn-tc-toast--error { border-left-color: #e53935; color: #c62828; }
.vrn-tc-toast--error .vrn-tc-toast__icon { background: #e53935; }
.vrn-tc-toast--error .vrn-tc-toast__title { color: #c62828; }
.vrn-tc-toast--error::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(229,57,53,0.07) 0 8px, transparent 8px 16px);
  pointer-events: none;
}

/* Мобильные: тосты на всю ширину снизу. */
@media (max-width: 575.98px) {
  .vrn-tc-toasts {
    top: auto;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    max-width: none;
  }
  @keyframes vrn-tc-toast-in {
    from { opacity: 0; transform: translateY(120%); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes vrn-tc-toast-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(120%); }
  }
}

/* Оригинальные сообщения в region-highlighted скрыты — их заменили тосты.
   Если JS отключён, сообщения остаются на месте (класс ставит JS). */
.js .region-highlighted:has(.messages),
.js .region-highlighted:has([role="alert"]),
.js .region-highlighted:has([role="contentinfo"]) {
  display: none;
}