html, body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    /* Safari can expose the document canvas during rubber-band scrolling.
       Match the ControlPanel's --bg-0 outside the rendered page as well. */
    background-color: #080d0c;
    /* Apply to the viewport scroller, not just the inner ControlPanel shell. */
    overscroll-behavior-y: none;
}

html { color-scheme: dark; min-height: 100%; }
body, #app { min-height: 100vh; min-height: 100dvh; }

/* Opaque viewport-edge surfaces for Safari's browser-bar tint sampling.
   They remain mounted across landing/login/client-side route transitions. */
@media (hover: none) and (pointer: coarse) {
    body::before, body::after {
        content: '';
        position: fixed;
        left: 0;
        right: 0;
        height: 4px;
        background-color: #080d0c;
        pointer-events: none;
        z-index: 1001;
    }
    body::before { top: 0; }
    body::after { bottom: 0; }
}

.event-error-diagnostic { margin-top: 24px; }
.event-error-diagnostic pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }

/* FocusOnNavigate moves focus to the h1 on every navigation - without this
   the browser paints a focus ring around the heading on each page load. */
h1:focus {
    outline: none;
}

/* EmptyLayout: chrome-less pages (login, auth callback) */

.empty-layout {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 100vh;
    padding: 2rem 1.5rem;
    /* The divider deliberately overhangs the panel - keep that from pushing
       a horizontal scrollbar on narrow viewports. */
    overflow-x: hidden;
    background-color: #000201;
    background-image: url('../img/login-background.png');
    background-size: cover;
    background-position: center;
}

/* Two layers: a flat darkening pass over the whole scene, plus a vignette
   that runs all the way to pure black so the image fades out at the edges
   instead of ending on a visible border. */
.empty-layout::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 50% 50%,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.5) 50%,
            rgba(0, 0, 0, 0.9) 78%,
            #000000 100%),
        rgba(2, 7, 4, 0.55);
}

.empty-layout__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 460px;
}

.empty-layout__logo-frame {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Ambient glow blob behind the crest - fades in with the logo, then settles
   into a slow, quiet "breathing" pulse for as long as the page sits idle. */
.empty-layout__logo-frame::before {
    content: '';
    position: absolute;
    inset: -14% -10%;
    z-index: 0;
    background: radial-gradient(ellipse 55% 55% at 50% 45%,
        rgba(142, 242, 76, 0.28) 0%,
        rgba(142, 242, 76, 0.1) 40%,
        rgba(142, 242, 76, 0) 70%);
    filter: blur(18px);
    opacity: 0;
    animation:
        logo-glow-in 2.2s ease-out 0.2s forwards,
        logo-glow-breathe 5s ease-in-out 2.4s infinite;
}

.empty-layout__logo {
    position: relative;
    z-index: 1;
    width: 100%;
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 4px rgba(142, 242, 76, 0.15));
    animation:
        logo-fade-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards,
        logo-glow-hug 5s ease-in-out 2.4s infinite;
}

@keyframes logo-fade-in {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes logo-glow-in {
    to { opacity: 0.5; }
}

@keyframes logo-glow-breathe {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.03); }
}

@keyframes logo-glow-hug {
    0%, 100% {
        filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 4px rgba(142, 242, 76, 0.15));
    }
    50% {
        filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 10px rgba(142, 242, 76, 0.35));
    }
}

@media (prefers-reduced-motion: reduce) {
    .empty-layout__logo-frame::before,
    .empty-layout__logo {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

.empty-layout__panel {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin-top: 1.5rem;
    padding: 3.25rem 2rem 2.25rem;
    border-radius: 0.875rem;
    background: rgba(8, 13, 10, 0.82);
    border: 1px solid rgba(139, 230, 145, 0.16);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    text-align: center;
}

/* Straddles the panel's top edge so the ornament reads as part of the frame. */
.empty-layout__divider {
    position: absolute;
    top: 0;
    left: 50%;
    width: 118%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.8));
}

.auth-title {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #f2f6f2;
}

.auth-text {
    margin: 0 0 1.75rem;
    color: #a6b6a9;
    font-size: 0.95rem;
    line-height: 1.5;
}

