/* HK Gothic SemiBold font from local fonts folder */
@font-face {
    font-family: 'HK Gothic';
    src: url('fonts/hk-gothic/HK Gothic SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

/* Menu Overlay Styles */
.menu-overlay {
    position: fixed;
    top: 0;
    right: -100%;
    width: clamp(250px, 19.27vw, 370px);
    max-width: 100%;
    height: 100vh;
    background: #FFFFFF;
    z-index: 999999;
    transition: right 0.3s ease-in-out, visibility 0s 0.3s, opacity 0.3s ease-in-out;
    box-shadow: -10px 0px 36px rgba(31, 30, 27, 0.1);
    display: flex;
    flex-direction: column;
    padding: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    overflow-y: auto;
}

.menu-overlay.active {
    right: 0;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: right 0.3s ease-in-out, visibility 0s, opacity 0.3s ease-in-out;
}

.menu-close {
    position: absolute;
    top: clamp(25px, 2.6vw, 50px);
    right: clamp(25px, 2.6vw, 50px);
    background: #FFFFFF;
    border: clamp(1px, 0.1vw, 2px) solid #000000;
    font-size: clamp(18px, 1.25vw, 24px);
    font-weight: bold;
    cursor: pointer;
    color: #000000;
    padding: 0;
    width: clamp(30px, 2.08vw, 40px);
    height: clamp(30px, 2.08vw, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000000;
    opacity: 0;
    visibility: hidden;
    line-height: 1;
    font-family: 'HK Gothic', sans-serif;
    text-align: center;
    pointer-events: none;
}

.menu-overlay.active .menu-close {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.menu-nav {
    position: absolute;
    left: clamp(20px, 2.08vw, 40px);
    top: clamp(73px, 7.6vw, 146px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(2px, 0.26vw, 5px);
    width: clamp(200px, 14.06vw, 270px);
    max-width: calc(100% - clamp(40px, 4.17vw, 80px));
    max-height: calc(100vh - clamp(200px, 20vw, 250px));
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.menu-overlay.active .menu-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.menu-nav a {
    font-family: 'HK Gothic', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: clamp(20px, 1.56vw, 30px);
    line-height: 100%;
    display: flex;
    align-items: center;
    letter-spacing: clamp(-0.5px, -0.05vw, -1px);
    color: #141411;
    text-decoration: none;
    transition: color 0.3s ease;
    height: clamp(50px, 3.75vw, 72px);
}

.menu-nav a:hover {
    color: #00223B;
}

.menu-buttons {
    position: absolute;
    left: clamp(15px, 1.56vw, 30px);
    bottom: clamp(15px, 1.56vw, 30px);
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.25vw, 24px);
    width: clamp(200px, 16.15vw, 310px);
    max-width: calc(100% - clamp(30px, 3.13vw, 60px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    flex-shrink: 0;
}

.menu-overlay.active .menu-buttons {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.menu-btn {
    width: 100%;
    height: clamp(50px, 3.49vw, 67px);
    font-family: 'HK Gothic', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: clamp(14px, 0.94vw, 18px);
    line-height: 100%;
    letter-spacing: clamp(-0.5px, -0.05vw, -1px);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-btn.login {
    background: transparent;
    border: 1px solid #000000;
    color: #000000;
    box-sizing: border-box;
}

.menu-btn.login:hover {
    background: #f5f5f5;
}

.menu-btn.subscribe {
    background: #212844;
    border: none;
    color: #FFFFFF;
}

.menu-btn.subscribe:hover {
    background: #2d3557;
}