/* Public landing page (Home.razor under LandingLayout) — a full-viewport branded hero shown to
   unauthenticated visitors. Color-consistent with the brand: the navy gradient and the accent blue
   both sit on the primary hue (251.63deg) from capes-theme.css. The hero MUST be dark because the
   logo artwork (branding/lighthouse-logo.svg) is a white wordmark designed for a dark panel; we set
   the navy explicitly rather than via --kendo-color-secondary, which the current swatch resolves
   near-white (see the note in sidebar-nav.css). */

.lh-landing-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Navy gradient on the brand hue, deep at the top easing to a lighter brand blue at the bottom. */
    background: linear-gradient(160deg, oklch(28% 0.06 251.63deg) 0%, oklch(42% 0.13 251.63deg) 100%);
    /* Decorative brand wave spanning the full viewport width along the bottom edge (same asset as the
       sidebar footer). Sized to 110vw and anchored bottom-center so it overruns both horizontal edges
       by ~5vw each, bleeding slightly off-screen at any size. */
    background-image:
        url('/branding/sidebar-wave.svg'),
        linear-gradient(160deg, oklch(28% 0.06 251.63deg) 0%, oklch(42% 0.13 251.63deg) 100%);
    background-repeat: no-repeat, no-repeat;
    background-size: 110vw auto, cover;
    background-position: center bottom, center center;
}

.lh-landing {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--kendo-spacing-8);
}

.lh-landing-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 480px;
}

/* Large centered logo. Same white-wordmark SVG the sidebar uses, shown here at hero scale as a
   background-image (the asset already composites icon + both wordmarks). Sits well apart from the
   title block below it. */
.lh-landing-logo {
    width: 340px;
    height: 115px;
    margin-bottom: var(--kendo-spacing-10);
    background-image: url('/branding/lighthouse-logo.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.lh-landing-title {
    margin: 0;
    font-family: var(--lh-font-display);
    font-weight: var(--lh-weight-extrabold);
    font-size: var(--lh-text-6xl);
    line-height: var(--lh-leading-tight);
    /* Explicit white rather than --kendo-color-on-primary: that token is defined with the oklch(from …)
       relative-color syntax, which doesn't resolve on every browser and then falls back to dark text. */
    color: #fff;
}

/* Tucked right under the title (tight margin), separate from the logo's larger gap above. */
.lh-landing-subtitle {
    margin: var(--kendo-spacing-1) 0 0;
    font-family: var(--lh-font-body);
    font-weight: var(--lh-weight-normal);
    font-size: var(--lh-text-2xl);
    color: #fff;
}

/* The focal point: the design-system primary button (primary fill, white on-primary label), sized up
   with ample padding and the app's standard md radius. Rendered on a plain anchor so it works before
   the circuit connects; the colors come straight from the theme's primary/on-primary tokens. */
.lh-landing-signin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--kendo-spacing-7);
    padding: var(--kendo-spacing-4) var(--kendo-spacing-12);
    font-family: var(--lh-font-body);
    font-weight: var(--lh-weight-bold);
    font-size: var(--lh-text-xl);
    line-height: 1;
    color: var(--kendo-color-on-primary);
    background-color: var(--kendo-color-primary);
    border-radius: var(--kendo-border-radius-md);
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: background-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}

.lh-landing-signin:hover {
    background-color: var(--kendo-color-primary-hover);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

.lh-landing-signin:active {
    background-color: var(--kendo-color-primary-active);
    transform: translateY(1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}