.btn-battlenet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.5rem;
    border: 1px solid rgba(142, 242, 76, 0.5);
    border-radius: 0.5rem;
    background: rgba(142, 242, 76, 0.06);
    color: #a9f069;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn-battlenet:hover {
    border-color: #8ef24c;
    background: rgba(142, 242, 76, 0.14);
    color: #c8f79e;
    box-shadow: 0 0 18px rgba(142, 242, 76, 0.2);
}

/* ==========================================================================
   LoadingOverlay component - shared, not tied to any single page.
   The four artwork frames light up the top / right / bottom / left gem in
   turn, so cycling them in that order reads as a rotating spinner. All four
   were cropped to one shared bounding box, which is what keeps the emblem
   from jumping between frames.
   ========================================================================== */

/* The page renders underneath the overlay so the browser fetches its artwork
   while the spinner is up - but it must not be scrollable in the meantime. */
body:has(.loading-overlay) {
    overflow: hidden;
}

/* Same backdrop and darkening as the landing page, so when the overlay fades
   out the background underneath is already identical - no visible switch. */
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000201;
    background-image: url('../img/login-background.png');
    background-size: cover;
    background-position: center;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.loading-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 50% 50%,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.5) 50%,
            rgba(0, 0, 0, 0.9) 78%,
            #000000 100%),
        rgba(2, 7, 4, 0.55);
}

/* Keep the transition duration in sync with LoadingOverlay.FadeOutMs. */
.loading-overlay--hiding {
    opacity: 0;
    pointer-events: none;
}

.loading-overlay__spinner {
    position: relative;
    z-index: 1;
    width: min(210px, 42vw);
    aspect-ratio: 420 / 382;
    filter: drop-shadow(0 0 26px rgba(142, 242, 76, 0.28));
}

.loading-overlay__spinner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* The emblem with every gem dim (pixel-wise minimum of the four frames).
   Cross-fading the lit frames on their own would drop the shared body to 75%
   opacity halfway through each hand-over - a blend mode does not help, since
   it changes the colour but not the group's alpha. Keeping this layer fully
   opaque underneath means only the glow ever moves. */
.loading-overlay__base {
    opacity: 1;
}

.loading-overlay__frame {
    opacity: 0;
    animation: loading-overlay-frame 2.8s ease-in-out infinite;
}

.loading-overlay__frame:nth-of-type(2) { animation-delay: 0s; }
.loading-overlay__frame:nth-of-type(3) { animation-delay: 0.7s; }
.loading-overlay__frame:nth-of-type(4) { animation-delay: 1.4s; }
.loading-overlay__frame:nth-of-type(5) { animation-delay: 2.1s; }

/* Fade in, hold, fade out - one frame's fade-out overlaps exactly with the
   next one's fade-in, so the glow travels instead of jumping. */
@keyframes loading-overlay-frame {
    0% { opacity: 0; }
    10% { opacity: 1; }
    25% { opacity: 1; }
    35% { opacity: 0; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .loading-overlay__frame {
        animation-duration: 5.6s;
    }
}

/* ==========================================================================
   Landing page (/) - a self-contained marketing page, decoupled
   from the app shell (ProtectedLayout) and the auth-flow chrome
   (EmptyLayout). Everything below is scoped under .landing on purpose so it
   never leaks into or depends on the rest of the site's styles.
   ========================================================================== */

/* Same backdrop and darkening as the login (EmptyLayout) - both reference the
   identical image, and the vignette values are kept in sync on purpose. It is
   fixed here so the darkening stays put while the page scrolls. */
.landing {
    position: relative;
    min-height: 100vh;
    background-color: #000201;
    background-image: url('../img/login-background.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #cfd9d2;
}

.landing::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 60% at 50% 50%,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.5) 50%,
            rgba(0, 0, 0, 0.9) 78%,
            #000000 100%),
        rgba(2, 7, 4, 0.55);
}

.landing-main {
    position: relative;
    z-index: 1;
}

.landing-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.85rem;
    color: #8ef24c;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(142, 242, 76, 0.35);
}

.landing-eyebrow img {
    width: 18px;
    height: auto;
}

.landing-eyebrow--center {
    justify-content: center;
}

