/*
-----
GLOBAL STYLES
-----
*/

:root {
  /* colors */
  --color-accent-1: hsl(25, 100%, 50%);
  --color-accent-1-lighter: hsl(25, 100%, 97%);
  --color-accent-2: hsl(339, 67%, 38%);
  --color-accent-2-lighter: hsl(339, 67%, 97%);
  --color-accent-3-raw: 187, 54%, 70%;
  --color-accent-3: hsl(var(--color-accent-3-raw));
  --color-accent-3-lighter: hsl(187, 54%, 97%);
  --color-accent-3-darker: hsl(187, 100%, 28%);

  --color-dark-1: hsl(105, 4%, 22%);
  --color-dark-2: hsl(267, 57%, 15%);

  --color-light-1: hsl(0, 0%, 100%);
  --color-light-2: hsl(216, 29%, 97%);

  /* color uses */
  --color-text-1: var(--color-dark-1);
  --color-text-2: var(--color-dark-2);

  --color-text-inverse-1: var(--color-light-1);

  --color-bg-1: var(--color-light-1);
  --color-bg-2: var(--color-light-2);

  --color-positive: var(--color-accent-3);
  --color-negative: var(--color-accent-2);
  --color-warning: var(--color-accent-1);

  --color-namespace: var(--color-accent-2);
  --color-namespace-light: var(--color-accent-2-lighter);
  --color-deployment: var(--color-accent-1);
  --color-deployment-light: var(--color-accent-1-lighter);
  --color-container: var(--color-accent-3);
  --color-container-light: var(--color-accent-3-lighter);

  /* gaps/spacing */
  --gap--2: 5px;
  --gap--1: var(--step--1);
  --gap-0: var(--step-0);
  --gap-1: var(--step-1);
  --gap-2: var(--step-2);
  --gap-3: var(--step-3);
  --gap-4: var(--step-4);
  --gap-5: var(--step-5);

  /* misc */
  --box-shadow-dimensions: 0 1.25rem 3.4375rem 0;
  --scale: 1.1;
  --transition: all 250ms ease;
}

html {
  background: var(--color-bg-1);
  color: var(--color-text-1);
  font-family: "Muli", Helvetica, Arial, sans-serif;
  font-size: var(--step-0);
}

/*
-----
ELEMENTS
-----
*/

a,
a:link,
a:visited {
  color: var(--color-text-2);
  text-decoration: none;
}

a:focus,
a:hover,
a:active {
  text-decoration: underline;
}

a.--link-1,
a.--link-1:link,
a.--link-1:visited {
  color: var(--color-accent-2);
  text-decoration: underline;
}

a.--link-1:focus,
a.--link-1:hover,
a.--link-1:active {
  text-decoration: none;
}

abbr {
  text-decoration-color: var(--color-accent-3);
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

blockquote > cite {
  display: block;
  margin-top: var(--gap-0);
  text-align: right;
}

details > summary > h2,
details > summary > h3,
details > summary > h4,
details > summary > h5,
details > summary > h6 {
  display: inline-block;
}

details > summary.--hideMarker {
  cursor: pointer;
  list-style: none;
}

details > summary.--hideMarker::-webkit-details-marker {
  display: none;
}

details:not([open]) > summary.--hideMarker i.--showWhenOpen {
  display: none;
}

details[open] > summary.--hideMarker i.--showWhenClosed {
  display: none;
}

dd {
  margin: var(--gap-0);
}

dl {
  display: grid;
  grid-gap: var(--gap-3);
  grid-template-columns: repeat(auto-fill, 45ch);
  justify-content: space-evenly;
}

dl > .dl-entry {
  border: 2px solid var(--color-accent-2);
}

dl a {
  color: var(--color-accent-3);
}

dt {
  background: var(--color-accent-2);
  color: var(--color-text-inverse-1);
  font-weight: bold;
  padding: var(--gap--2);
}

dt::after {
  content: ":";
}

footer {
  font-size: var(--step--1);
  text-align: center;
}

form[role="search"] {
  display: flex;
}

form[role="search"] input[type="search"] {
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-accent-3);
  color: var(--color-text-1);
  flex: 1 1 30ch;
  margin: 0;
  padding: 0;
}

form[role="search"] button[type="submit"] {
  background: none;
  border: 1px solid var(--color-accent-3);
  border-radius: var(--gap--2);
  margin: 0 0 0 var(--gap-0);
}

form[role="search"] button[type="submit"]:active {
  color: inherit;
  transform: scale(var(--scale));
}

