/*
 * HDTC Responsive Tables - frontend styles.
 *
 * Every visual value comes from a CSS custom property set on the wrapper by
 * PHP, so one stylesheet serves every table and the settings screen never has
 * to write CSS of its own.
 *
 * !important appears on the properties that make the layout actually work
 * (display, position, table structure, colours driven by our own variables).
 * This widget gets dropped into arbitrary page-builder content, and themes
 * routinely style bare <table>/<td> elements for classic post content —
 * without !important here, a generic theme rule for tables-in-text-content
 * can silently reintroduce cell spacing or reset flex/position, breaking the
 * accordion. Everything purely cosmetic (fonts, padding, sizing) is left
 * unprotected so a developer can still override it from a child theme if
 * they really want to.
 */

.htbl {
  --htbl-font: inherit;
  --htbl-max-width: 100%;
  --htbl-margin: 0 0 30px;
  --htbl-radius: 0px;
  --htbl-link-color: #0b5f8a;
  --htbl-table-bg: #ffffff;
  --htbl-head-bg: #0b5f8a;
  --htbl-head-color: #fff;
  --htbl-head-size: 16px;
  --htbl-head-weight: 700;
  --htbl-head-spacing: 0px;
  --htbl-head-pad: 18px 20px;
  --htbl-head-align: center;
  --htbl-head-justify: center;
  --htbl-cell-bg: #fff;
  --htbl-cell-alt-bg: #fff;
  --htbl-cell-color: #0b5f8a;
  --htbl-cell-size: 16px;
  --htbl-cell-weight: 600;
  --htbl-cell-pad: 16px 20px;
  --htbl-cell-align: center;
  --htbl-cell-justify: center;
  --htbl-rowhead-bg: transparent;
  --htbl-rowhead-color: #0b5f8a;
  --htbl-rowhead-weight: 700;
  --htbl-rowhead-align: left;
  --htbl-rowhead-justify: flex-start;
  --htbl-border-width: 1px;
  --htbl-border-color: #e4e9ee;
  --htbl-head-border-color: #0b5f8a;
  --htbl-vline-width: 0px;
  --htbl-icon-font: "HDTC Icons";
  --htbl-icon-size: 18px;
  --htbl-icon-color: currentColor;
  --htbl-icon-gap: 10px;
  --htbl-stack-gap: 10px;
  --htbl-label-width: 50%;
  --htbl-toggle-bg: #fff;
  --htbl-toggle-color: #0b5f8a;
  --htbl-mobile-size: 15px;
  --htbl-transition: 0.3s;
  --htbl-shadow: 0 1px 3px rgba(16,50,63,0.14);

  font-family: var(--htbl-font);
  max-width: var(--htbl-max-width);
  margin: var(--htbl-margin) !important;
  background: var(--htbl-table-bg);
}

.htbl *,
.htbl *::before,
.htbl *::after {
  box-sizing: border-box !important;
}

.htbl__caption {
  margin: 0 0 12px;
  font-weight: var(--htbl-head-weight);
  color: var(--htbl-cell-color);
}

.htbl__desc {
  caption-side: top;
  text-align: left;
  padding: 0 0 12px;
  color: var(--htbl-cell-color);
}

.htbl__scroller {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--htbl-radius);
  background: var(--htbl-table-bg);
}

.htbl__table {
  width: 100% !important;
  height: 1px; /* lets cell wrappers fill the row height */
  border: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  margin: 0 !important;
  background: transparent;
}

.htbl__table th,
.htbl__table td {
  padding: 0 !important;
  border: 0 !important;
  vertical-align: top !important;
  background: none;
}

/* ---- Cell wrappers ---------------------------------------------------- */

.htbl__cell {
  display: flex !important;
  align-items: center;
  gap: var(--htbl-icon-gap);
  height: 100%;
  width: 100%;
  line-height: 1.4;
  position: relative;
}

