/* ------------------------------
         MOBILE: START
   ------------------------------ */

/* Mobile Menu - Below 623px */
@media only screen and (max-width: 38.94rem) {
    
    /* ------------------------------
             MOBILE: NAV LOGO
       ------------------------------ */
    
    #cs-navigation .cs-logo {
        width: 3rem;  /* Adjust based on design */
        height: 3rem; /* Square aspect ratio */
        animation: animateMobileIcons 0.5s ease;
    }
    
    /* Ensure mobile logos remain hidden on desktop */
    .logo-desktop, .logo-desktop-hover {
        display: none;
    }

    /* Mobile logo (default) */
    .logo-mobile {
        width: 3rem;
        height: 3rem;
        display: block;
    }

    /* Mobile hover logo (hidden by default) */
    .logo-mobile-hover {
        width: 3rem;
        height: 3rem;
        display: none;
    }

    /* On hover, show hover logo */
    #cs-navigation .cs-logo:hover .logo-mobile {
        display: none;
    }

    #cs-navigation .cs-logo:hover .logo-mobile-hover {
        display: block;
    }
    
    /* Hide the logo when the menu is open */
    #cs-navigation.cs-active .cs-logo {
        display: none;
    }
    
    /* ---------------------------------
           MOBILE: NAV SOCIAL MEDIA
    --------------------------------- */
        
    #cs-navigation .cs-social-instagram-nav {
        width: 3rem;
        height: 3rem;
        position: relative;
        margin: 0 auto 0 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        opacity: 0; /* Start hidden */
        visibility: hidden; /* Prevent interaction */
        transform: translateX(5rem) scale(0);
        transition: transform 0.5s ease;
    }

    /* Show social icon when the menu is open */
    #cs-navigation.cs-active .cs-social-instagram-nav {
        opacity: 1;
        visibility: visible;
        transform: translateX(0) scale(1);
    }

    /* Prevent image dragging */
    #cs-navigation .cs-social-instagram-nav img {
        user-drag: none;
        -webkit-user-drag: none; /* For Safari */
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    /* Default Instagram icon */
    #cs-navigation .cs-instagram-icon-nav {
        width: 3rem;
        height: 3rem;
        display: block;
    }

    /* Hidden hover state */
    #cs-navigation .cs-instagram-icon-nav-hover {
        width: 3rem;
        height: 3rem;
        display: none;
    }

    /* Hover Effect - Scale Up with a different ease */
    #cs-navigation .cs-social-instagram-nav:hover {
        transform: scale(1.1); /* Slight scale-up effect */
        transition: transform 0.2s ease; /* Different transition for hover */
    }

    #cs-navigation .cs-social-instagram-nav:hover .cs-instagram-icon-nav {
        display: none;
    }

    #cs-navigation .cs-social-instagram-nav:hover .cs-instagram-icon-nav-hover {
        display: block;
    }
   
    /* ------------------------------
           MOBILE: NAV MENU SLIDER
       ------------------------------ */

    #cs-navigation .cs-toggle {
        width: 3rem;
        height: 3rem;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        animation: animateMobileIcons 0.5s ease;
    }
    
    #cs-navigation .cs-toggle img {
        width: 3rem;
        height: 3rem;
        transition: transform 0.2s ease;
        user-drag: none;
        -webkit-user-drag: none; /* For Safari */
        user-select: none;
        -webkit-user-select: none; /* For Safari */
        -moz-user-select: none; /* For Firefox */
        -ms-user-select: none; /* For IE/Edge */
    }
    
    #cs-navigation .cs-toggle .menu-icon:hover {
        content: url('../icons/ico_menu_hover.svg'); /* Change image on hover */
        transform: scale(1.1);
    }
    
    #cs-navigation .cs-toggle .close-icon {
        display: none;
    }
    
    #cs-navigation.cs-active .cs-toggle .menu-icon {
        display: none; /* Hide the menu icon when the menu is open */
    }
    
    #cs-navigation.cs-active .cs-toggle .close-icon {
        display: block; /* Show the close icon when the menu is open */
    }
    
    #cs-navigation .cs-toggle .close-icon:hover {
        content: url('../icons/ico_menu_close_hover.svg'); /* Change to close hover icon */
        transform: scale(1.1);
    }
    
    /* ------------------------------
           MOBILE: NAV PAGE LINKS
       ------------------------------ */
    
    body.cs-open {
        overflow: hidden; /* Prevents page scrolling when menu is open */
    }
    
    #cs-navigation.cs-active:before {
        width: 100%;
        opacity: 1;
    }
    
    #cs-navigation.cs-active .cs-ul-wrapper {
        opacity: 1;
        transform: scaleX(1);
        transition: 0.2s ease; /* Apply easing */
    }
    
    #cs-navigation.cs-active .cs-li {
        opacity: 1;
        transform: translateX(0);
    }
    
    #cs-navigation .cs-ul-wrapper {
        width: 100%;
        height: 100vh; /* Full height for mobile */
        background-color: #000;
        opacity: 0;
        position: absolute;
        top: 100%;
        right: 0;
        z-index: -1;
        overflow: auto;
        pointer-events: none; /* Disable clicks when hidden */
        background-image: url('../icons/ico_logo_bg_menu.svg');
        background-repeat: no-repeat;
        background-size: 60rem; /* Make watermark larger */
        background-position: center;
    }
    
    #cs-navigation.cs-active .cs-ul-wrapper {
        opacity: 1;
        z-index: 100;
        pointer-events: auto; /* Enable clicks when open */
        transition: transform 0s; /* Not ideal but works to prevent flashing when nav is open while resizing window */
    }
    
    #cs-navigation .cs-ul {
        height: 86vh; /* Not ideal but works to allow vertical scroll */
        margin: 0;
        padding: 3rem 1rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 3rem;
        overflow-x: hidden; /* Prevents horizontal scroll on page zoom */
    }
    
    #cs-navigation .cs-li {
        text-align: center;
        list-style: none;
        margin-right: 0;
        opacity: 0;
        transform: translateX(-2.5rem);
        transition: transform 0.6s, opacity 1s;
    }
    
    /* Delay animations for each menu item */
    #cs-navigation .cs-li:nth-of-type(1) { transition-delay: 0.05s; }
    #cs-navigation .cs-li:nth-of-type(2) { transition-delay: 0.1s; }
    #cs-navigation .cs-li:nth-of-type(3) { transition-delay: 0.15s; }
    #cs-navigation .cs-li:nth-of-type(4) { transition-delay: 0.2s; }
    #cs-navigation .cs-li:nth-of-type(5) { transition-delay: 0.25s; }
    #cs-navigation .cs-li:nth-of-type(6) { transition-delay: 0.3s; }
    #cs-navigation .cs-li:nth-of-type(7) { transition-delay: 0.35s; }
    #cs-navigation .cs-li:nth-of-type(8) { transition-delay: 0.4s; }
    #cs-navigation .cs-li:nth-of-type(9) { transition-delay: 0.45s; }
    
    #cs-navigation .cs-li-link {
        font-family: 'Raleway-Black', sans-serif;
        font-weight: 900;
        font-size: 2.5rem;
        line-height: 1.2em;
        background: linear-gradient(45deg, #FF7BAC, #FCEE21); /* 45-degree gradient */
        -webkit-background-clip: text; /* Ensures gradient is applied to text only */
        color: transparent; /* Text color becomes transparent to show gradient */
        text-decoration: none;
        margin: 0;
        display: inline-block;
        position: relative;
        animation: animateMobileIcons 0.5s ease;
    }
    
    #cs-navigation .cs-li-link:hover {
        color: #FF7BAC;
        transform: scale(1.1);
    }
    
    /* Prevent scaling on the active link */
    #cs-navigation .cs-li-link.cs-active:hover {
        color: transparent;
        transform: none; /* Prevents scaling effect */
        cursor: default;
    }
    
    #cs-navigation .cs-li-link.cs-active:before {
        width: 100%;
        background: linear-gradient(45deg, #FF7BAC, #FCEE21); /* Gradient for active underline */
        transform: scaleX(1); /* Ensure it's fully expanded */
        transform-origin: left; /* Keep consistency */
    }
    
    #cs-navigation .cs-li-link:before {
        /* Default state underline */
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 6px;
        border-radius: 6px; /* Rounded edges for the line */
        background: #FF7BAC; /* Underline color */
        transform: scaleX(0); /* Initially hidden */
        transform-origin: right; /* Contract from right */
        transition: transform 0.3s ease;
        will-change: transform, opacity;
    }

    #cs-navigation .cs-li-link:hover:before {
        transform: scaleX(1); /* Expands left to right */
        transform-origin: left;
    }

    
    /* ------------------------------
    MOBILE: NAV SLIDER: FOOTER PAGE LINK
       ------------------------------ */

    .cs-footer-legal-slider {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        color: #FF7BAC; /* Text color */
        font-family: 'Raleway-Regular', sans-serif; /* Match the font used for nav links */
        font-weight: 400;
        font-size: 1rem;
        gap: 1rem;
        transition: transform 0.2s ease;
        animation: animateMobileIcons 0.5s ease;
    }

    /* "Built by" text */
    .slider-built-by {
        color: #FFF;
        font-size: 0.75rem;
        text-align: center;
        margin-top: -0.5rem; /* Adds spacing */
    }

    /* Prevent underline from being applied */
    .cs-footer-legal-slider:before {
        content: none; /* Remove the underline effect */
    }

    /* Hover effect */
    .cs-footer-legal-slider:hover {
        transform: scale(1.1); /* Slightly scale up the button on hover */
    }

    /* Logo image styling */
    .cs-footer-legal-slider img {
        width: auto;
        height: 4rem; /* Adjust the height of the logo */
        user-drag: none;
        -webkit-user-drag: none; /* For Safari */
        user-select: none;
        -webkit-user-select: none; /* For Safari */
        -moz-user-select: none; /* For Firefox */
        -ms-user-select: none; /* For IE/Edge */
    }

    /* Hover effect for logo image */
    .cs-footer-legal-slider:hover img {
        content: url('../icons/ico_logo_mark_hover.svg'); /* Change the image on hover */
    }
    
    /* ------------------------------
        MOBILE SCROLL ANCHOR: TERMS
       ------------------------------ */

    .legal-page #terms {
        margin-top: -4rem;
    }
    
    /* ------------------------------
        MOBILE SCROLL ANCHOR: PRIVACY
       ------------------------------ */

    .legal-page #privacy {
        margin-top: -4rem;
    }
    
    /* ------------------------------
           MOBILE: HEADING & TEXT
       ------------------------------ */

    .explore-page .cs-heading {
        font-size: clamp(8rem, 42vw, 35rem); /* Responsive font size */
        animation: animateMobileHeading 0.5s ease-out;
    }
    
    .explore-page .cs-text:first-of-type {
        animation: animateMobileText 0.6s ease;
    }
        
    .discover-page .cs-heading {
        font-size: clamp(7rem, 35vw, 30rem); /* Responsive font size */
        animation: animateMobileHeading 0.5s ease-out;
    }
    
    .discover-page .cs-text:first-of-type {
        animation: animateMobileText 0.6s ease;
    }
    
    .services-page .cs-heading {
        font-size: clamp(8rem, 38vw, 30rem); /* Responsive font size */
        animation: animateMobileHeading 0.5s ease-out;
    }
    
    .services-page .cs-text:first-of-type {
        animation: animateMobileText 0.6s ease;
    }
    
    .contact-page .cs-heading {
        font-size: clamp(8rem, 38vw, 30rem); /* Responsive font size */
        animation: animateMobileHeading 0.5s ease-out;
    }
    
    .legal-page .cs-heading {
        font-size: clamp(8rem, 38vw, 30rem); /* Responsive font size */
        animation: animateMobileHeading 0.5s ease-out;
    }
    
    .legal-page .legal-nav:first-of-type {
        animation: animateMobileText 0.6s ease;
    }
    
    .legal-page .contact-text {
        margin-bottom: 2rem;
    }
    
    .legal-page .cs-text-line::after {
        height: 3px;
        bottom: -0.3rem;
    }
        

    /* ------------------------------
          MOBILE: PROJECT IMAGES
       ------------------------------ */
    
    .projects img {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
    }
    
    /* ------------------------------
          MOBILE: CONTACT PHOTO
       ------------------------------ */
    
    /*.contact-images img:nth-child(2) {
        animation: animateMobileContactPhoto 0.6s ease;
    }*/
    
    .contact-images img {
        animation: animateMobileContactPhoto 0.6s ease;
    }
    
/* ------------------------------
      MOBILE: MEDIA QUERY END
   ------------------------------ */
}