/* =====================================================================
   a24-layout.css — доповнення до власних стилів сайту.

   НАВІЩО. Головна сторінка зібрана конструктором SiteOrigin Panels:
   .panel-grid = рядок, .panel-grid-cell = колонка, .so-panel .widget =
   блок усередині. CSS цього конструктора лежав у складеному файлі теми
   Eduma, якого ми свідомо не переносимо (платна тема — чужа ліцензія
   в активі клієнта). Без цих правил колонки не стають поруч і головна
   витягується в одну довгу стрічку.

   ЧОГО ТУТ НЕМА І ЧОМУ. Bootstrap не підключаємо навмисно: сторінка
   «Часто задаваемые вопросы» зроблена на його акордеоні, а в Bootstrap
   є .collapse { display:none }. Без його JS відповіді просто зникли б.
   Зараз вони видно всі одразу — не як в оригіналі, але читабельно.

   ОБСЯГ. Правила максимально скоуплені під .panel-layout, щоб не
   перебивати тему: .widget у Astra означає віджет бічної колонки,
   і глобальне правило зачепило б її.
   ===================================================================== */

/* ---------- подвійний заголовок ----------
   Клас a24-has-own-h1 ставиться з mu-плагіна ТІЛЬКИ на сторінки, у вмісті
   яких уже є свій <h1>. Там заголовок від теми зайвий: виходили два майже
   однакові рядки поспіль і два H1 на одній сторінці. */

.a24-has-own-h1 .entry-title,
.a24-has-own-h1 .ast-single-post .entry-title,
.a24-has-own-h1 .page-title {
    display: none;
}

/* ---------- сітка конструктора ---------- */

.panel-layout {
    width: 100%;
}

/* Рівень, на якому лежать колонки, залежить від типу рядка:
     .panel-grid.panel-no-style  > .panel-grid-cell        (колонки одразу)
     .panel-grid.panel-has-style > .panel-row-style > cell (є обгортка з фоном)
   Flex треба ставити саме на батька колонок, інакше він застосується
   до обгортки, а колонки лишаться в потоці й стануть одна під одною. */

.panel-layout .panel-grid {
    width: 100%;
}

.panel-layout .panel-grid.panel-no-style,
.panel-layout .panel-row-style {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

/* flex-basis: auto, а не 0 — щоб ширини з розмітки конструктора
   (#pgc-2803-3-0 { width:33.3333% }) не ігнорувались. */
.panel-layout .panel-grid-cell {
    flex: 1 1 auto;
    min-width: 0;          /* інакше довгий текст ламає колонку */
    padding: 0 15px;
    box-sizing: border-box;
}

/* Порожні комірки конструктор ставив як розпірки. На вузькому екрані
   вони з'їдають місце, тому прибираємо їх повністю. */
.panel-layout .panel-grid-cell-empty {
    display: none;
}

.panel-layout .so-panel,
.panel-layout .widget {
    display: block;
    margin: 0 0 24px;
}

.panel-layout .panel-last-child,
.panel-layout .so-panel:last-child {
    margin-bottom: 0;
}

.panel-layout .textwidget {
    display: block;
}

/* ---------- рядки з фоном ---------- */

.panel-layout .panel-row-style {
    padding: 32px 0;
    width: 100%;
}

.panel-layout .panel-no-style {
    padding: 0;
}

/* Розтягнуті на всю ширину рядки конструктора. Без обмеження текст
   у них ліпиться до країв екрана. */
.panel-layout .siteorigin-panels-stretch {
    width: 100%;
}

/* ---------- віджети теми ---------- */

.panel-layout .thim-widget-empty-space,
.panel-layout .empty_space {
    display: block;
    height: 32px;
}

/* Лічильники «5122 учня / 4688 склали / 53 інструктори» */
.panel-layout .thim-widget-counters-box {
    text-align: center;
    padding: 12px 0;
}

/* ---------- віджети теми, які лишились без оформлення ----------------
   Тема Eduma платна, її css ми свідомо не переносимо. Але без ЖОДНИХ
   правил ці блоки виглядають як брак: кнопки з чорним фоном і чорним
   текстом, лічильники як дрібний текст на фото. Нижче — мінімум, щоб
   вони читались. Це не копія теми, а самостійне просте оформлення. */

/* Лічильники «5122 / 4688 / 53». Числа в розмітці є, їм бракувало
   лише розміру й кольору — на фоновому фото вони були невидимі. */
.panel-layout .counter-box {
    text-align: center;
    padding: 18px 10px;
}

.panel-layout .display-percentage {
    font-size: 46px;
    font-weight: 700;
    line-height: 1.1;
    color: #ff9900;
}

.panel-layout .counter-box-content {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.35;
    text-transform: uppercase;
    color: #fff;
}

/* Затемнення під фоновим фото. Без нього білий текст на світлих
   ділянках знімка не читається. Клас так і задуманий у темі. */
.panel-layout .thim-bg-overlay {
    position: relative;
}

.panel-layout .thim-bg-overlay::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0, 0, 0, .5);
    pointer-events: none;
}