@media (prefers-reduced-motion) {
  form[role="search"] button[type="submit"]:active {
    background: var(--color-accent-3);
    transform: none;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.1;
}

h1 {
  color: var(--color-text-2);
  font-size: var(--step-5);
}

h2 {
  font-size: var(--step-4);
}

h3 {
  font-size: var(--step-3);
}

h4 {
  font-size: var(--step-2);
}

h5 {
  font-size: var(--step-1);
}

h6 {
  font-size: var(--step-0);
}

i.error {
  color: var(--color-negative);
}

i.success {
  color: var(--color-positive);
}

i.warning {
  color: var(--color-warning);
}

img.logo {
  margin-right: auto;
  margin-left: auto;
  max-height: var(--step-5);
  object-fit: contain;
}

img.logo--secondary {
  max-height: var(--step-3);
}

main {
  padding: var(--gap-5) var(--gap-0);
}

nav > ul {
  padding: 0;
}

nav > ul li + li {
  margin-top: var(--gap-1);
}

pre {
  border: 1px solid var(--color-accent-3);
  border-radius: var(--gap-0);
}

ul[role="list"] {
  /*
    role="list" is required in the html for accessibility
    when removing list styles,
    see https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
    */
  list-style: none;
}

ul.navList li {
  border-bottom: 1px solid var(--color-accent-3);
  padding-bottom: var(--gap-0);
}

td {
  padding: 0;
}

th {
  padding: 0;
}

th[scope="row"] {
  padding-right: var(--cellspacing);
  text-align: right;
}

table {
  --cellspacing: var(--gap--1);

  border-spacing: var(--cellspacing);
}

/*
-----
COMPONENTS
-----
*/

.badge {
  background: var(--color-accent-2);
  color: var(--color-bg-1);
  display: block;
  font-size: var(--step--1);
  font-weight: normal;
  margin-bottom: var(--gap--2);
  max-width: max-content;
  padding: var(--gap--2);
  text-transform: uppercase;
}

.buttonLink {
  border: 1px solid var(--color-accent-3);
  border-radius: 999em;
  display: block;
  padding: var(--gap-0);
  text-decoration: none;
  transition: var(--transition);
}

.buttonLink.--withIcon {
  align-items: center;
  display: grid;
  grid-gap: var(--gap--1);
  grid-template-columns: 1fr auto;
}

.buttonLink:focus,
.buttonLink:hover,
.buttonLink:active {
  background: var(--color-dark-2);
  box-shadow: var(--box-shadow-dimensions) hsla(var(--color-accent-3-raw), 0.3);
  color: var(--color-light-2);
  text-decoration: none;
  transform: scale(var(--scale));
}

@media (prefers-reduced-motion) {
  .buttonLink:focus,
  .buttonLink:hover,
  .buttonLink:active {
    transform: none;
  }
}

.callout {
  background: var(--color-bg-2);
  border: 1px solid var(--color-accent-3);
  border-radius: var(--gap-0);
  padding: var(--gap-0);
}

.compTable td:first-of-type,
.compTable th[scope="col"]:first-of-type {
  text-align: right;
}

.detailBadge {
  margin-left: calc(-1 * var(--gap-detail, var(--gap-0)));
}

.detailBadge.--namespace {
  background: var(--color-namespace);
  color: var(--color-bg-1);
}

.detailBadge.--deployment {
  background: var(--color-deployment);
  color: var(--color-text-2);
}

.detailBadge.--container {
  background: var(--color-container);
  color: var(--color-text-1);
}

.detailInfo:not(.--qos) {
  --gap-detail: var(--gap-0);

  border: 2px solid;
  margin-top: var(--gap-0);
  padding: 0 var(--gap-0) var(--gap-0) var(--gap-0);
}

.detailInfo.--container {
  background: var(--color-accent-3-lighter);
  border-color: var(--color-accent-3);
}

.detailInfo.--deployment {
  background: var(--color-accent-1-lighter);
  border-color: var(--color-accent-1);
}

.detailInfo.--empty {
  padding-top: var(--gap-0);
  border: none;
}

.detailInfo.--namespace {
  background: var(--color-accent-2-lighter);
  border-color: var(--color-accent-2);
}

.detailInfo.--qos {
  margin: var(--gap-0);
}

.detailLink.--namespace {
  color: var(--color-accent-2);
}

.layoutLineup {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.layoutSidebar {
  display: flex;
  flex-wrap: wrap;
}

.layoutSidebar .layoutSidebar__main {
  display: flex;
  flex-basis: 0;
  flex-direction: column;
  flex-grow: 999;
  min-width: 75%;
}

.layoutSidebar .layoutSidebar__main > :not(footer) {
  flex-grow: 999;
}

.layoutSidebar .layoutSidebar__sidebar {
  background: var(--color-bg-2);
  flex-grow: 1;
  padding: var(--gap-5) var(--gap-0);
}

.layoutSidebar .layoutSidebar__sidebar > *:last-child {
  margin-bottom: var(--gap-0);
}

.layoutSidebar .layoutSidebar__sidebar > * + * {
  margin-top: var(--gap-3);
}

.linkIcon {
  align-items: center;
  display: grid;
  grid-gap: var(--gap-0);
  grid-template-columns: auto 1fr;
}

.logoSupport {
  text-align: center;
  white-space: nowrap;
}

.namespaceList {
  font-size: var(--step-1);
  display: grid;
  grid-gap: var(--gap-3);
  grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
  margin: var(--gap-1);
}

.summary {
  border-top: 2px solid var(--color-accent-2);
  color: var(--color-accent-2);
  margin-top: var(--gap-0);
  margin-bottom: var(--gap-0);
  padding-top: var(--gap-0);
}

.banner img {
  max-width: 750px;
  height: auto;
  object-fit: contain;
}

/*
-----
UTILITIES
-----
*/

.indent {
  margin-left: var(--gap-1);
}

.verticalRhythm > * {
  --gap-rhythm: var(--gap-0);
}

.verticalRhythm.--rhythm-3 > * {
  --gap-rhythm: var(--gap-3);
}

.verticalRhythm > *:not(summary):not(.visually-hidden) + * {
  margin-top: max(var(--gap-rhythm), 1em);
}

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}