/* Responsive Styling for various devices */
@media (max-width: 768px) {
.block-editor-content-wrapper .div[style*=”font-size: 2.4em”] { /* H1 */
font-size: 1.8em !important;
padding: 10px 0 !important;
margin-bottom: 25px !important;
}
.block-editor-content-wrapper .div[style*=”font-size: 1.7em”] { /* H2 */
font-size: 1.4em !important;
margin-top: 30px !important;
margin-bottom: 15px !important;
}
.block-editor-content-wrapper .div[style*=”font-size: 1.4em”] { /* H3 */
font-size: 1.2em !important;
margin-top: 25px !important;
margin-bottom: 10px !important;
}
.block-editor-content-wrapper p, .block-editor-content-wrapper ul, .block-editor-content-wrapper li, .block-editor-content-wrapper table {
font-size: 0.95em !important;
line-height: 1.7 !important;
}
.block-editor-content-wrapper div[style*=”flex-wrap: wrap”] {
flex-direction: column !important;
gap: 15px !important;
}
.block-editor-content-wrapper div[style*=”flex: 1 1 200px”] {
flex-basis: 100% !important;
padding: 15px !important;
}
.block-editor-content-wrapper table th, .block-editor-content-wrapper table td {
padding: 10px !important;
font-size: 0.9em !important;
}
.block-editor-content-wrapper .div[style*=”padding: 18px 25px”] { /* FAQ headers */
padding: 15px 20px !important;
}
.block-editor-content-wrapper .div[style*=”padding: 15px 25px”] { /* FAQ answers */
padding: 12px 20px !important;
}
}

@media (max-width: 480px) {
.block-editor-content-wrapper .div[style*=”font-size: 2.4em”] { /* H1 */
font-size: 1.6em !important;
margin-bottom: 20px !important;
}
.block-editor-content-wrapper .div[style*=”font-size: 1.7em”] { /* H2 */
font-size: 1.3em !important;
margin-top: 25px !important;
margin-bottom: 10px !important;
}
.block-editor-content-wrapper .div[style*=”font-size: 1.4em”] { /* H3 */
font-size: 1.1em !important;
margin-top: 20px !important;
margin-bottom: 8px !important;
}
.block-editor-content-wrapper p, .block-editor-content-wrapper ul, .block-editor-content-wrapper li, .block-editor-content-wrapper table {
font-size: 0.9em !important;
}
.block-editor-content-wrapper div[style*=”flex: 1 1 200px”] {
font-size: 0.85em !important;
}
.block-editor-content-wrapper div[style*=”font-size: 1.5em”] { /* Infographic title */
font-size: 1.3em !important;
}
}

/* General Styling for all devices for consistency in block editor */
.block-editor-content-wrapper div {
/* This ensures divs behave like blocks */
display: block;
}
.block-editor-content-wrapper table {
display: block;
width: 100%;
overflow-x: auto;
white-space: nowrap; /* Prevent wrapping in cells on small screens if content is short */
}
.block-editor-content-wrapper table thead, .block-editor-content-wrapper table tbody, .block-editor-content-wrapper table th, .block-editor-content-wrapper table td, .block-editor-content-wrapper table tr {
display: block;
}
.block-editor-content-wrapper table tr {
margin-bottom: 10px; /* Space between rows */
}
.block-editor-content-wrapper table th, .block-editor-content-wrapper table td {
width: 100%;
box-sizing: border-box;
text-align: right;
border-bottom: none;
}
.block-editor-content-wrapper table th {
font-weight: bold;
background-color: #e0f2f7;
}
.block-editor-content-wrapper table td {
background-color: #ffffff;
border-bottom: 1px solid #e7f5fa;
}
.block-editor-content-wrapper table tbody tr:last-child td {
border-bottom: none;
}

@media (min-width: 769px) {
.block-editor-content-wrapper table {
display: table;
width: 100%;
white-space: normal;
}
.block-editor-content-wrapper table thead, .block-editor-content-wrapper table tbody, .block-editor-content-wrapper table th, .block-editor-content-wrapper table td, .block-editor-content-wrapper table tr {
display: table-row;
}
.block-editor-content-wrapper table th, .block-editor-content-wrapper table td {
display: table-cell;
width: auto;
border: 1px solid #c7e0ed; /* Revert to standard table borders */
}
.block-editor-content-wrapper table tr {
margin-bottom: 0;
}
}

/* Additional general resets for block editor */
.block-editor-content-wrapper * {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Ensure specific heading-like divs retain their intended font properties */
.block-editor-content-wrapper div[style*=”font-size: 2.4em”] { /* H1 */
font-size: 2.4em;
font-weight: bold;
color: #1a2a47;
}
.block-editor-content-wrapper div[style*=”font-size: 1.7em”] { /* H2 */
font-size: 1.7em;
font-weight: bold;
color: #1a2a47;
}
.block-editor-content-wrapper div[style*=”font-size: 1.4em”] { /* H3 */
font-size: 1.4em;
font-weight: bold;
color: #2a4767;
}