/*
Theme Name: Sober Child Theme
Theme URI: http://uix.store/sober/
Author: UIX Themes
Author URI: http://uix.store
Description: Sober is a fully responsive Premium WordPress Theme with a pixel perfect design and extensive functionality
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sober
Tags: one-column, two-columns, right-sidebar, custom-colors, custom-menu, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Template: sober
*/

/* ==========================================================================
   UA GRAPHIX: Глобальні налаштування шрифту Arial в темі
   ========================================================================== */

/* 1.1. Глобальні змінні теми (шрифтові CSS-змінні) */
:root {
    --body-font-family: Arial, Helvetica, sans-serif !important;
    --heading-font-family: Arial, Helvetica, sans-serif !important;
}

/* 1.2. Примусовий Arial для базового тексту, включаючи специфічні блоки Sober */
body, h1, h2, h3, h4, h5, h6, p, 
.entry-content, 
.elementor-text-editor,
.breadcrumbs, 
.breadcrumbs a, 
.breadcrumbs span,
.site-footer, 
.site-footer p, 
.site-footer a, 
.copyright,
.copyright p {
    font-family: Arial, Helvetica, sans-serif !important;
}

/* 1.3. Примусовий Arial для тексту в хлібних крихтах (Навігація) */
.breadcrumb, 
.woocommerce-breadcrumb, 
.breadcrumb a, 
.breadcrumb span, 
.woocommerce-breadcrumb a, 
.woocommerce-breadcrumb span {
    font-family: Arial, Helvetica, sans-serif !important;
}

/* 1.4. Примусовий Arial для кнопок, форм та полів введення */
button, 
input[type="button"], 
input[type="submit"], 
input[type="reset"], 
.button, 
.btn {
    font-family: Arial, Helvetica, sans-serif !important;
}

/* 1.5. Перевизначення шрифту головного та бокового меню на Arial */
.nav-menu > li > a, 
.side-menu .menu > li > a {
    font-family: Arial, sans-serif !important;
}


/* ==========================================================================
   UA GRAPHIX: Налаштування зовнішнього вигляду для шапки сайту (Header)
   ========================================================================== */

/* 2.1. БАЗОВИЙ СТАН: Прозоре скло з легким розмиттям та тінню */
#masthead.site-header {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(2.5px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.4s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* 2.2. СТАН HOVER: Скло стає щільнішим при наведенні курсору */
#masthead.site-header:hover {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.6) !important; 
}

/* 2.3. СТАН СКРОЛЛУ (HEADROOM): Фіксація шапки при гортанні сторінки вниз */
.site-header.headroom--pinned,
.site-header.is-sticky {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.6) !important;
}

/* ==========================================================================
   UA GRAPHIX: Комплексний стиль для скляного аккордеона (Блок "ПОСЛУГИ")
   ========================================================================== */

/* 1.1. Загальний контейнер кожної окремої вкладки аккордеона */
.sober-accordion .sober-accordion__item {
    background: rgba(255, 255, 255, 0.45) !important; /* Напівпрозорий молочний фон */
    -webkit-backdrop-filter: blur(12px) !important;   /* Розмиття фону для Safari */
    backdrop-filter: blur(12px) !important;           /* Розмиття фону для інших браузерів */
    border: 1px solid rgba(255, 255, 255, 0.5) !important; /* Тонка світла грань (ефект скла) */
    border-radius: 12px !important;                    /* Скруглення кутів плашок */
    margin-bottom: 15px !important;                    /* Відступ між вкладками */
    box-shadow: 0 8px 32px 0 rgba(34, 35, 44, 0.04) !important; /* М'яка тінь для об'єму */
    overflow: hidden !important;
    transition: all 0.3s ease !important;              /* Плавна анімація */
}

/* 1.2. Ефект легкого підсвічування при наведенні курсору на вкладку */
.sober-accordion .sober-accordion__item:hover {
    background: rgba(255, 255, 255, 0.55) !important; /* Стає трохи щільнішим */
    box-shadow: 0 2px 4px 0 rgba(34, 35, 44, 0.18) !important; /* Тінь стає глибшою */
}

/* 1.3. Шапка (заголовок) вкладки, на яку клікають */
.sober-accordion .sober-accordion__title {
    background: transparent !important;
    border: none !important;
    padding: 20px 45px !important;                     /* Внутрішні відступи заголовка */
}

/* 1.4. Стиль тексту всередині заголовка вкладки */
.sober-accordion .sober-accordion__title-text {
    color: #23232c !important;                         /* Колір тексту заголовка */
    font-weight: 600 !important;                       /* Напівжирне накреслення */
}

