/* Regular */
@font-face {
  font-family: "JetBrainsMono";
  font-style: normal;
  font-weight: 400; /* regular weight */
  src: url("../fonts/jetbrainsmono/JetBrainsMono-Light.woff2") format("woff2");
  font-display: swap;
}

/* Italic */
@font-face {
  font-family: "JetBrainsMono";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/jetbrainsmono/JetBrainsMono-Italic.woff2") format("woff2");
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: "JetBrainsMono";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/jetbrainsmono/JetBrainsMono-SemiBold.woff2")
    format("woff2");
  font-display: swap;
}

/* Bold Italic */
@font-face {
  font-family: "JetBrainsMono";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/jetbrainsmono/JetBrainsMono-BoldItalic.woff2")
    format("woff2");
  font-display: swap;
}

:root {
  /* webfonts */
  font-family: var(--font-family);
  font-feature-settings: "liga" on, "calt" on;

  /* fallback to slightly thinner font on browsers without variable 'wght' support */
  font-weight: 350;

  /* base rem = 16px by default, left as percentage for screen readers */
  font-size: 100%;

  /* MARK: Variables
  */
  --font-family: "Inter var", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;
  --color-brand: 56.6% 0.194 147.7;
  --color-brand-300: 0.84 0.0699 157.51;
  --color-brand-200: 0.91 0.0406 157.72;
  --color-brand-100: 0.98 0.0107 158.85;
  --color-background: 1 0 0;
  --color-foreground: 0 0 0;
  --color-shadow: 0.86 0 0;
  --color-inline_codeblock-border: 0.85 0 0;
  --color-inline_codeblock-background: 0.98 0 0;
  --color-codeblock-border: 0.63 0 0;
  --color-codeblock-shadow: 0.92 0 0;
  --color-codeblock-background: 1 0 0;
  --color-codeblock-highlight: 0.99 0.0479 105.97;
  --color-footer: 0.23 0 0;
  --color-footer-text: 0.91 0 0;
  --color-product-title: 0.64 0 0;
  --color-tabs-inactive-border: 0 0 0 / 20%;
  --color-callout-warning: 0.65 0.188 24;
  --color-callout-warning-shadow: 0.65 0.188 24 / 20%;
  --color-callout-caution: 0.8 0.1613 71.21;
  --color-callout-caution-shadow: 0.8 0.1613 71.21 / 20%;
  --color-callout-important: 0.36 0 0;
  --color-callout-important-shadow: 0.23 0 0 / 7.06%;
  --color-divider: 0.85 0 0;

  /* vars for the primary grid setup */
  --grid-sidebar: 24rem;
  --grid-sidebar-gutter: 3rem;
  --grid-content: minmax(34rem, 50rem);
  --grid-content-mobile: minmax(20rem, 50rem);
  --grid-side-callout: minmax(18rem, 26rem);
  --grid-column-gutter: 3.5rem;

  --code-copy-icon-height: 1rem;
  --code-copy-icon-width: 1rem;
  --breadcrumb-max-height: 54px;
  --sidebar-margin: 1.5rem;
  --sidebar-line-box-side-length: 8px;
  --sidebar-line-box-top: 6px;
  --sidebar-line-box-left: 12px;
  --sidebar-width: 22rem;
  --sidebar-line-width: 11.5px;
  --sidebar-mobile-top-displacement: 5rem;
  --side-gutter-width: 20rem;
  --table-top-bottom-spacing: 1rem;
  --table-row-space-between: 1.5rem;
  --table-min-column-spacing-narrow: 1.5rem;
  --table-min-column-spacing-wide: 0.75rem;
  --table-header-bottom-spacing: 1rem;
  --table-line-height: 1px;
  --codeblock-comment-diff: 2rem;
  --codeblock-comment-space-between: 10px;
  --codeblock-horizontal-line-length: 2rem;
  --codeblock-horizontal-line-overflow: 0.25rem;
  --codeblock-border-thickness: 1px;
  --codeblock-code-section-padding-left: 1rem;
  --codeblock-line-box-side-length: 4px;
  --overflow-gutter-extension: 1rem;

  --flow-gap: 1rem;
}

/* MARK: Reset
*/
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