.panel-layout .thim-bg-overlay > * {
    position: relative;
    z-index: 1;
}

/* Кнопки. Фон заданий інлайном у розмітці (часто чорний), а колір
   тексту мала давати тема — звідси чорне на чорному. */
.panel-layout .widget-button {
    display: inline-block;
    padding: 12px 26px;
    color: #fff !important;
    text-decoration: none;
    border-radius: 3px;
    line-height: 1.2;
    font-weight: 600;
}

.panel-layout .widget-button:hover {
    opacity: .88;
}

/* Заголовки всередині віджетів */
.panel-layout .widget-title {
    margin: 0 0 14px;
    font-size: 22px;
    line-height: 1.25;
}

.panel-layout .thim-slider-heading {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
}

.panel-layout .thim-slider-sub-heading {
    font-size: 17px;
    line-height: 1.4;
}

/* Картки філій у блоці «Наши автошколы» */
.panel-layout .card-item {
    height: 100%;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    overflow: hidden;
}

.panel-layout .card-image img {
    display: block;
    width: 100%;
    height: auto;
}

.panel-layout .card-title {
    padding: 12px 14px 4px;
    font-size: 17px;
    font-weight: 600;
}

.panel-layout .card-text {
    padding: 0 14px 10px;
    font-size: 14px;
    line-height: 1.4;
}

.panel-layout .card-text img {
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}

.panel-layout .thim-widget-single-images img,
.panel-layout .thim-widget-our-team img {
    max-width: 100%;
    height: auto;
}

/* Обгортки віджетів конструктора. Самі нічого не малюють, але без
   display:block частина з них лишається інлайновою і текст злипається. */
.panel-layout .so-widget-sow-editor,
.panel-layout .so-widget-sow-editor-base,
.panel-layout .siteorigin-widget-tinymce,
.panel-layout .widget_text,
.panel-layout .widget_black_studio_tinymce,
.panel-layout .widget_black-studio-tinymce,
.panel-layout .textwidget {
    display: block;
}

.panel-layout .widget_empty-space,
.panel-layout .thim-widget-empty-space-base {
    display: block;
    height: 32px;
}

/* Акордеон FAQ. Bootstrap ми не підключаємо навмисно (він сховав би
   відповіді), тому лишаємо все розкритим і робимо читабельним. */
.panel-group .panel {
    margin-bottom: 10px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    overflow: hidden;
}

.panel-group .panel-heading {
    padding: 12px 16px;
    background: #f7f7f7;
}

.panel-group .panel-title {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
}

.panel-group .panel-title a {
    text-decoration: none;
}

.panel-group .panel-body {
    padding: 14px 16px;
}

