/* ==========================================================================
   UIKIT-THEME.CSS
   Переопределение СТАНДАРТНЫХ стилей/классов UIkit3 под токены проекта.
   Здесь — только то, что относится к базовым и наиболее часто
   кастомизируемым сущностям UIkit (Base, Typography, Link, Navbar,
   Container, Button). Подключать ПОСЛЕ uikit.min.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Дизайн-токены проекта (основа темы, на них опираются переопределения ниже)
   -------------------------------------------------------------------------- */
:root{
  --color-text-dark:     #1D1D1D;
  --color-text-white:    #ffffff;
  --color-primary:       #12233D;
  --color-light:         #F0F6FF;
  --color-soft:          #E4ECF7;
  --color-element:       #AACCFF;
  --color-accent:        #609FFF;
  --color-hover:         #548CE1;
  --color-blue:          #003F9F;
  --color-text-light:    #8C95A3;
  --color-text-meta:     #9FA7B3;
  --color-element-light: #C4CDD9;

  --font-main: 'Raleway', sans-serif;
  --font-num:  'Inter', sans-serif;

  --container-max: 1440px;
}

/* --------------------------------------------------------------------------
   Base — переопределение html/body, которые задаёт UIkit Base-компонент
   18px десктоп / 17px планшет / 16px мобильный, line-height 1.4em,
   вес Regular (400), межсимвольный интервал 0.03em (=3%)
   -------------------------------------------------------------------------- */
html, body{
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.4em;
  letter-spacing: 0.03em;
  color: var(--color-soft);
  background: var(--color-primary);
  overflow-x: hidden;
}
body{min-height: 100vh;}
@media (min-width: 640px) and (max-width: 959px){
  html, body{ font-size: 17px; }
}
@media (max-width: 639px){
  html, body{ font-size: 16px; }
}

/*uk-text-muted — приглушенный серый (для второстепенного текста, подписей).
uk-text-secondary — темно-серый (для заголовков или важного текста).
uk-text-success — зеленый (для сообщений об успехе).
uk-text-warning — оранжевый (для предупреждений).
uk-text-danger — красный (для ошибок и деструктивных действий).*/
.uk-text-primary{color: var(--color-accent);}
.uk-text-light{color: var(--color-light);}
.uk-text-dark{color: var(--color-primary);}
.uk-text-meta{color: var(--color-text-meta);}

.uk-background-default{background-color: var(--color-light);} 
/*.uk-background-muted — светло-серый (#f8f8f8). Очень часто используется для чередования секций на сайте, чтобы отделить блоки друг от друга.
.uk-background-primary — синий (#1e87f0)
.uk-background-secondary — темно-серый/черный (#222)*/

.uk-relative{
  position: relative;
}

.uk-radius1{border-radius: 6px;}
.uk-radius1{border-radius: 10px;}
.uk-radius2{border-radius: 20px;}
@media (max-width: 639px){
  .uk-radius2{border-radius: 10px;}
}

.uk-text-bold{font-weight: 600;}
.uk-text-medium{font-weight: 500;}
.uk-text-normal{font-weight: 400;}
.uk-text-light{font-weight: 300;}
/* --------------------------------------------------------------------------
   Typography — заголовки h1–h6 / .uk-h1–.uk-h6
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6{
  font-family: var(--font-main);
  color: var(--color-text-white);
  font-weight: 600;
  letter-spacing: 0.03em;
}

h1, .uk-h1{
  font-size: 62px;
  line-height: 0.9em;
}
@media (min-width: 640px) and (max-width: 959px){
  h1, .uk-h1{ font-size: 47px; }
}
@media (max-width: 639px){
  h1, .uk-h1{ font-size: 32px; }
}

h2, .uk-h2{
  font-size: 50px;
  line-height: 1em;
}
@media (min-width: 640px) and (max-width: 959px){
  h2, .uk-h2{ font-size: 38px; }
}
@media (max-width: 639px){
  h2, .uk-h2{ font-size: 30px; }
}

h3, .uk-h3{
  font-size: 32px;
  line-height: 1em;
  font-weight: 500;
}
@media (min-width: 640px) and (max-width: 959px){
  h3, .uk-h3{ font-size: 28px; }
}
@media (max-width: 639px){
  h3, .uk-h3{ font-size: 26px; }
}


h4, .uk-h4{
  font-size: 22px;
  line-height: 1.2em;
  font-weight: 400;
}
@media (min-width: 640px) and (max-width: 959px){
  h4, .uk-h4{ font-size: 21px; }
}
@media (max-width: 639px){
  h4, .uk-h4{ font-size: 20px; }
}

h5, .uk-h5{
  font-size: 20px;
  line-height: 1.2em;
  font-weight: 400;
}
@media (min-width: 640px) and (max-width: 959px){
  h5, .uk-h5{ font-size: 19px; }
}
@media (max-width: 639px){
  h5, .uk-h5{ font-size: 18px; }
}

.uk-text-meta {
  color: var(--color-text-meta);
}

/* --------------------------------------------------------------------------
   Link — базовые ссылки и .uk-link
   -------------------------------------------------------------------------- */