@supports (font-variation-settings: normal) {
  :root {
    --font-family: InterVariable, system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
      "Helvetica Neue", sans-serif;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .breadcrumb {
    font-variation-settings: "wght" 500;
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
.breadcrumb {
  font-weight: 500;
}

html {
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  scroll-margin-top: 1.5rem;
}

/* MARK: Header
*/
p {
  font-weight: 350;
}

ul,
ol {
  padding: 0;
  margin: 0.5rem 0 0.5rem 1rem;
}

ul li,
ol li {
  margin: 0.5rem 0 0.5rem 0;
}

ul ul,
ul ol,
ol ul,
ol ol {
  padding: 0 0 0 1rem;
}

ul li:last-child,
ol li:last-child {
  margin-bottom: 0;
}

/* MARK: Layout
*/
header {
  margin: 2rem 2rem 0 2rem;

  .header-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    > ul {
      padding: 0;
    }

    @media (max-width: 700px) {
      a,
      ul {
        width: 50%;
      }

      li {
        float: right;
      }

      div {
        order: 3;
        width: 100%;

        #search-standalone-header {
          margin-top: 1rem;
        }
      }
    }
  }

  ul {
    list-style: none;
  }

  .dropdown-content {
    position: absolute;
    background-color: oklch(var(--color-background));
    border: oklch(var(--color-foreground)) 1px solid;
    box-shadow: 3px 3px 0px oklch(var(--color-shadow));
    z-index: 1;
    right: 0;
    display: none;
    width: 400px;
    max-width: 80vw;
    margin-right: 2rem;
  }

  .dropdown-content ul {
    padding: 20px 10px;
  }

  .nav-item-explore {
    margin: 0;
  }

  .navbar-button {
    padding: 0.5rem 0.5rem;
    border: none;
    border-radius: 0.25rem;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }

  .remove-bottom-radius {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

main {
  flex: 1;
  min-width: 20rem;
  margin: 0 2rem 2rem 1rem;
}

/* MARK: Footer
*/
footer {
  background-color: oklch(var(--color-footer));
  padding: 2.5rem;
  margin-top: auto;
}

.footer-layout {
  display: grid;
  grid-template-columns: 1fr;
  font-size: 0.875rem;
  gap: 24px;
}

.footer-f5-trademark {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}

.footer-f5-trademark p {
  margin: 0;
  color: oklch(var(--color-footer-text));
}

.footer-useful-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.footer-useful-links a {
  color: oklch(var(--color-footer-text));
  text-decoration: none;
}

@media (min-width: 814px) {
  .footer-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: 0.875rem;
  }

  .footer-useful-links {
    gap: 4px;
  }
}

/* breadcrumbs */
nav {
  display: flex;
  align-items: center;

  .logo {
    height: 3rem;
    width: 3rem;
  }

  .links a {
    margin: 0 0 0 1rem;
  }
}

/* MARK: Homepage
*/

.homepage {
  margin: 0 2rem;

  .homepage-heading {
    grid-column: 1 / -1;
    font-size: 1.5rem;
    font-weight: 500;
    margin: 2rem 0rem;
  }

  .homepage-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 500px));
    gap: 1.5rem;
    padding: 1rem;
    justify-content: center;
    max-width: 98rem;
    margin: 0 auto;

    .homepage-heading {
      grid-column: 1 / -1;
      margin: 1rem 0rem;
    }
  }

  a {
    color: oklch(var(--color-foreground));
    text-decoration-color: oklch(var(--color-background));

    &:hover {
      text-decoration-color: oklch(var(--color-background));
    }
  }

  /* Styling for items */
  .homepage-item {
    background: oklch(var(--color-background));
    border: 1px solid oklch(var(--color-codeblock-border));
    box-shadow: 3px 3px 0px oklch(var(--color-shadow));
    height: 7rem;
    padding: 1rem 2rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;

    &:hover {
      box-shadow: 3px 3px 0px oklch(var(--color-brand) / 0.4);
      text-decoration-color: oklch(var(--color-background));
      border: 1px solid oklch(var(--color-brand) / 0.8);
    }
  }

  .homepage-item-heading {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .homepage-item-logo {
    margin-right: 0.5rem;
  }

  .homepage-item-logo img {
    height: 40px;
    width: auto;
    display: block;
  }

  .homepage-item-text {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    /* Hack to make text line-up with logos */
    transform: translateY(-6px);
  }

  .homepage-item-content {
    line-height: 1.5rem;
  }
}

/* MARK: Main content
*/
.docs-container * {
  box-sizing: border-box;
}

.content-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  z-index: 1;
}

.docs-container {
  min-width: 100%;
}

.sidebar-layout {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  min-height: 74vh;

  .sidebar__mobile__toggle {
    display: none;
  }
}

.sidebar-layout::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background-color: oklch(var(--color-divider));
}

#searchbox {
  width: 24rem;
  display: none;
  grid-column: 1;
}

.breadcrumb-layout {
  grid-column: 1 / -1;
}

/* The default main-layout */
.main-layout {
  display: grid;
  grid-template-columns: 1fr;
}

.sidebar-container {
  display: flex;
  flex-direction: column;
}

.text-content {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: var(--grid-content-mobile);
  column-gap: var(--grid-column-gutter);
  margin-top: 2rem;
  grid-auto-rows: max-content;
  row-gap: var(--flow-gap);
  justify-content: center;
}