.htbl__cell--head {
  background: var(--htbl-head-bg) !important;
  color: var(--htbl-head-color) !important;
  font-size: var(--htbl-head-size);
  font-weight: var(--htbl-head-weight);
  letter-spacing: var(--htbl-head-spacing);
  padding: var(--htbl-head-pad) !important;
  text-align: var(--htbl-head-align);
  justify-content: var(--htbl-head-justify);
}

.htbl__cell--body {
  background: var(--htbl-cell-bg) !important;
  color: var(--htbl-cell-color) !important;
  font-size: var(--htbl-cell-size);
  font-weight: var(--htbl-cell-weight);
  padding: var(--htbl-cell-pad) !important;
  text-align: var(--htbl-cell-align);
  justify-content: var(--htbl-cell-justify);
}

.htbl__tr--even .htbl__cell--body {
  background: var(--htbl-cell-alt-bg) !important;
}

.htbl__cell--rowhead {
  background: var(--htbl-rowhead-bg) !important;
  color: var(--htbl-rowhead-color) !important;
  font-size: var(--htbl-cell-size);
  font-weight: var(--htbl-rowhead-weight);
  padding: var(--htbl-cell-pad) !important;
  text-align: var(--htbl-rowhead-align);
  justify-content: var(--htbl-rowhead-justify);
}

.htbl__text {
  display: inline-block;
}

.htbl__link {
  color: var(--htbl-link-color) !important;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--htbl-icon-gap);
  width: 100%;
  justify-content: inherit;
}

.htbl__link:hover,
.htbl__link:focus-visible {
  text-decoration: underline;
}

/* ---- Icons -------------------------------------------------------------
 * font-weight is pinned to 900, not "normal". FontAwesome's icon glyphs
 * (and most icon fonts distributed as a single "Solid" style) only exist in
 * the font's 900-weight face; requesting 400 gets you the browser's
 * missing-glyph fallback box instead of the icon. A font that only ships one
 * weight ignores this harmlessly.
 * ------------------------------------------------------------------------ */

.htbl__icon {
  font-family: var(--htbl-icon-font, "HDTC Icons"), "HDTC Icons" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  font-size: var(--htbl-icon-size);
  line-height: 1;
  color: var(--htbl-icon-color) !important;
  flex: 0 0 auto;
  -webkit-font-smoothing: antialiased;
  speak: never;
}

.htbl__icon--image {
  width: var(--htbl-icon-size);
  height: auto;
  display: block;
}

/* ---- Rules between cells ---------------------------------------------- */

.htbl__body .htbl__cell {
  border-bottom: var(--htbl-border-width) solid var(--htbl-border-color) !important;
  border-right: var(--htbl-vline-width) solid var(--htbl-border-color) !important;
}

.htbl__body tr:last-child .htbl__cell {
  border-bottom-color: transparent !important;
}

.htbl__body tr td:last-child .htbl__cell {
  border-right-width: 0 !important;
}

.htbl__head .htbl__cell {
  border-right: var(--htbl-vline-width) solid var(--htbl-head-border-color) !important;
}

.htbl__head tr th:last-child .htbl__cell {
  border-right-width: 0 !important;
}

/* ---- Cell variants ---------------------------------------------------- */

.htbl__cell--muted {
  opacity: 0.6;
}

.htbl__cell--strong {
  font-weight: 800;
}

.htbl__cell--accent {
  color: var(--htbl-head-bg);
}

