/* Menu Overlay Styles - New Version */

/* Container for menu toggle button */
.menu-overlay-container {
    position: relative;
}

/* Toggle Button Styles */
.menu-toggle {
    position: relative;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}

/* Ensure toggle is above overlay */
.menu-toggle.active {
    z-index: 1100;
    position: relative;
}

.hamburger-icon {
    position: relative;
    width: 28px;
    height: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* X animation for the toggle button */
.menu-toggle.active .bar-1 {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle.active .bar-2 {
    opacity: 0;
}

.menu-toggle.active .bar-3 {
    transform: translateY(-8px) rotate(-45deg);
}

/* Overlay Styles */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(29, 29, 29, 0.98);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1009;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

/* Semi-transparent overlay for background image */
.menu-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(29, 29, 29, 0.9);
    z-index: -1;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Updated grid layout for the new structure */
.menu-overlay-inner {
    width: 85%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
}

@media (min-width: 768px) {
    .menu-overlay-inner {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "logo logo"
            "left contact";
        align-items: start;
        gap: 30px;
    }
}

/* Logo Styles - Now in its own row */
.menu-overlay-logo {
    grid-area: logo;
    text-align: left;
    margin-bottom: 30px;
}

.menu-overlay-logo img {
    max-width: 260px;
    width: 100%;
    height: auto;
}

/* Left Column Styles (Now just Navigation) */
.menu-overlay-left {
    grid-area: left;
    display: flex;
    flex-direction: column;
}

/* Navigation Styles */
.menu-overlay-navigation {
    margin-top: 0;
}

.menu-overlay-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-overlay-menu li {
    margin-bottom: 25px;
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
    transition-delay: calc(0.1s * var(--item-index, 0));
}

.menu-overlay.active .menu-overlay-menu li {
    transform: translateY(0);
    opacity: 1;
}

.menu-overlay-menu a {
    color: #fff;
    font-size: 34px;
    font-family: "Interstate", "Manrope", sans-serif;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    display: inline-block;
    position: relative;
}

.menu-overlay-menu a:hover {
    color: #ccc;
}

.menu-overlay-menu a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: #fff;
    transition: width 0.3s ease;
}

.menu-overlay-menu a:hover::after {
    width: 100%;
}

/* Right Column - Contact section */
.menu-overlay-contact {
    grid-area: contact;
}

/* Contact item styles */
.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 40px;
}

.contact-icon {
    font-size: 28px;
    margin-right: 15px;
    display: inline-block;
}

.contact-info h4 {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.7);
}

.contact-info a {
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    transition: color 0.3s ease;
}

.contact-info a:hover {
    color: #ccc;
}

/* Social Links Styles */
.social-links {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}

.social-icon {
    display: inline-block;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid #fff;
    position: relative;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.social-icon:hover {
    transform: scale(1.1);
    background-color: rgba(255, 255, 255, 0.1);
}

.social-icon.linkedin::before,
.social-icon.twitter::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.social-icon.linkedin::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z'/%3E%3C/svg%3E");
}

.social-icon.twitter::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z'/%3E%3C/svg%3E");
}

/* Animation effects */
.menu-overlay {
    transform: translateY(-10px);
    transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.5s ease;
}

.menu-overlay.active {
    transform: translateY(0);
}

.menu-overlay-logo {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: 0.1s;
}

.menu-overlay.active .menu-overlay-logo {
    opacity: 1;
    transform: translateY(0);
}

/* Menu item animations */
.menu-overlay-menu li {
    transform: translateX(-30px);
    transition: transform 0.5s cubic-bezier(0.17, 0.67, 0.83, 0.67), opacity 0.5s ease;
    transition-delay: calc(0.1s * var(--item-index, 0));
}

/* Body class for when menu is open */
body.menu-open {
    overflow: hidden;
}

/* Placeholder in editor */
.menu-overlay-placeholder {
    padding: 20px;
    background: #f0f0f0;
    border: 2px dashed #ccc;
    text-align: center;
    font-weight: bold;
}

