/* Hex Trust ITSD KB — toned-down internal-docs theme over Material's "black" palette.
   Goal: institutional, calm, fact-dense, easy to scan. Not marketing. */

:root {
  --md-text-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --md-code-font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ht-ink: #0e1117;
  --ht-ink-soft: #1c2128;
  --ht-rule: #e5e7eb;
  --ht-muted: #6b7280;
  --ht-accent: #4b6580;
  --ht-bg-soft: #f7f8fa;

  --md-primary-fg-color: var(--ht-ink);
  --md-primary-fg-color--light: var(--ht-ink-soft);
  --md-primary-fg-color--dark: #000;
  --md-accent-fg-color: var(--ht-accent);
  --md-typeset-a-color: var(--ht-accent);
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0b0d10;
  --md-default-fg-color: #e5e7eb;
  --md-typeset-a-color: #8ea7c2;
  --md-accent-fg-color: #8ea7c2;
}

/* ---- Header ---- */
.md-header {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Hide the static "Oracle" site_name next to the HexTrust wordmark — the
   wordmark already brands the page. The other .md-header__topic
   (data-md-component="header-topic") shows the active page title on scroll
   via navigation.tracking and is left intact. */
.md-header__topic:not([data-md-component]) {
  display: none;
}

/* Top-bar tabs — slightly more prominent than Material's default muted
   white. Subtle weight + opacity bump; full white on hover/active. */
.md-tabs__link {
  font-weight: 500;
  opacity: 0.92;
}
.md-tabs__link:hover,
.md-tabs__item--active .md-tabs__link {
  opacity: 1;
}

/* Pull main content up so the first content block (callout / H1) aligns
   vertically with the first sidebar item ("AWS" etc.). Material's default
   .md-main__inner margin-top of 1.5rem leaves a noticeable gap between the
   sidebar's first row and the article's first row. */
.md-main__inner {
  margin-top: 0.6rem;
}
@media screen and (min-width: 76.25em) {
  /* Desktop: zero both so sidebar's first item and article's first block
     start at the same y. */
  .md-main__inner { margin-top: 0; }
  .md-sidebar__inner { padding-top: 0; }
}

/* Hex Trust wordmark — needs more horizontal room than the icon-style logo. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.5rem;
  width: auto;
}

/* Site title — align with the primary sidebar's left edge.
   Material default puts the title right after the logo. With the wordmark, the title
   needs explicit padding so its first character sits at the same x as the sidebar
   nav items. The value below matches Material's primary-sidebar width on desktop. */
.md-header__title {
  font-weight: 500;
  letter-spacing: 0.01em;
  font-size: 0.85rem;
  margin-left: 0;
  cursor: pointer;
}
@media screen and (min-width: 76.25em) {
  .md-header__title {
    padding-left: 1.4rem;  /* gap between wordmark and title */
    /* shift the inner topic so it lines up with sidebar item text */
    margin-left: calc(12.1rem - 11.3rem - 0.6rem);
  }
}

/* Light/dark switcher pinned to the rightmost slot, after the repo link. */
.md-header__option {
  order: 99;
  margin-left: 0.4rem;
  display: flex;
}
.md-header__source { order: 50; }
.md-search { order: 10; }

.md-tabs { background-color: var(--ht-ink-soft); }

/* ---- Typography: tighter, calmer hierarchy ---- */
.md-typeset { font-size: 0.84rem; line-height: 1.7; }
.md-typeset h1 {
  font-weight: 600;
  font-size: 1.7rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
  color: var(--ht-ink);
}
[data-md-color-scheme="slate"] .md-typeset h1 { color: #f3f4f6; }
.md-typeset h2 {
  font-weight: 600;
  font-size: 1.15rem;
  margin-top: 1.8em;
  border-bottom: 1px solid var(--ht-rule);
  padding-bottom: 0.3em;
}
[data-md-color-scheme="slate"] .md-typeset h2 { border-bottom-color: #2a2f37; }
.md-typeset h3 { font-weight: 600; font-size: 1rem; }

/* Home page: H1 stays in the DOM for a11y but is visually removed —
   the site title is already shown in the header. */
.md-typeset h1.home-h1-hide {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hide H1 permalink entirely; show h2/h3 anchors only on hover. */
.md-typeset h1 .headerlink { display: none; }
.md-typeset h2 .headerlink,
.md-typeset h3 .headerlink,
.md-typeset h4 .headerlink {
  opacity: 0;
  transition: opacity 120ms ease;
  margin-left: 0.4em;
  color: var(--ht-muted);
  font-weight: 400;
}
.md-typeset h2:hover .headerlink,
.md-typeset h3:hover .headerlink,
.md-typeset h4:hover .headerlink { opacity: 0.6; }

.md-typeset h1 + p {
  color: var(--ht-muted);
  font-size: 0.78rem;
  margin-top: -0.4em;
  margin-bottom: 1.5em;
}
.md-typeset h1 + p code {
  background: var(--ht-bg-soft);
  border: 1px solid var(--ht-rule);
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.72rem;
}
[data-md-color-scheme="slate"] .md-typeset h1 + p code {
  background: #181b20;
  border-color: #2a2f37;
}

/* ---- Sidebar ---- */
.md-nav__title {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.66rem;
  color: var(--ht-muted);
}
.md-nav__item .md-nav__link { font-size: 0.78rem; padding: 0.2rem 0; }

/* Active sidebar link: dark + bold, not link-blue. Higher specificity than Material's. */
.md-nav .md-nav__link--active,
.md-nav .md-nav__link[aria-current="page"],
.md-nav__item--active > .md-nav__link {
  color: var(--ht-ink);
  font-weight: 600;
}
[data-md-color-scheme="slate"] .md-nav .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav .md-nav__link[aria-current="page"],
[data-md-color-scheme="slate"] .md-nav__item--active > .md-nav__link {
  color: #f3f4f6;
}

/* Hide the redundant home link in the primary nav — applies to both the
   desktop sidebar and the mobile drawer. Sections (folders) stay; only the
   bare top-level index.md is suppressed. The wordmark logo links home
   regardless. */
.md-nav--primary > .md-nav__list > .md-nav__item:not(.md-nav__item--section) {
  display: none;
}

/* Desktop: also hide the redundant "Hex Trust IT Service Desk" sidebar header
   (header bar already shows it). */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-nav--primary > .md-nav__title { display: none; }
}

/* ---- Mobile drawer (only fires below Material's sidebar breakpoint) ---- */
@media screen and (max-width: 76.234375em) {

  /* Drawer header: just the wordmark. Trailing site-title text duplicates the
     wordmark, so font-size: 0 collapses the bare text node while leaving the
     logo image at its real size. */
  .md-nav--primary > .md-nav__title {
    background-color: var(--ht-ink);
    padding: 0.7rem 1rem;
    height: auto;
    line-height: 1;
    font-size: 0;
    box-shadow: 0 1px 0 var(--ht-rule);
  }
  .md-nav--primary > .md-nav__title .md-logo { display: inline-flex; align-items: center; }
  .md-nav--primary > .md-nav__title .md-logo img,
  .md-nav--primary > .md-nav__title .md-logo svg {
    width: 5.5rem;
    height: auto;
    display: block;
  }

  /* Drawer item + section links: consistent scale, sentence-case, with row
     separators so long titles don't blur together. */
  .md-nav--primary .md-nav__list .md-nav__link {
    display: flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--ht-ink);
    text-transform: none;
    letter-spacing: 0;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid var(--ht-rule);
    line-height: 1.4;
    transition: background-color 100ms ease;
  }
  .md-nav--primary .md-nav__list .md-nav__link:hover { background-color: var(--ht-bg-soft); }
  .md-nav--primary .md-nav__list .md-nav__link:active { background-color: #eef0f3; }
  [data-md-color-scheme="slate"] .md-nav--primary .md-nav__list .md-nav__link {
    border-bottom-color: #2a2f37;
    color: #e5e7eb;
  }
  [data-md-color-scheme="slate"] .md-nav--primary .md-nav__list .md-nav__link:hover {
    background-color: #15181d;
  }
  .md-nav--primary .md-nav__item--section > .md-nav__link { font-weight: 500; }

  /* Right chevron on leaf article links — sections already get Material's SVG. */
  .md-nav--primary .md-nav__item:not(.md-nav__item--section) > .md-nav__link::after {
    content: "›";
    color: var(--ht-muted);
    font-size: 1.1rem;
    font-weight: 400;
    margin-left: auto;
    padding-left: 0.6rem;
    flex-shrink: 0;
    line-height: 1;
  }

  /* Tone the existing section chevron icon to match. */
  .md-nav--primary .md-nav__item--section > .md-nav__link .md-nav__icon { color: var(--ht-muted); margin-left: auto; }
  .md-nav--primary .md-nav__item--section > .md-nav__link .md-nav__icon svg { width: 0.8rem; height: 0.8rem; }

  /* Secondary / lifted header ("GOOGLE WORKSPACE" view): sentence case, smaller. */
  .md-nav--secondary .md-nav__title,
  .md-nav--lifted .md-nav__title {
    text-transform: none;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ht-ink);
  }
  .md-nav--secondary .md-nav__title .md-nav__icon,
  .md-nav--lifted .md-nav__title .md-nav__icon { color: var(--ht-ink); opacity: 0.85; }
}

/* ---- Tables ---- */
.md-typeset table:not([class]) {
  font-size: 0.74rem;
  border: 1px solid var(--ht-rule);
}
.md-typeset table:not([class]) th {
  background: var(--ht-bg-soft);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ht-ink);
}
.md-typeset table:not([class]) tr:nth-child(even) td { background: var(--ht-bg-soft); }
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th { background: #15181d; color: #f3f4f6; }
[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:nth-child(even) td { background: #11141a; }
[data-md-color-scheme="slate"] .md-typeset table:not([class]) { border-color: #2a2f37; }

/* ---- Admonitions ---- */
.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--ht-rule);
  border-radius: 4px;
  box-shadow: none;
  font-size: 0.78rem;
  /* Match the right edge with the grid cards block beneath. Material's default
     leaves a slight em-based gap on the right; box-sizing keeps the border
     inside the content column. */
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}
[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details { border-color: #2a2f37; }

/* Ensure the grid block is also exactly content-width, no right overflow. */
.md-typeset .grid {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

/* ---- Grid cards on the home page ---- */

/* Tighter gap between cards. */
.md-typeset .grid.cards,
.md-typeset .grid {
  gap: 0.2rem;
}

.md-typeset .grid.cards > ul {
  gap: 0.2rem;
}

.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--ht-rule);
  border-radius: 6px;
  padding: 0.7rem 1rem;
  transition: border-color 120ms ease, transform 120ms ease;
  background: #fff;
  position: relative;          /* anchor for the full-card click overlay */
}
.md-typeset .grid.cards > ul > li:hover { cursor: pointer; }

/* Make the whole card clickable: the card's TITLE link grows a transparent
   pseudo-element that covers the entire card surface. The pseudo sits above
   all other card content so clicks on text/icons reach the link. Card text
   isn't selectable as a result — fine for navigation tiles. */
.md-typeset .grid.cards > ul > li > p:first-child a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
}

/* Title link in cards — match surrounding text colour so the title looks like
   the card heading, not a bright blue link. The card's hover border conveys
   interactivity. */
.md-typeset .grid.cards > ul > li > p:first-child a {
  color: var(--ht-ink);
  text-decoration: none;
}
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li > p:first-child a {
  color: #f3f4f6;
}

/* Bottom "Pages: N" line — muted, not styled as a link. */
.md-typeset .grid.cards > ul > li > p:last-child {
  color: var(--ht-muted);
  font-size: 0.72rem;
  margin-top: 0.4em;
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li {
  background: #11141a;
  border-color: #2a2f37;
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--ht-accent);
  transform: translateY(-1px);
}

/* "What's new" pill anchored to the top-right of a portal-home card. Sits
   above the full-card click overlay so it's independently clickable. The
   wrapping <p> is collapsed to remove vertical layout from the card body. */
.md-typeset .grid.cards > ul > li a.kb-card-whats-new {
  position: absolute;
  top: 0.45rem;
  right: 0.55rem;
  z-index: 6;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--ht-muted);
  text-decoration: none;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--ht-rule);
  background: #fff;
  transition: color 120ms ease, border-color 120ms ease;
}
.md-typeset .grid.cards > ul > li a.kb-card-whats-new:hover {
  color: var(--ht-accent);
  border-color: var(--ht-accent);
}
.md-typeset .grid.cards > ul > li > p:has(> a.kb-card-whats-new) {
  margin: 0;
  height: 0;
  overflow: visible;
}
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li a.kb-card-whats-new {
  background: #11141a;
  border-color: #2a2f37;
  color: #9ca3af;
}
.md-typeset .grid.cards > ul > li hr { margin: 0.4em 0 0.6em; border-color: var(--ht-rule); }
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li hr { border-color: #2a2f37; }
.md-typeset .grid.cards > ul > li > p:first-child {
  font-size: 0.85rem; font-weight: 600; margin-bottom: 0.2em;
}
.md-typeset .grid.cards > ul > li > p:last-child {
  font-size: 0.72rem; color: var(--ht-muted);
}

/* ---- Footer ---- */
.md-footer-meta { background-color: var(--ht-ink); }
.md-footer { background-color: var(--ht-ink-soft); }

/* ---- Search input ---- */
.md-search__input { background-color: rgba(255, 255, 255, 0.08); }
.md-search__input::placeholder { color: rgba(255, 255, 255, 0.6); }

/* ---- Code blocks ---- */
.md-typeset pre > code { border: 1px solid var(--ht-rule); }
[data-md-color-scheme="slate"] .md-typeset pre > code { border-color: #2a2f37; }
.md-typeset code { font-size: 0.82em; padding: 1px 5px; }

/* ---- "Edit on GitHub" pill (overrides Material's icon-only action) ---- */
.md-content__button.ht-edit-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: auto;
  height: auto;
  padding: 0.3rem 0.6rem;
  margin: 0 0 0 0.3rem;
  border: 1px solid var(--ht-rule);
  border-radius: 999px;
  background: var(--ht-bg-soft);
  color: var(--ht-ink);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.md-content__button.ht-edit-pill:hover {
  background: var(--ht-accent);
  border-color: var(--ht-accent);
  color: #fff;
}
.md-content__button.ht-edit-pill svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: currentColor;
}
.ht-edit-pill__label { white-space: nowrap; }

[data-md-color-scheme="slate"] .md-content__button.ht-edit-pill {
  background: #1a1d22;
  border-color: #2a2f37;
  color: #e5e7eb;
}
[data-md-color-scheme="slate"] .md-content__button.ht-edit-pill:hover {
  background: var(--ht-accent);
  border-color: var(--ht-accent);
  color: #fff;
}

@media screen and (max-width: 480px) {
  .ht-edit-pill__label { display: none; }
  .md-content__button.ht-edit-pill { padding: 0.3rem; }
}