.text-content > :not(.wide) {
  grid-column: 1 / -1;
}

.text-content .wide {
  grid-column: 1 / -1;
}

.text-content table {
  width: 100%;
}

@media (max-width: 88rem) {
  .base-layout {
    display: grid;
    grid-template-rows: repeat(2, auto);
    column-gap: var(--grid-column-gutter);
  }

  .content-layout .breadcrumb-layout {
    position: sticky;
    top: 0;
    z-index: 3;
  }

  body:has(.sidebar__mobile-open) {
    /* Disable scrolling in main content + hide footer if the sidebar is visible */
    overflow-y: hidden;

    .sidebar-layout {
      position: absolute;
      height: 100%;
    }

    footer {
      display: none;
    }

    .sidebar-layout .sidebar__mobile__toggle {
      display: flex;
      align-items: center;
      position: sticky;
      top: 1rem;
      margin-top: 2rem;
      margin-left: 2rem;
      margin-right: 2rem;
      padding: 0.5rem;
      color: white;
      background-color: oklch(var(--color-brand));
    }
  }

  .sidebar__mobile__toggle {
    background-color: transparent;
    border: none;

    .lucide {
      margin-right: 1rem;
    }
  }

  .main-layout {
    /* Mobile support for sidebar */
    display: flex;
    flex-direction: column;
    position: relative;

    .sidebar-layout {
      min-height: fit-content;
      background: white;
      z-index: 999;
      width: calc(100% + 4rem);
      margin-left: -2rem;

      &::before {
        display: none;
      }

      nav {
        width: 100%;
        display: none;
        top: var(--sidebar-mobile-top-displacement);
        max-height: calc(100vh - var(--sidebar-mobile-top-displacement));
        padding: 0 2rem;

        .sidebar__container {
          width: 100%;
        }
      }
    }

    .content-layout {
      .breadcrumb-layout .sidebar__mobile__toggle {
        display: inline;
        padding: 0;
      }
    }
  }

  main {
    margin: 0 2rem 2rem 2rem;
  }
}

@media (min-width: 88em) {
  .base-layout {
    --grid-column-gutter: 4.5rem;
    display: grid;
    grid-template-rows: repeat(2, auto);
    column-gap: var(--grid-column-gutter);
    max-width: 100%;
  }

  .text-content {
    grid-template-columns: var(--grid-content) var(--grid-side-callout);
    grid-template-rows: 70px max-content;
    column-gap: var(--grid-column-gutter);
  }

  .text-content > :not(.wide) {
    grid-column: 1;
  }

  .main-layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    column-gap: var(--grid-sidebar-gutter);
  }

  .content-layout {
    display: grid;
    grid-template-columns: 1fr minmax(
        auto,
        calc(
          var(--grid-content) +
          var(--grid-side-callout) +
          var(--grid-column-gutter)
        )
      ) 1fr;
    column-gap: var(--grid-column-gutter);
  }

  .content-layout .side-gutter {
    grid-column-start: 2;
  }

  .navbar atomic-search-interface {
    margin: 0;
    display: block;
  }
}

.list-page {
  --flow-gap: .5rem;

  h2 {
    font-size: 1.5rem;
  }

  hr {
    margin: 1rem 0;
  }
}

/* Handles different flow-gap of list page  */
.list-page.text-content {
  grid-template-rows: calc(70px + var(--flow-gap)) max-content;
}

.api {
  margin: 0 0 1rem 1rem;
  .row {
    display: grid !important;
  }

  .breadcrumb-layout {
    width: auto;
    margin-top: 2rem;
  }

  .nginx-docs-api-container {
    grid-column: 1 / -1;
    max-width: 100% !important;
    margin-top: 2rem;
  }

  .content-layout {
    grid-template-columns: 1fr var(--side-gutter-width);
  }
}

/* MARK: Coveo
*/
#search-v2 {
  display: inline-block !important;
  width: 95vw;
  grid-column: 1 / -1;
  --atomic-primary: oklch(var(--color-brand));
  --atomic-primary-ring: oklch(var(--color-brand));
  --atomic-primary-light: oklch(var(--color-brand));
  --atomic-border-radius-lg: 0;
  --atomic-border-radius-md: 0;
  --atomic-border-radius: 0;
  --atomic-font-family: var(--font-family);
}

atomic-search-interface {
  height: fit-content;
  margin-bottom: 2rem;
  margin-top: 2rem;
}

.header-search-box {
  &::part(wrapper) {
    border-radius: 0;
    border-color: oklch(var(--color-foreground));
  }

  &::part(suggestions-wrapper) {
    border-radius: 0;
    border-color: oklch(var(--color-foreground));
    width: calc(100% + 2px);
    margin-left: -1px;
  }

  &::part(submit-button-wrapper) {
    --atomic-primary: var(--atomic-neutral-dark);
  }
}

