:root {
    /* Editorial palette: deep indigo primary, warm coral accent, slate text. */
    --color-bg: #fbfaff;
    --color-surface: #ffffff;
    --color-surface-soft: #f5f3ff;
    --color-text: #0f172a;
    --color-text-muted: #64748b;
    --color-text-soft: #94a3b8;
    --color-border: #e2e8f0;
    --color-border-strong: #cbd5e1;
    --color-primary: #4f46e5;
    --color-primary-soft: #eef2ff;
    --color-primary-hover: #4338ca;
    --color-accent: #f97316;
    --color-accent-soft: #fff7ed;
    --color-tag-bg: #eef2ff;
    --color-tag-text: #4338ca;

    --page-width: 1120px;
    --prose-width: 720px;
    --page-padding-x: clamp(10px, 2.5vw, 24px);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 16px rgba(79, 70, 229, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 40px rgba(79, 70, 229, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--color-text);
    background-color: var(--color-bg);
    /* Subtle mesh-gradient — two soft radial pools at opposite corners.
       Stays decorative, never dominates. */
    background-image:
        radial-gradient(1100px 600px at -10% -10%, rgba(79, 70, 229, 0.10), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, rgba(249, 115, 22, 0.08), transparent 55%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
}

/* FocusOnNavigate (Routes.razor, Selector="h1") moves focus to the page heading after
   every navigation for screen-reader users — it sets tabindex="-1" and calls .focus(),
   so the browser draws a focus ring around the hero heading on every visit ("the text is
   always bordered"). Suppress the ring for this programmatic (tabindex=-1) focus only;
   real keyboard focus on interactive controls keeps its ring. */
h1:focus,
[tabindex="-1"]:focus {
    outline: none;
}

::selection {
    background: var(--color-primary);
    color: #fff;
}

/* Newsletter status pages (confirmed / unsubscribed / link-invalid). These are
   native SSR routes — no bundle CSS — and shared the .newsletter-result class with
   no styling, so they rendered flush-left and unstyled. Give them the same centred,
   constrained prose layout the rest of the site uses (.site__main already supplies
   the vertical padding, so this only needs width + horizontal padding). */
.newsletter-result {
    max-width: var(--prose-width);
    margin: 0 auto;
    padding: 0 var(--page-padding-x);
}

.newsletter-result h1 {
    margin: 0 0 16px;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.newsletter-result p {
    margin: 0 0 16px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-text-muted);
}

.newsletter-result a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.newsletter-result a:hover {
    text-decoration: underline;
}

/* Phase 119 — the visitor's language switcher (PublicLanguageSwitcher). Global, not scoped
   CSS: the markup is injected into an imported body and rendered as a MarkupString, so it
   carries no `b-…` scope attribute and a `.razor.css` file would never match it.

   Two variants, one markup. The default is the in-nav one, styled to match this bundle's own
   dark nav-link color (`rgba(255,255,255,0.82)`, same as `.nav-links a` / `.nav-dd-menu a`) —
   `color: inherit` looked like the theme-neutral choice but actually picked up PublicWeb's OWN
   body text color, since the bundle never sets one either and its links hardcode white rather
   than relying on inheritance. The menu panel mirrors the bundle's own `.nav-dd-menu` so the
   switcher reads as part of the nav it sits in rather than as a CMS graft. `--floating` is the
   fallback for bodies with no nav to host it and uses this file's own light palette instead. */
.nexo-langsw {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
}

/* The disclosure triangle is the only thing <details> renders that we don't want — three
   selectors because Safari, Chrome and Firefox each removed it at a different time. */
.nexo-langsw > summary {
    list-style: none;
    cursor: pointer;
}

.nexo-langsw > summary::-webkit-details-marker {
    display: none;
}

.nexo-langsw > summary::marker {
    content: "";
}

.nexo-langsw__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.5em 0.7em;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    border-radius: 2px;
    /* Measured on the live nav (2026-07-30): `color: inherit` picked up PublicWeb's OWN
       body text color (#0f172a), not the bundle's — the bundle never sets a body color,
       so the ambient value here comes from app.css, while the bundle's own nav links
       (.nav-links a, .nav-dd-menu a) hardcode rgba(255,255,255,0.82) instead of relying
       on inheritance too. Matching that literal value (rather than `inherit`) is what
       actually reads as "part of the nav" — the visible symptom was dark, low-contrast
       text/icons on the dark blue bar. The floating fallback below overrides this back
       to app.css's own palette, since it renders outside any bundle nav. */
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
}

.nexo-langsw__toggle:hover {
    color: #fff;
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.nexo-langsw__globe {
    width: 14px;
    height: 14px;
    flex: none;
}

.nexo-langsw__caret {
    width: 11px;
    height: 11px;
    flex: none;
    transition: transform 0.18s ease;
}

.nexo-langsw[open] .nexo-langsw__caret {
    transform: rotate(180deg);
}

.nexo-langsw__current {
    font-weight: 500;
}

.nexo-langsw__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 120;
    min-width: 190px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: #0a2742;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    box-shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.6);
}

.nexo-langsw__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.62em 0.75em;
    border-radius: 2px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
}

.nexo-langsw__item:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.nexo-langsw__item--active {
    color: #fff;
}

/* A language with no published translation of THIS page leads to that language's start page.
   Muted so the entry reads as "the site in Italian" rather than "this page in Italian". */
.nexo-langsw__item--fallback .nexo-langsw__name {
    opacity: 0.6;
}

/* Rendered on every entry, visible only on the active one, so the names keep one left edge. */
.nexo-langsw__check {
    width: 13px;
    height: 13px;
    flex: none;
    opacity: 0;
}

.nexo-langsw__item--active .nexo-langsw__check {
    opacity: 1;
}

/* Fallback variant: below the cookie banner's z-index (2147483000) — a consent decision the
   visitor has to make must never end up underneath a language menu. */
.nexo-langsw--floating {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 2147482000;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.nexo-langsw--floating .nexo-langsw__toggle {
    padding: 8px 12px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 999px;
    background: var(--color-surface, #ffffff);
    color: var(--color-text, #0f172a);
    box-shadow: var(--shadow-md, 0 4px 16px rgba(15, 23, 42, 0.1));
    font-size: 12px;
}

.nexo-langsw--floating .nexo-langsw__toggle:hover {
    background: var(--color-surface-soft, #f5f3ff);
}

.nexo-langsw--floating .nexo-langsw__menu {
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-lg, 0 12px 40px rgba(15, 23, 42, 0.14));
}

.nexo-langsw--floating .nexo-langsw__item {
    border-radius: var(--radius-sm, 8px);
    color: var(--color-text-muted, #64748b);
    font-size: 13px;
}

.nexo-langsw--floating .nexo-langsw__item:hover {
    background: var(--color-surface-soft, #f5f3ff);
    color: var(--color-text, #0f172a);
}

.nexo-langsw--floating .nexo-langsw__item--active {
    color: var(--color-primary, #4f46e5);
    font-weight: 600;
}