/*
Theme Name:   Understrap Child - Марифат
Description:  с 4 темами через CSS-переменные
Template:     understrap
Version:      3.0.0
Разработка: shiacode@mail.ru
*/

@import url("../understrap/style.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Averia+Serif+Libre:wght@400;700&display=swap');

/* ==========================================================================
   🎨 ПЕРЕМЕННЫЕ ТЕМ — УПРАВЛЕНИЕ ЦВЕТАМИ
   ========================================================================== */

/* ===== ТЕХНИЧЕСКИЕ ПЕРЕМЕННЫЕ (общие для всех тем) ===== */
:root {
    --banner-height: 140px;
    --font-base: 1rem;
    --radius: 0.625rem;
    --edge-padding: clamp(12px, 2vw, 20px);
    --header-height: 80px;
    --wrapper-padding: clamp(16px, 3vw, 40px);
    --submenu-bg: rgba(0, 0, 0, 0.2);
    --submenu-open-bg: rgba(0, 0, 0, 0.3);
    --menu-title-color: white;
    --menu-close-color: white;
    --menu-divider-color: white;    
    --search-text-color: white;
    --search-close-color: white;    
    --search-placeholder-color: rgba(255,255,255,0.7);    
    --menu-active-dot: #D9D9D9;
    --tts-time-color: var(--text-primary);
}

/* ===== 🌿 NEUTRAL ТЕМА (по умолчанию) ===== */
:root,
html:not([data-theme]),
html[data-theme="neutral"] {
    /* Фоновое изображение */
    --bg-image: url('images/neutral-bg.png');

    /* Логотип */
    --site-logo: url('images/logoneutral.svg');

    /* Основные фоны */
    --bg-main: #F8FAF5;
    --bg-body: #FFFFFF;

    /* Карточки */
    --card-bg: linear-gradient(239.63deg, #FFFFFF 0%, #E8F5E3 94.68%);
    --card-border: 1px solid rgba(74, 124, 41, 0.2);
    --card-shadow: 0 8px 24px rgba(0,0,0,0.12);
    --card-shadow-hover: 0 20px 40px rgba(0,0,0,0.25);

    /* Текст */
    --text-primary: #1A3D0F;
    --text-heading: #2D5016;
    --text-secondary: #5A7A4A;
    --text-light: rgba(26, 61, 15, 0.8);

    /* Акценты */
    --color-primary: #4A7C29;
    --color-secondary: #5E9C36;
    --color-link: #4A7C29;
    --color-link-hover: #5E9C36;

    /* Хедер и Футер */
    --header-bg: rgba(248, 250, 245, 0.92);
    --header-text-color: #2D5016;
    --header-icon-color: #2D5016;
    --footer-icon-filter: none;

    /* Баннер */
    --banner-bg: linear-gradient(135deg, #6FA851 0%, #4A7C29 100%);
    --banner-text: #ffffff;

    /* Рубрики */
    --rubric1-bg: linear-gradient(135deg, #4A7C29 0%, #3A6321 100%);
    --rubric1-text: #ffffff;
    --rubric1-border: none;

    --rubric2-bg: transparent;
    --rubric2-text: #4A7C29;
    --rubric2-border: none;
    --rubric-active-text: #ffffff; 


    /* Бургер меню */
    --menu-bg: linear-gradient(180deg, #7AB55C 0%, #4A7C29 100%);
    --menu-text: #ffffff;
    --menu-active: #4A7C29;
    --menu-hover: rgba(255, 255, 255, 0.1);
    --menu-border: rgba(255, 255, 255, 0.3);
    --menu-active-dot: #C8E6C9;

    /* Контент страниц */
    --content-bg: rgba(255, 255, 255, 0.98);
    --article-bg: rgba(255, 255, 255, 0.98);
    --content-text: #1A3D0F;
    --content-heading: #2D5016;
    --category-title-color: #1a1a1a;

    /* Цитаты и код */
    --blockquote-bg: rgba(74, 124, 41, 0.05);
    --blockquote-border: #4A7C29;
    --code-bg: #f5f5f5;
    --code-text: #d63384;

    /* Пагинация */
    --pagination-bg: rgba(255, 255, 255, 0.9);
    --pagination-border: rgba(74, 124, 41, 0.3);
    --pagination-text: #4A7C29;
    --pagination-active-bg: linear-gradient(135deg, #4A7C29, #5E9C36);

    /* Кнопки */
    --button-shadow: 0 4px 12px rgba(74, 124, 41, 0.3);

    /* SVG иконки категорий */
    --icon-aqida: url('images/neutral/aqida.svg');
    --icon-ahlaq: url('images/neutral/ahlaq.svg');
    --icon-prayer: url('images/neutral/prayer.svg');
    --icon-mosque: url('images/neutral/mosque.svg');
    --button-border: 1px solid rgba(74, 124, 41, 0.4);
    --button-border-hover: rgba(255, 255, 255, 0.3);
}

/* ===== BRUTAL ТЕМА  ===== */
html[data-theme="brutal"] {
    --bg-image: url('images/brutal-bg.png');
    --site-logo: url('images/logowhite.svg');

    /* ОСВЕТЛЁННЫЕ ФОНЫ */
    --bg-main: #7797b3;              
    --bg-body: #7797b3;

    --card-bg: linear-gradient(239.63deg, #FFFFFF 0%, #D9F7FF 94.68%); 
    --card-border: 1px solid rgba(100, 181, 246, 0.2);  
    --card-shadow: 0 8px 24px rgba(0, 111, 188, 0.2);
    --card-shadow-hover: 0 20px 40px rgba(0, 111, 188, 0.4);

    --text-primary: #f8fafc;
    --text-heading: #1a2332;
    --text-secondary: #A6B5D3;       
    --text-light: rgba(248,250,252,0.8);

    --color-primary: #64b5f6;        
    --color-secondary: #90caf9;
    --color-link: #64b5f6;
    --color-link-hover: #90caf9;

    --header-bg: rgba(26, 35, 50, 0.95);
    --header-text-color: #ffffff;
    --header-icon-color: #ffffff;
    --footer-icon-filter: brightness(0) invert(1);

    --banner-bg: linear-gradient(135deg, #006FBC 0%, #006FBC 100%); 
    --banner-text: #ffffff;

    --rubric1-bg: #006FBC;
    --rubric1-text: #ffffff;
    --rubric1-border: none;

    --rubric2-bg: transparent;
    --rubric2-text: #006FBC;
    --rubric2-border: none;
    --rubric-active-text: #ffffff; 

    --menu-bg: linear-gradient(180deg, #5481C4 0%, #283E5E 100%);
    --menu-text: #ffffff;
    --menu-active: #64b5f6;
    --menu-hover: rgba(100, 181, 246, 0.1);
    --menu-border: rgba(100, 181, 246, 0.3);
    --menu-active-dot: #A8C7E6;

    --content-bg: linear-gradient(239.63deg, #FFFFFF 0%, #D9F7FF 94.68%);  
    --article-bg: #f1fcff;
    --content-text: #000000;
    --content-heading: #000000;
    --category-title-color: #f0f2ff;

    --blockquote-bg: rgba(100, 181, 246, 0.1);
    --blockquote-border: #64b5f6;
    --code-bg: #1a2d45;
    --code-text: #90caf9;

    --pagination-bg: rgba(36, 52, 71, 0.9);
    --pagination-border: rgba(100, 181, 246, 0.3);
    --pagination-text: #ffffff;
    --pagination-active-bg: linear-gradient(135deg, #1e3a5f, #2d5a8c);

    --button-shadow: 0 4px 12px rgba(100, 181, 246, 0.3);

    --icon-aqida: url('images/brutal/aqida.svg');
    --icon-ahlaq: url('images/brutal/ahlaq.svg');
    --icon-prayer: url('images/brutal/prayer.svg');
    --icon-mosque: url('images/brutal/mosque.svg');
    --button-border: 1px solid #006FBC;
        --button-border-hover: rgba(255, 255, 255, 0.3);
}

/* ===== 🌸 PINK ТЕМА ===== */
html[data-theme="pink"] {
        --bg-image: url('images/pink-bg.png');
    

    /* Логотип */
    --site-logo: url('images/logopink.svg');

    --bg-main: linear-gradient(135deg, #FDF2F8 0%, #FCE7F3 100%);
    --bg-body: #FFF0F5;

    --card-bg: linear-gradient(239.63deg, #FFF5F7 0%, #FFF0F3 94.68%);
    --card-border: 1px solid rgba(217, 26, 122, 0.3);
    --card-shadow: 0 8px 24px rgba(217, 26, 122, 0.15);
    --card-shadow-hover: 0 20px 40px rgba(217, 26, 122, 0.3);

    --text-primary: #FFFFFF;
    --text-heading: #D91A7A;
    --text-secondary: #D91A7A;
    --text-light: rgba(74, 17, 51, 0.8);

    --color-primary: #D91A7A;
    --color-secondary: #FF4DA6;
    --color-link: #FF4DA6;
    --color-link-hover: #D91A7A;

    --header-bg: rgba(255, 240, 245, 0.92);
    --header-text-color: #D91A7A;
    --header-icon-color: #D91A7A;
    --footer-icon-filter: none;

    --banner-bg: #B01563;
    

    --banner-text: #ffffff;

    --rubric1-bg: #B01563;
    --rubric1-text: #ffffff;
    --rubric1-border: none;

    --rubric2-bg: transparent;
    --rubric2-text: #D91A7A;
    --rubric2-border: none;
    --rubric-active-text: #ffffff; 


  --menu-bg: linear-gradient(180deg, #F0CDE2 0%, #F6E4EF 100%) !important;
  --menu-text: #6B0A51; 
  --menu-active: #CF7CA5;
  --menu-hover: rgba(176, 21, 99, 0.15);
  --menu-border: rgba(176, 21, 99, 0.2);
  --menu-overlay-bg: rgba(240, 205, 226, 0.6) !important;
  --submenu-bg: rgba(240, 205, 226, 0.3);
  --submenu-open-bg: rgba(214, 137, 183, 0.4) !important;
  --menu-title-color: #5b2c5b;
  --menu-close-color: #5b2c5b;
  --menu-divider-color: rgba(91, 44, 91, 0.6);
  --menu-active-dot: #8C225F;
  
    --search-text-color: #5b2c5b;
    --search-close-color: #5b2c5b;
    --search-placeholder-color: rgba(91, 44, 91, 0.7);

    --content-bg: linear-gradient(239.63deg, #FFF5F7 0%, #FFF0F3 94.68%);
    --article-bg: linear-gradient(239.63deg, #FFF5F7 0%, #FFF0F3 94.68%);
    --content-text: #4A1133;
    --content-heading: #6B0A51;
    --category-title-color: #6B0A51;

    --blockquote-bg: rgba(217, 26, 122, 0.05);
    --blockquote-border: #D91A7A;
    --code-bg: #FFE4E9;
    --code-text: #B01563;

    --pagination-bg: rgba(255, 228, 233, 0.9);
    --pagination-border: rgba(217, 26, 122, 0.5);
    --pagination-text: #D91A7A;
    --pagination-active-bg: linear-gradient(135deg, #D91A7A, #FF4DA6);

    --button-shadow: 0 4px 12px rgba(217, 26, 122, 0.3);

    --icon-aqida: url('images/pink/aqida.svg');
    --icon-ahlaq: url('images/pink/ahlaq.svg');
    --icon-prayer: url('images/pink/prayer.svg');
    --icon-mosque: url('images/pink/mosque.svg');
    --icon-filter-pink: brightness(1.1) saturate(1.2);
    --button-border: 1px solid rgba(217, 26, 122, 0.4);
    --button-border-hover: rgba(255, 255, 255, 0.3);
    
    --tts-time-color: #5b2c5b;
}

/* ===== 🌙 NIGHT ТЕМА ===== */
html[data-theme="night"] {
    --bg-image: url('images/night-bg.png');

    /* Логотип */
    --site-logo: url('images/logonight.svg');

    --bg-main: #0f172a;
    --bg-body: #0f172a;

    --card-bg: linear-gradient(239.63deg, #1e293b 0%, #334155 94.68%);
    --card-border: 1px solid rgba(56, 189, 248, 0.2);
    --card-shadow: 0 8px 24px rgba(0,0,0,0.3);
    --card-shadow-hover: 0 20px 40px rgba(0,0,0,0.5);

    --text-primary: #f1f5f9;
    --text-heading: #ffffff;
    --text-secondary: #94a3b8;
    --text-light: rgba(241, 245, 249, 0.8);

    --color-primary: #38bdf8;
    --color-secondary: #0ea5e9;
    --color-link: #38bdf8;
    --color-link-hover: #0ea5e9;

    --header-bg: rgba(15,23,42,0.95);
    --header-text-color: #ffffff;
    --header-icon-color: #ffffff;
    --footer-icon-filter: brightness(0) invert(1);

    --banner-bg: linear-gradient(135deg, #38bdf8 0%, #0369a1 100%);
    --banner-text: #ffffff;

    --rubric1-bg: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
    --rubric1-text: #ffffff;
    --rubric1-border: none;

    --rubric2-bg: transparent;
    --rubric2-text: #38bdf8;
    --rubric2-border: none;


    --menu-bg: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    --menu-text: #ffffff;
    --menu-active: #0369a1;
    --menu-hover: rgba(255, 255, 255, 0.1);
    --menu-border: rgba(255, 255, 255, 0.3);

    --content-bg: rgba(30, 41, 59, 0.98);
    --article-bg: rgba(30, 41, 59, 0.98);
    --content-text: #f1f5f9;
    --content-heading: #ffffff;
    --category-title-color: #ffffff;

    --blockquote-bg: rgba(56, 189, 248, 0.1);
    --blockquote-border: #38bdf8;
    --code-bg: #1e293b;
    --code-text: #38bdf8;

    --pagination-bg: rgba(30, 41, 59, 0.9);
    --pagination-border: rgba(56, 189, 248, 0.3);
    --pagination-text: #38bdf8;
    --pagination-active-bg: linear-gradient(135deg, #38bdf8, #0ea5e9);

    --button-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);

    --icon-aqida: url('images/night/aqida.svg');
    --icon-ahlaq: url('images/night/ahlaq.svg');
    --icon-prayer: url('images/night/prayer.svg');
    --icon-mosque: url('images/night/mosque.svg');
    --button-border: 1px solid rgba(56, 189, 248, 0.4);
    --button-border-hover: rgba(255, 255, 255, 0.3);
}

/* ========================================
    СТИЛИ ЛОГОТИПА
   ======================================== */

/* Логотип в header */
.marifat-logo .logo-img {
    display: inline-block;
    width: 48px;
    height: 48px;
    background-image: var(--site-logo);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

.marifat-logo .logo-link {
    display: inline-block;
    line-height: 0;
}

/* Логотип в footer */
.footer-logo-img {
    display: inline-block;
    width: 48px;
    height: 48px;
    background-image: var(--site-logo);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.footer-logo-link {
    display: inline-block;
    line-height: 0;
}


/* ==========================================================================
    ПРИМЕНЕНИЕ ФОНОВЫХ ИЗОБРАЖЕНИЙ
   ========================================================================== */

body {
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.marifat-main-header {
    background-image: var(--bg-image) !important;
    background-size: cover !important;
    background-position: center top !important;
    background-attachment: scroll !important;
}


/* ==========================================================================
   📐 БАЗОВЫЕ СТИЛИ И RESET
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif !important;
    font-size: var(--font-base) !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    color: var(--text-primary) !important;
    min-height: 100vh !important;
    margin: 0 !important;
    overflow-x: hidden !important;
}

/* ==========================================================================
    ХЕДЕР
   ========================================================================== */

.marifat-main-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    height: var(--header-height);
}

.marifat-header-row {
    margin: 0 auto;
    padding: 0 var(--edge-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    position: relative;
}

/* === БУРГЕР === */
.marifat-menu-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5px !important;
    align-items: center !important;
    width: 48px !important;
    height: 48px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 1001;
    order: -1;
}

.marifat-menu-toggle span {
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    background: var(--header-icon-color) !important;
    border-radius: 2px !important;
    margin: 0 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.marifat-menu-toggle.active {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* === ЛОГО + МАРИФАТ.РУ === */
.marifat-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    flex-shrink: 0;
    z-index: 5;
}

.logo-img {
    height: 48px !important;
    width: auto;
    max-height: 60px;
    object-fit: contain;
    border: none !important;
    border-radius: 8px 0 0 8px;
    box-shadow: none !important;
    transition: all 0.3s ease;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0;
}

.logo-img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.marifat-title {
    margin: 0 !important;
    padding-left: 0 !important;
}

.site-title-link {
    text-decoration: none !important;
    color: inherit;
    display: block;
}

.marifat-title h1 {
    font-family: 'Averia Serif Libre', serif !important;
    font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
    font-weight: 700 !important;
    color: var(--header-text-color) !important;
    margin: 0 !important;
    padding: 0.125rem 0.25rem 0.125rem 0 !important;
    border-radius: 0 8px 8px 0 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: none !important;
    text-transform: uppercase !important;
}

.marifat-title h1:hover,
.site-title-link:hover {
    background: none !important;
    transform: none !important;
    box-shadow: none !important;
}

/* === ИКОНКА ПОИСКА === */
.marifat-search-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    cursor: pointer;
    color: var(--header-icon-color) !important;
    flex-shrink: 0;
    order: 1;
}

.marifat-search-toggle svg {
    width: 24px !important;
    height: 24px !important;
    transition: all 0.3s ease;
    stroke: var(--header-icon-color) !important;
    fill: none !important;
}

.marifat-search-toggle:hover svg {
    transform: scale(1.1);
}






/* === АДАПТИВ ХЕДЕРА === */
@media (max-width: 400px) {
    .logo-img {
        height: 36px !important;
    }

    .marifat-title h1 {
        font-size: clamp(1.25rem, 4vw, 1.75rem) !important;
    }
}

@media (max-width: 320px) {
    .marifat-title {
        display: none !important;
    }
}

/* ==========================================================================
   БУРГЕР МЕНЮ
   ========================================================================== */

.marifat-menu-list {
    display: block;
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    max-width: clamp(280px, 85vw, 380px);
    height: 100vh;
    background: var(--menu-bg);
    opacity: 0.96;
    z-index: 1000;
    overflow-y: auto !important;
max-height: 100vh !important;
-webkit-overflow-scrolling: touch !important;
    overflow-y: auto;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 0;
    margin: 0;
    list-style: none;
   
}

.marifat-menu-list.active {
    
    left: 0;
     z-index: 1003;
}

/* Overlay */
.menu-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--menu-overlay-bg, rgba(0, 0, 0, 0.5));
    z-index: 999;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Шапка меню */
.menu-header {
    display: flex;
    align-items: center;
    height: var(--header-height);
    padding: 0 var(--edge-padding);
    border-bottom: 1px solid var(--menu-border);
    position: relative;
}

.menu-close {
    width: 48px;
    height: 48px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

.menu-close::before,
.menu-close::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    background: var(--menu-close-color);
    top: 50%;
    left: 50%;
}

.menu-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.menu-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.menu-header-divider {
    width: 1px;
    height: 46px;
    background: var(--menu-divider-color);
    margin: 0 24px 0 20px;
}

.menu-header-title {
    font-family: 'Work Sans', 'Inter', sans-serif;
    font-size: clamp(14px, 2.5vw, 16px);
    font-weight: 400;
    color: var(--menu-title-color);
    margin: 0;
}

/* Пункты меню */
.marifat-menu-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    
}

.menu-item {
    border-bottom: 1px solid var(--menu-border);
    position: relative;
}

.menu-item > a,
.menu-item > button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: clamp(52px, 8vw, 64px);
    padding: 0 clamp(16px, 4vw, 24px);
    background: transparent;
    border: none;
    font-family: 'Work Sans', 'Inter', sans-serif;
    font-size: clamp(14px, 2.5vw, 16px);
    font-weight: 400;
    color: var(--menu-text) !important;
    text-decoration: none !important;
    text-align: left;
    cursor: pointer;
    transition: background 0.3s ease;
    position: relative;
    text-transform: uppercase !important;
}

.menu-item > a:hover,
.menu-item > button:hover {
    background: var(--menu-hover);
}

/* Маркер текущей страницы */
.menu-item.current-menu-item > a::before,
.menu-item.current-page-ancestor > a::before,
.menu-item.current-menu-item > button::before {
    content: '';
    position: absolute;
    left: clamp(20px, 4vw, 27px);
    width: clamp(8px, 1.5vw, 10px);
    height: clamp(8px, 1.5vw, 10px);
    border-radius: 50%;
    background: var(--menu-active-dot);
}

.menu-item.current-menu-item > a,
.menu-item.current-page-ancestor > a,
.menu-item.current-menu-item > button {
    padding-left: clamp(40px, 8vw, 50px);
}

/* Стрелка раскрытия */
.menu-toggle-icon {
    display: inline-block;
    width: clamp(6px, 1.2vw, 8px);
    height: clamp(6px, 1.2vw, 8px);
    margin-left: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.3s ease;
    pointer-events: none;
}

.menu-item.open > button .menu-toggle-icon {
    transform: rotate(45deg);
}

/* Активный пункт */
.menu-item.open > button,
.menu-item.current-menu-item > a,
.menu-item.current-menu-item > button {
    background: var(--menu-active);
}

/* Подменю */
.sub-menu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--submenu-bg) !important;
}

.menu-item.open > .sub-menu {
    display: block !important;
    max-height: 1000px;
    animation: slideDown 0.3s ease;
    background: var(--submenu-open-bg) !important;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sub-menu .menu-item > a {
    padding-left: clamp(40px, 8vw, 50px);
    height: clamp(52px, 8vw, 64px);
    display: flex;
    align-items: center;
    color: var(--menu-text) !important;
    text-decoration: none !important;
    background: transparent;
    transition: background 0.3s ease;
    text-transform: uppercase !important;
    font-size: clamp(13px, 2.3vw, 15px);
}

.sub-menu .menu-item > a:hover {
    background: var(--menu-hover);
}

/* ==========================================================================
   ПОИСКОВАЯ ПАНЕЛЬ — СТИЛЬ МЕНЮ
   ========================================================================== */

.marifat-search-panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: clamp(280px, 85vw, 380px); 
    height: 100vh;
    background: var(--menu-bg); 
    opacity: 0.96; 
    z-index: 1002;
    padding: clamp(2rem, 4vw, 3rem) clamp(16px, 4vw, 24px); 
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
    -webkit-overflow-scrolling: touch !important;
}

.marifat-search-panel.active {
    right: 0;
    z-index: 1004;
}

.search-form {
    position: relative;
    width: 100%;
}

.search-box {
    width: 100%;
    padding: clamp(12px, 2vw, 16px) clamp(48px, 8vw, 64px) clamp(12px, 2vw, 16px) clamp(16px, 4vw, 24px);
    border: 1px solid rgba(255,255,255,0.2); 
    border-radius: clamp(12px, 2vw, 16px); 
    font-family: 'Work Sans', 'Inter', sans-serif;
    font-size: clamp(14px, 2.5vw, 16px); 
    font-weight: 400;
    background: rgba(255,255,255,0.1); 
    color: var(--search-text-color) !important;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.search-box::placeholder {
    color: var(--search-placeholder-color) !important;
    opacity: 1;
}

.search-box:focus {
    outline: none;
    border-color: rgba(255,255,255,0.4);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.1);
}

.search-close {
    position: absolute;
    right: clamp(12px, 2vw, 16px);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    width: clamp(40px, 6vw, 48px);
    height: clamp(40px, 6vw, 48px);
    border-radius: 50%;
    color: var(--search-close-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.3s ease;
}

.search-close:hover {
    background: rgba(255,255,255,0.2);
    transform: translateY(-50%) scale(1.1);
}




/* 🔄 ВЗАИМОИСКЛЮЧЕНИЕ ШТОРКИ */

/* 1. Меню открыто → Поиск закрыть */
.marifat-menu-list.active ~ .marifat-search-panel,
body.menu-open .marifat-search-panel {
    right: -100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 2. Поиск открыт → Меню закрыть  */
.marifat-search-panel.active ~ .marifat-menu-list,
body.search-open .marifat-menu-list {
    left: -100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
}



/* ==========================================================================
    БАННЕРЫ
   ========================================================================== */

.marifat-banner {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: 100vw;

    background: var(--banner-bg) !important;
    color: var(--banner-text) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(0.6875rem, 3vw, 1.125rem) !important;

    font-weight: 400 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: center !important;

    padding: clamp(0.75rem, 2vw, 1rem) 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    z-index: 10;
    box-sizing: border-box !important;
}

.marifat-banner-inner {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: 100vw;
    margin-bottom: 0 !important;
}

.marifat-banner-inner:first-child {
    margin-top: 0;
}

@media (max-width: 768px) {
    .marifat-banner,
    .marifat-banner-inner {
        border-radius: 0 !important;


        margin-right: -100vw !important;
        padding-right: 0 !important;
        right: 0 !important;

        /* iPhone safe-area */
        padding-left: env(safe-area-inset-left) !important;
        padding-right: env(safe-area-inset-right) !important;
    }
}

/* ==========================================================================
   GRID КАТЕГОРИЙ - 4x4 → 2x2
   ========================================================================== */

.marifat-main {
    min-height: 100vh;
    padding: 0;
    margin: 0 auto;
    max-width: 1400px;
}

.marifat-content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px;  /* вернули базовый 12px */
    transition: padding 0.3s ease;
    overflow-x: visible !important;
}

/* Убираем верхний паддинг только на главной (где есть grid) */
.home .marifat-content-wrapper {
    padding-top: 0;
}


.marifat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 12px 0;
    max-width: none;
    width: 100%;
    margin: 0;
}

.marifat-grid .image-item {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    padding: 2px;
}

.marifat-grid .image-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

.marifat-grid .card-image-wrapper {
    padding: 8px;
   
}

/* === SVG ИКОНКИ КАТЕГОРИЙ ЧЕРЕЗ ПЕРЕМЕННЫЕ === */
.marifat-grid a[href*="verouchenie"] {
    display: block;
    width: 100%;
    height: 100%;

    background-image: var(--icon-aqida);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.marifat-grid a[href*="nravstvennost"] {
    display: block;
    width: 100%;
    height: 100%;

    background-image: var(--icon-ahlaq);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.marifat-grid a[href*="praktika"] {
    display: block;
    width: 100%;
    height: 100%;

    background-image: var(--icon-prayer);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.marifat-grid a[href*="istoriya"] {
    display: block;
    width: 100%;
    height: 100%;

    background-image: var(--icon-mosque);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Wrapper занимает место */
.marifat-grid .card-image-wrapper {
    display: block;
    width: 100%;
    min-height: 100px;
}

/* Скрываем <img> внутри, т.к. используем background */
.marifat-grid .card-image-wrapper img {
    display: none;
}

.marifat-grid .section-title {
    padding: 4px 8px 4px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(12px, 1.8vw, 16px);
    color: var(--text-heading);
    margin: 0;
}


@media (max-width: 768px) {
    .marifat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}



/* ==========================================================================
   КАРТОЧКИ СТАТЕЙ
   ========================================================================== */


.marifat-articles {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 2vw, 1rem);
    padding: clamp(1rem, 1vw, 2rem) 0;
    max-width: none;
    margin: 0;
}

.marifat-article {
    width: 100%;
    max-width: none;
    min-height: clamp(120px, 22vw, 180px);
    height: auto;

    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--radius);

    padding: clamp(16px, 3.5vw, 24px);
    display: flex;
    flex-direction: row;
    gap: clamp(20px, 4.5vw, 32px);
    align-items: stretch;

    box-shadow: var(--card-shadow);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.marifat-article:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: var(--card-shadow-hover);
}

.marifat-article-photo {
    width: clamp(130px, 20vw, 200px);
    height: clamp(90px, 15vw, 135px);
    flex-shrink: 0;
    border-radius: clamp(4px, 1vw, 8px);
    overflow: hidden;
    background: var(--rubric1-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: white;
    margin: 0;
}

.marifat-article-photo img,
.marifat-article-photo a img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

.marifat-article-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
   
}

.marifat-article-content-top {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.375rem, 1vw, 0.5rem);
    margin: 0;
    align-self: flex-start;
}

/* Рубрика 1 (залитая) */
.marifat-article-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rubric1-bg);
    color: var(--rubric1-text) !important;
    padding: clamp(0.1875rem, 0.5vw, 0.25rem) clamp(0.5rem, 1.5vw, 0.75rem);
    border-radius: clamp(0.1875rem, 0.5vw, 0.25rem);
    font-size: clamp(0.5625rem, 1.5vw, 0.75rem);
    font-weight: 500;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.marifat-article-tag:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: var(--button-shadow);
    color: var(--rubric1-text) !important;
    text-decoration: none !important;
}

/* Рубрика 2 (с рамкой) */
.marifat-article-section {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rubric2-bg) !important;
    border: var(--rubric2-border) !important;
    color: var(--rubric2-text) !important;
    padding: clamp(0.1875rem, 0.5vw, 0.25rem) clamp(0.5rem, 1.5vw, 0.75rem);
    border-radius: clamp(0.1875rem, 0.5vw, 0.25rem);
    font-size: clamp(0.5625rem, 1.5vw, 0.75rem);
    font-weight: 500;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.marifat-article-section:hover {
    background: var(--rubric2-text) !important;
    color: var(--rubric1-text) !important;
    border-color: var(--rubric2-text) !important;
    transform: translateY(-2px);
    box-shadow: var(--button-shadow);
}

.marifat-article-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(0.875rem, 2vw, 1.125rem);
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-heading);
    margin: clamp(0.5rem, 1.5vw, 0.75rem) 0;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.marifat-article-title a {
    color: inherit;
    text-decoration: none;
}

.marifat-article-title a:hover {
    color: var(--color-link-hover);
}

.marifat-article-date {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(0.6875rem, 1.5vw, 0.875rem);
    color: var(--text-secondary);
    margin: 0;
    white-space: nowrap;
    align-self: flex-end;
}

/* Мобильные */
@media (max-width: 768px) {
    
    .marifat-articles {
        gap: 0 !important;
        
        
        margin-left: calc(-1 * clamp(16px, 3vw, 24px)) !important;
        margin-right: calc(-1 * clamp(16px, 3vw, 24px)) !important;
    }
    
        .home .marifat-articles {
        padding-top: 0 !important;
    }

    
    .marifat-article {
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
    }

    
    .marifat-articles > .marifat-article:first-child {
        border-top: none !important;
        padding: clamp(14px, 4vw, 18px) !important;
    }

   
    .marifat-article + .marifat-article {
        border-top: 1px solid rgba(0,0,0,0.08) !important;
        margin-top: 0 !important;
        padding: clamp(16px, 4.5vw, 20px) clamp(14px, 4vw, 18px) !important;
    }

    
    .marifat-article-photo,
    .marifat-article-tag,
    .marifat-article-section {
        border-radius: 0 !important;
    }
}



/* ==========================================================================
   ФУТЕР
   ========================================================================== */

footer.marifat-footer {
    background: transparent !important;
    color: var(--text-primary) !important;
    text-align: center !important;
    
   
    box-shadow: none !important;
}

footer.marifat-footer .footer-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
}

footer.marifat-footer .footer-logo-group {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(0.5rem, 1.5vw, 0.75rem) !important;
    margin-bottom: clamp(0.5rem, 1vw, 0.75rem) !important;
}

footer.marifat-footer .footer-logo-img {
    display: inline-block !important;
    width: clamp(1.75rem, 4vw, 2.5rem) !important;
    height: clamp(1.75rem, 4vw, 2.5rem) !important;
    background-image: var(--site-logo) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border-radius: 8px 0 0 8px !important;
    filter: var(--footer-icon-filter);
}

footer.marifat-footer .footer-title h2 {
    font-family: 'Averia Serif Libre', serif !important;
    font-size: clamp(1.125rem, 2.5vw, 1.5rem) !important;
    font-weight: 700 !important;
    margin: 0 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--header-text-color) !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    padding: 0.125rem 0.25rem 0.125rem 0 !important;
    border-radius: 0 8px 8px 0 !important;
}

footer.marifat-footer .footer-subtitle {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: clamp(0.6875rem, 1.5vw, 0.875rem) !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    opacity: 0.8 !important;
    margin-bottom: clamp(0.75rem, 1.5vw, 1rem) !important;
    color: var(--text-secondary) !important;
}

footer.marifat-footer .footer-copyright {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: clamp(0.625rem, 1.25vw, 0.75rem) !important;
    opacity: 0.6 !important;
    margin-top: 0 !important;
    padding-top: clamp(0.75rem, 1.5vw, 1rem) !important;
    padding-bottom: 12px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: var(--text-secondary) !important;
}

@media (max-width: 640px) {
    footer.marifat-footer {
        
    }

    footer.marifat-footer .footer-logo-group {
        gap: 0.5rem !important;
    }

    footer.marifat-footer .footer-logo-img {
        width: 2rem !important;
    }

    footer.marifat-footer .footer-title h2 {
        font-size: 1.125rem !important;
    }

    footer.marifat-footer .footer-subtitle {
        font-size: 0.6875rem !important;
        line-height: 1.4 !important;
    }

    footer.marifat-footer .footer-copyright {
        font-size: 0.625rem !important;
        padding-top: 0.75rem !important;
    }
}

/* ==========================================================================
    КНОПКА "ЗАГРУЗИТЬ ЕЩЁ"
   ========================================================================== */

.marifat-load-more-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: clamp(0.75rem, 1.5vw, 1rem) 0;
}

.marifat-load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 4vw, 2rem);

    background: var(--card-bg) !important;
    border: var(--rubric2-border) !important;
    color: var(--rubric2-text) !important;

    font-family: 'Inter', sans-serif;
    font-size: clamp(0.875rem, 2vw, 1rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: clamp(0.1875rem, 0.5vw, 0.25rem);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--card-shadow);
}

.marifat-load-more-btn:hover {
    background: var(--rubric2-text) !important;
    color: var(--rubric1-text) !important;
    border-color: var(--rubric2-text) !important;
    transform: translateY(-2px);
    box-shadow: var(--button-shadow);
}

.marifat-load-more-btn:active {
    transform: translateY(0);
}

.marifat-load-more-btn:disabled {
    background: var(--card-bg) !important;
    border-color: var(--text-secondary) !important;
    color: var(--text-secondary) !important;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.6;
}

.load-more-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--text-secondary);
}

.load-more-spinner::before {
    content: '';
    width: 24px;
    height: 24px;
    border: 3px solid var(--pagination-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spinner 0.8s linear infinite;
}

@keyframes spinner {
    to { transform: rotate(360deg); }
}

@media (max-width: 480px) {
    .marifat-load-more-btn {
        padding: clamp(0.65rem, 2vw, 0.85rem) clamp(1.25rem, 3vw, 1.5rem);
        font-size: clamp(0.8125rem, 1.8vw, 0.9375rem);
    }
}


/* ==========================================================================
   СТРАНИЦЫ (page.php)
   ========================================================================== */

.marifat-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0;
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.875rem, 2vw, 1rem);
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.marifat-breadcrumbs a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.marifat-breadcrumbs a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.breadcrumb-separator {
    color: var(--text-secondary);
    opacity: 0.5;
}

.breadcrumb-current {
    color: var(--text-primary);
    font-weight: 500;
}

.marifat-page-content {
    background: var(--content-bg);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 4vw, 3rem);
    box-shadow: var(--card-shadow);
    margin-bottom: 2rem;
}

.marifat-page-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--pagination-border);
}

.marifat-page-title {
    font-family: 'Averia Serif Libre', serif;
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 700;
    color: var(--content-heading);
    margin: 0;
    line-height: 1.2;
}

.marifat-page-text {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    line-height: 1.7;
    color: var(--content-text);
}

.marifat-page-text h2 {
    font-family: 'Averia Serif Libre', serif;
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    color: var(--content-heading);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.marifat-page-text h3 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: 600;
    color: var(--content-heading);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.marifat-page-text p {
    margin-bottom: 1rem;
}

.marifat-page-text ul,
.marifat-page-text ol {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.marifat-page-text li {
    margin-bottom: 0.5rem;
}

.marifat-page-text a {
    color: var(--color-link);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.marifat-page-text a:hover {
    color: var(--color-link-hover);
}

.marifat-page-text img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    margin: 1.5rem 0;
}

.marifat-page-text blockquote {
    border-left: 4px solid var(--blockquote-border);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--text-light);
    background: var(--blockquote-bg);
    padding: 1rem 1.5rem;
    border-radius: 4px;
}

@media (max-width: 480px) {
    .marifat-page-content {
        padding: clamp(1rem, 3vw, 1.5rem);
    }

    .marifat-breadcrumbs {
        font-size: 0.875rem;
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   КАТЕГОРИИ (category.php)
   ========================================================================== */

.marifat-category-header {
    background: var(--blockquote-bg);
    border-left: 4px solid var(--blockquote-border);
    border-radius: var(--radius);
    padding: clamp(1.25rem, 3vw, 2rem);
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.marifat-category-title {
    font-family: 'Averia Serif Libre', serif;
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 700;
    color: var(--category-title-color);
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.marifat-category-description {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.9375rem, 2.2vw, 1.0625rem);
    line-height: 1.6;
    color: var(--text-light);
    margin: 0;
}

.marifat-category-description p {
    margin: 0;
}

/* Пагинация */
.marifat-pagination {
    margin-top: clamp(2rem, 5vw, 3rem);
    text-align: center;
}

.marifat-pagination .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.marifat-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0.5rem 1rem;
    background: var(--pagination-bg);
    border: 1px solid var(--pagination-border);
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--pagination-text);
    text-decoration: none;
    transition: all 0.3s ease;
}

.marifat-pagination .page-numbers:hover {
    background: var(--color-primary);
    color: var(--rubric1-text);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--button-shadow);
}

.marifat-pagination .page-numbers.current {
    background: var(--pagination-active-bg);
    color: var(--rubric1-text);
    border-color: transparent;
    font-weight: 600;
}

.marifat-pagination .page-numbers.dots {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: default;
}

.marifat-pagination .page-numbers.dots:hover {
    background: transparent;
    color: var(--text-secondary);
    transform: none;
    box-shadow: none;
}

/* Пустое состояние */
.marifat-empty-state {
    background: var(--content-bg);
    border-radius: var(--radius);
    padding: clamp(2rem, 5vw, 4rem);
    text-align: center;
    box-shadow: var(--card-shadow);
    
}

.empty-icon {
    font-size: clamp(3rem, 8vw, 5rem);
    margin-bottom: 1rem;
    opacity: 0.6;
}

.empty-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.125rem, 3vw, 1.5rem);
    font-weight: 600;
    color: var(--text-heading);
    margin: clamp(1rem, 2.5vw, 1.5rem) 0;
}

.empty-text {
    font-size: clamp(0.875rem, 2vw, 1rem);
    color: var(--text-secondary);
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.empty-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.875rem, 2vw, 1rem);
    color: var(--rubric1-bg);
    text-decoration: none;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--rubric1-bg);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.empty-link:hover {
    background: var(--rubric1-bg);
    color: var(--card-bg);
}

@media (max-width: 480px) {
    .marifat-category-header {
        padding: 1.25rem;
    }

    .marifat-pagination .page-numbers {
        min-width: 36px;
        height: 36px;
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }
}

/* ==========================================================================
   ОТДЕЛЬНАЯ СТАТЬЯ (single.php)
  ========================================================================== */

.marifat-single-article {
    background: var(--article-bg);
    border-radius: var(--radius);
    padding: clamp(0.5rem, 1.5vw, 3.5rem);
    box-shadow: var(--card-shadow);
    margin-bottom: 2rem;
}



.marifat-single-meta-top {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(0.375rem, 1vw, 0.5rem);
    margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
}

.marifat-single-rubric1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rubric1-bg);
    color: var(--rubric1-text) !important;
    padding: clamp(0.1875rem, 0.5vw, 0.25rem) clamp(0.5rem, 1.5vw, 0.75rem);
    border-radius: 3px;
    font-size: clamp(0.5625rem, 1.5vw, 0.75rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.marifat-single-rubric2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rubric2-bg) !important;
    border: var(--rubric2-border) !important;
    color: var(--rubric2-text) !important;
    padding: clamp(0.1875rem, 0.5vw, 0.25rem) clamp(0.5rem, 1.5vw, 0.75rem);
    border-radius: 3px;
    font-size: clamp(0.5625rem, 1.5vw, 0.75rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.marifat-single-title {
    font-family: 'Averia Serif Libre', serif;
    font-size: clamp(1.2rem, 1.6vw, 2.25rem);
    font-weight: 700;
    color: var(--content-heading) !important;
    line-height: 1.2;
    margin: 0 0 1rem 0;
}

.marifat-single-image {

    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--card-shadow);
}

.single-featured-img {
    width: 100%;
    height: auto;
    display: block;
}

.marifat-single-meta-bottom {
    margin-top: 12px;
}

.audio-date-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.audio-player-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--rubric2-text);
    border: 1px solid var(--rubric2-text);
    border-radius: 0.375rem;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.audio-player-icon svg {
    width: 16px;
    height: 16px;
}

