/* =============================================================================
   FLACKWELL AEROSPACE - STYLES
   =============================================================================
   This stylesheet uses relative units (rem, vw, vh, %) instead of pixels
   for responsive scaling across all screen sizes.

   Key concepts:
   - rem: relative to root font size (html). 1rem = 16px by default
   - vw/vh: percentage of viewport width/height
   - clamp(min, preferred, max): fluid sizing that scales between min and max
   - rgba(): colors with alpha transparency (0 = transparent, 1 = opaque)
============================================================================= */


/* =============================================================================
   RESET & BASE
============================================================================= */

/* Remove default browser margins/padding and use border-box for easier sizing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* padding/border included in element's total width/height */
}

/* Base font size - scales with viewport so site looks proportionally the same on all screens
   0.833vw makes 1rem ≈ 16px on a 1920px wide screen
   clamp() sets min 12px (mobile readability) and max 20px (large screen cap) */
html {
    font-size: clamp(12px, 0.833vw, 20px);
    overflow-y: scroll;         /* Always show scrollbar to prevent layout shift */
    overscroll-behavior: none;  /* Prevent pull-to-refresh / rubber-band bounce */
}

/* Global body styles */
body {
    /* Font stack: Space Grotesk (Google Font) with system fallbacks */
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background-color: #000000;  /* Black background for tall screens */
    color: #ffffff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    width: 100%;
    position: relative;

    /* Background image - anchored to top, with dark overlay */
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        url('assets/background.webp');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;   /* Stays in place while scrolling */
}

/* Grid hash overlay - darkens background in a stylized way */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;                 /* Above background, below content */
    pointer-events: none;

    /* Dense diagonal hash pattern - uses pixels intentionally for clean screen rendering */
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 1px,
            rgba(0, 0, 0, 0.2) 1px,
            rgba(0, 0, 0, 0.2) 2px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 1px,
            rgba(0, 0, 0, 0.2) 1px,
            rgba(0, 0, 0, 0.2) 2px
        );
}


/* =============================================================================
   HEADER
   Fixed at top of screen with gradient fade to transparent
============================================================================= */

header {
    position: fixed;            /* Stays at top while scrolling */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;              /* Above other content */
    padding: 1.5rem 4vw;        /* Vertical: 1.5rem, Horizontal: 4% of viewport width */
    display: flex;
    justify-content: space-between;  /* Logo left, nav right */
    align-items: center;             /* Vertically centered */
    /* Vignette: solid black at top, then blends to transparent */
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 55%,
        rgba(0, 0, 0, 0) 100%);
    padding-bottom: 4rem;       /* Extend gradient further down */
}

/* Logo container */
.logo {
    display: flex;
    align-items: center;
}

/* Logo SVG sizing - clamp provides fluid scaling with min/max bounds */
.logo-img {
    /* Min: 20rem, Preferred: 40% viewport width, Max: 30rem */
    width: clamp(20rem, 40vw, 30rem);
    height: auto;  /* Maintain aspect ratio */
}

/* Mobile PNG logo - hidden on desktop */
.logo-img-mobile {
    display: none;
}


/* =============================================================================
   NAVIGATION - Airbus ECAM Display Style
   Clean LCD look with subtle pixel grid overlay
============================================================================= */

nav {
    position: relative;
    display: flex;
    gap: 0.35rem;

    /* Dark screen background with subtle orange tint */
    background: rgba(20, 10, 5, 0.85);

    padding: 0.35rem;
    border-radius: 0.125rem;    /* Sharp corners like Airbus displays */

    /* Subtle border */
    border: 0.0625rem solid rgba(255, 160, 50, 0.4);

    /* Glow effect */
    box-shadow:
        0 0 0.75rem rgba(255, 140, 50, 0.25),
        inset 0 0 1rem rgba(255, 140, 50, 0.08);
}

