/* assets/css/index_custom_styles.css */


/* --- Global Variables --- */
:root {
--primary-color: #5d5dff;
--secondary-color: #3f3f74;
--accent-color: #ff9933;
--success-color: #4CAF50;
--info-color: #2196F3;
--warning-color: #ffc107;
--danger-color: #f44336;
--text-dark: #34495e;
--text-light: #7f8c8d;
--bg-light: #f4f7f6;
--bg-card: #ffffff;
--border-color: #e0e6ed;  --border-radius: 12px;
--shadow-light: 0 4px 20px rgba(0, 0, 0, 0.08);
--transition-speed: 0.3s ease;
}

/* --- Universal Reset --- */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

/* --- Body Base Styles --- */
body {
font-family: 'Vazirmatn', sans-serif;
line-height: 1.6;
color: var(--text-dark);
direction: rtl;
background-color: var(--bg-light);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* --- Page Wrapper --- */
.page-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}

/* --- General Link Styles --- */
a {
color: var(--primary-color);
text-decoration: none;
transition: color var(--transition-speed);
}

a:hover {
color: var(--secondary-color);
text-decoration: underline;
}

/* --- General Headings Styles --- */
h1, h2, h3, h4, h5, h6 {
color: var(--secondary-color);
font-weight: 700;
margin-bottom: 0.5em;
}

p{
color: var(--text-dark);
line-height: 1.8;
margin-bottom: 1em;
}

/* --- Styles for above-the-fold elements (e.g., header, main container) --- */
.site-logo {
height: 40px;
width: auto;
max-width:100%;
vertical-align: middle;
}

/* Custom styles for the Header/Navbar */
.navbar {
     padding-top: 15px;
     padding-bottom: 15px;
    }
     
.navbar-brand {
     font-weight: 700;
     font-size: 1.7em;
     color: var(--bs-white) !important; /* Ensure brand color is white */
    }
.navbar-brand i {
     margin-right: 5px;
    }
     
.nav-link {
     font-weight: 500;
     font-size: 1.05em;
     padding-right: 1.2rem !important; /* Adjust padding for RTL */
     padding-left: 1.2rem !important;
    }
     
.navbar-nav .btn {
     padding: 8px 20px;
     margin-right: 10px; /* Space between buttons */
    }
.navbar-nav .btn-warning {
     color: var(--bs-dark) !important; /* Make sure text is dark on warning button */
    }
.navbar-nav .btn-outline-light:hover {
     background-color: var(--bs-primary) !important;
     color: var(--bs-white) !important;
    }
     
     
/* Hero Section */
.hero-section {
     min-height: 70vh; /* Adjust height as needed */
     background-size: cover;
     background-position: center;
     background-color: rgba(0, 0, 0, 0.6); /* Dark overlay */
     background-blend-mode: overlay; /* Blend overlay with background image */
     position: relative;
     padding-top: 100px; /* Space for fixed navbar */
     padding-bottom: 50px;
    }
     
.hero-section .container {
     z-index: 1; /* Ensure content is above overlay */
    }
     
.hero-section h1 {
     font-size: 3.8em;
     text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
     color: var(--bs-white); /* Ensure hero text is white */
    }
     
.hero-section p {
     font-size: 1.4em;
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
     color: var(--bs-white); /* Ensure hero paragraph is white */
    }
     
.hero-section .btn-lg {
     padding: 15px 35px;
     font-size: 1.3em;
     border-radius: 50px; /* Rounded button */
     transition: all 0.3s ease;
    }
     
.hero-section .btn-lg:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    }
/* Search Section */
.search-section {
     background-color: var(--bs-light);
     border-bottom: 1px solid var(--bs-gray-300);
    }
     
.search-section h2 { /* Added this for search section title */
     color: var(--bs-dark); /* Ensure title is dark on light background */
     font-weight: 700;
    }
    
.custom-search-bar {
     max-width: 600px;
     margin-left: auto;
     margin-right: auto;
     direction: rtl; /* For RTL input direction */
    }
     
.custom-search-bar .form-control-lg {
     padding: 15px 20px;
     border-radius: 50px 0 0 50px; /* Rounded left side for RTL */
     border-color: var(--bs-primary);
     direction: rtl; /* Input text direction */
     text-align: right; /* Placeholder text alignment */
    }
     
.custom-search-bar .form-control-lg:focus {
     border-color: var(--bs-primary);
     box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }
.custom-search-bar .btn-lg {
     border-radius: 0 50px 50px 0; /* Rounded right side for RTL */
     padding: 15px 30px;
     font-size: 1.2em;
    }
     
/* Latest Articles Section */
.latest-articles-section {
     background-color: var(--bs-white); /* Ensure background is white for good contrast */
    }
    
