/*
Theme Name: Deeoiman
Theme URI: https://deeoiman.com
Author: Deeoiman Team
Author URI: https://deeoiman.com
Description: A world-class, feature-packed, ultra-customizable Islamic WordPress theme for Quran, Hadith, and Dua blogs. Features Audio Recitations, WhatsApp/Telegram Share, Reading Progress Bar, Related Posts, and Rich SEO Schema.
Version: 1.11.24
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: deeoiman
Tags: islamic, quran, hadith, dua, blog, two-columns, custom-menu, featured-images, rtl-language-support, dark-mode, responsive-layout, custom-colors, widgets, theme-options, grid-layout, seo-friendly
*/
:root{ --color-primary: #0F382C; --color-primary-light: #185242; --color-primary-dark: #09241B; --color-accent: #D4AF37; --color-accent-hover: #B8952B; --color-accent-light: #F9F3DE; --color-bg: #FAF8F5; --color-surface: #FFFFFF; --color-surface-elevated: #FFFFFF; --color-border: #E8E2D5; --color-text-main: #1C2826; --color-text-muted: #5A6B66; --color-text-light: #879994; --cat-quran-bg: #E8F5E9; --cat-quran-color: #1B5E20; --cat-hadith-bg: #E3F2FD; --cat-hadith-color: #0D47A1; --cat-dua-bg: #FFF8E1; --cat-dua-color: #F57F17; --cat-default-bg: #EFEBE9; --cat-default-color: #4E342E; --logo-max-width: 220px; --logo-max-height: 60px; --card-image-height: 220px; --single-featured-height: 380px; --container-max-width: 1240px; --font-latin: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; --font-arabic: 'Amiri', 'Noto Naskh Arabic', 'Traditional Arabic', serif; --content-font-size: 1.125rem; --arabic-font-size: 1.75rem; --shadow-sm: 0 2px 8px rgba(15, 56, 44, 0.05); --shadow-md: 0 4px 20px rgba(15, 56, 44, 0.08); --shadow-lg: 0 12px 32px rgba(15, 56, 44, 0.12); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);} html.dark-mode, html.dark-mode body{ --color-bg: #091210; --color-surface: #121F1B; --color-surface-elevated: #1A2C27; --color-border: #233832; --color-text-main: #E9F1EE; --color-text-muted: #9EB2AB; --color-text-light: #6E857E; --color-accent-light: #2A2410; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5); --cat-quran-bg: #1B382B; --cat-quran-color: #81C784; --cat-hadith-bg: #1A2F4C; --cat-hadith-color: #64B5F6; --cat-dua-bg: #3E2D12; --cat-dua-color: #FFB74D;} html.deeoiman-theme-preload, html.deeoiman-theme-preload body, html.deeoiman-theme-preload body *{ transition:none !important; animation:none !important; } *, *::before, *::after{ box-sizing: border-box; margin: 0; padding: 0;} html{ font-family: var(--font-latin); background-color: var(--color-bg); color: var(--color-text-main); line-height: 1.6; scroll-behavior: smooth;} body{ background-color: var(--color-bg); color: var(--color-text-main); transition: background-color var(--transition-normal), color var(--transition-normal); min-height: 100vh; display: flex; flex-direction: column;} a{ color: var(--color-primary-light); text-decoration: none; transition: color var(--transition-fast);} html.dark-mode body a{ color: var(--color-accent);} a:hover{ color: var(--color-accent);} img{ max-width: 100%; height: auto; display: block;} #reading-progress{ position: fixed; top: 0; left: 0; height: 4px; background: linear-gradient(90deg, var(--color-accent) 0%, #FFF5C0 100%); width: 0%; z-index: 2000; transition: width 0.1s ease-out;} .back-to-top-btn{ position: fixed; bottom: 28px; right: 28px; width: 48px; height: 48px; border-radius: 50%; background: var(--color-primary); color: var(--color-accent); border: 2px solid var(--color-accent); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast), background-color var(--transition-fast); z-index: 1500;} .back-to-top-btn.is-visible{ opacity: 1; visibility: visible; transform: translateY(0);} .back-to-top-btn:hover{ background: var(--color-primary-light); transform: translateY(-3px);} @media(max-width: 600px){ .back-to-top-btn{ bottom: 18px; right: 18px; width: 42px; height: 42px; font-size: 1rem;}} .skip-link{ position: absolute; left: -9999px; top: 10px; z-index: 99999; padding: 10px 16px; background: var(--color-primary); color: #fff; border-radius: var(--radius-sm);} .skip-link:focus{ left: 10px;} .container{ width: 100%; max-width: var(--container-max-width, 1200px); margin: 0 auto; padding: 0 20px;} .container-narrow{ max-width: 860px;} .site-main{ flex: 1; padding: 40px 0 80px 0;} .layout-grid{ display: grid; grid-template-columns: 1fr; gap: 40px;} @media(min-width: 992px){ .layout-grid.has-sidebar{ grid-template-columns: 1fr 340px;} body.sidebar-left .layout-grid.has-sidebar{ grid-template-columns: 340px 1fr;} body.sidebar-left .layout-grid.has-sidebar .content-area{ order: 2;} body.sidebar-left .layout-grid.has-sidebar .widget-area{ order: 1;}} .site-header{ background-color: var(--color-surface-elevated); border-bottom: 1px solid var(--color-border); position: static; z-index: 1000; box-shadow: var(--shadow-sm); transition: background-color var(--transition-normal), border-color var(--transition-normal);} body.has-sticky-header .site-header{ position: sticky; top: 0;} .header-inner{ display: flex; align-items: center; justify-content: space-between; min-height: 80px; padding: 10px 0;} .site-brand{ display: flex; align-items: center; gap: 12px; text-decoration: none;} .custom-logo-link img{ max-width: var(--logo-max-width) !important; max-height: var(--logo-max-height) !important; width: auto; height: auto; object-fit: contain;} .brand-icon{ width: 44px; height: 44px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%); color: var(--color-accent); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 22px; border: 1px solid var(--color-accent); box-shadow: var(--shadow-sm);} .brand-text-wrapper{ display: flex; flex-direction: column;} .brand-title{ font-size: 1.5rem; font-weight: 800; color: var(--color-primary); letter-spacing: -0.02em; line-height: 1.1;} html.dark-mode body .brand-title{ color: var(--color-text-main);} .brand-tagline{ font-size: 0.75rem; color: var(--color-text-muted); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;} .main-nav{ display: flex; align-items: center; gap: 24px;} .nav-list{ display: flex; list-style: none; gap: 20px; align-items: center;} .nav-link{ font-size: 0.95rem; font-weight: 600; color: var(--color-text-main); padding: 8px 14px; border-radius: var(--radius-sm); transition: all var(--transition-fast);} .nav-link:hover, .nav-link.active{ background-color: var(--color-bg); color: var(--color-primary);} html.dark-mode body .nav-link:hover{ color: var(--color-accent);} .header-actions{ display: flex; align-items: center; gap: 10px;} .action-btn{ background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-main); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; transition: all var(--transition-fast); position: relative;} .action-btn:hover{ background-color: var(--color-primary); color: var(--color-accent); border-color: var(--color-primary); transform: translateY(-2px);} .mobile-menu-toggle{ display: none;} @media(max-width: 868px){ .main-nav{ display: none; position: absolute; top: 80px; left: 0; right: 0; background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: 20px; box-shadow: var(--shadow-lg);} .main-nav.is-open{ display: block;} .nav-list{ flex-direction: column; align-items: stretch; gap: 8px;} .mobile-menu-toggle{ display: flex;}} .bismillah-banner{ text-align: center; padding: 24px 0 8px 0;} .bismillah-text{ font-family: var(--font-arabic); font-size: 2.2rem; color: var(--color-primary); direction: rtl; line-height: 1.4;} html.dark-mode body .bismillah-text{ color: var(--color-accent);} .hero-section{ background: linear-gradient(135deg, var(--color-primary) 0%, #154D3D 100%); border-radius: var(--radius-lg); padding: 40px; color: #FFFFFF; margin-bottom: 40px; box-shadow: var(--shadow-md); position: relative; overflow: hidden;} .hero-badge{ display: inline-flex; align-items: center; gap: 6px; background: var(--color-accent-light); border: 1px solid var(--color-accent); color: var(--color-primary); padding: 4px 12px; border-radius: 50px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px;} html.dark-mode body .hero-badge{ color: var(--color-accent);} .hero-title{ font-size: 2.2rem; font-weight: 800; line-height: 1.2; margin-bottom: 16px; color: #FFFFFF;} .hero-description{ font-size: 1.1rem; color: rgba(255, 255, 255, 0.85); max-width: 650px; margin-bottom: 24px;} .post-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px;} .post-card{ background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); box-shadow: var(--shadow-sm);} .post-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-accent);} .card-image-wrap{ position: relative; width: 100%; height: var(--card-image-height); overflow: hidden; background: var(--color-bg);} .card-image-wrap img{ width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-normal);} .post-card:hover .card-image-wrap img{ transform: scale(1.04);} .card-content{ padding: 24px; display: flex; flex-direction: column; flex: 1;} .card-meta{ display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 0.85rem;} .category-badge{ display: inline-block; padding: 3px 10px; border-radius: 50px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;} .category-badge.cat-quran{ background-color: var(--cat-quran-bg); color: var(--cat-quran-color);} .category-badge.cat-hadith{ background-color: var(--cat-hadith-bg); color: var(--cat-hadith-color);} .category-badge.cat-dua{ background-color: var(--cat-dua-bg); color: var(--cat-dua-color);} .category-badge.cat-default{ background-color: var(--cat-default-bg); color: var(--cat-default-color);} .post-date{ color: var(--color-text-muted);} .card-title{ font-size: 1.3rem; font-weight: 700; line-height: 1.35; margin-bottom: 12px; color: var(--color-text-main);} .card-title a{ color: inherit;} .card-title a:hover{ color: var(--color-primary-light);} html.dark-mode body .card-title a:hover{ color: var(--color-accent);} .card-excerpt{ font-size: 0.95rem; color: var(--color-text-muted); margin-bottom: 20px; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;} .card-footer{ display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--color-border); font-size: 0.85rem; color: var(--color-text-light);} .quran-box{ background: linear-gradient(to bottom, var(--color-surface), var(--color-bg)); border: 2px solid var(--color-accent); border-radius: var(--radius-md); padding: 30px; margin: 30px 0; position: relative; box-shadow: var(--shadow-sm);} .quran-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px dashed var(--color-border);} .surah-tag{ background: var(--color-primary); color: var(--color-accent); padding: 4px 14px; border-radius: 50px; font-size: 0.85rem; font-weight: 700;} .arabic-text{ font-family: var(--font-arabic); font-size: var(--arabic-font-size); line-height: 2.2; text-align: right; direction: rtl; color: var(--color-primary); margin-bottom: 20px;} html.dark-mode body .arabic-text{ color: #E2F0EC;} .translation-text{ font-size: var(--content-font-size); color: var(--color-text-main); font-style: italic; line-height: 1.7; margin-bottom: 16px;} .dua-card-box{ background-color: var(--color-surface); border-left: 5px solid var(--color-accent); border-radius: var(--radius-sm); padding: 24px; margin: 28px 0; box-shadow: var(--shadow-sm);} .dua-title{ font-size: 1.15rem; font-weight: 700; color: var(--color-primary); margin-bottom: 14px; display: flex; align-items: center; gap: 8px;} html.dark-mode body .dua-title{ color: var(--color-accent);} .transliteration{ font-size: 1rem; color: var(--color-text-muted); margin-bottom: 12px; font-weight: 500;} .content-box-actions{ display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-top: 16px;} .btn-action{ background-color: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-main); padding: 6px 14px; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all var(--transition-fast);} .btn-action:hover{ background-color: var(--color-primary); color: var(--color-accent); border-color: var(--color-primary);} .share-btn-wa{ background-color: #25D366; color: #FFFFFF !important; border: none;} .share-btn-wa:hover{ background-color: #1EBE5D;} .share-btn-tg{ background-color: #229ED9; color: #FFFFFF !important; border: none;} .share-btn-tg:hover{ background-color: #1A8CBF;} .widget-area .widget{ background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 28px; margin-bottom: 30px; box-shadow: var(--shadow-sm);} .widget-title{ font-size: 1.15rem; font-weight: 700; color: var(--color-primary); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--color-accent);} html.dark-mode body .widget-title{ color: var(--color-text-main);} .widget ul{ list-style: none;} .widget ul li{ padding: 10px 0; border-bottom: 1px dashed var(--color-border); font-size: 0.95rem;} .related-posts-section{ margin-top: 50px; padding-top: 40px; border-top: 2px solid var(--color-border);} .related-section-title{ font-size: 1.5rem; font-weight: 800; color: var(--color-primary); margin-bottom: 24px;} html.dark-mode body .related-section-title{ color: var(--color-accent);} .site-footer{ background-color: var(--color-primary-dark); color: #E9F1EE; padding: 60px 0 30px 0; border-top: 3px solid var(--color-accent); margin-top: auto;} .footer-inner{ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 40px;} .footer-brand .brand-title{ color: #FFFFFF;} .footer-brand .brand-tagline{ color: var(--color-accent);} .footer-site-brand{ display: inline-flex; align-items: center; gap: 12px;} .footer-custom-logo-wrap{ display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;} .footer-custom-logo{ display: block; width: auto; max-width: 220px; max-height: 60px; object-fit: contain;} .footer-heading{ font-size: 1.1rem; font-weight: 700; color: var(--color-accent); margin-bottom: 18px;} .footer-links{ list-style: none;} .footer-links li{ margin-bottom: 10px;} .footer-links a{ color: #C2D6CF; transition: color var(--transition-fast);} .footer-links a:hover{ color: var(--color-accent);} .footer-bottom{ border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 24px; display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; color: #8CA89E;} .toast-notification{ position: fixed; bottom: 30px; right: 30px; background-color: var(--color-primary); color: var(--color-accent); padding: 12px 24px; border-radius: var(--radius-sm); border: 1px solid var(--color-accent); box-shadow: var(--shadow-lg); font-weight: 600; transform: translateY(100px); opacity: 0; transition: all var(--transition-normal); z-index: 4000;} .toast-notification.show{ transform: translateY(0); opacity: 1;} .entry-content{ font-size: var(--content-font-size); color: var(--color-text-main); line-height: 1.8;} .entry-content> *+ *{ margin-top: 1.2em;} .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6{ font-weight: 800; color: var(--color-primary); line-height: 1.3; margin-top: 1.6em;} html.dark-mode body .entry-content h1, html.dark-mode body .entry-content h2, html.dark-mode body .entry-content h3, html.dark-mode body .entry-content h4, html.dark-mode body .entry-content h5, html.dark-mode body .entry-content h6{ color: var(--color-text-main);} .entry-content h2{ font-size: 1.65rem;} .entry-content h3{ font-size: 1.4rem;} .entry-content h4{ font-size: 1.2rem;} .entry-content p{ margin-bottom: 0;} .entry-content a{ text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 2px;} .entry-content ul, .entry-content ol{ padding-left: 1.5em;} .entry-content li+ li{ margin-top: 0.4em;} .entry-content blockquote{ background: var(--color-accent-light); border-left: 4px solid var(--color-accent); border-radius: var(--radius-sm); padding: 18px 24px; font-style: italic; color: var(--color-text-main);} .entry-content img{ border-radius: var(--radius-md); box-shadow: var(--shadow-sm);} .entry-content figcaption{ text-align: center; font-size: 0.85rem; color: var(--color-text-muted); margin-top: 8px;} .entry-content table{ width: 100%; border-collapse: collapse;} .entry-content table th, .entry-content table td{ padding: 10px 14px; border: 1px solid var(--color-border); text-align: left;} .entry-content table th{ background: var(--color-bg); color: var(--color-primary);} .entry-content hr{ border: none; border-top: 1px dashed var(--color-border);} .entry-content .page-links{ margin-top: 2em; font-weight: 700;} .entry-content .page-links a{ display: inline-block; padding: 4px 12px; margin: 0 4px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); text-decoration: none;} .search-form{ display: flex; gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-bg);} .search-form .search-field{ flex: 1; border: none; background: transparent; padding: 12px 16px; font-size: 0.95rem; color: var(--color-text-main); outline: none; font-family: var(--font-latin);} .search-form .search-field::placeholder{ color: var(--color-text-light);} .search-form button[type="submit"]{ border: none; background: var(--color-primary); color: var(--color-accent); padding: 0 20px; cursor: pointer; font-size: 1rem; transition: background-color var(--transition-fast);} .search-form button[type="submit"]:hover{ background: var(--color-primary-light);} .social-links{ display: flex; gap: 10px; margin-top: 16px;} .social-link{ width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--color-accent); color: var(--color-accent) !important; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast);} .social-link:hover{ background: var(--color-accent); color: var(--color-primary-dark) !important; transform: translateY(-2px);} .tagcloud{ display: flex; flex-wrap: wrap; gap: 8px;} .tagcloud a{ display: inline-block; padding: 5px 14px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 50px; font-size: 0.8rem !important; color: var(--color-text-main); transition: all var(--transition-fast);} .tagcloud a:hover{ background: var(--color-primary); color: var(--color-accent); border-color: var(--color-primary);} .pagination, .nav-links{ display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;} .page-numbers{ display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--radius-sm); background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-main); font-weight: 600; font-size: 0.9rem; transition: all var(--transition-fast);} .page-numbers.current{ background: var(--color-primary); border-color: var(--color-primary); color: var(--color-accent);} .page-numbers:hover:not(.current):not(.dots){ background: var(--color-accent); border-color: var(--color-accent); color: var(--color-primary-dark);} .page-numbers.dots{ border: none; background: transparent;} .comments-area{ margin-top: 50px; padding-top: 40px; border-top: 2px solid var(--color-border);} .comments-title{ font-size: 1.4rem; font-weight: 800; color: var(--color-primary); margin-bottom: 24px;} html.dark-mode body .comments-title{ color: var(--color-accent);} .comment-list{ list-style: none;} .comment-list .children{ list-style: none; padding-left: 40px;} .comment-body{ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 20px; margin-bottom: 20px;} .comment-author.vcard{ display: flex; align-items: center; gap: 10px; margin-bottom: 8px;} .comment-author .avatar{ border-radius: 50%; width: 40px; height: 40px;} .comment-author .fn{ font-style: normal; font-weight: 700; color: var(--color-primary);} html.dark-mode body .comment-author .fn{ color: var(--color-text-main);} .comment-metadata{ font-size: 0.8rem; color: var(--color-text-light); margin-bottom: 10px;} .comment-metadata a{ color: inherit;} .comment-content p{ margin-bottom: 0.8em; color: var(--color-text-main); line-height: 1.7;} .comment-reply-link{ display: inline-block; margin-top: 8px; font-size: 0.8rem; font-weight: 700; color: var(--color-primary-light);} .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea{ width: 100%; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text-main); font-family: var(--font-latin); font-size: 0.95rem; margin-top: 6px;} .comment-form label{ font-weight: 600; font-size: 0.9rem;} .comment-form p{ margin-bottom: 18px;} .comment-form .form-submit input#submit{ background: var(--color-primary); color: var(--color-accent); border: none; padding: 12px 28px; border-radius: var(--radius-sm); font-weight: 700; cursor: pointer; transition: background-color var(--transition-fast);} .comment-form .form-submit input#submit:hover{ background: var(--color-primary-light);} .no-comments{ color: var(--color-text-muted); font-style: italic;} html{ overflow-x: hidden; -webkit-text-size-adjust: 100%;} body{ overflow-x: hidden;} @media(hover: none){ .post-card:hover, .back-to-top-btn:hover, .action-btn:hover, .social-link:hover, .tagcloud a:hover{ transform: none;} .post-card:hover .card-image-wrap img{ transform: none;}} @media(max-width: 868px){ body:not(.has-sticky-header) .site-header{ position: relative;} .site-header{ z-index: 1000;} .main-nav{ top: 100%;} body.mobile-nav-open{ overflow: hidden;} .container{ padding-left: 14px; padding-right: 14px;} .top-bar{ padding: 6px 0; font-size: 0.78rem;} .top-bar-inner{ display: flex; flex-direction: column; align-items: stretch; gap: 5px;} .top-bar-item{ justify-content: center; min-height: 24px;} .header-inner{ min-height: 64px; padding: 7px 0; gap: 8px;} .site-brand{ min-width: 0; flex: 1 1 auto; gap: 8px;} .custom-logo-link img{ max-width: min(var(--logo-max-width), 150px) !important; max-height: 48px !important;} .brand-icon{ width: 40px; height: 40px; font-size: 19px; flex: 0 0 40px;} .brand-text-wrapper{ min-width: 0;} .brand-title{ font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .brand-tagline{ display: none;} .header-actions{ flex: 0 0 auto; gap: 6px;} .action-btn{ width: 44px; height: 44px; min-width: 44px; min-height: 44px;} .main-nav{ top: 100%; padding: 8px 14px 14px; max-height: calc(100dvh - 64px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;} .nav-list{ gap: 4px;} .nav-link{ display: flex; align-items: center; min-height: 46px; padding: 11px 12px; font-size: 1rem;} .bismillah-banner{ padding: 14px 0 4px;} .bismillah-text{ font-size: clamp(1.45rem, 7vw, 1.8rem); line-height: 1.45;} .site-main{ padding: 24px 0 50px;} .post-grid{ grid-template-columns: minmax(0, 1fr); gap: 18px;} .post-card{ min-width: 0; content-visibility: auto; contain-intrinsic-size: 420px;} .card-image-wrap{ height: clamp(155px, 48vw, 200px);} .card-content{ padding: 18px;} .card-title{ font-size: 1.18rem; line-height: 1.4;} .card-excerpt{ font-size: 0.95rem; margin-bottom: 16px;} .card-footer{ gap: 10px; flex-wrap: wrap;} .hero-section{ padding: 24px 18px; margin-bottom: 24px; border-radius: 14px;} .hero-title{ font-size: clamp(1.55rem, 7vw, 2rem); line-height: 1.25;} .hero-description{ font-size: 1rem; line-height: 1.65; margin-bottom: 18px;} .quran-box{ padding: 18px 14px; margin: 20px 0; border-width: 1px;} .quran-header{ flex-wrap: wrap; gap: 8px; margin-bottom: 16px;} .surah-tag{ font-size: 0.8rem; padding: 5px 11px;} .arabic-text{ font-size: clamp(1.4rem, 7vw, 1.65rem); line-height: 2.05; margin-bottom: 16px; overflow-wrap: anywhere;} .translation-text{ font-size: 1rem; line-height: 1.7;} .dua-card-box{ padding: 18px 16px; margin: 20px 0;} .dua-title{ font-size: 1.05rem;} .transliteration{ font-size: 0.98rem; line-height: 1.65;} .content-box-actions{ justify-content: flex-start; gap: 8px;} .btn-action{ min-height: 44px; padding: 9px 12px; font-size: 0.86rem;} .entry-content{ font-size: 1.05rem; line-height: 1.8; overflow-wrap: break-word;} .entry-content img{ width: auto; max-width: 100%; height: auto; margin-left: auto; margin-right: auto;} .entry-content figure{ max-width: 100%;} .entry-content table{ display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;} .entry-content blockquote{ padding: 14px 16px;} .entry-content h2{ font-size: 1.4rem;} .entry-content h3{ font-size: 1.25rem;} .entry-content h4{ font-size: 1.1rem;} .search-form .search-field{ min-width: 0; font-size: 16px;} .search-form button[type="submit"]{ min-width: 48px; min-height: 46px; padding: 0 15px;} .widget-area .widget{ padding: 20px; margin-bottom: 20px;} .related-posts-section{ margin-top: 32px; padding-top: 28px;} .related-section-title{ font-size: 1.3rem; margin-bottom: 18px;} .footer-inner{ grid-template-columns: 1fr; gap: 28px; margin-bottom: 28px;} .site-footer{ padding: 40px 0 24px;} .footer-bottom{ flex-direction: column; align-items: flex-start; gap: 8px; text-align: left;} .social-link{ width: 44px; height: 44px;} .toast-notification{ left: 14px; right: 14px; bottom: calc(14px+ env(safe-area-inset-bottom)); text-align: center; padding: 12px 16px;} .back-to-top-btn{ bottom: calc(16px+ env(safe-area-inset-bottom)); right: 14px;}} @media(max-width: 380px){ .container{ padding-left: 12px; padding-right: 12px;} .brand-title{ font-size: 1.05rem;} .action-btn{ width: 42px; min-width: 42px; height: 42px; min-height: 42px;} .quran-box{ padding: 15px 12px;} .content-box-actions .btn-action{ flex: 1 1 auto; justify-content: center;}} @media(prefers-reduced-motion: reduce){ html{ scroll-behavior: auto;} *, *::before, *::after{ transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;}} .skip-link:focus{ position: fixed; left: 16px; top: 16px; z-index: 99999; padding: 10px 16px; background: var(--color-primary); color: #fff; border-radius: 6px;} .site-breadcrumb-wrap{ padding-top: 14px;} .breadcrumbs{ font-size: .82rem; color: var(--color-text-muted);} .breadcrumbs ol{ list-style: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;} .breadcrumbs li:not(:last-child)::after{ content: '/'; margin-left: 8px; color: var(--color-text-light);} .breadcrumbs a{ color: var(--color-primary-light); text-decoration: none;} .breadcrumbs a:hover{ text-decoration: underline;} .home-search-section{ margin: 28px 0 36px; padding: 30px; text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);} .home-search-section h2, .topic-directory h2, .home-section-title h2{ margin: 0 0 8px; color: var(--color-primary);} .home-search-section p{ color: var(--color-text-muted); margin-bottom: 18px;} .home-search-section .search-form{ max-width: 620px; margin: 0 auto;} .section-eyebrow{ display: block; color: var(--color-accent-hover); font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 5px;} .topic-directory{ margin: 34px 0 44px;} .topic-grid{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px;} .topic-card{ display: flex; flex-direction: column; gap: 5px; padding: 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-main); text-decoration: none; transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);} .topic-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-accent);} .topic-card strong{ color: var(--color-primary); font-size: 1.02rem;} .topic-card span:last-child{ color: var(--color-text-muted); font-size: .8rem;} .topic-card-icon{ position: relative; padding-left: 62px; min-height: 88px; justify-content: center;} .topic-icon{ position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--color-accent-light); color: var(--color-accent-hover);} .home-section-title{ margin: 0 0 20px;} .category-hub{ margin: 0 0 28px; padding: 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);} .category-hub h2{ margin-bottom: 16px; color: var(--color-primary);} .category-hub .topic-grid{ grid-template-columns: repeat(2, minmax(0,1fr));} .toc-box{ margin: 0 0 30px; padding: 20px 22px; background: var(--color-accent-light); border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: var(--radius-md);} .toc-box h2{ font-size: 1rem; color: var(--color-primary); margin-bottom: 10px;} .toc-list{ margin: 0; padding-left: 22px;} .toc-list li{ margin: 5px 0;} .toc-list .toc-level-3{ margin-left: 18px; font-size: .94em;} .share-buttons{ display: flex; gap: 8px; align-items: center; margin: 0 0 24px; flex-wrap: wrap;} .share-label{ font-weight: 700; font-size: .85rem; color: var(--color-text-muted); margin-right: 3px;} .share-buttons a, .share-buttons button{ width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-bg); color: var(--color-primary); text-decoration: none; cursor: pointer;} .share-buttons a:hover, .share-buttons button:hover{ border-color: var(--color-accent); color: var(--color-accent-hover);} .author-trust-box{ display: flex; gap: 18px; align-items: flex-start; margin-top: 42px; padding: 22px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md);} .author-avatar-img{ border-radius: 50%;} .author-trust-box h2{ margin: 0 0 6px; font-size: 1.05rem; color: var(--color-primary);} .author-trust-box p{ margin: 0 0 8px; color: var(--color-text-muted); font-size: .92rem;} .author-trust-box a{ font-weight: 700; font-size: .88rem; color: var(--color-primary-light);} .source-box, .deeoiman-callout{ margin: 28px 0; padding: 20px 22px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-elevated);} .source-box{ border-left: 4px solid var(--color-primary-light);} .deeoiman-callout{ border-left: 4px solid var(--color-accent);} .source-box h2, .deeoiman-callout h2{ font-size: 1rem; color: var(--color-primary); margin-bottom: 8px;} .source-box p, .deeoiman-callout p{ margin-bottom: 8px;} .search-result-summary{ color: var(--color-text-muted); margin: -20px 0 24px; font-size: .9rem;} .archive-author-header{ display: flex; gap: 24px; align-items: center; margin-bottom: 34px; padding: 30px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);} .archive-author-header h1{ margin: 0 0 8px; color: var(--color-primary);} .archive-author-header p{ margin: 0; color: var(--color-text-muted); max-width: 720px;} .author-archive-avatar img{ border-radius: 50%;} .card-placeholder{ width: 100%; height: 100%; min-height: 160px; display: grid; place-items: center; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); color: var(--color-accent); font-size: 2.5rem;} .topic-count{ margin-left: auto;} .widget_categories li a{ display: flex; align-items: center; gap: 8px;} .post-navigation-cards a{ text-decoration: none;} @media(max-width: 868px){ .topic-grid, .category-hub .topic-grid{ grid-template-columns: 1fr 1fr;} .author-trust-box{ align-items: flex-start;}} @media(max-width: 560px){ .topic-grid, .category-hub .topic-grid{ grid-template-columns: 1fr;} .home-search-section{ padding: 22px 16px;} .archive-author-header{ flex-direction: column; align-items: flex-start;} .author-trust-box{ flex-direction: column;}} @media(prefers-reduced-motion: reduce){ *, *::before, *::after{ scroll-behavior: auto !important; transition: none !important; animation: none !important;}} html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%;} body{ overflow-x: hidden;} button, input, select, textarea{ font: inherit;}:focus-visible{ outline: 3px solid var(--color-accent); outline-offset: 2px;} .container{ padding-left: 16px; padding-right: 16px;} .site-main{ padding: 24px 0 56px;} .layout-grid{ gap: 24px;} .sidebar-widget-area{ order: 2;} .content-area{ min-width: 0;} .bismillah-banner{ padding: 12px 0 8px;} .bismillah-text{ font-size: clamp(1.45rem, 6vw, 2rem);} .site-breadcrumb-wrap{ padding-top: 10px;} .breadcrumbs{ font-size: .78rem; overflow-wrap: anywhere;} .hero-section{ padding: 24px 18px; margin-bottom: 28px; border-radius: 16px;} .hero-title{ font-size: clamp(1.55rem, 7vw, 2.2rem);} .hero-description{ font-size: 1rem; margin-bottom: 18px;} .post-grid{ grid-template-columns: 1fr; gap: 16px;} .post-card{ border-radius: 12px;} .card-image-wrap{ height: auto; aspect-ratio: 16 / 9;} .card-content{ padding: 18px 16px 20px;} .card-title{ font-size: 1.12rem; line-height: 1.4;} .card-excerpt{ font-size: .95rem; line-height: 1.65;} .single-post-main{ padding-top: 0;} .single-hero-banner{ background: linear-gradient(135deg, var(--color-primary) 0%, #154D3D 100%); color: #fff; padding: 28px 0 52px; position: relative; overflow: hidden;} .single-hero-inner{ max-width: 860px; margin: 0 auto;} .single-category-badge{ margin-bottom: 12px;} .single-post-title{ font-size: clamp(1.65rem, 7.2vw, 2.5rem); line-height: 1.2; font-weight: 800; color: #fff; margin: 0 0 16px; overflow-wrap: anywhere;} .single-post-meta{ display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; font-size: .84rem; line-height: 1.45; color: rgba(255,255,255,.9);} .single-post-meta i{ color: var(--color-accent);} .single-content-container{ margin-top: -28px; position: relative; z-index: 10;} .single-article-card{ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 20px 16px; box-shadow: var(--shadow-md); min-width: 0;} .single-featured-wrap{ margin: 0 0 24px; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm);} .single-featured-wrap img{ width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;} .entry-content{ font-size: 1.06rem; line-height: 1.78; overflow-wrap: anywhere; word-break: normal;} .entry-content p{ margin-bottom: 1.05em;} .entry-content h2{ font-size: 1.38rem; line-height: 1.3; margin: 1.6em 0 .65em; scroll-margin-top: 76px;} .entry-content h3{ font-size: 1.18rem; line-height: 1.35; margin: 1.35em 0 .55em; scroll-margin-top: 76px;} .entry-content h4{ font-size: 1.05rem;} .entry-content ul, .entry-content ol{ padding-left: 1.35rem; margin-bottom: 1.1em;} .entry-content li{ margin-bottom: .45em;} .entry-content a{ text-decoration-thickness: .08em; text-underline-offset: .15em;} .entry-content iframe, .entry-content video, .entry-content embed, .entry-content object{ max-width: 100%;} .entry-content pre{ max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;} .entry-content table{ font-size: .92rem;} .entry-content blockquote{ margin: 1.25em 0; padding: 14px 16px;} .quran-box, .dua-card-box{ padding: 18px 14px; margin: 20px 0; border-radius: 12px;} .arabic-text{ font-size: clamp(1.65rem, 7vw, 2rem); line-height: 2; overflow-wrap: anywhere;} .transliteration{ font-size: 1rem; line-height: 1.75;} .translation-text{ line-height: 1.75;} .content-box-actions{ gap: 8px;} .btn-action{ min-height: 44px; padding: 9px 12px;} .toc-box{ margin-bottom: 24px; padding: 16px;} .toc-list{ padding-left: 20px;} .toc-list li{ margin: 6px 0;} .share-buttons{ margin-bottom: 20px; gap: 7px;} .share-buttons a, .share-buttons button{ width: 42px; height: 42px; min-width: 42px;} .share-label{ font-size: .82rem;} .author-trust-box{ margin-top: 32px; padding: 18px;} .source-box, .deeoiman-callout{ padding: 16px; margin: 22px 0;} .post-after-content-area{ margin-top: 28px;} .post-navigation-cards{ margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--color-border); display: grid; grid-template-columns: 1fr; gap: 12px;} .nav-card-prev, .nav-card-next{ background: var(--color-bg); padding: 16px; border-radius: 10px; border: 1px solid var(--color-border); min-width: 0;} .nav-card-next{ text-align: left;} .nav-card-prev span, .nav-card-next span{ display: block; font-size: .76rem; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase;} .nav-card-prev div, .nav-card-next div{ margin-top: 6px; font-weight: 700; font-size: .95rem; overflow-wrap: anywhere;} .comments-area-wrap{ margin-top: 36px;} .home-search-section{ margin: 20px 0 28px; padding: 20px 16px; border-radius: 14px;} .home-search-section h2, .topic-directory h2, .home-section-title h2{ font-size: 1.35rem;} .search-form{ display: flex; width: 100%;} .search-form .search-field{ width: 100%; min-width: 0; min-height: 48px; font-size: 16px;} .search-form button[type="submit"]{ min-width: 48px; min-height: 48px;} .topic-directory{ margin: 26px 0 32px;} .topic-grid, .category-hub .topic-grid{ grid-template-columns: 1fr; gap: 10px;} .topic-card{ min-height: 76px; padding: 15px 14px;} .topic-card-icon{ padding-left: 54px; min-height: 70px;} .topic-icon{ left: 14px; width: 32px; height: 32px;} .category-hub{ padding: 18px 14px; border-radius: 12px;} .archive-author-header{ padding: 20px 16px; margin-bottom: 24px;} @media(max-width: 991px){ .layout-grid.has-sidebar{ grid-template-columns: 1fr;} .sidebar-widget-area{ width: 100%;} .sidebar-widget-area .widget{ margin-bottom: 16px;}} @media(min-width: 992px){ .site-main{ padding-top: 40px;} .single-content-container{ margin-top: -40px;} .single-article-card{ padding: 40px; border-radius: 20px;} .post-navigation-cards{ grid-template-columns: repeat(2, minmax(0,1fr));} .nav-card-next{ text-align: right;}} .mobile-utility-bar{ display: none;} @media(max-width: 868px){ body{ padding-bottom: calc(58px+ env(safe-area-inset-bottom));} .mobile-utility-bar{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 1400; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 6px 8px calc(6px+ env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--color-surface) 96%, transparent); border-top: 1px solid var(--color-border); box-shadow: 0 -4px 18px rgba(0,0,0,.08); backdrop-filter: blur(10px);} .mobile-utility-bar a, .mobile-utility-bar button{ min-height: 44px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; border: 0; background: transparent; color: var(--color-text-main); font-size: .7rem; font-weight: 600; text-decoration: none; cursor: pointer;} .mobile-utility-bar i{ font-size: 1rem; color: var(--color-primary-light);} html.dark-mode body .mobile-utility-bar i{ color: var(--color-accent);}} @media(max-width: 380px){ .container{ padding-left: 12px; padding-right: 12px;} .single-article-card{ padding-left: 13px; padding-right: 13px;} .brand-title{ font-size: 1.05rem;}} @media(prefers-reduced-motion: reduce){ html{ scroll-behavior: auto;}} @supports not(color: color-mix(in srgb, white, black)){ .mobile-utility-bar{ background: var(--color-surface);}} .homepage-content-section{ margin: 34px 0 44px;} .homepage-content-section .section-heading-row{ margin-bottom: 18px;} .section-heading-row{ display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;} .section-view-all{ flex: 0 0 auto; color: var(--color-primary-light); font-weight: 700; text-decoration: none; white-space: nowrap;} .section-view-all:hover{ color: var(--color-accent-hover); text-decoration: underline;} .homepage-post-grid{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px;} .homepage-post-card{ min-width: 0; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: transform var(--transition-fast), box-shadow var(--transition-fast);} .homepage-post-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md);} .homepage-card-image{ display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-bg);} .homepage-card-image img{ display: block; width: 100%; height: 100%; object-fit: cover;} .homepage-card-content{ padding: 15px 16px 17px;} .homepage-card-content h3{ margin: 9px 0 7px; font-size: 1.05rem; line-height: 1.35;} .homepage-card-content h3 a{ color: var(--color-text-main); text-decoration: none;} .homepage-card-content h3 a:hover{ color: var(--color-primary-light);} .homepage-card-content p{ margin: 0; color: var(--color-text-muted); font-size: .88rem; line-height: 1.55;} .homepage-latest{ margin-bottom: 34px;} .card-placeholder{ display: flex; align-items: center; justify-content: center; height: 100%; min-height: 180px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%); color: var(--color-accent); font-size: 3rem; text-decoration: none;} .pagination-wrap{ margin-top: 50px; text-align: center;} .empty-state{ padding: 40px 20px; text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);} @media(max-width: 991px){ .homepage-post-grid{ grid-template-columns: repeat(2, minmax(0,1fr));}} @media(max-width: 600px){ .homepage-content-section{ margin: 28px 0 34px;} .homepage-post-grid{ grid-template-columns: 1fr; gap: 12px;} .homepage-post-card{ display: grid; grid-template-columns: 104px minmax(0,1fr); align-items: stretch;} .homepage-card-image{ aspect-ratio: auto; min-height: 118px; height: 100%;} .homepage-card-content{ padding: 12px 12px 13px;} .homepage-card-content h3{ margin-top: 5px; font-size: .98rem;} .homepage-card-content p{ display: none;} .section-heading-row{ align-items: center;} .section-view-all{ font-size: .84rem;}} body.single-post .bismillah-banner{ padding-top: 22px; padding-bottom: 22px;} body.admin-bar .site-header{ top: 32px;} @media(max-width: 782px){ body.admin-bar .site-header{ top: 46px;}} .pinned-pages-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;} .pinned-page-card{ min-height: 76px; display: flex; align-items: center; gap: 12px; padding: 14px 15px; border: 1px solid var(--color-border, #e5e7eb); border-radius: 14px; background: var(--color-surface, #fff); color: inherit; text-decoration: none; box-shadow: 0 2px 10px rgba(0,0,0,.04); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;} .pinned-page-card:hover, .pinned-page-card:focus-visible{ transform: translateY(-2px); box-shadow: 0 7px 20px rgba(0,0,0,.08); border-color: var(--color-accent, #2f7d63);} .pinned-page-icon{ flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(47,125,99,.10); color: var(--color-accent, #2f7d63); font-size: 18px;} .pinned-page-title{ min-width: 0; flex: 1; font-weight: 700; line-height: 1.3;} .pinned-page-arrow{ opacity: .55; font-size: 13px;} @media(max-width: 868px){ .pinned-pages-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;} .pinned-page-card{ min-height: 68px; padding: 12px; gap: 10px; border-radius: 12px;} .pinned-page-icon{ width: 40px; height: 40px; flex-basis: 40px; border-radius: 10px;} .pinned-page-arrow{ display: none;}} @media(max-width: 420px){ .pinned-pages-grid{ grid-template-columns: 1fr;} .pinned-page-card{ min-height: 58px;}} .footer-brand-hidden{ display: none;} .footer-ayah-card{ background: rgba(255,255,255,0.05); padding: 16px; border-radius: 10px; border-left: 3px solid var(--color-accent);} .footer-ayah-arabic{ font-family: var(--font-arabic); font-size: 1.3rem; color: var(--color-accent); direction: rtl; margin-bottom: 8px; line-height: 1.6;} .footer-ayah-translation{ font-size: 0.85rem; color: #D1E0DA; font-style: italic; margin-bottom: 4px;} .footer-ayah-reference{ font-size: 0.75rem; color: var(--color-accent); font-weight: 700;} .site-header{ position: sticky; top: 0; z-index: 1100;} .header-inner{ display: flex; align-items: center; justify-content: space-between; min-width: 0;} .site-brand{ display: flex; align-items: center; flex: 1 1 auto; min-width: 0; gap: 12px;} .site-brand .custom-logo-wrap, .site-brand> .brand-icon{ flex: 0 0 auto;} .site-brand .custom-logo-wrap{ display: flex; align-items: center; justify-content: center;} .site-brand .custom-logo-link{ display: flex; align-items: center; justify-content: center;} .site-brand .custom-logo-link img{ display: block; width: auto; height: auto; max-width: var(--logo-max-width) !important; max-height: var(--logo-max-height) !important; object-fit: contain;} .brand-text-wrapper{ min-width: 0; display: flex; flex-direction: column;} .brand-title{ display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none;} .brand-tagline{ display: block; min-width: 0;} @media(min-width: 869px){ .header-inner{ min-height: 72px;} .main-nav{ display: flex; position: static; width: auto; max-height: none; overflow: visible; padding: 0; border: 0; box-shadow: none; background: transparent;} .nav-list{ flex-direction: row;} .mobile-menu-toggle{ display: none;} .brand-tagline{ display: block;}} html.dark-mode body .home-search-section h2, html.dark-mode body .topic-directory h2, html.dark-mode body .home-section-title h2, html.dark-mode body .category-hub h2, html.dark-mode body .topic-card strong, html.dark-mode body .toc-box h2, html.dark-mode body .author-trust-box h2, html.dark-mode body .source-box h2, html.dark-mode body .deeoiman-callout h2, html.dark-mode body .archive-author-header h1{ color: var(--color-text-main);} @media(max-width: 868px){:root{ --deeoiman-mobile-header-height: 84px;} .site-header .header-inner{ min-height: var(--deeoiman-mobile-header-height); height: var(--deeoiman-mobile-header-height); padding: 8px 14px; gap: 8px; overflow: hidden; box-sizing: border-box;} .site-header .site-brand{ flex: 1 1 auto; min-width: 0; max-width: none; width: auto; height: 100%; gap: 9px; overflow: hidden;} .site-header .site-brand .custom-logo-wrap, .site-header .site-brand> .brand-icon{ flex: 0 0 46px; width: 46px; min-width: 46px; height: 46px; min-height: 46px; max-height: 46px; position: static; transform: none; margin: 0;} .site-header .site-brand .custom-logo-link{ width: 46px; height: 46px;} .site-header .site-brand .custom-logo-link img, .site-header .site-brand .custom-logo{ display: block; width: auto !important; height: auto !important; max-width: 46px !important; max-height: 46px !important; object-fit: contain; margin: 0;} .site-header .brand-text-wrapper{ flex: 1 1 0; min-width: 0; width: auto; max-width: none; height: auto; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 3px; margin: 0; padding: 0;} .site-header .brand-title{ width: 100%; max-width: 100%; font-size: 1.28rem; line-height: 1.08; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .site-header .brand-tagline{ width: 100%; max-width: 100%; font-size: .68rem; line-height: 1.2; font-weight: 500; letter-spacing: .025em; text-transform: none; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;} .site-header .header-actions{ flex: 0 0 auto; display: flex; align-items: center; gap: 6px; width: auto; height: auto; margin: 0; padding: 0; position: static;} .site-header .action-btn{ flex: 0 0 42px; width: 42px; min-width: 42px; height: 42px; min-height: 42px; max-height: 42px; margin: 0; padding: 0;} .site-header .main-nav{ display: none; position: fixed; top: var(--deeoiman-mobile-header-height); left: 0; right: 0; bottom: 0; width: 100%; max-height: calc(100dvh - var(--deeoiman-mobile-header-height)); overflow-y: auto; padding: 12px 16px calc(24px+ env(safe-area-inset-bottom)); background: var(--color-surface); border-top: 1px solid var(--color-border); box-shadow: var(--shadow-lg); box-sizing: border-box;} .site-header .main-nav.is-open{ display: block;} body.admin-bar .site-header .main-nav{ top: calc(var(--deeoiman-mobile-header-height)+ 46px); max-height: calc(100dvh - var(--deeoiman-mobile-header-height) - 46px);}} @media(max-width: 420px){:root{ --deeoiman-mobile-header-height: 78px;} .site-header .header-inner{ padding-left: 10px; padding-right: 10px; gap: 6px;} .site-header .site-brand{ gap: 7px;} .site-header .site-brand .custom-logo-wrap, .site-header .site-brand> .brand-icon, .site-header .site-brand .custom-logo-link{ flex-basis: 40px; width: 40px; min-width: 40px; height: 40px; min-height: 40px; max-height: 40px;} .site-header .site-brand .custom-logo-link img, .site-header .site-brand .custom-logo{ max-width: 40px !important; max-height: 40px !important;} .site-header .brand-title{ font-size: 1.16rem;} .site-header .brand-tagline{ font-size: .64rem;} .site-header .header-actions{ gap: 4px;} .site-header .action-btn{ flex-basis: 38px; width: 38px; min-width: 38px; height: 38px; min-height: 38px; max-height: 38px;}} @media(max-width: 360px){:root{ --deeoiman-mobile-header-height: 74px;} .site-header .header-inner{ padding-left: 8px; padding-right: 8px; gap: 5px;} .site-header .site-brand{ gap: 6px;} .site-header .site-brand .custom-logo-wrap, .site-header .site-brand> .brand-icon, .site-header .site-brand .custom-logo-link{ flex-basis: 36px; width: 36px; min-width: 36px; height: 36px; min-height: 36px; max-height: 36px;} .site-header .site-brand .custom-logo-link img, .site-header .site-brand .custom-logo{ max-width: 36px !important; max-height: 36px !important;} .site-header .brand-title{ font-size: 1.05rem;} .site-header .brand-tagline{ font-size: .58rem;} .site-header .action-btn{ flex-basis: 35px; width: 35px; min-width: 35px; height: 35px; min-height: 35px; max-height: 35px;}} @media(max-width: 868px){ .site-footer .footer-inner{ gap: 30px;} .site-footer .footer-brand .site-brand{ min-height: 48px;} .site-footer .footer-custom-logo{ max-width: 150px; max-height: 48px;} .footer-ayah-card{ padding: 14px;} .footer-ayah-arabic{ font-size: 1.2rem;}} .deeoiman-icon{ display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -0.125em; overflow: visible;} button .deeoiman-icon, a .deeoiman-icon, .btn-action .deeoiman-icon{ pointer-events: none;} .archive-header{ margin-bottom: 40px; padding: 30px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);} .archive-header h1{ font-size: 2rem; color: var(--color-primary); margin-bottom: 10px;} .archive-description{ color: var(--color-text-muted); font-size: 1rem;} .search-query-highlight{ color: var(--color-accent-hover);} .search-header-form{ max-width: 420px; margin-top: 16px;} .empty-state-message{ text-align: center; font-size: 1.1rem; color: var(--color-text-muted); margin-bottom: 20px;} .empty-state-form{ max-width: 380px; margin: 0 auto;} .archive-header+ .category-hub{ margin-top: -12px;} .single-article-card{ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-md);} .single-article-card .page-header{ margin-bottom: 30px;} .single-article-card .page-header h1{ font-size: 2.2rem; font-weight: 800; color: var(--color-primary);} .single-featured-wrap{ margin-bottom: 36px; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm);} .single-featured-image{ width: 100%; height: var(--single-featured-height); object-fit: cover;} .comments-wrap{ margin-top: 50px;} .error-page{ text-align: center; padding: 60px 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); margin: 0 auto;} .error-icon{ width: 90px; height: 90px; margin: 0 auto 24px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%); color: var(--color-accent); display: flex; align-items: center; justify-content: center; font-size: 2.4rem; border: 2px solid var(--color-accent);} .error-page h1{ font-size: 2rem; font-weight: 800; color: var(--color-primary); margin-bottom: 12px;} .error-description{ color: var(--color-text-muted); font-size: 1.05rem; max-width: 480px; margin: 0 auto 30px; line-height: 1.7;} .error-search{ max-width: 420px; margin: 0 auto 36px;} .error-actions{ display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;} .widget-daily-reminder{ background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%); color: #fff; border-color: var(--color-accent);} .widget-daily-reminder .widget-title{ color: var(--color-accent); border-bottom-color: var(--color-accent);} .widget-daily-arabic{ font-family: var(--font-arabic); font-size: 1.25rem; color: var(--color-accent); direction: rtl; margin-bottom: 10px; line-height: 1.6;} .widget-daily-translation{ font-size: .9rem; line-height: 1.6; color: rgba(255,255,255,.9); margin-bottom: 16px;} .widget-daily-reference{ font-weight: 700; font-size: .8rem; color: var(--color-accent);} .footer-description{ margin-top: 16px; color: #A0B8AF; font-size: .9rem; line-height: 1.6;} html.dark-mode body .archive-header h1, html.dark-mode body .single-article-card .page-header h1, html.dark-mode body .error-page h1, html.dark-mode body .home-search-section h2, html.dark-mode body .topic-directory h2, html.dark-mode body .topic-card strong, html.dark-mode body .category-hub h2, html.dark-mode body .toc-box h2, html.dark-mode body .source-box h2, html.dark-mode body .deeoiman-callout h2, html.dark-mode body .author-trust-box h2{ color: var(--color-text-main);} html.dark-mode body .search-query-highlight{ color: var(--color-accent);} @media(max-width: 868px){ .single-article-card{ padding: 24px 18px;} .single-article-card .page-header h1{ font-size: 1.8rem;} .single-featured-image{ height: min(var(--single-featured-height), 62vw);} .archive-header{ padding: 22px 18px; margin-bottom: 28px;} .error-page{ padding: 40px 18px;}} @media(max-width: 560px){ .single-article-card{ padding: 20px 14px;} .single-article-card .page-header h1{ font-size: 1.55rem;} .single-featured-wrap{ margin-bottom: 24px;}} .deeoiman-icon{ width: 1em; height: 1em; display: inline-block; flex: 0 0 auto; vertical-align: -0.125em;} .action-btn .deeoiman-icon{ width: 1.15em; height: 1.15em;} .social-link .deeoiman-icon{ width: 1.05em; height: 1.05em;} .mobile-utility-bar .deeoiman-icon{ width: 1.35em; height: 1.35em;} .pinned-page-icon .deeoiman-icon, .topic-icon .deeoiman-icon{ width: 1.15em; height: 1.15em;} html.dark-mode body .section-eyebrow{ color: var(--color-accent);} html.dark-mode body .home-search-section p, html.dark-mode body .archive-description, html.dark-mode body .empty-state-message{ color: var(--color-text-muted);} html.dark-mode body .topic-card, html.dark-mode body .pinned-page-card{ color: var(--color-text-main);} @media(prefers-reduced-motion: reduce){ html{ scroll-behavior: auto !important;}}

/* v1.11.1 UI refinement: navigation, theme control, homepage topics, widgets. */
.site-header .main-nav{ margin-left:auto; }
.site-header .nav-list{ gap:4px; }
.site-header .nav-list > li{ position:relative; list-style:none; }
.site-header .nav-list > li > a{ display:flex; align-items:center; gap:6px; white-space:nowrap; font-size:.88rem; font-weight:600; color:var(--color-text-main); padding:9px 10px; border-radius:var(--radius-sm); text-decoration:none; }
.site-header .nav-list > li > a:hover,
.site-header .nav-list > li > a:focus-visible,
.site-header .nav-list > li.current-menu-item > a,
.site-header .nav-list > li.current-menu-ancestor > a{ background:var(--color-bg); color:var(--color-primary); }
html.dark-mode body .site-header .nav-list > li > a:hover,
html.dark-mode body .site-header .nav-list > li > a:focus-visible,
html.dark-mode body .nav-list > li.current-menu-item > a,
html.dark-mode body .nav-list > li.current-menu-ancestor > a{ color:var(--color-accent); }
.site-header .nav-list > li.menu-item-has-children > a::after{ content:""; width:6px; height:6px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform var(--transition-fast); }
.site-header .nav-list > li.menu-item-has-children:hover > a::after,
.site-header .nav-list > li.menu-item-has-children:focus-within > a::after{ transform:rotate(225deg) translate(-1px,-1px); }
.site-header .nav-list .sub-menu{ position:absolute; z-index:1100; top:calc(100% + 6px); left:0; min-width:190px; margin:0; padding:8px; list-style:none; background:var(--color-surface-elevated); border:1px solid var(--color-border); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(-5px); transition:opacity var(--transition-fast),transform var(--transition-fast),visibility var(--transition-fast); }
.site-header .nav-list > li:hover > .sub-menu,
.site-header .nav-list > li:focus-within > .sub-menu,
.site-header .nav-list > li.submenu-open > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.site-header .nav-list .sub-menu li{ position:relative; list-style:none; }
.site-header .nav-list .sub-menu a{ display:block; padding:9px 11px; color:var(--color-text-main); font-size:.86rem; font-weight:600; line-height:1.35; border-radius:var(--radius-sm); text-decoration:none; }
.site-header .nav-list .sub-menu a:hover,
.site-header .nav-list .sub-menu a:focus-visible,
.site-header .nav-list .sub-menu .current-menu-item > a{ background:var(--color-bg); color:var(--color-primary); }
html.dark-mode body .site-header .nav-list .sub-menu a:hover,
html.dark-mode body .site-header .nav-list .sub-menu a:focus-visible,
html.dark-mode body .nav-list .sub-menu .current-menu-item > a{ color:var(--color-accent); }
.site-header .nav-list .sub-menu .sub-menu{ top:-8px; left:calc(100% + 6px); }
.submenu-toggle{ display:none; }

/* Refined light/dark theme control. */
.site-header .action-btn#theme-toggle{ width:42px; height:42px; border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-primary); box-shadow:0 2px 8px rgba(15,56,44,.08); }
.site-header .action-btn#theme-toggle:hover{ background:var(--color-primary); color:var(--color-accent); border-color:var(--color-primary); transform:translateY(-1px); }
.site-header .action-btn#theme-toggle .deeoiman-icon{ width:20px; height:20px; stroke-width:2; }
html.dark-mode body .site-header .action-btn#theme-toggle{ color:var(--color-accent); background:var(--color-surface-elevated); border-color:var(--color-border); }

/* Islamic Knowledge: compact horizontal carousel, 3 desktop / 2 mobile. */
.homepage-topics .topic-section-heading{ align-items:flex-end; }
.topic-carousel-controls{ display:flex; gap:6px; flex:0 0 auto; }
.topic-carousel-btn{ width:36px; height:36px; display:grid; place-items:center; padding:0; border:1px solid var(--color-border); border-radius:50%; background:var(--color-surface); color:var(--color-primary); cursor:pointer; transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast); }
.topic-carousel-btn:hover:not(:disabled),.topic-carousel-btn:focus-visible:not(:disabled){ background:var(--color-primary); color:var(--color-accent); border-color:var(--color-primary); transform:translateY(-1px); }
.topic-carousel-btn:disabled{ opacity:.38; cursor:not-allowed; }
.topic-carousel{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; padding:2px 1px 8px; }
.topic-carousel::-webkit-scrollbar{ display:none; }
.topic-carousel .topic-grid{ display:flex; flex-wrap:nowrap; gap:14px; width:max-content; }
.topic-carousel .topic-card{ width:calc((min(100vw - 48px, var(--container-max-width)) - 28px) / 3); min-width:240px; scroll-snap-align:start; min-height:78px; padding:16px 18px 16px 62px; }
.topic-carousel .topic-icon{ left:18px; width:32px; height:32px; }
html.dark-mode body .topic-carousel-btn{ background:var(--color-surface-elevated); color:var(--color-accent); }

