/* ==========================================================================
   NxSAM documentation — eSec Forte brand layer for MkDocs Material
   Palette source of truth: brand/palette.yml
   ========================================================================== */

:root {
  --esec-primary:        #1b599d;
  --esec-primary-dark:   #0d4f8a;
  --esec-primary-deep:   #002157;
  --esec-interactive:    #4178be;
  --esec-accent:         #e95f26;
  --esec-cyan:           #00a0d9;

  --esec-heading:        #333333;
  --esec-text-secondary: #5b5b5b;
  --esec-text-body:      #4a4a4a;
  --esec-surface:        #fbfbfb;
  --esec-surface-alt:    #f7f7f7;
  --esec-border:         #e8e8e8;

  --sev-critical: #c0392b;
  --sev-high:     #e74c3c;
  --sev-medium:   #e67e22;
  --sev-low:      #f1c40f;
  --sev-info:     #3498db;
}

/* --- Material palette binding ------------------------------------------- */

[data-md-color-scheme="default"] {
  --md-primary-fg-color:        var(--esec-primary);
  --md-primary-fg-color--light: var(--esec-interactive);
  --md-primary-fg-color--dark:  var(--esec-primary-deep);
  --md-accent-fg-color:         var(--esec-interactive);

  --md-typeset-color:        var(--esec-text-body);
  --md-typeset-a-color:      var(--esec-interactive);
  --md-default-bg-color:     #ffffff;
  --md-code-bg-color:        var(--esec-surface-alt);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        var(--esec-primary);
  --md-primary-fg-color--light: var(--esec-cyan);
  --md-primary-fg-color--dark:  var(--esec-primary-deep);
  --md-accent-fg-color:         var(--esec-cyan);
  --md-typeset-a-color:         var(--esec-cyan);
}

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

