/* 
 * Site
 * Filename: footer.php
 *********************/
/* Main menu styling, fixed at the bottom */
footer {
    margin-top: 150px;
}

footer .menu-main-container {
    position: fixed; /* Fixed relative to the viewport */
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999; /* Higher z-index to ensure visibility above all content */
    display: flex;
    pointer-events: none; /* Let clicks pass through the container */
    /* Ensure footer is visible on mobile devices */
    min-height: 80px;
    padding-bottom: env(safe-area-inset-bottom); /* Account for mobile browser UI */
}

/* Allow horizontal scrolling when needed, but hide scrollbars */
footer #menu-main {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    justify-content: left;
    align-items: flex-end;
    overflow-x: auto; /* Allow horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile */
    /* Hide scrollbars in Firefox and IE */
    scrollbar-width: none; 
    -ms-overflow-style: none;
}

/* Hide scrollbars in WebKit browsers */
footer #menu-main::-webkit-scrollbar {
    display: none;
}

footer #main-menu::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px; /* Height of the mountain silhouette */
    background: 
        linear-gradient(to bottom left, transparent 50%, rgba(0, 0, 0, 0.5) 50%) 0% 100%,
        linear-gradient(to bottom right, transparent 50%, rgba(0, 0, 0, 0.5) 50%) 100% 100%,
        linear-gradient(to top right, transparent 50%, rgba(0, 0, 0, 0.5) 50%) 100% 0%,
        linear-gradient(to top left, transparent 50%, rgba(0, 0, 0, 0.5) 50%) 0% 0%;
    background-size: 25% 50%;
    background-repeat: repeat-x;
    z-index: 2000;
    pointer-events: none;
}

/* Menu links as circles, but clickable */
footer #menu-main li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    margin: 3px;
    border-radius: 50%;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    flex-direction: column;
    pointer-events: auto; /* Restore clickability on the links */
}

footer .menu-item a i {
    margin-bottom: -1px;
}

/* Icon and title transitions */
footer #menu-main li a i,
footer #menu-main li a .menu-item-title {
    transition: transform 0.3s ease;
}

footer #menu-main li a:hover i {
    transform: translateY(-3px);
}

footer #menu-main li a:hover .menu-item-title {
    opacity: 1;
    transform: translateY(-3px);
}

/* Special styling for the Home circle */
footer #menu-item-home a {
    width: 70px !important;
    height: 70px !important;
    line-height: 70px !important;
}

/* Submenu styling */
footer .sub-menu {
    display: none; /* Hide submenu by default */
    flex-direction: column;
    position: absolute;
    bottom: 70px; /* Position above the main item */
    left: 0;
    transform: translateX(-50%);
    list-style-type: none;
    padding: 0;
    margin: 0;
    z-index: 1001;
    pointer-events: auto;
}

footer .sub-menu li a {
    margin-bottom: 3px;
    pointer-events: auto;
}

footer .sub-menu li:last-child a {
    margin-bottom: 0;
}

footer .sub-menu {
    width: auto;
    left: 50%;
    transform: translateY(-100%) translateX(-50%);
}

footer .sub-menu.open {
    display: flex;
}

/* Mountain styling with a more natural look */
.mountain {
    width: 100%;
    height: 300px;
    background: linear-gradient(to top, #546E7A 0%, #78909C 100%);
    clip-path: polygon(
        0% 100%,   /* Start bottom-left */
        10% 80%,   /* Slope up */
        20% 60%,   /* Peak */
        30% 65%,   /* Small dip */
        35% 50%,   /* Higher peak */
        45% 55%,   /* Dip */
        50% 40%,   /* Another peak */
        60% 70%,   /* Valley slope */
        70% 45%,   /* Peak */
        80% 65%,   /* Dip */
        90% 50%,   /* Peak */
        100% 100%  /* End bottom-right */
    );
}

footer #menu-main .menu-item {
    /* Will be reset here: assets/js/hover-to-click-footer1.js*/
    display: none;
}