/*
 * GearBox blog single article dark treatment.
 * Scope: single post template only (.gb-article-page).
 */
.gb-article-page {
  overflow-x: clip;
  background: #0b0b0b;
}

.gb-article-page .gb-article-content-section {
  background: #0b0b0b;
  color: #f5f3ea;
}

.gb-article-page .gb-article-layout,
.gb-article-page .gb-article-body {
  min-width: 0;
}

/* Article navigator */
.gb-article-page .gb-article-console {
  color: #f5f3ea;
  border-color: #333;
  background: #151515;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .28);
}

.gb-article-page .gb-article-console .gb-kicker {
  color: #ffde59;
}

.gb-article-page .gb-article-console h2 {
  color: #f5f3ea;
}

.gb-article-page .gb-article-console nav ol {
  gap: 4px;
}

.gb-article-page .gb-article-console nav a {
  border-left-color: #333;
  color: #beb9aa;
  background: transparent;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.gb-article-page .gb-article-console nav a:hover,
.gb-article-page .gb-article-console nav a:focus-visible {
  color: #ffde59;
  border-left-color: #ffde59;
  background: #222;
}

.gb-article-page .gb-article-console nav a.is-active,
.gb-article-page .gb-article-console nav a[aria-current="location"] {
  color: #f5f3ea;
  border-left-color: #ffde59;
  background: #222;
  font-weight: 700;
}

.gb-article-page .gb-article-console nav a:focus-visible {
  outline: 2px solid #ffde59;
  outline-offset: 2px;
}

.gb-article-page .gb-article-console nav p {
  color: #beb9aa;
}

.gb-article-page .gb-article-console__data {
  border-top-color: #333;
}

.gb-article-page .gb-article-console__data small {
  color: #beb9aa;
}

.gb-article-page .gb-article-console__data strong {
  color: #ffde59;
}

/* Reading body */
.gb-article-page .gb-article-body {
  color: #f5f3ea;
  font-size: 17px;
  line-height: 2;
  overflow-wrap: anywhere;
  word-break: normal;
}

.gb-article-page .gb-article-body > :first-child {
  margin-top: 0;
}

.gb-article-page .gb-article-body > :last-child {
  margin-bottom: 0;
}

.gb-article-page .gb-article-body p,
.gb-article-page .gb-article-body li,
.gb-article-page .gb-article-body dd,
.gb-article-page .gb-article-body dt {
  color: #f5f3ea;
}

.gb-article-page .gb-article-body p {
  margin: 0 0 1.65em;
}

.gb-article-page .gb-article-body h2,
.gb-article-page .gb-article-body h3,
.gb-article-page .gb-article-body h4,
.gb-article-page .gb-article-body h5,
.gb-article-page .gb-article-body h6 {
  color: #f5f3ea;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.gb-article-page .gb-article-body h2,
.gb-article-page .gb-article-body h3 {
  scroll-margin-top: 130px;
}

.gb-article-page .gb-article-body h2 {
  position: relative;
  margin: 2.35em 0 .85em;
  padding: 0 0 .62em;
  border-bottom: 1px solid #333;
  font-size: clamp(29px, 3.3vw, 38px);
  line-height: 1.45;
  letter-spacing: -.025em;
}

.gb-article-page .gb-article-body h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: min(96px, 28%);
  height: 2px;
  background: #ffde59;
  box-shadow: 0 0 16px rgba(255, 222, 89, .24);
}

.gb-article-page .gb-article-body h3 {
  margin: 2em 0 .75em;
  padding-left: 16px;
  border-left: 3px solid #ffde59;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.55;
}

.gb-article-page .gb-article-body h4 {
  margin: 1.8em 0 .65em;
  color: #ffde59;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.6;
}

.gb-article-page .gb-article-body h5,
.gb-article-page .gb-article-body h6 {
  margin: 1.6em 0 .55em;
  font-size: 1em;
  line-height: 1.7;
  letter-spacing: .04em;
}

.gb-article-page .gb-article-body ul,
.gb-article-page .gb-article-body ol {
  margin: 1.2em 0 1.8em;
  padding-left: 1.55em;
}

.gb-article-page .gb-article-body li + li {
  margin-top: .45em;
}

.gb-article-page .gb-article-body li::marker {
  color: #ffde59;
  font-weight: 700;
}

.gb-article-page .gb-article-body a {
  color: #ffde59;
  text-decoration-color: rgba(255, 222, 89, .62);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color .2s ease, text-decoration-color .2s ease;
}

.gb-article-page .gb-article-body a:hover {
  color: #ffe986;
  text-decoration-color: currentColor;
}

.gb-article-page .gb-article-body a:focus-visible,
.gb-article-page .gb-article-body button:focus-visible,
.gb-article-page .gb-article-body input:focus-visible,
.gb-article-page .gb-article-body select:focus-visible,
.gb-article-page .gb-article-body textarea:focus-visible,
.gb-article-page .gb-article-table-scroll:focus-visible,
.gb-article-page .gb-article-body .wp-block-table:focus-visible {
  outline: 2px solid #ffde59;
  outline-offset: 3px;
}

.gb-article-page .gb-article-body strong,
.gb-article-page .gb-article-body b {
  color: #fffaf0;
}

.gb-article-page .gb-article-body small,
.gb-article-page .gb-article-body .has-small-font-size,
.gb-article-page .gb-article-body .wp-caption-text,
.gb-article-page .gb-article-body figcaption,
.gb-article-page .gb-article-body caption {
  color: #beb9aa;
}

.gb-article-page .gb-article-body mark {
  padding: .08em .22em;
  background: #ffde59;
  color: #0b0b0b;
}

.gb-article-page .gb-article-body hr,
.gb-article-page .gb-article-body .wp-block-separator {
  height: 1px;
  margin: 2.5em 0;
  border: 0;
  background: #333;
}

/* Quotes and highlighted panels */
.gb-article-page .gb-article-body blockquote,
.gb-article-page .gb-article-body .wp-block-quote,
.gb-article-page .gb-article-body .wp-block-pullquote {
  margin: 2em 0;
  padding: 24px 28px;
  border: 1px solid #333;
  border-left: 4px solid #ffde59;
  background: #151515;
  color: #f5f3ea;
}

.gb-article-page .gb-article-body .wp-block-pullquote {
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  text-align: left;
}

.gb-article-page .gb-article-body blockquote p:last-child,
.gb-article-page .gb-article-body .wp-block-quote p:last-child,
.gb-article-page .gb-article-body .wp-block-pullquote p:last-child {
  margin-bottom: 0;
}

.gb-article-page .gb-article-body blockquote cite,
.gb-article-page .gb-article-body .wp-block-quote cite,
.gb-article-page .gb-article-body .wp-block-pullquote cite {
  color: #beb9aa;
  font-size: .85em;
  font-style: normal;
}

.gb-article-page .gb-article-body :where(.wp-block-group, .wp-block-columns, .wp-block-media-text, .wp-block-cover).has-background {
  border: 1px solid #333;
  background-color: #151515 !important;
  color: #f5f3ea !important;
}

.gb-article-page .gb-article-body .wp-block-group.has-background,
.gb-article-page .gb-article-body .wp-block-columns.has-background,
.gb-article-page .gb-article-body .wp-block-media-text.has-background {
  padding: clamp(20px, 4vw, 34px);
}

.gb-article-page .gb-article-body .wp-block-cover {
  min-height: 260px;
}

.gb-article-page .gb-article-body .wp-block-cover::before {
  opacity: .58;
}

.gb-article-page .gb-article-body .wp-block-cover__inner-container,
.gb-article-page .gb-article-body .wp-block-cover__inner-container p {
  color: #f5f3ea;
}

/* Tables: Gutenberg figures and JS-wrapped legacy tables */
.gb-article-page .gb-article-body .wp-block-table,
.gb-article-page .gb-article-table-scroll {
  max-width: 100%;
  margin: 2em 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #333;
  background: #151515;
  scrollbar-color: #ffde59 #222;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.gb-article-page .gb-article-body .wp-block-table::-webkit-scrollbar,
.gb-article-page .gb-article-table-scroll::-webkit-scrollbar {
  height: 9px;
}

.gb-article-page .gb-article-body .wp-block-table::-webkit-scrollbar-track,
.gb-article-page .gb-article-table-scroll::-webkit-scrollbar-track {
  background: #222;
}

.gb-article-page .gb-article-body .wp-block-table::-webkit-scrollbar-thumb,
.gb-article-page .gb-article-table-scroll::-webkit-scrollbar-thumb {
  background: #ffde59;
  border: 2px solid #222;
}

.gb-article-page .gb-article-body table {
  width: 100%;
  min-width: 640px;
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
  background: #151515;
  color: #f5f3ea;
}

.gb-article-page .gb-article-body th,
.gb-article-page .gb-article-body td {
  padding: 14px 16px;
  border: 1px solid #333;
  color: #f5f3ea;
  text-align: left;
  vertical-align: top;
}

.gb-article-page .gb-article-body thead th,
.gb-article-page .gb-article-body tbody th,
.gb-article-page .gb-article-body tfoot th {
  background: #222;
  color: #ffde59;
  font-weight: 800;
}

.gb-article-page .gb-article-body tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, .018);
}