atomic-refine-toggle {
  display: none;
}

@media (max-width: 1024px) {
  atomic-refine-toggle {
    display: block;
  }
}

atomic-query-summary {
  /* Show duration */
  &::part(duration) {
    display: inline-block !important;
  }
}

atomic-search-layout {
  grid-template-areas:
    "atomic-section-search"
    "atomic-section-status"
    "atomic-section-facets"
    "atomic-section-main";

  grid-template-columns: minmax(50%, 100%) !important;

  @media (min-width: 1024px) {
    grid-template-areas:
      "atomic-section-search atomic-section-status"
      "atomic-section-facets atomic-section-main  "
      "atomic-section-facets .                    " !important;

    grid-template-columns: minmax(17rem, 24rem) minmax(50%, 100%) !important;
    column-gap: calc(1.5rem + 2rem) !important;
  }
}

atomic-search-layout atomic-layout-section[section="status"] {
  /* Override Coveo's width to be full */
  max-width: 100%;
  display: block;
  width: 100%;
}

atomic-search-layout atomic-layout-section[section="search"] {
  /* Override Coveo's width to be full */
  width: 100% !important;
  max-width: 100% !important;
}

.atomic-full-summary-and-sort {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 1rem;
  justify-content: space-between;

  @media (min-width: 480px) {
    flex-direction: row;
    align-items: center;
  }

  atomic-sort-dropdown::part(label) {
    margin-left: 0;
  }
}

#atomic-search-box-xqtsq-popup {
  z-index: 9999;
}

body:not(:has(.main-layout)) header atomic-search-interface {
  /* Show on landing pages */
  display: block;
}

@media (max-width: 88rem) {
  /* Show on pages with sidebar if it is hidden */
  body:has(.sidebar-layout) header atomic-search-interface {
    display: block;
  }
}

/* MARK: Product Selector
*/

.product-selector {
  display: none;
  position: absolute;
  top: 0;
  min-width: 80%;
  margin-top: 8.375rem;
  margin-left: 44rem;
  padding: 1rem 1.5rem;
  background-color: oklch(var(--color-background));
  border: oklch(var(--color-foreground)) 1px solid;
  box-shadow: 3px 3px 0px oklch(var(--color-shadow));
}

button:has(~ .product-selector[style*="block"])
  > .product-selector-button-icon {
  transition: transform 0.1s ease-in-out;
  transform: rotate(90deg);
}

button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
  transition: transform 0.1s ease-in-out;
  transform: rotate(0deg);
}
.product-selector p {
  font-size: 0.75rem;
  color: oklch(var(--color-product-title));
  display: inline;
}

.product-selector ul {
  padding-left: 0;
  margin-top: 0;
  list-style-type: none;
}

.product-selector a {
  text-decoration: none;
  color: oklch(var(--color-foreground));
  font-size: 1rem;
}

/* MARK: Sidebar
*/

nav.sidebar.sidebar__mobile-open {
  display: block;
}

