@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lcdo7z9xd2.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* App shell — centers the entire layout (header + body + footer) with a
   max-width, sitting on a slightly tinted page bg so the layout reads
   as a card-shaped container. Flex column so the middle stack can fill
   remaining height and pin the footer to the viewport bottom even when
   page content is short. */
.app-shell[b-balzwm147b] {
    max-width: 96rem;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--neutral-layer-1);
    box-shadow: 0 0 0 1px var(--neutral-stroke-divider-rest);
}

/* Middle stack between FluentHeader and FluentFooter — sidebar + body.
   flex: 1 makes it grow to fill remaining vertical space so the footer
   stays at the bottom on short pages. min-height: 0 lets the inner body
   scroll instead of overflowing the shell. */
[b-balzwm147b] .main-stack {
    flex: 1 1 auto;
    min-height: 0;
}

/* Kill default focus outlines on headings — Markdig auto-identifier adds
   tabindex="-1" to every heading so anchor IDs work, and clicking gives
   focus + browser default outline that reads as a "selected" box. */
[b-balzwm147b] h1, [b-balzwm147b] h2, [b-balzwm147b] h3, [b-balzwm147b] h4, [b-balzwm147b] h5, [b-balzwm147b] h6 {
    outline: none !important;
}

/* Body content padding — FluentBodyContent is a <div class="body-content">,
   we add our own surface padding via Class="site-body". */
[b-balzwm147b] .site-body {
    padding: 1.5rem 2rem;
    overflow-x: auto;
}

/* Eyebrow label — small uppercase tag used as section header above lists
   (right rails, footer columns, etc.). One class instead of repeating the
   same inline Style on each FluentLabel. */
[b-balzwm147b] .eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem !important;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    padding: 0 0.5rem 0.5rem;
}

/* Two-column page layout — main + right rail. Pages opt in by wrapping
   their content in <FluentStack Class="page-with-rail" ...>. */
[b-balzwm147b] .page-with-rail {
    align-items: flex-start;
}

[b-balzwm147b] .page-with-rail > main {
    flex: 1 1 auto;
    min-width: 0;
}

[b-balzwm147b] .page-with-rail > .sidebar-rail,
[b-balzwm147b] .page-with-rail > .article-rail {
    flex: 0 0 240px;
}

[b-balzwm147b] .article-rail {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Footer band — small text, neutral tone, padded; matches FluentUI demo
   pattern. */
[b-balzwm147b] .site-footer {
    background: var(--neutral-layer-4);
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    padding: 0.75rem 1.5rem;
    font-size: 0.8125rem;
    color: var(--neutral-foreground-rest);
}

[b-balzwm147b] .site-footer a {
    color: inherit;
    text-decoration: none;
}

[b-balzwm147b] .site-footer a:hover {
    text-decoration: underline;
}

/* Card link wrappers (Home, Collection product grids). Plain <a> around
   FluentCard so clicks bubble; text-decoration cascades through anchors
   via paint inheritance — kill on the link AND every descendant. */
[b-balzwm147b] .card-link,
[b-balzwm147b] .card-link * {
    text-decoration: none;
}

[b-balzwm147b] .card-link {
    display: block;
    color: inherit;
    height: 100%;
}

[b-balzwm147b] .card-link fluent-card {
    height: 100%;
    transition: transform 120ms ease-out, box-shadow 120ms ease-out;
    cursor: pointer;
}

[b-balzwm147b] .card-link:hover fluent-card {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

[b-balzwm147b] .card-link:focus-visible fluent-card {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

/* Article-row link wrapper for blog index — denser list, no card chrome,
   FluentDivider between rows + hover bg. */
[b-balzwm147b] .article-row,
[b-balzwm147b] .article-row * {
    text-decoration: none;
}

[b-balzwm147b] .article-row {
    display: block;
    color: inherit;
    padding: 1.25rem 1rem;
    border-radius: 6px;
    transition: background-color 100ms ease-out;
    cursor: pointer;
}

[b-balzwm147b] .article-row:hover {
    background: var(--neutral-fill-secondary-hover, rgba(0, 0, 0, 0.04));
}

[b-balzwm147b] .article-row:focus-visible {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}
/* /Components/Shared/ProductCover.razor.rz.scp.css */
.cover-band[b-xgtmt432xs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
    border-radius: 6px;
    color: #fff;
    margin: -0.5rem -0.5rem 0.75rem;
}

.cover-band__category[b-xgtmt432xs] {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.cover-band__format[b-xgtmt432xs] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    background: rgba(255, 255, 255, 0.18);
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
}
/* /Components/Shared/TableOfContents.razor.rz.scp.css */
.toc-list[b-71wii9b1p6] {
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 0.25rem 0;
}

.toc-list a[b-71wii9b1p6] {
    color: var(--neutral-foreground-rest);
    text-decoration: none;
    display: block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: background-color 100ms ease-out;
}

.toc-list a.toc-list__item--sub[b-71wii9b1p6] {
    padding-left: 1.5rem;
    font-size: 0.8125rem;
}

.toc-list a:hover[b-71wii9b1p6] {
    background: var(--neutral-fill-secondary-hover, rgba(0, 0, 0, 0.04));
    color: var(--accent-fill-rest);
}