/* 
Author:  Syncresia
Date:    2025-05-22
Version: 1.0

What is this: 
This is the Footer Visual Style for the Syncresia website.


DONE: V1
- Responsive design 

TODO:
Refactor (later)?


*/



/* footer */

.footer-container {
    background: rgba(0, 0, 0, 0.95);
    z-index: 1000000; /* Higher than sidebar (999) */
    padding: 1rem 0;
    width: 100%;
    display: flex;
    justify-content: center;  /* Center the footer wrapper */
    position: relative;
}

.footer-wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}








.footer-menu::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari/Edge */
}


.NorthStarOS-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    color: White;  /* Keep consistent with your footer text */
    font-size: clamp(0.8rem, 1vw, 1rem);
    transition: color 0.2s ease;
    margin-left: auto; /* Push to the right side */
}
.NorthStarOS-link:hover {
    color: var(--secondary-color);
}

.NorthStarOS-link:visited {
    color: var(--primary-color);
    text-decoration: none; /* Ensure no underline if that's your style */
}


.NorthStarOS-image {
   width: calc((1.5rem + 0.5vw) * 0.7);
    height: calc((1.5rem + 0.5vw) * 0.7);
    border-radius: 30%;
    object-fit: cover;
    flex-shrink: 0; /* Prevent image shrinking */
    border: 2px solid var(--quaternary-color);
}


.ftwr
{
    text-transform: uppercase;
    color: white;
    text-decoration: none;
    font-weight: 800;
    transition: color 0.3s ease;
    font-family: var(--font-nav);
    position: relative;
    white-space: nowrap; /* Prevent text wrapping */
    
}

.footer-link {
    display: inline-flex; /* Changed to inline-flex */
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    flex-shrink: 0; /* Prevent shrinking */
}

.footer-menu {
    display: flex;
    list-style: none;
    flex-wrap: nowrap;
    justify-content: center;  /* Center the menu items */
    align-items: center;
    padding: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: nowrap;
      /*gap: clamp(1rem, 2vw, 2rem);  */
      gap: calc(0.3rem + 0.3vw); /* JDC_Responsive gap: Gap Between Items */
}

.footer-link span {
    color: var(--primary-color);
    white-space: nowrap;






    /*font-size: clamp(0.7rem, 1vw, 1rem);
    /*font-size: clamp(1rem, 2.5vw, 1.5rem);*/
    /* Responsive font size */
    font-size:  calc(0.5rem + 0.4 * 100vw/100 ); /* JDC_Responsive: Font Size  */
    /*font-size: clamp(0.8rem, 1.5vw, 1.3rem);*/ /* Responsive font size */
    letter-spacing: clamp(0.5px, 0.5vw, 1px); /* Responsive letter spacing. Seems not important */
    
     
    
     
}

.footer-image {
  
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0; /* Prevent image shrinking */
    border: 2px solid var(--primary-color);
    
    width: calc(1.6rem + 0.5vw); /* JDC_Responsive: Images size  */
    height: calc(1.6rem + 0.5vw); /* JDC_Responsive: Images size  */
}


.footer-link:hover .footer-image {
    transform: scale(1.1);
    border-color: var(--secondary-color);
}





/* Large screens to medium screens */
@media (max-width: 1200px) {

      .footer-menu {
        flex-direction: column;
        align-items: flex-start; /* Left align the entire menu */
        gap: 0.5rem;
        max-height: 50vh;
        overflow-y: auto;
        padding: 0.5rem;
        white-space: normal;
    }
    
    /* Make each footer link align icons */
    .footer-link {
        width: 100%;
        
        padding: 0.5rem 0;
        display: grid;
        grid-template-columns: 40px 1fr; /* Fixed width for icons column */
        align-items: center;
        gap: 0.75rem; /* Space between icon and text */
       margin-left: 30vw;
       /*JDC_Responsive: Margin-left trick to align things at center*/
       
    }
    
    /* Fix the icon position */
    .footer-image {
        justify-self: center; /* Center the image in its column */
        margin-left:0.5hw;
    }

    
 
}