/* Base styles for the entire article container */
.article-container {
font-family: ‘Arial’, ‘Tahoma’, ‘Verdana’, sans-serif;
line-height: 1.7;
color: #333; /* Dark gray for text */
max-width: 100%; /* Ensure responsiveness */
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9; /* Light background for the whole article */
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
direction: rtl; /* Right-to-left for Persian */
text-align: right; /* Default text alignment for Persian */
}

/* Heading styles */
.article-container h1, .article-container h2, .article-container h3 {
color: #004d99; /* Deep blue for headings */
margin-top: 35px;
margin-bottom: 20px;
line-height: 1.3;
font-weight: 700; /* Bold */
}

.article-container h1 {
font-size: 2.6em; /* Larger for H1 */
border-bottom: 3px solid #004d99;
padding-bottom: 15px;
text-align: center;
background-color: #e6f2ff; /* Very light blue background for H1 */
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
border-radius: 8px 8px 0 0;
margin-top: 0;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.article-container h2 {
font-size: 2em; /* For H2 */
border-bottom: 2px solid #a6d9ff; /* Lighter blue border */
padding-bottom: 10px;
margin-top: 30px;
}

.article-container h3 {
font-size: 1.5em; /* For H3 */
color: #0066cc; /* Slightly lighter blue for H3 */
margin-top: 25px;
}

/* Paragraph styles */
.article-container p {
margin-bottom: 1em;
text-align: justify;
}

/* List styles */
.article-container ul, .article-container ol {
margin-right: 25px; /* Adjust for RTL */
margin-left: 0;
margin-bottom: 1em;
list-style-position: inside; /* Puts bullet/number inside list item */
}
.article-container ul {
list-style-type: disc;
}
.article-container ol {
list-style-type: decimal;
}
.article-container li {
margin-bottom: 0.5em;
padding-right: 5px; /* Small padding for list item content */
}

/* Table styles */
.article-container table {
width: 100%;
border-collapse: collapse;
margin: 25px 0;
font-size: 0.95em;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden; /* Ensures rounded corners apply to content */
}
.article-container th, .article-container td {
border: 1px solid #ddd;
padding: 12px 15px;
text-align: right; /* RTL support */
}
.article-container th {
background-color: #007bff; /* Primary blue for table header */
color: white;
font-weight: bold;
}
.article-container tr:nth-child(even) {
background-color: #f2f2f2; /* zebra striping */
}
.article-container tr:hover {
background-color: #e6f7ff; /* light blue on hover */
}

/* Infographic box styling */
.infographic-box {
background-color: #e0f2f7; /* Light teal background */
border-right: 5px solid #00a8cc; /* Teal border on right for RTL */
padding: 25px;
margin: 30px 0;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
gap: 15px;
}
.infographic-item {
display: flex;
align-items: center;
gap: 15px;
background-color: #ffffff; /* White background for each item */
padding: 15px;
border-radius: 6px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
flex-direction: row-reverse; /* Icon on the right for RTL */
}
.infographic-icon {
font-size: 2.2em;
color: #007bff; /* Blue icon */
flex-shrink: 0;
}
.infographic-text {
font-size: 1.1em;
color: #333;
font-weight: 500;
text-align: right; /* RTL support */
}

/* Call to Action/Highlight sections */
.highlight-box {
background-color: #fffacd; /* Light goldenrod yellow */
border-right: 5px solid #ffcc00; /* Gold border on right for RTL */
padding: 20px;
margin: 30px 0;
border-radius: 8px;
font-weight: bold;
color: #5a4a00;
text-align: right;
}

/* Anchor tag styling */
.article-container a {
color: #007bff; /* Standard link color */
text-decoration: none; /* No underline by default */
transition: color 0.3s ease;
}
.article-container a:hover {
color: #0056b3; /* Darker blue on hover */
text-decoration: underline; /* Underline on hover */
}

/* Responsive adjustments */
@media (max-width: 1024px) { /* Tablets and smaller laptops */
.article-container {
padding: 15px;
}
.article-container h1 {
font-size: 2.2em;
}
.article-container h2 {
font-size: 1.8em;
}
.article-container h3 {
font-size: 1.4em;
}
}

@media (max-width: 768px) { /* Larger phones and small tablets */
.article-container {
padding: 10px;
}
.article-container h1 {
font-size: 2em;
padding-left: 15px;
padding-right: 15px;
}
.article-container h2 {
font-size: 1.6em;
}
.article-container h3 {
font-size: 1.3em;
}
.infographic-box {
padding: 15px;
}
.infographic-item {
padding: 10px;
gap: 10px;
}
.infographic-icon {
font-size: 1.8em;
}
.infographic-text {
font-size: 1em;
}
/* Make table responsive by stacking cells */
.article-container table, .article-container thead, .article-container tbody, .article-container th, .article-container td, .article-container tr {
display: block;
}
.article-container thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.article-container tr {
border: 1px solid #ddd;
margin-bottom: 10px;
}
.article-container td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-right: 50%; /* Space for pseudo-element label */
text-align: right;
}
/* Adding labels for responsive table cells – illustrative, actual labels would need to be added to HTML via data attributes for full effectiveness */
.article-container td:before {
position: absolute;
top: 6px;
right: 6px;
width: 45%;
padding-left: 10px;
white-space: nowrap;
text-align: left; /* Label text aligned left for clarity */
font-weight: bold;
color: #004d99;
content: attr(data-label); /* Requires data-label attribute on each td */
}
/* Example data-label content for the specific table in this document: */
.article-container tr:nth-of-type(1) td:before { content: “نوع موضوع:”; }
.article-container tr:nth-of-type(2) td:before { content: “رویکرد (روش‌شناسی پیشنهادی):”; }
}

@media (max-width: 480px) { /* Small phones */
.article-container h1 {
font-size: 1.8em;
}
.article-container h2 {
font-size: 1.4em;
}
.article-container h3 {
font-size: 1.2em;
}
.infographic-icon {
font-size: 1.6em;
}
}