/* ═══════════════════════════════════════════════════════════════
   menu.css — Butcher's Burger & Steak House
   Σελίδα-specific styles — HTML & CSS από τον πελάτη
   DynaWasp © 2026
═══════════════════════════════════════════════════════════════ */

.page-menu__content {
    background:var(--color-primary);
    color:var(--color-white);
}

.menu-hero{
    position:relative;
    min-height:100vh;
    padding:clamp(110px,9vw,190px) 0 0;
    overflow:hidden;
    background:var(--color-primary);
}

.menu-drawing{
    width: 50%;
	margin: 0 auto;
}

.menu-hero h1{
    margin:30px auto clamp(58px,7vw,90px);
    padding:0 var(--container-pad);
    max-width:1200px;
    text-align:center;
    font-family:var(--font-display);
    font-size:clamp(52px,6vw,100px);
    line-height:88%;
    font-weight:400;
    color:var(--color-white);
}

.menu-city-select{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
    background:var(--color-white);
}

.menu-city{
    position:relative;
    min-height:clamp(190px,20vw,330px);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:var(--color-white);
    color:var(--color-black);
    text-decoration:none;
}

.menu-city > span{
    position:relative;
    z-index:2;
    font-family:var(--font-mono);
    font-size:clamp(58px,7vw,118px);
    line-height:1;
    font-weight:400;
    color:var(--color-black);
    transition:opacity 200ms ease;
}

.menu-city-hover{
    position:absolute;
    inset:0;
    display:grid;
    grid-template-columns:1fr 46%;
    gap: clamp(20px,2vw,40px);
    padding: clamp(22px,2vw,30px);
    background:var(--color-primary);
    opacity:0;
    visibility:hidden;
    transition:opacity 250ms ease, visibility 250ms ease;
    z-index:3;
}

.menu-city-hover p{
    margin:0;
    font-family:var(--font-mono);
    font-size:clamp(22px,2vw,46px);
    line-height:1.05;
    font-weight:400;
    color:var(--color-white);
    text-align:left;
	align-self:end;
    justify-self:start;
}

.menu-city-hover img{
    grid-column:2;
    grid-row:1;
    align-self:start;
    justify-self:end;
    width:100%;
    max-width:200px;
    height:auto;
    object-fit:contain;
}

.menu-city:hover > span{
    opacity:0;
}

.menu-city:hover .menu-city-hover{
    opacity:1;
    visibility:visible;
}

.menu-bottom{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:clamp(40px,8vw,120px);
    padding:clamp(60px,7vw,100px) var(--container-pad);
    max-width:var(--container-max);
    margin:0 auto;
}

.menu-bottom p{
    margin:0;
    font-family:var(--font-mono);
    font-size:clamp(30px,4vw,58px);
    line-height:.95;
    font-weight:400;
    color:var(--color-white);
    text-align:left;
}

.menu-buttons{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:clamp(28px,4vw,30px);
}

.menu-buttons a {
    display:inline-flex;
    padding:6px 10px;
    background:var(--color-white);
    color:var(--color-black);
    font-family:var(--font-display);
    font-size:clamp(42px,5vw,82px);
    line-height:.9;
    font-weight:400;
    text-decoration:none;
}

.menu-buttons a:hover {
	background:var(--color-black);
    color:var(--color-white);
}

@media(max-width:768px){
    .menu-burger{
        left:14%;
    }

    .menu-cleaver{
        right:12%;
    }

    .menu-city-select,
    .menu-bottom{
        grid-template-columns:1fr;
    }

    .menu-city{
        min-height:180px;
    }

    .menu-city-hover{
        grid-template-columns:1fr;
    }

    .menu-city-hover img{
        display:none;
    }

    .menu-bottom{
        text-align:center;
    }

    .menu-bottom p{
        text-align:center;
    }
}