.gb-article-page .gb-article-body .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background: #1b1b1b;
}

.gb-article-page .gb-article-body .wp-block-table figcaption,
.gb-article-page .gb-article-table-scroll + .gb-article-table-caption,
.gb-article-page .gb-article-body table caption {
  padding: 10px 12px;
  color: #beb9aa;
  font-size: .82em;
  line-height: 1.7;
  text-align: left;
  caption-side: bottom;
}

/* Images, embeds and captions */
.gb-article-page .gb-article-body img,
.gb-article-page .gb-article-body video,
.gb-article-page .gb-article-body iframe {
  max-width: 100%;
}

.gb-article-page .gb-article-body img {
  height: auto;
  border-color: #333;
}

.gb-article-page .gb-article-body figure {
  max-width: 100%;
}

.gb-article-page .gb-article-body .wp-block-image,
.gb-article-page .gb-article-body .wp-block-gallery,
.gb-article-page .gb-article-body .wp-block-embed {
  margin-block: 2em;
}

.gb-article-page .gb-article-body .wp-block-image figcaption,
.gb-article-page .gb-article-body .wp-caption-text {
  margin-top: 10px;
  font-size: .82em;
  line-height: 1.75;
  text-align: center;
}

.gb-article-page .gb-article-body .alignwide,
.gb-article-page .gb-article-body .alignfull {
  max-width: 100%;
  margin-inline: 0;
}