/* Homepage eyebrow contrast: WCAG-friendly in light mode. */
.section-eyebrow{ color:#8A6B0A; }
html.dark-mode body .section-eyebrow{ color:var(--color-accent); }

/* Custom sidebar widgets are visually separated but retain the theme defaults. */
.deeoiman-custom-sidebar-widgets{ margin-top:28px; padding-top:24px; border-top:1px solid var(--color-border); }

/* Footer links are intentionally shown without a generic "Footer Menu" heading. */
.site-footer .footer-links{ margin-top:0; }

@media(max-width:1100px) and (min-width:869px){
    .site-header .header-inner{ gap:10px; }
    .site-header .site-brand{ flex:1 1 280px; min-width:240px; }
    .site-header .main-nav{ flex:0 1 auto; }
    .site-header .nav-list{ gap:1px; }
    .site-header .nav-list > li > a{ padding-left:7px; padding-right:7px; font-size:.82rem; }
    .site-header .header-actions{ flex:0 0 auto; }
}

@media(max-width:868px){
    .site-header .main-nav{ margin-left:0; }
    .site-header .nav-list{ gap:4px; }
    .site-header .nav-list > li{ width:100%; }
    .site-header .nav-list > li > a{ min-height:46px; padding:10px 46px 10px 12px; font-size:.98rem; background:transparent; }
    .site-header .nav-list > li > a::after{ display:none !important; }
    .site-header .nav-list .sub-menu{ position:static; min-width:0; display:none; opacity:1; visibility:visible; transform:none; margin:0 0 4px 10px; padding:4px 0 4px 10px; border:0; border-left:2px solid var(--color-accent); border-radius:0; box-shadow:none; background:transparent; }
    .site-header .nav-list > li.submenu-open > .sub-menu{ display:block; }
    .site-header .nav-list .sub-menu .sub-menu{ position:static; margin-left:10px; }
    .site-header .nav-list .sub-menu a{ min-height:42px; padding:9px 12px; background:var(--color-bg); }
    .submenu-toggle{ display:grid; place-items:center; position:absolute; z-index:2; top:3px; right:3px; width:40px; height:40px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--color-text-muted); cursor:pointer; }
    .submenu-toggle span{ display:block; font-size:20px; line-height:1; transition:transform var(--transition-fast); }
    .menu-item-has-children.submenu-open > .submenu-toggle{ color:var(--color-primary); background:var(--color-accent-light); }
    .menu-item-has-children.submenu-open > .submenu-toggle span{ transform:rotate(180deg); }
    html.dark-mode body .menu-item-has-children.submenu-open > .submenu-toggle{ color:var(--color-accent); }
    .topic-section-heading{ align-items:center; }
    .topic-carousel{ margin-right:-1px; }
    .topic-carousel .topic-grid{ gap:14px; }
    .topic-carousel .topic-card{ width:calc((100vw - 48px - 14px) / 2); min-width:calc((100vw - 48px - 14px) / 2); min-height:76px; }
}

