/*
Theme Name: Pandanio
Theme URI: https://pandanio.com
Author: Mustafa
Author URI: https://pandanio.com
Description: Blank minimal theme
Version: 1.0
License: GPL v2 or later
Text Domain: panda-blank
*/

/* إخفاء كل العناوين */
.entry-title,
.page-title {
    display: none;
}

/* إظهار العنوان فقط في الصفحة الرئيسية */
.home .entry-title,
.home .page-title {
    display: block;
}

/*
 * Theme Name: Pandanio
 * File: main.css
 * Description: Stable responsive design with perfectly centered layout.
 */

/* =======================================================
   1. Global resets + sticky footer foundation
   ======================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: clip !important;
    -webkit-text-size-adjust: 100%;
    
    /* Global Dark Background */
    background: #0b0b0b !important;
    background-color: #0b0b0b !important;
    color-scheme: dark !important;
}

html {
    min-height: 100%;
    background: #0b0b0b !important;
    background-color: #0b0b0b !important;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #0b0b0b !important;
    background-color: #0b0b0b !important;
}

/* دعم أكثر من wrapper محتمل في الثيم */
#page,
.site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    background: #0b0b0b !important;
    background-color: #0b0b0b !important;
}

/* المحتوى يجب أن يتمدد لكي يدفع الفوتر لآخر الشاشة */
#content,
.site-content,
.site-main,
#primary,
.content-wrapper,
.content-area {
    flex: 1 0 auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* الفوتر لا ينكمش ويظل أسفل الصفحة */
.site-footer {
    margin-top: auto;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* إجبار جميع الصور والفيديوهات على التجاوب */
img,
video,
iframe,
canvas,
object,
embed {
    max-width: 100% !important;
    height: auto;
}

/* إصلاح الحاويات الأساسية لمنع التمدد وإجبارها على التوسيط في الشاشة */
#page,
.site-content,
.site-main,
.container,
.col-full,
.pandanio-content-area {
    width: 100%;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* =======================================================
   2. تقسيمات الشاشات (Responsive Breakpoints)
   ======================================================= */

@media (max-width: 1199px) {

    /* إضافة هوامش داخلية لحماية المحتوى من الالتصاق بحواف الشاشة */
    .container,
    .col-full,
    .pandanio-content-area {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media (max-width: 992px) {

    .site-content {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media (max-width: 768px) {

    /* ضبط حجم اللوجو والمسافات في الهيدر للموبايل */
    .header-left-side {
        gap: 10px !important;
    }

    .logo-container {
        width: 180px !important;
    }

    .header-capsule {
        transform-origin: right center;
    }
}

@media (max-width: 576px) {

    /* تصغير إضافي للوجو في الشاشات الصغيرة جداً */
    .logo-container {
        width: 120px !important;
    }

    .header-capsule .balance {
        font-size: 13px !important;
    }

    .header-capsule .avatar-slot :where(img, svg) {
        width: 30px !important;
        height: 30px !important;
    }

    /* ضبط القائمة الجانبية */
    .side-menu-widget {
        width: 280px !important;
    }
}


/* =======================================================
   3. FIX FOOTER STICK TO BOTTOM
   + GLOBAL DARK BACKGROUND
   ======================================================= */

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    min-height: 100% !important;

    background: #0b0b0b !important;
    background-color: #0b0b0b !important;

    color-scheme: dark !important;
}

body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}

/* Main theme wrapper */
#page.site {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;

    background: #0b0b0b !important;
    background-color: #0b0b0b !important;
}

/* Main content */
#content,
.site-content,
#primary,
.site-main {
    flex: 1 0 auto !important;
}

/* Footer */
footer.site-footer {
    margin-top: auto !important;
    flex-shrink: 0 !important;
}