.audio-player-icon:hover {
    background: var(--rubric1-bg);
    color: var(--rubric1-text);
    border-color: var(--rubric1-bg);
}


@media (max-width: 768px) {
    .audio-player-icon {
        width: 2rem;
        height: 2rem;
    }

    .audio-player-icon svg {
        width: 14px;
        height: 14px;
    }
    
    .marifat-single-meta-bottom {
    margin-top: 4px;
    }
}

@media (max-width: 480px) {
    .audio-player-icon {
        width: 1.875rem;
        height: 1.875rem;
    }

    .audio-player-icon svg {
        width: 12px;
        height: 12px;
    }
}



.marifat-single-date {
    
    text-align: left; 
    font-size: clamp(0.6875rem, 1.5vw, 0.875rem);
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0;
    margin-right: auto;
}



.font-size-controls {
    display: inline-flex;
    border: 1px solid var(--rubric2-text);
    border-radius: 0.2rem;
    overflow: hidden;
    background: transparent;
    padding: 0;
    gap: 0;
    margin-left: auto;
}

.font-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--rubric2-text);
    background: transparent;
    border: none;
    border-right: 1px solid var(--rubric2-text);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.font-btn:last-child {
    border-right: none;
}

.font-btn:hover {
    background: var(--rubric1-bg);
    color: var(--rubric1-text);
    border-right-color: var(--button-border-hover);
}