@media(max-width:420px){
    .topic-carousel .topic-card{ width:calc((100vw - 34px - 10px) / 2); min-width:calc((100vw - 34px - 10px) / 2); padding-left:54px; }
    .topic-carousel .topic-icon{ left:14px; }
    .topic-carousel-controls{ gap:4px; }
    .topic-carousel-btn{ width:34px; height:34px; }
}


/* v1.11.3 UI hardening: isolate banner and fixed notifications from host/plugin CSS. */
.site-header + .bismillah-banner,
.site-header + .site-breadcrumb-wrap + .bismillah-banner{
    display:block !important;
    position:relative !important;
    clear:both !important;
    width:100% !important;
    float:none !important;
    margin:0 !important;
    overflow:visible !important;
    z-index:1 !important;
    text-align:center !important;
}
.bismillah-banner > .container{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    max-width:var(--container-max-width,1240px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    float:none !important;
    text-align:center !important;
}
.bismillah-banner .bismillah-text{
    display:block !important;
    width:100% !important;
    margin:0 auto !important;
    padding:0 !important;
    float:none !important;
    position:relative !important;
    text-align:center !important;
    direction:rtl !important;
    line-height:1.35 !important;
}

/* Fixed controls must stay viewport-anchored even when plugins add generic positioning rules. */
html body #back-to-top.back-to-top-btn{
    position:fixed !important;
    top:auto !important;
    left:auto !important;
    bottom:28px !important;
    right:28px !important;
    z-index:1500 !important;
}
html body #toast.toast-notification{
    position:fixed !important;
    top:auto !important;
    left:50% !important;
    right:auto !important;
    bottom:90px !important;
    width:max-content !important;
    max-width:min(92vw,460px) !important;
    transform:translate(-50%,100px) !important;
    z-index:4000 !important;
}
html body #toast.toast-notification.show{
    transform:translate(-50%,0) !important;
}
@media(max-width:600px){
    html body #back-to-top.back-to-top-btn{
        top:auto !important;
        left:auto !important;
        bottom:calc(72px + env(safe-area-inset-bottom)) !important;
        right:14px !important;
    }
    html body #toast.toast-notification{
        top:auto !important;
        left:50% !important;
        right:auto !important;
        bottom:calc(78px + env(safe-area-inset-bottom)) !important;
        width:calc(100vw - 28px) !important;
        max-width:460px !important;
        transform:translate(-50%,100px) !important;
    }
    html body #toast.toast-notification.show{
        transform:translate(-50%,0) !important;
    }
    .bismillah-banner{ padding:18px 0 16px !important; }
    .bismillah-text{ font-size:clamp(1.65rem,6vw,2.15rem) !important; }
}