.sidebar {
  --color-foreground: oklch(0 0 0 / 0.75);

  display: flex;
  flex-direction: column;
  width: 22rem;
  max-height: 100vh;
  position: sticky;
  top: 0;
  margin-top: 0rem;
  padding-top: 1.5rem;
  align-items: start;
  overflow-y: auto;
  overflow-x: hidden;
  color: var(--color-foreground);

  .sidebar__container,
  .sidebar__container button,
  .sidebar__container ul,
  .sidebar__container li {
    margin: 0;
    padding: 0;
    list-style: none;
    font-weight: 400;
    font-size: 0.875rem;
  }

  .sidebar__container {
    width: var(--sidebar-width);
  }

  .sidebar__container button {
    padding: 0.25rem 0.75rem;
    justify-content: space-between;
  }

  .sidebar__content {
    padding: 0.5rem 0 0.4rem 0;
    margin-right: 0.25rem;
  }

  .sidebar__ul {
    padding-left: 0;
  }

  .sidebar__children {
    padding-left: 1rem;
  }

  .sidebar__toggle {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    padding: 0.25rem 0.5rem;
    border-radius: 5px 0 0 5px;
    font-weight: 500;
    color: var(--color-foreground);

    &:hover {
      background-color: oklch(var(--color-brand) / 0.06);
      color: oklch(var(--color-brand) / 1);
    }
  }

  .sidebar__container button.sidebar__toggle--ancestor {
    font-weight: 600;
  }

  .sidebar__chevron {
    display: flex;
    align-items: flex-end;
  }

  .sidebar__chevron svg {
    stroke-width: 1.5;
    width: 1rem;
    height: 1rem;
  }

  .sidebar__chevron--open {
    transform: rotate(90deg);
  }

  .sidebar__toggle:not(:has(.sidebar__chevron)) {
    padding-left: 2rem;
  }

  .sidebar__link {
    display: block;
    padding: 0.25rem 0.75rem;
    margin: 2px 0 2px 0;
    border-radius: 5px 0 0 5px;
    color: oklch(0 0 0 / 0.75);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;

    &:hover {
      background-color: oklch(var(--color-brand) / 0.08);
      color: oklch(var(--color-brand));
    }
  }

  .sidebar__link--current,
  .sidebar__toggle.sidebar__link--current {
    color: oklch(var(--color-brand) / 1);
    background-color: oklch(var(--color-brand) / 0.1);
    font-weight: 600;
    display: flex;
    justify-self: stretch;
    width: auto;
    box-sizing: border-box;
  }

  .sidebar__toc {
    #TableOfContents {
      padding: 0 0.75rem 0 0;
      margin: 0.5rem 0.25rem 0.5rem 0.8rem;
      border-left: 1px solid var(--color-divider);
      color: oklch(0 0 0 / 0.75);

      &[hidden] {
        display: none;
      }

      a {
        text-decoration: none;
      }

      &:empty {
        display: none;
      }

      li {
        padding: 0.25rem 0.75rem;
      }

      /* handles bug in hugo where non-rendered headers cause empty li */
      /* https://github.com/gohugoio/hugo/issues/7128 */
      li:empty {
        display: none;
      }

      li:first-child {
        padding-top: 0;
      }

      ul ul li:first-child {
        padding-top: 0.75rem;
      }

      li:last-child {
        padding-bottom: 0;
      }
    }
  }
}

/* Details/Summary */
details summary {
  color: oklch(var(--color-brand));
  transition: text-decoration-color 0.15s ease-in-out;
  text-decoration: underline;
  text-decoration-color: oklch(var(--color-brand) / 0.3);

  & ~ * {
    margin-top: 1rem;
  }
}

details summary:hover {
  text-decoration-color: oklch(var(--color-brand) / 0.8);
  cursor: pointer;
}

/* MARK: Content
*/

p {
  margin: 0;
  line-height: 1.5rem;
}

.breadcrumb-layout {
  position: relative;
  background-color: white;
  width: calc(100% + 4rem);
  margin-left: -2rem;
  padding: 1rem 2rem;

  .sidebar__mobile__toggle {
    display: none;
  }
}

.breadcrumb {
  color: oklch(var(--color-foreground));
  text-decoration: none;
  font-size: 0.875rem;
  margin: 0;
}

.breadcrumb .active {
  font-weight: 600;
}

.breadcrumb ol {
  list-style: none;
  padding: 0;
  display: block;

  > * {
    display: inline;
    line-height: 25px;
  }
}

.breadcrumb li:after {
  padding: 0 0.25rem;
  content: "\E1D7";
}

a {
  color: oklch(var(--color-brand));
  text-decoration-color: oklch(var(--color-brand) / 0.3);
  transition: text-decoration-color 0.15s ease-in-out;
}

a:hover {
  text-decoration-color: oklch(var(--color-brand) / 0.8);
}

h1 {
  font-size: 2rem;
  margin: 0 0 1rem 0;
}

h2 {
  font-size: 1.5rem;
  margin: 1rem 0 .75rem 0;
}

h2:target,
h3:target,
h4:target,
h5:target,
h6:target {
  color: oklch(var(--color-brand));

  .headerlink::before {
    display: block !important;
  }
}

h2:has(a),
h3:has(a),
h4:has(a),
h5:has(a),
h6:has(a) {
  width: calc(100% + 1rem);
  margin-left: -1rem;
  padding-left: 1rem;
  position: relative;
}

h2:has(a):hover {
  .headerlink::before {
    display: block;
  }
}

h3:has(a):hover {
  .headerlink::before {
    display: block;
  }
}

h4:has(a):hover {
  .headerlink::before {
    display: block;
  }
}

h5:has(a):hover {
  .headerlink::before {
    display: block;
  }
}

h6:has(a):hover {
  .headerlink::before {
    display: block;
  }
}

.headerlink {
  text-decoration: none;

  color: oklch(var(--color-foreground));
}

.headerlink::before {
  position: absolute;
  content: "#";
  margin-left: -1.5rem;
  opacity: 20%;
  display: none;
  bottom: 0;
  color: oklch(var(--color-brand));
}

/* Landing page cards */
.text-content .card-layout {
  grid-column: 1;

  .card-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    strong {
      font-weight: 500;
    }

    /* Hide all the cards past 3 if it is a featured card section */
    &.featured-section {
      .card-section-content.card-grid
        > *:nth-child(n + 4 of div.card-container) {
        display: none;
      }
    }
  }
}

