/* Global Styles for Responsive Design & Block Editor Compatibility */
/* Using a generic sans-serif stack for broad compatibility across devices and platforms. */
/* For optimal Persian display, consider adding a custom font like Vazirmatn via @import or theme settings if your editor/website supports it. */
body {
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, “Noto Sans”, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”, “Noto Color Emoji”;
line-height: 1.7;
color: #333;
margin: 0;
padding: 0;
background-color: #f9f9f9; /* Light background for the page */
direction: rtl; /* Right-to-left for Persian text */
text-align: right;
}
.container {
max-width: 900px; /* Max width for readability on large screens */
margin: 20px auto; /* Center the content block */
padding: 25px 30px;
background-color: #ffffff; /* White background for the content area */
border-radius: 12px; /* Soft rounded corners */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* Subtle shadow for depth */
box-sizing: border-box; /* Include padding in width calculation for better responsiveness */
}

/* Headings Styling */
h1, h2, h3 {
margin-top: 35px;
margin-bottom: 20px;
font-weight: 700; /* Bold by default for all headings */
color: #004d40; /* Dark Teal – primary heading color */
line-height: 1.4;
}
h1 {
/* Inline style for H1 for editor recognition (font-size, font-weight) */
text-align: center;
color: #00332e; /* Even darker teal for main title */
border-bottom: 3px solid #009688; /* Accent border for main title */
padding-bottom: 15px;
margin-bottom: 40px;
}
h2 {
/* Inline style for H2 for editor recognition (font-size, font-weight) */
color: #00695c; /* Slightly lighter teal for main sections */
padding-right: 15px;
border-right: 5px solid #00bfa5; /* Brighter accent border for main sections */
margin-bottom: 25px;
}
h3 {
/* Inline style for H3 for editor recognition (font-size, font-weight) */
color: #00796b; /* Medium teal for sub-sections */
padding-right: 10px;
border-right: 3px solid #4db6ac; /* Softer accent border for sub-sections */
margin-bottom: 18px;
}

/* Paragraphs and Lists Styling */
p {
margin-bottom: 15px;
text-align: justify; /* Justified text for a clean, academic look */
color: #444;
}
ul, ol {
margin-bottom: 15px;
padding-right: 25px; /* Indent lists */
color: #555;
}
li {
margin-bottom: 8px;
}

/* Table Styling */
.styled-table {
width: 100%;
border-collapse: collapse;
margin: 25px 0;
font-size: 0.95em;
text-align: right;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Subtle shadow for the table */
border-radius: 8px;
overflow: hidden; /* Ensures rounded corners apply to content */
}
.styled-table thead tr {
background-color: #00897b; /* Teal header for the table */
color: #ffffff;
text-align: right;
}
.styled-table th, .styled-table td {
padding: 14px 20px;
border: 1px solid #e0f2f1; /* Light border between cells */
}
.styled-table tbody tr {
border-bottom: 1px solid #eeeeee;
}
.styled-table tbody tr:nth-of-type(even) {
background-color: #f5f5f5; /* Zebra striping for readability */
}
.styled-table tbody tr:last-of-type {
border-bottom: 2px solid #00897b;
}
.styled-table tbody tr:hover {
background-color: #e0f2f1; /* Hover effect for rows */
}

/* Infographic-like Blocks (using flexbox for responsive layout without images) */
.infographic-block {
display: flex;
flex-wrap: wrap; /* Allows items to wrap onto new lines on smaller screens */
gap: 20px; /* Space between items */
margin: 30px 0;
justify-content: center; /* Center items when they wrap */
}
.info-item {
background-color: #e0f2f1; /* Light teal background */
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
text-align: center;
flex: 1 1 calc(33% – 20px); /* Approximately 3 items per row, adjusting for gap */
min-width: 280px; /* Minimum width before an item wraps to next line */
box-sizing: border-box;
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Smooth hover effect */
}
.info-item:hover {
transform: translateY(-5px); /* Lift effect on hover */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}
.info-item .icon {
font-size: 3.5em; /* Large icon size */
margin-bottom: 15px;
color: #00796b; /* Medium teal icon color */
}
.info-item h4 {
font-size: 1.25em;
color: #004d40;
margin-top: 0;
margin-bottom: 10px;
font-weight: 600;
}
.info-item p {
font-size: 0.9em;
color: #555;
margin-bottom: 0;
text-align: center;
}

/* Alternative Infographic Style for sequential steps */
.infographic-alt {
display: flex;
flex-direction: column; /* Stack items vertically by default */
gap: 20px;
margin: 30px 0;
}
.infographic-alt .alt-item {
background-color: #f5fcfc; /* Very light teal background */
border-left: 5px solid #00bfa5; /* Accent border on the left */
border-radius: 8px;
padding: 20px;
display: flex; /* Use flex for icon and content layout */
align-items: flex-start; /* Align content to the top */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.infographic-alt .alt-item .alt-icon {
font-size: 2.5em;
color: #00897b;
margin-left: 20px; /* Space between icon and text */
flex-shrink: 0; /* Prevent icon from shrinking on small screens */
}
.infographic-alt .alt-item .alt-content h4 {
font-size: 1.3em;
color: #004d40;
margin-top: 0;
margin-bottom: 8px;
font-weight: 600;
}
.infographic-alt .alt-item .alt-content p {
font-size: 0.95em;
color: #444;
margin-bottom: 0;
text-align: right;
}

/* Responsive Adjustments for Tablets (768px and below) */
@media (max-width: 768px) {
.container {
margin: 15px auto;
padding: 20px;
}
h1 {
font-size: 2em !important; /* Override inline style for responsiveness */
}
h2 {
font-size: 1.7em !important;
padding-right: 10px;
}
h3 {
font-size: 1.3em !important;
padding-right: 8px;
}
.infographic-block .info-item {
flex: 1 1 calc(50% – 20px); /* 2 items per row on tablets */
min-width: unset; /* Allow items to be smaller than default min-width */
}
}
/* Responsive Adjustments for Mobile Phones (480px and below) */
@media (max-width: 480px) {
.container {
padding: 15px;
margin: 10px;
}
h1 {
font-size: 1.7em !important;
}
h2 {
font-size: 1.4em !important;
}
h3 {
font-size: 1.1em !important;
}
.infographic-block .info-item {
flex: 1 1 100%; /* 1 item per row on mobile */
}
.styled-table th, .styled-table td {
padding: 10px 12px;
font-size: 0.85em;
}
.infographic-alt .alt-item {
flex-direction: column; /* Stack icon and text vertically */
text-align: center;
}
.infographic-alt .alt-item .alt-icon {
margin: 0 0 15px 0; /* Adjust margin for stacked layout */
}
.infographic-alt .alt-item .alt-content p {
text-align: center;
}
}