/**
 * Senarai Akta View, based on Figma node 1405:20354.
 */

.block-views-blocksenarai-akta-block-1 {
  width: 100%;
}

.jkptg-act-list {
  box-sizing: border-box;
  width: min(
    calc(100% - (2 * var(--jkptg-layout-content-gutter, 24px))),
    var(--jkptg-layout-container-max-width, 1200px)
  );
  margin: 72px auto 120px;
  color: var(--jkptg-color-navy-900, #00122a);
  font-family: var(--jkptg-font-family-body, 'Inter', sans-serif);
}

.jkptg-act-list *,
.jkptg-act-list *::before,
.jkptg-act-list *::after {
  box-sizing: border-box;
}

.jkptg-act-list__layout {
  display: grid;
  grid-template-columns: 282px minmax(0, 1fr);
  align-items: start;
  gap: 44px;
}

.jkptg-act-list__sidebar {
  padding: 20px 10px;
  background: var(--jkptg-surface-primary, #fcfcfc);
  border: 1px solid var(--jkptg-border-neutral-on-light-15, rgb(0 0 0 / 15%));
  border-radius: var(--jkptg-radius-md, 6px);
}

.jkptg-act-list__search {
  display: flex;
  width: 100%;
  height: 40px;
  padding: 8px 16px;
  align-items: center;
  gap: 10px;
  background: var(--jkptg-surface-primary, #fcfcfc);
  border: 1px solid var(--jkptg-border-neutral-on-light-20, rgb(0 0 0 / 20%));
  border-radius: var(--jkptg-radius-md, 6px);
  box-shadow: 0 1px 1.5px var(--jkptg-shadow-resting, rgb(0 0 0 / 8%));
}

.jkptg-act-list__search img {
  display: block;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.jkptg-act-list__search input {
  width: 100%;
  min-width: 0;
  height: 22px;
  padding: 0;
  color: var(--jkptg-text-secondary, #3d3d3d);
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: var(--jkptg-font-size-md, 16px);
  line-height: 21.6px;
  outline: 0;
}

.jkptg-act-list__search input::placeholder {
  color: var(--jkptg-text-tertiary, #929292);
  opacity: 1;
}

.jkptg-act-list__search:focus-within {
  border-color: var(--jkptg-border-action-default, #2d9bd3);
  box-shadow: 0 0 0 3px rgb(45 155 211 / 20%);
}

.jkptg-act-list__nav {
  margin-top: 31px;
}

.jkptg-act-list__nav ul {
  display: flex;
  margin: 0;
  padding: 0;
  flex-direction: column;
  list-style: none;
}

.jkptg-act-list__nav li {
  margin: 0;
  padding: 0;
}

.jkptg-act-list__tab {
  display: flex;
  width: 100%;
  min-height: 41px;
  padding: 12px;
  align-items: center;
  color: var(--jkptg-text-secondary, #3d3d3d);
  border-radius: var(--jkptg-radius-md, 6px);
  font-size: var(--jkptg-font-size-md, 16px);
  font-weight: var(--jkptg-font-weight-regular, 400);
  line-height: 16.8px;
  text-decoration: none;
}

.jkptg-act-list__tab:hover,
.jkptg-act-list__tab:focus-visible {
  color: var(--jkptg-color-teal-600, #008f86);
  background: var(--jkptg-color-teal-100, #e6fffc);
  text-decoration: none;
}

.jkptg-act-list__tab.is-active {
  color: var(--jkptg-color-teal-600, #008f86);
  background: var(--jkptg-color-teal-100, #e6fffc);
  font-weight: var(--jkptg-font-weight-semibold, 600);
}

.jkptg-act-list__tab:focus-visible {
  outline: 2px solid var(--jkptg-border-action-default, #2d9bd3);
  outline-offset: 2px;
}

.jkptg-act-list__panel[hidden] {
  display: none;
}

.jkptg-act-list__caption {
  color: var(--text-secondary, #3D3D3D);
  font-family: Inter;
  font-size: var(--font-size-md, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 14.4px; /* 90% */
}

.jkptg-act-list__article {
  margin-top: 28px;
}

.jkptg-act-list__article + .jkptg-act-list__article {
  padding-top: 32px;
  border-top: 1px solid var(--jkptg-border-neutral-on-light-15, rgb(0 0 0 / 15%));
}

.jkptg-act-list__article > h2 {
  margin: 0 0 20px;
  color: var(--jkptg-color-navy-900, #00122a);
  font-size: var(--jkptg-font-size-xl, 20px);
  font-weight: var(--jkptg-font-weight-semibold, 600);
  line-height: 30px;
}

.jkptg-act-list__body,
.jkptg-act-list__body .field,
.jkptg-act-list__body .field__item {
  min-width: 0;
  color: var(--jkptg-color-navy-900, #00122a);
  font-size: var(--jkptg-font-size-md, 16px);
  font-weight: var(--jkptg-font-weight-regular, 400);
  line-height: 24px;
}

.jkptg-act-list__body :where(p, ul, ol) {
  margin-top: 0;
  margin-bottom: 10px;
}

.jkptg-act-list__body :where(ul, ol) {
  padding-left: 24px;
}

.jkptg-act-list__body li {
  margin: 0;
}

.jkptg-act-list__body :where(h2, h3) {
  margin: 20px 0 15px;
  color: var(--jkptg-color-navy-900, #00122a);
  font-weight: var(--jkptg-font-weight-semibold, 600);
}

.jkptg-act-list__body h2 {
  font-size: var(--jkptg-font-size-xl, 20px);
  line-height: 30px;
}

.jkptg-act-list__body h3 {
  font-size: var(--jkptg-font-size-lg, 18px);
  line-height: 21.6px;
}

.jkptg-act-list__body blockquote {
  margin: 20px 0;
  padding: 20px;
  color: var(--jkptg-color-navy-900, #00122a);
  background: var(--jkptg-surface-secondary, #f3f5f8);
  border: 0;
  border-radius: var(--jkptg-radius-xl, 12px);
}

.jkptg-act-list__body blockquote > :first-child {
  margin-top: 0;
}

.jkptg-act-list__body blockquote > :last-child {
  margin-bottom: 0;
}

/* CKEditor tables become the equal-width information-card rows in Figma. */
.jkptg-act-list__body table {
  display: block;
  width: 100%;
  margin: 20px 0;
  border: 0;
  border-collapse: separate;
}

.jkptg-act-list__body table tbody {
  display: grid;
  width: 100%;
  gap: 10px;
}

.jkptg-act-list__body table tr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  width: 100%;
  gap: 10px;
}

.jkptg-act-list__body table td,
.jkptg-act-list__body table th {
  display: flex;
  min-width: 0;
  min-height: 88px;
  padding: 12px 15px;
  align-items: center;
  justify-content: center;
  color: var(--jkptg-color-navy-900, #00122a);
  background: #f7f9fa;
  border: 1px solid var(--jkptg-border-default, #d3d7dc);
  border-radius: var(--jkptg-radius-lg, 8px);
  font-size: var(--jkptg-font-size-md, 16px);
  font-weight: var(--jkptg-font-weight-regular, 400);
  line-height: 24px;
  text-align: center;
  overflow-wrap: anywhere;
}

.jkptg-act-list__source {
  margin: 20px 0 0;
  padding-block: 10px;
  color: var(--jkptg-color-navy-900, #00122a);
  font-size: var(--jkptg-font-size-sm, 14px);
  font-weight: var(--jkptg-font-weight-semibold, 600);
  line-height: 24px;
  text-align: right;
}

.jkptg-act-list__empty {
  margin-top: 28px;
  padding: 24px;
  color: var(--jkptg-text-secondary, #3d3d3d);
  background: var(--jkptg-surface-secondary, #f3f5f8);
  border-radius: var(--jkptg-radius-xl, 12px);
  text-align: center;
}

@media (max-width: 991.98px) {
  .jkptg-act-list {
    margin-block: 48px 96px;
  }

  .jkptg-act-list__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .jkptg-act-list__nav ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 8px;
  }
}

@media (max-width: 767.98px) {
  .jkptg-act-list {
    margin-block: 32px 72px;
  }

  .jkptg-act-list__layout {
    gap: 24px;
  }

  .jkptg-act-list__nav ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .jkptg-act-list__article {
    margin-top: 20px;
  }

  .jkptg-act-list__article > h2,
  .jkptg-act-list__body h2 {
    font-size: var(--jkptg-font-size-lg, 18px);
    line-height: 26px;
  }

  .jkptg-act-list__body,
  .jkptg-act-list__body .field,
  .jkptg-act-list__body .field__item {
    font-size: var(--jkptg-font-size-sm, 14px);
    line-height: 21px;
  }

  .jkptg-act-list__body table tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jkptg-act-list__body table td,
  .jkptg-act-list__body table th {
    min-height: 76px;
    padding: 10px;
    font-size: var(--jkptg-font-size-sm, 14px);
    line-height: 20px;
  }
}

@media (max-width: 479.98px) {
  .jkptg-act-list__sidebar {
    padding: 14px 10px;
  }

  .jkptg-act-list__nav {
    margin-top: 20px;
  }

  .jkptg-act-list__body table tr {
    grid-template-columns: minmax(0, 1fr);
  }

  .jkptg-act-list__source {
    text-align: left;
  }
}