a,
.uk-link,
.uk-link-text{
  color: var(--color-text-white);
  text-decoration: none;
  transition: color .25s ease;
}
a:hover, a:focus,
.uk-link:hover, .uk-link:focus{
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   Navbar — .uk-navbar-nav (стандартное меню UIkit)
   -------------------------------------------------------------------------- */
.uk-navbar-nav > li > a{
  font-family: var(--font-main);
  font-weight: 500; /* medium */
  line-height: 1em;
  color: var(--color-text-white);
  text-decoration: none;
}
.uk-navbar-nav > li > a:hover,
.uk-navbar-nav > li > a:focus{
  color: var(--color-element);
}

/* --------------------------------------------------------------------------
   Container — ширина контента проекта
   -------------------------------------------------------------------------- */
.uk-container{
  max-width: var(--container-max);
}

/* --------------------------------------------------------------------------
   Button — .uk-button-default / .uk-button-primary
   -------------------------------------------------------------------------- */
.uk-button{
  font-family: var(--font-main);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.1em;
  border-radius: 5px;
  text-transform: none;
  padding: 16px 36px;
  box-shadow: 0 0 0 rgb(from var(--color-hover) r g b / 0);
}
.uk-button-primary{
  background: var(--color-accent);
  color: var(--color-text-white);
}
.uk-button-primary:hover,
.uk-button-primary:focus{
  background: var(--color-hover);
  color: var(--color-text-white);
  box-shadow: 0 0 15px rgb(from var(--color-hover) r g b / 0.15);
}
.uk-button-default{
  background: transparent;
  color: var(--color-element);
  border-color: var(--color-element);
}
.uk-button-default:hover,
.uk-button-default:focus{
  border-color: var(--color-hover);
  background: var(--color-hover);
  color: var(--color-text-white);
  box-shadow: 0 0 15px rgb(from var(--color-hover) r g b / 0.15);
}

.gap{gap:30px;}
.gap-large{gap:40px;}
.gap-medium{gap:20px;}
.gap-small{gap:10px;}

@media (max-width: 659px){
  .gap,.gap\@s{gap:20px;}
  .gap-large,.gap-large\@s{gap:30px;}
  .gap-medium,.gap-medium\@s{gap:15px;}
  .gap-small,.gap-small\@s{gap:10px;}
}
@media (max-width: 959px){
  .gap,.gap\@m{gap:20px;}
  .gap-large,.gap-large\@m{gap:30px;}
  .gap-medium,.gap-medium\@m{gap:15px;}
  .gap-small,.gap-small\@m{gap:10px;}
}


/* ============================================
   СБРОС ОТСТУПОВ ТОЛЬКО ДЛЯ МОБИЛЬНЫХ (< 640px)
   Суффикс: @ns (not-small / only mobile)
   ============================================ */
@media (max-width: 639px) {
    /* MARGIN */
    .uk-margin-remove\@ns { margin: 0 !important; }
    .uk-margin-remove-top\@ns { margin-top: 0 !important; }
    .uk-margin-remove-bottom\@ns { margin-bottom: 0 !important; }
    .uk-margin-remove-vertical\@ns { margin-top: 0 !important; margin-bottom: 0 !important; }
    .uk-margin-remove-horizontal\@ns { margin-left: 0 !important; margin-right: 0 !important; }

    /* PADDING */
    .uk-padding-remove\@ns { padding: 0 !important; }
    .uk-padding-remove-top\@ns { padding-top: 0 !important; }
    .uk-padding-remove-bottom\@ns { padding-bottom: 0 !important; }
    .uk-padding-remove-vertical\@ns { padding-top: 0 !important; padding-bottom: 0 !important; }
    .uk-padding-remove-horizontal\@ns { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ============================================
   СБРОС ОТСТУПОВ ТОЛЬКО ДЛЯ ПЛАНШЕТОВ (640px - 959px)
   Суффикс: @nm (not-medium / only tablet)
   ============================================ */
@media (min-width: 640px) and (max-width: 959px) {
    /* MARGIN */
    .uk-margin-remove\@nm { margin: 0 !important; }
    .uk-margin-remove-top\@nm { margin-top: 0 !important; }
    .uk-margin-remove-bottom\@nm { margin-bottom: 0 !important; }
    .uk-margin-remove-vertical\@nm { margin-top: 0 !important; margin-bottom: 0 !important; }
    .uk-margin-remove-horizontal\@nm { margin-left: 0 !important; margin-right: 0 !important; }

    /* PADDING */
    .uk-padding-remove\@nm { padding: 0 !important; }
    .uk-padding-remove-top\@nm { padding-top: 0 !important; }
    .uk-padding-remove-bottom\@nm { padding-bottom: 0 !important; }
    .uk-padding-remove-vertical\@nm { padding-top: 0 !important; padding-bottom: 0 !important; }
    .uk-padding-remove-horizontal\@nm { padding-left: 0 !important; padding-right: 0 !important; }
}


/* ============================================
   UIKIT 3 - 12 COLUMN GRID SYSTEM
   ============================================ */

/* ============================================
   МОБИЛЬНЫЕ (по умолчанию, все экраны)
   ============================================ */
.uk-width-1-12  { width: 8.33333%; }
.uk-width-2-12  { width: 16.66667%; }
.uk-width-3-12  { width: 25%; }
.uk-width-4-12  { width: 33.33333%; }
.uk-width-5-12  { width: 41.66667%; }
.uk-width-6-12  { width: 50%; }
.uk-width-7-12  { width: 58.33333%; }
.uk-width-8-12  { width: 66.66667%; }
.uk-width-9-12  { width: 75%; }
.uk-width-10-12 { width: 83.33333%; }
.uk-width-11-12 { width: 91.66667%; }
.uk-width-12-12 { width: 100%; }

/* ============================================
   @s - Small (≥ 640px)
   ============================================ */
@media (min-width: 640px) {
    .uk-width-1-12\@s  { width: 8.33333%; }
    .uk-width-2-12\@s  { width: 16.66667%; }
    .uk-width-3-12\@s  { width: 25%; }
    .uk-width-4-12\@s  { width: 33.33333%; }
    .uk-width-5-12\@s  { width: 41.66667%; }
    .uk-width-6-12\@s  { width: 50%; }
    .uk-width-7-12\@s  { width: 58.33333%; }
    .uk-width-8-12\@s  { width: 66.66667%; }
    .uk-width-9-12\@s  { width: 75%; }
    .uk-width-10-12\@s { width: 83.33333%; }
    .uk-width-11-12\@s { width: 91.66667%; }
    .uk-width-12-12\@s { width: 100%; }
}

/* ============================================
   @m - Medium (≥ 960px)
   ============================================ */
@media (min-width: 960px) {
    .uk-width-1-12\@m  { width: 8.33333%; }
    .uk-width-2-12\@m  { width: 16.66667%; }
    .uk-width-3-12\@m  { width: 25%; }
    .uk-width-4-12\@m  { width: 33.33333%; }
    .uk-width-5-12\@m  { width: 41.66667%; }
    .uk-width-6-12\@m  { width: 50%; }
    .uk-width-7-12\@m  { width: 58.33333%; }
    .uk-width-8-12\@m  { width: 66.66667%; }
    .uk-width-9-12\@m  { width: 75%; }
    .uk-width-10-12\@m { width: 83.33333%; }
    .uk-width-11-12\@m { width: 91.66667%; }
    .uk-width-12-12\@m { width: 100%; }
}

/* ============================================
   @l - Large (≥ 1200px)
   ============================================ */
@media (min-width: 1200px) {
    .uk-width-1-12\@l  { width: 8.33333%; }
    .uk-width-2-12\@l  { width: 16.66667%; }
    .uk-width-3-12\@l  { width: 25%; }
    .uk-width-4-12\@l  { width: 33.33333%; }
    .uk-width-5-12\@l  { width: 41.66667%; }
    .uk-width-6-12\@l  { width: 50%; }
    .uk-width-7-12\@l  { width: 58.33333%; }
    .uk-width-8-12\@l  { width: 66.66667%; }
    .uk-width-9-12\@l  { width: 75%; }
    .uk-width-10-12\@l { width: 83.33333%; }
    .uk-width-11-12\@l { width: 91.66667%; }
    .uk-width-12-12\@l { width: 100%; }
}

/* ============================================
   @xl - Extra Large (≥ 1600px)
   ============================================ */
@media (min-width: 1600px) {
    .uk-width-1-12\@xl  { width: 8.33333%; }
    .uk-width-2-12\@xl  { width: 16.66667%; }
    .uk-width-3-12\@xl  { width: 25%; }
    .uk-width-4-12\@xl  { width: 33.33333%; }
    .uk-width-5-12\@xl  { width: 41.66667%; }
    .uk-width-6-12\@xl  { width: 50%; }
    .uk-width-7-12\@xl  { width: 58.33333%; }
    .uk-width-8-12\@xl  { width: 66.66667%; }
    .uk-width-9-12\@xl  { width: 75%; }
    .uk-width-10-12\@xl { width: 83.33333%; }
    .uk-width-11-12\@xl { width: 91.66667%; }
    .uk-width-12-12\@xl { width: 100%; }
}

/* ============================================
   OFFSET CLASSES (сдвиг колонок)
   ============================================ */

/* Mobile */
.uk-offset-1-12  { margin-left: 8.33333%; }
.uk-offset-2-12  { margin-left: 16.66667%; }
.uk-offset-3-12  { margin-left: 25%; }
.uk-offset-4-12  { margin-left: 33.33333%; }
.uk-offset-5-12  { margin-left: 41.66667%; }
.uk-offset-6-12  { margin-left: 50%; }
.uk-offset-7-12  { margin-left: 58.33333%; }
.uk-offset-8-12  { margin-left: 66.66667%; }
.uk-offset-9-12  { margin-left: 75%; }
.uk-offset-10-12 { margin-left: 83.33333%; }
.uk-offset-11-12 { margin-left: 91.66667%; }

/* @s */
@media (min-width: 640px) {
    .uk-offset-1-12\@s  { margin-left: 8.33333%; }
    .uk-offset-2-12\@s  { margin-left: 16.66667%; }
    .uk-offset-3-12\@s  { margin-left: 25%; }
    .uk-offset-4-12\@s  { margin-left: 33.33333%; }
    .uk-offset-5-12\@s  { margin-left: 41.66667%; }
    .uk-offset-6-12\@s  { margin-left: 50%; }
    .uk-offset-7-12\@s  { margin-left: 58.33333%; }
    .uk-offset-8-12\@s  { margin-left: 66.66667%; }
    .uk-offset-9-12\@s  { margin-left: 75%; }
    .uk-offset-10-12\@s { margin-left: 83.33333%; }
    .uk-offset-11-12\@s { margin-left: 91.66667%; }
}

/* @m */
@media (min-width: 960px) {
    .uk-offset-1-12\@m  { margin-left: 8.33333%; }
    .uk-offset-2-12\@m  { margin-left: 16.66667%; }
    .uk-offset-3-12\@m  { margin-left: 25%; }
    .uk-offset-4-12\@m  { margin-left: 33.33333%; }
    .uk-offset-5-12\@m  { margin-left: 41.66667%; }
    .uk-offset-6-12\@m  { margin-left: 50%; }
    .uk-offset-7-12\@m  { margin-left: 58.33333%; }
    .uk-offset-8-12\@m  { margin-left: 66.66667%; }
    .uk-offset-9-12\@m  { margin-left: 75%; }
    .uk-offset-10-12\@m { margin-left: 83.33333%; }
    .uk-offset-11-12\@m { margin-left: 91.66667%; }
}

/* @l */
@media (min-width: 1200px) {
    .uk-offset-1-12\@l  { margin-left: 8.33333%; }
    .uk-offset-2-12\@l  { margin-left: 16.66667%; }
    .uk-offset-3-12\@l  { margin-left: 25%; }
    .uk-offset-4-12\@l  { margin-left: 33.33333%; }
    .uk-offset-5-12\@l  { margin-left: 41.66667%; }
    .uk-offset-6-12\@l  { margin-left: 50%; }
    .uk-offset-7-12\@l  { margin-left: 58.33333%; }
    .uk-offset-8-12\@l  { margin-left: 66.66667%; }
    .uk-offset-9-12\@l  { margin-left: 75%; }
    .uk-offset-10-12\@l { margin-left: 83.33333%; }
    .uk-offset-11-12\@l { margin-left: 91.66667%; }
}

/* ============================================
   ORDER CLASSES (порядок колонок)
   ============================================ */
@media (min-width: 960px) {
    .uk-order-1\@m  { order: 1; }
    .uk-order-2\@m  { order: 2; }
    .uk-order-3\@m  { order: 3; }
    .uk-order-4\@m  { order: 4; }
    .uk-order-5\@m  { order: 5; }
    .uk-order-6\@m  { order: 6; }
    .uk-order-7\@m  { order: 7; }
    .uk-order-8\@m  { order: 8; }
    .uk-order-9\@m  { order: 9; }
    .uk-order-10\@m { order: 10; }
    .uk-order-11\@m { order: 11; }
    .uk-order-12\@m { order: 12; }
}
@media (max-width: 639px){
  .uk-width-small{
    width: 115px;
  }
  .uk-grid-column-standart\@s>*, .uk-grid-standart\@s>* {
    padding-left: 15px;
  }
  .uk-grid-column-standart\@s, .uk-grid-standart\@s {
    margin-left: -15px;
  }
  *+.uk-grid-margin-standart\@s, .uk-grid+.uk-grid-standart\@s, .uk-grid+.uk-grid-row-standart\@s, .uk-grid-standart\@s>.uk-grid-margin, .uk-grid-row-standart\@s>.uk-grid-margin {
    margin-top: 15px;
  }
}