/* =========================================================
   LEGACY AV SOLUTIONS
   GLOBAL STYLESHEET

   DESIGN DIRECTION:
   - Dark / industrial
   - Professional AV / technology
   - Bold typography
   - Subtle metal influence
   - Restrained red, white, and blue branding
   ========================================================= */


/* =========================================================
   GOOGLE FONTS

   Barlow Condensed:
   Used for major headings and stronger branded typography.

   Inter:
   Used for body text, navigation, buttons, and other
   interface elements where readability is most important.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');


/* =========================================================
   1. CSS VARIABLES
   ========================================================= */

:root {

    /* ================================
       DARK SITE PALETTE
       ================================ */

    --color-black: #080808;
    --color-dark: #0d0e10;
    --color-dark-secondary: #151619;
    --color-surface: #1b1c20;


    /* ================================
       LIGHT SECTION PALETTE
       ================================ */

    /*
       Warm off-white is used for selected sections.

       This creates a strong visual break from the dark
       portions of the website without using harsh pure white.
    */

    --color-light-section: #ecebe7;
    --color-light-section-text: #252629;
    --color-light-section-text-secondary: #414247;
    --color-light-section-border: #c9c8c4;


    /* ================================
       TEXT COLORS
       ================================ */

    --color-white: #f7f7f7;
    --color-text: #f1f1f1;

    /*
       Warm metallic silver used for descriptive text
       on dark backgrounds.
    */

    --color-text-light: #d2d0cb;

    /*
       Used only for less-important information such as
       placeholders and copyright text.
    */

    --color-text-muted: #929397;


    /* ================================
       LEGACY AV SOLUTIONS BRAND COLORS
       ================================ */

    --brand-black: #000000;
    --brand-red: #AA3232;
    --brand-red-hover: #c13a3a;
    --brand-blue: #064B78;
    --brand-blue-light: #0b659e;
    --brand-white: #FDFAFA;


    /* ================================
       GENERAL ACCENT COLORS
       ================================ */

    --color-accent: var(--brand-red);
    --color-accent-hover: var(--brand-red-hover);


    /* ================================
       BORDERS
       ================================ */

    --color-border: #2c2e32;
    --color-border-light: #3a3c41;


    /* ================================
       TYPOGRAPHY
       ================================ */

    /*
       Barlow Condensed gives headings the strong,
       narrow industrial character used throughout
       the Legacy AV visual identity.
    */

    --font-display:
        "Barlow Condensed",
        Arial,
        sans-serif;


    /*
       Inter keeps paragraphs, navigation, buttons,
       forms, and smaller text clean and readable.
    */

    --font-body:
        "Inter",
        Arial,
        Helvetica,
        sans-serif;


    /* ================================
       SITE LAYOUT
       ================================ */

    --max-width: 1200px;
    --section-spacing: 100px;
}


/* =========================================================
   2. BASIC RESET
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


/* =========================================================
   3. BODY / GENERAL TEXT STYLES
   ========================================================= */

/*
   Inter is the primary reading font.

   It remains clean and highly readable for paragraphs,
   navigation, forms, buttons, and general interface text.
*/

body {
    font-family: var(--font-body);
    background-color: var(--color-dark);
    color: var(--color-text);
    line-height: 1.6;
}


/*
   Barlow Condensed is our display font.

   Using one consistent display family across H1, H2,
   and H3 creates a stronger visual relationship with
   the narrow, industrial Legacy AV logo.
*/

h1,
h2,
h3 {
    font-family: var(--font-display);
    color: var(--color-white);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.015em;
}


p {
    margin-bottom: 1rem;
}


a {
    text-decoration: none;
    color: inherit;
}


ul {
    list-style: none;
}


img {
    max-width: 100%;
    display: block;
}


/* =========================================================
   4. REUSABLE PAGE CONTAINER
   ========================================================= */

.section-container {
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
}