.font-btn:hover + .font-btn {
    border-left: 1px solid var(--button-border-hover);
}

.font-btn.active {
    background: var(--rubric1-bg);
    color: var(--rubric1-text);
    border-right-color: var(--button-border-hover);
}

.font-btn.active + .font-btn {
    border-left: 1px solid var(--button-border-hover);
}




.marifat-single-content {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.0625rem, 2.5vw, 1.1875rem);
    line-height: 1.8;
    color: var(--content-text) !important;
    margin-bottom: 2rem;
}

.marifat-single-content h2 {
    font-family: 'Averia Serif Libre', serif;
    font-size: clamp(1.625rem, 4.5vw, 2.25rem);
    font-weight: 700;
    color: var(--content-heading) !important;
    margin: 2.5rem 0 1.25rem 0;
    line-height: 1.3;
}

.marifat-single-content h3 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.375rem, 3.5vw, 1.75rem);
    font-weight: 600;
    color: var(--content-heading) !important;
    margin: 2rem 0 1rem 0;
}

.marifat-single-content h4 {
    font-size: clamp(1.125rem, 3vw, 1.375rem);
    font-weight: 600;
    color: var(--content-heading) !important;
    margin: 1.5rem 0 0.75rem 0;
}

.marifat-single-content p {
    margin-top: 1rem;
    margin-bottom: 1.25rem;
    color: var(--content-text) !important;
}



