/* General Body Styling for better presentation – For block editor, these might be global or need to be overridden. */
body {
font-family: ‘Tahoma’, ‘Arial’, sans-serif;
line-height: 1.8;
color: #333;
background-color: #f9f9f9; /* Light background for the overall page */
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Main Article Container for Responsiveness and Centering */
.article-container {
max-width: 850px; /* Optimal width for readability on larger screens */
margin: 20px auto; /* Center on wider screens, provide margin */
padding: 25px;
background-color: #ffffff; /* White background for the content area */
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Soft shadow for depth */
/* Ensure responsive padding/margin */
box-sizing: border-box;
}

/* Responsive adjustments for various screen sizes */
@media (max-width: 1200px) { /* Laptops */
.article-container {
max-width: 90%;
}
}
@media (max-width: 768px) { /* Tablets */
.article-container {
margin: 15px;
padding: 20px;
max-width: calc(100% – 30px); /* Full width minus margins */
}
h1 { font-size: 2em !important; }
h2 { font-size: 1.5em !important; }
h3 { font-size: 1.2em !important; }
}
@media (max-width: 480px) { /* Mobile phones */
.article-container {
margin: 10px;
padding: 15px;
max-width: calc(100% – 20px);
}
h1 { font-size: 1.7em !important; border-bottom-width: 2px !important;}
h2 { font-size: 1.3em !important; border-right-width: 3px !important; }
h3 { font-size: 1.1em !important; border-right-width: 2px !important; }
.infographic-item { flex: 1 1 100%; } /* Stack infographic items */
table, th, td { display: block; width: 100%; box-sizing: border-box; }
th { text-align: center !important; }
td::before { /* For better readability on small screens, add a label for each cell */
content: attr(data-label) “: “;
font-weight: bold;
display: inline-block;
width: 80px; /* Adjust as needed */
}
td { text-align: right; padding-right: 15px; } /* Ensure padding is consistent */
table thead { display: none; } /* Hide table header on mobile */
}
@media (min-width: 1201px) { /* TV or very large screens */
.article-container {
max-width: 900px; /* Cap max width for readability */
margin: 40px auto;
}
}

/* Heading Styles – Ensure these are explicitly set if inline styles are not preferred by the editor */
h1, h2, h3 {
color: #023e8a; /* Deep blue for main headings */
text-align: right;
margin-top: 1.5em;
margin-bottom: 0.8em;
font-weight: bold;
}

/* Inline styles for H1, H2, H3 will take precedence but this is for fallback/general styling */
h1 {
font-size: 2.2em;
border-bottom: 3px solid #00b4d8; /* Accent color underline */
padding-bottom: 10px;
margin-bottom: 1.2em;
}

h2 {
font-size: 1.7em;
border-right: 5px solid #00b4d8; /* Accent color right border for RTL */
padding-right: 10px;
margin-top: 2em;
}

h3 {
font-size: 1.3em;
color: #0077b6; /* Slightly lighter blue for H3 */
border-right: 3px solid #48cae4; /* Lighter accent */
padding-right: 8px;
margin-top: 1.5em;
}

/* Paragraph and List Styles */
p {
margin-bottom: 1em;
text-align: justify;
line-height: 1.9;
font-size: 1em;
}

ul, ol {
margin-bottom: 1em;
padding-right: 25px; /* Indent for lists */
text-align: right;
font-size: 1em;
}

li {
margin-bottom: 0.6em;
line-height: 1.7;
}

/* Table Styles */
table {
width: 100%;
border-collapse: collapse;
margin: 2em 0;
background-color: #e0f2f7; /* Light blue background for table */
border-radius: 8px;
overflow: hidden; /* Ensures border-radius applies to content */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Soft shadow for tables */
}

th, td {
border: 1px solid #ade8f4; /* Lighter blue border */
padding: 12px 15px;
text-align: right;
font-size: 0.95em;
line-height: 1.6;
}

th {
background-color: #00b4d8; /* Accent blue for header */
color: white;
font-weight: bold;
}

tr:nth-child(even) {
background-color: #f0faff; /* Slightly different background for even rows */
}

/* Infographic Simulation Styles */
.infographic-container {
display: flex; /* Flexbox for horizontal arrangement */
flex-wrap: wrap; /* Allow wrapping on smaller screens */
justify-content: center; /* Center items */
gap: 20px; /* Space between items */
margin: 3em 0;
padding: 20px;
background-color: #f0f7f9; /* Very light blue background */
border-radius: 10px;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05); /* Inner shadow */
}

.infographic-item {
flex: 1 1 280px; /* Flex-grow, flex-shrink, basis – allows items to grow/shrink and wrap */
background-color: #ffffff;
border: 1px solid #a8dadc;
border-radius: 10px;
padding: 20px;
text-align: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
min-height: 150px; /* Ensure some height consistency */
display: flex;
flex-direction: column;
justify-content: center;
}

.infographic-item:hover {
transform: translateY(-5px); /* Lift effect on hover */
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.infographic-icon {
font-size: 2.5em;
color: #00b4d8; /* Accent color for icon */
margin-bottom: 10px;
}

.infographic-title {
font-size: 1.15em;
font-weight: bold;
color: #023e8a;
margin-bottom: 8px;
}

.infographic-description {
font-size: 0.95em;
color: #555;
}

/* Specific styles for FAQ section to simulate schema */
.faq-item {
background-color: #f8fcfd;
border: 1px solid #e0f2f7;
border-radius: 8px;
margin-bottom: 15px;
padding: 15px 20px;
}

.faq-question {
font-weight: bold;
color: #0077b6;
margin-bottom: 8px;
font-size: 1.1em;
text-align: right;
}

.faq-answer {
color: #444;
line-height: 1.8;
text-align: justify;
font-size: 1em;
}