/* Align the default Antora UI with tortugaaudio.com's Kadence theme palette/font. */

body {
  font-family: Cabin, Roboto, sans-serif;
  background: #FFFFFF;
  color: rgba(26, 32, 44, .78);
}

.navbar {
  background: #ffffff;
  color: rgba(26, 32, 44, .78);
  box-shadow: 0 1px 0 #EDF2F7;
}

.navbar-brand {
  justify-content: center;
}

.navbar-item,
.navbar-brand .navbar-item {
  color: rgba(26, 32, 44, .78);
}

.navbar-item:hover,
.navbar-item.is-active {
  color: #2B6CB0;
}

/* Experiment: dark on the left edge, fading to pure white on the right so
   the sidebar visually dissolves into the page body. This needs to scale to
   the nav's OWN width (no background-attachment: fixed here), otherwise the
   fade would be relative to the full viewport and never reach white by the
   sidebar's much narrower right edge. */
.nav {
  background-image: linear-gradient(90deg, #BFBFBF, #FFFFFF);
  color: #000000;
}

.toolbar {
  background-image: linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 20%, #BFBFBF 100%);
  background-attachment: fixed;
  color: #000000;
  text-shadow: 0 0 3px rgba(255, 255, 255, .8);
}

.toolbar .edit-this-page a {
  color: #000000;
}

.doc a {
  color: #2B6CB0;
}

.doc a:hover {
  color: #215387;
}

.is-current-page > .nav-link,
.is-current-page > .nav-text {
  color: #000000;
}

/* The vendor UI draws the accordion triangle as a background-image SVG
   (img/caret.svg, fixed light gray #c1c1c1) rather than a CSS-colorable
   shape, so it disappeared against the sidebar's own light gray/white
   gradient. A CSS mask would let background-color control it directly, but
   mask-image's external SVG load is blocked under file:// (opening the
   built HTML straight from disk instead of through a server), which fails
   silently -- CSS masking treats a failed mask as "fully hidden" rather
   than falling back to the unmasked box, so the icon vanished completely.
   Recoloring the actual asset (ui/supplemental/img/caret.svg overlays the
   vendor's copy) sidesteps that: it's the same background-image mechanism
   the vendor UI already used successfully, just with the fill/stroke
   swapped from #c1c1c1 to #2B6CB0. No CSS override needed here -- update
   ui/supplemental/img/caret.svg directly if the color needs to change
   again. */

.doc .ulist.product-list ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.doc .ulist.product-list li {
  margin: .75rem 0;
}

.doc .ulist.product-list li p {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0;
}

.doc .ulist.product-list .image.thumb {
  line-height: 0;
}

.doc .ulist.product-list .image.thumb img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  background: #F7FAFC;
  border-radius: .25rem;
}

.doc .image.reviewer-logo {
  line-height: 0;
}

.doc .image.reviewer-logo img {
  height: 24px;
  width: auto;
  vertical-align: middle;
}

.text-center {
  text-align: center;
}

/* Centers the block as a whole while left-aligning its lines internally,
   so lines of differing length still start at the same left edge. */
.stack-align > .content {
  display: inline-block;
  text-align: left;
}

.spacer {
  display: block;
  margin: 0;
  height: 2rem;
}

/* Matches the specificity of the vendor UI's ".doc .sect1+.sect1" rule
   (which otherwise wins and silently overrides a plain ".spacer-top" class). */
.doc .sect1.spacer-top {
  margin-top: 5rem;
}

/* Constrains figures by HEIGHT instead of width, so images with very
   different aspect ratios all occupy the same vertical space and their
   Figure captions land on the same horizontal line underneath. object-fit
   scales each image to fit without distorting or cropping it. */
