/*
Theme Name: TS-khobara-albaha
Theme URI: https://khobara-albaha.com/
Author: Gemini
Description: قالب احترافي مطور - ألوان ملكية، فواصل هندسية، وصناديق خدمات مميزة مع الحفاظ على كافة الأكواد السابقة.
Version: 3.1
Text Domain: khobara-albaha
*/

:root {
    --main-blue: #003366;      /* أزرق ملكي عميق */
    --royal-blue: #004a99;    
    --deep-red: #b30000;       /* أحمر صارخ للتمييز */
    --accent-gold: #d4af37;
    --orange-accent: #ff6600;  /* برتقالي لزر الصعود والروابط */
    --light-bg: #f8fafd;       /* خلفية لكسر البياض */
    --white: #ffffff;
    --text-dark: #1a1a1a;
    --shadow-bold: 0 10px 30px rgba(0,0,0,0.15);
    --shadow-soft: 0 4px 15px rgba(0,0,0,0.1);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    direction: rtl;
    text-align: right;
    margin: 0;
    background-color: var(--light-bg);
    color: var(--text-dark);
}

img { max-width: 100%; height: auto; }

/* ================= Header & Nav ================= */
.site-header {
    background: var(--white);
    padding: 10px 0;
    box-shadow: var(--shadow-soft);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 4px solid var(--main-blue);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.logo img { height: 60px; transition: 0.3s; }

.main-nav-box {
    background: #eef6ff;
    padding: 8px 15px;
    border-radius: 12px;
    border: 1px solid var(--royal-blue);
}

.main-nav-box ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 15px;
}

.main-nav-box a {
    text-decoration: none;
    color: var(--main-blue);
    font-weight: bold;
    font-size: 14px;
}

.quote-btn {
    background: var(--deep-red);
    color: white !important;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(179,0,0,0.3);
}

.quote-btn:hover { transform: translateY(-3px); background: #800000; }

/* ================= Hero Section ================= */
.hero-section {
    position: relative;
    height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #222;
}

.hero-desktop, .hero-mobile {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,51,102,0.8) 0%, rgba(0,0,0,0.4) 100%);
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: white;
    max-width: 800px;
    padding: 20px;
    box-sizing: border-box;
}

.hero-content h1 { 
    font-size: 2.8rem; 
    margin-bottom: 25px; 
    line-height: 1.4; 
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5); 
}

.hero-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
}

.feature-item {
    background: rgba(255,255,255,0.15);
    padding: 12px;
    border-radius: 12px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
    font-size: 14px;
    font-weight: bold;
}

/* ================= Dividers ================= */
.slant-divider {
    height: 100px;
    background: var(--light-bg);
    clip-path: polygon(0 100%, 100% 0, 100% 100%, 0% 100%);
    margin-top: -100px;
    position: relative;
    z-index: 5;
}

.wave-divider-svg {
    height: 120px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23003366" d="M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,224C672,245,768,267,864,250.7C960,235,1056,181,1152,165.3C1248,149,1344,171,1392,181.3L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
}

/* ================= Services Sections ================= */
.service-section-box { 
    padding: 80px 20px; 
    background: var(--white); 
    margin: 60px auto;
    max-width: 1200px;
    border-radius: 30px;
    box-shadow: var(--shadow-bold);
    border-top: 10px solid var(--main-blue);
    transition: transform 0.3s;
}

.service-section-box:hover { transform: translateY(-5px); }