.section {
    padding: var(--section-spacing) 0;
}


/* =========================================================
   5. SECTION DIVIDERS
   ========================================================= */

.section-divider {
    width: 90%;
    max-width: var(--max-width);
    height: 1px;
    background-color: var(--color-border);
    margin: 0 auto;
}


/*
   Standard red branded divider.
*/

.section-divider--brand {
    width: 80px;
    height: 3px;
    background-color: var(--brand-red);
    margin: 1rem auto 2rem;
    border-radius: 1px;
}


/*
   Optional blue divider.

   This can be used elsewhere later when we want a subtle
   Legacy-blue visual separator.
*/

.section-divider--blue {
    width: 90%;
    max-width: var(--max-width);
    height: 2px;
    background-color: var(--brand-blue);
    margin: 0 auto;
}


/* =========================================================
   6. SECTION LABELS / INTRO TEXT
   ========================================================= */

.section-label {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--brand-red);
    margin-bottom: 0.9rem;
}


.section h2 {
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    margin-bottom: 1.25rem;
}


.section-intro {
    max-width: 650px;
    color: var(--color-text-light);
    margin-bottom: 2rem;
    line-height: 1.8;
}


/* =========================================================
   7. HEADER / NAVIGATION
   ========================================================= */

.site-header {
    background-color: rgba(5, 5, 5, 0.97);
    border-bottom: 1px solid var(--color-border);

    position: sticky;
    top: 0;

    z-index: 1000;
}


.nav-container {
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;

    min-height: 82px;

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

    gap: 2rem;
}


/* =========================================================
   8. LOGO
   ========================================================= */

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}


.logo img {
    height: 60px;
    width: auto;
    display: block;
}


/* =========================================================
   9. NAVIGATION LINKS
   ========================================================= */

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}


.nav-links a {
    position: relative;
    display: inline-block;

    padding: 0.5rem 0;

    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.04em;

    color: var(--brand-white);

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}


.nav-links a:hover {
    color: var(--brand-red);
}


.nav-links a.active {
    color: var(--brand-red);
    font-weight: 700;
}


.nav-links a.active::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background-color: var(--brand-red);
}


/* =========================================================
   10. BUTTONS
   ========================================================= */

