/* ==========================================================================
   Variables & Defaults
   ========================================================================== */

:root {
  --rp-table-border: 1px solid #dcdcdc;
  --rp-anim-speed: 0.3s;
  --rp-padding-std: 1.25rem;
  interpolate-size: allow-keywords;
}

.responsive-table {
  width: 100%;
  border-collapse: collapse;
}

.responsive-table th,
.responsive-table td {
  border: var(--rp-table-border);
  padding: 0.75rem;
  text-align: left;
}

.responsive-table td div {
  margin: 0;
}

/* ==========================================================================
   Desktop Behavior (Default)
   ========================================================================== */

.responsive-table .responsive-cell,
.responsive-table td i,
.table-controls {
  display: none;
}


/* ==========================================================================
   Mobile Behavior (< 768px)
   ========================================================================== */

@media (max-width: 767px) {

  /* Hide standard header elements */
  .responsive-table thead,
  .responsive-table thead tr {
    display: none;
    border: none;
  }

  /* Show and style header/title */
  .responsive-table thead:has(.title),
  .responsive-table thead tr:has(.title),
  .responsive-table thead .title {
    display: block;
    width: 100%;
    text-wrap: wrap !important;
    hyphens: auto;
  }

  .responsive-table thead .title {
    padding: var(--rp-padding-std) !important;
    border: none !important;
    line-height: 2rem !important;
    box-shadow: none !important;
  }

  /* Row and data structure */
  .responsive-table tbody,
  .responsive-table tr {
    display: block;
    width: 100%;
  }

  /* Base row setup for fluid animation */
  .responsive-table tr {
    height: auto;
    margin-bottom: 1rem;
    border: var(--rp-table-border);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    /* Safe upper bound for open state */
    transition:
      opacity var(--rp-anim-speed) ease,
      margin var(--rp-anim-speed) ease,
      transform var(--rp-anim-speed) ease,
      height var(--rp-anim-speed) ease-in-out;
  }

  /* Target state for hidden rows */
  .responsive-table tr.responsive-row-hide {
    height: 0;
    transform: translateY(-5px);
    opacity: 0;
    border: none;
    margin-bottom: 0;
  }

  .responsive-table tr.open-all {
    padding-bottom: 1.25rem;
    background-color: #ffffff !important;
  }

  /* Cell configuration */
  .responsive-table td {
    display: flex;
    padding: var(--rp-padding-std) !important;
    width: 100%;
    align-items: flex-start;
    word-break: break-word;
    text-align: left !important;
    font-size: 0.875rem !important;
    hyphens: auto;
    opacity: 1;
    color: inherit;
    line-height: 1.125rem !important;
  }

  .responsive-table td::before {
    content: attr(data-label);
    font-weight: 700;
    margin-right: 1rem;
    text-wrap: wrap;
    hyphens: auto;
    flex: 0 0 50%;
    white-space: pre-wrap;
  }

  .responsive-table td.secondary,
  .responsive-table td.responsive-cell {
    border-top: none;
    border-bottom: none;
  }

  /* Specific styles for editor cells */
  .field--name-field-wf-text-editor table.responsive-table td:nth-child(2),
  .field--name-field-wf-text-editor table th:nth-child(2) {
    border-left-width: 2px;
  }

  /* Inner row accordion open/close transitions */
  .responsive-table td.data {
    display: flex;
    opacity: 0;
    transform: translateY(-5px);
    height: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
    border: none;
    transition:
      opacity var(--rp-anim-speed) ease,
      transform var(--rp-anim-speed) ease,
      padding var(--rp-anim-speed) ease,
      height var(--rp-anim-speed) ease-in-out;
  }

  .responsive-table td.data.show {
    opacity: 1;
    transform: translateY(0);
    height: auto;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .responsive-table td.data.show.secondary {
    padding: 0.25rem 2rem !important;
    row-gap: 8px;
  }

  .responsive-table td.data.show.secondary:has(+ td:not(.secondary)) {
    padding-bottom: 0.5rem !important;
  }

  /* Header / Title within cell */
  .responsive-table td.title {
    display: flex;
    cursor: pointer;
    position: relative;
    padding-right: 2rem;
    padding-bottom: 0.5rem !important;
    border: none !important;
  }

  .responsive-table td.title div {
    width: 40%;
  }

  /* Accordion caret icon */
  .responsive-table td.title i {
    display: block;
    font-size: 24px;
    transform: rotate(0deg);
    transition: transform var(--rp-anim-speed) ease;
  }

  /* Expanded state */
  .responsive-table td.title.active i {
    transform: rotate(180deg);
  }

  .responsive-table tr.open-all td:not(.subtitle):not(:last-child):not(.secondary)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 1.25rem;
    width: calc(100% - 2.5rem);
    height: 1px;
    background: #dcdcdc;
  }

  .responsive-table td.data.show:last-child {
    padding-bottom: 0.5rem !important;
  }

  .responsive-table tr.open-all td.data.show.subtitle {
    padding-bottom: 0.25rem !important;
  }

  .responsive-table tr.open-all td.secondary:has(+ :not(.secondary))::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 1.25rem;
    width: calc(100% - 2.5rem);
    height: 1px;
    background: #dcdcdc;
  }

  .responsive-table tr.open-all td:last-child::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 1.25rem;
    width: calc(100% - 2.5rem);
    height: 1px;
    background: #dcdcdc;
  }

  /* Table caption styling */
  table.responsive-table caption {
    width: 100%;
    display: block !important;
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    margin-bottom: 1rem !important;
    padding: var(--rp-padding-std) !important;
  }

  /* Table controls layout */
  .table-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .table-status-text {
    font-size: 0.875rem;
    line-height: 1.315rem;
    padding-left: 0.5rem;
  }

  button.table-toggle-btn:active,
  button.table-toggle-btn:hover {
    background: #212121;
  }
}