/* v1.11.5: stable desktop/tablet Bismillah spacing. Mobile rules remain unchanged. */
@media (min-width: 1101px){
    .site-header + .bismillah-banner,
    .site-header + .site-breadcrumb-wrap + .bismillah-banner{
        min-height: 126px !important;
        height: auto !important;
        padding: 18px 0 18px !important;
    }
    .bismillah-banner > .container{
        min-height: 90px !important;
        height: 90px !important;
    }
    .bismillah-banner .bismillah-text{
        line-height: 1.2 !important;
    }
}
@media (min-width: 601px) and (max-width: 1100px){
    .site-header + .bismillah-banner,
    .site-header + .site-breadcrumb-wrap + .bismillah-banner{
        min-height: 112px !important;
        height: auto !important;
        padding: 16px 0 16px !important;
    }
    .bismillah-banner > .container{
        min-height: 80px !important;
        height: 80px !important;
    }
    .bismillah-banner .bismillah-text{
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
}

/* Footer: built-in content remains visible even when custom widgets are assigned. */
.site-footer .footer-custom-widgets{
    margin-top: 24px;
}
.site-footer .footer-custom-widgets .footer-widget + .footer-widget{
    margin-top: 18px;
}
.site-footer .footer-menu-column > .footer-links:first-child{
    margin-top: 0;
}
.site-footer .footer-menu-column .footer-custom-widgets:empty{
    display: none;
}


/* v1.11.5: final Bismillah rhythm for desktop/tablet. Mobile intentionally keeps the v1.11.3 sizing. */
@media (min-width: 1101px){
    .site-header + .bismillah-banner,
    .site-header + .site-breadcrumb-wrap + .bismillah-banner{
        min-height: 120px !important;
        padding: 12px 0 !important;
    }
    .site-header + .bismillah-banner > .container,
    .site-header + .site-breadcrumb-wrap + .bismillah-banner > .container{
        min-height: 96px !important;
        height: 96px !important;
    }
    .bismillah-banner .bismillah-text{
        font-size: 2.05rem !important;
        line-height: 1.5 !important;
        padding: 0 !important;
    }
}
@media (min-width: 601px) and (max-width: 1100px){
    .site-header + .bismillah-banner,
    .site-header + .site-breadcrumb-wrap + .bismillah-banner{
        min-height: 108px !important;
        padding: 10px 0 !important;
    }
    .site-header + .bismillah-banner > .container,
    .site-header + .site-breadcrumb-wrap + .bismillah-banner > .container{
        min-height: 88px !important;
        height: 88px !important;
    }
    .bismillah-banner .bismillah-text{
        font-size: 1.9rem !important;
        line-height: 1.5 !important;
        padding: 0 !important;
    }
}

/* Built-in footer content must remain visible when footer widget areas contain custom widgets. */
.site-footer .footer-brand-column{
    min-width: 0;
}
.site-footer .footer-brand-column .footer-brand-hidden{
    display: none;
}
.site-footer .footer-custom-widgets{
    margin-top: 22px;
}
.site-footer .footer-custom-widgets .footer-widget + .footer-widget{
    margin-top: 16px;
}

/* v1.11.12: context-aware mobile navigation. */
.mobile-utility-bar .mobile-utility-item{ position:relative; color:var(--color-text-main); }
.mobile-utility-bar .mobile-utility-item.is-active,
.mobile-utility-bar .mobile-utility-item:hover,
.mobile-utility-bar .mobile-utility-item:focus-visible{ color:var(--color-primary); }
html.dark-mode body .mobile-utility-bar .mobile-utility-item.is-active,
html.dark-mode body .mobile-utility-bar .mobile-utility-item:hover,
html.dark-mode body .mobile-utility-bar .mobile-utility-item:focus-visible{ color:var(--color-accent); }
.mobile-categories-sheet{ position:fixed; inset:0; z-index:3900; }
.mobile-categories-sheet[hidden]{ display:none !important; }
.mobile-categories-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.42); backdrop-filter:blur(2px); }
.mobile-categories-panel{ position:absolute; left:0; right:0; bottom:0; max-height:min(76dvh,620px); overflow:auto; background:var(--color-surface-elevated); color:var(--color-text-main); border-radius:20px 20px 0 0; padding:18px 16px calc(18px + env(safe-area-inset-bottom)); box-shadow:0 -12px 40px rgba(0,0,0,.2); }
.mobile-categories-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:2px 4px 14px; border-bottom:1px solid var(--color-border); }
.mobile-categories-header h2{ margin:2px 0 0; font-size:1.25rem; color:var(--color-primary); }
html.dark-mode body .mobile-categories-header h2{ color:var(--color-text-main); }
.mobile-categories-close{ width:38px; height:38px; flex:0 0 38px; border:1px solid var(--color-border); border-radius:50%; background:var(--color-bg); color:var(--color-text-main); font-size:1.5rem; line-height:1; cursor:pointer; }
.mobile-categories-list{ display:grid; grid-template-columns:1fr; gap:8px; padding-top:12px; }
.mobile-category-link{ display:flex; align-items:center; gap:12px; min-height:58px; padding:10px 12px; border:1px solid var(--color-border); border-radius:12px; background:var(--color-surface); color:var(--color-text-main); text-decoration:none; }
.mobile-category-link:hover,.mobile-category-link:focus-visible{ border-color:var(--color-accent); color:var(--color-text-main); }
.mobile-category-icon{ width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:10px; background:var(--color-accent-light); color:var(--color-accent-hover); }
.mobile-category-copy{ display:flex; flex-direction:column; min-width:0; flex:1; }
.mobile-category-copy strong{ font-size:.92rem; line-height:1.2; }
.mobile-category-copy small{ color:var(--color-text-muted); font-size:.72rem; margin-top:2px; }
.mobile-category-link > .deeoiman-icon{ width:14px; height:14px; color:var(--color-text-muted); }
body.mobile-sheet-open{ overflow:hidden; }
@media(min-width:869px){ .mobile-categories-sheet{ display:none !important; } }
@media(max-width:600px){
    .mobile-utility-bar{ padding-left:4px; padding-right:4px; }
    .mobile-utility-bar .mobile-utility-item{ min-height:46px; font-size:.68rem; gap:3px; }
    .mobile-utility-bar .deeoiman-icon{ width:1.28em; height:1.28em; }
    .mobile-categories-panel{ max-height:80dvh; }
}