/* Code */
.gb-article-page .gb-article-body code,
.gb-article-page .gb-article-body kbd,
.gb-article-page .gb-article-body samp {
  border: 1px solid #333;
  background: #222;
  color: #ffe986;
  font-family: var(--gb-mono);
  font-size: .88em;
}

.gb-article-page .gb-article-body code,
.gb-article-page .gb-article-body kbd,
.gb-article-page .gb-article-body samp {
  padding: .15em .35em;
}

.gb-article-page .gb-article-body pre,
.gb-article-page .gb-article-body .wp-block-code,
.gb-article-page .gb-article-body .wp-block-preformatted {
  max-width: 100%;
  margin: 2em 0;
  padding: 20px 22px;
  overflow: auto;
  border: 1px solid #333;
  background: #151515;
  color: #f5f3ea;
  line-height: 1.75;
  tab-size: 2;
}

.gb-article-page .gb-article-body pre code,
.gb-article-page .gb-article-body .wp-block-code code {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

/* Buttons and files */
.gb-article-page .gb-article-body .wp-block-button__link,
.gb-article-page .gb-article-body .wp-element-button,
.gb-article-page .gb-article-body input[type="submit"],
.gb-article-page .gb-article-body button:not([class*="toggle"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  max-width: 100%;
  padding: 11px 22px;
  border: 1px solid #ffde59;
  border-radius: 0;
  background: #ffde59 !important;
  color: #0b0b0b !important;
  font-weight: 800;
  line-height: 1.45;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.gb-article-page .gb-article-body .wp-block-button__link:hover,
.gb-article-page .gb-article-body .wp-element-button:hover,
.gb-article-page .gb-article-body input[type="submit"]:hover,
.gb-article-page .gb-article-body button:not([class*="toggle"]):hover {
  transform: translateY(-1px);
  box-shadow: 0 0 24px rgba(255, 222, 89, .22);
}

.gb-article-page .gb-article-body .wp-block-button.is-style-outline > .wp-block-button__link,
.gb-article-page .gb-article-body .wp-block-button__link.is-style-outline {
  background: transparent !important;
  color: #ffde59 !important;
}

.gb-article-page .gb-article-body .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.gb-article-page .gb-article-body .wp-block-button__link.is-style-outline:hover {
  background: #ffde59 !important;
  color: #0b0b0b !important;
}

.gb-article-page .gb-article-body .wp-block-file {
  padding: 16px 18px;
  border: 1px solid #333;
  background: #151515;
}

.gb-article-page .gb-article-body .wp-block-file__button {
  margin-left: 12px;
  background: #ffde59 !important;
  color: #0b0b0b !important;
}

/* Forms that may be rendered by legacy or membership content */
.gb-article-page .gb-article-body form {
  max-width: 100%;
}

.gb-article-page .gb-article-body label,
.gb-article-page .gb-article-body legend {
  color: #f5f3ea;
  font-weight: 700;
}

.gb-article-page .gb-article-body fieldset {
  margin: 1.5em 0;
  padding: 20px;
  border: 1px solid #333;
  background: #151515;
}

.gb-article-page .gb-article-body input[type="text"],
.gb-article-page .gb-article-body input[type="email"],
.gb-article-page .gb-article-body input[type="password"],
.gb-article-page .gb-article-body input[type="tel"],
.gb-article-page .gb-article-body input[type="url"],
.gb-article-page .gb-article-body input[type="number"],
.gb-article-page .gb-article-body input[type="search"],
.gb-article-page .gb-article-body select,
.gb-article-page .gb-article-body textarea {
  width: 100%;
  max-width: 100%;
  margin-top: 7px;
  padding: 13px 14px;
  border: 1px solid #444;
  border-radius: 0;
  background: #151515;
  color: #f5f3ea;
}

.gb-article-page .gb-article-body input::placeholder,
.gb-article-page .gb-article-body textarea::placeholder {
  color: #8e8a7f;
}

.gb-article-page .gb-article-body input[type="checkbox"],
.gb-article-page .gb-article-body input[type="radio"] {
  accent-color: #ffde59;
}

/* Details and miscellaneous Gutenberg blocks */
.gb-article-page .gb-article-body details,
.gb-article-page .gb-article-body .wp-block-details {
  margin: 1.5em 0;
  padding: 18px 20px;
  border: 1px solid #333;
  background: #151515;
}

.gb-article-page .gb-article-body summary {
  color: #f5f3ea;
  font-weight: 800;
  cursor: pointer;
}

.gb-article-page .gb-article-body summary::marker {
  color: #ffde59;
}

.gb-article-page .gb-article-body .wp-block-latest-posts,
.gb-article-page .gb-article-body .wp-block-categories,
.gb-article-page .gb-article-body .wp-block-archives {
  padding: 20px 24px;
  border: 1px solid #333;
  background: #151515;
}

/* Article-only footer guidance */
.gb-article-page .gb-article-share__inner {
  border-color: #333;
}

.gb-article-page .gb-article-share__inner > div > p:not(.gb-kicker) {
  color: #beb9aa;
}

@media (max-width: 760px) {
  .gb-article-page .gb-article-content-section {
    padding-top: 54px;
    padding-bottom: 64px;
  }

  .gb-article-page .gb-article-console {
    padding: 22px 18px;
  }

  .gb-article-page .gb-article-console nav a {
    min-height: 44px;
    padding: 11px 12px;
  }

  .gb-article-page .gb-article-body {
    font-size: 16px;
    line-height: 1.95;
  }

  .gb-article-page .gb-article-body h2 {
    font-size: clamp(26px, 8.6vw, 33px);
  }

  .gb-article-page .gb-article-body h3 {
    padding-left: 13px;
    font-size: clamp(21px, 6.8vw, 26px);
  }

  .gb-article-page .gb-article-body blockquote,
  .gb-article-page .gb-article-body .wp-block-quote,
  .gb-article-page .gb-article-body .wp-block-pullquote {
    padding: 20px 18px;
  }

  .gb-article-page .gb-article-body table {
    min-width: 560px;
  }

  .gb-article-page .gb-article-body .wp-block-button,
  .gb-article-page .gb-article-body .wp-block-button__link,
  .gb-article-page .gb-article-body .wp-element-button {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .gb-article-page .gb-article-body {
    font-size: 15.5px;
  }

  .gb-article-page .gb-article-body h2 {
    font-size: 25px;
  }

  .gb-article-page .gb-article-body h3 {
    font-size: 21px;
  }

  .gb-article-page .gb-article-console,
  .gb-article-page .gb-article-body blockquote,
  .gb-article-page .gb-article-body .wp-block-quote,
  .gb-article-page .gb-article-body .wp-block-pullquote,
  .gb-article-page .gb-article-body fieldset,
  .gb-article-page .gb-article-body details,
  .gb-article-page .gb-article-body .wp-block-details {
    padding-inline: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gb-article-page .gb-article-console nav a,
  .gb-article-page .gb-article-body a,
  .gb-article-page .gb-article-body button,
  .gb-article-page .gb-article-body .wp-element-button {
    transition: none;
  }
}
