/* Extracted from Layout/MainLayout.razor (inline <style>) so the rules are cached
   once instead of shipping inside every Blazor render. */
    /* Showcase Layout Styles */
    .showcase-layout-wrapper {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        /* clip (not hidden): hidden forces overflow-y to compute to auto, turning
           this wrapper into a nested scroll container that breaks the sticky header
           and spawns a stray scrollbar. clip suppresses horizontal overflow only. */
        overflow-x: clip;
    }

    .showcase-app-layout {
        flex: 1;
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow-x: clip;
    }

    .showcase-appbar {
        backdrop-filter: blur(10px);
        background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-primary-darken)) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), var(--egk-shadow-md);
        overflow: visible;
        /* Pin the header so it stays visible on scroll. `sticky` keeps it in normal
           flow (no spacer/offset needed) while the window remains the scroll root. */
        position: sticky;
        top: 0;
        z-index: var(--egk-z-appbar, 1200);
        transition: box-shadow var(--egk-dur-fast, 150ms) ease, border-color var(--egk-dur-fast, 150ms) ease;
    }

    .showcase-appbar--scrolled {
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18), var(--egk-shadow-md);
        border-bottom-color: rgba(255, 255, 255, 0.14);
    }

    .showcase-appbar .mud-container {
        gap: 12px;
        flex-wrap: nowrap;
        min-width: 0;
        max-width: 100%;
    }

    .showcase-nav-host {
        min-width: 0;
        display: flex;
        align-items: center;
    }

    .showcase-logo-button {
        text-transform: none;
        padding: 8px 16px;
        border-radius: 12px;
        transition: all 0.3s ease;
    }

        .showcase-logo-button:hover {
            background-color: rgba(255, 255, 255, 0.1);
            transform: translateY(-1px);
        }

    .brand-title {
        line-height: 1;
        font-weight: 700;
        letter-spacing: -0.5px;
    }

    .brand-subtitle {
        line-height: 1;
        color: var(--egk-on-brand-muted);
        font-weight: 500;
    }

    .showcase-actions .action-item {
        display: flex;
        align-items: center;
    }

    .showcase-actions {
        flex-shrink: 0;
    }

    .theme-toggle, .theme-customize-btn {
        border-radius: 8px;
        transition: all 0.2s ease;
    }

        .theme-toggle:hover, .theme-customize-btn:hover {
            background-color: rgba(255, 255, 255, 0.1);
            transform: scale(1.05);
        }

    .showcase-main-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow-x: clip;
    }

    /* The public marketing layout only uses a temporary (overlay) theme drawer and
       has no persistent navigation drawer, so the main content must never reserve
       side margin. Without this, MudBlazor's drawer container can offset the content
       (notably in RTL), leaving a large empty gutter and breaking the page width. */
    .showcase-app-layout {
        width: 100%;
    }

    .showcase-app-layout > .mud-main-content,
    .mud-layout > .showcase-main-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        inset-inline-start: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .public-app.showcase-layout-wrapper,
    .public-app .showcase-app-layout,
    .public-app .showcase-appbar,
    .public-app .showcase-main-content,
    .public-app .showcase-footer {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        overflow-x: clip !important;
    }

    .public-app--docs.showcase-layout-wrapper,
    .public-app--docs .showcase-app-layout,
    .public-app--docs .showcase-main-content,
    .public-app--docs .mud-layout,
    .public-app--docs .docs-layout-shell,
    .public-app--docs .docs-layout-container,
    .public-app--docs .docs-layout-grid,
    .public-app--docs .docs-layout-sidebar,
    .public-app--docs .docs-layout-main {
        overflow-y: visible !important;
    }

    /* Root-level horizontal guard: prevent any descendant from forcing the document
       wider than the viewport (which in RTL shows up as a left-side empty band).
       The window stays the single scroll root, so the sticky header pins correctly. */
    html,
    body {
        max-width: 100%;
        overflow-x: clip;
    }

    .showcase-footer {
        background:
            radial-gradient(circle at 10% 0%, rgba(var(--mud-palette-primary-rgb), 0.06), transparent 32%),
            linear-gradient(180deg, rgba(var(--mud-palette-surface-rgb), 0.98), var(--mud-palette-surface));
        border-top: 1px solid var(--mud-palette-divider);
        margin-top: auto;
    }

    .footer-container-public {
        position: relative;
    }

    /* Footer links read as clean, modern navigation — not underlined prose.
       Specificity here intentionally beats the global .mud-link contrast rule
       (color + medium weight already give links sufficient visual distinction
       against the secondary-gray footer text, per WCAG 1.4.1). */
    .public-app .showcase-footer a.mud-link:not(.mud-button-root) {
        text-decoration: none;
    }

    .public-app .showcase-footer a.mud-link:not(.mud-button-root):hover {
        text-decoration: none;
    }

    .footer-main-grid {
        align-items: stretch;
    }

    .footer-brand {
        max-width: 380px;
    }

    .footer-contact-compact {
        display: grid;
        gap: 8px;
    }

    .footer-contact-row {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .footer-contact-row a,
    .footer-contact-row .mud-typography {
        overflow-wrap: anywhere;
    }

    .footer-contact-row a:hover {
        color: var(--mud-palette-primary) !important;
    }

    .legal-links a.mud-link {
        opacity: 0.85;
        transition: opacity 0.2s ease, color 0.2s ease;
    }

    .legal-links a.mud-link:hover {
        opacity: 1;
        color: var(--mud-palette-primary) !important;
    }

    .footer-social-inline {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 4px;
    }

    .footer-links a {
        text-decoration: none;
        transition: all 0.2s ease;
        padding: 4px 0;
        border-radius: 4px;
    }

        .footer-links a:hover {
            color: var(--mud-palette-primary) !important;
            transform: translateX(4px);
            text-decoration: none;
        }

    .footer-certifications {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .footer-trust-pills {
        gap: 6px;
    }

    .footer-social {
        display: flex;
        gap: 8px;
    }

    .footer-newsletter-card {
        height: 100%;
        border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.16);
        border-radius: 18px;
        background:
            radial-gradient(circle at top right, rgba(var(--mud-palette-primary-rgb), 0.14), transparent 46%),
            linear-gradient(180deg, rgba(var(--mud-palette-background-gray-rgb), 0.24), rgba(var(--mud-palette-surface-rgb), 0.88));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .newsletter-input .mud-input-root {
        background: rgba(var(--mud-palette-background-gray-rgb), 0.28);
    }

    .footer-compact-row {
        row-gap: 14px;
    }

    .footer-legal-inline {
        max-width: 100%;
    }

    .footer-compact-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
    }

    .footer-compact-heading,
    .footer-compact-label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .footer-compact-assurance {
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 18px 32px;
    }

    .footer-compact-compliance {
        align-items: flex-start;
    }

    .footer-social-enhanced {
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }

    .social-icon-enhanced {
        border: 1px solid rgba(var(--mud-palette-lines-default-rgb), 0.42);
        background: rgba(var(--mud-palette-background-gray-rgb), 0.32);
        transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    }

    .social-icon-enhanced:hover {
        transform: translateY(-2px);
        border-color: rgba(var(--mud-palette-primary-rgb), 0.35);
        background: rgba(var(--mud-palette-primary-rgb), 0.08);
    }

    .footer-tech-stack,
    .footer-certifications-enhanced {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: flex-start;
    }

    .certification-badge {
        font-weight: 700;
    }

    .legal-links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
    }

    .legal-btn {
        min-height: 24px;
        padding-inline: 4px;
        text-transform: none;
    }

    .footer-powered-link {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }

    .footer-powered-icon {
        font-size: 0.92rem !important;
        width: 0.92rem !important;
        height: 0.92rem !important;
    }

    .footer-tech-badge {
        margin-left: auto;
    }

    /* Accessibility Enhancements */
    .high-contrast .showcase-appbar {
        border-bottom: 2px solid var(--mud-palette-primary);
    }

    .reduced-motion * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .compact-mode .showcase-appbar {
        min-height: 48px;
    }

    .compact-mode .showcase-footer {
        padding: 24px 0;
    }

    /* Mobile Responsiveness */
    @media (max-width: 1200px) {
        .showcase-appbar {
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
    }

    @media (max-width: 768px) {
        .showcase-appbar .mud-container {
            gap: 8px;
        }

        .showcase-actions .action-item {
            margin-right: 8px !important;
        }

        .brand-text {
            display: none;
        }

        .showcase-logo-button {
            padding: 8px;
        }

        .theme-customize-btn {
            display: none !important;
        }

        .footer-brand {
            max-width: 100%;
        }

        .footer-tech-badge {
            margin-left: 0;
            margin-top: 16px;
        }

        .footer-social-inline,
        .footer-compact-assurance,
        .footer-compact-compliance {
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .footer-compact-assurance {
            gap: 14px;
        }
    }

    @media (max-width: 600px) {
        .showcase-actions {
            gap: 4px;
        }

        .showcase-actions .action-item {
            margin-right: 4px !important;
        }
    }

    /* Dark Mode Enhancements */
    .mud-theme-dark .showcase-footer {
        background: var(--mud-palette-dark-surface);
        border-top-color: var(--mud-palette-dark-divider);
    }

    .mud-theme-dark .footer-links a:hover {
        background-color: rgba(var(--mud-palette-primary-rgb), 0.1);
        padding: 4px 8px;
        margin: 0 -8px;
    }

    /* RTL Support - scope all directional overrides to RTL only */
    [dir="rtl"] {
        .mud-scroll-to-top {
            right: unset !important;
            left: 24px !important;
        }

        .footer-links a:hover {
            transform: translateX(-4px);
        }

        .brand-text {
            margin-right: 0;
            margin-left: 8px;
        }

        .showcase-logo-button {
            padding-left: 16px;
            padding-right: 8px;
        }

        .mr-2 { margin-left: 0.5rem !important; margin-right: 0 !important; }
        .ml-2 { margin-right: 0.5rem !important; margin-left: 0 !important; }
        .mr-4 { margin-left: 1.5rem !important; margin-right: 0 !important; }
        .ml-4 { margin-right: 1.5rem !important; margin-left: 0 !important; }

        .text-right { text-align: left !important; }
        .text-left { text-align: right !important; }

        .flex-row { flex-direction: row-reverse !important; }
        .flex-row-reverse { flex-direction: row !important; }

        .footer-tech-badge { margin-right: auto; margin-left: 0; }
    }

    /* Theme-specific enhancements that respond to theme changes */
    .showcase-layout-wrapper {
        transition: all 0.3s ease;
    }

    /* Apply border radius from theme preferences */
    .showcase-logo-button,
    .theme-toggle,
    .theme-customize-btn {
        border-radius: var(--mud-default-borderradius, 8px);
    }

    /* Font scaling support */
    body {
        font-size: calc(var(--mud-typography-default-size, 14px) * var(--font-scale-factor, 1));
    }

    /* Scroll to Top Button - unscoped to ensure styles reach inside MudFab */
    .scroll-to-top-btn {
        background: var(--mud-palette-primary) !important;
        color: var(--egk-color-primary-text) !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        border-radius: 50% !important;
        border: 2px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15) !important;
        transition: all 0.3s ease !important;
    }

    .scroll-to-top-btn:hover {
        transform: translateY(-4px) scale(1.06);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2) !important;
        border-color: rgba(255, 255, 255, 0.25) !important;
    }

    .scroll-to-top-btn .mud-icon-root,
    .scroll-to-top-btn .mud-svg-icon,
    .scroll-to-top-btn svg {
        color: var(--egk-color-primary-text) !important;
        fill: currentColor !important;
    }

    @media (max-width: 768px) {
        .scroll-to-top-btn {
            width: 44px !important;
            height: 44px !important;
            min-width: 44px !important;
        }
    }