/*
 * TaiGHT Global Styles — Nordic Precision
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--mud-typography-default-family, 'Space Grotesk', system-ui, sans-serif);
    font-size: var(--mud-typography-default-size, 1rem);
    line-height: var(--mud-typography-default-lineheight, 1.6);
    background-color: var(--mud-palette-background, var(--brand-bg));
    color: var(--mud-palette-text-primary, var(--brand-text-primary));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1:focus { outline: none; }

/* Blazor error boundary */
.blazor-error-boundary {
    background-color: var(--mud-palette-error);
    padding: 1rem;
    color: #fff;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* ============================================
   HERO
   ============================================ */
.hero-section {
    position: relative;
    background: var(--gradient-cosmic-cosmos);
    color: var(--mud-palette-appbar-text);
    overflow: hidden;
}

/* Hero logo above the display title (replaces the old "Earth-based" pill) */
.hero-logo {
    width: clamp(120px, 14vw, 180px);
    height: auto;
    display: block;
}

.hero-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.5;
}

/* ============================================
   SECTIONS
   ============================================ */
.section-alt {
    background-color: var(--mud-palette-surface);
}

.section-dark {
    background: var(--mud-palette-secondary);
    color: var(--mud-palette-appbar-text);
}

.section-accent {
    background: var(--gradient-cosmic-cosmos);
    color: var(--brand-almost-white);
}

/* ============================================
   SERVICE CARDS
   ============================================ */
.service-card-icon {
    font-size: var(--typo-headline-2-size) !important;
    width: var(--typo-headline-2-size) !important;
    height: var(--typo-headline-2-size) !important;
    color: var(--brand-aqua-pulse) !important;
    align-self: flex-start;
}

/* ============================================
   SUBTLE EFFECTS
   ============================================ */
.glass-card {
    background: color-mix(in srgb, var(--brand-night-violet) 50%, transparent);
    backdrop-filter: blur(12px);
    border: 1px solid color-mix(in srgb, var(--brand-nebula-violet) 30%, transparent);
}

.hover-lift {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px color-mix(in srgb, var(--brand-nebula-violet) 25%, transparent);
}

/* Gradient text utility */
.gradient-text {
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-tertiary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Brand button variants (per design PDF #5).
   - .btn-primary   = Filled Nebula Violet + Almost White text — the Main CTA
   - .btn-secondary = transparent + Almost White border + Almost White text
   - .btn-tertiary  = text-only, Almost White (defined further down)
   Pair with MudButton Variant="Variant.Filled" / "Variant.Outlined" /
   "Variant.Text" respectively. */
.btn-primary {
    background: var(--brand-nebula-violet) !important;
    color: var(--brand-almost-white) !important;
}
.btn-primary:hover {
    background: var(--brand-galaxy-purple) !important;
}

.btn-secondary {
    border: 1px solid var(--brand-nebula-violet) !important;
    color: var(--brand-almost-white) !important;
    background: transparent !important;
}
.btn-secondary:hover {
    background: color-mix(in srgb, var(--brand-nebula-violet) 15%, transparent) !important;
    border-color: var(--brand-nebula-violet) !important;
}

/* TaiGHT brand — highlight "ai" */
.brand-ai {
    color: var(--brand-aqua-pulse);
    font-style: normal;
}

/* Article body — rendered markdown */
.article-body h2 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    color: var(--mud-palette-text-primary);
}

.article-body h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    color: var(--mud-palette-text-primary);
}

.article-body p {
    color: var(--mud-palette-text-secondary);
    line-height: var(--line-height-article);
    margin-bottom: 1rem;
}

.article-body strong {
    color: var(--brand-aqua-pulse);
    font-weight: 600;
}

/* Long-form paragraph utility — applies the prose line-height
   to brand Body (16px) without changing the font size. Use on
   non-card narrative copy (Privacy paragraphs, About body, etc.)
   where the tight 20px brand line feels cramped.
   Multiple selectors handle plain HTML (<ul>, <p>) and MudText's
   compound class output (.mud-typography.body-prose). */
.body-prose,
.mud-typography.body-prose,
ul.body-prose,
p.body-prose {
    line-height: var(--line-height-prose) !important;
}

