/* Responsive Styles for various devices */
@media (max-width: 1200px) {
.html body div {
max-width: 800px;
}
.html body h1 {
font-size: 2.5em !important;
}
.html body h2 {
font-size: 2em !important;
}
.html body h3 {
font-size: 1.5em !important;
}
.html body p, .html body li, .html body td, .html body th {
font-size: 1.1em !important;
}
.html body .infographic-box {
width: 150px !important;
padding: 12px 15px !important;
}
.html body .infographic-arrow {
font-size: 1.8em !important;
}
}

@media (max-width: 992px) {
.html body div {
max-width: 700px;
}
.html body h1 {
font-size: 2.2em !important;
margin-bottom: 30px !important;
}
.html body h2 {
font-size: 1.8em !important;
margin-top: 40px !important;
margin-bottom: 20px !important;
}
.html body h3 {
font-size: 1.4em !important;
margin-top: 30px !important;
margin-bottom: 15px !important;
}
.html body p, .html body li, .html body td, .html body th {
font-size: 1.05em !important;
line-height: 1.7 !important;
}
.html body .toc li {
font-size: 1em !important;
margin: 3px 10px !important;
}
.html body .infographic-box {
width: 130px !important;
padding: 10px 12px !important;
font-size: 1em !important;
}
.html body .infographic-box p:last-child {
font-size: 0.8em !important;
}
.html body .infographic-arrow {
font-size: 1.5em !important;
}
.html body table caption {
font-size: 1.2em !important;
}
}

@media (max-width: 768px) {
.html body div {
max-width: 100% !important;
padding: 15px !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.html body h1 {
font-size: 2em !important;
margin-bottom: 25px !important;
}
.html body h2 {
font-size: 1.7em !important;
margin-top: 35px !important;
margin-bottom: 18px !important;
}
.html body h3 {
font-size: 1.3em !important;
margin-top: 25px !important;
margin-bottom: 12px !important;
}
.html body p, .html body li, .html body td, .html body th {
font-size: 1em !important;
line-height: 1.6 !important;
}
.html body .toc {
flex-direction: column !important;
align-items: flex-start !important;
}
.html body .toc li {
margin: 5px 0 !important;
width: 100% !important;
text-align: right !important;
}
.html body .infographic-container {
flex-direction: column !important;
gap: 10px !important;
}
.html body .infographic-arrow {
transform: rotate(90deg) !important;
margin: 5px 0 !important;
}
.html body .infographic-box {
width: 90% !important;
max-width: 250px;
}
.html body table, .html body .overflow-x-auto {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.html body table thead, .html body table tbody, .html body table th, .html body table td, .html body table tr {
display: block;
}
.html body table thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.html body table tr {
border: 1px solid #e0e0e0;
margin-bottom: 10px;
}
.html body table td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50% !important;
text-align: right !important;
}
.html body table td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
content: attr(data-label);
font-weight: bold;
text-align: left;
color: #2e4a6e;
}
.html body table td:nth-of-type(1):before { content: “نوع ضایعات:”; }
.html body table td:nth-of-type(2):before { content: “توضیحات و کاربرد:”; }
}

@media (max-width: 480px) {
.html body h1 {
font-size: 1.8em !important;
}
.html body h2 {
font-size: 1.5em !important;
}
.html body h3 {
font-size: 1.2em !important;
}
.html body p, .html body li, .html body td, .html body th {
font-size: 0.95em !important;
}
.html body .infographic-box p:first-child {
font-size: 1em !important;
}
.html body .infographic-box p:last-child {
font-size: 0.75em !important;
}
}

/* General Base Styles (for block editor) */
.html {
font-family: ‘Vazirmatn’, ‘B Titr’, ‘Arial’, sans-serif;
direction: rtl;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.html body {
margin: 0;
padding: 0;
background-color: #f4f7f6;
}
.html body div {
box-sizing: border-box;
}
.html body a {
color: #4a6fa8;
text-decoration: none;
transition: color 0.3s ease-in-out;
}
.html body a:hover {
color: #2e4a6e;
text-decoration: underline;
}
.html body ul {
list-style-type: disc;
margin-right: 25px;
padding-right: 0;
line-height: 1.8;
}
.html body ol {
list-style-type: decimal;
margin-right: 25px;
padding-right: 0;
line-height: 1.8;
}
.html body li {
margin-bottom: 8px;
color: #333;
}

/* Infographic Specific Styling */
.html body .infographic-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 15px;
}
.html body .infographic-box {
background-color: #b3e5fc;
border: 1px solid #81d4fa;
border-radius: 8px;
padding: 15px 20px;
width: 180px;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
box-sizing: border-box;
}
.html body .infographic-box p {
margin: 0;
line-height: 1.4;
}
.html body .infographic-box p:first-child {
font-size: 1.1em;
font-weight: 600;
color: #0277bd;
margin-bottom: 5px;
}
.html body .infographic-box p:last-child {
font-size: 0.9em;
color: #01579b;
}
.html body .infographic-arrow {
align-self: center;
font-size: 2em;
color: #0277bd;
margin: 0 5px;
}
.html body .table-container {
overflow-x: auto;
margin: 25px 0;
}
.html body table {
width: 100%;
border-collapse: collapse;
text-align: right;
background-color: #f8f8f8;
border-radius: 8px;
overflow: hidden; /* Ensures border-radius applies */
}
.html body table caption {
caption-side: top;
text-align: center;
font-size: 1.3em;
font-weight: 600;
color: #2e4a6e;
padding-bottom: 10px;
margin-bottom: 10px;
}
.html body table thead {
background-color: #e6f7ff;
color: #1e6c8e;
}
.html body table th, .html body table td {
padding: 12px 18px;
border: 1px solid #d0e8f2;
font-size: 1.05em;
color: #444;
}
.html body table th {
font-weight: 600;
}
.html body table tbody tr:nth-child(odd) {
background-color: #ffffff;
}
.html body table tbody tr:nth-child(even) {
background-color: #fcfcfc;
}