/* 1.5. Внутрішній блок з контентом (з повною білою каемкою) */
.sober-accordion .sober-accordion__content {
    background: rgba(255, 255, 255, 0.2) !important;  /* Додатковий підклад під контент */
    border-top: 1px solid rgba(255, 255, 255, 0.7) !important;    
    border-left: 1px solid rgba(255, 255, 255, 0.7) !important;   
    border-right: 1px solid rgba(255, 255, 255, 0.7) !important;  
    border-bottom: 1px solid rgba(255, 255, 255, 0.7) !important; 
    padding: 30px 40px !important;                     /* Внутрішні відступи контенту */
}


/* ==========================================================================
   UA GRAPHIX: Внутрішній контент аккордеона (Текст, заголовки та галерея)
   ========================================================================== */

/* 2.1. Заголовки всередині контенту (ЦИФРОВИЙ ДРУК) — Захист від накладання */
.sober-accordion .sober-accordion__content h3 {
    color: #57575c !important;
    font-size: 50px !important;                        
    font-weight: 700 !important;
    margin-bottom: 12px !important;
    letter-spacing: 0.5px !important;
    line-height: 1.1 !important;                       /* Зменшуємо інтервал, щоб рядки не наповзали один на одного */
    word-break: break-word !important;                 /* Примусове перенесення довгих слів */
    overflow-wrap: break-word !important;
}

/* 2.2. Основний текст (абзаци) */
.sober-accordion .sober-accordion__content p {
    color: #969696 !important;
    font-size: 15px !important;
    line-height: 1.8 !important;                       
    margin-bottom: 25px !important;                    
}

/* 2.3. Контейнер галереї зображень */
.sober-accordion .sober-accordion__content div[style*="display: flex"] {
    gap: 5px !important;
    margin-top: 25px !important;
    margin-bottom: 30px !important;
}

/* 2.4. Зображення у галереї */
.sober-accordion .sober-accordion__content img {
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(34,35,44,0.1) !important;
    transition: transform 0.3s ease !important;
}

/* 2.5. Ефект при наведенні на зображення */
.sober-accordion .sober-accordion__content img:hover {
    transform: scale(1.29) !important;                
}


/* ==========================================================================
   UA GRAPHIX: Темна скляна широкоформатна кнопка в аккордеоні
   ========================================================================== */

/* 3.1. Базовий стан темного скла (На всю ширину) */
.sober-accordion .sober-accordion__content a[href*="portfolio"] {
    display: block !important;                         
    position: relative !important;                     
    padding: 14px 0 !important;
    background: rgba(88, 88, 92, 0.75) !important;   
    -webkit-backdrop-filter: blur(5px) !important;   
    backdrop-filter: blur(10px) !important;           
    color: #ffffff !important;                         
    text-decoration: none !important;                  
    font-family: sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    text-align: center !important;
    
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 8px !important;
    
    box-shadow: 0 2px 2px rgba(34, 35, 44, 0.15) !important;
    transition: all 0.3s ease !important;
}

/* 3.2. Стан темного скла при наведенні курсору (Hover) */
.sober-accordion .sober-accordion__content a[href*="portfolio"]:hover {
    background: rgba(34, 35, 44, 0.95) !important;    
    border: 1px solid rgba(0, 0, 0, 0.4) !important;  
    transform: translateY(0px) !important;              
    box-shadow: 0 2px 2px rgba(34, 35, 44, 0.5) !important;
}

/* 3.3. Кастомна лінія підкреслення (Ідеально відцентрована, блочна кнопка) */
.sober-accordion .sober-accordion__content a[href*="portfolio"]::after {
    content: "" !important;
    position: absolute !important;
    
    left: 50% !important;
    bottom: 13px !important;                           
    
    width: 105px !important;                           
    height: 1.8px !important;                          
    background-color: rgba(255, 255, 255, 0.8) !important; 
    
    transform: translateX(-50%) scaleX(0) !important;  
    transform-origin: right center !important;          
    
    transition: transform 0.25s ease-in-out !important; 
}

/* 3.4. Активація лінії при наведенні на кнопку */
.sober-accordion .sober-accordion__content a[href*="portfolio"]:hover::after {
    transform: translateX(-50%) scaleX(1) !important;                   
    transform-origin: left center !important;                 
}


/* ==========================================================================
   4. АДАПТИВНІСТЬ: Окремі правила для мобільних пристроїв
   ========================================================================== */

