/* ==========================================================================
   Duo User Guide - Custom styles for MkDocs Material theme
   Carried over from the legacy guide.css with Material theme adaptations
   ========================================================================== */

/* ---------- Last updated ---------- */

.md-typeset .last-updated {
  font-size: 0.7rem;
  color: #6b7780;
  margin-bottom: 0.5em;
}

/* ---------- Typography ---------- */

body, .md-typeset {
  font-size: 16px;
  line-height: 24px;
  color: #54626a;
}

.md-typeset a {
  color: #405665;
  text-decoration: underline;
}
.md-typeset a:hover,
.md-typeset a:focus {
  color: #54626a;
  text-decoration: none;
}

.md-typeset strong, .md-typeset b {
  font-weight: 600;
  color: black;
}

.md-typeset h1, .md-typeset h2, .md-typeset h3,
.md-typeset h4, .md-typeset h5, .md-typeset h6 {
  color: #363f44;
  font-weight: bold;
}

.md-typeset h1 {
  font-size: 1.75rem;
  line-height: 42px;
}
.md-typeset h2 {
  font-size: 1.5rem;
  line-height: 38px;
}
.md-typeset h3 {
  font-size: 1.375rem;
  line-height: 34px;
}
.md-typeset h4 {
  font-size: 1.125rem;
  line-height: 34px;
}

/* ---------- Lead paragraphs ---------- */

.md-typeset .lead {
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
}

/* ---------- Header bar ---------- */

.md-header {
  background-color: #162610;
  border-bottom: none;
  box-shadow: none;
}

.md-header__topic {
  color: #ffffff;
  font-weight: 600;
}

