/* Global Styles & Reset for Block Editor Compatibility */
body {
font-family: ‘Tahoma’, ‘Arial’, sans-serif; /* A common, readable Persian-friendly font */
line-height: 1.7;
color: #333;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f7f9fc; /* Light background for a clean look */
}

.container {
max-width: 1000px;
margin: 20px auto;
padding: 25px;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden; /* For potential background elements */
}

/* Decorative Top Border – Visual Appeal */
.container::before {
content: ”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 10px; /* Thicker decorative border */
background: linear-gradient(to right, #4a90e2, #2e62a8); /* Blue gradient */
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}

/* Heading Styles */
h1, h2, h3 {
font-family: ‘Vazirmatn’, ‘B Titr’, ‘Arial’, sans-serif; /* More distinguished font for headings */
color: #2e62a8; /* Deep blue for headings */
margin-top: 35px;
margin-bottom: 20px;
line-height: 1.4;
text-align: right;
padding-right: 15px; /* Indent headings slightly for design */
border-right: 4px solid #4a90e2; /* Accent border */
}

h1 {
font-size: 2.6em; /* Larger for H1 */
font-weight: 800;
color: #1a4f8f; /* Even deeper blue for H1 */
border-right-color: #ffc107; /* Gold accent for H1 */
padding-bottom: 10px;
text-align: center; /* Center H1 for prominence */
margin-bottom: 40px;
}

h2 {
font-size: 2.1em;
font-weight: 700;
color: #2e62a8;
}

h3 {
font-size: 1.6em;
font-weight: 600;
color: #4a90e2;
border-right-color: #a8d5ff; /* Lighter blue accent */
}

/* Paragraph Styles */
p {
text-align: justify;
margin-bottom: 1.2em;
font-size: 1.05em;
color: #444;
}

/* List Styles */
ul {
list-style-type: disc;
padding-right: 30px;
margin-bottom: 20px;
}

ol {
list-style-type: decimal;
padding-right: 30px;
margin-bottom: 20px;
}

li {
margin-bottom: 10px;
text-align: justify;
font-size: 1.05em;
color: #444;
}

/* Table Styles */
table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
border-radius: 8px;
overflow: hidden; /* Ensures border-radius applies */
}

th, td {
border: 1px solid #e0e0e0;
padding: 15px;
text-align: right;
font-size: 1.02em;
color: #555;
}

th {
background-color: #2e62a8; /* Deep blue header */
color: #ffffff;
font-weight: 600;
text-align: center;
}

tr:nth-child(even) {
background-color: #f9f9f9; /* Subtle zebra striping */
}

/* InfoGraphic-like Block (Alternative) */
.infographic-block {
background: linear-gradient(135deg, #e0f2f7, #c7e9f1); /* Light blue gradient */
border-left: 8px solid #4a90e2; /* Strong blue accent */
padding: 25px;
margin: 40px 0;
border-radius: 10px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
position: relative;
overflow: hidden;
text-align: right;
color: #333;
}

.infographic-block h3 {
color: #2e62a8;
border-right: none; /* Remove default H3 border for this block */
padding-right: 0;
margin-top: 0;
margin-bottom: 15px;
font-size: 1.8em;
}

.infographic-block ul {
list-style: none;
padding: 0;
margin: 0;
}

.infographic-block li {
position: relative;
padding-right: 35px;
margin-bottom: 12px;
font-size: 1.08em;
line-height: 1.6;
color: #333;
}

.infographic-block li::before {
content: ‘✔’; /* Checkmark icon */
position: absolute;
right: 0;
top: 0;
color: #28a745; /* Green checkmark */
font-weight: bold;
font-size: 1.2em;
}

/* Responsive Design */
/* Mobile (up to 600px) */
@media (max-width: 600px) {
.container {
margin: 10px;
padding: 15px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 1.8em;
padding-bottom: 5px;
margin-bottom: 25px;
}
h2 {
font-size: 1.6em;
margin-top: 25px;
margin-bottom: 15px;
}
h3 {
font-size: 1.3em;
margin-top: 20px;
margin-bottom: 10px;
}
p, li, th, td {
font-size: 0.95em;
}
table, .infographic-block {
margin: 20px 0;
}
th, td {
padding: 10px;
}
.infographic-block h3 {
font-size: 1.5em;
}
.infographic-block li {
padding-right: 25px;
}
}

/* Tablet (601px to 900px) */
@media (min-width: 601px) and (max-width: 900px) {
.container {
margin: 15px auto;
padding: 20px;
border-radius: 10px;
}
h1 {
font-size: 2.2em;
}
h2 {
font-size: 1.9em;
}
h3 {
font-size: 1.5em;
}
p, li, th, td {
font-size: 1em;
}
.infographic-block h3 {
font-size: 1.7em;
}
}

/* Laptop/Desktop (901px to 1200px) – handled by default .container styles */
/* Large Screens / TV (over 1200px) */
@media (min-width: 1201px) {
.container {
max-width: 1150px; /* Slightly wider for large screens */
padding: 35px;
margin: 30px auto;
}
h1 {
font-size: 3em;
margin-bottom: 50px;
}
h2 {
font-size: 2.4em;
}
h3 {
font-size: 1.8em;
}
p, li, th, td {
font-size: 1.1em;
}
.infographic-block h3 {
font-size: 2em;
}
}

/* Print Styles (Optional, but good for completeness) */
@media print {
body {
background-color: #fff;
color: #000;
}
.container {
box-shadow: none;
border: none;
margin: 0;
padding: 0;
max-width: 100%;
}
.container::before {
display: none;
}
h1, h2, h3 {
color: #000;
border-right: none;
padding-right: 0;
text-align: right;
margin-top: 1em;
margin-bottom: 0.5em;
}
p, li, th, td {
font-size: 12pt;
line-height: 1.5;
}
table, .infographic-block {
break-inside: avoid;
}
.infographic-block {
background: #f0f0f0;
border-left: 3px solid #ccc;
box-shadow: none;
}
}

/* General Utility – Clearfix */
.clearfix::after {
content: “”;
display: table;
clear: both;
}