.service-section-box.red-style { border-top-color: var(--deep-red); background: #fffafa; }
.service-section-box.blue-style { background: var(--main-blue); color: white; }
.blue-style h2 { color: var(--accent-gold) !important; }
.blue-style li { background: rgba(255,255,255,0.1) !important; color: white !important; border-right: 4px solid var(--accent-gold) !important; }

.service-container { display: flex; align-items: center; gap: 50px; max-width: 1100px; margin: 0 auto; }
.service-container.reverse { flex-direction: row-reverse; }

.service-img { flex: 1; }
.service-img img { border-radius: 20px; width: 100%; box-shadow: var(--shadow-bold); border: 5px solid white; }

.service-info { flex: 1.2; text-align: right; }
.service-info h2 { color: var(--main-blue); font-size: 2.2rem; margin-bottom: 20px; border-bottom: 3px solid var(--deep-red); display: inline-block; padding-bottom: 5px; }

.svg-points { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 25px; }
.svg-points li { background: #f1f5f9; padding: 15px; border-radius: 12px; font-size: 14px; font-weight: bold; border-right: 4px solid var(--main-blue); box-shadow: 0 2px 5px rgba(0,0,0,0.03); color: var(--main-blue); }

/* ================= Footer ================= */
.site-footer { background: #0a0a0a; color: white; padding: 80px 0 20px; border-top: 10px solid var(--deep-red); }
.footer-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.footer-col h4 { color: var(--accent-gold); margin-bottom: 25px; font-size: 1.3rem; }
.footer-col a { color: #ccc; text-decoration: none; transition: 0.3s; }
.footer-col a:hover { color: var(--white); }

.copy-bar { text-align: center; padding: 40px 20px; border-top: 1px solid #333; margin-top: 50px; background: #000; }
.copy-bar p { font-size: 22px !important; font-weight: bold !important; color: #fff !important; margin-bottom: 15px; }
.copy-bar a { font-size: 18px !important; color: var(--orange-accent) !important; font-weight: bold !important; text-decoration: none; }

/* ================= Floating Elements ================= */
.floating-contact { position: fixed !important; bottom: 30px !important; right: 25px !important; display: flex !important; flex-direction: column !important; gap: 15px !important; z-index: 999999 !important; }
.float-btn { width: 60px !important; height: 60px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; color: white !important; font-size: 30px !important; text-decoration: none !important; box-shadow: var(--shadow-bold) !important; transition: 0.3s !important; }
.float-whatsapp { background-color: #25d366 !important; }
.float-phone { background-color: #b30000 !important; }

#backToTop { position: fixed !important; bottom: 35px !important; left: 50% !important; transform: translateX(-50%) !important; width: 55px !important; height: 55px !important; background-color: var(--orange-accent) !important; color: white !important; border: none !important; border-radius: 15px !important; cursor: pointer !important; z-index: 999998 !important; font-size: 24px !important; box-shadow: 0 5px 15px rgba(255,102,0,0.5) !important; }

/* ================= Archive, Single & Page Styles ================= */
.archive-wrapper, .page-standard-wrapper { padding: 60px 0; background: var(--light-bg); }
.archive-title, .page-title-box h1 { text-align: center; color: var(--main-blue); margin-bottom: 40px; }
.posts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.post-card { background: white; border-radius: 15px; overflow: hidden; transition: 0.3s; box-shadow: var(--shadow-soft); }
.post-card:hover { transform: translateY(-10px); }
.post-card-body { padding: 20px; }
.read-more { color: var(--main-blue); font-weight: bold; text-decoration: none; display: inline-block; margin-top: 10px; }

.single-post-container { max-width: 900px; margin: 40px auto; padding: 0 20px; }
.post-header-box { background: var(--main-blue); color: white; padding: 30px; border-radius: 15px; margin-bottom: 30px; text-align: center; }
.post-content h2, .post-content h3 { background: #eef6ff; color: var(--main-blue); padding: 15px 20px; border-right: 5px solid var(--accent-gold); border-radius: 8px; margin: 30px 0 20px; }
.toc-wrapper { background: #f8f9fa; border: 1px solid #ddd; border-radius: 10px; margin: 20px 0; overflow: hidden; }

/* ================= Mobile Queries (التعديل المطلوب للوجو والقائمة) ================= */
@media (max-width: 768px) {
    /* منع الانجراف */
    html, body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }

    /* جعل اللوجو والقائمة في سطر واحد */
    .nav-container { 
        flex-direction: row !important; 
        flex-wrap: wrap !important; 
        justify-content: space-between !important; 
        padding: 5px 15px !important; 
    }

    /* تصغير اللوجو ورفعه لليمين */
    .logo { 
        flex: 0 0 auto !important;
        max-width: 110px !important; 
    }
    .logo img { 
        height: 35px !important; 
        width: auto !important; 
    }

    /* القائمة بجوار اللوجو لليسار */
    .main-nav-box { 
        flex: 0 0 auto !important; 
        padding: 4px 8px !important; 
        margin: 0 !important;
    }
    .main-nav-box ul { gap: 8px !important; }
    .main-nav-box a { font-size: 11px !important; }

    /* زر عرض السعر في سطر مستقل تحتهم */
    .quote-btn { 
        flex: 0 0 100% !important; 
        margin-top: 10px !important; 
        width: 100% !important; 
        max-width: calc(100vw - 30px) !important;
        text-align: center !important; 
        order: 3 !important;
    }
    
    .hero-section { height: 550px !important; }
    .hero-content h1 { font-size: 1.8rem !important; }
    
    .service-section-box { padding: 40px 20px; margin: 30px 10px; border-radius: 20px; }
    .service-container, .service-container.reverse { flex-direction: column !important; gap: 25px !important; }
    .service-info { text-align: center; }
    .svg-points { grid-template-columns: 1fr !important; }
}

/* ================= FIXES & IMPROVEMENTS ================= */

/* إصلاح عنوان الصفحة داخل الصندوق الأزرق */
.page-title-box{
background: var(--main-blue) !important;
padding:30px;
border-radius:15px;
text-align:center;
margin-bottom:30px;
}

.page-title-box h1{
color:#ffffff !important;
font-size:28px;
margin:0;
}

/* تحسين ظهور العنوان في الصفحات */
.page-title-box,
.post-header-box{
box-shadow: var(--shadow-soft);
}

/* إصلاح زر عرض السعر في الجوال */
@media (max-width:768px){

.quote-btn{
flex:0 0 100% !important;
margin:10px auto 0 auto !important;
width:calc(100% - 30px) !important;
text-align:center !important;
order:3 !important;
display:block !important;
}

}

/* منع تداخل الأزرار العائمة */
.floating-contact{
bottom:90px !important;
}

/* تحسين زر الصعود للأعلى */
#backToTop{
transition:0.3s;
}

#backToTop:hover{
transform:translateX(-50%) scale(1.1);
}

/* تحسين عرض العناوين في الصفحات */
.archive-title,
.page-title-box h1{
font-weight:bold;
letter-spacing:0.5px;
}

/* تحسين عرض النص في الجوال */
@media (max-width:768px){

.page-title-box h1{
font-size:22px;
}

}

/* ================= END FIXES ================= */

/* ================= HEADER IMPROVEMENTS ================= */

/* منع أي انزلاق أفقي */
html,body{
overflow-x:hidden;
}

/* تحسين الهيدر في الجوال */
@media (max-width:768px){

.nav-container{
display:flex;
flex-wrap:wrap;
justify-content:center !important;
align-items:center;
gap:8px;
}

/* اللوجو */
.logo{
order:1;
flex:0 0 auto;
}

/* القائمة */
.main-nav-box{
order:2;
flex:0 0 auto;
}

/* زر عرض السعر */
.quote-btn{
order:3;
display:block !important;
width:92% !important;
margin:12px auto !important;
text-align:center !important;
border-radius:12px !important;
font-size:16px !important;
padding:14px 10px !important;
box-shadow:0 6px 18px rgba(0,0,0,0.2) !important;
}

}

/* ================= CTA BUTTON IMPROVEMENT ================= */

.quote-btn{
transition:all .3s ease;
}

.quote-btn:hover{
transform:translateY(-3px) scale(1.02);
box-shadow:0 10px 25px rgba(0,0,0,0.25);
}

/* ================= HERO IMPROVEMENTS ================= */

.hero-content h1{
animation:fadeUp 1s ease;
}

@keyframes fadeUp{

0%{
opacity:0;
transform:translateY(30px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

/* ================= SERVICE BOX ANIMATION ================= */

.service-section-box{
transition:all .35s ease;
}

.service-section-box:hover{
transform:translateY(-8px);
box-shadow:0 15px 40px rgba(0,0,0,0.18);
}

/* ================= FLOATING BUTTONS FIX ================= */

.floating-contact{
bottom:100px !important;
}

/* زر الصعود للأعلى */
#backToTop{
bottom:30px !important;
transition:.3s;
}

#backToTop:hover{
transform:translateX(-50%) scale(1.1);
}

/* ================= PAGE TITLE FIX ================= */

.page-title-box{
background:var(--main-blue);
padding:30px;
border-radius:15px;
text-align:center;
margin-bottom:30px;
}

.page-title-box h1{
color:#fff !important;
font-size:28px;
margin:0;
}

/* ================= MOBILE TYPOGRAPHY ================= */

@media (max-width:768px){

.hero-content h1{
font-size:1.9rem !important;
line-height:1.5;
}

.page-title-box h1{
font-size:22px;
}

}

/* ================= END OF IMPROVEMENTS ================= */

/* إصلاح وتوضيح جدول المحتويات في جميع المقالات */
.lwptoc, .ez-toc-container, #toc_container {
    background-color: #ffffff !important; /* خلفية بيضاء ناصعة */
    border: 2px solid #003366 !important; /* إطار أزرق ملكي واضح */
    border-radius: 15px !important;
    padding: 20px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    margin: 20px auto !important;
    max-width: 90% !important;
}

/* توضيح عنوان جدول المحتويات */
.lwptoc_header, .ez-toc-title-container, .toc_title {
    color: #003366 !important;
    font-weight: bold !important;
    font-size: 1.2rem !important;
    border-bottom: 1px solid #eee !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
}

/* توضيح الروابط داخل الجدول */
.lwptoc_item a, .ez-toc-link, #toc_container a {
    color: #004a99 !important; /* أزرق واضح للروابط */
    text-decoration: none !important;
    font-weight: 500 !important;
}

.lwptoc_item a:hover, .ez-toc-link:hover {
    color: #b30000 !important; /* أحمر عند تمرير الماوس */
}

/* ================= BLOG CATEGORY FIX ================= */

/* إصلاح لون روابط التصنيفات داخل الهيدر الأزرق */

.post-header-box a,
.post-header-box .cat-links a,
.post-header-box .entry-meta a{

color:#ffd86b !important;
font-weight:bold;
text-decoration:none;
}

.post-header-box a:hover{
color:#ffffff !important;
text-decoration:underline;
}


/* ===== Table of contents FIX ===== */

.toc-wrapper{
background:#ffffff !important;
border:1px solid #e5e8f0 !important;
border-radius:12px;
padding:15px;
margin:20px 0;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
}

/* زر إظهار جدول المحتويات */

.toc-wrapper summary{
background:#f3f6fb !important;
color:#003366 !important;
font-weight:bold;
padding:12px 15px;
border-radius:8px;
cursor:pointer;
}

/* روابط جدول المحتويات */

.toc-wrapper a{
color:#003366 !important;
font-weight:600;
text-decoration:none;
}

.toc-wrapper a:hover{
color:#ff6600 !important;
}

/* العناوين داخل جدول المحتويات */

.toc-wrapper li{
margin:6px 0;
}

/* ===== لون تصنيفات المقال داخل الهيدر ===== */

.post-header-box .post-meta a{
color:#ffd86b !important;
font-weight:bold;
text-decoration:none;
}

.post-header-box .post-meta a:hover{
color:#ffffff !important;
text-decoration:underline;
}