/* v1.11.12: mobile utility bar usability and interaction sheets. */
@media (max-width: 868px){
    body{ padding-bottom: calc(74px + env(safe-area-inset-bottom)) !important; }
    .mobile-utility-bar{
        min-height: 68px !important;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
        gap: 2px !important;
        align-items: stretch !important;
    }
    .mobile-utility-bar .mobile-utility-item,
    .mobile-utility-bar a,
    .mobile-utility-bar button{
        min-width: 0 !important;
        min-height: 58px !important;
        height: 58px !important;
        padding: 7px 4px !important;
        margin: 0 !important;
        border-radius: 10px !important;
        gap: 4px !important;
        font-size: .72rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-utility-bar .mobile-utility-item .deeoiman-icon{
        width: 20px !important;
        height: 20px !important;
    }
    .mobile-utility-bar .mobile-utility-item:active{
        background: var(--color-accent-light) !important;
        transform: scale(.97);
    }
    .mobile-search-popup,
    .mobile-share-sheet{
        position: fixed !important;
        inset: 0 !important;
        z-index: 5000 !important;
        height: 100dvh;
    }
    .mobile-search-popup[hidden],
    .mobile-share-sheet[hidden]{ display:none !important; }
    .mobile-search-backdrop,
    .mobile-share-backdrop{
        position:absolute;
        inset:0;
        background:rgba(0,0,0,.48);
        backdrop-filter:blur(3px);
    }
    .mobile-search-panel,
    .mobile-share-panel{
        position:absolute;
        left:10px;
        right:10px;
        bottom:calc(10px + env(safe-area-inset-bottom));
        max-height:calc(100% - 20px - env(safe-area-inset-bottom));
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        background:var(--color-surface-elevated);
        color:var(--color-text-main);
        border:1px solid var(--color-border);
        border-radius:18px;
        padding:18px 16px 16px;
        box-shadow:0 -12px 40px rgba(0,0,0,.24);
    }
    .mobile-search-header,
    .mobile-share-header{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:16px;
        padding:0 2px 14px;
        border-bottom:1px solid var(--color-border);
    }
    .mobile-search-header h2,
    .mobile-share-header h2{
        margin:2px 0 0;
        font-size:1.2rem;
        line-height:1.25;
        color:var(--color-primary);
    }
    html.dark-mode body .mobile-search-header h2,
    html.dark-mode body .mobile-share-header h2{ color:var(--color-text-main); }
    .mobile-search-close,
    .mobile-share-close{
        width:40px;
        height:40px;
        flex:0 0 40px;
        border:1px solid var(--color-border);
        border-radius:50%;
        background:var(--color-bg);
        color:var(--color-text-main);
        font-size:1.5rem;
        line-height:1;
        cursor:pointer;
    }
    .mobile-search-form-wrap{ padding-top:16px; }
    .mobile-search-form-wrap .search-form{ width:100%; margin:0; }
    .mobile-search-form-wrap .search-field{
        min-height:50px !important;
        font-size:1rem !important;
        padding:12px 14px !important;
    }
    .mobile-search-form-wrap .search-submit{
        min-width:52px !important;
        min-height:50px !important;
    }
    /* Keep the search sheet above the on-screen keyboard on iOS/Android. */
    .mobile-search-panel{
        transition:bottom .12s ease-out;
    }
    @media(prefers-reduced-motion: reduce){
        .mobile-search-panel{ transition:none; }
    }
    .mobile-share-options{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        padding-top:16px;
    }
    .mobile-share-option{
        min-height:72px;
        display:flex;
        align-items:center;
        justify-content:flex-start;
        gap:11px;
        padding:12px;
        border:1px solid var(--color-border);
        border-radius:13px;
        background:var(--color-surface);
        color:var(--color-text-main);
        font:inherit;
        font-weight:700;
        cursor:pointer;
        text-align:left;
    }
    .mobile-share-option:active,
    .mobile-share-option:focus-visible{
        border-color:var(--color-accent);
        outline:none;
        background:var(--color-accent-light);
    }
    .mobile-share-option-icon{
        width:42px;
        height:42px;
        flex:0 0 42px;
        display:grid;
        place-items:center;
        border-radius:11px;
        background:var(--color-accent-light);
        color:var(--color-primary);
    }
    .mobile-share-option-icon .deeoiman-icon{ width:22px; height:22px; }
    .mobile-share-option-icon.whatsapp{ color:#128c4a; }
    .mobile-share-option-icon.telegram{ color:#168acd; }
    .mobile-share-option-icon.native{ color:var(--color-primary); }
    .mobile-share-option-icon.copy{ color:var(--color-accent-hover); }
}
@media (min-width:869px){
    .mobile-search-popup,
    .mobile-share-sheet{ display:none !important; }
}
@media (max-width:420px){
    body{ padding-bottom:calc(72px + env(safe-area-inset-bottom)) !important; }
    .mobile-utility-bar{ min-height:66px !important; padding-left:4px !important; padding-right:4px !important; }
    .mobile-utility-bar .mobile-utility-item,
    .mobile-utility-bar a,
    .mobile-utility-bar button{ min-height:56px !important; height:56px !important; font-size:.69rem !important; }
}

/* v1.11.12: Mobile Menu uses the same bottom-sheet interaction pattern as Categories/Share. */
@media (max-width: 868px){
    .mobile-menu-sheet{ position:fixed !important; inset:0 !important; z-index:5000 !important; }
    .mobile-menu-sheet[hidden]{ display:none !important; }
    .mobile-menu-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.48); backdrop-filter:blur(3px); }
    .mobile-menu-panel{ position:absolute; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); max-height:min(80dvh,680px); overflow:auto; background:var(--color-surface-elevated); color:var(--color-text-main); border:1px solid var(--color-border); border-radius:18px; padding:18px 16px 16px; box-shadow:0 -12px 40px rgba(0,0,0,.24); }
    .mobile-menu-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 2px 14px; border-bottom:1px solid var(--color-border); }
    .mobile-menu-header h2{ margin:2px 0 0; font-size:1.2rem; line-height:1.25; color:var(--color-primary); }
    html.dark-mode body .mobile-menu-header h2{ color:var(--color-text-main); }
    .mobile-menu-close{ width:40px; height:40px; flex:0 0 40px; border:1px solid var(--color-border); border-radius:50%; background:var(--color-bg); color:var(--color-text-main); font-size:1.5rem; line-height:1; cursor:pointer; }
    .mobile-menu-list-wrap{ padding-top:12px; }
    .mobile-sheet-menu{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
    .mobile-sheet-menu .menu-item{ position:relative; margin:0; padding:0; }
    .mobile-sheet-menu .menu-item > a{ display:flex; align-items:center; min-height:54px; padding:10px 52px 10px 14px; border:1px solid var(--color-border); border-radius:13px; background:var(--color-surface); color:var(--color-text-main); font-weight:700; text-decoration:none; }
    .mobile-sheet-menu .menu-item > a:hover,.mobile-sheet-menu .menu-item > a:focus-visible{ border-color:var(--color-accent); color:var(--color-text-main); outline:none; background:var(--color-accent-light); }
    .mobile-sheet-menu .submenu-toggle{ position:absolute; z-index:2; top:7px; right:7px; width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--color-border); border-radius:10px; background:var(--color-bg); color:var(--color-text-main); cursor:pointer; }
    .mobile-sheet-menu .submenu-toggle span{ display:block; font-size:1.25rem; line-height:1; transition:transform var(--transition-fast); }
    .mobile-sheet-menu .menu-item.submenu-open > .submenu-toggle span{ transform:rotate(180deg); }
    .mobile-sheet-menu .sub-menu{ display:none; list-style:none; margin:8px 0 0 12px; padding:0 0 0 12px; border-left:2px solid var(--color-border); gap:7px; }
    .mobile-sheet-menu .menu-item.submenu-open > .sub-menu{ display:grid; }
    .mobile-sheet-menu .sub-menu .menu-item > a{ min-height:48px; padding:9px 12px; font-size:.92rem; font-weight:600; border-radius:11px; }
}
@media (min-width:869px){ .mobile-menu-sheet{ display:none !important; } }