.htbl__cell--closed {
  opacity: 0.75;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.htbl__cell--empty {
  min-height: 1px;
}

/* ---- Shadows ------------------------------------------------------------
 * Scope is chosen on the Styles screen and comes through as a data
 * attribute (custom properties can't be read by selectors), so only one of
 * these three ever matches at a time.
 * ------------------------------------------------------------------------ */

.htbl[data-shadow-scope="cell"] .htbl__cell {
  box-shadow: var(--htbl-shadow);
}

.htbl[data-shadow-scope="table"] .htbl__scroller {
  box-shadow: var(--htbl-shadow);
}

/* ---- Toggle affordance ------------------------------------------------ */

.htbl__toggle:focus-visible {
  outline: 2px solid var(--htbl-head-bg);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .htbl__td,
  .htbl__th {
    transition: none !important;
  }
}


/* Labels only exist for the stacked layouts. */
.htbl__label {
  display: none;
}


/* Stacked / accordion layout, collapsing by row -- always stacked */
.htbl[data-break="desktop"][data-collapse="rows"] .htbl__table {
  display: block !important;
  height: auto;
}

.htbl[data-break="desktop"][data-collapse="rows"] .htbl__head {
  display: none !important;
}

.htbl[data-break="desktop"][data-collapse="rows"] .htbl__body {
  display: grid !important;
  gap: var(--htbl-stack-gap);
}

.htbl[data-break="desktop"][data-collapse="rows"] .htbl__tr {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  border-radius: var(--htbl-radius);
  overflow: hidden;
}

.htbl[data-break="desktop"][data-shadow-scope="card"][data-collapse="rows"] .htbl__tr {
  box-shadow: var(--htbl-shadow);
}

.htbl[data-break="desktop"][data-collapse="rows"] .htbl__td {
  display: flex !important;
  align-items: stretch;
  justify-content: flex-end;
  position: relative !important;
  overflow: hidden;
  font-size: var(--htbl-mobile-size);
  margin-top: calc(var(--htbl-border-width) * -1);
  transition: height var(--htbl-transition) ease;
}

.htbl[data-break="desktop"][data-collapse="rows"] .htbl__td .htbl__cell {
  border-right-width: 0 !important;
  border-bottom-color: var(--htbl-border-color) !important;
}

.htbl[data-break="desktop"][data-collapse="rows"] .htbl__td--rowhead {
  justify-content: stretch;
}

.htbl[data-break="desktop"][data-collapse="rows"] .htbl__cell--rowhead {
  background: var(--htbl-toggle-bg) !important;
  color: var(--htbl-toggle-color) !important;
  justify-content: var(--htbl-head-justify);
  text-align: var(--htbl-head-align);
}

.htbl[data-break="desktop"][data-collapse="rows"] .htbl__label {
  display: flex !important;
  position: absolute !important;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--htbl-label-width);
}

.htbl[data-break="desktop"][data-collapse="rows"] .htbl__label .htbl__cell {
  flex: 1 1 auto;
  height: 100%;
  border-bottom: var(--htbl-border-width) solid var(--htbl-head-bg) !important;
}

.htbl[data-break="desktop"][data-collapse="rows"] .htbl__td > .htbl__cell {
  width: var(--htbl-label-width);
  margin-left: auto;
}

.htbl[data-break="desktop"][data-collapse="rows"] .htbl__td--rowhead > .htbl__cell {
  width: 100%;
  margin-left: 0;
}

.htbl[data-break="desktop"][data-collapse="rows"].htbl--mode-accordion .htbl__toggle {
  cursor: pointer;
}

.htbl[data-break="desktop"][data-collapse="rows"].htbl--mode-accordion .htbl__toggle:not(.is-open) ~ .htbl__td {
  height: 0 !important;
  border: 0 !important;
}

/* Stacked / accordion layout, collapsing by column -- always stacked */
.htbl[data-break="desktop"][data-collapse="columns"] .htbl__table {
  display: flex !important;
  flex-direction: column;
  height: auto;
}

.htbl[data-break="desktop"][data-collapse="columns"] .htbl__head,
.htbl[data-break="desktop"][data-collapse="columns"] .htbl__body,
.htbl[data-break="desktop"][data-collapse="columns"] .htbl__tr {
  display: contents !important;
}

.htbl[data-break="desktop"][data-collapse="columns"] .htbl__th,
.htbl[data-break="desktop"][data-collapse="columns"] .htbl__td {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  position: relative !important;
  overflow: hidden;
  font-size: var(--htbl-mobile-size);
  margin-top: calc(var(--htbl-border-width) * -1);
  border-radius: var(--htbl-radius);
  transition: height var(--htbl-transition) ease, flex var(--htbl-transition) ease;
}

.htbl[data-break="desktop"][data-shadow-scope="card"][data-collapse="columns"] .htbl__th,
.htbl[data-break="desktop"][data-shadow-scope="card"][data-collapse="columns"] .htbl__td {
  box-shadow: var(--htbl-shadow);
}