/* Header icons — white for visibility against dark background */
.md-header .md-icon,
.md-header .md-header__button {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Search icon — dark for visibility against white search box */
.md-header .md-search__icon,
.md-header .md-search__icon svg,
.md-search__icon[type="submit"],
.md-search__icon[type="reset"] {
  color: #333333 !important;
  fill: #333333 !important;
}

/* Search input — white background with dark text at all sizes */
.md-search__input {
  color: #333333 !important;
  background-color: #ffffff !important;
  border-radius: 4px;
}
.md-search__input::placeholder {
  color: rgba(0, 0, 0, 0.54) !important;
}

/* ---------- Page TOC in nav ---------- */

.md-nav--secondary .md-nav__link {
  font-size: 14px;
}

/* ---------- Navigation sidebar ---------- */

.md-nav__item .md-nav__link {
  font-size: 14px;
}

.md-nav__item .md-nav__link--active {
  font-weight: 600;
  color: black;
}

/* Section headers in nav */
.md-nav__item--nested > .md-nav__link {
  font-weight: 800;
  font-size: 16px;
  color: #005580;
  margin-left: -0.6rem;
}

/* ---------- Admonitions (info/warning/alert boxes) ---------- */

/* Note box: whitesmoke background, light gray left border */
.md-typeset .admonition.note,
.md-typeset details.note {
  background-color: #f5f5f5;
  border-left: 4px solid #d3d3d3;
  border-top: none;
  border-right: none;
  border-bottom: none;
  box-shadow: none;
  font-weight: 500;
  font-size: 16px;
  color: #000000;
}
.md-typeset .admonition.note .admonition-title {
  background-color: transparent;
  border: none;
  display: none;
}

/* Info box: teal background, blue left border */
.md-typeset .admonition.info,
.md-typeset details.info {
  background-color: #d5f5f5;
  border-left: 4px solid #bce8f1;
  border-top: none;
  border-right: none;
  border-bottom: none;
  box-shadow: none;
  font-weight: 500;
  font-size: 16px;
  color: #000000;
}
.md-typeset .admonition.info .admonition-title {
  background-color: transparent;
  border: none;
  display: none;
}

/* Warning box: orange background, orange left border */
.md-typeset .admonition.warning,
.md-typeset details.warning {
  background-color: #ffeadb;
  border-left: 4px solid #cc8604;
  border-top: none;
  border-right: none;
  border-bottom: none;
  box-shadow: none;
  font-size: 16px;
  font-weight: 500;
  color: #000000;
}
.md-typeset .admonition.warning .admonition-title {
  background-color: transparent;
  border: none;
  display: none;
}

/* Alert/danger box: pink background, red left border */
.md-typeset .admonition.danger,
.md-typeset details.danger {
  background-color: #ffe8f9;
  border-left: 4px solid #d66866;
  border-top: none;
  border-right: none;
  border-bottom: none;
  box-shadow: none;
  font-size: 16px;
  font-weight: 500;
  color: #000000;
}
.md-typeset .admonition.danger .admonition-title {
  background-color: transparent;
  border: none;
  display: none;
}

/* Preview box */
.md-typeset .admonition.tip,
.md-typeset details.tip {
  background-color: #f8f4ed;
  border-left: 4px solid #c09853;
  border-top: none;
  border-right: none;
  border-bottom: none;
  box-shadow: none;
  font-weight: 500;
  font-style: italic;
  color: #866830;
}
.md-typeset .admonition.tip .admonition-title {
  background-color: transparent;
  border: none;
  display: none;
}

/* ---------- Tables ---------- */

.md-typeset table:not([class]) {
  width: 100%;
  margin-bottom: 1.2em;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
}
.md-typeset table:not([class]) th {
  background-color: #F0F1F4;
  color: #405665;
  padding: 3px 9px;
}
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  vertical-align: middle;
  padding: 6px 9px;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
.md-typeset table:not([class]) th:last-child,
.md-typeset table:not([class]) td:last-child {
  border-right: none;
}
.md-typeset table:not([class]) tr:last-child td {
  border-bottom: none;
}
.md-typeset table:not([class]) td.centered {
  text-align: center;
}

/* ---------- Image captions ---------- */

.md-typeset figure.captioned {
  display: inline-block;
  margin: 10px 0 1em 0;
  padding: 0;
}

.md-typeset figure.captioned img {
  display: block;
}

.md-typeset figure.captioned figcaption {
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
  text-align: center;
  color: #54626a;
  margin-top: 2px;
}

/* ---------- Permalink icon via CSS (keeps ¶ out of LocalizeJS phrases) ---------- */

.md-typeset .headerlink::after {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  background: currentColor;
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>');
  mask-size: contain;
  -webkit-mask-size: contain;
  vertical-align: middle;
}

/* ---------- Images ---------- */

.md-typeset img {
  margin-top: 10px;
  margin-bottom: 12px;
  border: 1px solid #bbb;
  max-width: 100%;
  height: auto;
}
.md-typeset img.no-border,
.md-typeset img[src*="stars"] {
  border: none;
}

@media screen and (max-width: 76.25em) {
  .md-typeset img {
    max-width: 100% !important;
  }
  .md-typeset figure.captioned {
    max-width: 100%;
  }
}

/* ---------- Code blocks ---------- */

/* Inline code (single backtick) */
.md-typeset code {
  font-size: 16px !important;
  border: none;
  background-color: #f4f4f4;
  padding: 1px 4px;
  border-radius: 3px;
  color: #54626a;
}

/* Code blocks (triple backtick) */
.md-typeset pre code {
  font-size: 16px !important;
}

/* ---------- Append mode example box ---------- */

.md-typeset .append-mode-example {
  background-color: #F0F1F4;
  color: #405665;
  border: 1px solid #ddd;
  padding: 12px 0 10px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  font-family: "Roboto Mono", monospace;
  margin-bottom: 1.5em;
  border-radius: 5px;
}

/* ---------- Horizontal rule with stars ---------- */

.md-typeset hr {
  border: none;
  margin-bottom: 30px;
  padding-bottom: 30px;
  background: url("../static/images/stars.png") no-repeat center bottom;
  background-size: 36px 12px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .md-typeset hr {
    background-image: url("../static/images/stars2x.png");
  }
}

/* ---------- Blockquotes ---------- */

.md-typeset blockquote {
  padding: 0 1em;
  margin: 0 1em 1em 1em;
  border-left: 1px dotted #ccc;
  color: #595959;
}

/* ---------- Lists ---------- */

.md-typeset ul,
.md-typeset ol {
  padding-left: 20px;
  padding-right: 20px;
}
.md-typeset ul li,
.md-typeset ol li {
  margin-bottom: 1em;
}

/* ---------- Utility classes ---------- */

.md-typeset .flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.md-typeset .phone-platforms {
  text-align: center;
  margin-bottom: 1.3em;
  border: 1px solid #eee;
  padding: 10px;
}
.md-typeset .phone-platforms a {
  font-weight: 600;
}

.md-typeset .why-duo-mobile {
  text-align: left;
  float: right;
  margin: 0 0 20px 20px;
  background-color: white;
  border: none;
  border-left: 1px solid #ddd;
  padding: 10px 15px;
  color: #405665;
  width: 180px;
}

.md-typeset .note {
  color: #555;
}

/* ---------- Permalink icon ---------- */

.md-typeset .headerlink {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.3em;
  opacity: 0;
  transition: opacity 0.2s;
  border: none !important;
  text-decoration: none !important;
  font-size: 0.7em;
  color: #999;
}

.md-typeset h1:hover .headerlink,
.md-typeset h2:hover .headerlink,
.md-typeset h3:hover .headerlink,
.md-typeset h4:hover .headerlink,
.md-typeset h5:hover .headerlink,
.md-typeset h6:hover .headerlink {
  opacity: 0.6;
}

.md-typeset .headerlink:hover {
  opacity: 1 !important;
  color: #405665;
}

/* ---------- Footer ---------- */

.duo-footer .md-footer-meta {
  background-color: #162610;
  border-top: none;
}

.duo-footer__links {
  text-align: center;
  padding: 1em 0;
  font-size: 0.85rem;
  font-weight: 600;
}

.duo-footer__links {
  color: #cccccc;
}

.duo-footer__links a {
  color: #ffffff;
  text-decoration: underline;
}

.duo-footer__links a:hover {
  color: #cccccc;
  text-decoration: none;
}

.duo-footer__separator {
  margin: 0 0.75em;
  color: #a0a0a0;
}

/* ---------- Print button ---------- */

.print-button {
  float: right;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  color: #405665;
  background-color: #f0f1f4;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 0.5em;
}

.print-button:hover {
  background-color: #e2e3e6;
  color: #363f44;
}

/* ---------- Print styles ---------- */

@media print {
  /* Hide site chrome */
  .md-header,
  .md-sidebar,
  .md-footer,
  .duo-footer,
  .md-tabs,
  .md-search,
  .md-top,
  .print-button,
  .headerlink,
  .md-nav,
  .md-source {
    display: none !important;
  }

  /* Full-width content */
  .md-content {
    margin: 0 !important;
    max-width: 100% !important;
  }

  .md-grid {
    max-width: 100% !important;
    margin: 0 !important;
  }

  .md-main__inner {
    padding: 0 !important;
  }

  /* Typography */
  body, .md-typeset {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
  }

  .md-typeset h1 {
    font-size: 20pt;
    margin-top: 0;
  }

  .md-typeset h2 {
    font-size: 16pt;
    page-break-after: avoid;
  }

  .md-typeset h3 {
    font-size: 14pt;
    page-break-after: avoid;
  }

  /* Prevent orphaned headings and figures */
  .md-typeset h1, .md-typeset h2, .md-typeset h3,
  .md-typeset h4, .md-typeset h5, .md-typeset h6 {
    page-break-after: avoid;
  }

  .md-typeset figure, .md-typeset img {
    page-break-inside: avoid;
  }

  /* Images: remove border, constrain width */
  .md-typeset img {
    max-width: 400px !important;
    border: 1px solid #ccc;
  }

  /* Links: show URL after link text */
  .md-typeset a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #666;
    word-break: break-all;
  }

  /* Don't show URL for image links or internal links */
  .md-typeset a[href^="/"]::after,
  .md-typeset a:has(img)::after {
    content: none;
  }

  /* Admonitions: keep background, ensure borders print */
  .md-typeset .admonition,
  .md-typeset details {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    page-break-inside: avoid;
  }

  /* Tables */
  .md-typeset table {
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Last updated line */
  .md-typeset .last-updated {
    color: #666;
  }

  /* Code blocks */
  .md-typeset pre {
    page-break-inside: avoid;
    border: 1px solid #ddd;
  }
}