/* Authored public presentation shared by the three hosts. Provider tokens and
   the Blocks SCSS bundle remain unchanged: inline examples depend on them. */
.public-site {
    color-scheme: light dark;
    --public-page: #faf9f6;
    --public-panel: #fff;
    --public-text: #17151c;
    --public-muted: #625f6b;
    --public-border: #dedbe3;
    --public-link: #7912ba;
    --public-error: #b42338;
    --public-tint: #f1e8fa;
    --public-page: light-dark(#faf9f6, #25232b);
    --public-panel: light-dark(#fff, #302d36);
    --public-text: light-dark(#17151c, #f4eff8);
    --public-muted: light-dark(#625f6b, #c2b9cc);
    --public-border: light-dark(#dedbe3, #4a4153);
    --public-link: light-dark(#7912ba, #dda8ff);
    --public-error: light-dark(#b42338, #ff9eae);
    --public-tint: light-dark(#f1e8fa, #382a45);
    --public-violet: #9317e1;
    --public-lavender: #bb61f6;
    --public-pink: #e03d76;
    --public-action: #9317e1;
    --public-action-hover: #7b10c1;
    --public-gutter: clamp(1.25rem, 4vw, 3rem);
    background: var(--public-page);
    color: var(--public-text);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    letter-spacing: normal;
}

/* Honor an explicit host theme if supplied; otherwise follow system preference.
   No app-wide ThemeProvider values or stored preferences are changed. */
[data-bs-theme="light"] .public-site { color-scheme: light; }
[data-bs-theme="dark"] .public-site { color-scheme: dark; }

.public-site .public-container,
.public-chrome > .container,
.public-navigation .b-top-bar > .container {
    width: 100%;
    max-width: 78rem;
    padding-inline: var(--public-gutter);
    margin-inline: auto;
}

.public-site :is(.public-chrome, .public-catalog, .public-course-content, .public-auth-content, .public-forum, .public-preview-toolbar) a:not(.btn) {
    color: var(--public-link);
    text-decoration-thickness: .08em;
    text-underline-offset: .2em;
}

.public-site :is(.public-chrome, .public-catalog, .public-course-content, .public-auth-content, .public-forum) .text-muted {
    color: var(--public-muted) !important;
}

.public-site :is(.public-chrome, .public-catalog, .public-course-content, .public-auth-content, .public-forum) .text-primary {
    color: var(--public-link) !important;
}

.public-site :is(.public-chrome, .public-catalog, .public-course-content, .public-auth-content, .public-forum) .text-dark {
    color: var(--public-text) !important;
}

.public-site :is(.public-catalog, .public-course-content, .public-auth-content, .public-forum, .public-preview-toolbar) .btn-primary {
    color: #fff;
    background: var(--public-action);
    border-color: var(--public-action);
}

.public-site :is(.public-catalog, .public-course-content, .public-auth-content, .public-forum, .public-preview-toolbar) .btn-primary:hover {
    background: var(--public-action-hover);
    border-color: var(--public-action-hover);
}

.public-site :is(.public-course-content, .public-auth-content, .public-forum, .public-preview-toolbar) .btn-outline-primary {
    color: var(--public-link);
    border-color: var(--public-link);
}

.public-site :is(.public-course-content, .public-auth-content, .public-forum, .public-preview-toolbar) .btn-outline-primary:hover {
    background: var(--public-tint);
}

.public-site :is(.public-chrome, .public-catalog, .public-course-content, .public-auth-content, .public-forum, .public-preview-toolbar) :is(a, button):focus-visible,
.public-preview-content:focus-visible {
    outline: 2px solid var(--public-link);
    outline-offset: 3px;
}

.public-navigation { position: sticky; top: 0; z-index: 1030; }

.public-site > .public-navigation .b-top-bar {
    height: auto;
    min-height: 4rem;
    background: var(--public-page) !important;
    border-bottom: 1px solid var(--public-border);
    padding-block: .75rem;
}

.public-navigation .b-top-bar :is(.nav-link, .navbar-brand, .navbar-toggler) {
    color: var(--public-text) !important;
    font-size: 1rem;
}

.public-navigation .b-top-bar .nav-link {
    padding-block: .5rem;
    overflow-wrap: anywhere;
}

.public-navigation .b-top-bar :is(.nav-link:hover, .nav-link.active) {
    color: var(--public-link) !important;
}

.public-navigation .navbar-toggler {
    border-color: var(--public-border);
}

.public-navigation .navbar-toggler-icon {
    background-image: none;
    position: relative;
}

.public-navigation .navbar-toggler-icon::before {
    content: "";
    position: absolute;
    inset: .4rem .15rem;
    border-block: 2px solid currentColor;
    background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}

.public-navigation .dropdown-menu {
    background: var(--public-panel);
    border-color: var(--public-border);
    max-width: calc(100vw - 2 * var(--public-gutter));
}

.public-navigation .dropdown-item {
    color: var(--public-text) !important;
    white-space: normal;
    overflow-wrap: anywhere;
}

.public-navigation :is(.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active) {
    background: var(--public-tint);
}

.public-footer {
    background: var(--public-page);
    color: var(--public-text);
    border-color: var(--public-border) !important;

    font-size: 1rem;
}

.public-footer a { text-decoration: none; }
.public-footer a:hover { text-decoration: underline; }
.public-footer h5 { font-size: 1rem; font-weight: 700; }
.public-footer li a { display: inline-block; padding-block: .2rem; }

/* Hero surfaces are direct children of full-width public layouts. Only their
   reading content uses the shared container; no viewport-width breakout is needed. */
.public-hero {
    position: relative;
    isolation: isolate;
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.public-hero__content { z-index: 1; }
.public-hero h1 {
    font-size: clamp(2.65rem, 4.9vw, 4.75rem);
    line-height: 1.08;
    letter-spacing: -.045em;
    overflow-wrap: anywhere;
}
.public-intro p {
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    color: var(--public-muted);
}
.public-accent { color: var(--public-link); }

/* Clip only the decorative layers at the page edges. Fade their lower edge so
   paths can extend beyond a section without a rectangular cut or content clipping. */
.public-decoration {
    position: absolute;
    z-index: 0;
    inset: -1rem 0 -2rem auto;
    width: clamp(14rem, 32vw, 38rem);
    pointer-events: none;
    overflow: clip;
    opacity: var(--public-art-opacity, .28);
    mask-image: linear-gradient(90deg, transparent, #000 35%), linear-gradient(180deg, #000 65%, transparent);
    mask-composite: intersect;
}
.public-decoration svg {
    position: absolute;
    width: clamp(28rem, 42vw, 42rem);
    height: auto;
    right: clamp(-12rem, -10vw, -5rem);
    top: 50%;
    transform: translateY(-50%);
}
.public-decoration[data-side="left"] {
    inset-inline: 0 auto;
    width: clamp(3rem, calc((100% - 78rem) / 2 + var(--public-gutter)), 14rem);
    opacity: .18;
    mask-image: linear-gradient(90deg, #000, transparent), linear-gradient(180deg, transparent, #000 40%, transparent);
}
.public-decoration[data-side="left"] svg {
    width: 26rem;
    left: -18rem;
    right: auto;
    top: 65%;
    transform: translateY(-50%) scaleX(-1);
}
.public-hero--learning {
    background: linear-gradient(100deg, var(--public-page) 35%, color-mix(in srgb, var(--public-tint) 55%, var(--public-page)));
}
.public-hero--catalog,
.public-hero--support,
.public-hero--section { padding-block: clamp(2rem, 4vw, 3rem); }
.public-hero--catalog { --public-art-opacity: .24; }
.public-hero--catalog h1 { font-size: clamp(2.5rem, 4.4vw, 4.25rem); }
.public-hero--support { --public-art-opacity: .2; }
.public-hero--support h1 { font-size: clamp(2.25rem, 3.5vw, 3.25rem); }
.public-hero--section { --public-art-opacity: .12; margin-bottom: 3rem; border-bottom: 1px solid var(--public-border); }
.public-hero--course { --public-art-opacity: .2; background: var(--public-tint); }
.public-hero--course .public-decoration { width: clamp(3rem, calc((100% - 78rem) / 2 + 5rem), 24rem); }
.public-hero--course .public-decoration[data-side="left"] { opacity: .12; }

.public-course-count { color: var(--public-link); }
.public-catalog-card.card {
    background: var(--public-panel);
    color: var(--public-text);
    border: 1px solid var(--public-border) !important;
    border-radius: .625rem;
}
.public-catalog-card > .card-body { border-color: var(--public-border) !important; }
.public-catalog-card > .card-body:last-child { border-radius: 0 0 .625rem .625rem; }
.public-catalog-link:hover .public-catalog-card { border-color: var(--public-link) !important; }

.public-section-intro--accent { background: radial-gradient(ellipse at right top, rgb(187 97 246 / .12), transparent 65%); }
.public-section-intro h1 { font-size: clamp(2.5rem, 4.4vw, 4.25rem); line-height: 1.1; letter-spacing: -.035em; font-weight: 700; overflow-wrap: anywhere; }
.public-section-intro p.text-muted { color: var(--public-muted) !important; }
.public-back-link { color: var(--public-link) !important; }
.public-block-heading h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; letter-spacing: -.025em; }
.public-block-heading p { max-width: 52rem; color: var(--public-muted); }
.public-preview { border-color: var(--public-border) !important; border-radius: .625rem; }
.public-preview-toolbar { background: var(--public-panel); border-color: var(--public-border) !important; border-radius: .625rem .625rem 0 0; }
.public-preview-toolbar .btn:not(.btn-primary) { color: var(--public-text); }
.public-preview-toolbar .btn:not(.btn-primary):hover { background: var(--public-tint); }

/* Inline product examples keep their original host appearance and provider
   variables, including when the surrounding public shell follows dark mode. */
.public-preview-content {
    color-scheme: light;
    color: #3f4d62;
    background: #fff;
    font-family: Inter, "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .00938em;
    border-radius: 0 0 .625rem .625rem;
}
.public-preview-content .blazorise-codeblock { font-size: .9375rem; }

.public-site :is(.public-course-content, .public-auth-content) .card {
    color: var(--public-text);
    background: var(--public-panel) !important;
    border: 1px solid var(--public-border) !important;
    border-radius: .625rem;
}
.public-site :is(.public-course-content, .public-auth-content) .card-header { border-color: var(--public-border); }
.public-site :is(.public-course-content, .public-auth-content) .bg-light { background: var(--public-tint) !important; color: var(--public-text); }
.public-site :is(.public-course-content, .public-catalog) :is(small, .small) { font-size: .875rem; }
.public-course-content .badge { white-space: normal; line-height: 1.5; font-size: .875rem; }
.public-course-content h2 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); letter-spacing: -.025em; }
.public-course-content .public-aside-heading { font-size: 1.25rem; letter-spacing: normal; }
.public-course-description { border-color: var(--public-border) !important; }
.public-course-content .accordion {
    --bs-accordion-bg: var(--public-panel);
    --bs-accordion-color: var(--public-text);
    --bs-accordion-border-color: var(--public-border);
    --bs-accordion-btn-color: var(--public-text);
    --bs-accordion-active-color: var(--public-link);
    --bs-accordion-active-bg: var(--public-tint);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--public-link) 22%, transparent);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a7b99' stroke-width='2' viewBox='0 0 16 16'%3E%3Cpath d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
}
.public-course-content .list-group {
    --bs-list-group-bg: var(--public-panel);
    --bs-list-group-color: var(--public-text);
    --bs-list-group-border-color: var(--public-border);
}
.public-course-hero h1 { font-size: clamp(2.5rem, 4.4vw, 4.25rem); }
.public-course-outcome { border-left: 3px solid var(--public-lavender); background: var(--public-tint); }
.public-course-content .public-course-cover {
    background: repeating-linear-gradient(135deg, transparent 0 2rem, rgb(187 97 246 / .08) 2rem 4rem), var(--public-tint);
    color: var(--public-link);
}
.public-course-hero .public-course-outcome { background: var(--public-page); }
.public-course-hero :is(h1, p, .public-course-outcome),
.public-course-card :is(h3, p),
.public-course-description { overflow-wrap: anywhere; }
.public-course-card h3 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -.025em; }

.public-auth {
    background-image: radial-gradient(ellipse at 0 12rem, rgb(187 97 246 / .12), transparent 34rem);
}
.public-auth__header,
.public-auth__footer { padding-inline: var(--public-gutter); border-color: var(--public-border) !important; }

.public-brand { color: var(--public-text) !important; }
.public-auth-content { max-width: 72rem; padding-inline: var(--public-gutter); }
.public-auth-content h1 { font-size: clamp(2.5rem, 4.4vw, 4.25rem); line-height: 1.1; letter-spacing: -.035em; font-weight: 700; overflow-wrap: anywhere; }
/* Education forms also appear in internal layouts; keep this adjustment public. */
.public-auth-content > .container .card-body { padding: clamp(1.25rem, 3vw, 2.5rem) !important; }
.public-auth__footer { color: var(--public-muted); }

.public-site :is(.public-auth-content, .public-catalog) :is(label, .form-control, .form-select, .form-text, small, .small, .invalid-feedback, .valid-feedback, .validation-message) { font-size: 1rem; }
.public-site :is(.public-auth-content, .public-catalog, .public-forum) :is(.form-control, .form-select) {
    background-color: var(--public-panel);
    color: var(--public-text);
    border-color: var(--public-border);
}
.public-site :is(.public-auth-content, .public-catalog, .public-forum) .form-control::placeholder { color: var(--public-muted); opacity: 1; }
.public-site :is(.public-auth-content, .public-catalog) .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a7b99' stroke-width='2' viewBox='0 0 16 16'%3E%3Cpath d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
}
.public-auth-content :is(.form-control, .form-select):disabled { opacity: .65; }
.public-site :is(.public-auth-content, .public-catalog, .public-forum) :is(.form-control, .form-select):focus {
    border-color: var(--public-link);
    box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--public-link) 22%, transparent);
    outline: none;
}
.public-site :is(.public-auth-content, .public-catalog) :is(.invalid-feedback, .validation-message) { color: var(--public-error); }
.public-site :is(.public-auth-content, .public-catalog, .public-forum) :is(.form-control, .form-select).is-invalid { border-color: var(--public-error); }
.public-auth-content .form-text { color: var(--public-muted); }
.public-auth-content .btn-info { background: #0a66c2; border-color: #0a66c2; color: #fff; }

/* The forum homepage opts into this surface; issue editors and administration
   keep the existing application layout and provider appearance. */
.public-forum :is(.form-control, label) { font-size: 1rem; }
.public-forum :is(.btn-link, .dropdown-toggle) { color: var(--public-link); }
.public-forum .public-forum-filters { border-color: var(--public-border) !important; }
.public-forum .dropdown { max-width: 100%; }
.public-forum .dropdown-toggle { white-space: normal; overflow-wrap: anywhere; }
.public-forum .dropdown-menu {
    background: var(--public-panel);
    border-color: var(--public-border);
    max-width: min(26rem, calc(100vw - 2 * var(--public-gutter)));
}
.public-forum .dropdown-item { color: var(--public-text); white-space: normal; overflow-wrap: anywhere; }
.public-forum :is(.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active) { background: var(--public-tint); color: var(--public-link); }
.public-forum-filter-value { background: var(--public-tint); color: var(--public-link); border-radius: .375rem; overflow-wrap: anywhere; }
.public-forum-pinned { margin-bottom: 2rem; }
.public-forum-issues { border: 1px solid var(--public-border); border-radius: .625rem; background: var(--public-panel); }
.public-forum-pinned .public-forum-issues { background: var(--public-tint); }
.public-site .public-forum a.public-forum-issue { color: var(--public-text); overflow-wrap: anywhere; }
.public-forum-issue + .public-forum-issue { border-top: 1px solid var(--public-border); }
.public-forum-issue:first-child { border-start-start-radius: .625rem; border-start-end-radius: .625rem; }
.public-forum-issue:last-child { border-end-start-radius: .625rem; border-end-end-radius: .625rem; }
.public-forum-issue:hover { background: var(--public-tint); }
.public-forum-issue:hover h3 { color: var(--public-link); text-decoration: underline; text-underline-offset: .2em; }
.public-forum-issue h3 { line-height: 1.4; }
.public-forum-issue :is(small, .small, .badge) { font-size: .875rem; }
.public-forum-issue .badge { white-space: normal; line-height: 1.5; text-align: start; }
.public-forum-state { background: var(--public-panel); border: 1px solid var(--public-border); border-radius: .625rem; }
.public-forum .pagination {
    --bs-pagination-bg: var(--public-panel);
    --bs-pagination-color: var(--public-link);
    --bs-pagination-border-color: var(--public-border);
    --bs-pagination-hover-bg: var(--public-tint);
    --bs-pagination-hover-color: var(--public-link);
    --bs-pagination-hover-border-color: var(--public-border);
    --bs-pagination-focus-bg: var(--public-tint);
    --bs-pagination-focus-color: var(--public-link);
    --bs-pagination-active-bg: var(--public-action);
    --bs-pagination-active-border-color: var(--public-action);
    --bs-pagination-active-color: #fff;
    --bs-pagination-disabled-bg: var(--public-page);
    --bs-pagination-disabled-color: var(--public-muted);
    --bs-pagination-disabled-border-color: var(--public-border);
}

@media (max-width: 1199.98px) {
    .public-navigation .navbar-collapse { max-height: calc(100dvh - 6rem); overflow-y: auto; }
    .public-decoration[data-side="left"] { display: none; }
}

@media (max-width: 991.98px) {
    .public-hero { --public-art-opacity: .12; }
    .public-hero--course .public-decoration { width: 6rem; }
    .public-navigation .navbar-nav { gap: .25rem; }
}

@media (max-width: 575.98px) {
    .public-decoration { display: none; }
}

@media (forced-colors: active) {
    .public-decoration { display: none; }
    .public-site :is(.public-auth-content, .public-catalog, .public-forum) :is(.form-control, .form-select):focus { outline: 2px solid Highlight; }
}