/* ============================================================
   12Port docs — extra.css
   v1: a11y link underlines + brand teal accent (shipped)
   v2: brand polish — typography, code UX, headings, footer,
       buttons, download links, dark mode (preview)

   WCAG 2.2 AA contrast rules — every color combination used here:
   - #1A2A35 (charcoal) on #FFFFFF: 14.4:1  AAA Normal ✓
   - #287A77 (teal-dark) on #FFFFFF: 5.07:1  AA Normal  ✓
   - #287A77 on #F7F8FA (gray-50): 4.86:1  AA Normal  ✓
   - #FFFFFF on #287A77 (button bg): 5.07:1  AA Normal ✓
   - #FFFFFF on #1F6463 (button hover, darker): 6.50:1  AAA Normal ✓
   - #FFFFFF on #0F1A22 (dark footer): 17.1:1  AAA Normal ✓
   - #48A9A6 (teal-light) on #0F1A22: 6.75:1  AAA Normal ✓ (DARK BG ONLY)

   NEVER use #48A9A6 with white text (2.8:1 — fails AA). Reserve teal-light
   for decorative borders or as a foreground ONLY on dark backgrounds.
   ============================================================ */

/* ----- v1: a11y link underlines ----- */

.md-content a:not(.md-button):not(.md-tabs__link):not(.md-nav__link):not(.headerlink):not(.md-source-file__fact) {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.05em;
}
.md-content a:not(.md-button):not(.md-tabs__link):not(.md-nav__link):not(.headerlink):not(.md-source-file__fact):hover {
  text-decoration: none;
}

/* ----- v1: 12Port brand teal (WCAG 2.2 AA)
   teal-dark  #287A77   5.07:1 on white  (AA normal text)
   teal-light #48A9A6   3.0:1  on white  (decorative only)
   ----- */

:root,
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #287A77;
  --md-accent-fg-color: #287A77;
  --md-accent-fg-color--transparent: rgba(40, 122, 119, 0.10);
  --md-code-hl-keyword-color: #287A77;

  /* v2: brand palette tokens */
  --tp-charcoal: #1A2A35;
  --tp-dark: #0F1A22;
  --tp-gray-body: #566673;
  --tp-bg: #F7F8FA;
  --tp-line: #E3E7EC;
}

.md-typeset .admonition.note,
.md-typeset details.note,
.md-typeset .admonition.info,
.md-typeset details.info,
.md-typeset .admonition.tip,
.md-typeset details.tip,
.md-typeset .admonition,
.md-typeset details {
  border-left-color: #287A77;
}

.md-nav__link--active,
.md-nav__item--active > .md-nav__link {
  color: #287A77;
}

.md-content__button:hover {
  color: #287A77;
}

/* ============================================================
   v2: brand polish (PREVIEW — uncomment-and-iterate locally)
   ============================================================ */

/* ----- v2.1: charcoal body text (matches www.12port.com) ----- */

.md-typeset {
  color: var(--tp-charcoal);
}

/* ----- v2.2: heading scale matching main-site type system
   Main site: H1 42px, H2 28px, H3 22px
   Material default (desktop): H1 ~32px, H2 ~25px, H3 ~20px
   Bumping for stronger visual hierarchy ----- */

.md-typeset h1 {
  font-size: 2.1rem;       /* ~36px — bigger than Material default (~32px),
                              smaller than first v2 attempt (~42px) */
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tp-charcoal);
}
.md-typeset h2 {
  font-size: 1.55rem;      /* ~27px */
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tp-charcoal);
  margin-top: 2rem;
}
.md-typeset h3 {
  font-size: 1.25rem;      /* ~22px */
  font-weight: 600;
  color: var(--tp-charcoal);
}

/* ----- v2.3: code blocks — UX polish + brand surface
   - Always show copy button (not hover-only)
   - Right-edge fade hint for overflow
   - Slightly more padding for breathing room
   - Subtle brand-gray background ----- */

.md-typeset code,
.md-typeset pre > code {
  background-color: var(--tp-bg);
}

/* Always show the copy button so it's discoverable on long code blocks */
.md-clipboard {
  opacity: 0.55;
  color: var(--tp-gray-body);
  transition: opacity 125ms, color 125ms;
}
.md-clipboard:hover,
.highlight:hover .md-clipboard {
  opacity: 1;
  color: #287A77;
}