/* Pixel grid overlay - CRT phosphor dot effect */
nav::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0.125rem;
    z-index: 10;

    /* ECAM-style pixel grid - uses pixels intentionally for clean screen rendering */
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.3) 1px, transparent 1px);
    background-size: 1.5px 1.5px;

    pointer-events: none;
}

/* Individual navigation links */
.nav-link {
    position: relative;
    z-index: 2;
    padding: 0.35rem 1rem;
    border: 0.0625rem solid transparent;  /* Prevent size change when active */
    border-radius: 0;           /* Sharp corners */
    text-decoration: none;

    /* Amber text like Airbus ECAM */
    color: rgba(255, 180, 100, 0.9);

    font-size: clamp(0.8rem, 1.8vw, 1rem);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;

    transition: all 0.15s;
    cursor: pointer;
}

/* Nav link hover state */
.nav-link:hover {
    background: rgba(255, 160, 50, 0.15);
    color: #ffb060;
}

/* Active/selected nav link */
.nav-link.active {
    background: rgba(255, 160, 50, 0.2);
    color: #ffc080;
    border: 0.0625rem solid rgba(255, 160, 50, 0.5);
}


/* =============================================================================
   MAIN CONTENT
   Centered content area for page content
============================================================================= */

main {
    flex: 1;                    /* Expand to fill available space */
    display: flex;
    flex-direction: column;
    justify-content: center;    /* Vertically center content */
    align-items: center;        /* Horizontally center content */

    /* Padding accounts for fixed header (15vh top) and footer (10vh bottom) */
    padding: 15vh 5vw 10vh;
    text-align: center;
    position: relative;
    z-index: 2;                 /* Above the hash overlay */
}

/* Hero section container (welcome page) */
.hero {
    max-width: 50rem;           /* Limit width for readability */
    width: 90%;                 /* But allow narrower on small screens */
    text-align: center;         /* Center all text */
    margin: 0 auto;             /* Center the container */
}

/* Main headline */
.hero h1 {
    /* Fluid sizing: 1.75rem min, scales with viewport, 3.5rem max */
    font-size: clamp(1.75rem, 7vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.1;           /* Tight line height for headlines */
}

/* Hero paragraph text */
.hero p {
    font-size: clamp(1.1rem, 4vw, 1.5rem);
    color: rgba(255, 255, 255, 0.85);  /* Brighter white */
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Subtitle styling */
.hero .subtitle {
    color: rgba(255, 255, 255, 0.9);  /* Even brighter */
}

/* Tagline styling */
.tagline {
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    color: rgba(255, 255, 255, 0.7);  /* Brighter than before */
    font-style: italic;
}


/* =============================================================================
   INVESTORS PAGE
============================================================================= */

.investors-content {
    max-width: 45rem;
    width: 90%;
    background: rgba(0, 0, 0, 0.6);
    padding: 2.5rem;
    border-radius: 0.5rem;
}

.investors-content h1 {
    font-size: clamp(1.75rem, 5vw, 3rem);
    margin-bottom: 1.25rem;
}

.investors-content p {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Contact information card */
.contact-info {
    background: rgba(0, 0, 0, 0.5);
    border: 0.0625rem solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    padding: 2.5rem;
    text-align: left;
}

/* Email link styling - ECAM style blue text */
.contact-info a {
    position: relative;
    z-index: 2;
    display: inline-block;
    color: #00ccff;
    text-decoration: none;
    background: transparent;
    border: none;
    padding: 0.4rem 1rem;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    font-weight: 500;
    letter-spacing: 0.03em;
    transition: all 0.15s;
}

.contact-info a:hover {
    background: rgba(0, 200, 255, 0.15);
    color: #55eeff;
}

/* Email container with copy button - ECAM style like nav */
.email-row {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 10, 5, 0.95);
    padding: 0.4rem;
    border-radius: 0.125rem;
    border: 0.0625rem solid rgba(0, 255, 100, 0.6);
    box-shadow: 0 0 0.5rem rgba(0, 255, 100, 0.15);
}

/* Pixel grid overlay for email row */
.email-row::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0.125rem;
    z-index: 10;
    /* ECAM-style pixel grid - uses pixels intentionally for clean screen rendering */
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.3) 1px, transparent 1px);
    background-size: 1.5px 1.5px;
    pointer-events: none;
}