/* ---------- картки філій: кнопка налазила на розклад ----------------
   У css сайту .card-item має ЖОРСТКУ висоту 385px + overflow:hidden,
   а кнопка «Детали» приліплена absolute до низу. Рядок розкладу з часом
   став довшим (переноситься на два рядки) і в цю висоту не влазить:
   кнопка лягала поверх тексту, а хвіст обрізало.
   Це поломка з самого оригіналу, не наслідок перенесення.
   Лікуємо мінімально: висота за вмістом, місця під кнопку більше.

   ⚠️ ВАГА СЕЛЕКТОРА. Перша версія цієї правки була написана як `.card-item`
   і не діяла ЖОДНОГО разу: в оригіналі правило задане як
   `.top-10-cards .card-item` (два класи проти одного), і воно вигравало.
   Замовник це побачив на живому сайті — кнопка так само налазила на текст.
   Тому тут і далі селектор повторює оригінальний, а не спрощений. */

.top-10-cards .card-item,
.card-item {
    height: auto;
    min-height: 385px;
    overflow: visible;
    padding-bottom: 56px;
}

.top-10-cards .card-item > p,
.card-item > p {
    position: static;
    margin-top: 12px;
}

.top-10-cards .card-item > p > a,
.card-item > p > a {
    max-width: 100%;
}

@media (max-width: 600px) {
    .top-10-cards .card-item,
    .card-item {
        min-height: 0;
        width: 100%;
    }
}

/* ---------- секція «в цифрах»: жорстка висота ----------
   section.section-numbers має height:365px. Коли текст під цифрами
   переноситься на зайвий рядок, він вилазить за цю висоту, а наступна
   секція починається там, де сказано — і накладається зверху. Саме це
   замовник зняв на скріні: білий блок «О НАС» поверх цифр. */

section.section-numbers {
    height: auto;
    min-height: 365px;
}

section.section-numbers > .container {
    height: auto;
    min-height: 100%;
}

section.section-numbers .section-numbers-content {
    height: auto;
    flex-wrap: wrap;
    padding: 20px 0;
}

/* ---------- блок «Что вы получаете»: колонки налазили одна на одну ----
   Рядок має width:1100px при вужчому контейнері теми, а елементи —
   flex-grow:1 без min-width. Текст не мав куди переноситись і виїжджав
   на сусідів. */

.inclusive-section-row {
    width: 100%;
    max-width: 1100px;
    flex-wrap: wrap;
}

.inclusive-section-item {
    min-width: 200px;
    flex-basis: 200px;
    padding: 0 10px 20px;
    box-sizing: border-box;
}