/* Optional grid layout */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
  gap: 1.5rem;

  .card-container {
    border: 1px solid oklch(var(--color-codeblock-border));
    box-shadow: 3px 3px 0px oklch(var(--color-shadow));
    padding: 1rem;

    &.featured-card {
      /* If there is a featured card, only the featured card should be full length */
      grid-column: 1 / -1;

      /* If there is a featured card AND two cards, the last one should be full length */
      ~ .card-container:nth-child(2n):last-child {
        grid-column: 1 / -1;
      }
    }
  }

  /* If there is no featured card, last card that is the 3rd one should be full width */
  &:not(:has(.featured-card)) *:nth-child(n + 3 of div.card-container) {
    grid-column: 1 / -1;
  }
}

.card-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;

  .card-header {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;

    .card-brand-icon {
      height: 20px;
      width: auto;
    }

    h2 {
      padding: 0;
      margin: 0;
      font-size: 1rem;
    }
  }
}

.list-header-container {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: start;

  img {
    width: auto;
    height: 3.5rem;
  }
}

/* MARK: Tables
*/
table {
  position: relative;
  z-index: 0;

  td {
    padding: var(--table-row-space-between) 0;
  }

  th {
    font-weight: bold;
    text-align: start;
    vertical-align: top;
    padding-bottom: var(--table-header-bottom-spacing);
  }

  tr {
    position: relative;
  }

  tr::after {
    content: "";
    position: absolute;
    border-bottom: var(--table-line-height) solid oklch(var(--color-divider));
    bottom: 0;
    left: calc(-1 * var(--overflow-gutter-extension));
    width: calc(100% + (2 * var(--overflow-gutter-extension)));
  }
}

.narrow table {
  min-width: 100%;
  margin: var(--table-top-bottom-spacing) 0;
  border-collapse: collapse;
}

.wide table {
  margin: var(--table-top-bottom-spacing) 0;
  border-collapse: collapse;
}

.narrow table th,
.narrow table td {
  padding-left: var(--table-min-column-spacing-narrow);
}

.wide table th,
.wide table td {
  padding-left: var(--table-min-column-spacing-wide);
}

table th:first-child,
table td:first-child {
  padding-left: 0;
}

table hr {
  color: oklch(var(--color-divider));
  border: none;
  border-bottom: var(--table-line-height) solid oklch(var(--color-divider));
}

/* MARK: Callouts
*/
blockquote {
  border: 1px solid oklch(var(--color-foreground));
  padding: 1rem;
  margin: 0 -1rem;

  /* solid 3px drop shadow */
  box-shadow: 3px 3px 0px oklch(var(--color-shadow));

  &:has(.code-block) .code-block:not(:has(.single-line)) {
    /* Removes negative margins from multi-line codeblocks */
    margin: 0;
  }

  .callout-content {
    margin: 0;
  }
}

blockquote.note {
  position: relative;
  z-index: 0;
}

blockquote.note:before {
  content: attr(data-title);
  font-size: 1rem;
  font-weight: 600;
  font-variation-settings: "wght" 600;

  position: absolute;
  margin: -1.625rem 0 0 -0.25rem;
  padding: 0 0.25rem;
  display: block;
  background-color: oklch(var(--color-background));
  z-index: 999;
}

blockquote p:first-child {
  margin: 0 auto 1rem auto;
}

blockquote p:last-child {
  margin: 0 auto;
}

/* Maintain the split column for as long as possible */
@media (min-width: 67rem) {
  blockquote.side-callout {
    grid-column: 2 !important;
    align-self: start;
  }
}

blockquote > div > * {
  margin: 0 0 var(--flow-gap) 0;
}

blockquote ol,
blockquote ul {
  margin: 0 0 1rem 1rem;
}

li > blockquote {
  margin: var(--flow-gap) 0 0 0;
}

blockquote.call-out {
  --padding: 0.75rem;
  padding: var(--padding);

  .call-out-type {
    display: block;
    font-weight: 500;
    margin: calc(-1 * var(--padding)) calc(-1 * var(--padding)) var(--padding)
      calc(-1 * var(--padding));

    padding: 0.25rem var(--padding);
  }

  br {
    display: none;
  }
}

blockquote.caution {
  --color-shadow: var(--color-callout-caution-shadow);
  border: 1px solid oklch(var(--color-callout-caution));

  .call-out-type {
    background-color: oklch(var(--color-callout-caution-shadow));
    border-bottom: 1px solid oklch(var(--color-callout-caution));
  }
  .call-out-type .feather {
    color: oklch(var(--color-callout-caution));
  }
}

