/* Comparison table – core/table style "compare" ---------------- */

.wp-block-table.is-style-compare {
  --compare-bg: var(--wp--preset--color--grey-900);
  --compare-group-bg: color-mix(in srgb, var(--compare-bg), #fff 5%);
  --compare-hover-bg: color-mix(in srgb, var(--compare-bg), #fff 3%);
  --compare-highlight-bg: color-mix(in srgb, var(--wp--preset--color--primary) 6%, transparent);

  margin-block: var(--wp--custom--space-sm);
}

.wp-block-table.is-style-compare table {
  min-width: 760px;
  width: 100%;
  border: 1px solid var(--color-border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 16px;
  font-size: var(--wp--preset--font-size--small);
}

.wp-block-table.is-style-compare :where(thead, tbody, tfoot) {
  border: 0;
}

.wp-block-table.is-style-compare :where(th, td) {
  padding: 0.75rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  text-align: center;
  vertical-align: middle;
}

.wp-block-table.is-style-compare thead th {
  font-weight: 700;
  color: var(--color-text);
}

.wp-block-table.is-style-compare thead th:first-child,
.wp-block-table.is-style-compare tbody th[scope="row"] {
  text-align: left;
}

/* Equal package columns: fixed layout, first column gets a set width,
   the remaining four columns share the rest evenly */
.wp-block-table.is-style-compare table {
  table-layout: fixed;
}

.wp-block-table.is-style-compare thead th:first-child {
  width: 32%;
}

/* Outer frame: no double line at the bottom, rounded corner cells */
.wp-block-table.is-style-compare tbody tr:last-child > * {
  border-bottom: 0;
}

.wp-block-table.is-style-compare thead tr:first-child > :first-child {
  border-top-left-radius: 15px;
}

.wp-block-table.is-style-compare thead tr:first-child > :last-child {
  border-top-right-radius: 15px;
}

.wp-block-table.is-style-compare tbody tr:last-child > :first-child {
  border-bottom-left-radius: 15px;
}

.wp-block-table.is-style-compare tbody tr:last-child > :last-child {
  border-bottom-right-radius: 15px;
}

/* Sticky first column for horizontal scrolling on small screens */
.wp-block-table.is-style-compare thead th:first-child,
.wp-block-table.is-style-compare tbody th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--compare-bg);
}

.wp-block-table.is-style-compare thead th:first-child {
  z-index: 2;
}

.wp-block-table.is-style-compare tbody th[scope="row"] {
  font-weight: 500;
}

.wp-block-table.is-style-compare tbody th[scope="row"]:hover,
.wp-block-table.is-style-compare tbody th[scope="row"]:focus-within {
  z-index: 3;
}

/* Group rows */
.wp-block-table.is-style-compare tr.is-group th {
  padding-top: 1.25rem;
  border-bottom: 0;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent, #cdb68a);
  background: var(--compare-group-bg);
}

.wp-block-table.is-style-compare tr.is-group strong {
  position: sticky;
  left: 1rem;
  display: inline-block;
  font-weight: inherit;
}

/* Cell states */
.wp-block-table.is-style-compare td.is-yes {
  font-weight: 700;
  color: var(--wp--preset--color--primary);
}

.wp-block-table.is-style-compare td.is-no {
  color: var(--wp--preset--color--grey-500);
}

.wp-block-table.is-style-compare td.is-addon {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Highlighted package (4th column = Professional) */
.wp-block-table.is-style-compare tr:not(.is-group) > :nth-child(4) {
  background: var(--compare-highlight-bg);
}

.wp-block-table.is-style-compare thead th:nth-child(4) {
  color: var(--wp--preset--color--primary);
}

/* Row hover */
.wp-block-table.is-style-compare tbody tr:not(.is-group):hover > * {
  background-color: var(--compare-hover-bg);
}

/* Mobile: narrow sticky column so values stay visible */
@media (max-width: 781.98px) {
  .wp-block-table.is-style-compare table {
    min-width: 640px;
    font-size: 0.875rem;
  }

  .wp-block-table.is-style-compare :where(th, td) {
    padding: 0.625rem 0.5rem;
  }

  .wp-block-table.is-style-compare thead th:first-child,
  .wp-block-table.is-style-compare tbody th[scope="row"] {
    width: 9.5rem;
    min-width: 9.5rem;
    max-width: 9.5rem;
    padding-left: 0;
    hyphens: auto;
    box-shadow: 1px 0 0 var(--wp--preset--color--grey-800);
  }
}

/* Desktop: no scrolling needed, keep tooltips unclipped and open them to the right */
@media (min-width: 1201px) {
  .wp-block-table.is-style-compare {
    overflow: visible;
  }

  .wp-block-table.is-style-compare table {
    min-width: 0;
  }

  .wp-block-table.is-style-compare .tooltip__popup {
    top: 50%;
    bottom: auto;
    left: 100%;
    transform: translateY(-50%);
    margin: 0 0 0 0.4em;
  }
}