/* v1.11.15: mobile article Contents bottom sheet. */
@media (max-width: 868px){
    .mobile-contents-sheet{position:fixed !important;inset:0 !important;z-index:5000 !important;}
    .mobile-contents-sheet[hidden]{display:none !important;}
    .mobile-contents-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.48);backdrop-filter:blur(3px);}
    .mobile-contents-panel{position:absolute;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));max-height:min(78dvh,680px);overflow:hidden;background:var(--color-surface-elevated);color:var(--color-text-main);border:1px solid var(--color-border);border-radius:18px;padding:18px 16px 16px;box-shadow:0 -12px 40px rgba(0,0,0,.24);display:flex;flex-direction:column;}
    .mobile-contents-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 2px 14px;border-bottom:1px solid var(--color-border);}
    .mobile-contents-header h2{margin:2px 0 0;font-size:1.2rem;line-height:1.25;color:var(--color-primary);}
    html.dark-mode body .mobile-contents-header h2{color:var(--color-text-main);}
    .mobile-contents-close{width:40px;height:40px;flex:0 0 40px;border:1px solid var(--color-border);border-radius:50%;background:var(--color-bg);color:var(--color-text-main);font-size:1.5rem;line-height:1;cursor:pointer;}
    .mobile-contents-list{overflow-y:auto;padding:14px 2px 2px;display:grid;gap:7px;-webkit-overflow-scrolling:touch;}
    .mobile-contents-link{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:10px 12px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface);color:var(--color-text-main);font-size:.94rem;font-weight:700;text-decoration:none;}
    .mobile-contents-link:hover,.mobile-contents-link:focus-visible{border-color:var(--color-accent);background:var(--color-accent-light);color:var(--color-text-main);outline:none;}
    .mobile-contents-link .deeoiman-icon{flex:0 0 auto;color:var(--color-text-muted);}
    .mobile-contents-link.toc-level-3{margin-left:14px;font-size:.88rem;font-weight:600;border-style:dashed;}
}
@media (min-width:869px){.mobile-contents-sheet{display:none !important;}}


