/**
 * Recentre lesson tables — reusable two-tone table styles.
 * =====================================================================================
 * Instead of hand-coding inline styles/wrapper HTML (which the Text Editor widget
 * strips or reformats), add ONE colour class to the <table>. In Elementor: select the
 * Text Editor / HTML widget, or add the class in the markup's `<table class="...">`.
 *
 * COLOUR CLASSES (pick one per table):
 *   recentre-table-purple   neutral / Step 1 / general content   light #f1f2f7  dark #d6d7eb
 *   recentre-table-orange                                        light #fff1e4  dark #fed7b0
 *   recentre-table-green    health / habits / wellbeing          light #f0f6eb  dark #b9debd
 *   recentre-table-pink     Step 4 / reflection / lifestyle      light #fbeded  dark #f3cad0
 *
 * ROWS: alternate light/dark automatically (zebra). To force a specific row — e.g. a
 * header row — add `recentre-row-dark` (or `recentre-row-light`) to that <tr>.
 *
 * TABLE MODIFIERS (add alongside the colour class):
 *   recentre-table-roomy     14px cell padding (roomier content tables)
 *   recentre-table-compact   10px cell padding (schedule / grid tables)
 *   recentre-table-grid      centres cell text (schedule / grid tables)
 *   recentre-table-outer     adds the 4px white outer frame
 *
 * CELL HELPER:
 *   recentre-cell-label      bold label cell (700)
 *
 * The white 3px cell borders + the two-tone fill give the tiled look. Background and
 * border use !important so the fill survives the theme's own table styling in the
 * lesson loader; padding/alignment are left overridable.
 * =====================================================================================
 */

/* ---- shared table structure --------------------------------------------------- */
.recentre-table-purple,
.recentre-table-orange,
.recentre-table-green,
.recentre-table-pink {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0 0 1.25em;
}

/* ---- shared cell base --------------------------------------------------------- */
.recentre-table-purple th, .recentre-table-purple td,
.recentre-table-orange th, .recentre-table-orange td,
.recentre-table-green th,  .recentre-table-green td,
.recentre-table-pink th,   .recentre-table-pink td {
  border: 3px solid #ffffff !important;
  padding: 12px;
  vertical-align: top;
  text-align: left;
  color: #2b2b2b;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ---- two-tone fill: zebra (odd = light, even = dark) -------------------------- */
/* purple */
.recentre-table-purple tr:nth-child(odd)  > th, .recentre-table-purple tr:nth-child(odd)  > td { background-color: #f1f2f7 !important; }
.recentre-table-purple tr:nth-child(even) > th, .recentre-table-purple tr:nth-child(even) > td { background-color: #d6d7eb !important; }
/* orange */
.recentre-table-orange tr:nth-child(odd)  > th, .recentre-table-orange tr:nth-child(odd)  > td { background-color: #fff1e4 !important; }
.recentre-table-orange tr:nth-child(even) > th, .recentre-table-orange tr:nth-child(even) > td { background-color: #fed7b0 !important; }
/* green */
.recentre-table-green tr:nth-child(odd)  > th, .recentre-table-green tr:nth-child(odd)  > td { background-color: #f0f6eb !important; }
.recentre-table-green tr:nth-child(even) > th, .recentre-table-green tr:nth-child(even) > td { background-color: #b9debd !important; }
/* pink */
.recentre-table-pink tr:nth-child(odd)  > th, .recentre-table-pink tr:nth-child(odd)  > td { background-color: #fbeded !important; }
.recentre-table-pink tr:nth-child(even) > th, .recentre-table-pink tr:nth-child(even) > td { background-color: #f3cad0 !important; }

/* ---- manual row overrides (extra `table` bumps specificity to win over zebra) - */
table.recentre-table-purple tr.recentre-row-light > th, table.recentre-table-purple tr.recentre-row-light > td { background-color: #f1f2f7 !important; }
table.recentre-table-purple tr.recentre-row-dark  > th, table.recentre-table-purple tr.recentre-row-dark  > td { background-color: #d6d7eb !important; }
table.recentre-table-orange tr.recentre-row-light > th, table.recentre-table-orange tr.recentre-row-light > td { background-color: #fff1e4 !important; }
table.recentre-table-orange tr.recentre-row-dark  > th, table.recentre-table-orange tr.recentre-row-dark  > td { background-color: #fed7b0 !important; }
table.recentre-table-green  tr.recentre-row-light > th, table.recentre-table-green  tr.recentre-row-light > td { background-color: #f0f6eb !important; }
table.recentre-table-green  tr.recentre-row-dark  > th, table.recentre-table-green  tr.recentre-row-dark  > td { background-color: #b9debd !important; }
table.recentre-table-pink   tr.recentre-row-light > th, table.recentre-table-pink   tr.recentre-row-light > td { background-color: #fbeded !important; }
table.recentre-table-pink   tr.recentre-row-dark  > th, table.recentre-table-pink   tr.recentre-row-dark  > td { background-color: #f3cad0 !important; }

/* ---- padding modifiers -------------------------------------------------------- */
.recentre-table-roomy th,   .recentre-table-roomy td   { padding: 14px; }
.recentre-table-compact th, .recentre-table-compact td { padding: 10px; }

/* ---- grid / schedule alignment ------------------------------------------------ */
.recentre-table-grid th, .recentre-table-grid td {
  text-align: center;
  vertical-align: middle;
}

/* ---- optional 4px white outer frame ------------------------------------------- */
table.recentre-table-outer { border: 4px solid #ffffff !important; }

/* ---- bold label cell ---------------------------------------------------------- */
.recentre-cell-label { font-weight: 700 !important; }