/**
 * Arabic news-ar Page Styles
 * 阿拉伯语 news-ar 页面专用样式
 * 
 * Design: Luxury gold and deep blue color scheme with RTL support
 * Target: body.lang-ar.page for the news-ar page and template-blog.php
 * Version: 1.1 - Added support for template-blog.php and fixed banner image
 */

/* ============================================================================
   RTL Base Styles for Page
   ============================================================================ */
body.lang-ar.page,
body.lang-ar.page-template-default,
body.lang-ar.page-template-template-blog {
    direction: rtl !important;
    text-align: right !important;
}

/* ============================================================================
   Page Header - Gold & Deep Blue Theme with Background Image Support
   ============================================================================ */

/* Remove any background override for elements with inline background-image */
body.lang-ar.page .page-header[style*="background-image"],
body.lang-ar.page-template-template-blog .page-header[style*="background-image"] {
    /* Keep the inline background-image, just add these properties */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative;
    padding: 60px 0 !important;
    text-align: center !important;
    min-height: 300px !important;
}

/* Default styles for page header */
body.lang-ar.page .page-header,
body.lang-ar.page .entry-header,
body.lang-ar.page .site-main > header,
body.lang-ar.page-template-template-blog .page-header {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative;
    padding: 60px 0 !important;
    text-align: center !important;
    min-height: 300px !important;
}

/* Fallback gradient background only if no image is set */
body.lang-ar.page .page-header:not([style*="background-image"]),
body.lang-ar.page-template-template-blog .page-header:not([style*="background-image"]) {
    background: linear-gradient(135deg, #003366 0%, #004080 50%, #0055AA 100%) !important;
}

/* Banner overlay for better text readability - lighter for images */
body.lang-ar.page .page-header-overlay,
body.lang-ar.page-template-template-blog .page-header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 51, 102, 0.6) 0%, rgba(0, 64, 128, 0.6) 50%, rgba(0, 85, 170, 0.6) 100%) !important;
    z-index: 1;
    pointer-events: none;
}

/* Darker overlay for pages without background image */
body.lang-ar.page .page-header:not([style*="background-image"]) .page-header-overlay,
body.lang-ar.page-template-template-blog .page-header:not([style*="background-image"]) .page-header-overlay {
    background: linear-gradient(135deg, rgba(0, 51, 102, 0.3) 0%, rgba(0, 64, 128, 0.3) 50%, rgba(0, 85, 170, 0.3) 100%) !important;
}

/* Ensure content is above overlay */
body.lang-ar.page .page-header .container,
body.lang-ar.page-template-template-blog .page-header .container {
    position: relative;
    z-index: 2;
}

body.lang-ar.page .page-title,
body.lang-ar.page .entry-title,
body.lang-ar.page h1 {
    color: #FFD700 !important;
    text-shadow: 0 2px 12px rgba(212, 175, 55, 0.3) !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

body.lang-ar.page .page-subtitle,
body.lang-ar.page .entry-subtitle {
    color: rgba(255, 255, 255, 0.95) !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.6 !important;
}

/* ============================================================================
   Content Area - Gold Theme
   ============================================================================ */
body.lang-ar.page .entry-content,
body.lang-ar.page .page-content {
    direction: rtl !important;
    text-align: right !important;
}

body.lang-ar.page .entry-content h2,
body.lang-ar.page .page-content h2 {
    color: #003366 !important;
    border-right: 4px solid #D4AF37 !important;
    border-left: none !important;
    padding-right: 20px !important;
    padding-left: 0 !important;
}

body.lang-ar.page .entry-content h3,
body.lang-ar.page .page-content h3 {
    color: #004080 !important;
}

body.lang-ar.page .entry-content a,
body.lang-ar.page .page-content a {
    color: #D4AF37 !important;
}

body.lang-ar.page .entry-content a:hover,
body.lang-ar.page .page-content a:hover {
    color: #FFD700 !important;
}

/* ============================================================================
   Buttons - Gold Theme
   ============================================================================ */
body.lang-ar.page .btn,
body.lang-ar.page .button,
body.lang-ar.page .wp-block-button__link {
    background: linear-gradient(135deg, #D4AF37 0%, #FFD700 100%) !important;
    color: #003366 !important;
    border: none !important;
    padding: 12px 30px !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
}

body.lang-ar.page .btn:hover,
body.lang-ar.page .button:hover,
body.lang-ar.page .wp-block-button__link:hover {
    background: linear-gradient(135deg, #FFD700 0%, #D4AF37 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4) !important;
}

/* ============================================================================
   Lists - RTL
   ============================================================================ */
body.lang-ar.page .entry-content ul,
body.lang-ar.page .page-content ul {
    padding-right: 30px !important;
    padding-left: 0 !important;
}

body.lang-ar.page .entry-content ol,
body.lang-ar.page .page-content ol {
    padding-right: 30px !important;
    padding-left: 0 !important;
}

/* ============================================================================
   Blockquote - Gold Theme
   ============================================================================ */
body.lang-ar.page .entry-content blockquote,
body.lang-ar.page .page-content blockquote {
    border-right: 4px solid #D4AF37 !important;
    border-left: none !important;
    padding-right: 20px !important;
    padding-left: 0 !important;
    background: rgba(212, 175, 55, 0.05) !important;
    color: #003366 !important;
}

/* ============================================================================
   Images and Media - RTL
   ============================================================================ */
body.lang-ar.page .entry-content img,
body.lang-ar.page .page-content img {
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

body.lang-ar.page .alignright {
    float: left !important;
    margin-left: 0 !important;
    margin-right: 20px !important;
}

body.lang-ar.page .alignleft {
    float: right !important;
    margin-right: 0 !important;
    margin-left: 20px !important;
}

/* ============================================================================
   WordPress Blocks - RTL Support
   ============================================================================ */
body.lang-ar.page .wp-block-columns {
    direction: rtl !important;
}

body.lang-ar.page .wp-block-group {
    direction: rtl !important;
    text-align: right !important;
}

body.lang-ar.page .wp-block-cover {
    direction: rtl !important;
    text-align: right !important;
}

/* ============================================================================
   Sidebar - Gold Theme (if exists)
   ============================================================================ */
body.lang-ar.page .sidebar,
body.lang-ar.page .widget-area {
    direction: rtl !important;
    text-align: right !important;
}

body.lang-ar.page .widget-title {
    color: #003366 !important;
    border-right: 4px solid #D4AF37 !important;
    border-left: none !important;
    padding-right: 15px !important;
    padding-left: 0 !important;
}

/* ============================================================================
   Responsive Adjustments
   ============================================================================ */
@media (max-width: 768px) {
    body.lang-ar.page .page-title,
    body.lang-ar.page .entry-title,
    body.lang-ar.page h1 {
        text-align: center !important;
    }
    
    body.lang-ar.page .page-subtitle,
    body.lang-ar.page .entry-subtitle {
        text-align: center !important;
    }
}

/* ============================================================================
   Print Styles - RTL
   ============================================================================ */
@media print {
    body.lang-ar.page {
        direction: rtl !important;
    }
}