/* Copy button - ECAM style */
.copy-btn {
    position: relative;
    z-index: 2;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0.4rem 1rem;
    color: #00ff66;
    font-size: clamp(0.85rem, 2vw, 1rem);
    font-family: inherit;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.15s;
}

.copy-btn:hover {
    background: rgba(0, 255, 100, 0.15);
    color: #55ff99;
}

.copy-btn:active {
    background: rgba(0, 255, 100, 0.25);
}


/* =============================================================================
   FOOTER
   Fixed at bottom with gradient fade (opposite of header)
============================================================================= */

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;                 /* Above background and hash overlay */
    padding: 1rem 4vw;
    padding-top: 5rem;          /* Extend gradient further up */
    display: flex;
    justify-content: space-between;  /* Copyright left, social right */
    align-items: flex-end;
    /* Vignette: transparent at top, fades to black */
    background: linear-gradient(0deg,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 30%,
        rgba(0, 0, 0, 0) 100%);
}

/* Copyright text */
.copyright {
    font-size: clamp(0.7rem, 2vw, 0.85rem);
    color: rgba(255, 255, 255, 0.5);  /* Dimmed */
}

/* Social media links container */
.social-links {
    display: flex;
    gap: 1rem;
}

/* Individual social media link */
.social-link {
    /* Square sizing that scales with viewport */
    display: block;
    width: clamp(1.5rem, 4vw, 2rem);
    height: clamp(1.5rem, 4vw, 2rem);
    opacity: 0.6;               /* Dimmed by default */
}

.social-link:hover {
    opacity: 1;                 /* Full brightness on hover */
}

/* Social icon images - filter makes them white */
.social-link img {
    width: 100%;
    height: 100%;
    /* brightness(0) makes black, invert(1) flips to white */
    filter: brightness(0) invert(1);
}


/* =============================================================================
   RESPONSIVE - MOBILE ADJUSTMENTS
   Applies when viewport is 48rem (768px) or narrower
============================================================================= */

@media (max-width: 48rem) {
    /* Lock everything to viewport on mobile - prevent iOS overscroll bounce */
    html {
        overflow: hidden;
        height: 100%;
    }

    body {
        overflow: hidden;
        height: 100%;
        background-image: none;
    }

    /* Use a fixed pseudo-element for the background so it never moves */
    html::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -1;
        background-image:
            linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
            url('assets/background.webp');
        background-position: bottom center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    header {
        padding: 0.75rem 4vw;   /* Reduce vertical padding */
        padding-bottom: 6rem;    /* Push vignette fade further down on mobile */
        align-items: center;
    }

    /* Hide SVG text logo on mobile */
    .logo-img {
        display: none;
    }

    /* Show PNG logo on mobile - !important overrides inline style */
    .logo-img-mobile {
        display: block !important;
        height: clamp(2rem, 8vw, 3rem);
        width: auto;
    }

    nav {
        gap: 0.25rem;
        padding: 0.5rem;
    }

    .nav-link {
        padding: 0.5rem 1rem;
        font-size: clamp(0.9rem, 3vw, 1.1rem);
    }

    main {
        padding: 12vh 5vw 8vh;  /* Less vertical padding for mobile */
    }

    footer {
        padding: 0.75rem 4vw;
    }

    .social-link {
        width: clamp(2rem, 6vw, 2.5rem);
        height: clamp(2rem, 6vw, 2.5rem);
    }

    /* Hide copy button on mobile */
    .copy-btn {
        display: none;
    }

    /* Center email and content on mobile */
    .contact-info {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .investors-content {
        width: 95%;
    }
}