/*
Theme Name: قالب الحرمين الإخباري
Theme URI: # (ضع رابط موقعك هنا)
Author: اسمك / اسم شركتك
Author URI: # (ضع رابط موقعك هنا)
Description: قالب إخباري متجاوب مصمم خصيصًا لموقع الحرمين.
Version: 1.0.0
Text Domain: haramain-news
*/

/* =========================================
   General / Base Styles
   ========================================= */
body {
    background-color: #f0f2f5; /* Light gray background */
    color: #333;
    direction: rtl; /* Ensure right-to-left direction */
    text-align: right; /* Align text to the right */
    /* إضافة padding-top لتعويض ارتفاع الترويسة الثابتة الجديدة المدمجة */
    /* تم زيادة القيمة لضمان عدم تداخل المحتوى مع الترويسة على جميع الشاشات */
    padding-top: 140px; /* Increased from 104px to 140px for more clearance */

    /* Sticky Footer Pattern: Make body a flex container */
    min-height: 100vh; /* Make body at least viewport height */
    display: flex; /* Enable flexbox */
    flex-direction: column; /* Stack children vertically */
    /* Remove padding-bottom as it's handled by flexbox pushing footer down */
    /* padding-bottom: 0; */
}

/* Ensure main content area grows to push footer down */
main {
    flex-grow: 1; /* Allow main content to take up available space */
}


/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Smooth scroll for back to top button */
html {
    scroll-behavior: smooth;
}

/* =========================================
   Typography
   ========================================= */
/* Custom styles to ensure Cairo font is applied globally */
body,
button,
input,
select,
textarea,
p,
span,
a,
li,
div { /* تطبيق الخط على جميع العناصر النصية الشائقة */
    font-family: 'Cairo', sans-serif !important; /* استخدام !important لضمان التجاوز */
}
/* Apply Cairo font to headings as well for consistency */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cairo', sans-serif !important; /* استخدام !important لضمان التجاوز */
}

/* =========================================
   Header & Top Bar (Combined)
   ========================================= */
header {
    background-color: #000; /* Black background */
    color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: fixed; /* Make it fixed */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 40; /* Ensure it's above content but below search overlay/mobile menu */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    padding: 0; /* Remove default padding as internal divs will handle it */
}

.header-main-row { /* Main header row with logo and tools */
    padding: 1rem; /* Padding for the main header content */
    display: flex;
    justify-content: space-between; /* Logo on right, tools on left in RTL */
    align-items: center;
    width: 100%;
}

.header-bottom-row { /* New row for date and languages */
    background-color: #333; /* Dark gray for the bottom row */
    font-size: 0.875rem; /* text-sm */
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    width: 100%;
}

.header-date {
    white-space: nowrap; /* Prevent date from wrapping */
    margin-bottom: 0; /* Remove margin on small screens */
}

.header-languages {
    display: flex;
    gap: 0.5rem; /* Space between language links */
}

.header-languages select {
    background-color: #333;
    color: #fff;
    border: 1px solid #555;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
}

.header-languages select:focus {
    outline: none;
    border-color: #a0aec0;
}

/* Ensure custom logo is responsive */
.custom-logo {
    max-height: 40px; /* Or whatever max height you want */
    width: auto;
    height: auto;
    object-fit: contain;
}

/* =========================================
   News Cards
   ========================================= */
/* Specific styling for the news card image to ensure consistent height */
.news-card-image {
    width: 100%;
    height: 200px; /* Fixed height for consistency */
    object-fit: cover; /* Cover the area, cropping if necessary */
    border-radius: 0.5rem; /* Rounded corners */
}

/* =========================================
   Post Carousel (Hero Section)
   ========================================= */
.carousel-slide {
    /* Updated height for taller carousel */
    height: 320px; /* Base height for h-80 */
}
@media (min-width: 768px) { /* md breakpoint */
    .carousel-slide {
        height: 400px; /* md:h-[400px] */
    }
}
@media (min-width: 1024px) { /* lg breakpoint */
    .carousel-slide {
        height: 500px; /* lg:h-[500px] */
    }
}

.carousel-slide .bg-opacity-50 {
    /* Stronger gradient at the bottom for text readability */
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 100%);
    display: flex; /* Ensure flexbox for content alignment */
    flex-direction: column; /* Stack content vertically */
    justify-content: flex-end; /* Align content to the bottom */
    align-items: flex-start; /* Align text to the start (right in RTL) */
    padding: 1rem; /* p-4 */
}

.carousel-slide .bg-opacity-50 h2,
.carousel-slide .bg-opacity-50 p {
    text-align: right; /* Ensure text is aligned right */
    width: 100%; /* Take full width */
}

.carousel-slide .bg-opacity-50 a {
    align-self: flex-start; /* Align 'Read More' button to the start (right in RTL) */
}


.carousel-dot {
    transition: all 0.2s ease-in-out; /* Smooth transition for dot size/color */
}

.carousel-dot.bg-black {
    transform: scale(1.2); /* Make active dot slightly larger */
    background-color: #000 !important; /* Ensure black for active dot */
}