/* v1.11.17: Header search on all viewports + tablet-safe mobile search. */
.header-search-trigger{ display:flex; }
@media (max-width:868px){
    .site-header .header-search-trigger{ display:flex; }
    .mobile-search-popup{ top:0; height:100dvh; }
    .mobile-search-panel{ bottom:calc(10px + env(safe-area-inset-bottom)); max-height:calc(100% - 20px - env(safe-area-inset-bottom)); transition:transform .22s cubic-bezier(.22,1,.36,1), opacity .18s ease; }
    .mobile-search-popup[hidden] .mobile-search-panel{ transform:translateY(16px); opacity:0; }
}
@media (min-width:869px){ .mobile-search-popup{ display:none !important; } }
@media (max-width:420px){ .site-header .header-search-trigger{ flex-basis:38px; width:38px; min-width:38px; height:38px; min-height:38px; max-height:38px; } }

/* v1.11.17: keep header Search visible and usable at every viewport width. */
.header-actions{ flex:0 0 auto; }
.header-search-trigger{ display:flex !important; flex:0 0 40px; width:40px; min-width:40px; }
@media (max-width:868px){
    .site-header .header-actions{ margin-left:auto; }
    .site-header .header-search-trigger{ display:flex !important; visibility:visible !important; opacity:1 !important; }
    .mobile-search-popup{ display:block; }
}
@media (min-width:869px){
    .site-header .header-search-trigger{ display:flex !important; }
}
@media (max-width:560px){
    .site-header .header-search-trigger{ flex-basis:38px; width:38px; min-width:38px; height:38px; min-height:38px; }
}