.latest-articles-section h2 {
     color: var(--bs-primary);
     font-weight: 700;
     position: relative;
     padding-bottom: 10px;
    }
.latest-articles-section h2::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 100px;
     height: 4px;
     background-color: var(--bs-warning);
     border-radius: 2px;
    }
     
.article-card {
     border: none;
     border-radius: var(--bs-border-radius); /* Changed to Bootstrap variable */
     overflow: hidden;
     transition: transform 0.2s ease-in-out;
     background-color: var(--bs-card-bg); /* Ensure card background is clear */
     color: var(--bs-body-color); /* Ensure default text color for card body */
}
 
.article-card:hover {
 transform: translateY(-5px);
}
 
.article-card-img {
 height: 200px; /* Fixed height for article images */
 object-fit: cover;
}
 
.article-card .card-title {
 font-size: 1.3em;
 font-weight: 700;
 color: var(--bs-primary); /* Ensure title color is primary */
 margin-bottom: 10px;
}
 
.article-card .article-summary {
 font-size: 0.95em;
 color: var(--bs-secondary); /* Ensure summary text color is secondary or dark */
 line-height: 1.6;
 height: 4.8em; /* Approximate 3 lines: 1.6em * 3 = 4.8em */
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 3; /* Limit to 3 lines */
 -webkit-box-orient: vertical;
}
 
.article-card .card-footer {
 background-color: var(--bs-light);
 border-top: 1px solid var(--bs-gray-200);
}
 
.article-card .card-footer .btn-outline-primary {
 border-radius: 25px;
 font-weight: 600;
}

.article-card .card-footer .btn-outline-primary i {
 margin-right: 5px; /* Space before icon for RTL */
}
 
/* Call to Action Section */
.cta-section {
 background: linear-gradient(135deg, var(--bs-primary), var(--bs-secondary));
 color: var(--bs-white); /* Ensure text is white on dark gradient */
}
.cta-section h2 {
     font-weight: 700;
     font-size: 2.5em;
     color: var(--bs-white); /* Ensure title is white */
    }
.cta-section p { /* Added this for cta paragraph */
     color: var(--bs-white); /* Ensure paragraph is white */
    }
.cta-section .btn-light {
     border-radius: 50px;
     padding: 15px 35px;
     font-size: 1.2em;
     transition: all 0.3s ease;
    }
.cta-section .btn-light:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    }
/* Footer adjustments */
footer {
     background-color: #212529 !important; /* Darker footer */
     color: var(--bs-white) !important; /* Ensure footer text is white */
    }
footer p { /* Added for footer paragraph */
     color: var(--bs-white) !important; /* Ensure footer paragraph text is white */
    }
.social-icons a {
     font-size: 1.4em;
     margin: 0 8px;
     transition: color 0.3s ease;
     color: var(--bs-white); /* Ensure social icons are white */
    }
.social-icons a:hover {
     color: var(--bs-primary) !important;
    }
     
/* General RTL adjustments */
/* These might conflict with Bootstrap's built-in RTL utilities,
but keeping them if explicitly needed. Bootstrap 5 handles RTL well. */
.text-start { text-align: right !important; }
.text-end { text-align: left !important; }
/* Bootstrap's ms-auto already works for RTL */
     
     
/* Responsive adjustments */
/* Corrected media queries */
@media (max-width: 991px) { /* Medium devices and down */
.hero-section h1 {
     font-size: 2.8em;
     }
.hero-section p {
     font-size: 1.2em;
     }
.hero-section .btn-lg {
     font-size: 1.1em;
     padding: 12px 30px;
     }
.navbar-nav .btn {
     margin-top: 10px;
     margin-right: 0;
     width: 100%;
     }
.navbar-nav .nav-item {
     margin-bottom: 5px;
     }
    }
     
@media (max-width: 767px) { /* Small devices and down */
.hero-section {
     min-height: 60vh;
     padding-top: 80px;
     }
.hero-section h1 {
     font-size: 2.2em;
     }
.hero-section p {
     font-size: 1em;
     }
.hero-section .btn-lg {
     font-size: 1em;
     padding: 10px 25px;
     }
.custom-search-bar .form-control-lg,
.custom-search-bar .btn-lg {
     border-radius: 8px !important; /* Remove specific rounding for full width on small screens */
     }
.custom-search-bar .btn-lg {
     width: 100%;
     margin-top: 10px;
     }
    }
    
    /* تنظیمات برای عنوان مقالات در صفحه اصلی */
.article-card .card-title {
    font-size: 1.5rem; /* یا هر سایز دیگری که مناسب می‌دانید */
    font-weight: bold;
    color: #333; /* رنگ دلخواه */
}