/* style.css - Feature Comparison Table block (provenworks/feature-comparison-table).
 * Registered via block.json's "style" field, so only loaded when the
 * block is present. Renders its own semantic <table> directly (no
 * core/table involved) so section/footer rows and 4-state cells can be
 * built exactly to spec — see blocks/feature-comparison-table/index.js.
 */

.pw-feature-table {
	--pw-feature-table-accent: var(--color-brand-green-700);
	background-color: var(--color-surface-base);
	border-radius:     var(--radius-lg);
	box-shadow:        var(--card-shadow-hover);
	padding:           clamp(1.25rem, 3vw, 2.5rem);
	margin-block:      var(--wp--preset--spacing--md, 1.5rem);
}

.pw-feature-table--green-800 {
	--pw-feature-table-accent: var(--color-brand-green-800);
}

.pw-feature-table--green-light {
	--pw-feature-table-accent: var(--color-brand-green-light);
}

.pw-feature-table--grey {
	--pw-feature-table-accent: var(--color-text-muted);
}

/* Horizontal scroll container so very wide tables (many tier columns)
   don't blow out the page on small viewports. */
.pw-feature-table__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.pw-feature-table__table {
	width:           100%;
	min-width:        640px;
	border-collapse: collapse;
	margin:          0;
	/* Fixed layout + an explicit width on only the label column means every
	   OTHER (data) column shares the remaining space equally, regardless of
	   column count — without this, columns auto-size to their own content
	   and text like "Full Name" wraps inconsistently between columns. */
	table-layout: fixed;
}

.pw-feature-table__table thead th:first-child {
	width:     28%;
	min-width: 160px;
}

/* Every <td>/<th> below MUST keep its default table-cell/table-row-group
   display — never override it (e.g. with display:flex) or the browser
   drops out of table layout entirely and columns collapse. Any
   flex/centring for cell content belongs on the INNER
   .pw-feature-table__cell-inner span instead — see below. */

.pw-feature-table__table caption {
	text-align:    left;
	font-size:     var(--font-size-sm);
	color:         var(--color-text-muted);
	margin-bottom: 1rem;
	caption-side:  top;
}

.pw-feature-table__table th,
.pw-feature-table__table td {
	border-style:     solid;
	border-width:     0;
	border-color:     var(--border-color-subtle);
	border-top-width: 1px;
	padding:          0.85rem 1rem;
	text-align:       center;
	font-weight:      400;
}

.pw-feature-table__table thead th {
	border-top-width:    0;
	border-bottom-width: 2px;
	font-weight:         600;
	color:               var(--color-heading);
	vertical-align:      bottom;
}

.pw-feature-table__table th[scope="row"],
.pw-feature-table__table th[scope="col"]:first-child {
	text-align:  left;
	font-weight: 600;
	color:       var(--color-heading);
}

.pw-feature-table__table thead th.pw-feature-table__col-head--highlight {
	color:            var(--pw-feature-table-accent);
	border-top-width: 3px;
	border-top-color: var(--pw-feature-table-accent);
}

.pw-feature-table__col-sub {
	display:     block;
	font-weight: 400;
	color:       var(--color-text-muted);
	font-size:   var(--font-size-sm);
}

.pw-feature-table__table td {
	color:          var(--color-body);
	vertical-align: middle;
}

/* ── Section header rows (grouped rowgroup headers) ─────────────── */