blockquote.warning {
  --color-shadow: var(--color-callout-warning-shadow);
  border: 1px solid oklch(var(--color-callout-warning));

  .call-out-type {
    background-color: oklch(var(--color-callout-warning-shadow));
    border-bottom: 1px solid oklch(var(--color-callout-warning));
  }
  .call-out-type .feather {
    color: oklch(var(--color-callout-warning));
  }
}

blockquote.important {
  --color-shadow: var(--color-callout-important-shadow);
  border: 1px solid oklch(var(--color-callout-important));

  .call-out-type {
    background-color: oklch(var(--color-callout-important-shadow));
    border-bottom: 1px solid oklch(var(--color-callout-important));
  }
}

li:has(> div > blockquote) {
  blockquote {
    margin: 0;
  }

  div:has(blockquote) {
    margin-bottom: 0.5rem;
  }
}

/* MARK: Tabs
*/
.tabs-container {
  /* border-bottom: 1px solid black; */
  white-space: nowrap;
  position: relative;

  /* Move to gutter */
  width: calc(100% + 2rem);
  margin-left: -1rem;

  &::after {
    content: "";
    position: absolute;
    display: block;
    border-bottom: 1px solid oklch(var(--color-foreground));
    bottom: 0;
    right: 0;
    width: 2rem;
  }
}

.nav-tabs {
  overflow-x: scroll;
  overflow-y: hidden;
  height: 100%;
  scrollbar-width: none;

  list-style: none;
  display: flex;
  justify-content: start;
  margin: 0;
  padding: 0 2rem;
  position: relative;

  > :not(:last-child) {
    border-right: none;
  }

  &::before {
    /* Horizontal line before tab blocks */
    content: "";
    position: absolute;
    display: block;
    border-bottom: 1px solid oklch(var(--color-foreground));
    bottom: 0;
    left: 0;
    width: 2rem;
  }

  &::after {
    /* Horizontal line after tab blocks */
    content: "";
    position: relative;
    display: block;
    border-bottom: 1px solid oklch(var(--color-foreground));
    bottom: 0;
    left: 0;
    width: 100%;
  }

  --scrollbar-width: 1px;
  --mask-height: 32px;
  --mask-image-content: linear-gradient(
    to right,
    transparent,
    oklch(var(--color-foreground)) var(--mask-height),
    oklch(var(--color-foreground)) calc(100% - var(--mask-height)),
    transparent
  );

  --mask-size-content: 100% calc(100% - var(--scrollbar-width));

  --mask-image-scrollbar: linear-gradient(
    oklch(var(--color-foreground)),
    oklch(var(--color-foreground))
  );
  --mask-size-scrollbar: 100% var(--scrollbar-width);
  mask-image: var(--mask-image-content), var(--mask-image-scrollbar);
  mask-size: var(--mask-size-content), var(--mask-size-scrollbar);
  mask-position: 0 0, 0 100%;
  mask-repeat: no-repeat, no-repeat;
}

.nav-item {
  border: 1px solid oklch(var(--color-tabs-inactive-border));
  border-bottom: 1px solid oklch(var(--color-foreground));
  padding: 10px;
  margin-bottom: 0;

  a {
    text-decoration: none;
  }

  .active {
    color: oklch(var(--color-foreground));
  }
}

.nav-item:has(.active) {
  /* Change the border colors of li that is has a child with a class "active" */
  border-top: 1px solid oklch(var(--color-foreground));
  border-left: 1px solid oklch(var(--color-foreground));
  border-bottom: none;

  /* Change the border of next child */
  + li {
    border-left: 1px solid oklch(var(--color-foreground));
  }
}

.nav-item:last-child:has(.active) {
  /* If on last tab, change the right border since it does not have a next sibling */
  border-right: 1px solid oklch(var(--color-foreground));
}

.tab-content {
  border-bottom: 1px solid oklch(var(--color-foreground));
  padding-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;

  /* Move to gutter */
  width: calc(100% + 2rem);
  margin-left: -1rem;

  .tab-pane {
    display: none;
  }

  .active {
    display: block !important;
  }
}

.tab-content > div > * {
  margin: 0 0 var(--flow-gap) 0;
}

/* MARK: Codeblocks
*/
code {
  font-family: "JetBrainsMono", monospace;
}

/* Inline Codeblock */
code:not(pre code) {
  border: solid 1px oklch(var(--color-inline_codeblock-border));
  border-radius: 0.25rem;
  padding: 0 0.25rem;
  background-color: oklch(var(--color-inline_codeblock-background));
  font-size: 0.875rem;
}

/* Inline Code (link) */
a code:not(pre code) {
  border: solid 1px oklch(var(--color-brand) / 0.3);
  border-bottom: solid 2px oklch(var(--color-brand) / 0.3);

  /* transition: border 0.15s ease-in-out; */
}

