/* Responsive CSS for various devices */
/* Base styles – applicable to all screen sizes, acts as mobile-first */
body {
font-family: ‘Vazirmatn’, ‘Arial’, sans-serif;
line-height: 1.8;
color: #333;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f0f2f5; /* Light grey background for the whole page */
}

/* Main container for the article */
div[style*=”font-family: ‘Vazirmatn'”] {
max-width: 90%; /* Adjust for slightly less width on larger screens */
margin: 20px auto; /* Add margin to top/bottom */
padding: 20px;
box-sizing: border-box;
background-color: #f9f9fc;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

/* Heading 1 */
h1[style*=”font-size: 2.8em”] {
font-size: 2em; /* Smaller on mobile */
font-weight: 800;
color: #1A237E;
text-align: center;
margin-bottom: 0.8em;
line-height: 1.3;
}

/* Heading 2 */
h2[style*=”font-size: 2em”] {
font-size: 1.6em; /* Smaller on mobile */
font-weight: 700;
color: #283593;
margin-top: 2.5em;
margin-bottom: 1.2em;
border-bottom: 2px solid #C5CAE9;
padding-bottom: 0.5em;
}

/* Heading 3 */
h3[style*=”font-size: 1.6em”] {
font-size: 1.3em; /* Smaller on mobile */
font-weight: 600;
color: #3F51B5;
margin-top: 1.8em;
margin-bottom: 0.8em;
}

h3[style*=”font-size: 1.3em”] {
font-size: 1.1em; /* Smaller for embedded H3s */
}

/* Paragraphs */
p[style*=”font-size: 1.1em”] {
font-size: 1em; /* Slightly smaller on mobile */
text-align: justify;
margin-bottom: 1.5em;
color: #555;
}

p[style*=”font-size: 1.05em”] {
font-size: 0.95em; /* Smaller on mobile for secondary paragraphs */
}

p[style*=”font-size: 1em”] {
font-size: 0.9em; /* Even smaller for detailed text */
}

/* List items */
ul[style*=”list-style-type: none”] li {
font-size: 1em; /* Adjust list item font size */
padding: 10px 15px; /* Adjust padding */
}

ul[style*=”list-style-type: none”] li span[style*=”font-size: 1.5em”] {
font-size: 1.2em; /* Adjust icon size */
}

/* Table */
table {
overflow-x: auto; /* Enable horizontal scrolling for tables on small screens */
display: block; /* Make table a block element to allow overflow */
width: 100%; /* Ensure table takes full width of its container */
max-width: 100%;
box-sizing: border-box;
}

table th, table td {
white-space: normal; /* Allow text to wrap within cells */
word-break: break-word;
font-size: 0.9em; /* Smaller font for table content on mobile */
padding: 8px;
}

table th {
font-size: 1em; /* Slightly larger for headers */
}

/* Infographic-like sections (flex containers) */
div[style*=”display: flex; flex-wrap: wrap”] {
flex-direction: column; /* Stack items vertically on small screens */
gap: 15px; /* Adjust gap */
}

div[style*=”display: flex; flex-wrap: wrap”] > div {
flex: 1 1 100%; /* Each item takes full width on small screens */
min-width: unset; /* Remove min-width constraint */
padding: 15px; /* Adjust padding */
gap: 10px; /* Adjust gap for internal flex */
}

div[style*=”display: flex; flex-wrap: wrap”] > div span[style*=”font-size: 2em”] {
font-size: 1.6em; /* Adjust icon size */
}

/* Details/Summary (FAQ section) */
details summary {
font-size: 1.05em; /* Smaller on mobile */
padding: 8px 0;
}

details p {
font-size: 0.95em; /* Smaller on mobile */
padding-top: 8px;
}

/* Specific styling for the Callout boxes/Infographic steps */
div[style*=”border-left: 5px solid #4CAF50″], /* Green callout */
div[style*=”background-color: #f0f4f8″] div[style*=”border-left: 5px solid #64B5F6″] /* Blue steps */
{
padding: 12px 15px; /* Adjust padding */
gap: 10px; /* Adjust gap */
}

div[style*=”border-left: 5px solid #4CAF50″] span {
font-size: 1.8em !important; /* Adjust icon size */
}

div[style*=”background-color: #f0f4f8″] div[style*=”border-left: 5px solid #64B5F6″] span {
font-size: 1.5em !important; /* Adjust step number size */
}

div[style*=”background-color: #f0f4f8″] div[style*=”border-left: 5px solid #64B5F6″] h3 {
font-size: 1.1em !important; /* Adjust step title size */
}

div[style*=”background-color: #f0f4f8″] div[style*=”border-left: 5px solid #64B5F6″] p {
font-size: 0.9em !important; /* Adjust step description size */
}

/* Media Queries for Tablet and Laptop/TV */

/* Tablet styles (adjustments for screens larger than 600px) */
@media (min-width: 600px) {
div[style*=”font-family: ‘Vazirmatn'”] {
max-width: 85%;
padding: 30px;
}

h1[style*=”font-size: 2.8em”] {
font-size: 2.4em;
}

h2[style*=”font-size: 2em”] {
font-size: 1.8em;
}

h3[style*=”font-size: 1.6em”] {
font-size: 1.4em;
}

h3[style*=”font-size: 1.3em”] {
font-size: 1.2em;
}

p[style*=”font-size: 1.1em”] {
font-size: 1.05em;
}
p[style*=”font-size: 1.05em”] {
font-size: 1em;
}
p[style*=”font-size: 1em”] {
font-size: 0.95em;
}

ul[style*=”list-style-type: none”] li {
font-size: 1.05em;
padding: 12px 18px;
}
ul[style*=”list-style-type: none”] li span[style*=”font-size: 1.5em”] {
font-size: 1.3em;
}

table th, table td {
font-size: 0.95em;
padding: 10px;
}

div[style*=”display: flex; flex-wrap: wrap”] {
flex-direction: row; /* Layout in a row for larger screens */
}

div[style*=”display: flex; flex-wrap: wrap”] > div {
flex: 1 1 calc(50% – 10px); /* Two columns */
min-width: 280px; /* Reintroduce a reasonable min-width */
padding: 18px;
}

div[style*=”display: flex; flex-wrap: wrap”] > div span[style*=”font-size: 2em”] {
font-size: 1.8em;
}

details summary {
font-size: 1.1em;
}

details p {
font-size: 1em;
}

div[style*=”border-left: 5px solid #4CAF50″] span {
font-size: 2em !important;
}

div[style*=”background-color: #f0f4f8″] div[style*=”border-left: 5px solid #64B5F6″] span {
font-size: 1.7em !important;
}

div[style*=”background-color: #f0f4f8″] div[style*=”border-left: 5px solid #64B5F6″] h3 {
font-size: 1.2em !important;
}

div[style*=”background-color: #f0f4f8″] div[style*=”border-left: 5px solid #64B5F6″] p {
font-size: 0.95em !important;
}
}

/* Laptop/Desktop/TV styles (adjustments for screens larger than 1024px) */
@media (min-width: 1024px) {
div[style*=”font-family: ‘Vazirmatn'”] {
max-width: 800px; /* Fixed max width for optimal readability */
padding: 40px;
margin: 40px auto; /* More margin on larger screens */
}

h1[style*=”font-size: 2.8em”] {
font-size: 2.8em;
}

h2[style*=”font-size: 2em”] {
font-size: 2em;
}

h3[style*=”font-size: 1.6em”] {
font-size: 1.6em;
}
h3[style*=”font-size: 1.3em”] {
font-size: 1.3em;
}

p[style*=”font-size: 1.1em”] {
font-size: 1.1em;
}
p[style*=”font-size: 1.05em”] {
font-size: 1.05em;
}
p[style*=”font-size: 1em”] {
font-size: 1em;
}

ul[style*=”list-style-type: none”] li {
font-size: 1.05em;
padding: 12px 18px;
}
ul[style*=”list-style-type: none”] li span[style*=”font-size: 1.5em”] {
font-size: 1.5em;
}

table th, table td {
font-size: 1em;
padding: 12px;
}

div[style*=”display: flex; flex-wrap: wrap”] > div {
flex: 1 1 calc(50% – 10px); /* Maintain two columns */
padding: 20px;
}

div[style*=”display: flex; flex-wrap: wrap”] > div span[style*=”font-size: 2em”] {
font-size: 2em;
}

details summary {
font-size: 1.15em;
}

details p {
font-size: 1em;
}

div[style*=”border-left: 5px solid #4CAF50″] span {
font-size: 2.2em !important;
}

div[style*=”background-color: #f0f4f8″] div[style*=”border-left: 5px solid #64B5F6″] span {
font-size: 1.8em !important;
}

div[style*=”background-color: #f0f4f8″] div[style*=”border-left: 5px solid #64B5F6″] h3 {
font-size: 1.3em !important;
}

div[style*=”background-color: #f0f4f8″] div[style*=”border-left: 5px solid #64B5F6″] p {
font-size: 0.95em !important;
}
}