/* Embed CSS for better styling consistency when copied */
.article-container {
max-width: 900px;
margin: 20px auto;
padding: 20px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.article-container h1 {
font-size: 2.4em;
font-weight: bold;
color: #1a2a3a;
text-align: right;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
margin-bottom: 25px;
}
.article-container h2 {
font-size: 1.8em;
font-weight: 600;
color: #34495e;
margin-top: 30px;
border-bottom: 1px solid #cceeff;
padding-bottom: 5px;
}
.article-container h3 {
font-size: 1.4em;
font-weight: 500;
color: #4b657f;
margin-top: 25px;
border-bottom: none; /* Sub-headings usually don’t need a heavy border */
}
.article-container p {
margin-bottom: 1em;
text-align: justify;
}
.article-container ul, .article-container ol {
margin-bottom: 1em;
padding-right: 25px; /* Adjust for RTL bullet points */
}
.article-container li {
margin-bottom: 0.5em;
text-align: right;
}
.article-container a {
color: #3498db;
text-decoration: none;
}
.article-container a:hover {
text-decoration: underline;
}
.article-container table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
text-align: right;
}
.article-container th, .article-container td {
border: 1px solid #ddd;
padding: 12px;
vertical-align: top;
}
.article-container th {
background-color: #f2f2f2;
font-weight: bold;
color: #2c3e50;
}
.article-container .highlight-box {
background-color: #e8f7fa;
border-right: 5px solid #3498db;
padding: 15px 20px;
margin: 20px 0;
border-radius: 5px;
color: #2c3e50;
text-align: justify;
}
.article-container .toc {
background-color: #f0f8ff;
border: 1px solid #d0eaff;
padding: 15px 20px;
margin-bottom: 30px;
border-radius: 5px;
}
.article-container .toc h3 {
color: #2c3e50;
margin-top: 0;
border-bottom: 1px dashed #d0eaff;
padding-bottom: 10px;
font-size: 1.4em;
}
.article-container .toc ul {
list-style: none;
padding-right: 0;
}
.article-container .toc li {
margin-bottom: 8px;
}
.article-container .toc a {
color: #007bff;
font-weight: 500;
}
.article-container .info-graphic {
background: linear-gradient(135deg, #e0f2f7 0%, #cceeff 100%);
border: 1px solid #aaddff;
border-radius: 10px;
padding: 25px;
margin: 30px 0;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
text-align: center;
}
.article-container .info-graphic h3 {
color: #0a4c80;
font-size: 1.6em;
margin-bottom: 20px;
border-bottom: 2px dashed #aaddff;
padding-bottom: 10px;
}
.article-container .info-graphic-item {
display: flex;
align-items: center;
margin-bottom: 20px;
padding: 15px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
text-align: right;
}
.article-container .info-graphic-item:last-child {
margin-bottom: 0;
}
.article-container .info-graphic-icon {
font-size: 2.5em;
color: #007bff;
margin-left: 20px;
flex-shrink: 0;
}
.article-container .info-graphic-text h4 {
color: #2c3e50;
margin: 0 0 5px 0;
font-size: 1.2em;
}
.article-container .info-graphic-text p {
margin: 0;
font-size: 0.95em;
color: #555;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.article-container {
margin: 10px auto;
padding: 15px;
}
.article-container h1 {
font-size: 2em !important; /* !important to override inline if needed */
}
.article-container h2 {
font-size: 1.6em !important;
}
.article-container h3 {
font-size: 1.3em !important;
}
.article-container th, .article-container td {
padding: 8px;
}
.article-container .info-graphic-item {
flex-direction: column;
align-items: flex-end;
}
.article-container .info-graphic-icon {
margin-left: 0;
margin-bottom: 10px;
}
.article-container .info-graphic-text {
text-align: right;
}
}
@media (max-width: 480px) {
.article-container h1 {
font-size: 1.8em !important;
}
.article-container h2 {
font-size: 1.4em !important;
}
.article-container h3 {
font-size: 1.2em !important;
}
.article-container p, .article-container ul, .article-container ol, .article-container table {
font-size: 0.9em;
}
}