/* ===================================================================
   ASGARD MOBILE MENU
   =================================================================== */

/* Hamburger */
.asg-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #243A5F;
    cursor: pointer;
    position: relative;
    z-index: 51;
    transition: transform 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.asg-burger:hover { transform: scale(1.05); }
.asg-burger:active { transform: scale(0.95); }

.asg-burger__lines { display: flex; flex-direction: column; align-items: center; gap: 5px; pointer-events: none; }
.asg-burger__line { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s; transform-origin: center; }
.asg-burger.is-active .asg-burger__line:nth-child(1) { transform: translateY(calc(2px + 5px)) rotate(45deg); }
.asg-burger.is-active .asg-burger__line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.asg-burger.is-active .asg-burger__line:nth-child(3) { transform: translateY(calc(-2px - 5px)) rotate(-45deg); }

/* Drawer shell */
.asg-drawer { position: fixed; inset: 0; z-index: 99999; visibility: hidden; pointer-events: none; }
.asg-drawer.is-open { visibility: visible; pointer-events: auto; }
.asg-drawer__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background 0.3s; cursor: pointer; }
.asg-drawer.is-open .asg-drawer__overlay { background: rgba(0,0,0,0.4); }

.asg-drawer__panel {
    position: absolute;
    background: #141416;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Animations */
.asg-drawer--slide-down .asg-drawer__panel { inset: 0; transform: translateY(-100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }
.asg-drawer--slide-down.is-open .asg-drawer__panel { transform: translateY(0); }
.asg-drawer--slide-right .asg-drawer__panel { top: 0; right: 0; bottom: 0; width: min(420px, 85vw); transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }
.asg-drawer--slide-right.is-open .asg-drawer__panel { transform: translateX(0); }
.asg-drawer--fade .asg-drawer__panel { inset: 0; opacity: 0; transform: scale(0.97); transition: opacity 0.3s, transform 0.3s; }
.asg-drawer--fade.is-open .asg-drawer__panel { opacity: 1; transform: scale(1); }

/* Top bar */
.asg-drawer__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    flex: none;
}
.asg-drawer__top-right {
    display: flex;
    align-items: center;
    gap: 14px;
}
.asg-drawer__menu-label {
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 14px;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.55);
}
.asg-drawer__close {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #243A5F;
    color: #fff;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.asg-drawer__close:hover { transform: scale(1.05); }

/* Nav links */
.asg-drawer__nav { padding: 0 24px; display: flex; flex-direction: column; }
.asg-drawer__view { animation: asg-view-in 0.25s ease; }
@keyframes asg-view-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

.asg-drawer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0;
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 32px;
    font-weight: 400;
    letter-spacing: -0.025em;
    color: #fff;
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    text-align: left;
}
.asg-drawer__link:last-child { border-bottom: none; }
.asg-drawer__link:hover { color: #D0E3F2; opacity: 1; }

.asg-drawer__link-arrow {
    opacity: 0.3;
    transition: opacity 0.2s, transform 0.2s;
    flex: none;
}
.asg-drawer__link:hover .asg-drawer__link-arrow { opacity: 0.7; transform: translateX(4px); }

/* Sub-menu */
.asg-drawer__sub { padding: 0 24px; display: flex; flex-direction: column; }
.asg-drawer__back {
    display: flex; align-items: center; gap: 10px; padding: 14px 0 24px;
    font-family: 'Manrope', system-ui, sans-serif; font-size: 14px;
    color: rgba(255,255,255,0.55); background: none; border: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: color 0.15s;
}
.asg-drawer__back:hover { color: #fff; }
.asg-drawer__sub-title {
    font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255,255,255,0.35); padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.asg-drawer__sub .asg-drawer__link { font-size: 26px; }

/* Quick links tiles */
.asg-drawer__quick { padding: 32px 24px 0; }
.asg-drawer__quick-label {
    font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255,255,255,0.35); margin-bottom: 16px;
}
.asg-drawer__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.asg-drawer__tile {
    display: flex; flex-direction: column; gap: 12px;
    padding: 18px 18px 20px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    color: #fff;
    text-decoration: none;
    transition: background 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.asg-drawer__tile:hover { background: rgba(255,255,255,0.1); opacity: 1; }
.asg-drawer__tile-num { font-size: 13px; color: rgba(255,255,255,0.4); }
.asg-drawer__tile-title { font-size: 16px; letter-spacing: -0.01em; }

/* CTA - wide button with arrow circle */
.asg-drawer__cta-wrap { padding: 28px 24px 20px; }
.asg-drawer__cta {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 18px 18px 18px 28px;
    background: #D0E3F2; color: #141416;
    border-radius: 999px;
    font-family: 'Manrope', system-ui, sans-serif; font-size: 17px;
    text-decoration: none;
    transition: opacity 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.asg-drawer__cta:hover { opacity: 0.88; }
.asg-drawer__cta-arrow {
    width: 44px; height: 44px; border-radius: 50%;
    background: #243A5F; color: #fff;
    display: grid; place-items: center; flex: none;
}

/* Footer */
.asg-drawer__footer {
    padding: 24px 24px 32px;
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex; justify-content: space-between; align-items: baseline;
    flex-wrap: wrap; gap: 12px;
}
.asg-drawer__socials {
    display: flex; gap: 20px;
}
.asg-drawer__socials a {
    font-size: 13px; color: rgba(255,255,255,0.55); text-decoration: none;
    transition: color 0.15s;
}
.asg-drawer__socials a:hover { color: #fff; opacity: 1; }
.asg-drawer__copyright {
    font-size: 12px; color: rgba(255,255,255,0.35);
}

/* Focus */
.asg-drawer *:focus-visible { outline: 2px solid #D0E3F2; outline-offset: 2px; }

/* Safe area */
@supports (padding-top: env(safe-area-inset-top)) {
    .asg-drawer__top { padding-top: calc(20px + env(safe-area-inset-top)); }
    .asg-drawer__footer { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
}