/*
Theme Name:     Preschool and Kindergarten Modellierton
Theme URI:      
Description:    Дочерняя тема для темы Preschool and Kindergarten 
Author:         
Author URI:     
Template:       preschool-and-kindergarten
Version:        0.1.0
*/

/* Загрузка родительских стилей сделана через function.php, так быстрее
@import url("../preschool-and-kindergarten/style.css");
*/

/*WCAG Цвет пунктов меню */
.main-navigation a {
  color: #06536B !important; 
  text-decoration: none !important; /*убираем подчеркивание пунктов меню как ссылок*/
}

/*WCAG Цвет ссылок в меню футера */
footer .widget_nav_menu a {
  color: #54595F !important;
}

/*WCAG Цвет в меню футера при наведении */
footer .widget_nav_menu li:hover > a
{
  color: #AD1400 !important;
}

/*WCAG Цвет фона подменю */
.main-navigation ul ul li,
.main-navigation ul ul a
{
  background: #fff !important; /* белый фон */
}

/*WCAG Цвет при наведении в подменю */
.main-navigation ul ul li a:hover,
.main-navigation ul ul li a:focus
{
  background: #fff !important;
  color: #AD1400 !important;
}

/*WCAG Цвет меню при наведении */
.main-navigation li:hover > a
{
  color: #AD1400 !important;
}

/* WCAG Цвет пунктов меню (мобильное меню) */
.elementor-nav-menu--dropdown .elementor-item,
.elementor-nav-menu--dropdown .elementor-sub-item,
.elementor-nav-menu--dropdown a,
.elementor-nav-menu--dropdown span {
  color: #06536B !important;
}

/* WCAG Цвет фона подменю */
.elementor-nav-menu--dropdown .elementor-sub-item,
.elementor-nav-menu--dropdown .elementor-sub-menu {
  background: #ffffff !important;
}

/* Десктоп: перекрытие стиля темы */
.primary-menu ul .current-menu-item > a,
.primary-menu ul .current-menu-ancestor > a,
.primary-menu ul .current_page_item > a,
.primary-menu ul .current_page_ancestor > a {
  color: #AD1400 !important;
}

/* Мобильное меню в Elementor */
.elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
  color: #AD1400 !important;
}

/* Переопределение цвета заголовка страницы, был розовый*/
.page-header .page-title {
    color: #AD1400;
}

/* Увеличиваем конрастность цвета строки © Copyright */
.site-info {
    color: #000000;
}


/*--------------------------------------------------------------
## Класс, чтобы растянуть фон контейнера на всю ширину страницы
--------------------------------------------------------------*/
.fullwidth-bg-section {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  box-sizing: border-box;
  position: relative;
  z-index: 0;
}

/*--------------------------------------------------------------
## Закрепляем шапку сайта с контактами + меню сайта при прокрутке страницы
--------------------------------------------------------------*/

/* Верхняя полоса (контакты/соцсети) */
.header-t {
    position: fixed;
    height: 52px;
    z-index: 1001;
	width: 100%;
}

.header-t .container{
  height: 100%;
  display: flex;
  align-items: center;                 /* вертикальный центр */
  justify-content: space-between;
  white-space: nowrap;                 /* чтобы телефон/почта не переносились */
}

/* Нижняя шапка (логотип + меню + кнопка) */
.header-b {
    position: fixed;
	top: 52px; /*было padding: 70px 0 10px;*/
	width: 100%;
	z-index: 1000;
	background: #f9f9f9;
	padding: 0;             /* убираем «плавающий» зазор */
}

/* Выровнять содержимое .header-b по центру по вертикали */
.header-b .container{
  height: 100%;
  display: flex;
  align-items: center;          
  justify-content: space-between;
  gap: 24px;
}

/* Нормализуем списки в верхней полоске */
.header-t .contact-info,
.header-t .social-networks{
  display: flex;
  align-items: center;
  gap: 18px;                           /* расстояние между элементами */
  margin: 0;                           /* СБРОС разных браузерных margin */
  padding: 0;                          /* СБРОС разных браузерных padding */
  list-style: none;
}

/* Ссылки внутри верхней полоски */
.header-t .contact-info a,
.header-t .social-networks a{
  display: inline-flex;
  align-items: center;
  gap: 8px;                            /* иконка + текст */
  text-decoration: none;
}

/* Логотип: фиксируем высоту, чтобы совпадала с высотой меню 
.site-branding,
.custom-logo-link{ display:flex; align-items:center; }
.custom-logo{ height: 40px; width:auto; }    
.site-branding{ margin:0; }*/