.article-body table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.article-body ul,
.article-body ol {
    color: var(--mud-palette-text-secondary);
    line-height: var(--line-height-article);
    margin-bottom: 1rem;
    padding-left: 2rem;
}

/* Aqua Pulse bullets / numbers in article lists. */
.article-body li::marker {
    color: var(--brand-aqua-pulse);
}

.article-body th {
    text-align: left;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    padding: 10px 12px;
    border-bottom: 2px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
}

.article-body td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
    color: var(--mud-palette-text-secondary);
    line-height: 1.6;
}

.article-body tr:hover td {
    background: var(--mud-palette-primary-hover);
}

.article-body li {
    margin-bottom: 0.4rem;
}

.article-body blockquote {
    border-left: 3px solid var(--mud-palette-primary);
    padding-left: 1rem;
    margin: 1.5rem 0;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.article-body code {
    background: var(--mud-palette-surface);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9em;
}

.article-body pre {
    background: var(--mud-palette-surface);
    padding: 1rem;
    border-radius: var(--mud-default-borderradius);
    overflow-x: auto;
    margin-bottom: 1rem;
}

/* Markdown body images */
.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--mud-default-borderradius);
    display: block;
    margin: 1em 0;
}

/* Article 3-column layout: TOC | Article | Sidebar */
.article-3col {
    display: grid;
    grid-template-columns: 180px 1fr 240px;
    gap: 2rem;
}

.article-toc-inner {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
}

.article-main {
    min-width: 0;
}

.article-sidebar-sticky {
    position: sticky;
    top: 80px;
}

.toc-item {
    font-size: 0.75rem;
    color: var(--brand-almost-white);
    text-decoration: none;
    padding: 4px 0 4px 12px;
    border-left: 2px solid var(--mud-palette-divider);
    line-height: 1.4;
    transition: color 0.2s, border-color 0.2s;
    cursor: pointer;
}

.toc-item:hover,
.toc-item.toc-active {
    color: var(--brand-neo-turquoise);
    border-left-color: var(--brand-neo-turquoise);
}

.toc-cta {
    margin-top: 8px;
    font-weight: 600;
    color: var(--mud-palette-primary);
    border-left-color: var(--mud-palette-primary);
    border-left-width: 3px;
    opacity: 1;
    animation: toc-glow 3s ease-in-out infinite;
}

@keyframes toc-glow {
    0%, 100% { color: var(--mud-palette-primary); text-shadow: 0 0 4px color-mix(in srgb, var(--brand-nebula-violet) 25%, transparent); }
    50% { color: var(--brand-plasma-pink); text-shadow: 0 0 16px color-mix(in srgb, var(--brand-plasma-pink) 60%, transparent); }
}

/* Medium: 2 columns, TOC moves to right sidebar position */
@media (max-width: 1200px) {
    .article-3col {
        grid-template-columns: 1fr 180px;
    }

    .article-toc {
        order: 2;
        grid-column: 2;
        grid-row: 1 / -1;
    }

    .article-main {
        grid-column: 1;
    }

    .article-sidebar {
        grid-column: 1;
        order: 3;
    }

    .article-sidebar-sticky {
        position: static;
    }
}

/* Mobile: 1 column, sidebar below, TOC floats top-right */
@media (max-width: 768px) {
    .article-3col {
        grid-template-columns: 1fr;
    }

    .article-toc {
        position: fixed;
        right: 0.5rem;
        top: 76px;
        left: auto;
        z-index: 10;
        max-width: 160px;
        order: unset;
        grid-column: unset;
        grid-row: unset;
    }

    .article-toc-inner {
        opacity: 0.8;
    }

    .article-main {
        grid-column: 1;
        grid-row: auto;
    }

    .article-sidebar {
        grid-column: 1;
    }
}

/* Smooth scroll for anchor links */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