body, .md-typeset {
  font-family: "Montserrat", "Source Sans Pro", -apple-system, "Segoe UI", Roboto, sans-serif;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: "Montserrat", sans-serif;
  color: var(--esec-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.md-typeset h1 {
  font-weight: 300;          /* mirrors the site's light hero treatment */
  font-size: 2.0rem;
  color: var(--esec-primary-dark);
  border-bottom: 2px solid var(--esec-border);
  padding-bottom: .3em;
}

.md-typeset h2 {
  margin-top: 2.2em;
  padding-left: .55rem;
  border-left: 3px solid var(--esec-primary);
}

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

.md-header {
  background: linear-gradient(100deg, var(--esec-primary-deep) 0%, var(--esec-primary) 62%, var(--esec-interactive) 100%);
  box-shadow: 0 1px 4px rgba(0, 33, 87, .28);
}

.md-header__button.md-logo img {
  height: 1.5rem;
  width: auto;
}

.md-tabs { background: transparent; }

/* --- Tables: dense, scannable, never overflowing the page --------------- */

.md-typeset table:not([class]) {
  font-size: .74rem;
  border: 1px solid var(--esec-border);
}

.md-typeset table:not([class]) th {
  background: var(--esec-primary);
  color: #fff;
  font-weight: 600;
  letter-spacing: .01em;
}

.md-typeset table:not([class]) tr:nth-child(even) {
  background: var(--esec-surface);
}

/* Wide tables scroll inside their own container rather than the page */
.md-typeset__table { overflow-x: auto; }

/* --- Admonitions: brand-tinted, semantically distinct ------------------- */

.md-typeset .admonition,
.md-typeset details {
  border-left-width: 3px;
  border-radius: 2px;
  font-size: .76rem;
  box-shadow: none;
  border: 1px solid var(--esec-border);
}

/* "note" = orientation */
.md-typeset .admonition.note { border-left-color: var(--esec-primary); }
.md-typeset .note > .admonition-title { background: rgba(27, 89, 157, .08); }

/* "warning" = a limitation or a check people miss */
.md-typeset .admonition.warning { border-left-color: var(--esec-accent); }
.md-typeset .warning > .admonition-title { background: rgba(233, 95, 38, .09); }

/* --- Screenshot figures ------------------------------------------------- */

/* A screenshot of a dense enterprise table is useless at half the column width — the row
   text and the callout badges both stop being readable, which defeats the point of
   including it. Figures therefore take the full width available. */
.md-typeset figure {
  width: 100%;
  margin: 1.4em 0;
}

.md-typeset img[src*="screenshots"] {
  display: block;
  width: 100%;
  border: 1px solid var(--esec-border);
  border-radius: 3px;
  box-shadow: 0 1px 6px rgba(0, 33, 87, .10);
}

/* On a wide viewport the prose measure is deliberately narrow for readability, but a
   screenshot is the one element worth widening past it — up to the space actually free
   between the two sidebars. */
/* Material's grid is 61rem, which leaves only ~740px between the two sidebars — too
   narrow for a screenshot of a dense enterprise table, and widening the figure alone
   just pushed it under the table of contents. Widening the grid gives the figures and
   tables real room; the prose is then held back to a readable measure separately, so
   line length does not suffer for it. */
@media screen and (min-width: 76.25em) {
  .md-grid { max-width: 80rem; }

  /* Body copy stays at a comfortable measure regardless of the wider grid. */
  .md-typeset > p,
  .md-typeset > ul,
  .md-typeset > ol,
  .md-typeset > blockquote,
  .md-typeset > .admonition {
    max-width: 46rem;
  }

  /* Figures and data tables use the width the grid now provides. */
  .md-typeset figure,
  .md-typeset > .md-typeset__table,
  .md-typeset > table {
    max-width: none;
    width: 100%;
  }
}

/* The captures are 3200px+ wide, so even a widened figure is a heavy downscale for a
   dense table. Each figure is a link to the full-resolution file: one click gives the
   reader the real pixels. Inert in the PDF, where the link simply does nothing. */
.md-typeset figure a {
  display: block;
  cursor: zoom-in;
}

.md-typeset figure a:hover img[src*="screenshots"] {
  border-color: var(--esec-interactive);
  box-shadow: 0 2px 14px rgba(0, 33, 87, .18);
}

.md-typeset figcaption {
  font-size: .7rem;
  color: var(--esec-text-secondary);
  font-style: normal;
  margin-top: .5em;
  text-align: left;
}

/* The callout key — the "**1** … · **2** …" line under a figure. Set as a legend rather
   than body prose, with the numbers given the same navy disc as the badges drawn on the
   image, so the eye connects key to callout without being told. */
.md-typeset figure + p {
  font-size: .72rem;
  color: var(--esec-text-secondary);
  margin-top: -.1em;
  line-height: 2;
}

.md-typeset figure + p > strong:first-child,
.md-typeset figure + p strong {
  display: inline-block;
  min-width: 1.4em;
  height: 1.4em;
  line-height: 1.4em;
  margin-right: .2em;
  text-align: center;
  border-radius: 50%;
  background: var(--esec-primary-deep);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
}

/* --- Severity chips ----------------------------------------------------- */

.sev {
  display: inline-block;
  padding: .08em .5em;
  border-radius: 2px;
  color: #fff;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.sev-critical { background: var(--sev-critical); }
.sev-high     { background: var(--sev-high); }
.sev-medium   { background: var(--sev-medium); }
.sev-low      { background: var(--sev-low); color: #333; }
.sev-info     { background: var(--sev-info); }

/* --- Audience marker (support handbook only) ---------------------------- */

.audience-support {
  display: inline-block;
  background: var(--esec-primary-deep);
  color: #fff;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .12em .55em;
  border-radius: 2px;
  vertical-align: middle;
}

/* --- Header logo ---------------------------------------------------------
 *
 * The theme sizes a header logo for a square mark. The NxSAM lockup is 3.5:1 and carries
 * a strapline, so at the default height the words under the wordmark are a grey smudge.
 * Giving it real height makes the lockup legible — including "Powered by eSec Forte",
 * which is how both brands appear in the header without a second image.
 */
.md-header__button.md-logo { padding: .2rem .4rem; }
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 2.1rem;
  width: auto;
}

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

.md-footer-meta { background: var(--esec-primary-deep); }
.md-footer { background: var(--esec-primary-dark); }

/* --- Sidebar height ------------------------------------------------------
 *
 * The navigation column must scroll INSIDE itself. Left unconstrained it grows to the
 * full height of the nav — nearly 4,000px with every module expanded — while the page
 * itself is only as tall as its content. The footer then sits at the end of the content,
 * with the nav still painting past it, so the footer bar appears to cut across the
 * sidebar mid-scroll. That is what a reader reported, and it looks like a broken page.
 *
 * The theme normally sets this height from JavaScript. It does not survive being opened
 * from the filesystem, which is exactly how the shareable zips are read — so the height
 * is set in CSS, where it holds with or without scripting.
 *
 * 5.5rem is the header plus its shadow; the sidebar starts below both.
 */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary,
  .md-sidebar--secondary { height: calc(100vh - 5.5rem); }

  .md-sidebar--primary .md-sidebar__scrollwrap,
  .md-sidebar--secondary .md-sidebar__scrollwrap {
    max-height: 100%;
    overflow-y: auto;
  }
}

/* --- Print / PDF -------------------------------------------------------- */

/* The print-site plugin sets its own @page margin boxes, including
   `@bottom-right { content: 'Page ' counter(page) }`. The PDF is rendered by Chromium
   with an explicit footerTemplate that already carries "Page n of N", so both were drawn
   into the same corner and overlapped — a large "Page 43" sitting on top of a small
   "Page 43 of 120". The template wins because it can count total pages, which a CSS
   counter cannot; the plugin's boxes are emptied here. */
@page {
  @bottom-right { content: none; }
  @bottom-center { content: none; }
  @bottom-left { content: none; }
  @top-right { content: none; }
  @top-center { content: none; }
  @top-left { content: none; }
}

@media print {
  .md-header, .md-sidebar, .md-footer__inner, .md-tabs { display: none !important; }

  .md-typeset h1, .md-typeset h2 { break-after: avoid-page; }
  /*
   * Figures and admonitions are kept whole; TABLES are not.
   *
   * Keeping a table whole is right for a five-row one and wrong for a fourteen-row one:
   * the field-by-field tables in the workflow pages are taller than a page, so the rule
   * pushed each onto a page of its own and left the sentence introducing it alone on the
   * page before — an empty page produced by a rule meant to improve layout.
   *
   * Rows are what must not split. A table may flow across pages; its header repeats.
   */
  .md-typeset figure, .md-typeset .admonition { break-inside: avoid; }
  .md-typeset table { break-inside: auto; }
  .md-typeset tr { break-inside: avoid; }
  .md-typeset thead { display: table-header-group; }

  .md-typeset img[src*="screenshots"] {
    box-shadow: none;
    border: 1px solid #ccc;
    max-width: 100%;
  }

  /* print-site emits one long page — keep module starts on fresh pages */
  .md-typeset h1 { break-before: page; }
  .md-typeset h1:first-of-type { break-before: avoid; }

  /*
   * A module section is a wrapper whose own <h1> is the module name, immediately followed
   * by its first page's <h1>. With a page break before every h1, the module name landed
   * alone on a page carrying nothing but a running header and a footer — 19 such pages in
   * the user manual and as many again in the handbook.
   *
   * Keeping the section title with the page that follows turns each of those into a
   * heading above real content, which is what a section opener should be.
   */
  /*
   * The rule these three replace targeted the inner H1 and never fired, because the break
   * is not on the heading: print-site sets `page-break-before: always` on EVERY
   * `section.print-page` through an id selector, and styles a section's own h1 as a
   * centred title page. So a module name landed alone on a page — 19 of them in the user
   * manual — and the earlier fix looked right while changing nothing. It took reading the
   * plugin's own stylesheet to see why.
   *
   * The override has to beat `#print-site-page section.print-page`, hence the id prefix,
   * and has to name the SECTION rather than its heading.
   */
  #print-site-page section.print-page.md-section > h1 {
    padding: 0 0 0.4rem 0;
    text-align: left;
    font-size: 1.9em;
    border-bottom: 2px solid var(--nxsam-blue, #1a5fb4);
    break-after: avoid;
    page-break-after: avoid;
  }

  #print-site-page section.print-page.md-section > h1 + section.print-page {
    page-break-before: avoid;
    break-before: avoid;
  }

  /*
   * Screenshots are captured at 3200×1800 for the online build and for reuse. Rendered at
   * full width in print one figure fills most of a page, pushes the text explaining it onto
   * the next, and leaves the page before it half empty.
   *
   * A bounded height keeps a figure with its explanation. The full-resolution image is one
   * click away in the HTML build, and is what the marketing set exists for.
   */
  .md-typeset figure img[src*="screenshots"] { max-height: 11cm; width: auto; }
  .md-typeset figure { text-align: center; }

  /* No single line of a paragraph stranded across a page boundary. */
  .md-typeset p, .md-typeset li { orphans: 3; widows: 3; }
}

/* --------------------------------------------------------------------------
   Internal-use banner (support handbook only)

   Rendered by brand/overrides/main.html into Material's `announce` block, and
   only when the target carries `internal: true`. The customer manual never
   emits the element, so none of this applies there.

   Deliberately loud. It sits above the header on every page because the risk
   it addresses is a support engineer screen-sharing a handbook page in a
   customer call -- and the tell has to be visible in a glance at the top of
   the window, not in a footer nobody scrolls to.
   -------------------------------------------------------------------------- */
.nxsam-internal-banner {
  display: flex;
  gap: .5rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: .45rem 1rem;
  background: #8F000E;
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
}

.nxsam-internal-banner strong { font-weight: 800; }

/* The banner is a statement about the document, not decoration -- it must
   survive a print or a PDF-from-browser as well. */
@media print {
  .nxsam-internal-banner {
    background: #8F000E !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}