.uniform-figures .imageblock img {
  height: 200px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Two separate indents stack here: the .ulist wrapper div's own padding
   (controlled below), AND the vendor UI's baked-in default of 2rem on every
   <ul> in the doc body (".doc ul { padding: 0 0 0 2rem }"). Zeroing only the
   div still leaves that 2rem/36px vendor default on the <ul> itself, which
   is the "large default indent" that wouldn't go away. Both are overridden
   here so the total indent is fully under control, starting from zero. */
.doc .indent-list {
  padding-left: 0;
}

.doc .indent-list ul {
  padding-left: 1.1em;
}

/* Layout tables throughout this page (hero, preamp-controller comparison,
   figure rows, passive/active columns, articles grid) all share the same
   "frame=none, grid=none" AsciiDoc attributes, which Asciidoctor renders as
   these exact classes on every such table. Targeting them here gives every
   multi-column layout table on the site a consistent horizontal gutter
   between columns, instead of relying on each column's own content to
   provide incidental left/right spacing (which is what was happening here
   before the indent-list padding was zeroed out). */
.doc table.tableblock.frame-none.grid-none td {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* [horizontal] description lists (Antora's vendor CSS never sets a column
   width for these) otherwise rely on the browser's auto table layout, which
   squashes short labels into a narrow column and lets the description text
   claim the rest. table-layout: fixed plus explicit widths on the label/
   description cells gives every such list on the site a consistent,
   readable ratio regardless of label length. */
.doc .hdlist table {
  table-layout: fixed;
  width: 100%;
}

.doc td.hdlist1 {
  width: 25%;
}

.doc td.hdlist2 {
  width: 75%;
}

/* Antora's vendor CSS makes plain (non-[horizontal]) description-list terms
   italic by default (".doc .dlist dt { font-style: italic }"), but leaves
   [horizontal] list terms (rendered as table cells, not <dt>) unaffected --
   an inconsistency baked into the default theme, not something introduced
   here. Normalizing so every description-list term looks the same
   regardless of which syntax produced it. */
.doc .dlist dt {
  font-style: normal;
}

/* Multi-paragraph descriptions under a Label:: term only stay indented if
   every paragraph uses explicit "+" list continuation -- without it,
   subsequent paragraphs fall outside the <dd> entirely and render flush,
   producing an inconsistent look within the same list. Removing the indent
   makes the visual result the same either way, and also matches [horizontal]
   lists, whose label/description columns aren't indented relative to the
   term either. */
.doc .dlist dd {
  margin-left: 0;
}

/* On the homepage, the mobile-only TOC that the base UI injects at the top
   of the article (aside.toc.embedded) is dropped -- the page reads better
   without it there. The desktop sidebar TOC is untouched. */
@media screen and (max-width: 1023.5px) {
  body.home aside.toc.embedded {
    display: none;
  }
}

.footer {
  text-align: center;
}

/* Foxy's minicart snippet (data-fc-id="minicart") only toggles visibility on
   whatever element it's attached to -- it doesn't reposition it. Rendered as
   the last child of the toolbar (see toolbar.hbs), a real flex row present
   on every page below the header, so it's a normal flex participant instead
   of being pulled out with position:absolute -- margin-left:auto pushes it
   to the row's right edge without any pixel-guessing, and it can't collide
   with sibling content (the previous header placement did, repeatedly,
   across different screen widths). The singular/plural spans are kept (not
   removed) since Foxy's own script may reference them, just hidden -- the
   icon + count badge conveys the same info without the "N item(s)" text. */
.cart-link {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: 0 1rem;
  color: inherit;
}

.cart-link:hover {
  color: #2B6CB0;
}

.cart-count {
  font-weight: 600;
  font-size: .8rem;
  background: #2B6CB0;
  color: #ffffff;
  border-radius: 999px;
  min-width: 1.1rem;
  height: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .3rem;
  line-height: 1;
}

.cart-label-hidden {
  display: none;
}

/* Reusable call-to-action button for Foxy "Add to Cart" links on product
   pages -- applied inline via the AsciiDoc link macro's role attribute,
   e.g. https://...[Add to Cart,role=btn], or via class="btn" on a raw
   <button> in an HTML passthrough form. Distinct from the unrelated
   vendor ".button" class, which styles AsciiDoc's btn:[] keycap macro.
   The button.btn rules re-declare font/border/cursor because a <button>
   carries its own browser UA-stylesheet defaults that an <a> doesn't. */
.doc a.btn,
.doc button.btn {
  display: inline-block;
  margin-top: .5rem;
  padding: .6rem 1.5rem;
  background: #2B6CB0;
  color: #ffffff;
  border: none;
  border-radius: .25rem;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.doc a.btn:hover,
.doc button.btn:hover {
  background: #215387;
  color: #ffffff;
}

/* Web3Forms' contact-form snippet (contact.adoc) ships with no styling of
   its own -- the vendor Antora UI has zero rules for form/input/textarea/
   button, since docs sites don't normally have forms, so without this the
   fields render as bare, unlabeled browser-default boxes. */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  max-width: 28rem;
  margin-top: 1.5rem;
}

.contact-form label {
  font-weight: 600;
  margin-top: .75rem;
}

.contact-form input,
.contact-form textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: .5rem .65rem;
  border: 1px solid #CBD5E0;
  border-radius: .25rem;
  color: rgba(26, 32, 44, .78);
}

.contact-form textarea {
  min-height: 8rem;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #2B6CB0;
}

.contact-form button {
  align-self: flex-start;
  margin-top: 1rem;
  padding: .55rem 1.5rem;
  background: #2B6CB0;
  color: #ffffff;
  border: none;
  border-radius: .25rem;
  font-size: 1rem;
  cursor: pointer;
}

.contact-form button:hover {
  background: #215387;
}

.contact-form button:disabled {
  background: #A0AEC0;
  cursor: default;
}

.contact-form-result {
  margin-top: .75rem;
  font-weight: 600;
}

.contact-form-result.is-success {
  color: #2F855A;
}

.contact-form-result.is-error {
  color: #C53030;
}