a code:not(pre code):hover {
  border: solid 1px oklch(var(--color-brand) / 0.8);
  border-bottom: solid 2px oklch(var(--color-brand) / 0.8);
}

a:has(code:not(pre code)) {
  text-decoration: none;
}

/* Regular Codeblock */
.highlight {
  padding: 0 1rem 0 1rem;
  position: relative;
  flex: 1;

  code .cl {
    position: relative;
  }
}

.code-block {
  position: relative;

  tr::after {
    display: none;
  }

  .line .w {
    /* White-space */
    text-decoration: none !important;
  }
}

.code-block .code-header:not(:has(.code-type)) {
  /* Remove margin for codeblocks without a type */
  margin-top: -1.5rem;
}

.highlight-v2 {
  border: 1px solid oklch(var(--color-codeblock-border));
  overflow-x: scroll;
  scrollbar-width: none;
  line-height: 150%;
  padding: 1rem 0;
  /* margin: 1.5rem 0 0.25rem 0; */
}

.highlight code {
  font-size: 0.875rem;
}

.highlight-v2.single-line {
  display: flex;
  align-items: center;
  border: 1px solid oklch(var(--color-codeblock-border));
  overflow-x: scroll;
  line-height: 1;
}

.code-header {
  display: flex;
  justify-content: space-between;
}

.code-header.no-lang {
  justify-content: right;
}

.code-type {
  display: inline-block;
  height: 1.5rem;
  border-top: 1px solid oklch(var(--color-codeblock-border));
  border-left: 1px solid oklch(var(--color-codeblock-border));
  border-right: 1px solid oklch(var(--color-codeblock-border));
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  z-index: 999;
  background-color: oklch(var(--color-bg-light));
  margin: 0 0 -1px 0;
}

.code-container {
  box-shadow: 2px 2px 0px oklch(var(--color-codeblock-shadow));
}

ol .code-block,
ul .code-block {
  margin: 0.75rem 0;
}

.code-container:hover {
  .code-copy-button {
    display: block;
  }
}

.code-copy-button {
  background-color: oklch(var(--color-background));
  border: 1px solid oklch(var(--color-foreground));
  padding: 4px 6px;
  cursor: pointer;
  font-size: 12px;
  color: oklch(var(--color-foreground));
  display: none;
  position: absolute;
  margin-top: 8px;
  right: 1rem;
  z-index: 1;
  --color-codeblock-shadow: 0 0 0;
  box-shadow: 0px 2px 0px oklch(var(--color-codeblock-shadow) / 0.15);
}

.code-copy-button:hover {
  box-shadow: 0px 2px 0px oklch(var(--color-brand) / 0.3);
}

.code-copy-button:focus {
  outline: none;
  box-shadow: 0px 2px 0px oklch(var(--color-brand) / 0.8);
}

.next-prev-icon {
  display: flex;
  list-style-type: none;
  padding: 0;
}

.highlight code .hl {
  width: fit-content;
  min-width: 100%;
  background-color: oklch(var(--color-codeblock-highlight));
}

/* MARK: Images
*/
figure {
  margin: 0;
}

img,
.figure-bitmap {
  margin-bottom: 0.625rem;
  display: inline-block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

/* Logo */
.f5-logo-footer {
  height: 32px;
  width: 32px;
}

.nginx-logo-footer {
  height: 72px;
  width: 156px;
}

/* HR Lines */
hr {
  /* Move to gutter */
  width: calc(100% + 2rem);
  margin-left: -1rem;

  border: 1px solid oklch(var(--color-divider));
}

.feather {
  width: 1.8ch;
  height: 1.8ch;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: square;
  vertical-align: sub;
  margin: 0;
}

.lucide {
  width: 1.5rem;
  height: 1.5rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: square;
  vertical-align: sub;
  margin: 0;
}

/* MARK: Accessibility
*/

.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  background-color: oklch(var(--color-background));
  color: oklch(var(--color-foreground));
  padding: 1rem 1rem;
  font-size: 1rem;
  border: 2px solid oklch(var(--color-foreground));
  z-index: 1000;
  text-decoration: none;
  border-radius: 0;
  box-shadow: 3px 3px 0px oklch(var(--color-shadow));
  opacity: 0;
  pointer-events: none;
}

.skip-link:focus {
  opacity: 1;
  pointer-events: auto;
}

/* FILTHY HACKS BEGIN */

/* Override logo with black text version */
.navbar-brand {
  height: 3.5rem;
  display: block;

  /* non-tiling background logo */
  background-image: url(/images/icons/NGINX-Docs-horiz-black-type.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  width: 200px;

  img {
    display: none;
  }
}

/* FILTHY HACKS END */
/* Hidden temporarily */

.code-copy {
  display: none;
}

@media print {
  .qualtrics-feedback {
    visibility: hidden;
  }
}