.marifat-single-content ul,
.marifat-single-content ol {
    margin: 1.25rem 0 1.25rem 1.75rem;
    color: var(--content-text) !important;
}

.marifat-single-content li {
    margin-bottom: 0.75rem;
    line-height: 1.7;
}

.marifat-single-content a {
    color: var(--color-link) !important;
    text-decoration: underline;
    font-weight: 500;
    transition: color 0.3s ease;
}

.marifat-single-content a:hover {
    color: var(--color-link-hover) !important;
    text-decoration: none;
}

.marifat-single-content strong,
.marifat-single-content b {
    font-weight: 700;
    color: var(--content-heading) !important;
}

.marifat-single-content blockquote {
    border-left: 4px solid var(--blockquote-border);
    padding: 1.25rem 1.75rem;
    margin: 2rem 0;
    background: var(--blockquote-bg);
    border-radius: 6px;
    font-style: italic;
    color: var(--text-light) !important;
}

.marifat-single-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    margin: 2rem auto;
    display: block;
    box-shadow: var(--card-shadow);
}

.marifat-single-content pre,
.marifat-single-content code {
    background: var(--code-bg);
    color: var(--code-text) !important;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
}

.marifat-single-content pre {
    padding: 1.25rem;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.marifat-single-tags {
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: clamp(1.5rem, 3vw, 2rem);
    border-top: 1px solid var(--pagination-border);
}

.tags-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.875rem, 2vw, 1rem);
    font-weight: 600;
    color: var(--content-heading);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.single-tag {
    display: inline-flex;
    align-items: center;
    padding: clamp(0.25rem, 0.6vw, 0.375rem) clamp(0.625rem, 1.5vw, 0.875rem);
    background: var(--rubric2-bg);
    border: var(--rubric2-border);
    color: var(--rubric2-text);
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.75rem, 1.8vw, 0.875rem);
    font-weight: 500;
    border-radius: clamp(0.1875rem, 0.5vw, 0.25rem);
    text-decoration: none;
    transition: all 0.3s ease;
}