/* Carousel Navigation Arrows */
#carousel-prev,
#carousel-next {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    color: white;
    padding: 0.75rem; /* p-3 */
    border-radius: 9999px; /* rounded-full */
    transition: background-color 0.2s ease, opacity 0.2s ease;
    opacity: 0.8;
}

#carousel-prev:hover,
#carousel-next:hover {
    background-color: rgba(0, 0, 0, 0.75); /* Darker on hover */
    opacity: 1;
}

#carousel-prev {
    right: 1rem; /* right-4 */
}

#carousel-next {
    left: 1rem; /* left-4 */
}


/* =========================================
   Search Overlay
   ========================================= */
#search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black overlay */
    z-index: 999; /* Higher than header and mobile menu */
    display: flex;
    align-items: flex-start; /* Align search bar to the top */
    justify-content: center;
    padding-top: 60px; /* Space for header */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

#search-overlay.is-active { /* Changed from .active to .is-active to avoid conflicts */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#search-overlay .search-container {
    width: 90%;
    max-width: 600px;
    background-color: white;
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

#search-overlay .search-input {
    flex-grow: 1;
    border: none;
    outline: none;
    padding: 0.5rem;
    font-size: 1.125rem; /* text-lg */
    color: #333;
    background-color: transparent;
}

#search-overlay .search-submit-button {
    background-color: #000;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem; /* rounded-md */
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#search-overlay .search-submit-button:hover {
    background-color: #333;
}

#search-overlay .close-search-button {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
}

/* =========================================
   Footer
   ========================================= */
footer {
    background-color: #1a202c; /* Darker gray for footer background */
    color: #fff;
    padding: 2rem 1rem; /* Adjust padding as needed */
    /* Removed fixed positioning to make it a sticky footer */
    /* position: fixed; */
    /* bottom: 0; */
    /* left: 0; */
    width: 100%; /* Keep full width */
    z-index: 30; /* Ensure it's above general content */
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1); /* Optional: add shadow to top of footer */
}

.footer-link {
    transition: color 0.3s ease;
}
.footer-link:hover {
    color: #007bff; /* Example hover color */
}

/* =========================================
   Back to Top Button
   ========================================= */
#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #000; /* Black background */
    color: white;
    border-radius: 9999px; /* Fully rounded */
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease-in-out;
    opacity: 0; /* Hidden by default */
    visibility: hidden;
    z-index: 1000;
    /* Added explicit width and height for perfect circle */
    width: 3rem; /* Equivalent to p-3, assuming square */
    height: 3rem; /* Equivalent to p-3, assuming square */
}

#back-to-top.show {
    opacity: 1;
    visibility: visible;
}

/* =========================================
   Dark Mode Styles
   ========================================= */
body.dark-mode {
    background-color: #1a202c; /* Dark background for body */
    color: #e2e8f0; /* Light text color */
}

body.dark-mode header {
    background-color: #2d3748; /* Darker header background */
    color: #e2e8f0;
}

body.dark-mode .header-bottom-row {
    background-color: #4a5568; /* Even darker for bottom row */
}

body.dark-mode .header-languages select {
    background-color: #4a5568;
    border-color: #6b7280;
    color: #e2e8f0;
}

body.dark-mode .header-languages select:focus {
    border-color: #90cdf4;
}

body.dark-mode .news-card { /* Assuming news cards have a class like .news-card */
    background-color: #2d3748;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

body.dark-mode .news-card h4,
body.dark-mode .news-card p {
    color: #e2e8f0;
}

body.dark-mode .text-gray-800 {
    color: #e2e8f0; /* General text color adjustment */
}

body.dark-mode .text-gray-500 {
    color: #a0aec0; /* Lighter gray for secondary text */
}

body.dark-mode .text-gray-700 {
    color: #cbd5e0; /* Lighter gray for general content */
}

body.dark-mode .bg-white {
    background-color: #2d3748; /* Dark background for white elements */
}

body.dark-mode .bg-gray-200 {
    background-color: #4a5568;
    color: #e2e8f0;
}

body.dark-mode .prose {
    color: #e2e8f0; /* Ensure prose content is readable */
}

body.dark-mode .prose h1,
body.dark-mode .prose h2,
body.dark-mode .prose h3,
body.dark-mode .prose h4,
body.dark-mode .prose h5,
body.dark-mode .prose h6 {
    color: #e2e8f0;
}

body.dark-mode .prose a {
    color: #90cdf4; /* Lighter blue for links */
}

body.dark-mode .prose code {
    background-color: #4a5568;
    color: #e2e8f0;
}

body.dark-mode footer {
    background-color: #2d3748; /* Darker footer */
    color: #e2e8f0;
}

body.dark-mode footer .text-gray-300 {
    color: #a0aec0;
}

body.dark-mode #search-overlay .search-container {
    background-color: #2d3748;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

body.dark-mode #search-overlay .search-input {
    color: #e2e8f0;
}

body.dark-mode article h1 { /* New rule for article title */
    color: #e2e8f0;
}

body.dark-mode #dark-mode-toggle { /* Dark mode toggle button border in dark mode */
    border-color: #a0aec0; /* A lighter gray for visibility */
}