/* ---------------------------------------------------------------
   پیام‌بان — global styles
   Only what cannot live in the MudTheme: web fonts, document-level
   RTL defaults, anchor scroll offset and the Blazor error banner.
   Everything else is theme tokens, MudBlazor components + utilities.
   --------------------------------------------------------------- */

@font-face {
    font-family: 'Vazirmatn';
    src: url('fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

html {
    scroll-behavior: smooth;
}

body {
    text-wrap: pretty;
}

/* Keep in-page anchors clear of the fixed app bar. */
:target,
[id^="section-"] {
    scroll-margin-top: 96px;
}

/* ---------------------------------------------------------------
   Shared page gutter.
   Every band and the app bar run through a MudContainer carrying
   .site-container, so the whole site lines up on one measure and the
   content never touches the viewport edges on a wide desktop.
   MudContainer is border-box, so these override its default gutters.
   --------------------------------------------------------------- */
.site-container {
    padding-inline: 20px;
}

@media (min-width: 600px) {
    .site-container {
        padding-inline: 32px;
    }
}

@media (min-width: 960px) {
    .site-container {
        padding-inline: 56px;
    }
}

@media (min-width: 1280px) {
    .site-container {
        padding-inline: 72px;
    }
}

/* Frosted app bar. Global rather than isolated: MainLayout's markup is all
   MudBlazor components, so it has no element to hang a scope attribute on.
   The gutter lives on .site-container inside, not on the toolbar, so the
   frosted band still spans the full width while its content stays on measure. */
.site-appbar .mud-toolbar {
    background-color: var(--mud-palette-appbar-background);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--mud-palette-divider);
    padding-inline: 0;
}

.site-appbar__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
}

/* The toolbar must never widen the document: its content is allowed to shrink. */
.site-appbar__inner > * {
    min-width: 0;
}

.site-nav {
    display: none;
    align-items: center;
    gap: 24px;
    white-space: nowrap;
}

@media (min-width: 960px) {
    .site-nav {
        display: flex;
    }
}

/* ---------------------------------------------------------------
   RTL correction for MudGrid.
   MudBlazor offsets grid gutters with the physical `margin-left` and
   `padding-left`. Under dir="rtl" both land on the wrong side, so the grid
   hangs off the start edge of its container and the document picks up a
   horizontal scrollbar. Flip them to the logical side.
   --------------------------------------------------------------- */
[dir="rtl"] .mud-grid[class*="mud-grid-spacing-xs-"] {
    margin-left: 0;
}

[dir="rtl"] .mud-grid[class*="mud-grid-spacing-xs-"] > .mud-grid-item {
    padding-left: 0;
}

[dir="rtl"] .mud-grid-spacing-xs-1 { margin-right: -4px; }
[dir="rtl"] .mud-grid-spacing-xs-1 > .mud-grid-item { padding-right: 4px; }
[dir="rtl"] .mud-grid-spacing-xs-2 { margin-right: -8px; }
[dir="rtl"] .mud-grid-spacing-xs-2 > .mud-grid-item { padding-right: 8px; }
[dir="rtl"] .mud-grid-spacing-xs-3 { margin-right: -12px; }
[dir="rtl"] .mud-grid-spacing-xs-3 > .mud-grid-item { padding-right: 12px; }
[dir="rtl"] .mud-grid-spacing-xs-4 { margin-right: -16px; }
[dir="rtl"] .mud-grid-spacing-xs-4 > .mud-grid-item { padding-right: 16px; }
[dir="rtl"] .mud-grid-spacing-xs-5 { margin-right: -20px; }
[dir="rtl"] .mud-grid-spacing-xs-5 > .mud-grid-item { padding-right: 20px; }
[dir="rtl"] .mud-grid-spacing-xs-6 { margin-right: -24px; }
[dir="rtl"] .mud-grid-spacing-xs-6 > .mud-grid-item { padding-right: 24px; }
[dir="rtl"] .mud-grid-spacing-xs-7 { margin-right: -28px; }
[dir="rtl"] .mud-grid-spacing-xs-7 > .mud-grid-item { padding-right: 28px; }
[dir="rtl"] .mud-grid-spacing-xs-8 { margin-right: -32px; }
[dir="rtl"] .mud-grid-spacing-xs-8 > .mud-grid-item { padding-right: 32px; }
[dir="rtl"] .mud-grid-spacing-xs-9 { margin-right: -36px; }
[dir="rtl"] .mud-grid-spacing-xs-9 > .mud-grid-item { padding-right: 36px; }
[dir="rtl"] .mud-grid-spacing-xs-10 { margin-right: -40px; }
[dir="rtl"] .mud-grid-spacing-xs-10 > .mud-grid-item { padding-right: 40px; }

/* Persian copy reads better slightly looser than the Material default. */
.mud-typography-body1,
.mud-typography-body2 {
    line-height: 1.9;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

#blazor-error-ui {
    color-scheme: light only;
    background: #ffffff;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
    font-family: 'Vazirmatn', system-ui, sans-serif;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        left: 0.75rem;
        top: 0.5rem;
    }