/* ══════════════════════════════════════════════
   site.css — global styles for Shaun Broomfield's portfolio
   ══════════════════════════════════════════════ */

/* ── Icelandic Volcanic Terrain — Colour Palette ── */
:root {
    /* Foundation */
    --color-ash-plain:      #2A2723;
    --color-tephra:         #3D3A35;
    --color-cinder:         #504C45;

    /* Moss & Vegetation */
    --color-crater-moss:    #5E7A2A;
    --color-highland-green: #7A9E35;
    --color-lichen-flash:   #9CC240;

    /* Glacial Water */
    --color-meltwater:      #8A9BA8;
    --color-glacial-silt:   #B0BCCA;

    /* Text */
    --color-text-primary:   #E8E4DC;
    --color-text-muted:     #A09890;
}

/* ── Overscroll Background ── */

/*
 * When the user bounces past the page edge (macOS rubber-band / iOS elastic
 * scroll), the browser reveals its own background behind the page. Setting a
 * dark colour on html prevents the default white flash in any scroll direction.
 */
html {
    background-color: #1F1D1A !important;
}

/* ── Background — Grain & Depth Gradient ── */

/*
 * Subtle radial gradient gives the flat Ash Plain background a slight sense
 * of depth — marginally lighter at the upper-centre, fading to the deeper
 * BackgroundGray at the edges.  The !important is needed to override
 * MudBlazor's own background-color rule on body.
 */
body {
    background: radial-gradient(
        ellipse at 50% 25%,
        #322E29 0%,
        #2A2723 50%,
        #1F1D1A 100%
    ) fixed !important;
}

/*
 * Grain overlay — a fixed, tiling SVG feTurbulence fractalNoise pattern
 * rendered at very low opacity so it reads as subtle film-grain rather than
 * noise.  pointer-events: none means it never blocks any interaction.
 */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 300px 300px;
}

/* ── AppBar — Frosted Glass ── */

/*
 * The AppBar background is already semi-transparent (rgba 0.85), so
 * backdrop-filter turns it into a genuine frosted-glass surface — content
 * ghosts through it as you scroll rather than disappearing behind it.
 */
.mud-appbar {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ── Surfaces — Inset Top Highlight ── */

/*
 * A 1 px inset highlight at the top edge of every MudPaper surface creates a
 * subtle "lit from above" rim that lifts flat dark panels off the background.
 * Nearly invisible at a glance but adds a premium tactile quality.
 */
.mud-paper {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* ── Scrollbar ── */

/*
 * Replaces the default OS scrollbar with a thin, palette-matched one.
 * Thumb uses Cinder at rest and brightens to Highland Green on hover.
 * Firefox uses the shorthand scrollbar-color property.
 */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: var(--color-ash-plain);
}

::-webkit-scrollbar-thumb {
    background: var(--color-cinder);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-highland-green);
}

* {
    scrollbar-width: thin;
    scrollbar-color: #504C45 #2A2723;
}

/* ── Text Selection ── */

/*
 * Replaces the default blue browser selection highlight with Highland Green
 * at 35% opacity — visible enough to be functional, on-palette enough to
 * feel intentional.
 */
::selection {
    background: rgba(122, 158, 53, 0.35);
    color: var(--color-text-primary);
}

/* ── Mermaid diagrams ── */

/*
 * pre.mermaid is a code-block element repurposed as a diagram container.
 * After Mermaid JS runs, the element's text is replaced with an <svg>.
 * These rules override the generic pre/code styles that would otherwise
 * apply (monospace font, code colouring, etc.) and ensure the SVG fills
 * the container cleanly without extra space below it (line-height: 0).
 *
 * Specificity note: component-scoped pre rules carry an [b-xxxxxx]
 * attribute selector; using .project-content pre.mermaid here adds a
 * class selector that matches their specificity and site.css loads before
 * the component bundle, so we use !important for the few conflicting
 * properties rather than duplicating rules across four scoped files.
 */
.project-content pre.mermaid {
    line-height: 0;
    padding: 20px !important;
    text-align: center;
}

.project-content pre.mermaid svg {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* ── Home Layout — viewport-fill flex for CareerNav stretch ── */

/*
 * MudMainContent is a <main> element. Blazor CSS isolation's ::deep combinator
 * doesn't reliably pierce into MudBlazor's rendered elements, so these rules
 * live in site.css, scoped via the .home-layout class placed on <MudLayout>.
 *
 * The flex column + min-height establishes the chain that lets CareerNav
 * (flex: 1 in its own scoped CSS) absorb all remaining viewport height,
 * eliminating the gap that shows in portrait / tall-viewport views.
 *
 * 64px = AppBar height; matches mt-16 (4rem) on MudMainContent.
 */
.home-layout .mud-main-content {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 64px);
    box-sizing: border-box;
}

/* ── Main Layout (sub-pages) — viewport-fill to kill hard bottom edge ── */

/*
 * Without min-height, MudMainContent only grows to fit its content. In
 * portrait / short-content views the body background bleeds below it,
 * creating a hard colour boundary. Filling the viewport makes that gap
 * disappear — the content area covers the full screen.
 *
 * position: relative makes MudMainContent the containing block for the
 * absolutely-positioned .page-fade-tail gradient pinned to its bottom.
 */
.main-layout .mud-main-content {
    min-height: calc(100vh - 64px);
    box-sizing: border-box;
    position: relative;
}

/* ── Hero ── */
.hero-section {
    padding-top: 48px;
    padding-bottom: 32px;
}

.hero-avatar {
    width: 200px !important;
    height: 200px !important;
    border: 3px solid var(--mud-palette-primary);
    /* Thin dark gap ring, then a soft Highland Green halo */
    box-shadow:
        0 0 0 4px var(--color-ash-plain),
        0 0 22px rgba(122, 158, 53, 0.3);
}

.hero-name {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hero-tagline {
    opacity: 0.6;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.85rem !important;
}

.hero-intro {
    max-width: 600px;
    line-height: 1.8 !important;
    opacity: 0.85;
}

.hero-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── Builds Image Lightbox ──────────────────────────────────────────────────
 *
 * #builds-lightbox is appended to <body> by builds-lightbox.js (event
 * delegation — no Blazor interop call needed). Class prefix: blb-.
 * ──────────────────────────────────────────────────────────────────────── */

#builds-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

#builds-lightbox.is-open {
    display: flex;
    animation: blb-fade-in 0.16s ease;
}

@keyframes blb-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.blb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.blb-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: min(94vw, 1280px);
    padding: 16px;
    animation: blb-scale-in 0.2s ease;
}

@keyframes blb-scale-in {
    from { transform: scale(0.96); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.blb-img {
    display: block;
    max-width: 100%;
    max-height: calc(90vh - 72px);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 16px 56px rgba(0, 0, 0, 0.75);
}

.blb-close {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-cinder);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--color-text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.blb-close:hover,
.blb-close:focus-visible {
    background: var(--color-highland-green);
    border-color: transparent;
    outline: none;
}

.blb-link {
    font-size: 0.78rem;
    color: var(--color-lichen-flash);
    text-decoration: none;
    opacity: 0.65;
    letter-spacing: 0.04em;
    transition: opacity 0.15s ease;
}

.blb-link:hover {
    opacity: 1;
}