/*
 * ==========================================================
 * Forge Haus Labs
 * Residential AI Lab Landing Page
 *
 * Bootstrap handles:
 * - Grid / responsive layout
 * - Flexbox
 * - Spacing
 * - Dropdown behavior
 * - General utility classes
 *
 * This file handles Forge Haus Labs visual presentation.
 * ==========================================================
 */


/* ==========================================================
   THEME VARIABLES — DARK DEFAULT
   ========================================================== */

:root,
html[data-theme="dark"] {

    color-scheme: dark;

    --fh-bg: #03070b;

    --fh-text: #ffffff;
    --fh-muted: rgba(255, 255, 255, .72);
    --fh-subtle: rgba(255, 255, 255, .50);

    --fh-blue: #79cfff;
    --fh-blue-2: #7b9cff;
    --fh-purple: #a875ff;

    --fh-surface: rgba(8, 15, 23, .76);
    --fh-surface-solid: #0a1119;

    --fh-border: rgba(255, 255, 255, .22);

    --fh-shadow: rgba(0, 0, 0, .40);
}


/* ==========================================================
   DOCUMENT
   ========================================================== */

html,
body {

    min-height: 100%;

}


body {

    min-height: 100vh;
    min-height: 100dvh;

    margin: 0;

    background: var(--fh-bg);

    color: var(--fh-text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

}


/* ==========================================================
   HOUSE BACKGROUND
   ========================================================== */

.fh-house-bg {

    position: fixed;

    inset: 0;

    z-index: -5;

    background-image:
        url('/assets/img/house-background.png');

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

}


/*
 * The left side is deliberately much darker because that is
 * where the primary content lives.
 */

.fh-house-overlay {

    position: fixed;

    inset: 0;

    z-index: -4;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

            rgba(2, 6, 10, .98) 0%,

            rgba(2, 6, 10, .94) 22%,

            rgba(2, 6, 10, .80) 42%,

            rgba(2, 6, 10, .45) 62%,

            rgba(2, 6, 10, .12) 82%,

            rgba(2, 6, 10, .08) 100%
        ),

        linear-gradient(
            180deg,

            rgba(2, 6, 10, .32) 0%,

            rgba(2, 6, 10, .05) 48%,

            rgba(2, 6, 10, .76) 100%
        );

}


.fh-house-vignette {

    position: fixed;

    inset: 0;

    z-index: -3;

    pointer-events: none;

    box-shadow:
        inset 0 0 11rem 1rem rgba(0, 0, 0, .52);

}


/* ==========================================================
   BRAND / PLACEHOLDER LOGO
   ========================================================== */

.fh-brand-mark {

    color: var(--fh-text);

    font-size: 2.75rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: -.08em;

    user-select: none;

}


.fh-brand-divider {

    width: 1px;

    height: 3.6rem;

    flex: 0 0 auto;

    background:
        rgba(255, 255, 255, .72);

}


.fh-brand-name {

    color: var(--fh-text);

    font-size: 1rem;

    font-weight: 500;

    line-height: 1;

    letter-spacing: .32em;

}


.fh-brand-tagline {

    color: var(--fh-subtle);

    font-size: .59rem;

    font-weight: 500;

    line-height: 1;

    letter-spacing: .32em;

}


/* ==========================================================
   MAIN CONTENT
   ========================================================== */

.fh-content {

    width: 100%;

    max-width: 56rem;

}


/* ==========================================================
   COMING SOON LABEL
   ========================================================== */

.fh-coming {

    color: #9cb9ff;

    font-size: .73rem;

    font-weight: 600;

    line-height: 1.4;

    letter-spacing: .34em;

}


/* ==========================================================
   MAIN HEADLINE
   ========================================================== */

.fh-main-title {

    max-width: 58rem;

    margin: 0;

    color: var(--fh-text);

    font-size:
        clamp(
            3.1rem,
            6.1vw,
            6.15rem
        );

    font-weight: 760;

    /*
     * Intentionally less aggressive than the first version.
     * This prevents glyph clipping.
     */

    line-height: 1.04;

    letter-spacing: -.055em;

}