/* Slightly more padding inside code blocks */
.md-typeset .highlight > pre > code,
.md-typeset pre > code {
  padding: 0.85em 1.1em;
}

/* Wrap untagged code blocks (```with no language) — usually shell one-liners
   like PowerShell or bash. Material wraps these in <div class="language-text highlight">.
   Target both the wrapper <pre> and inner <code> to override Material's white-space: pre.
   Tagged blocks (```python, ```json, ```yaml) keep horizontal scroll where wrapping
   would break readability. */
.md-typeset div.language-text > pre,
.md-typeset div.language-text > pre > code,
.md-typeset div.language-powershell > pre,
.md-typeset div.language-powershell > pre > code,
.md-typeset div.language-shell > pre,
.md-typeset div.language-shell > pre > code,
.md-typeset div.language-bash > pre,
.md-typeset div.language-bash > pre > code,
.md-typeset div.language-ps1 > pre,
.md-typeset div.language-ps1 > pre > code,
.md-typeset div.language-cmd > pre,
.md-typeset div.language-cmd > pre > code {
  white-space: pre-wrap;
  word-break: break-word;
}

/* ----- v2.4: admonition body background — soft brand surface
   pairs with the teal left rail from v1 ----- */

.md-typeset .admonition,
.md-typeset details {
  background-color: var(--tp-bg);
  border-radius: 6px;
}

/* ----- v2.5: better separation between sections ----- */

.md-typeset hr {
  border-color: var(--tp-line);
  margin: 2rem 0;
}

/* ----- v2.6: dark band footer — matches www.12port.com footer
   #FFFFFF on #0F1A22 = 17.1:1 (AAA Normal)
   #48A9A6 on #0F1A22 = 6.75:1 (AAA Normal) — used ONLY here on dark bg
   ----- */

.md-footer-meta {
  background-color: var(--tp-dark);
  color: #FFFFFF;
  border-top: 2px solid #287A77;
}
.md-footer-meta a,
.md-footer-meta__inner a,
.md-footer-copyright,
.md-footer-copyright a,
.md-social__link {
  color: #FFFFFF;
}
.md-footer-meta a:hover,
.md-footer-meta__inner a:hover,
.md-social__link:hover {
  color: #48A9A6;
}

/* ----- v2.7: filled-teal primary buttons (matches www.12port.com CTAs)
   Default state: #FFFFFF on #287A77 = 5.07:1 (AA Normal) ✓
   Hover: #FFFFFF on #1F6463 = 6.50:1 (AAA Normal) ✓ — DARKEN, don't lighten
   ----- */

.md-typeset .md-button {
  background-color: transparent;
  border: 2px solid #287A77;
  color: #287A77;
  font-weight: 600;
  transition: all 0.15s ease-out;
}
.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  background-color: #287A77;
  border-color: #287A77;
  color: #FFFFFF;
}
.md-typeset .md-button--primary {
  background-color: #287A77;
  border-color: #287A77;
  color: #FFFFFF;
}
.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  background-color: #1F6463;  /* DARKER teal — keeps white text at 6.5:1 */
  border-color: #1F6463;
  color: #FFFFFF;
}

/* ----- v2.8: bin.12port.com download links — pill-style inline button
   Default: #287A77 text on #F7F8FA bg = 4.86:1 (AA Normal)
   Hover:   #FFFFFF text on #287A77 bg = 5.07:1 (AA Normal)
   The teal border + download arrow + bold weight make these stand out
   sharply against surrounding prose so installers don't get lost.
   ----- */

.md-content a[href*="bin.12port.com"] {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.15em 0.6em;
  margin: 0 0.1em;
  background-color: var(--tp-bg);
  border: 1.5px solid #287A77;
  border-radius: 6px;
  color: #287A77 !important;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  vertical-align: middle;
  transition: background-color 0.15s ease-out, color 0.15s ease-out,
              border-color 0.15s ease-out;
}
.md-content a[href*="bin.12port.com"]:hover,
.md-content a[href*="bin.12port.com"]:focus {
  background-color: #287A77;
  color: #FFFFFF !important;
  border-color: #287A77;
}
.md-content a[href*="bin.12port.com"]::before {
  content: "⬇";
  display: inline-block;
  font-weight: 700;
  font-size: 0.95em;
  line-height: 1;
}
/* Inner <code> inside a download link: drop its own background so the pill
   doesn't double-stack the gray surface */