/* --- Nav: ornate bar artwork -------------------------------------------
   The bar is one undistorted piece of artwork (navbar.png). The box is locked
   to the artwork's own aspect ratio, so background-size: 100% 100% is a plain
   uniform scale - the logo and the carved ends never get squashed.
   Everything interactive is positioned in percentages measured off the
   artwork: nav row at 38.1%-69.4% height, the empty ring at 92% / 52.5%.
   Sizes use cqw so the text scales down together with the bar. */

.landing-nav {
    /* Needs to sit above .landing::before, which paints the vignette. */
    position: relative;
    z-index: 1;
    padding: 1.25rem 1.5rem 0;
}

.landing-nav__bar {
    container-type: inline-size;
    position: relative;
    /* the narrow-viewport fallback below adds padding - without border-box
       that would push the bar past the viewport and add a scrollbar */
    box-sizing: border-box;
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    aspect-ratio: 2123 / 333;
    background-image: url('../img/NavBar/navbar.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.6));
}

/* Clickable hotspot over the logo that is baked into the artwork. */
.landing-nav__home {
    position: absolute;
    left: 1%;
    top: 6%;
    width: 25%;
    height: 88%;
}

/* Spans exactly the green panel of the artwork (27.8% - 86.06%), so centring
   inside it puts the links in the middle of the free space rather than the
   middle of the whole bar. */
.landing-nav__links {
    position: absolute;
    left: 27.8%;
    right: 13.94%;
    top: 38.1%;
    height: 31.3%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.3cqw;
}

.landing-nav__link {
    font-family: 'Cinzel', 'Segoe UI', serif;
    font-size: 1.32cqw;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: #cbd8c6;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    transition: color 0.15s ease, text-shadow 0.15s ease;
}

.landing-nav__link:hover {
    color: #d8f7ae;
    text-shadow: 0 0 10px rgba(142, 242, 76, 0.55), 0 1px 3px rgba(0, 0, 0, 0.9);
}

.landing-nav__link--active {
    color: #9cf056;
    text-shadow: 0 0 12px rgba(142, 242, 76, 0.6), 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Separator: the vertical-* bar assets lose all their detail below ~90px
   (a 40px tall one is 6px wide), so this echoes the thin vine strokes on the
   bar instead - a fel line with a small gem at its centre. */
/* 2px wide on purpose: at 1px the cqw-based gaps land it on half-pixel
   positions, where the browser splits it across two pixels at half opacity
   and individual separators visibly drop out. */
.landing-nav__sep {
    position: relative;
    flex: 0 0 auto;
    width: 2px;
    height: 62%;
    background: linear-gradient(180deg,
        rgba(142, 242, 76, 0) 0%,
        rgba(142, 242, 76, 0.4) 35%,
        rgba(142, 242, 76, 0.4) 65%,
        rgba(142, 242, 76, 0) 100%);
}

.landing-nav__sep::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.42cqw;
    height: 0.42cqw;
    transform: translate(-50%, -50%) rotate(45deg);
    background: #9cf056;
    box-shadow: 0 0 6px rgba(142, 242, 76, 0.8);
}

/* Fills the empty ring on the right-hand end of the artwork. Centre and size
   are measured off navbar.png: the ring sits at 92.06% / 52.06% and its inner
   opening is ~5.06% of the bar width, so the hover tint fills it exactly. */
.landing-nav__avatar {
    position: absolute;
    left: 92.06%;
    top: 52.06%;
    width: 5.06%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #d9c9a3;
    transition: color 0.18s ease, filter 0.18s ease, background-color 0.18s ease;
}

.landing-nav__avatar svg {
    width: 62%;
    height: auto;
}

.landing-nav__avatar:hover {
    color: #b9f571;
    background-color: rgba(142, 242, 76, 0.12);
    filter: drop-shadow(0 0 8px rgba(142, 242, 76, 0.85));
}

/* Below this the artwork is too small to read - fall back to a plain bar. */
@media (max-width: 900px) {
    .landing-nav {
        padding: 0;
    }

    .landing-nav__bar {
        container-type: normal;
        max-width: none;
        aspect-ratio: auto;
        background-image: none;
        background: linear-gradient(180deg, rgba(9, 16, 11, 0.96) 0%, rgba(4, 9, 6, 0.92) 100%);
        border-bottom: 1px solid rgba(142, 242, 76, 0.35);
        filter: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
    }

    .landing-nav__home {
        position: static;
        width: auto;
        height: 2rem;
        flex: 0 0 auto;
        background-image: url('../img/Logos/raidsync_logo.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left center;
        aspect-ratio: 638 / 374;
    }

    .landing-nav__links {
        position: static;
        height: auto;
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
    }

    .landing-nav__link {
        font-size: 0.8rem;
    }

    .landing-nav__sep {
        height: 0.9rem;
    }

    .landing-nav__sep::after {
        width: 4px;
        height: 4px;
    }

    .landing-nav__avatar {
        position: static;
        transform: none;
        width: 2rem;
        flex: 0 0 auto;
    }
}

/* --- Buttons ------------------------------------------------------------
   The primary button is the ornate plate from Buttons/web (trimmed +
   downscaled derivatives of the originals). The artwork is stretched over the
   whole box, so the padding has to keep the label inside the stone frame. */

.landing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: transform 0.15s ease, filter 0.15s ease, color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.landing-btn--primary {
    min-width: 15rem;
    padding: 1.1rem 3rem;
    background-image: url('../img/Buttons/web/button_regular.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #eaf7d8;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5));
}

.landing-btn--primary:hover {
    background-image: url('../img/Buttons/web/button_hovered.png');
    color: #ffffff;
    transform: translateY(-2px);
    filter: drop-shadow(0 10px 22px rgba(142, 242, 76, 0.3));
}

.landing-btn--primary:active {
    background-image: url('../img/Buttons/web/button_active.png');
    transform: translateY(0);
}

.landing-btn--ghost {
    padding: 0.9rem 2rem;
    border: 1px solid rgba(142, 242, 76, 0.35);
    background: rgba(4, 10, 6, 0.55);
    color: #b7c2bb;
}

.landing-btn--ghost:hover {
    border-color: rgba(142, 242, 76, 0.75);
    color: #eef5ef;
    background: rgba(142, 242, 76, 0.1);
}

/* --- Hero ---------------------------------------------------------------- */

.landing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4rem;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    padding: 5.5rem 2rem 4.5rem;
}

.landing-hero__title {
    margin: 0 0 1.35rem;
    font-family: 'Cinzel', 'Segoe UI', serif;
    font-size: clamp(2.4rem, 4.2vw, 3.4rem);
    font-weight: 700;
    line-height: 1.12;
    color: #f1f5ee;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.8);
}

.landing-hero__title-accent {
    color: #8ef24c;
    text-shadow: 0 0 32px rgba(142, 242, 76, 0.35), 0 4px 24px rgba(0, 0, 0, 0.8);
}

.landing-hero__description {
    margin: 0 0 2rem;
    max-width: 34rem;
    color: #b9c4bd;
    font-size: 1.05rem;
    line-height: 1.65;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.landing-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.landing-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.landing-hero__stats li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #93a197;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.landing-hero__stats img {
    width: 26px;
    height: auto;
    filter: drop-shadow(0 0 8px rgba(142, 242, 76, 0.3));
}

/* Preview panel with ornate corner pieces layered over the artwork. */

.landing-hero__preview {
    position: relative;
    padding: 1.25rem;
}

.landing-hero__frame {
    position: relative;
    border: 1px solid rgba(142, 242, 76, 0.45);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.7),
        0 0 26px rgba(142, 242, 76, 0.12),
        0 0 50px rgba(142, 242, 76, 0.12) inset;
}

.landing-hero__shot {
    display: block;
    width: 100%;
    height: auto;
}

/* corner_frame_left is a top-left elbow, corner_frame_right_tall a top-right
   one - both are used unrotated so the horns/feathers keep hanging downward. */
.landing-hero__corner {
    position: absolute;
    top: -22px;
    height: 158px;
    width: auto;
    pointer-events: none;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.75));
}