/* 4.1. Спрацьовує тільки на екранах смартфонів (ширина менше 768px) */
@media screen and (max-width: 767px) {
    .sober-accordion .sober-accordion__content h3 {
        font-size: 28px !important;                    /* Акуратний розмір для телефонів */
        line-height: 1.2 !important;                   /* Компактна відстань між рядками, щоб заголовок не розлітався */
        margin-bottom: 15px !important;
    }
    
    /* Опціонально: трохи зменшуємо внутрішні поля контенту на телефонах, щоб звільнити місце */
    .sober-accordion .sober-accordion__content {
        padding: 20px 20px !important;
    }
}

/* ==========================================================================
   UA GRAPHIX: Стилі для вкладки "ОПТИЧНИЙ ПЛОТТЕРНИЙ РІЗ" (Вкладка №2)
   ========================================================================== */

/* 1.1. Налаштування підзаголовків H4 — Захист від накладання в режимі ПК */
.sober-accordion #sober-tab-content-2392 .cutting-type-block h4 {
    color: #57575c !important;
    font-size: 50px !important;                        
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 12px !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;                       /* Компактний інтервал для великих літер */
    word-break: break-word !important;                 /* Запобігає вильоту довгих слів за край */
    overflow-wrap: break-word !important;
}

/* 1.2. Опис підзаголовків (Текст у дужках) */
.sober-accordion #sober-tab-content-2392 .cutting-type-block h4 span {
    color: #969696 !important;                         /* М'який сірий колір */
    font-size: 14px !important;                        /* Акуратний базовий розмір */
    font-weight: 400 !important;                       /* Звичайне накреслення */
    letter-spacing: normal !important;
}

/* 1.3. Основний текст абзаців */
.sober-accordion #sober-tab-content-2392 .cutting-type-block p {
    color: #969696 !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    margin-bottom: 0 !important;                       
}


/* ==========================================================================
   2. КНОПКА "ДЕТАЛЬНІШЕ" (Для кастомного класу .accordion-more-btn)
   ========================================================================== */

/* 2.1. Базовий стан темного скла (На всю ширину) */
.sober-accordion #sober-tab-content-2392 .accordion-more-btn {
    display: block !important;                         
    position: relative !important;                     
    padding: 14px 0 !important;
    background: rgba(88, 88, 92, 0.75) !important;     
    -webkit-backdrop-filter: blur(5px) !important;     
    backdrop-filter: blur(10px) !important;             
    color: #ffffff !important;                         
    text-decoration: none !important;                  
    font-family: sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    text-align: center !important;
    
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 2px rgba(34, 35, 44, 0.15) !important;
    transition: all 0.3s ease !important;
}

/* 2.2. Стан при наведенні курсору (Hover) */
.sober-accordion #sober-tab-content-2392 .accordion-more-btn:hover {
    background: rgba(34, 35, 44, 0.95) !important;      
    border: 1px solid rgba(0, 0, 0, 0.4) !important;    
    box-shadow: 0 2px 2px rgba(34, 35, 44, 0.5) !important;
    transform: translateY(0px) !important;
}

/* 2.3. Кастомна анімована лінія (Ідеально по центру слова ДЕТАЛЬНІШЕ) */
.sober-accordion #sober-tab-content-2392 .accordion-more-btn::after {
    content: "" !important;
    position: absolute !important;
    
    left: 50% !important;
    bottom: 13px !important;                           
    
    width: 105px !important;                           
    height: 1.8px !important;                          
    background-color: rgba(255, 255, 255, 0.8) !important; 
    
    transform: translateX(-50%) scaleX(0) !important;  
    transform-origin: right center !important;          
    transition: transform 0.25s ease-in-out !important; 
}

/* 2.4. Активація лінії при наведенні */
.sober-accordion #sober-tab-content-2392 .accordion-more-btn:hover::after {
    transform: translateX(-50%) scaleX(1) !important;                   
    transform-origin: left center !important;                 
}


/* ==========================================================================
   3. АДАПТИВНІСТЬ: Окремі правила для мобільних пристроїв
   ========================================================================== */

@media screen and (max-width: 767px) {
    /* 3.1. Зменшуємо гігантські H4 на смартфонах, щоб текст не розлітався */
    .sober-accordion #sober-tab-content-2392 .cutting-type-block h4 {
        font-size: 28px !important;                    /* Акуратний розмір для телефонів, як у ДРУК */
        line-height: 1.2 !important;
        margin-bottom: 15px !important;
    }
}