/* Навигация: убираем лишние «внутренние» отступы и выравниваем 
#site-navigation{ height:100%; display:flex; align-items:center; }
#site-navigation .menu{
  display:flex; align-items:center; gap: 20px;
  margin:0; padding:0; list-style:none;
}

#site-navigation .menu > li > a{
  display:flex; align-items:center;
  height: var(--menubar-h);
  padding: 0 10px;              
  line-height: 1;               
  text-decoration:none;
}*/


/*-------------------------------------------------
 * Десктоп-меню кнопка "Записаться"
 * -----------------------------------------------*/
/* т.к. "Записаться" добавлена как пункт меню с классом menu-cta */
  .header-b #site-navigation .menu > li.menu-cta > a {
	display:inline-flex; align-items:center; justify-content:center;
	/*height: calc(var(--menubar-h) - 24px);   ровно на 12px сверху/снизу меньше */
    padding: 10px 16px;  /* было padding: 10px 16px; */
	margin: -16px 0px 0px;  
    border-radius: 999px;
    /*background: #06536B; /*темно синий*/
	background: #AD1400; /*бордовый*/
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 500;
    white-space: nowrap;
    transition: background .2s, box-shadow .2s;
  }
  .header-b #site-navigation .menu > li.menu-cta > a:hover,
  .header-b #site-navigation .menu > li.menu-cta > a:focus {
    /*background: #AD1400; /*бордовый*/
	background: #06536B; /*темно синий*/  
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
	text-decoration: none !important;
  }


/*------------------------------------------
 * Кнопка "Записаться" как пункт меню. Мобильное выпадающее меню: делаем CTA широкой кнопкой
 * ----------------------------------------------*/
.mobile-menu-title ul#primary-menu.main-menu-modal > li.menu-cta > a {
  display: inline-block;
  width: auto;
  max-width: 90%;
  white-space: nowrap;
  margin: 8px 12px 12px;
  padding: 12px 16px;
  border-radius: 12px;
  text-align: center;
  background: #AD1400; /*бордовый*/
  color: #fff !important;
  font-weight: 600;
}
.mobile-menu-title ul#primary-menu.main-menu-modal > li.menu-cta > a:hover,
.mobile-menu-title ul#primary-menu.main-menu-modal > li.menu-cta > a:focus {
  background: #06536B; /*темно синий*/
  text-decoration: none !important;
}

/* На всякий случай отключаем подчёркивания/цвета ссылок по умолчанию внутри этой кнопки */
.main-navigation .menu > li.menu-cta > a *,
.mobile-menu-title ul#primary-menu.main-menu-modal > li.menu-cta > a * {
  color: inherit !important;
  text-decoration: none !important;
}



/* контент начинается ниже шапок */
#content { padding-top: 110px; }

/*не отображать заголовок страницы*/
.page-title {
display: none;
}

/* чтобы не было пробела между заголовком сайта на страницах записей и блога (<=1200px) */
@media only screen and (max-width: 1200px) {
  .post-template-default #content,
  .blog #content {
    padding-top: 0 !important;
  }
}


/* -------------------------------
 * Для виджета gooding (донаты в нижнем футере страниц)
 * ------------------------------------*/
.gooding-widget {
  max-width: 160px;
  margin: 0 auto;
  padding: 20px 0;
}

/*-------------------------------------------
 * Подпись к картинкам фон и шрифт
 * ----------------------------------------------*/
figcaption.widget-image-caption.wp-caption-text {
  background-color: #06536B; /* цвет фона */
  color: #ffffff; /* цвет текста */
}

/* Безопасная межстрочная для заголовков (решает налезание строк) */
h1, h2, h3, h4, h5, h6,
.entry-title,
.elementor-heading-title {
  line-height: 1.2 !important;    /* можно 1.25, если хочется свободнее */
  word-break: normal;
  overflow-wrap: anywhere;
}


/* клики по родительскому меню не активны 
 * чтобы курсор не показывал «ссылку», а клики на десктопе не вели никуда
 * для заголовков меню "СПОРТ И ТАНЦЫ", "СЦЕНА" и т.п.
 * */

  .menu-item.menu-nolink > a {
    cursor: default;
    pointer-events: none;
	
  }

/* Мобайл: убрать подчёркивание у заголовка-раздела (menu-nolink) */
@media (max-width: 767px) {
  /* Elementor dropdown + меню темы */
 	.menu-item.menu-nolink > a {
    color: inherit;
    text-decoration: none !important;
  }
}

