/* ==========================================
   ZYKRA GLOBAL CSS
   Purpose:
   - Design Tokens (colors, fonts, spacing)
   - Reset
   - Top Navigation
   - Header Navigation
   - Footer
   - Responsive Styles

   IMPORTANT:
   Update colors, fonts, spacing, and sizing
   from the :root section below.
========================================== */


/* ==========================================
   DESIGN TOKENS
========================================== */

:root {

    /* COLORS */
    --color-surface: #000000;
    --color-surface-alt: #000103;

    --color-background: #ffffff;

    --color-text: #111111;
    --color-text-light: #ffffff;

    --color-primary: purple;
    --color-primary-hover: #6b21a8;

    /* FONTS */
    --font-heading: "Google Sans Flex", sans-serif;
    --font-body: "Montserrat", sans-serif;

    /* FONT WEIGHTS */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-extra: 700;

    /* SPACING */
    --space-xs: 0.5rem;     /* 8px */
    --space-sm: 1rem;       /* 16px */
    --space-md: 1.5rem;     /* 24px */
    --space-lg: 2rem;       /* 32px */
    --space-xl: 3rem;       /* 48px */

    /* SIZING */
    --logo-width: 200px;
    --container-padding: 40px;

    /* BUTTONS */
    --button-radius: 20px;

    /* TRANSITIONS */
    --transition-fast: 0.3s ease;

}


/* ==========================================
   GLOBAL RESET
========================================== */

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

body {
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-body);
}


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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
}

p {
    font-family: var(--font-body);
}

a {
    text-decoration: none;
}


/*-------------Current Priority Section-----------------------*/
.main-nav { 
  display: none; 
}



.footer-top-container { 
  display: none; 
}



/*------------------Misc Global Styles------------------*/


    
    
    
/* ==========================================
   TOP NAV
========================================== */

.top-nav-cards {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-surface-alt);
    padding: 10px;
}

.div-1 img {
    width: 20px;
    height: auto;
}

.div-3 a {
    color: var(--color-text-light);
    font-size: 16px;
}


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

.site-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--container-padding);
    background: var(--color-surface);
    position: relative;
    z-index: 1000;
    gap: 20px;
    
}


/* ==========================================
   LOGO
========================================== */

.logo img {
    width: var(--logo-width);
    height: auto;
}


/* ==========================================
   NAVIGATION
========================================== */

.nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.main-nav ul {
    display: flex;
    gap: 20px;
    list-style: none;
}

.main-nav li {
    position: relative;
}

.main-nav a {
    color: var(--color-text-light);
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);

    padding: 22px 16px;

    display: block;

    transition: var(--transition-fast);
}

.main-nav a:hover {
    background-color: var(--color-text-light);
    color: var(--color-primary);
}


/* Mobile-only navigation item */

.work-with-us {
    display: none;
}


/* ==========================================
   NAV CTA BUTTON
========================================== */

.nav-cta button {
    padding: 12px 45px;

    font-family: var(--font-heading);
    font-size: 16px;

    background: var(--color-primary);
    color: var(--color-text-light);

    border: none;
    border-radius: var(--button-radius);

    cursor: pointer;

    transition: var(--transition-fast);
}

.nav-cta button:hover {
    background: var(--color-text-light);
    color: var(--color-primary);
}












/* ==========================================
   CTA BUTTON
========================================== */

.header-cta button {
    padding: 12px 45px;

    font-family: var(--font-heading);
    font-size: 16px;

    background: var(--color-primary);
    color: var(--color-text-light);

    border: none;
    border-radius: var(--button-radius);

    cursor: pointer;

    transition: var(--transition-fast);
}

.header-cta button:hover {
    background: var(--color-text-light);
    color: var(--color-primary);
}


/* ==========================================
   HAMBURGER MENU
========================================== */

.hamburger {
    display: none;

    flex-direction: column;
    gap: 5px;

    background: none;
    border: none;

    cursor: pointer;
}

.hamburger span {
    width: 25px;
    height: 3px;

    background: var(--color-text-light);
}


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

.footer-top-container {
    display: flex;

    background-color: var(--color-background);

    padding: var(--space-xl) var(--container-padding);

    gap: 6em;
}


/* ==========================================
   FOOTER LEFT
========================================== */
.left-container {
    padding-top: var(--space-sm);
}

.left-container h2 {
    color: var(--color-primary);
    font-weight: var(--weight-extra);

    padding-bottom: 0.5em;
}

.left-container p {
    color: var(--color-primary);
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
}

.left-container a,
.left-container a:visited {
    color: var(--color-primary);
    font-weight: var(--weight-extra);
}


.left-container p {
    width: 300px;
    

    line-height: 1.8em;
    font-size: 16px;

    padding-bottom: 0.5em;
}


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

.right-container {
    display: flex;
    gap: 100px;

    padding-top: 1.5em;
}

.right-container h3,
.right-container ul {
    color: var(--color-primary);
}

.right-container h3 {
    padding-bottom: 1em;
}

.right-container ul {
    list-style: none;
    line-height: 2;
    
}

.right-container li {
    text-decoration: none;
    font-weight: var(--weight-regular);
}

.right-container a {
    color: inherit;
}

.right-container a:hover {
    text-decoration: underline;
}


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

.bottom-container {
    text-align: center;
    padding: 20px 0;
}

.bottom-container p {
    color: var(--color-primary);
}


/* ==========================================
   DESKTOP ONLY
========================================== */

@media (min-width: 992px) {

    .top-nav-cards {
        display: none;
    }

}


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

@media (max-width: 1024px) {
    
    
    
    .site-header { 
        padding-left: 10px; 
    }

    .main-nav {
        position: absolute;

        top: 100%;
        left: 0;

        width: 100%;

        background: var(--color-surface);

        display: none;
        flex-direction: column;

        
    }

    .main-nav ul {
        flex-direction: column;
        gap: 20px;
    }

    .main-nav.active {
        display: block;
    }

    .header-cta button {
        width: 100%;
        display: block;
    }
    
    .nav-cta button { 
        display: none; 
    }

    .work-with-us {
        display: block;
    }

    .hamburger {
        display: none; /* When you want to show the hamburger menu again, change display from none to flex*/
    }
    
    /* Footer*/
    
    .footer-top-container { 
        display: block;
        justify-content: center; /* horizontal */
        align-items: center;     /* vertical */
        text-align: center;
    }
    
    .left-container p {
        display: none;
    }
    
    .right-container { 
        display: block;
        
    }
    
    .solutions,
    .resources,
    .contact-us {
        padding-bottom: var(--space-md);
        
    }
    
    

}