/* Mobile Styles */
@media (max-width: 767px) {
    .menu-overlay-inner {
        width: 100%;
        padding: 60px 20px 30px;
        grid-template-columns: 1fr;
        grid-template-areas: 
            "logo"
            "left"
            "contact";
        text-align: center;
    }
    
    .menu-overlay-logo {
        margin-bottom: 30px;
        text-align: center;
    }
    
    .menu-overlay-logo img {
        max-width: 250px;
    }
    
    .menu-overlay-navigation {
        margin-bottom: 40px;
    }
    
    .menu-overlay-menu {
        text-align: center;
    }
    
    .menu-overlay-menu a {
        font-size: 24px;
    }
    
    .menu-overlay-menu li {
        margin-bottom: 18px;
    }
    
    .menu-overlay-contact {
        padding-top: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .contact-item {
        margin-bottom: 20px;
        justify-content: center;
    }
    
    .contact-info {
        text-align: left;
    }
    
    .social-links {
        margin-top: 30px;
        justify-content: center;
    }
}

/* Extra small devices */
@media (max-width: 479px) {
    .menu-overlay-logo img {
        max-width: 200px;
    }
    
    .menu-overlay-menu a {
        font-size: 22px;
    }
    
    .contact-icon {
        font-size: 20px;
    }
    
    .menu-overlay-inner {
        padding-top: 70px;
    }
}

/* Animation delay for menu items */
.menu-overlay-menu li:nth-child(1) { --item-index: 1; }
.menu-overlay-menu li:nth-child(2) { --item-index: 2; }
.menu-overlay-menu li:nth-child(3) { --item-index: 3; }
.menu-overlay-menu li:nth-child(4) { --item-index: 4; }
.menu-overlay-menu li:nth-child(5) { --item-index: 5; }
.menu-overlay-menu li:nth-child(6) { --item-index: 6; }
.menu-overlay-menu li:nth-child(7) { --item-index: 7; }
.menu-overlay-menu li:nth-child(8) { --item-index: 8; }


/* Menu Item with SVG Slash Animation and Text Color Wipe */

.menu-overlay-menu a {
    color: #fff;
    font-size: 34px;
    font-family: "Interstate", "Manrope", sans-serif;
    text-decoration: none;
    font-weight: 500;
    transition: transform 0.3s ease;
    display: inline-block;
    position: relative;
    padding-left: 30px; /* Make room for the slash */
    transform: translateX(0); /* Starting position */
}

.menu-overlay-menu a:hover {
    transform: translateX(10px); /* Move right on hover */
}

/* Remove the existing underline animation */
.menu-overlay-menu a::after {
    display: none;
}

/* Add the SVG slash */
.menu-overlay-menu a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 42px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20.89" height="42.401" viewBox="0 0 20.89 42.401"><path fill="%235b96c3" d="M58.554,42.675l4.021.268a1.026,1.026,0,0,0,1.033-.63L79.4,1.512a.7.7,0,0,0-.683-.928L75.647.544Z" transform="translate(-58.554 -0.544)"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.menu-overlay-menu a:hover::before {
    opacity: 1;
}

/* Text color animation */
.menu-overlay-menu a span {
    display: inline-block;
    color: #fff;
    transition: color 0.05s linear; /* Very fast transition for each letter */
}

/* The color we want to transition to (same as SVG color) */
.menu-overlay-menu a:hover span {
    color: #5b96c3;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .menu-overlay-menu a {
        font-size: 24px;
        padding-left: 25px; /* Slightly smaller padding for mobile */
    }
    
    .menu-overlay-menu a::before {
        width: 15px;
        height: 32px;
    }
}

@media (max-width: 479px) {
    .menu-overlay-menu a {
        font-size: 22px;
        padding-left: 22px;
    }
    
    .menu-overlay-menu a::before {
        width: 12px;
        height: 28px;
    }
}