.single-tag:hover {
    background: var(--rubric1-bg);
    color: var(--rubric1-text);
    border: var(--rubric1-border);
    transform: translateY(-2px);
    box-shadow: var(--button-shadow);
}

.single-tag a {
    color: inherit !important;
    text-decoration: none !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.marifat-post-navigation {
    margin-top: 3rem;
}

.post-nav-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.post-nav-link {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
    background: var(--content-bg);
    border: 2px solid var(--pagination-border);
    border-radius: var(--radius);
    text-decoration: none;
    transition: all 0.3s ease;
}

.post-nav-link:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px);
    box-shadow: var(--button-shadow);
}

.post-nav-link.next {
    text-align: right;
}

.nav-direction {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-link) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nav-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    font-weight: 600;
    color: var(--content-heading) !important;
    line-height: 1.4;
}



@media (max-width: 768px) {
    .audio-date-controls {
        gap: 16px;
        padding: 20px 12px;
    }

    .marifat-single-date {
        min-width: 140px;
    }

    .font-btn {
        width: 2.25rem;
        height: 2rem;
        font-size: 0.9rem;
    }


}

@media (max-width: 480px) {
    .audio-date-controls {
        gap: 8px;
        padding: 12px 8px;
    }

    .marifat-single-date {
        min-width: 110px;
    }

    .font-btn {
        width: 2rem;
        height: 1.875rem;
        font-size: 0.875rem;
    }


}