.fh-gradient-text {

    display: block;

    padding-bottom: .10em;

    line-height: 1.12;

    background:

        linear-gradient(
            105deg,

            #6fd5ff 0%,

            #7d9dff 48%,

            #ad72ff 100%
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

    -webkit-text-fill-color: transparent;

}


/* ==========================================================
   HERO COPY
   ========================================================== */

.fh-subtitle {

    color: var(--fh-text);

    font-size:
        clamp(
            1.2rem,
            2vw,
            1.6rem
        );

    font-weight: 600;

    line-height: 1.4;

}


.fh-intro {

    max-width: 43rem;

    color: var(--fh-muted);

    font-size:
        clamp(
            .98rem,
            1.45vw,
            1.16rem
        );

    line-height: 1.68;

}


/* ==========================================================
   FEATURES
   ========================================================== */

.fh-features {

    width: 100%;

    max-width: 50rem;

}


.fh-feature {

    min-height: 4.5rem;

}


.fh-feature + .fh-feature {

    border-left:
        1px solid rgba(255, 255, 255, .20);

}


.fh-feature-icon {

    flex: 0 0 auto;

    color: var(--fh-blue);

    font-size: 2rem;

    line-height: 1;

}


.fh-feature-title {

    color: var(--fh-text);

    font-size: .72rem;

    font-weight: 650;

    line-height: 1.45;

    letter-spacing: .07em;

}


/* ==========================================================
   LAUNCH BADGE
   ========================================================== */

.fh-launch {

    border:
        1px solid rgba(121, 207, 255, .88);

    background:
        rgba(5, 12, 20, .76);

    color: #a7ceff;

    box-shadow:
        0 0 0 1px rgba(168, 117, 255, .28),
        0 .8rem 2.5rem rgba(0, 0, 0, .18);

    -webkit-backdrop-filter:
        blur(14px);

    backdrop-filter:
        blur(14px);

}


.fh-launch i {

    color: var(--fh-blue);

    font-size: 1.05rem;

}


/* ==========================================================
   SECONDARY TAGLINE
   ========================================================== */

.fh-bottom-tagline {

    color: var(--fh-subtle);

    font-size: .66rem;

    font-weight: 500;

    letter-spacing: .34em;

}


/* ==========================================================
   FOOTER
   ========================================================== */

.fh-footer {

    color:
        rgba(255, 255, 255, .62);

    font-size: .72rem;

}


/* ==========================================================
   APPEARANCE CONTROL
   ========================================================== */

.fh-appearance {

    position: fixed;

    top: 1.25rem;

    right: 1.5rem;

    z-index: 1000;

}


.fh-appearance-button {

    border:
        1px solid rgba(255, 255, 255, .28);

    background:
        rgba(9, 16, 24, .76);

    color: #ffffff;

    box-shadow:
        0 .8rem 2.4rem rgba(0, 0, 0, .20);

    -webkit-backdrop-filter:
        blur(16px);

    backdrop-filter:
        blur(16px);

}


.fh-appearance-button:hover,
.fh-appearance-button:focus {

    border-color:
        rgba(121, 207, 255, .85);

    background:
        rgba(9, 16, 24, .90);

    color: #ffffff;

}


.fh-appearance-menu {

    min-width: 13.5rem;

    border:
        1px solid var(--fh-border);

    background:
        var(--fh-surface-solid);

    box-shadow:
        0 1.5rem 4rem var(--fh-shadow);

}


.fh-appearance-menu .dropdown-item {

    color: var(--fh-text);

}


.fh-appearance-menu .dropdown-item:hover,
.fh-appearance-menu .dropdown-item:focus {

    background:
        rgba(127, 127, 127, .14);

    color: var(--fh-text);

}


.fh-appearance-menu .dropdown-item.active {

    background:
        #547fd8;

    color: #ffffff;

}


/* ==========================================================
   LIGHT MODE
   ========================================================== */

html[data-theme="light"] {

    color-scheme: light;

    --fh-text: #111820;

    --fh-muted:
        rgba(17, 24, 32, .75);

    --fh-subtle:
        rgba(17, 24, 32, .58);

    --fh-surface-solid:
        #ffffff;

    --fh-border:
        rgba(17, 24, 32, .18);

}


html[data-theme="light"]
.fh-house-bg {

    filter:
        brightness(1.08)
        saturate(.82);

}


html[data-theme="light"]
.fh-house-overlay {

    background:

        linear-gradient(
            90deg,

            rgba(247, 249, 252, .98) 0%,

            rgba(247, 249, 252, .93) 25%,

            rgba(247, 249, 252, .76) 46%,

            rgba(247, 249, 252, .35) 68%,

            rgba(247, 249, 252, .08) 100%
        ),

        linear-gradient(
            180deg,

            rgba(247, 249, 252, .18),

            rgba(247, 249, 252, .50)
        );

}


html[data-theme="light"]
.fh-house-vignette {

    box-shadow: none;

}


html[data-theme="light"]
.fh-brand-divider {

    background:
        rgba(17, 24, 32, .48);

}


html[data-theme="light"]
.fh-coming {

    color: #315da8;

}


html[data-theme="light"]
.fh-feature + .fh-feature {

    border-color:
        rgba(17, 24, 32, .20);

}


html[data-theme="light"]
.fh-launch {

    border-color:
        rgba(55, 111, 214, .65);

    background:
        rgba(255, 255, 255, .78);

    color: #315da8;

}


html[data-theme="light"]
.fh-footer {

    color:
        rgba(17, 24, 32, .65);

}


/* ==========================================================
   HIGH CONTRAST / VISUALLY IMPAIRED MODE
   ========================================================== */

html[data-theme="contrast"] {

    color-scheme: dark;

    --fh-text: #ffffff;

    --fh-muted: #ffffff;

    --fh-subtle: #ffffff;

    --fh-blue: #ffff00;

    --fh-border: #ffffff;

    --fh-surface-solid: #000000;

}


html[data-theme="contrast"]
.fh-house-bg {

    display: none;

}


html[data-theme="contrast"]
.fh-house-overlay {

    background: #000000;

}


html[data-theme="contrast"]
.fh-house-vignette {

    display: none;

}


html[data-theme="contrast"]
.fh-gradient-text {

    background: none;

    color: #ffff00;

    -webkit-text-fill-color:
        #ffff00;

}


html[data-theme="contrast"]
.fh-coming,
html[data-theme="contrast"]
.fh-feature-icon {

    color: #ffff00;

}


html[data-theme="contrast"]
.fh-launch {

    border: 2px solid #ffffff;

    background: #000000;

    color: #ffffff;

    box-shadow: none;

}


html[data-theme="contrast"]
.fh-launch i {

    color: #ffff00;

}


html[data-theme="contrast"]
.fh-appearance-button,
html[data-theme="contrast"]
.fh-appearance-menu {

    border: 2px solid #ffffff;

    background: #000000;

    box-shadow: none;

}


html[data-theme="contrast"]
.fh-appearance-menu
.dropdown-item.active {

    background: #ffff00;

    color: #000000;

}


html[data-theme="contrast"]
*:focus-visible {

    outline:
        4px solid #ffff00 !important;

    outline-offset:
        4px !important;

}


/* ==========================================================
   TABLET / MOBILE
   ========================================================== */

@media
(max-width: 767.98px) {

    /*
     * Keep the architectural portion of the image visible
     * while the overlay protects text readability.
     */

    .fh-house-bg {

        background-position:
            65% center;

    }


    .fh-house-overlay {

        background:

            linear-gradient(
                180deg,

                rgba(2, 6, 10, .82) 0%,

                rgba(2, 6, 10, .89) 38%,

                rgba(2, 6, 10, .95) 72%,

                rgba(2, 6, 10, .98) 100%
            );

    }


    .fh-house-vignette {

        box-shadow:
            inset 0 0 7rem
            rgba(0, 0, 0, .42);

    }


    .fh-brand-mark {

        font-size: 2.1rem;

    }


    .fh-brand-divider {

        height: 2.8rem;

    }


    .fh-brand-name {

        font-size: .72rem;

        letter-spacing: .22em;

    }


    .fh-brand-tagline {

        font-size: .48rem;

        letter-spacing: .19em;

    }


    .fh-coming {

        font-size: .64rem;

        letter-spacing: .23em;

    }


    .fh-main-title {

        font-size:
            clamp(
                2.85rem,
                13vw,
                4.8rem
            );

        line-height: 1.04;

    }


    .fh-feature + .fh-feature {

        border-left: 0;

        border-top:
            1px solid
            rgba(255, 255, 255, .18);

    }


    .fh-appearance {

        top: .75rem;

        right: .75rem;

    }

}


/* ==========================================================
   VERY SMALL MOBILE
   ========================================================== */

@media
(max-width: 420px) {

    .fh-main-title {

        font-size:
            clamp(
                2.6rem,
                13vw,
                3.6rem
            );

    }


    .fh-subtitle {

        font-size: 1.08rem;

    }


    .fh-intro {

        font-size: .94rem;

    }


    .fh-bottom-tagline {

        letter-spacing: .22em;

    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media
(prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}


/* ==========================================================
   DESKTOP VIEWPORT FIT
   Keep the complete landing page inside one viewport.
   ========================================================== */

@media (min-width: 768px) {

    html,
    body {
        width: 100%;
        height: 100%;
        min-height: 100%;
        overflow: hidden;
    }

    body {
        height: 100vh;
        height: 100dvh;
    }

    main.min-vh-100 {
        width: 100%;
        height: 100vh !important;
        height: 100dvh !important;

        min-height: 0 !important;
        max-height: 100dvh;

        overflow: hidden;

        /*
         * Bootstrap's py-5 remains in the markup, so constrain
         * the effective desktop padding here.
         */
        padding-top: 2rem !important;
        padding-bottom: 3.25rem !important;
    }

    /*
     * The inner container also carries Bootstrap py-* classes.
     * Reduce those slightly on desktop so the footer and hero
     * comfortably share the viewport.
     */
    main > .container-fluid {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    /*
     * Tighten vertical spacing without changing the visual
     * structure of the page.
     */
    .fh-content .fh-features {
        margin-top: 1.5rem !important;
    }

    .fh-content .fh-launch {
        margin-top: 1.25rem !important;
    }

    .fh-content .fh-bottom-tagline {
        margin-top: 1rem !important;
    }
}


/* ==========================================================
   SHORT DESKTOP / LAPTOP SCREENS
   ========================================================== */

@media (min-width: 768px) and (max-height: 800px) {

    .fh-brand-mark {
        font-size: 2.25rem;
    }

    .fh-brand-divider {
        height: 3rem;
    }

    header {
        margin-bottom: 1.5rem !important;
    }

    .fh-coming {
        margin-bottom: .75rem !important;
    }

    .fh-main-title {
        font-size: clamp(2.8rem, 5.4vw, 5.2rem);
    }

    .fh-subtitle {
        margin-top: .75rem !important;
        margin-bottom: .6rem !important;
    }

    .fh-intro {
        line-height: 1.5;
    }

    .fh-content .fh-features {
        margin-top: 1rem !important;
    }

    .fh-feature {
        min-height: 3.75rem;
        padding-top: .65rem !important;
        padding-bottom: .65rem !important;
    }

    .fh-feature-icon {
        font-size: 1.65rem;
    }

    .fh-content .fh-launch {
        margin-top: .8rem !important;
        padding-top: .65rem !important;
        padding-bottom: .65rem !important;
    }

    .fh-content .fh-bottom-tagline {
        margin-top: .75rem !important;
    }
}


/* ==========================================================
   MOBILE / TABLET
   Content stacks, so natural vertical scrolling is correct.
   ========================================================== */

@media (max-width: 767.98px) {

    html,
    body {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    main.min-vh-100 {
        min-height: 100dvh !important;
        height: auto !important;

        /*
         * Leave enough room below stacked content for the
         * footer without overlap.
         */
        padding-top: 4.5rem !important;
        padding-bottom: 5rem !important;
    }

    /*
     * Footer participates naturally at the end on mobile
     * instead of floating over stacked content.
     */
    .fh-footer {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;

        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}


/* ==========================================================
   LAB SPECIFICATIONS MODAL
   ========================================================== */

.fh-specs-button {
    border: 1px solid rgba(255, 255, 255, .30);

    background: rgba(8, 15, 23, .72);

    color: #ffffff;

    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.fh-specs-button:hover,
.fh-specs-button:focus {
    border-color: var(--fh-blue);

    background: rgba(12, 23, 34, .92);

    color: #ffffff;
}


/* Desktop: most of the viewport, but deliberately not all. */

.fh-specs-dialog {
    width: 92vw;
    max-width: 1180px;

    height: 88vh;
    max-height: 900px;
}

.fh-specs-dialog .modal-content {
    height: 100%;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, .16);

    background:
        rgba(7, 12, 18, .97);

    color: var(--fh-text);

    box-shadow:
        0 2rem 7rem rgba(0, 0, 0, .55);

    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}

.fh-specs-dialog .modal-header {
    flex: 0 0 auto;

    border-bottom:
        1px solid rgba(255, 255, 255, .10);
}

.fh-specs-dialog .modal-body {
    min-height: 0;

    overflow-y: auto;
}

.fh-specs-dialog .modal-footer {
    flex: 0 0 auto;

    border-top:
        1px solid rgba(255, 255, 255, .10);
}


/* Category cards */

.fh-spec-card {
    height: 100%;

    border:
        1px solid rgba(255, 255, 255, .10);

    background:
        rgba(255, 255, 255, .035);
}

.fh-spec-icon {
    width: 2.8rem;
    height: 2.8rem;

    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(121, 207, 255, .24);

    border-radius: .85rem;

    background:
        rgba(121, 207, 255, .08);

    color: var(--fh-blue);

    font-size: 1.25rem;
}

.fh-spec-category {
    color: var(--fh-text);

    font-size: .78rem;
    font-weight: 700;

    letter-spacing: .12em;
}

.fh-spec-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.fh-spec-list li {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;

    padding: .55rem 0;

    border-bottom:
        1px solid rgba(255, 255, 255, .07);

    color: var(--fh-muted);

    font-size: .88rem;
}

.fh-spec-list li:last-child {
    border-bottom: 0;
}

.fh-spec-list strong {
    color: var(--fh-text);

    font-weight: 600;

    text-align: right;
}


/* Light appearance */

html[data-theme="light"]
.fh-specs-dialog .modal-content {
    border-color:
        rgba(17, 24, 32, .14);

    background:
        rgba(250, 251, 253, .98);

    color: #111820;
}

html[data-theme="light"]
.fh-spec-card {
    border-color:
        rgba(17, 24, 32, .10);

    background:
        rgba(17, 24, 32, .025);
}

html[data-theme="light"]
.fh-specs-dialog .modal-header,
html[data-theme="light"]
.fh-specs-dialog .modal-footer,
html[data-theme="light"]
.fh-spec-list li {
    border-color:
        rgba(17, 24, 32, .10);
}


/* High contrast */

html[data-theme="contrast"]
.fh-specs-dialog .modal-content,
html[data-theme="contrast"]
.fh-spec-card {
    border: 2px solid #ffffff;

    background: #000000;

    box-shadow: none;
}

html[data-theme="contrast"]
.fh-spec-icon {
    border: 2px solid #ffff00;

    background: #000000;

    color: #ffff00;
}


/*
 * Mobile: true full-screen modal.
 */

@media (max-width: 767.98px) {

    .fh-specs-dialog {
        width: 100%;
        max-width: none;

        height: 100%;
        max-height: none;

        margin: 0;
    }

    .fh-specs-dialog .modal-content {
        height: 100vh;
        height: 100dvh;

        border: 0;
        border-radius: 0 !important;
    }

    .fh-spec-list li {
        font-size: .84rem;
    }

}