/* Wider tables in Scroll Sites articles */
main table {
  width: 100%;
  max-width: 100%;
}

/* Let cell text wrap instead of forcing horizontal overflow */
main table th,
main table td {
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Give the colour mode picker more breathing room */
.header-pickers mode-picker auto-width-select.picker {
  --auto-width-select: 72px !important;
  min-width: 72px;
}

/* Native select spacing */
.header-pickers mode-picker select[name="color-mode"] {
  padding-inline: 0.75rem 1.75rem;
  padding-block: 0.35rem;
  min-height: 2rem;
  line-height: 1.4;
}

/* Decorative image above article TOC */
nav.toc.sticky::before {
  content: "";
  display: block;

  inline-size: 100%;
  block-size: 110px;

  margin-block-end: 1rem;

  background-image: url("https://austlinkwebresources.s3.ap-southeast-2.amazonaws.com/www.jiwatraining.com.au/mainsite/images/JiwaTrainingNeedHelp_4.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  border-radius: 8px;
}

/* Jiwa Training Centre homepage: balanced category tiles */
html[data-confluence-content-id="3007218889"] ul.items.tiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

/* Stack homepage tiles on smaller screens */
@media (max-width: 768px) {
  html[data-confluence-content-id="3007218889"] ul.items.tiles {
    grid-template-columns: 1fr;
  }
}

/* Jiwa Training Centre homepage: interactive category tiles */
html[data-confluence-content-id="3007218889"] ul.items.tiles .tile {
  position: relative;
  height: 100%;
  border-top: 4px solid #149fc4;
  border-radius: 10px;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

html[data-confluence-content-id="3007218889"] ul.items.tiles .tile:hover {
  transform: translateY(-3px);
  border-top-color: #36b878;
  box-shadow: 0 10px 24px rgba(9, 34, 64, 0.14);
}

/* Extend the title link over the whole tile */
html[data-confluence-content-id="3007218889"] ul.items.tiles .tile-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Accessible keyboard focus */
html[data-confluence-content-id="3007218889"] ul.items.tiles .tile:focus-within {
  outline: 3px solid rgba(20, 159, 196, 0.45);
  outline-offset: 3px;
}

/* Featured Solutions: three-column layout */
html[data-confluence-content-id="3007218889"]
section.pinned ul.items.tiles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* Individual featured-solution colours */
html[data-confluence-content-id="3007218889"]
section.pinned li:nth-child(1) {
  --feature-accent: #168fc4;
}

html[data-confluence-content-id="3007218889"]
section.pinned li:nth-child(2) {
  --feature-accent: #00a99d;
}

html[data-confluence-content-id="3007218889"]
section.pinned li:nth-child(3) {
  --feature-accent: #4fae68;
}

/* Soft colour treatment */
html[data-confluence-content-id="3007218889"]
section.pinned .tile {
  background-color: color-mix(
    in srgb,
    var(--K15t-surface-raised) 88%,
    var(--feature-accent) 12%
  );

  border-color: color-mix(
    in srgb,
    var(--K15t-border-neutral-strong) 55%,
    var(--feature-accent) 45%
  );

  border-top-color: var(--feature-accent);
}

/* Slightly strengthen the colour on hover */
html[data-confluence-content-id="3007218889"]
section.pinned .tile:hover {
  background-color: color-mix(
    in srgb,
    var(--K15t-surface-raised) 80%,
    var(--feature-accent) 20%
  );

  border-top-color: var(--feature-accent);
}

/* Stack featured cards on smaller screens */
@media (max-width: 900px) {
  html[data-confluence-content-id="3007218889"]
  section.pinned ul.items.tiles {
    grid-template-columns: 1fr;
  }
}