/* Мобильное меню: сдвиг подменю вправо */
/* Моб. меню: сдвиг подменю вправо внутри .mobile-menu-title */
@media (max-width: 1024px) {

  /* базовый отступ для ссылок 1-го уровня (можно не трогать) */
  .mobile-menu-title ul#primary-menu.nav-menu.main-menu-modal > li > a {
    padding-left: 12px !important;
  }

  /* 1-й уровень подменю */
  .mobile-menu-title ul#primary-menu.nav-menu.main-menu-modal li > ul.sub-menu > li > a {
    padding-left: 24px !important;
    box-sizing: border-box;
  }

  /* 2-й уровень подменю */
  .mobile-menu-title ul#primary-menu.nav-menu.main-menu-modal li > ul.sub-menu ul.sub-menu > li > a {
    padding-left: 40px !important;
  }

  /* 3-й уровень (если появится) */
  .mobile-menu-title ul#primary-menu.nav-menu.main-menu-modal li > ul.sub-menu ul.sub-menu ul.sub-menu > li > a {
    padding-left: 56px !important;
  }

  /* если тема даёт отступ самому списку — подвинем и его (без маргинов, чтобы не было горизонтального скролла) */
  .mobile-menu-title ul#primary-menu.nav-menu.main-menu-modal li > ul.sub-menu {
    padding-left: 12px !important;
  }
}


/*
 * Это из-за “базовой линии”: картинка логотипа сидит выше, а пункты меню центрируются по своей строке. 
 * Проще всего выровнять всё в одну линию через flex + убрать baseline у изображения.
 * */

/* общий контейнер шапки */
.header-b .container{
  display:flex;
  align-items:center;           /* вертикальное выравнивание по центру */
  justify-content:space-between;
  gap:20px;
}

/* блок с логотипом */
.header-b .site-branding{
  display:flex;
  align-items:center;
  margin:0;
}
.header-b .custom-logo{
  display:block;                /* убираем отступ из-за baseline */
  vertical-align:middle;      
  aspect-ratio: 190 / 31;      /* фиксируем размер, чтобы экран не дергался */
  width: 190px;
  height: auto;	
}


/* Заголовки со ссылками: наследуем шрифт заголовка (Comfortaa из кастомайзера) */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.elementor-heading-title > a,
.elementor-widget-heading .elementor-heading-title > a,
.entry-title a, .page-title a, .site-title a,
.wp-block-post-title a {
  font: inherit !important;       
  letter-spacing: inherit;
}

/*------------------------------------------------------- 
 * настройка сетки курсов на главной странице
 *-------------------------------------------------------*/
.course{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid #e6e9ee; border-radius:16px; padding:12px;
  transition: transform .2s ease; /*любые изменения будут плавно анимироваться 0.2 сек с кривой ускорения ease*/
}
.course:hover{ transform: translateY(-2px); }
.course .thumb img{ width:100%; height:auto; border-radius:12px; aspect-ratio:4/3; object-fit:cover; }
.course .meta{ margin:0 0 .75rem; color:#54595F; font-size:.95rem; } /* для подписи возраста для курса*/
.cards-grid img {  
  aspect-ratio: 1024 / 742; 
  /* object-fit: cover; /* over: «обрежь, но заполни блок полностью». */
}


/* Контейнер с чипами (кнопки фильтра по возрасту) */
.age-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

/* Чип-кнопка */
.age-filters .chip {
  appearance: none;
  border: 1px solid #06536B;
  background: transparent;
  color: #06536B;
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.age-filters .chip:hover { 
  border-color: #06536B;
  background:#06536B; 
  color:#fff;
}

.age-filters .chip.is-active {
  background: #06536B;
  color: #fff;
  border-color: #06536B;
}

.age-filters .chip:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* скрытие карточек */
.course[hidden] { display: none !important; }

/*--------------------------------------------------------------
 *  Растянуть HTML-волны на всю ширину окна, как секцию 
 * ------------------------------------------------------------*/
.fullwidth-wave{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(-50vw + 50%) !important;
  margin-right:calc(-50vw + 50%) !important;
  line-height:0;                 /* чтобы не было зазоров */
  box-sizing:border-box;
  position:relative;
  z-index:1;
  pointer-events:none;           /* чтобы клик не ловился волной */
}

/* внутри — сам SVG на всю ширину и нужную высоту */
.fullwidth-wave > svg{
  display:block;
  width:100%;
  height:100px;                  /* высота секции */
}

/* на всякий случай, чтобы не появлялся горизонтальный скролл */
.fullwidth-bg-section{ overflow:hidden; }

/*-----------------------------------------------------------------------
 * Кнопка "Anmelden" из-за длинных немецких пунктов меню не помещалась
 * уменьшаем расстояние между пунктами меню для десктопа
 * -----------------------------------------------------------------------*/
@media (min-width:1024px){
	.main-navigation li { margin-left: 44px; } /* Было 48px*/
}


/*-----------------------------------------------------------------------
 * 
 * 
 * -----------------------------------------------------------------------*/