.pw-feature-table__section-row th {
	background:       var(--color-surface-subtle, #fafafa);
	text-align:       left;
	padding:          1.1rem 1rem;
	border-top-width: 1px;
}

.pw-feature-table__section-title {
	display:     block;
	font-weight: 700;
	font-size:   1.05em;
	color:       var(--color-heading);
}

.pw-feature-table__section-desc {
	display:     block;
	font-size:   var(--font-size-sm);
	color:       var(--color-text-muted);
	margin-top:  0.15rem;
	font-weight: 400;
}

/* ── Cell states — on the front end, Included/Not included/Not
   applicable show ONLY their symbol (the word is rendered via WordPress's
   own .screen-reader-text utility instead of this visible label class, so
   it's still real text for screen readers/Markdown); Additional cost is
   the one state that also gets a visible ".pw-feature-table__state-label"
   next to its symbol, since a bare "$" isn't clear on its own. The editor
   always shows the word for every state (editing-clarity aid only). The
   flex centring lives on this INNER span, never on the <td> itself. ── */

.pw-feature-table__cell-inner {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             0.15rem;
}

.pw-feature-table__icon {
	font-weight: 700;
	font-size:   1.05em;
	line-height: 1;
}

.pw-feature-table__state-label {
	font-size:   0.7rem;
	font-weight: 500;
	color:       var(--color-text-muted);
	line-height: 1.2;
}

.pw-feature-table__cell--yes .pw-feature-table__icon {
	color: var(--color-brand-primary);
}

.pw-feature-table__cell--no .pw-feature-table__icon {
	color: var(--color-text-subtle);
}

.pw-feature-table__cell--na .pw-feature-table__icon {
	color:     var(--color-text-subtle);
	font-size: 0.9em;
}

.pw-feature-table__cell--cost .pw-feature-table__icon,
.pw-feature-table__cell--cost .pw-feature-table__state-label {
	color: var(--wp--preset--color--yellow);
}

.pw-feature-table__text {
	display:     inline-block;
	font-size:   var(--font-size-sm);
	color:       var(--color-body);
	font-weight: 500;
}

.pw-feature-table__footnote {
	margin-left: 0.15em;
	color:       var(--color-text-muted);
}

/* ── Footer notes row ────────────────────────────────────────────── */

.pw-feature-table__footer-row td {
	padding:        1.25rem 1rem;
	vertical-align: middle;
	border-bottom:  none;
	text-align:     left;
}

.pw-feature-table__notes {
	margin:       0;
	padding-left: 1.1rem;
	font-size:    var(--font-size-sm);
	color:        var(--color-text-muted);
	line-height:  1.4;
	text-align:   left;
}

/* ── CTA buttons — a real core/columns > core/column area, one column
   per table column, so each table column gets its own slot for a native
   core/button (styled with the theme's normal Button block styles, no
   extra CSS needed here beyond spacing/alignment). The left offset below
   roughly lines each core/column up under its matching table column
   (28% mirrors the table's own label-column width). ─────────────────── */

.pw-feature-table__actions {
	margin-top: 1.5rem;
}

.pw-feature-table__actions .wp-block-columns {
	margin-left: 28%;
	width:       72%;
}

@media (max-width: 782px) {
	.pw-feature-table__actions .wp-block-columns {
		margin-left: 0;
		width:       100%;
	}
}

@media (max-width: 560px) {
	.pw-feature-table__table th,
	.pw-feature-table__table td {
		padding:   0.65rem 0.5rem;
		font-size: var(--font-size-sm);
	}
}

/* ── Editor-only chrome below — none of these classes appear in save()
   output, so they have no effect on the front end. ─────────────────── */

.pw-feature-table__cell-toggle {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           100%;
	padding:         0.25rem;
	background:      none;
	border:          none;
	cursor:          pointer;
}

.pw-feature-table__cell-toggle:hover {
	background: none !important;
	opacity:    0.7;
}

.pw-feature-table__cell-menu {
	display:        flex;
	flex-direction: column;
	min-width:      180px;
	padding:        0.25rem;
}

.pw-feature-table__cell-menu-item {
	display:       flex;
	align-items:   center;
	gap:           0.5rem;
	width:         100%;
	padding:       0.5rem 0.75rem;
	border-radius: var(--radius-sm, 4px);
	text-align:    left;
}

.pw-feature-table__cell-menu-item.is-active {
	background:  var(--color-brand-primary-tint);
	font-weight: 600;
}

.pw-feature-table__cell-mode-toggle {
	opacity:    0.4;
	transition: opacity var(--transition-fast);
}

.pw-feature-table__cell:hover .pw-feature-table__cell-mode-toggle {
	opacity: 1;
}

.pw-feature-table__label-cell,
.pw-feature-table__col-head,
.pw-feature-table__section-row th {
	position: relative;
}

.pw-feature-table__remove-col,
.pw-feature-table__remove-row {
	opacity:    0.35;
	transition: opacity var(--transition-fast);
}

.pw-feature-table__label-cell:hover .pw-feature-table__remove-row,
.pw-feature-table__section-row th:hover .pw-feature-table__remove-row,
.pw-feature-table__col-head:hover .pw-feature-table__remove-col {
	opacity: 1;
}

.pw-feature-table__col-controls {
	display:        flex;
	align-items:    flex-start;
	justify-content: space-between;
	gap:            0.35rem;
	margin-top:     0.5rem;
	text-align:     left;
}

.pw-feature-table__col-highlight-toggle {
	font-size: var(--font-size-sm);
}

.pw-feature-table__add-row-controls {
	display:    flex;
	gap:        0.75rem;
	margin-top: 1.25rem;
}

.pw-feature-table__footer-notes-cell {
	text-align: left;
}

.pw-feature-table__notes-editor {
	margin:     0 0 0.5rem;
	padding:    0;
	list-style: none;
}

.pw-feature-table__note-row {
	display:       flex;
	align-items:   center;
	gap:           0.5rem;
	margin-bottom: 0.35rem;
}

.pw-feature-table__actions-heading {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px dashed var(--border-color-subtle);
	font-size:  var(--font-size-sm);
	font-weight: 600;
	color:      var(--color-text-muted);
}