/**
* TQV table presets, badges, and availability marks.
*
* Loaded on the frontend and inside the block-editor canvas (via
* enqueue_block_assets) so posts look the same while writing.
*
* Post HTML carries only class names — never inline styles. Retune the whole
* site by editing this file. Class map:
*
* .is-style-tqv-card core Table block style: card look, title bar
* .is-style-tqv-striped same + zebra rows and hover highlight
* .tqv-section marks its row as a dark in-table section header
* .tqv-labels marks its row as a column-label row (per section)
* .tqv-note marks its row as a soft-red note band (blackouts)
* .tqv-badge-good/-bad/-info inline pills (e.g. "-17%", "+8%", "NEW")
* .tqv-chip neutral code chip (MCC codes, aircraft types)
* .tqv-yes / .tqv-no ✓ / ✗ availability cells (no icon font)
*/
/* ---------------------------------------------------------------------------
* Card table — shared by both block styles.
* ------------------------------------------------------------------------ */
.wp-block-table.is-style-tqv-card,
.wp-block-table.is-style-tqv-striped {
/* Caption is markup-after-table but design-above-table: flex reorder. */
display: flex;
flex-direction: column;
/* Vertical rhythm: the theme zeroes block margins, so the card would butt
straight against the next paragraph. Give it symmetric breathing room a
little larger than a plain image block (theme images use ~21px) because
the drop shadow needs clearance to not look cramped. em-based so it
scales with the post's font size.
Horizontal margins must stay `auto`, never 0: the editor canvas caps the
block at the content width and centers it via auto margins — zeroing them
flushes the card left while writing. On the frontend the figure fills the
tagDiv content column, so `auto` resolves to 0 and nothing changes. */
margin: 1.75em auto;
border: 2px solid #0f1f33;
border-radius: 6px;
/* The figure is the scroll container: the table stays a real table and
fills the card; when content genuinely overflows (wide tables on
phones) the body scrolls horizontally instead of breaking the layout. */
overflow-x: auto;
overflow-y: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
}
.wp-block-table.is-style-tqv-card figcaption,
.wp-block-table.is-style-tqv-striped figcaption {
order: -1;
margin: 0;
padding: 10px 12px;
background: #0f1f33;
color: #ffffff;
font-size: 1.05rem;
font-weight: 700;
text-align: center;
caption-side: top;
}
.wp-block-table.is-style-tqv-card table,
.wp-block-table.is-style-tqv-striped table {
width: 100%;
margin: 0;
border: none;
border-collapse: collapse;
background: #ffffff;
}
.wp-block-table.is-style-tqv-card th,
.wp-block-table.is-style-tqv-striped th {
padding: 8px 10px;
background: #edf2f7;
border: none;
border-bottom: 2px solid #0f1f33;
text-align: center;
vertical-align: middle;
font-weight: 700;
word-break: normal;
}
.wp-block-table.is-style-tqv-card td,
.wp-block-table.is-style-tqv-striped td {
padding: 8px 10px;
border: none;
border-top: 1px solid #dddddd;
text-align: center;
vertical-align: middle;
word-break: normal;
}
.wp-block-table.is-style-tqv-card tbody tr:first-child td,
.wp-block-table.is-style-tqv-striped tbody tr:first-child td {
border-top: none;
}
/* Vertical column separators (MainlyMiles-style): a hairline before every
cell except the first, so columns read as a grid without a heavy full
border on every cell. Same #dddddd as the row lines. */
.wp-block-table.is-style-tqv-card th + th,
.wp-block-table.is-style-tqv-card td + td,
.wp-block-table.is-style-tqv-striped th + th,
.wp-block-table.is-style-tqv-striped td + td {
border-left: 1px solid #dddddd;
}
/* First column reads as a row label. */
.wp-block-table.is-style-tqv-card td:first-child,
.wp-block-table.is-style-tqv-striped td:first-child {
font-weight: 600;
}
/* Compact mode for GROUPED tables (any card containing a section band):
data rows drop the inner hairlines — the section bands and the label
strip's heavy border carry all the structure, so long schedule/deal
tables read tighter. Plain (ungrouped) card tables keep their grid. */
.wp-block-table.is-style-tqv-card:has(.tqv-section) td {
border-top: none;
}
.wp-block-table.is-style-tqv-card:has(.tqv-section) td + td {
border-left: none;
}
/* ---------------------------------------------------------------------------
* In-table section rows — grouped tables (MCC categories, flight directions).
*
* core/table has no row-class or colspan UI, so the row marker lives INSIDE
* the row: the writer applies the "Section header" / "Column labels" inline
* format to the first cell's text, which wraps it in a marked span, and
* tr:has() promotes the entire row. The row stays an ordinary, fully
* editable table row; empty sibling cells share the bar's background so it
* reads as one full-width band without needing colspan.
* ------------------------------------------------------------------------ */
.wp-block-table.is-style-tqv-card tr:has(.tqv-section) td,
.wp-block-table.is-style-tqv-striped tr:has(.tqv-section) td {
/* Lighter navy than the #0f1f33 title bar so the hierarchy reads:
card title > section > labels > data. */
background: #1d3a5f;
color: #ffffff;
border-top: none;
border-left: none;
text-align: left;
font-weight: 700;
font-size: 1.02em;
}
.wp-block-table.is-style-tqv-card tr:has(.tqv-labels) td,
.wp-block-table.is-style-tqv-striped tr:has(.tqv-labels) td {
background: #edf2f7;
border-top: none;
border-bottom: 2px solid #0f1f33;
font-weight: 700;
font-size: 0.92em;
}
/* Note band — blackout dates, caveats, one-direction-only warnings. Soft red
so it reads as "watch out" without shouting. */
.wp-block-table.is-style-tqv-card tr:has(.tqv-note) td,
.wp-block-table.is-style-tqv-striped tr:has(.tqv-note) td {
background: #f9e9e8;
border-top: none;
border-left: none;
font-size: 0.92em;
}
/* Marker rows are structural: exempt them from the first-column label bold
(they set their own weight) — nothing to do, both set font-weight — but a
section row must not inherit the striped zebra/hover (handled below). */
/* ---------------------------------------------------------------------------
* Striped variant extras.
* ------------------------------------------------------------------------ */
.wp-block-table.is-style-tqv-striped tbody tr:nth-child(even):not(:has(.tqv-section, .tqv-labels, .tqv-note)) td {
background: #f5f7fa;
}
.wp-block-table.is-style-tqv-striped tbody tr:hover:not(:has(.tqv-section, .tqv-labels, .tqv-note)) td {
background: #eaf0f6;
}
/* ---------------------------------------------------------------------------
* Inline badges — usable anywhere RichText renders (tables, paragraphs).
* ------------------------------------------------------------------------ */
.tqv-badge-good,
.tqv-badge-bad,
.tqv-badge-info {
display: inline-block;
padding: 0.2em 0.5em;
border-radius: 0.25rem;
font-size: 0.78em;
font-weight: 700;
line-height: 1.2;
color: #ffffff;
white-space: nowrap;
vertical-align: baseline;
}
.tqv-badge-good {
background: #1a7f37;
}
.tqv-badge-bad {
background: #b32d2e;
}
.tqv-badge-info {
background: #0f1f33;
}
/* Neutral code chip — MCC codes, aircraft types, fare classes. Reads as
"datum" rather than "judgement": grey box, dark text, monospace-ish weight.
Same box model as badges so chips and pills align in adjacent cells. */
.tqv-chip {
display: inline-block;
padding: 0.2em 0.5em;
border-radius: 0.25rem;
background: #eef1f4;
color: #2b2b2b;
font-size: 0.85em;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
vertical-align: baseline;
}
/* ---------------------------------------------------------------------------
* Availability marks — crisp SVG icons, still no icon-font dependency.
*
* The post markup carries only ✓: the ✓/✗ glyph
* stays as the accessible label and no-CSS fallback, while the visible icon is
* a masked inline SVG whose colour comes from the box's background. Class-only
* HTML, no tags, no web font — the whole look retunes from this file.
* ------------------------------------------------------------------------ */
.tqv-yes,
.tqv-no {
display: inline-block;
width: 1.15em;
height: 1.15em;
vertical-align: -0.2em;
/* Hide the fallback glyph visually while keeping it for screen readers. */
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.tqv-yes {
background-color: #1a7f37;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M9%2016.17%204.83%2012l-1.42%201.41L9%2019%2021%207l-1.41-1.41z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M9%2016.17%204.83%2012l-1.42%201.41L9%2019%2021%207l-1.41-1.41z'/%3E%3C/svg%3E");
}
.tqv-no {
background-color: #b32d2e;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z'/%3E%3C/svg%3E");
}