/* Global Styles & Reset */
:root {
–primary-color: #004080; /* Deep Blue */
–secondary-color: #007bff; /* Bright Blue */
–accent-color: #FFC107; /* Amber/Gold */
–background-light: #F8F9FA; /* Light Gray */
–text-color: #343A40; /* Dark Gray */
–heading-color: #212529; /* Blackish Gray */
–border-color: #DEE2E6; /* Light Border Gray */
–font-family-primary: ‘Vazirmatn’, ‘Tahoma’, ‘Arial’, sans-serif;
}

body {
margin: 0;
padding: 0;
font-family: var(–font-family-primary);
line-height: 1.6;
color: var(–text-color);
background-color: #fff; /* Ensure white background if copied to a theme */
direction: rtl; /* Right-to-left for Persian */
text-align: right; /* Align text to the right */
}

/* Main Container for Responsiveness */
.article-container {
max-width: 960px;
margin: 2rem auto;
padding: 1.5rem;
background-color: #fff;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border-radius: 8px;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
font-family: var(–font-family-primary);
color: var(–heading-color);
margin-top: 2rem;
margin-bottom: 1rem;
line-height: 1.3;
}

h1 {
/* Inline styles for h1 are added directly in the HTML tag to ensure block editor recognition */
/* font-size: 2.8rem; font-weight: 800; color: #004080; */
text-align: center;
border-bottom: 3px solid var(–accent-color);
padding-bottom: 1rem;
margin-bottom: 2rem;
}

h2 {
/* Inline styles for h2 are added directly in the HTML tag to ensure block editor recognition */
/* font-size: 2.2rem; font-weight: 700; color: #007bff; */
border-right: 6px solid var(–accent-color);
padding-right: 15px;
margin-right: -1.5rem; /* Adjust for padding of container to make border extend */
padding-top: 5px;
padding-bottom: 5px;
background-color: var(–background-light);
border-radius: 0 8px 8px 0;
box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
}

h3 {
font-size: 1.7rem;
font-weight: 600;
color: var(–heading-color);
margin-top: 1.8rem;
border-bottom: 1px dashed var(–border-color);
padding-bottom: 0.5rem;
}

/* Paragraphs */
p {
margin-bottom: 1rem;
font-size: 1.1rem;
line-height: 1.8;
}

/* Lists */
ul, ol {
margin-bottom: 1rem;
padding-right: 1.5rem;
font-size: 1.05rem;
}

li {
margin-bottom: 0.5rem;
line-height: 1.7;
}

/* Table of Contents */
.toc-container {
background-color: var(–background-light);
border: 1px solid var(–border-color);
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 2rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.toc-title {
font-size: 1.5rem;
font-weight: 700;
color: var(–primary-color);
margin-top: 0;
margin-bottom: 1rem;
text-align: center;
border-bottom: 2px solid var(–accent-color);
padding-bottom: 0.7rem;
}

.toc-list {
list-style-type: none;
padding: 0;
margin: 0;
}

.toc-list li {
margin-bottom: 0.8rem;
}

.toc-list a {
color: var(–secondary-color);
text-decoration: none;
font-size: 1.1rem;
transition: color 0.3s ease;
display: block; /* Make the whole list item clickable */
padding: 0.3rem 0;
border-radius: 4px;
}

.toc-list a:hover {
color: var(–primary-color);
text-decoration: underline;
background-color: rgba(0, 123, 255, 0.05);
}

/* Table Styling */
.styled-table {
width: 100%;
border-collapse: collapse;
margin: 2rem 0;
font-size: 1.05rem;
text-align: right;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
border-radius: 8px;
overflow: hidden; /* Ensures border-radius applies to corners */
}

.styled-table thead tr {
background-color: var(–primary-color);
color: #ffffff;
text-align: right;
font-weight: bold;
}

.styled-table th,
.styled-table td {
padding: 12px 15px;
border: 1px solid var(–border-color);
}

.styled-table tbody tr {
border-bottom: 1px solid var(–border-color);
}

.styled-table tbody tr:nth-of-type(even) {
background-color: var(–background-light);
}

.styled-table tbody tr:last-of-type {
border-bottom: 2px solid var(–primary-color);
}

.styled-table tbody tr:hover {
background-color: rgba(0, 123, 255, 0.1);
cursor: pointer;
}

/* Infographic Alternative */
.infographic-box {
background-color: var(–primary-color);
color: #fff;
padding: 2.5rem;
border-radius: 12px;
margin: 2rem 0;
box-shadow: 0 8px 20px rgba(0, 64, 128, 0.2);
text-align: center;
}

.infographic-box h3 {
color: var(–accent-color);
font-size: 2rem;
font-weight: 700;
margin-top: 0;
margin-bottom: 1.5rem;
border-bottom: 2px solid var(–accent-color);
display: inline-block;
padding-bottom: 0.5rem;
}

.infographic-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 1.5rem;
margin-top: 2rem;
}

.infographic-item {
flex: 1 1 calc(50% – 2rem); /* Two items per row on larger screens */
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: transform 0.3s ease, background-color 0.3s ease;
min-width: 280px; /* Minimum width for each item */
}

.infographic-item:hover {
transform: translateY(-8px);
background-color: rgba(255, 255, 255, 0.15);
}

.infographic-icon {
font-size: 3.5rem; /* Larger icon size */
margin-bottom: 1rem;
color: var(–accent-color);
line-height: 1; /* Adjust line height for icon */
}

.infographic-item p {
font-size: 1.1rem;
color: #fff;
margin-bottom: 0;
}

/* Emphasized Text */
.emphasis {
font-weight: bold;
color: var(–secondary-color);
}
.callout {
background-color: rgba(0, 123, 255, 0.08);
border-right: 5px solid var(–secondary-color);
padding: 1rem 1.5rem;
margin: 1.5rem 0;
border-radius: 0 8px 8px 0;
}
.callout p {
margin: 0;
font-weight: 500;
color: var(–heading-color);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
.article-container {
margin: 1rem auto;
padding: 1rem;
}
h1 {
font-size: 2rem !important; /* Override inline for responsiveness */
}
h2 {
font-size: 1.7rem !important; /* Override inline for responsiveness */
margin-right: -1rem; /* Adjust for smaller padding */
}
h3 {
font-size: 1.4rem;
}
p, ul, ol, .styled-table, .infographic-item p {
font-size: 1rem;
}
.toc-title {
font-size: 1.3rem;
}
.toc-list a {
font-size: 1rem;
}
.infographic-box {
padding: 1.5rem;
}
.infographic-box h3 {
font-size: 1.6rem;
}
.infographic-item {
flex: 1 1 100%; /* One item per row on small screens */
padding: 1rem;
}
.infographic-icon {
font-size: 2.8rem;
}
}

@media (max-width: 480px) {
h1 {
font-size: 1.8rem !important; /* Override inline for responsiveness */
padding-bottom: 0.8rem;
}
h2 {
font-size: 1.5rem !important; /* Override inline for responsiveness */
padding-right: 10px;
}
h3 {
font-size: 1.2rem;
}
.article-container {
padding: 0.8rem;
margin: 0.5rem auto;
}
.toc-container {
padding: 1rem;
}
.infographic-box {
padding: 1rem;
margin: 1.5rem 0;
}
.infographic-box h3 {
font-size: 1.4rem;
}
.infographic-icon {
font-size: 2.5rem;
}
}