.landing-hero__corner--tl {
    left: -24px;
}

.landing-hero__corner--tr {
    right: -24px;
}

/* --- Section divider ----------------------------------------------------- */

.landing-divider {
    display: block;
    width: min(100%, 1100px);
    height: auto;
    margin: 0 auto 4.5rem;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.7));
}

/* --- Features ------------------------------------------------------------ */

.landing-features {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem 5rem;
    text-align: center;
}

.landing-features__title {
    margin: 0 0 4.5rem;
    font-family: 'Cinzel', 'Segoe UI', serif;
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    font-weight: 700;
    color: #f1f5ee;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.75);
}

.landing-features__title-accent {
    color: #8ef24c;
    text-shadow: 0 0 28px rgba(142, 242, 76, 0.35), 0 4px 20px rgba(0, 0, 0, 0.75);
}

.landing-features__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    text-align: center;
}

/* Top padding leaves room for the medallion, which hangs over the top edge. */
.landing-feature-card {
    position: relative;
    padding: 3.75rem 1.75rem 2rem;
    background: rgba(6, 12, 8, 0.78);
    border: 1px solid rgba(142, 242, 76, 0.2);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.landing-feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(142, 242, 76, 0.5);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55), 0 0 30px rgba(142, 242, 76, 0.12);
}