.htbl[data-break="desktop"][data-collapse="columns"] .htbl__th[data-col="0"] {
  margin-top: 0;
}

.htbl[data-break="desktop"][data-collapse="columns"] .htbl__th:not([data-col="0"]) {
  margin-top: var(--htbl-stack-gap);
}

.htbl[data-break="desktop"][data-collapse="columns"] .htbl__label {
  display: none !important;
}

.htbl[data-break="desktop"][data-collapse="columns"] .htbl__cell {
  flex: 1 1 auto;
  height: auto;
}

.htbl[data-break="desktop"][data-collapse="columns"].htbl--mode-accordion .htbl__toggle {
  cursor: pointer;
}

.htbl[data-break="desktop"][data-collapse="columns"].htbl--mode-accordion .htbl__td.is-collapsed {
  height: 0 !important;
  min-height: 0;
  padding: 0;
  margin-top: 0;
  border: 0 !important;
  flex: 0 0 0;
  overflow: hidden;
  box-shadow: none !important;
}

.htbl[data-break="desktop"][data-collapse="columns"].htbl--mode-accordion .htbl__td.is-collapsed .htbl__cell {
  border-width: 0 !important;
}

@media (max-width: 980px) {

  /* Stacked / accordion layout, collapsing by row -- 980px and below */
  .htbl[data-break="tablet"][data-collapse="rows"] .htbl__table {
    display: block !important;
    height: auto;
  }

  .htbl[data-break="tablet"][data-collapse="rows"] .htbl__head {
    display: none !important;
  }

  .htbl[data-break="tablet"][data-collapse="rows"] .htbl__body {
    display: grid !important;
    gap: var(--htbl-stack-gap);
  }

  .htbl[data-break="tablet"][data-collapse="rows"] .htbl__tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    border-radius: var(--htbl-radius);
    overflow: hidden;
  }

  .htbl[data-break="tablet"][data-shadow-scope="card"][data-collapse="rows"] .htbl__tr {
    box-shadow: var(--htbl-shadow);
  }

  .htbl[data-break="tablet"][data-collapse="rows"] .htbl__td {
    display: flex !important;
    align-items: stretch;
    justify-content: flex-end;
    position: relative !important;
    overflow: hidden;
    font-size: var(--htbl-mobile-size);
    margin-top: calc(var(--htbl-border-width) * -1);
    transition: height var(--htbl-transition) ease;
  }

  .htbl[data-break="tablet"][data-collapse="rows"] .htbl__td .htbl__cell {
    border-right-width: 0 !important;
    border-bottom-color: var(--htbl-border-color) !important;
  }

  .htbl[data-break="tablet"][data-collapse="rows"] .htbl__td--rowhead {
    justify-content: stretch;
  }

  .htbl[data-break="tablet"][data-collapse="rows"] .htbl__cell--rowhead {
    background: var(--htbl-toggle-bg) !important;
    color: var(--htbl-toggle-color) !important;
    justify-content: var(--htbl-head-justify);
    text-align: var(--htbl-head-align);
  }

  .htbl[data-break="tablet"][data-collapse="rows"] .htbl__label {
    display: flex !important;
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--htbl-label-width);
  }

  .htbl[data-break="tablet"][data-collapse="rows"] .htbl__label .htbl__cell {
    flex: 1 1 auto;
    height: 100%;
    border-bottom: var(--htbl-border-width) solid var(--htbl-head-bg) !important;
  }

  .htbl[data-break="tablet"][data-collapse="rows"] .htbl__td > .htbl__cell {
    width: var(--htbl-label-width);
    margin-left: auto;
  }

  .htbl[data-break="tablet"][data-collapse="rows"] .htbl__td--rowhead > .htbl__cell {
    width: 100%;
    margin-left: 0;
  }

  .htbl[data-break="tablet"][data-collapse="rows"].htbl--mode-accordion .htbl__toggle {
    cursor: pointer;
  }

  .htbl[data-break="tablet"][data-collapse="rows"].htbl--mode-accordion .htbl__toggle:not(.is-open) ~ .htbl__td {
    height: 0 !important;
    border: 0 !important;
  }

  /* Stacked / accordion layout, collapsing by column -- 980px and below */
  .htbl[data-break="tablet"][data-collapse="columns"] .htbl__table {
    display: flex !important;
    flex-direction: column;
    height: auto;
  }

  .htbl[data-break="tablet"][data-collapse="columns"] .htbl__head,
  .htbl[data-break="tablet"][data-collapse="columns"] .htbl__body,
  .htbl[data-break="tablet"][data-collapse="columns"] .htbl__tr {
    display: contents !important;
  }

  .htbl[data-break="tablet"][data-collapse="columns"] .htbl__th,
  .htbl[data-break="tablet"][data-collapse="columns"] .htbl__td {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    position: relative !important;
    overflow: hidden;
    font-size: var(--htbl-mobile-size);
    margin-top: calc(var(--htbl-border-width) * -1);
    border-radius: var(--htbl-radius);
    transition: height var(--htbl-transition) ease, flex var(--htbl-transition) ease;
  }

  .htbl[data-break="tablet"][data-shadow-scope="card"][data-collapse="columns"] .htbl__th,
  .htbl[data-break="tablet"][data-shadow-scope="card"][data-collapse="columns"] .htbl__td {
    box-shadow: var(--htbl-shadow);
  }

  .htbl[data-break="tablet"][data-collapse="columns"] .htbl__th[data-col="0"] {
    margin-top: 0;
  }

  .htbl[data-break="tablet"][data-collapse="columns"] .htbl__th:not([data-col="0"]) {
    margin-top: var(--htbl-stack-gap);
  }

  .htbl[data-break="tablet"][data-collapse="columns"] .htbl__label {
    display: none !important;
  }

  .htbl[data-break="tablet"][data-collapse="columns"] .htbl__cell {
    flex: 1 1 auto;
    height: auto;
  }

  .htbl[data-break="tablet"][data-collapse="columns"].htbl--mode-accordion .htbl__toggle {
    cursor: pointer;
  }

  .htbl[data-break="tablet"][data-collapse="columns"].htbl--mode-accordion .htbl__td.is-collapsed {
    height: 0 !important;
    min-height: 0;
    padding: 0;
    margin-top: 0;
    border: 0 !important;
    flex: 0 0 0;
    overflow: hidden;
    box-shadow: none !important;
  }

  .htbl[data-break="tablet"][data-collapse="columns"].htbl--mode-accordion .htbl__td.is-collapsed .htbl__cell {
    border-width: 0 !important;
  }
}

