/* ========================================================================
   Content tables
   A consistent, responsive table language for pages, posts and tour fields.
   ======================================================================== */

:root {
  --stp-table-border: #dce5d8;
  --stp-table-divider: #e9eee7;
  --stp-table-head: var(--stp-forest, #223717);
  --stp-table-head-hover: var(--stp-forest-light, #2c471e);
  --stp-table-row-alt: #f8faf6;
  --stp-table-row-hover: var(--stp-jungle-soft, #edf7eb);
  --stp-table-text: var(--stp-text-body, #3c4a35);
  --stp-table-muted: var(--stp-text-muted, #6b7c62);
}

/* Baseline for semantic tables that are not owned by a component library. */
main :where(table) {
  color: var(--stp-table-text);
  font-variant-numeric: tabular-nums;
}

main :where(table) :where(th, td) {
  vertical-align: middle;
}

/* Classic editor and ACF rich-text areas. */
:where(
  .entry-content,
  .stp-entry-content,
  .stp-post-article,
  .stp-terms-article,
  .stp-overview-body,
  .stp-trip-details-list,
  .stp-itinerary-desc,
  .pricing_box
) table:not(.stp-price-table):not(.stp-sheet-table):not(.stp-matrix-table) {
  width: 100%;
  margin: 1.5rem 0;
  border: 1px solid var(--stp-table-border);
  border-radius: 14px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background-color: var(--stp-white, #ffffff);
  color: var(--stp-table-text);
  font-size: clamp(0.9rem, 0.25vw + 0.84rem, 0.98rem);
  line-height: 1.45;
}

:where(
  .entry-content,
  .stp-entry-content,
  .stp-post-article,
  .stp-terms-article,
  .stp-overview-body,
  .stp-trip-details-list,
  .stp-itinerary-desc,
  .pricing_box
) table:not(.stp-price-table):not(.stp-sheet-table):not(.stp-matrix-table) :where(th, td) {
  padding: clamp(0.78rem, 1.2vw, 1rem) clamp(0.9rem, 1.6vw, 1.25rem);
  border: 0;
  border-bottom: 1px solid var(--stp-table-divider);
  text-align: left;
}

:where(
  .entry-content,
  .stp-entry-content,
  .stp-post-article,
  .stp-terms-article,
  .stp-overview-body,
  .stp-trip-details-list,
  .stp-itinerary-desc,
  .pricing_box
) table:not(.stp-price-table):not(.stp-sheet-table):not(.stp-matrix-table) :where(th, td):not(:last-child) {
  border-right: 1px solid var(--stp-table-divider);
}

:where(
  .entry-content,
  .stp-entry-content,
  .stp-post-article,
  .stp-terms-article,
  .stp-overview-body,
  .stp-trip-details-list,
  .stp-itinerary-desc,
  .pricing_box
) table:not(.stp-price-table):not(.stp-sheet-table):not(.stp-matrix-table) thead th {
  background-color: var(--stp-table-head);
  color: var(--stp-white, #ffffff);
  font-weight: 750;
  letter-spacing: 0.01em;
  border-bottom-color: var(--stp-table-head);
}

:where(
  .entry-content,
  .stp-entry-content,
  .stp-post-article,
  .stp-terms-article,
  .stp-overview-body,
  .stp-trip-details-list,
  .stp-itinerary-desc,
  .pricing_box
) table:not(.stp-price-table):not(.stp-sheet-table):not(.stp-matrix-table) thead th:not(:last-child) {
  border-right-color: rgba(255, 255, 255, 0.16);
}

:where(
  .entry-content,
  .stp-entry-content,
  .stp-post-article,
  .stp-terms-article,
  .stp-overview-body,
  .stp-trip-details-list,
  .stp-itinerary-desc,
  .pricing_box
) table:not(.stp-price-table):not(.stp-sheet-table):not(.stp-matrix-table) tbody th {
  background-color: var(--stp-bg-warm, #f7f4ed);
  color: var(--stp-forest, #223717);
  font-weight: 700;
}

:where(
  .entry-content,
  .stp-entry-content,
  .stp-post-article,
  .stp-terms-article,
  .stp-overview-body,
  .stp-trip-details-list,
  .stp-itinerary-desc,
  .pricing_box
) table:not(.stp-price-table):not(.stp-sheet-table):not(.stp-matrix-table) tbody tr:nth-child(even) > * {
  background-color: var(--stp-table-row-alt);
}

:where(
  .entry-content,
  .stp-entry-content,
  .stp-post-article,
  .stp-terms-article,
  .stp-overview-body,
  .stp-trip-details-list,
  .stp-itinerary-desc,
  .pricing_box
) table:not(.stp-price-table):not(.stp-sheet-table):not(.stp-matrix-table) tbody tr:last-child > * {
  border-bottom: 0;
}

:where(
  .entry-content,
  .stp-entry-content,
  .stp-post-article,
  .stp-terms-article,
  .stp-overview-body,
  .stp-trip-details-list,
  .stp-itinerary-desc,
  .pricing_box
) table:not(.stp-price-table):not(.stp-sheet-table):not(.stp-matrix-table) tfoot > tr > * {
  padding: 0.9rem 1.25rem;
  background-color: var(--stp-bg-warm, #f7f4ed);
  color: var(--stp-forest, #223717);
  font-weight: 750;
}

:where(
  .entry-content,
  .stp-entry-content,
  .stp-post-article,
  .stp-terms-article,
  .stp-overview-body,
  .stp-trip-details-list,
  .stp-itinerary-desc,
  .pricing_box
) table:not(.stp-price-table):not(.stp-sheet-table):not(.stp-matrix-table) caption {
  padding: 0.75rem 0.25rem 0;
  color: var(--stp-table-muted);
  font-size: 0.86rem;
  text-align: left;
  caption-side: bottom;
}

:where(
  .entry-content,
  .stp-entry-content,
  .stp-post-article,
  .stp-terms-article,
  .stp-overview-body,
  .stp-trip-details-list,
  .stp-itinerary-desc,
  .pricing_box
) table:not(.stp-price-table):not(.stp-sheet-table):not(.stp-matrix-table) a {
  color: var(--stp-jungle, #2e7214);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Horizontal overflow stays on the table region, not on the whole page. */
.stp-table-scroll,
.wp-block-table,
.table-responsive {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: var(--stp-jungle, #2e7214) var(--stp-bg-warm, #f7f4ed);
  scrollbar-width: thin;
}

.stp-table-scroll {
  margin: 1.5rem 0;
  border-radius: 14px;
}

.stp-table-scroll > table {
  margin: 0 !important;
}

.stp-table-scroll:focus-visible {
  outline: 3px solid rgba(var(--stp-jungle-rgb, 46, 114, 20), 0.28);
  outline-offset: 3px;
}

.stp-table-scroll::-webkit-scrollbar,
.wp-block-table::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
  height: 8px;
}

.stp-table-scroll::-webkit-scrollbar-track,
.wp-block-table::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
  background: var(--stp-bg-warm, #f7f4ed);
}

.stp-table-scroll::-webkit-scrollbar-thumb,
.wp-block-table::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
  background: var(--stp-jungle, #2e7214);
  border: 2px solid var(--stp-bg-warm, #f7f4ed);
  border-radius: 999px;
}

/* Bring the hand-authored tour price tables into the same visual system. */
.stp-price-table-wrap {
  border-color: var(--stp-table-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

.stp-price-table thead th {
  background-color: var(--stp-table-head) !important;
  color: var(--stp-white, #ffffff) !important;
  border-bottom-color: var(--stp-table-head) !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}

.stp-price-table tbody tr:nth-child(even) {
  background-color: var(--stp-table-row-alt);
}

.stp-price-table tbody tr:not(:last-child) td {
  border-bottom-color: var(--stp-table-divider) !important;
}

@media (hover: hover) {
  :where(
    .entry-content,
    .stp-entry-content,
    .stp-post-article,
    .stp-terms-article,
    .stp-overview-body,
    .stp-trip-details-list,
    .stp-itinerary-desc,
    .pricing_box
  ) table:not(.stp-price-table):not(.stp-sheet-table):not(.stp-matrix-table) tbody tr > * {
    transition: background-color 180ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  :where(
    .entry-content,
    .stp-entry-content,
    .stp-post-article,
    .stp-terms-article,
    .stp-overview-body,
    .stp-trip-details-list,
    .stp-itinerary-desc,
    .pricing_box
  ) table:not(.stp-price-table):not(.stp-sheet-table):not(.stp-matrix-table) tbody tr:hover > * {
    background-color: var(--stp-table-row-hover);
  }

  .stp-price-table tbody tr:hover {
    background-color: var(--stp-table-row-hover) !important;
  }
}

@media (max-width: 767.98px) {
  :where(
    .entry-content,
    .stp-entry-content,
    .stp-post-article,
    .stp-terms-article,
    .stp-overview-body,
    .stp-trip-details-list,
    .stp-itinerary-desc,
    .pricing_box
  ) > table:not(.stp-price-table):not(.stp-sheet-table):not(.stp-matrix-table) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: var(--stp-jungle, #2e7214) var(--stp-bg-warm, #f7f4ed);
    scrollbar-width: thin;
  }

  :where(
    .entry-content,
    .stp-entry-content,
    .stp-post-article,
    .stp-terms-article,
    .stp-overview-body,
    .stp-trip-details-list,
    .stp-itinerary-desc,
    .pricing_box
  ) table:not(.stp-price-table):not(.stp-sheet-table):not(.stp-matrix-table) :where(th, td) {
    min-width: 8.5rem;
    padding: 0.78rem 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(
    .entry-content,
    .stp-entry-content,
    .stp-post-article,
    .stp-terms-article,
    .stp-overview-body,
    .stp-trip-details-list,
    .stp-itinerary-desc,
    .pricing_box
  ) table tbody tr > * {
    transition: none !important;
  }
}