.md-content a[href*="bin.12port.com"] > code {
  background: transparent;
  padding: 0;
  color: inherit;
}

/* Slate (dark mode): pill becomes teal-on-dark, hover inverts the same way */
[data-md-color-scheme="slate"] .md-content a[href*="bin.12port.com"] {
  background-color: rgba(72, 169, 166, 0.10);
  border-color: #48A9A6;
  color: #48A9A6 !important;
}
[data-md-color-scheme="slate"] .md-content a[href*="bin.12port.com"]:hover,
[data-md-color-scheme="slate"] .md-content a[href*="bin.12port.com"]:focus {
  background-color: #48A9A6;
  color: #0F1A22 !important;
  border-color: #48A9A6;
}

/* ============================================================
   v2.9: Dark mode (slate scheme) — Material's built-in dark palette
   ============================================================ */

[data-md-color-scheme="slate"] {
  /* Background tokens — Material sets defaults; we just override accents */
  --md-typeset-a-color: #48A9A6;          /* teal-light on dark bg = ~7:1 ✓ */
  --md-accent-fg-color: #48A9A6;
  --md-accent-fg-color--transparent: rgba(72, 169, 166, 0.12);
  --md-code-hl-keyword-color: #48A9A6;
}

/* Slate: charcoal-color body text override needs to NOT apply
   (slate has its own light text); reset our v2.1 rule for dark mode */