@media (max-width: 767px) {

  /* Stacked / accordion layout, collapsing by row -- 767px and below */
  .htbl[data-break="mobile"][data-collapse="rows"] .htbl__table {
    display: block !important;
    height: auto;
  }

  .htbl[data-break="mobile"][data-collapse="rows"] .htbl__head {
    display: none !important;
  }

  .htbl[data-break="mobile"][data-collapse="rows"] .htbl__body {
    display: grid !important;
    gap: var(--htbl-stack-gap);
  }

  .htbl[data-break="mobile"][data-collapse="rows"] .htbl__tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    border-radius: var(--htbl-radius);
    overflow: hidden;
  }

  .htbl[data-break="mobile"][data-shadow-scope="card"][data-collapse="rows"] .htbl__tr {
    box-shadow: var(--htbl-shadow);
  }

  .htbl[data-break="mobile"][data-collapse="rows"] .htbl__td {
    display: flex !important;
    align-items: stretch;
    justify-content: flex-end;
    position: relative !important;
    overflow: hidden;
    font-size: var(--htbl-mobile-size);
    margin-top: calc(var(--htbl-border-width) * -1);
    transition: height var(--htbl-transition) ease;
  }

  .htbl[data-break="mobile"][data-collapse="rows"] .htbl__td .htbl__cell {
    border-right-width: 0 !important;
    border-bottom-color: var(--htbl-border-color) !important;
  }

  .htbl[data-break="mobile"][data-collapse="rows"] .htbl__td--rowhead {
    justify-content: stretch;
  }

  .htbl[data-break="mobile"][data-collapse="rows"] .htbl__cell--rowhead {
    background: var(--htbl-toggle-bg) !important;
    color: var(--htbl-toggle-color) !important;
    justify-content: var(--htbl-head-justify);
    text-align: var(--htbl-head-align);
  }

  .htbl[data-break="mobile"][data-collapse="rows"] .htbl__label {
    display: flex !important;
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--htbl-label-width);
  }

  .htbl[data-break="mobile"][data-collapse="rows"] .htbl__label .htbl__cell {
    flex: 1 1 auto;
    height: 100%;
    border-bottom: var(--htbl-border-width) solid var(--htbl-head-bg) !important;
  }

  .htbl[data-break="mobile"][data-collapse="rows"] .htbl__td > .htbl__cell {
    width: var(--htbl-label-width);
    margin-left: auto;
  }

  .htbl[data-break="mobile"][data-collapse="rows"] .htbl__td--rowhead > .htbl__cell {
    width: 100%;
    margin-left: 0;
  }

  .htbl[data-break="mobile"][data-collapse="rows"].htbl--mode-accordion .htbl__toggle {
    cursor: pointer;
  }

  .htbl[data-break="mobile"][data-collapse="rows"].htbl--mode-accordion .htbl__toggle:not(.is-open) ~ .htbl__td {
    height: 0 !important;
    border: 0 !important;
  }

  /* Stacked / accordion layout, collapsing by column -- 767px and below */
  .htbl[data-break="mobile"][data-collapse="columns"] .htbl__table {
    display: flex !important;
    flex-direction: column;
    height: auto;
  }

  .htbl[data-break="mobile"][data-collapse="columns"] .htbl__head,
  .htbl[data-break="mobile"][data-collapse="columns"] .htbl__body,
  .htbl[data-break="mobile"][data-collapse="columns"] .htbl__tr {
    display: contents !important;
  }

  .htbl[data-break="mobile"][data-collapse="columns"] .htbl__th,
  .htbl[data-break="mobile"][data-collapse="columns"] .htbl__td {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    position: relative !important;
    overflow: hidden;
    font-size: var(--htbl-mobile-size);
    margin-top: calc(var(--htbl-border-width) * -1);
    border-radius: var(--htbl-radius);
    transition: height var(--htbl-transition) ease, flex var(--htbl-transition) ease;
  }

  .htbl[data-break="mobile"][data-shadow-scope="card"][data-collapse="columns"] .htbl__th,
  .htbl[data-break="mobile"][data-shadow-scope="card"][data-collapse="columns"] .htbl__td {
    box-shadow: var(--htbl-shadow);
  }

  .htbl[data-break="mobile"][data-collapse="columns"] .htbl__th[data-col="0"] {
    margin-top: 0;
  }

  .htbl[data-break="mobile"][data-collapse="columns"] .htbl__th:not([data-col="0"]) {
    margin-top: var(--htbl-stack-gap);
  }

  .htbl[data-break="mobile"][data-collapse="columns"] .htbl__label {
    display: none !important;
  }

  .htbl[data-break="mobile"][data-collapse="columns"] .htbl__cell {
    flex: 1 1 auto;
    height: auto;
  }

  .htbl[data-break="mobile"][data-collapse="columns"].htbl--mode-accordion .htbl__toggle {
    cursor: pointer;
  }

  .htbl[data-break="mobile"][data-collapse="columns"].htbl--mode-accordion .htbl__td.is-collapsed {
    height: 0 !important;
    min-height: 0;
    padding: 0;
    margin-top: 0;
    border: 0 !important;
    flex: 0 0 0;
    overflow: hidden;
    box-shadow: none !important;
  }

  .htbl[data-break="mobile"][data-collapse="columns"].htbl--mode-accordion .htbl__td.is-collapsed .htbl__cell {
    border-width: 0 !important;
  }
}