/* ==========================================================================
   3 УРОВНЯ РУБРИК (category.php) 
   ========================================================================== */


.marifat-header-row-1,
.marifat-single-row-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: clamp(0.5rem, 1.25vw, 0.75rem) !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-bottom: 0 !important;
}

.marifat-header-row-1 {
    padding: 0.25rem 0 !important;  
    background: transparent !important; 
    border: none !important;  
    border-radius: 0 !important;  
    backdrop-filter: none !important;  
    margin-bottom: 0 !important;
    display: flex !important;
    gap: clamp(0.5rem, 1.25vw, 0.75rem) !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

.marifat-single-row-tags {
    padding: 0.5rem 1rem !important;
    padding-bottom: 1rem !important;
    background: rgba(255,255,255,0.04) !important;
    border-radius: 12px !important;
}

.marifat-single-row-tags.category-level-1 {
    padding-bottom: 0 !important;  /* Только снизу 0 */
}

.marifat-single-row-tags.category-level-2 {
    padding-bottom: 0 !important;  /* Только снизу 0 */
}

.marifat-single-row-tags.category-level-3 {
    padding-bottom: 0 !important;  /* Только снизу 0 */
}

/* ЕДИНЫЙ СТИЛЬ ДЛЯ ВСЕХ ТЕГОВ */
.marifat-tag {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: clamp(0.6875rem, 1.5vw, 0.875rem) !important;
    font-weight: 600 !important;
    padding: clamp(0.25rem, 0.75vw, 0.375rem) clamp(1rem, 2vw, 1.25rem) !important;
    border-radius: clamp(0.25rem, 0.75vw, 0.375rem) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* ОСНОВНОЙ — белый фон, синяя надпись */
    background: var(--card-bg) !important;
    color: var(--rubric1-bg) !important;
}


.marifat-header-row-1 .marifat-tag {
    background: var(--rubric1-bg) !important;
   color: var(--rubric-active-text) !important;
    border-color: rgba(255,255,255,0.4) !important;
}


.marifat-single-row-tags .marifat-tag.active {
    background: var(--rubric1-bg) !important;
    color: var(--rubric-active-text) !important;
    border-color: rgba(255,255,255,0.6) !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}


.marifat-tag:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--button-shadow) !important;
}



@media (max-width: 480px) {
    .marifat-header-row-1,
    .marifat-single-row-tags {
        padding: 0.5rem !important;
        gap: 0.5rem !important;
    }
}