/* Showcase dimension descriptions — line-clamp for consistent height */
.dim-desc {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dim-desc-expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* MudBlazor popover z-index is handled by the framework:
   calc(var(--mud-zindex-dialog) + 3) — already above dialogs.
   Do NOT override with a hardcoded value or popovers inside
   dialogs will render behind the dialog overlay. */

/* Select group headers — override disabled grey */
.mud-list-item.select-group-header,
.mud-list-item.select-group-header .mud-list-item-text,
.mud-list-item.select-group-header .mud-list-item-text * {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 1 !important;
    color: var(--mud-palette-primary) !important;
}

.mud-list-item.select-group-header {
    padding-top: 12px;
    padding-bottom: 2px;
    min-height: 28px;
    pointer-events: none;
}

.select-group-item {
    padding-left: 24px;
}

/* === Floating surface contrast ===
   Dialogs, popovers (select/datepicker/autocomplete/menu dropdowns),
   and the cookie consent banner default to Surface (#11041F Midnight
   Violet) which collides with the page background, leaving floating
   elements with no visible edge. Lift them one tier to Deep Cosmos
   and add a Plasma Pink hairline so edges register clearly.

   Snackbars are intentionally excluded — their severity colour
   (success/warning/error) carries the meaning. */
.mud-dialog,
.mud-popover,
.cosmic-floating {
    background-color: var(--brand-deep-cosmos) !important;
    border: 1px solid var(--brand-plasma-pink) !important;
}

/* === Input accent ===
   Focus + hover states use Aqua Pulse instead of Nebula Violet (Nebula
   is reserved for buttons; inputs follow the cosmic accent pattern —
   aqua icons, aqua hover/focus states).

   MudBlazor uses :focus-within (pseudo-class) for focus, NOT a
   .mud-focused class, and the floating label is a sibling of .mud-input
   via ~ — see _input.scss / _inputlabel.scss for the source rules these
   override. */

/* Focused outlined border -> Aqua Pulse */
.mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border {
    border-color: var(--brand-aqua-pulse) !important;
}

/* Hover outlined border (not focused, not disabled) -> Aqua Pulse.
   Default MudBlazor hover uses --mud-palette-action-default which
   resolves to the light alloy / white-ish text colour. */
.mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):hover > .mud-input-outlined-border {
    border-color: var(--brand-aqua-pulse) !important;
}

/* Floating label sitting on top of the outlined border -> Almost White,
   regardless of focus state. The Aqua Pulse accent lives on the
   outline border itself; the label is a quiet white sticker either way.
   Covers both shrunk (has value) and focused (cursor in field). */
.mud-input.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol,
.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
    color: var(--brand-almost-white) !important;
}

/* Cookie consent banner */
.cookie-consent {
    position: fixed;
    bottom: 64px;
    left: 0;
    right: 0;
    z-index: 1500;
    display: flex;
    justify-content: center;
    padding: 0 16px;
    pointer-events: none;
}

.cookie-consent > * {
    pointer-events: auto;
}

/* Divider accent */
.section-divider {
    width: 48px;
    height: 3px;
    border-radius: 2px;
    background: var(--brand-plasma-pink);
}

/* Compact tag chip — Aqua Pulse outline, Almost White text.
   Used for content categorization (tech tags, etc.). */
.chip-tag {
    height: 22px !important;
    font-size: 0.65rem !important;
    border-color: var(--brand-aqua-pulse) !important;
    color: var(--brand-almost-white) !important;
}


/* MudToggleGroup — active item uses Nebula Violet fill + Almost White
   text, matching the brand button treatment. Inactive items inherit
   the Plasma Pink border from --mud-palette-lines-default. */
.mud-toggle-item.mud-toggle-item-selected {
    background-color: var(--brand-nebula-violet) !important;
    color: var(--brand-almost-white) !important;
}

/* Filter chip — interactive tag selector. Mirrors .chip-tag styling
   so unselected filters read consistently with content tags; the
   selected (Filled) variant inverts to aqua fill + cosmic-black text
   so it pops as the active state. */
.chip-filter {
    height: 28px !important;
    font-size: 0.75rem !important;
    border-color: var(--brand-aqua-pulse) !important;
    color: var(--brand-almost-white) !important;
}
.chip-filter.mud-chip-filled {
    background-color: var(--brand-aqua-pulse) !important;
    color: var(--brand-cosmic-black) !important;
    border-color: var(--brand-aqua-pulse) !important;
}

/* Tighten default MudChip margin inside tag containers */
.tag-chips .mud-chip {
    margin: 4px !important;
}

