/* Wiki + blog content typography, plus the two dedicated shells (WikiLayout / BlogLayout). Global
   (loaded in App.razor) rather than scoped, because the same content styles apply under either shell.
   Driven by Radzen theme vars so it follows light/dark — never hardcode a colour here. */
.wiki-page-pad { padding: 1.5rem 2rem; }

/* The reusable wiki owns its own page inset. Let its breadcrumb span the Radzen body and stay flush
   beneath the portal header, matching the original Wiki.js reading surface. */
.rz-body:has(> .wiki-print-page) { padding: 0; }
.wiki-print-page { min-height: 100%; }

/* The wiki now renders inside PortalLayout, which supplies the body padding, so the shell rules that
   went with the dedicated WikiLayout are gone. */

.wiki-title { font-size: 2rem; font-weight: 600; margin: 0 0 1rem; line-height: 1.2; color: var(--rz-text-color); }
.blog-title { font-size: 2.2rem; font-weight: 700; margin: 0 0 0.5rem; line-height: 1.2; color: var(--rz-text-color); }

/* Code blocks, inline code and video letterbox all need a surface a shade off the page. They used
   var(--rz-base-200), but in the standard palette the numbered ramp is a FIXED light scale that
   standard-dark repeats verbatim — so they stayed near-white on a dark page. --rz-base-background-
   color and --rz-text-color do invert; mixing them tracks the theme both ways.
   (--rz-border-normal is a border SHORTHAND, not a colour: `border: var(--rz-border-normal)`.) */
.wiki-content, .video-frame { --wiki-surface: color-mix(in srgb, var(--rz-base-background-color) 92%, var(--rz-text-color)); }

.wiki-content { line-height: 1.65; color: var(--rz-text-color); }
.wiki-content h1, .wiki-content h2, .wiki-content h3, .wiki-content h4,
.wiki-content h5, .wiki-content h6 { margin: 1.4rem 0 0.6rem; color: var(--rz-text-color);
                                     scroll-margin-top: 1rem; }
.wiki-content p, .wiki-content li { color: var(--rz-text-color); }
.wiki-content pre { background: var(--wiki-surface); color: var(--rz-text-color); padding: 0.75rem 1rem;
                    border-radius: var(--rz-border-radius); overflow: auto; }
.wiki-content code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.wiki-content :not(pre) > code { background: var(--wiki-surface); padding: 0.1rem 0.3rem; border-radius: 4px; }
.wiki-content a { color: var(--rz-link-color, var(--rz-primary)); text-decoration: underline; }
.wiki-content img { max-width: 100%; height: auto; }
/* Imported SOP pages carry wide tables; scroll them rather than the page. */
.wiki-content table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; }
.wiki-content th, .wiki-content td { border: var(--rz-border-normal); padding: 0.35rem 0.6rem; }

/* Search results: snippet() returns HTML with the matched terms wrapped in <mark>. */
.wiki-search-snippet { color: var(--rz-text-color); line-height: 1.5; }
.wiki-search-snippet mark { background: var(--rz-warning-light); color: var(--rz-on-warning-light);
                            padding: 0 2px; border-radius: 2px; }

/* Monaco brings its own chrome, so the frame only supplies the border that ties it to the preview. */
.wiki-editor-frame { border: var(--rz-border-normal); border-radius: var(--rz-border-radius);
                     overflow: hidden; }

/* Prev / All posts / Next, sitting under a post. */
.blog-nav { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
            margin-top: 2.5rem; padding-top: 1rem; border-top: var(--rz-border-normal); }
.blog-nav-side { flex: 1 1 0; min-width: 0; }
.blog-nav-next { text-align: right; }
.blog-nav a { text-decoration: none; }

/* Training-video library (/videos). The tab strip is a fixed column so long category names don't
   squeeze the player, and each embed keeps a 16:9 box so the iframe never letterboxes itself. */
.video-tabs .rz-tabview-nav { min-width: 190px; }
/* The list headers link to /videos/{YtKey}; heading-coloured like the blog's linked titles, with
   the underline arriving on hover. Two classes: the theme's .rz-link (primary blue) loads after
   this sheet and beats a single-class selector. */
.video-item .video-title-link, .video-item .video-title-link:visited { color: inherit;
                                                                       text-decoration: none; }
.video-item .video-title-link:hover, .video-item .video-title-link:focus-visible {
  text-decoration: underline; text-underline-offset: 0.2em; }
.video-item { max-width: 900px; }
.video-frame { position: relative; aspect-ratio: 16 / 9; width: 100%;
               border-radius: var(--rz-border-radius); overflow: hidden;
               background: var(--wiki-surface); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media print {
  @page { margin: 14mm; }

  body:has(.wiki-print-page) { background: #fff !important; }
  body:has(.wiki-print-page) .rz-header,
  body:has(.wiki-print-page) .rz-sidebar,
  .wiki-print-page .rz-progressbar-circular { display: none !important; }

  body:has(.wiki-print-page) .rz-layout,
  body:has(.wiki-print-page) .rz-body { display: block !important; position: static !important;
                                       width: auto !important; height: auto !important;
                                       margin: 0 !important; padding: 0 !important;
                                       overflow: visible !important; }
  .wiki-print-page .fcs-wiki-browser { display: block !important; width: 100% !important; }
}