/* v1.11.18: unified Search sheet on every viewport + resilient mobile/tablet interaction. */
.mobile-search-popup{
    position:fixed !important;
    inset:0 !important;
    z-index:10000 !important;
    width:100% !important;
    height:100vh;
    height:100dvh;
    pointer-events:auto;
}
.mobile-search-popup[hidden]{ display:none !important; }
.mobile-search-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.48);
    backdrop-filter:blur(3px);
}
.mobile-search-panel{
    position:absolute;
    left:50%;
    right:auto;
    bottom:calc(18px + env(safe-area-inset-bottom));
    width:min(680px, calc(100% - 20px));
    max-height:calc(100% - 36px - env(safe-area-inset-bottom));
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    transform:translate(-50%, 16px);
    opacity:0;
    background:var(--color-surface-elevated);
    color:var(--color-text-main);
    border:1px solid var(--color-border);
    border-radius:18px;
    padding:18px 16px 16px;
    box-shadow:0 -12px 40px rgba(0,0,0,.24);
    will-change:transform, opacity;
    transition:transform .22s cubic-bezier(.22,1,.36,1), opacity .18s ease;
}
.mobile-search-popup.is-open .mobile-search-panel{
    transform:translate(-50%, 0);
    opacity:1;
}
@media(max-width:868px){
    .mobile-utility-bar{
        z-index:10000 !important;
        pointer-events:auto !important;
    }
    .mobile-utility-bar .mobile-utility-item,
    .mobile-utility-bar button,
    .mobile-utility-bar a{
        position:relative;
        z-index:10001;
        pointer-events:auto !important;
        touch-action:manipulation;
    }
    .site-header .header-inner{ min-width:0; }
    .site-header .site-brand{ min-width:0; flex:1 1 auto; }
    .site-header .header-actions{ flex:0 0 auto !important; min-width:max-content; }
    .site-header .header-search-trigger{ display:flex !important; visibility:visible !important; opacity:1 !important; }
    .mobile-search-panel{
        bottom:calc(10px + env(safe-area-inset-bottom));
        width:calc(100% - 20px);
        max-height:calc(100% - 20px - env(safe-area-inset-bottom));
    }
}
@media(min-width:869px){
    .site-header .header-search-trigger{ display:flex !important; visibility:visible !important; opacity:1 !important; }
}
@media(max-width:560px){
    .site-header .header-search-trigger{ flex:0 0 38px !important; width:38px !important; min-width:38px !important; height:38px !important; min-height:38px !important; }
}
@media(prefers-reduced-motion: reduce){
    .mobile-search-panel{ transition:none; }
}
@media(min-width:869px){
    .mobile-search-popup{ display:block !important; }
}

/* v1.11.22: unified sheet layering and search dialog header/close-button fix. */
.mobile-categories-sheet,
.mobile-share-sheet,
.mobile-menu-sheet,
.mobile-contents-sheet,
.mobile-search-popup{
    z-index: 20000 !important;
}
.mobile-search-close{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    flex:0 0 40px !important;
    display:grid !important;
    place-items:center !important;
    margin:0 !important;
    padding:0 !important;
    border:1px solid var(--color-border) !important;
    border-radius:50% !important;
    background:var(--color-bg) !important;
    color:var(--color-text-main) !important;
    font-family:inherit !important;
    font-size:1.45rem !important;
    font-weight:400 !important;
    line-height:1 !important;
    cursor:pointer !important;
    appearance:none !important;
    -webkit-appearance:none !important;
}
.mobile-search-close:hover,
.mobile-search-close:focus-visible{
    border-color:var(--color-accent) !important;
    background:var(--color-accent-light) !important;
    outline:none !important;
}
.mobile-search-header{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:16px !important;
    width:100% !important;
}
.mobile-search-header > div:first-child{
    min-width:0;
    flex:1 1 auto;
}
.mobile-search-panel{
    box-sizing:border-box !important;
}
@media (max-width:868px){
    /* The utility bar must sit below every open sheet, not above it. */
    .mobile-utility-bar{ z-index:10000 !important; }
    .mobile-search-panel{
        bottom:calc(10px + env(safe-area-inset-bottom));
        width:calc(100% - 20px);
        max-height:calc(100% - 20px - env(safe-area-inset-bottom));
    }
}
@media (min-width:869px){
    /* Desktop/tablet-sized desktop dialog: centered card with a stable header. */
    .mobile-search-popup{
        display:block !important;
    }
    .mobile-search-panel{
        top:50% !important;
        bottom:auto !important;
        left:50% !important;
        width:min(700px, calc(100% - 40px)) !important;
        max-height:min(420px, calc(100% - 40px)) !important;
        transform:translate(-50%, calc(-50% + 16px)) !important;
        margin:0 !important;
    }
    .mobile-search-popup.is-open .mobile-search-panel{
        transform:translate(-50%, -50%) !important;
    }
    .mobile-search-header{
        padding:0 2px 14px !important;
    }
}
@media (prefers-reduced-motion: reduce){
    .mobile-search-panel{ transition:none !important; }
}