/*
* AESV Responsive Tables
* ------------------------------------------------------------
* Scope: every selector is namespaced under `.aesv-rwd-wrap` or
* `.aesv-rwd-table` so it never bleeds into theme tables.
*
* Desktop (>760px): a normal comparison table with header
* band, zebra rows, and clean padding.
*
* Mobile (<=760px): the table re-flows into a stacked card
* list. Each | gets a small label above its value
* (the corresponding | text, injected server-side as
* data-label="..." by the plugin). No horizontal scroll.
*
* The transform is CSS-only and works without JavaScript.
* ------------------------------------------------------------
*/
/* ---------- Outer wrapper: keeps the table inside the article column ---------- */
.aesv-rwd-wrap {
width: 100%;
max-width: 100%;
margin: 1.5em 0;
/* No horizontal scroll on the page either: if a single cell is wider than
* the viewport (rare for our short labels) we let it wrap onto the next
* line rather than overflow. */
overflow-wrap: anywhere;
word-break: break-word;
}
/* Hard-override parent theme / article styles that may force a horizontal
* scroll behavior on tables. Any parent rule like
* .aesv-article-2026 table { display: block; overflow-x: auto; }
* is overridden here because our wrapper + scoped class give this rule
* higher specificity. We only touch tables inside our own wrapper, so
* we never bleed into unrelated theme tables. */
.aesv-rwd-wrap table.aesv-rwd-table {
display: table;
overflow: visible;
}
/* ---------- Desktop: normal table ---------- */
.aesv-rwd-wrap > table.aesv-rwd-table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
background: #ffffff;
color: #0f172a;
font-size: 15px;
line-height: 1.45;
border: 1px solid #dbe5de;
border-radius: 12px;
overflow: hidden;
table-layout: auto;
}
.aesv-rwd-wrap > table.aesv-rwd-table thead th {
background: #0f5132;
color: #ffffff;
font-weight: 700;
text-align: left;
padding: 12px 14px;
border-bottom: 1px solid #0a3d24;
white-space: normal;
font-size: 14px;
letter-spacing: 0.01em;
}
.aesv-rwd-wrap > table.aesv-rwd-table tbody td {
padding: 12px 14px;
border-top: 1px solid #e2e8f0;
vertical-align: top;
background: #ffffff;
color: #0f172a;
}
.aesv-rwd-wrap > table.aesv-rwd-table tbody tr:nth-child(even) td {
background: #f8fafc;
}
.aesv-rwd-wrap > table.aesv-rwd-table tbody tr:first-child td {
border-top: 0;
}
/* Make sure link buttons inside a price cell don't get squished */
.aesv-rwd-wrap > table.aesv-rwd-table a {
color: #0f5132;
text-decoration: underline;
font-weight: 600;
}
.aesv-rwd-wrap > table.aesv-rwd-table a:hover,
.aesv-rwd-wrap > table.aesv-rwd-table a:focus {
color: #12b76a;
}
/* ---------- Mobile: stacked card table ---------- */
@media (max-width: 760px) {
.aesv-rwd-wrap {
width: 100% !important;
max-width: 100% !important;
margin: 1.25em 0 !important;
overflow: visible !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
.aesv-rwd-wrap > table.aesv-rwd-table {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
border: 0 !important;
background: transparent !important;
overflow: visible !important;
font-size: 16px !important;
}
.aesv-rwd-wrap > table.aesv-rwd-table thead {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
}
.aesv-rwd-wrap > table.aesv-rwd-table tbody {
display: block !important;
width: 100% !important;
}
.aesv-rwd-wrap > table.aesv-rwd-table tr,
.aesv-rwd-wrap > table.aesv-rwd-table tbody tr {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 14px !important;
padding: 14px 16px !important;
border: 1px solid #dbe5de !important;
border-radius: 14px !important;
box-shadow: 0 6px 18px rgba(15,23,42,.05) !important;
background: #ffffff !important;
}
.aesv-rwd-wrap > table.aesv-rwd-table th,
.aesv-rwd-wrap > table.aesv-rwd-table td,
.aesv-rwd-wrap > table.aesv-rwd-table tbody td {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
padding: 9px 0 !important;
border: 0 !important;
border-bottom: 1px solid #eef2f0 !important;
text-align: left !important;
vertical-align: top !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
background: transparent !important;
color: #20342f !important;
font-size: 16px !important;
line-height: 1.55 !important;
}
.aesv-rwd-wrap > table.aesv-rwd-table td:last-child {
border-bottom: 0 !important;
}
.aesv-rwd-wrap > table.aesv-rwd-table tbody td::before {
content: attr(data-label) !important;
display: block !important;
margin: 0 0 3px !important;
color: #0f5132 !important;
font-size: 11px !important;
line-height: 1.25 !important;
font-weight: 800 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
}
.aesv-rwd-wrap > table.aesv-rwd-table tbody td:not([data-label])::before,
.aesv-rwd-wrap > table.aesv-rwd-table tbody td[data-label=""]::before {
display: none !important;
content: none !important;
}
}
/* ---------- Accessibility ---------- */
/* Respect users who request reduced motion: the transform is static,
* but we still turn off any transitions/animations just in case a
* future revision adds them. */
@media (prefers-reduced-motion: reduce) {
.aesv-rwd-wrap *,
.aesv-rwd-wrap *::before,
.aesv-rwd-wrap *::after {
animation: none !important;
transition: none !important;
}
}
/* High-contrast / forced-colors mode: keep the labels visible */
@media (forced-colors: active) {
.aesv-rwd-wrap > table.aesv-rwd-table thead th,
.aesv-rwd-wrap > table.aesv-rwd-table tbody td {
border: 1px solid CanvasText;
}
}
/* ---------- Print ---------- */
@media print {
.aesv-rwd-wrap {
overflow: visible;
}
.aesv-rwd-wrap > table.aesv-rwd-table {
border: 1px solid #000;
}
.aesv-rwd-wrap > table.aesv-rwd-table thead {
display: table-header-group;
}
.aesv-rwd-wrap > table.aesv-rwd-table tbody td::before {
display: none;
}
}
|