.button {
    display: inline-block;

    padding: 0.9rem 1.6rem;

    border-radius: 2px;

    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.08em;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.button:hover {
    transform: translateY(-2px);
}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.button-primary {
    background-color: var(--brand-red);
    color: var(--brand-white);

    border: 2px solid var(--brand-red);
}


.button-primary:hover {
    background-color: var(--brand-red-hover);
    border-color: var(--brand-red-hover);

    box-shadow:
        0 8px 24px rgba(170, 50, 50, 0.22);
}


/* =========================================================
   SECONDARY BUTTON
   ========================================================= */

.button-secondary {
    background-color: transparent;
    color: var(--brand-white);

    border: 2px solid var(--color-border-light);
}


.button-secondary:hover {
    background-color: var(--brand-white);
    color: var(--brand-black);

    border-color: var(--brand-white);
}


/* =========================================================
   11. TEXT LINKS
   ========================================================= */

.text-link {
    position: relative;
    display: inline-block;

    color: var(--brand-red);

    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.04em;

    text-transform: uppercase;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


.text-link:hover {
    color: var(--brand-red-hover);

    transform: translateX(3px);
}


.text-link::after {
    content: " →";
}





/* =========================================================
   13. FOOTER
   ========================================================= */

.site-footer {
    background-color: var(--brand-black);
    color: var(--brand-white);

    border-top: 1px solid var(--color-border);

    padding-top: 35px;
}


/* =========================================================
   MAIN FOOTER LAYOUT
   ========================================================= */

.footer-container {
    width: 90%;
    max-width: var(--max-width);

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1.4fr 2fr 1.5fr 0.7fr;

    align-items: start;

    gap: 2rem;

    padding-bottom: 30px;
}


/* =========================================================
   FOOTER COMPANY NAME
   ========================================================= */

.footer-company h2 {
    color: var(--brand-white);

    margin-bottom: 0;

    font-size: 1.4rem;
    font-weight: 800;

    letter-spacing: -0.02em;
}


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

.footer-links h3,
.footer-contact h3,
.footer-social-section h3 {
    color: var(--brand-white);

    margin-bottom: 0.75rem;

    font-size: 0.9rem;
    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


/* =========================================================
   QUICK LINKS
   ========================================================= */

.footer-links ul {
    display: flex;
    flex-wrap: wrap;

    gap: 0.5rem 1rem;

    padding: 0;
    margin: 0;

    list-style: none;
}


.footer-links li {
    margin: 0;
}


.footer-links a {
    color: #b9bbc0;

    font-size: 0.88rem;

    transition: color 0.2s ease;
}


.footer-links a:hover {
    color: var(--brand-red);
}


/* =========================================================
   CONTACT INFORMATION
   ========================================================= */

.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 0.5rem;
}


.footer-contact p {
    margin: 0;

    color: #b9bbc0;

    font-size: 0.88rem;
}


.footer-contact a:not(.footer-contact-button) {
    color: #b9bbc0;

    transition: color 0.2s ease;
}


.footer-contact a:not(.footer-contact-button):hover {
    color: var(--brand-red);
}


.footer-contact-button {
    display: inline-block;

    background-color: var(--brand-red);
    color: var(--brand-white);

    padding: 0.65rem 1.15rem;
    margin-bottom: 0.4rem;

    border: 1px solid var(--brand-red);
    border-radius: 2px;

    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;

    text-transform: uppercase;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.footer-contact-button:hover {
    background-color: var(--brand-red-hover);
    border-color: var(--brand-red-hover);

    transform: translateY(-2px);
}


/* =========================================================
   SOCIAL MEDIA
   ========================================================= */

.footer-socials {
    display: flex;
    align-items: center;

    gap: 0.75rem;
}


.footer-socials img {
    width: 34px;
    height: 34px;

    object-fit: contain;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


.footer-socials a:hover img {
    transform: translateY(-2px);

    opacity: 0.8;
}


/* =========================================================
   BOTTOM COPYRIGHT AREA
   ========================================================= */

.footer-bottom {
    border-top: 1px solid var(--color-border);

    text-align: center;

    padding: 1rem;

    color: var(--color-text-muted);

    font-size: 0.8rem;

    letter-spacing: 0.02em;
}


.footer-bottom p {
    margin-bottom: 0;
}


/* =========================================================
   14. TABLET RESPONSIVE DESIGN
   ========================================================= */

@media (max-width: 900px) {

    .nav-container {
        flex-wrap: wrap;

        padding: 1rem 0;
    }


    .main-nav {
        width: 100%;

        order: 3;
    }


    .nav-links {
        justify-content: center;
        flex-wrap: wrap;

        gap: 1rem 1.4rem;
    }


    .footer-container {
        grid-template-columns: 1fr 1fr;
    }

}


/* =========================================================
   15. MOBILE RESPONSIVE DESIGN
   ========================================================= */


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

/*
   The hamburger menu is hidden by default.

   Desktop visitors continue using the normal navigation.
*/

.mobile-menu-toggle {
    display: none;
}


@media (max-width: 600px) {

    :root {
        --section-spacing: 70px;
    }


    /* =========================================================
       MOBILE NAVIGATION BUTTON
       ========================================================= */

    /*
       On smaller screens, display the hamburger button.

       The button sits on the right side of the header while
       the Legacy AV logo remains on the left.
    */

    .mobile-menu-toggle {
        display: flex;

        flex-direction: column;

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

        gap: 5px;

        width: 44px;
        height: 44px;

        padding: 8px;

        background: transparent;

        border: none;

        cursor: pointer;

        z-index: 1001;
    }


    /*
       These three spans create the three horizontal
       lines of the hamburger icon.
    */

    .mobile-menu-toggle span {
        display: block;

        width: 26px;
        height: 2px;

        background-color: #ffffff;

        transition:
            transform 0.3s ease,
            opacity 0.3s ease;
    }


    /* =========================================================
       MOBILE HEADER
       ========================================================= */

    /*
       On mobile, the header becomes part of the normal page
       flow instead of remaining sticky.

       position: relative also gives the dropdown navigation
       a positioning reference.
    */

    .site-header {
        position: relative;

        top: auto;

        transition: padding 0.25s ease;
    }


    /*
       Keep the logo and hamburger button next to each other
       on mobile.

       The navigation itself will open underneath them.
    */

    .nav-container {
        position: relative;

        flex-direction: row;
        flex-wrap: wrap;

        align-items: center;
        justify-content: space-between;

        gap: 0.75rem;

        min-height: auto;

        padding: 0.75rem 0;
    }


    .logo img {
        height: 45px;
    }


    /* =========================================================
       MOBILE NAVIGATION MENU
       ========================================================= */

    /*
       Hide the navigation by default on mobile.

       JavaScript will add the "menu-open" class when the
       visitor clicks the hamburger button.
    */

    .main-nav {
        display: none;

        position: absolute;

        top: 100%;
        left: 0;

        width: 100%;

        background-color: #0a0a0a;

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

        z-index: 1000;
    }


    /*
       Display the navigation when JavaScript adds
       the "menu-open" class.
    */

    .main-nav.menu-open {
        display: block;
    }


    /*
       Stack navigation links vertically inside the
       mobile dropdown.
    */

    .main-nav .nav-links {
        display: flex;

        flex-direction: column;

        justify-content: center;
        align-items: stretch;

        flex-wrap: nowrap;

        gap: 0;

        width: 100%;

        margin: 0;

        padding: 0.75rem 0;
    }


    /*
       Each list item fills the entire dropdown width.
    */

    .main-nav .nav-links li {
        width: 100%;
    }


    /*
       Make the entire row clickable.

       This gives mobile visitors a much larger and easier
       tap target than just the navigation text itself.
    */

    .main-nav .nav-links a {
        display: block;

        width: 100%;

        padding: 0.9rem 1.5rem;

        text-align: center;

        font-size: 0.82rem;

        letter-spacing: 0.04em;
    }


    /*
       Give navigation links subtle visual feedback.
    */

    .main-nav .nav-links a:hover {
        background-color: rgba(255, 255, 255, 0.06);
    }


    /* =========================================================
       MOBILE HEADER - SCROLLED STATE
       ========================================================= */

    /*
       JavaScript adds the "scrolled" class after the
       visitor moves more than 50px down the page.

       This keeps our existing compact-header behavior.
    */

    .site-header.scrolled {
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
    }


    /* =====================================================
       GENERAL MOBILE TYPOGRAPHY
       ===================================================== */

    .section h2 {
        font-size: 2rem;
    }


    .section-label {
        font-size: 0.72rem;
        letter-spacing: 0.15em;
    }


    /* =====================================================
       MOBILE BUTTONS
       ===================================================== */

    .button {
        padding: 0.85rem 1.35rem;

        font-size: 0.8rem;
    }


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

    .footer-container {
        grid-template-columns: 1fr;
    }


    /* =========================================================
       MOBILE MENU BUTTON - OPEN STATE
       ========================================================= */

    /*
       When the mobile navigation is open, JavaScript changes
       aria-expanded from "false" to "true".

       We use that state here to transform the three hamburger
       lines into an X.
    */

    .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }


    /*
       Hide the middle hamburger line while the menu is open.
    */

    .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }


    /*
       Move and rotate the bottom line in the opposite
       direction to complete the X shape.
    */

    .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

}