/*
 Theme Name:   TutorStarter Child
 Theme URI:    https://www.example.com/tutorstarter-child
 Description:  Child theme for the TutorStarter theme
 Author:       Ваше Имя
 Author URI:   https://www.example.com
 Template:     tutorstarter
 Version:      1.0.0
*/

/* Импортируем стили родительской темы */
@import url("../tutorstarter/style.css");

/* Підключення шрифту Montserrat з Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* Базові правила для всього сайту */
body, h1, h2, h3, h4, h5, h6, p, a, li, span, div, button, input, select, textarea {
    font-family: 'Montserrat', sans-serif;
}

/* 1. Заголовок курсу на картці (як на Screenshot_119.png) */
h3.tutor-course-name.tutor-fs-5.tutor-fw-medium {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    color: #00617E !important;
}

/* 2. Великий заголовок на сторінці окремого курсу (як на Screenshot_120.jpg) */
h1.tutor-course-details-title.tutor-fs-4.tutor-fw-bold {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 38px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #00617E !important;
}

/* 3. Заголовок "Чому ви навчитесь?" (як на Screenshot_121.png) */
h3.tutor-course-details-widget-title.tutor-fs-5.tutor-color-black.tutor-fw-bold {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 20px !important;
}

/* 4. Заголовок елемента списку в змісті курсу (як на Screenshot_122.png та Screenshot_123.png) */
h5.tutor-course-content-list-item-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
}

/* 5. Заголовок "Про курс" (як на Screenshot_125.png) */
h2.tutor-fs-5.tutor-fw-bold.tutor-color-black.tutor-mb-12 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 20px !important;
}

/* 6. Заголовок "Зміст курсу" (як на Screenshot_126.png) */
h3.tutor-fs-5.tutor-fw-bold.tutor-color-black.tutor-mb-24.tutor-course-content-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 20px !important; /* Розмір за замовчуванням 20px, можете залишити або змінити */
}

/* 7. Заголовок сторінки "Категорія: Новини" (як на Screenshot_153.png) */
h1.page-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 48px !important; /* Розмір за замовчуванням 48px, можете залишити або змінити */
    font-weight: 600 !important; /* Задайте бажану жирність, наприклад, SemiBold */
    color: #57586E !important; /* Збережіть оригінальний колір або змініть */
}

/* 8. Заголовок елемента акордеона "ПАЦІЄНТ З ПІДЛІТКОВИМ АКНЕ..." */
h4.tutor-accordion-item-header {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 20px !important; /* Зменшуємо з 32px до 24px (можете змінити) */
    line-height: 1.3 !important; /* Коригуємо міжрядковий інтервал */
    font-weight: 700 !important; /* Залишаємо жирність, як була (bold) */
   
}

/* ========================================================= */
/* АДАПТИВНІ СТИЛІ для мобільних пристроїв */
/* Застосовуємо стилі, коли ширина екрану МЕНШЕ або дорівнює 767px (зазвичай це мобільні) */
/* Ви можете змінити 767px на інше значення, наприклад 480px для дуже малих мобільних */
@media only screen and (max-width: 767px) {

    /* 2. Великий заголовок на сторінці окремого курсу (МОБІЛЬНА ВЕРСІЯ) */
    h1.tutor-course-details-title.tutor-fs-4.tutor-fw-bold {
        font-size: 28px !important; /* Зменшуємо розмір шрифту для мобільних */
        line-height: 1.3 !important; /* Коригуємо міжрядковий інтервал, якщо потрібно */
    }

    /* Можливо, також потрібно зменшити заголовок категорії на мобільних */
    .elementor-widget-container h1.page-title {
        font-size: 32px !important; /* Зменшуємо розмір для мобільних */
    }

    /* Якщо є інші заголовки, які не влазять, додайте їх сюди */
    /*
    h3.tutor-course-details-widget-title.tutor-fs-5.tutor-color-black.tutor-fw-bold {
        font-size: 18px !important;
    }
    */
}