/* Markdown editor */
.md-editor-panes {
    display: flex;
    align-items: stretch;
}

.md-editor-edit {
    display: flex;
    flex-direction: column;
}

.md-editor-textarea {
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    padding: 12px;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.875rem;
    line-height: 1.5;
    background: transparent;
    color: var(--mud-palette-text-primary);
    flex: 1;
    field-sizing: content;
}

.md-editor-preview {
    overflow-y: auto;
}


/* ============================================
   COSMIC UTILITIES (issue #107)
   ============================================ */

/* Stat row — 5 equal columns with 18px gap. Drops to 3 then 2 cols
   on narrower viewports. Pure CSS Grid so every tile stays the same
   width without nested MudGrid+MudTooltip wrappers. */
.cosmic-stat-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}
@media (max-width: 1024px) {
    .cosmic-stat-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .cosmic-stat-row { grid-template-columns: repeat(2, 1fr); }
}

/* Stat tile — small non-clickable card with Aqua Pulse outline.
   Transparent fill so the section gradient shows through. Aspect
   ratio 10:8.5 matches the landing-page mockup. */
.cosmic-stat-tile {
    background: transparent;
    border: 1px solid var(--brand-aqua-pulse);
    border-radius: var(--mud-default-borderradius);
    padding: 0.75rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    aspect-ratio: 10 / 8.5;
}
.cosmic-stat-tile__value {
    font-family: var(--brand-font);
    font-weight: 700;
    font-size: var(--typo-headline-2-size);
    line-height: var(--typo-headline-2-line);
    letter-spacing: -0.02em;
    color: var(--brand-aqua-pulse);
}
.cosmic-stat-tile__icon {
    font-size: var(--typo-headline-2-size) !important;
    color: var(--brand-aqua-pulse) !important;
    line-height: 1;
}
/* Stat tile label is a small UI-component caption — sized below the
   brand Body spec because the brand has no caption tier defined.
   Documented project-level extension: 12/16/500 uppercase. */
.cosmic-stat-tile__label {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-light-alloy);
}

/* Section variant: matches the hero gradient. Use on a SectionContainer
   that needs visual continuity with the hero (e.g. the stats row). */
.section-hero-gradient {
    background: var(--gradient-cosmic-cosmos);
}

/* Service / showcase / poc / insight card — Midnight Violet surface
   with Plasma Pink accent outline. Use anywhere a content tile sits
   on the Cosmic Black page background.
   overflow:hidden makes child <img> respect the rounded corners. */
.cosmic-card {
    background: var(--brand-midnight-violet);
    border: 1px solid var(--brand-plasma-pink);
    border-radius: var(--mud-default-borderradius);
    overflow: hidden;
    transition: transform 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
}
.cosmic-card:hover {
    transform: translateY(-4px);
    border-color: var(--brand-aqua-pulse);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--brand-plasma-pink) 30%, transparent);
}
/* Opt-out modifier: cards used as static display containers (info
   panels, contact details, sidebars) shouldn't lift on hover.
   Apply with Class="cosmic-card cosmic-card--static" */
.cosmic-card--static {
    transition: none;
}
.cosmic-card--static:hover {
    transform: none;
    border-color: var(--brand-plasma-pink);
    box-shadow: none;
}

/* Card row — 3 equal columns with 18px gap, drops to 2 cols then 1
   on narrower viewports. Use for service / PoC / showcase / insight
   card sections. Replaces MudGrid+MudItem nesting. */
.cosmic-card-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
@media (max-width: 1024px) {
    .cosmic-card-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .cosmic-card-row { grid-template-columns: 1fr; }
}

/* Brand accent colors — wrap any letter run in a span to highlight it.
   Use case: "Br<span class="accent-plasma">ai</span>npower". The
   wordmark "Taight" uses .brand-ai which is aqua; these are for
   broader copy accents. */
.accent-aqua    { color: var(--brand-aqua-pulse); }
.accent-plasma  { color: var(--brand-plasma-pink); }
.accent-turquoise { color: var(--brand-neo-turquoise); }
.accent-violet  { color: var(--brand-nebula-violet); }