.inclusive-section-item-text {
    text-align: center;
    word-break: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {
    .inclusive-section-item {
        flex-basis: 50%;
        min-width: 0;
    }
}

/* ---------- утиліти, які лишились без правил ---------- */
/* Ці класи стоять у контенті 250+ разів. Вони нешкідливі глобально:
   нічого, крім вирівнювання тексту, не роблять. */

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* ---------- модифікатори календаря, яких нема в оригінальному css --- */

.calendar-card-shedule-days {
    display: block;
}

.calendar-card-on {
    opacity: 1;
}

/* ---------- телефон ---------- */

@media (max-width: 768px) {
    .panel-layout .panel-grid {
        display: block;
    }
    .panel-layout .panel-grid-cell {
        width: 100%;
        padding: 0;
        margin-bottom: 20px;
    }
    .panel-layout .panel-row-style {
        padding: 20px 0;
    }
}

/* =====================================================================
   ДІРКИ, ЗНАЙДЕНІ ЖИВИМ ОГЛЯДОМ СТОРІНОК

   Усе нижче — наш власний css. Жодного рядка з платної теми: значення
   взяті або з ВЛАСНОГО css сайту (#a00e0e, #FFEA00, montserrat), або
   намальовані з нуля.

   ⚠️ Типографіку тут НЕ чіпаємо. Власний css сайту вже несе @font-face
   на Montserrat / SFUIDisplay / Geometria, і всі файли шрифтів у дампі є
   та віддаються. Палітра Eduma (Roboto, #ffb606) — це ІНША, пізніша
   епоха сайту; накласти її поверх стилів 2018 року означало б змішати
   два різні дизайни й зробити гірше, ніж є.
   ===================================================================== */

/* ---------- порожні абзаци і заголовки ----------
   Імпорт лишає порожні <p> і <h2>: у дампі вони тримали відступи, які
   давала тема. Зараз кожен такий тег — це вертикальний провал на пів
   екрана. На головній чотири порожні <h2> підряд давали ~139px пустоти.
   Ховаємо тільки СПРАВДІ порожні: <p>&nbsp;</p> псевдоклас :empty не
   бере, їх чистить конвеєр (extract.py), і це правильніше — вони не
   мають доїжджати в базу взагалі. */

.entry-content p:empty,
.entry-content h1:empty,
.entry-content h2:empty,
.entry-content h3:empty,
.entry-content h4:empty {
    display: none;
}

/* ---------- зірки рейтингу ----------
   simplerating малює зірки спрайтом /assets/components/simplerating/img/
   stars.png (130x210, шість рядів по 35px). Теки img в архіві нема —
   виходив порожній прямокутник 130x35 на п'яти сторінках філій.
   Малюємо зірки текстом. Двошарово, бо оцінка ЧАСТКОВА: .rating__current
   має інлайнову ширину (78px, 104px, 85.8px…), і якщо просто підмінити
   символи, дробова частина з'їде. Сірий ряд лежить знизу, жовтий —
   зверху, обрізаний по тій самій інлайновій ширині. */

.rating__best {
    background: none !important;
    position: relative;
}

.rating__best::before {
    content: "\2605\2605\2605\2605\2605";
    position: absolute;
    top: 0;
    left: 0;
    width: 130px;
    font-size: 26px;
    line-height: 35px;
    letter-spacing: 0;
    color: #d8d8d8;
    white-space: nowrap;
}

.rating__current {
    position: absolute;
    top: 0;
    left: 0;
    height: 35px;
    overflow: hidden;   /* саме тут працює інлайнова ширина */
    background: none !important;
}

.rating__current::before {
    content: "\2605\2605\2605\2605\2605";
    display: block;
    width: 130px;
    font-size: 26px;
    line-height: 35px;
    letter-spacing: 0;
    color: #FFEA00;
    white-space: nowrap;
}

/* ---------- фото в блоці «Наша команда» ----------
   .employee-preview не описаний у жодному css сайту: два фото їхали як є,
   200x180 і 720x648, тобто друге в чотири рази більше за перше. */

img.employee-preview {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    margin: 0 auto 15px;
}

/* ---------- картки інструкторів на /motoshkola ----------
   У власному css сайту .employee-selector-content-item{display:none}:
   блоки перемикав js, якого ми свідомо не підключаємо. Без нього селектор
   стояв порожній. Показуємо всі — це не як в оригіналі, але порожнє місце
   гірше за список. */

.employee-selector-content-item {
    display: block;
    border-top: 1px solid #ececec;
    padding-top: 20px;
}

.employee-selector-content-item:first-of-type {
    border-top: none;
}

/* ---------- місце під карту ----------
   .intergeo_map_canvas — контейнер карти, яку малював плагін по js-ключу.
   Плагіна нема, лишалась біла смуга 300px на трьох сторінках філій. */

.intergeo_map_canvas {
    display: none;
}

/* ---------- порожні кнопки «поділитись» ----------
   uSocial малював кнопки скриптом із чужого домену. Скрипта нема —
   лишався порожній div з відступами. */

.uSocial-Share {
    display: none;
}

/* ---------- заголовки віджетів поза конструктором ----------
   .widget-title вище скоуплений під .panel-layout, бо в Astra .widget —
   це віджет бічної колонки. Але дев'ять <h3 class="widget-title"> стоять
   у звичайному вмісті, поза конструктором, і лишались без оформлення.
   Скоупимо під .entry-content — бічної колонки теми це не зачіпає. */

.entry-content h3.widget-title,
.entry-content h2.widget-title {
    font-family: montserrat, sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    color: #14121D;
    margin: 0 0 18px;
}

/* ---------- іконки в тексті ----------
   Класи розмірів від WordPress (size-medium, alignnone, aligncenter)
   у власному css сайту не описані: іконки «Что входит в обучение»
   стояли впритул до тексту. */

.entry-content img.aligncenter {
    display: block;
    margin: 12px auto;
}

.entry-content img.alignnone {
    margin: 12px 0;
}

.entry-content img.alignleft {
    float: left;
    margin: 6px 18px 12px 0;
}

.entry-content img.alignright {
    float: right;
    margin: 6px 0 12px 18px;
}

/* ---------- перший екран головної ----------
   Слайдер робив платний Slider Revolution: самі слайди жили в базі, у
   розмітку доїхав лише каркас із style="display:none". Через це блок
   схлопувався в нуль, і сторінка починалась з порожнечі.

   АЛЕ фонове зображення слайдера збереглось — воно стоїть інлайново
   прямо на обгортці (/wp-content/uploads/2018/12/bg-video.jpg). Досить
   дати обгортці висоту, і замість порожнечі виходить банер на всю
   ширину — те саме фото, що було в оригіналі під слайдами.

   Самі тексти слайдів лишаються схованими: щоб дістати їх, треба
   перебивати інлайнові позиції кожного шару !important, а це вже
   переверстка, а не підключення того, що вціліло. */

.rev_slider_wrapper {
    min-height: 420px;
    display: block;
}

@media (max-width: 768px) {
    .rev_slider_wrapper {
        min-height: 260px;
    }
}

/* ---------- кнопки «Записаться» ----------
   В оригіналі це були <button>, які через власний js відкривали спливне
   вікно з формою. Ні js, ні попапа ми не переносимо, тож конвеєр робить
   з них звичайні посилання на форму заявки (/#a24-zayavka).

   Через це ламається оформлення: увесь css сайту описує саме `button`
   (.school-page-buttons>button тощо), а до <a> ці селектори не доходять.
   Повторюємо вигляд оригіналу — жовта #ffea00, текст #14121d, montserrat. */

.a24-cta {
    display: inline-block;
    box-sizing: border-box;
    height: 50px;
    line-height: 28px;
    padding: 11px 20px;
    min-width: 225px;
    text-align: center;
    font-family: montserrat, sans-serif;
    font-size: 23px;
    font-weight: 400;
    color: #14121d;
    background-color: #ffea00;
    border: none;
    border-radius: 3px;
    text-decoration: none;
    transition: .3s;
    cursor: pointer;
}

.a24-cta:hover,
.a24-cta:focus {
    background-color: #f5d800;
    color: #14121d;
    text-decoration: none;
}

/* У вузьких контейнерах (картки філій, розклад) кнопка на 225px розпирає
   верстку — там віддаємо їй ширину контейнера. */
.card-item .a24-cta,
.calendar-card-button .a24-cta,
.school-page-programs-item .a24-cta {
    min-width: 0;
    width: 100%;
    font-size: 18px;
}

@media (max-width: 600px) {
    .a24-cta {
        min-width: 0;
        width: 100%;
        font-size: 18px;
    }
}

/* ---------- картки «К вашим услугам» ----------
   Ані .our-team-item, ані .our-team-image не мають ЖОДНОГО правила в
   підключених таблицях: висоту картки тримала сама картинка. У Зої
   Ільїної мініатюра 200x200 в архів не потрапила, картинки нема — і
   картка стала на 200 px нижчою за сусідні, а підпис поїхав угору.
   Ряд із чотирьох розсипався.

   Тримаємо висоту незалежно від наявності фото. Саме фото — контент:
   клієнт поставить його в редакторі, і нічого не зсунеться. */

.our-team-image {
    min-height: 200px;
    display: block;
}

.our-team-image img {
    max-width: 100%;
    height: auto;
}

.our-team-item {
    min-height: 262px;
}

@media (max-width: 768px) {
    .our-team-item,
    .our-team-image {
        min-height: 0;
    }
}

/* ---------- колонки, які не закривали за собою обтікання ---------- */

.entry-content .row::after,
.entry-content .school-page-programs::after {
    content: "";
    display: table;
    clear: both;
}

/* ---------- секція «Фото наших студентов» без жодного фото ---------- */
/*
   На п'яти сторінках лишився заголовок над порожнечею. Це НЕ втрата при
   відновленні: у копії з архіву на цьому місці закоментований блок і
   записка розробника оригіналу — галереї там не було й на живому сайті.

   Ховаємо ЗА УМОВОЮ, а не назавжди: щойно всередині з'явиться хоч одна
   картинка, секція повернеться сама. Так правило не заважатиме, коли
   клієнт пришле фото студентів, і його не доведеться згадувати й знімати.

   Старий браузер без :has() правило просто проігнорує і покаже як раніше —
   тобто найгірший випадок дорівнює теперішньому стану.
*/

.students-gallery:not(:has(img)) {
    display: none;
}
/* ---------- картки «Что вы получаете»: рядки, а не колонки ---------- */
/*
   В оригіналі всередині картки був суцільний текст, розділений <br><br>:
   «Бензин <br><br> Прохождение медкомиссии <br><br> Книги (ПДР, билеты)».
   При імпорті wpautop перетворив кожен <br><br> на </p><p> — і три РЯДКИ
   стали трьома дітьми-блоками. А контейнер має display:flex у напрямку row,
   тож вони вишикувались колонками по 45 px і полізли одне на одне.
   На телефоні, де картка й так вузька, це видно найгірше.

   Лікуємо НАПРЯМКОМ, а не вмістом: так само полагодяться всі інші картки з
   такою ж структурою, і нічого не треба переписувати в базі. Картки, де
   текст суцільний, від цього не міняються — один елемент у колонці
   виглядає точно так само, як один елемент у рядку.
*/

.inclusive-section-item-text {
    flex-direction: column;
    align-items: stretch;
}

.inclusive-section-item-text > p {
    margin: 0 0 0.6em;
}

.inclusive-section-item-text > p:last-child {
    margin-bottom: 0;
}

/* Порожні абзаци — теж слід wpautop. Не видно, але лишають зайвий відступ. */
.inclusive-section-item-text > p:empty,
.inclusive-section-item > p:empty {
    display: none;
}
/* ---------- сторінка тільки світла: геть автотемну тему браузера ---------- */
/*
   Opera GX, Chrome і Edge вміють самі перефарбовувати сайт у темний, якщо в
   системі увімкнена темна тема. Роблять вони це грубо: інвертують кольори
   фону й тексту, але КАРТИНКИ не чіпають — і правильно, бо фото інвертувати
   не можна.

   Для цього сайту таке перефарбування смертельне. У секції з філіями фон
   заданий двома шарами: світлий колір і поверх нього світла фонова картинка
   bg-price.jpg знизу. Браузер інвертує колір і текст, картинку лишає як є —
   і чорний текст, ставши майже білим, зникає на світлій картинці. Іконки
   поруч видно, бо це png. Саме так це й виглядало в клієнта.

   only light — це не «просто світла тема», а явна відмова від автотемної:
   ключове слово only спеціально для цього й придумане. Сайт, у якого
   темної версії нема, мусить сказати про це вголос.

   Хто дивиться у звичайному режимі, різниці не побачить.
*/

:root {
    color-scheme: only light;
}