[data-md-color-scheme="slate"] .md-typeset,
[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3 {
  color: var(--md-typeset-color);  /* Material's slate-aware text token */
}

/* Slate: code blocks and admonitions need slate-aware background, not gray-50 */
[data-md-color-scheme="slate"] .md-typeset code,
[data-md-color-scheme="slate"] .md-typeset pre > code {
  background-color: var(--md-code-bg-color);
}
[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
  background-color: var(--md-default-bg-color--lighter, rgba(255,255,255,0.04));
}

/* Slate: active nav uses teal-light for AA contrast on dark */
[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__item--active > .md-nav__link {
  color: #48A9A6;
}

/* Slate: dark download arrow stays teal-light for visibility */
[data-md-color-scheme="slate"] .md-content a[href*="bin.12port.com"]::after {
  color: #48A9A6;
}

/* ============================================================
   v2.9.5: back-to-top button — brand-styled, bottom-right
   Material's navigation.top button is enabled in mkdocs.yml.
   We restyle and reposition it to feel like a marketing-site CTA:
   fixed bottom-right corner, circular, brand teal, white arrow.
   Material handles the show/hide visibility logic automatically.
   #FFFFFF on #287A77 = 5.07:1 (AA Normal) ✓
   ============================================================ */

.md-top {
  position: fixed !important;
  top: auto !important;
  bottom: 1.5rem !important;
  left: auto !important;
  right: 1.5rem !important;
  transform: none !important;          /* override Material's translateX(-50%) center */
  margin: 0 !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  background-color: #287A77 !important;
  color: #FFFFFF !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 14px rgba(40, 122, 119, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;              /* hide "Back to top" text; keep icon */
  line-height: 1 !important;
  transition: background-color 0.15s ease-out, transform 0.15s ease-out,
              box-shadow 0.15s ease-out !important;
  z-index: 50;
}
.md-top:hover,
.md-top:focus {
  background-color: #1F6463 !important;  /* darker for AA hover (6.5:1 with white) */
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(40, 122, 119, 0.45) !important;
}
.md-top svg,
.md-top .md-icon,
.md-top .md-icon svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor;
}

/* Dark mode variant */
[data-md-color-scheme="slate"] .md-top {
  background-color: #48A9A6 !important;
  color: #0F1A22 !important;
  box-shadow: 0 4px 14px rgba(72, 169, 166, 0.35) !important;
}
[data-md-color-scheme="slate"] .md-top:hover,
[data-md-color-scheme="slate"] .md-top:focus {
  background-color: #5FBEBB !important;
  color: #0F1A22 !important;
}

/* Mobile: slightly smaller + tighter offset */
@media (max-width: 768px) {
  .md-top {
    bottom: 1rem !important;
    right: 1rem !important;
    width: 40px !important;
    height: 40px !important;
  }
}

/* ============================================================
   v2.10: header bar polish — subtle off-white + thin teal underline
   #1A2A35 (header text) on #FAFBFC: ~13.8:1 (AAA Normal) ✓
   ============================================================ */

.md-header {
  background-color: #FAFBFC;
  box-shadow: 0 1px 0 rgba(40, 122, 119, 0.25);
}
.md-header__topic .md-ellipsis {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.6rem;
  width: auto;
}

/* Dark mode: header swaps to brand dark */
[data-md-color-scheme="slate"] .md-header {
  background-color: var(--tp-dark);
  box-shadow: 0 1px 0 rgba(72, 169, 166, 0.35);
}

/* ============================================================
   v2.11: search box styling — brand teal focus ring
   ============================================================ */

.md-search__form {
  border-radius: 6px;
  transition: background-color 0.15s ease-out;
}
.md-search__form:focus-within {
  background-color: rgba(40, 122, 119, 0.08);
  outline: 2px solid #287A77;
  outline-offset: 2px;
}
.md-search__input::placeholder {
  color: var(--tp-gray-body);
  opacity: 1;
}
/* Brand the kbd hint inside the search box */
.md-search__icon[for="__search"]::after {
  color: var(--tp-gray-body);
}

/* Dark mode: keep AA contrast on dark header */
[data-md-color-scheme="slate"] .md-search__form:focus-within {
  background-color: rgba(72, 169, 166, 0.15);
  outline-color: #48A9A6;
}

/* ============================================================
   v2.12: Mermaid diagrams — brand colors
   Targets the default flowchart classes; sequence/gantt/state diagrams
   may need additional rules if/when used. Stroke = teal, fill = gray-50,
   labels = charcoal. All combos pass AA on light bg.
   ============================================================ */

.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon,
.mermaid .node path {
  fill: #F7F8FA !important;
  stroke: #287A77 !important;
  stroke-width: 1.5px !important;
}
.mermaid .edgePath .path,
.mermaid .flowchart-link {
  stroke: #287A77 !important;
  stroke-width: 1.5px !important;
}
.mermaid .arrowheadPath {
  fill: #287A77 !important;
  stroke: #287A77 !important;
}
.mermaid .nodeLabel,
.mermaid .edgeLabel,
.mermaid .label {
  color: #1A2A35 !important;
  font-family: 'Poppins', sans-serif !important;
}
.mermaid .cluster rect {
  fill: rgba(40, 122, 119, 0.05) !important;
  stroke: #287A77 !important;
  stroke-dasharray: 3 !important;
}

/* ============================================================
   v2.13: syntax highlighting — small brand alignment
   Material's defaults pass AA; we just nudge a couple toward brand palette
   #1E6F47 (string green) on #F7F8FA: 5.91:1 (AA Normal) ✓
   #566673 (comment gray) on #F7F8FA: 4.71:1 (AA Normal) ✓
   ============================================================ */

:root,
[data-md-color-scheme="default"] {
  --md-code-hl-comment-color: #566673;
  --md-code-hl-string-color: #1E6F47;
  --md-code-hl-operator-color: #287A77;
  --md-code-hl-punctuation-color: var(--tp-charcoal);
}

/* ============================================================
   v2.14: print stylesheet — brand-consistent PDF/print output
   Strips chrome, keeps brand teal on H1, prints URLs after external links
   ============================================================ */

/* ============================================================
   v2.15: heading permalinks — hide by default, show on hover,
   replace ¶ with a clean link icon (SVG mask, inherits currentColor)
   The markdown source still has the ¶ character; we visually
   replace it with a Material-style chain-link icon.
   ============================================================ */

.md-typeset .headerlink {
  opacity: 0;
  margin-left: 0.4em;
  /* Hide the ¶ text by zeroing the font-size; the icon ::before shows instead */
  font-size: 0 !important;
  vertical-align: middle;
  transition: opacity 0.15s ease-out;
}
.md-typeset .headerlink::before {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  font-size: 1rem;  /* re-establish a font-size context so width/height work */
  background-color: var(--tp-gray-body);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.59 13.41a1 1 0 0 1 0 1.42 1 1 0 0 1-1.42 0 4.99 4.99 0 0 1 0-7.07l3.54-3.54a4.99 4.99 0 0 1 7.07 7.07l-1.49 1.49a6.94 6.94 0 0 0-.4-2.42l.48-.48a2.99 2.99 0 0 0-4.24-4.24l-3.54 3.54a2.99 2.99 0 0 0 0 4.23zM13.41 9.17a1 1 0 0 1 1.42 0 4.99 4.99 0 0 1 0 7.07l-3.54 3.54a4.99 4.99 0 0 1-7.07-7.07l1.49-1.49a6.94 6.94 0 0 0 .4 2.42l-.48.48a2.99 2.99 0 0 0 4.24 4.24l3.54-3.54a2.99 2.99 0 0 0 0-4.23 1 1 0 0 1 0-1.42z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.59 13.41a1 1 0 0 1 0 1.42 1 1 0 0 1-1.42 0 4.99 4.99 0 0 1 0-7.07l3.54-3.54a4.99 4.99 0 0 1 7.07 7.07l-1.49 1.49a6.94 6.94 0 0 0-.4-2.42l.48-.48a2.99 2.99 0 0 0-4.24-4.24l-3.54 3.54a2.99 2.99 0 0 0 0 4.23zM13.41 9.17a1 1 0 0 1 1.42 0 4.99 4.99 0 0 1 0 7.07l-3.54 3.54a4.99 4.99 0 0 1-7.07-7.07l1.49-1.49a6.94 6.94 0 0 0 .4 2.42l-.48.48a2.99 2.99 0 0 0 4.24 4.24l3.54-3.54a2.99 2.99 0 0 0 0-4.23 1 1 0 0 1 0-1.42z'/></svg>");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: background-color 0.15s ease-out;
}
.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,
.md-typeset .headerlink:focus {
  opacity: 1;
}
.md-typeset h1:hover .headerlink::before,
.md-typeset h2:hover .headerlink::before,
.md-typeset h3:hover .headerlink::before,
.md-typeset h4:hover .headerlink::before,
.md-typeset h5:hover .headerlink::before,
.md-typeset h6:hover .headerlink::before,
.md-typeset .headerlink:focus::before,
.md-typeset .headerlink:hover::before {
  background-color: #287A77;
}

@media print {
  /* Hide site chrome */
  .md-header,
  .md-footer,
  .md-sidebar,
  .md-tabs,
  .md-clipboard,
  .md-content__button,
  .md-search,
  .md-source-file__fact,
  .md-announce {
    display: none !important;
  }

  /* Force light scheme regardless of toggle state */
  body,
  .md-typeset {
    color: #1A2A35 !important;
    background: #FFFFFF !important;
  }

  /* Brand teal accent on top-level title */
  .md-typeset h1 {
    color: #287A77 !important;
    border-bottom: 2px solid #287A77 !important;
    padding-bottom: 0.3em !important;
    margin-top: 0 !important;
    page-break-before: avoid;
  }
  .md-typeset h2 {
    color: #1A2A35 !important;
    page-break-after: avoid;
  }

  /* External link URLs printed inline so paper readers can follow them */
  .md-content a[href^="http"]:not([href*="docs.12port.com"]):not([href*="bin.12port.com"])::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #566673;
    font-weight: normal;
  }

  /* Download pills become plain text on paper (button has no meaning in print) */
  .md-content a[href*="bin.12port.com"] {
    background: transparent !important;
    border: none !important;
    color: #287A77 !important;
    padding: 0 !important;
    text-decoration: underline !important;
  }
  .md-content a[href*="bin.12port.com"]::before {
    content: "";
  }
  .md-content a[href*="bin.12port.com"]::after {
    content: " (" attr(href) ")" !important;
    font-size: 0.85em;
    color: #566673;
  }

  /* Prevent code blocks from breaking awkwardly */
  .md-typeset pre,
  .md-typeset .highlight {
    page-break-inside: avoid;
  }

  /* Admonitions keep teal rail but lighter bg for ink-friendly printing */
  .md-typeset .admonition,
  .md-typeset details {
    background: #F7F8FA !important;
    border: 1px solid var(--tp-line) !important;
    border-left: 4px solid #287A77 !important;
  }
}