.landing-feature-card__medallion {
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    width: 68px;
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.75));
}

.landing-feature-card h3 {
    margin: 0 0 0.6rem;
    font-family: 'Cinzel', 'Segoe UI', serif;
    color: #f1f5ee;
    font-size: 1.2rem;
    letter-spacing: 0.02em;
}

.landing-feature-card p {
    margin: 0;
    color: #93a197;
    font-size: 0.92rem;
    line-height: 1.6;
}

.landing-feature-card__flourish {
    display: block;
    width: 140px;
    height: auto;
    margin: 1.5rem auto 0;
    opacity: 0.75;
}

/* --- Footer -------------------------------------------------------------- */

/* Full-bleed on purpose - unlike the other sections it is not capped to
   1280px. The artwork carries both the rail and the green panel, so it is
   drawn at full width with its natural height (background-size: 100% auto)
   and simply clipped by the footer's own height - that keeps the footer as
   tall as its content needs instead of scaling with the viewport width.
   The artwork is kept at its native 2560px width - the crop is a straight cut
   with no resampling, so it stays as sharp as the source. The rail sits at
   1.87%-18.67% of it (bottom edge = 5.47vw), which is what padding-top
   clears. */
.landing-footer {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin-top: 4rem;
    padding: 7.2vw 1.5rem 3.5rem;
    text-align: center;
    background-image: url('../img/Footer/footer-panel.png');
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
}

.landing-footer__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    margin-bottom: 1.4rem;
}

/* Light type from here down - the panel behind it is a fairly bright green,
   so the muted tones used elsewhere on the page would not carry. */
.landing-footer__links a {
    color: #e6f3dc;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
    transition: color 0.15s ease, text-shadow 0.15s ease;
}

.landing-footer__links a:hover {
    color: #ffffff;
    text-shadow: 0 0 12px rgba(198, 255, 150, 0.7), 0 1px 4px rgba(0, 0, 0, 0.55);
}

.landing-footer__sep {
    width: 2px;
    height: 0.9rem;
    background: linear-gradient(180deg,
        rgba(230, 243, 220, 0) 0%,
        rgba(230, 243, 220, 0.45) 35%,
        rgba(230, 243, 220, 0.45) 65%,
        rgba(230, 243, 220, 0) 100%);
}

.landing-footer__note {
    margin: 0 0 0.45rem;
    color: #cfe6c1;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.landing-footer__copy {
    margin: 0;
    color: #a6c599;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1000px) {
    .landing-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 3rem;
        padding-top: 3.5rem;
    }

    .landing-features__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 3.5rem;
    }
}

@media (max-width: 820px) {
    .landing-nav__inner {
        flex-wrap: wrap;
        gap: 1rem;
        padding: 0.5rem 1rem;
    }

    .landing-nav__links {
        order: 3;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .landing-nav__search {
        display: none;
    }

    .landing-hero,
    .landing-features {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .landing-hero__corner {
        width: 64px;
    }
}

#blazor-error-ui {
    background: #18201d;
    color: #f0f3f1;
    border-top: 2px solid #df7777;
    box-sizing: border-box;
    max-height: 65dvh;
    overflow-y: auto;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 10000;
}

#blazor-error-ui a { color: #9be5ac; }
#blazor-error-ui details { margin-top: 12px; }
#blazor-error-ui pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; user-select: text; }

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}