/* Text links — site-wide Almost White text. Hover shifts to Neo
   Turquoise with an underline. Targets MudLink and raw <a> in
   article bodies. Excludes MudButton / MudIconButton / MudNavLink
   (they render <a> with their own classes). */
.mud-link,
.article-body a {
    color: var(--brand-almost-white) !important;
    text-decoration: none !important;
}
.mud-link:hover,
.article-body a:hover {
    color: var(--brand-neo-turquoise) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--brand-neo-turquoise) !important;
    text-underline-offset: 0.2em !important;
    text-decoration-thickness: 2px !important;
}

/* EPPO PPP Showcase isolation — restores the original "Nordic Precision"
   palette inside this single subtree so the data-viz-heavy showcase
   keeps its intended light-theme aesthetic instead of inheriting
   Cosmic. Wrap the showcase content in <div class="eppo-isolate">. */
.eppo-isolate {
    --mud-palette-primary: #1E40AF;
    --mud-palette-secondary: #0F172A;
    --mud-palette-tertiary: #6366F1;
    --mud-palette-info: #1E40AF;
    --mud-palette-success: #059669;
    --mud-palette-warning: #D97706;
    --mud-palette-error: #DC2626;
    --mud-palette-background: #F8F7F4;
    --mud-palette-surface: #FFFFFF;
    --mud-palette-text-primary: #0F172A;
    --mud-palette-text-secondary: #64748B;
    --mud-palette-text-disabled: #94A3B8;
    --mud-palette-divider: #E2E8F0;
    --mud-palette-lines-default: #334155;
    --mud-palette-action-default: #64748B;

    background: #F8F7F4;
    color: #0F172A;
}
/* Hero stays Cosmic-themed even though the body of the showcase is
   isolated to the old light palette. Re-establish the dark text vars
   so MudText inside the hero reads white on the gradient. */
.eppo-isolate .hero-section {
    --mud-palette-text-primary: #F7F7F7;
    --mud-palette-text-secondary: #DBDBDB;
    background: var(--gradient-cosmic-cosmos);
    color: var(--brand-almost-white);
}
.eppo-isolate .mud-link,
.eppo-isolate .article-body a {
    color: #1E40AF !important;
    text-decoration: underline !important;
    text-decoration-color: #1E40AF !important;
}
.eppo-isolate .mud-link:hover,
.eppo-isolate .article-body a:hover {
    color: #1E40AF !important;
    text-decoration-color: #1E40AF !important;
    opacity: 0.8;
}

/* MudTable / MudSimpleTable inside a .cosmic-card use Plasma Pink cell
   borders to match the surrounding card outline. Force all sides via
   border-color so the rule wins regardless of which side MudBlazor
   actually paints (MudTable uses border-bottom on rows; MudSimpleTable
   uses different selectors). */
.cosmic-card .mud-table-cell,
.cosmic-card .mud-table-row .mud-table-cell,
.cosmic-card .mud-simple-table th,
.cosmic-card .mud-simple-table td,
.cosmic-card table th,
.cosmic-card table td {
    border-color: var(--brand-plasma-pink) !important;
}
.cosmic-card .mud-table-head .mud-table-cell,
.cosmic-card .mud-simple-table thead th {
    border-bottom-color: var(--brand-plasma-pink) !important;
}

/* Progress bar variant for "needs improvement" / low-score signals.
   Overrides the rendered MudProgressLinear bar fill so the color is
   driven by --brand-accent-improve (defined in theme.css). Apply
   Class="progress-improve" on the MudProgressLinear. */
.progress-improve .mud-progress-linear-bar,
.progress-improve.mud-progress-linear .mud-progress-linear-bar {
    background-color: var(--brand-accent-improve) !important;
}

/* Tertiary button — text-only, Almost White (PDF #5 Tertiary spec).
   Apply to MudButton Variant="Variant.Text" inside cards / lists. */
.btn-tertiary {
    color: var(--brand-almost-white) !important;
}
.btn-tertiary:hover {
    background: color-mix(in srgb, var(--brand-almost-white) 10%, transparent) !important;
}

/* Top-bar nav links rendered uppercase to match landing-page mockup.
   Targets MudButton-based nav in the appbar without editing markup. */
.mud-appbar .mud-button-text {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}