/* ============================================================
   The Grille at Lakeshore — Shared Stylesheet
   Site by RadSites Co | radsitesco.com
   
   Common styles for all pages: reset, variables, typography,
   navigation, mobile menu, page heroes, reveal animations,
   footer, responsive breakpoints, skip-link, focus styles,
   back-to-top button, and active nav states.
   ============================================================ */

/* --- Skip Navigation --- */
.skip-link{
position:absolute;
top:-100%;
left:1rem;
background:var(--gold);
color:var(--deep);
padding:.75rem 1.5rem;
font-size:.85rem;
font-weight:600;
letter-spacing:1px;
text-decoration:none;
z-index:9999;
border-radius:0 0 4px 4px;
transition:top .2s}

.skip-link:focus{
top:0}

/* --- Focus Styles --- */
a:focus-visible,
button:focus-visible,
.menu-tab:focus-visible,
.hamburger:focus-visible{
outline:2px solid var(--gold);
outline-offset:2px}

*,*::before,*::after{
margin:0;
padding:0;
box-sizing:border-box}

:root{
--deep:#111;
--warm:#2a2420;
--gold:#c8a45e;
--gold-light:#dbb978;
--cream:#f5f0e8;
--white:#fafaf8;
--text-light:#d4cfc7;
--text-mid:#9a9488}

html{
scroll-behavior:smooth;
overflow-x:hidden;
overscroll-behavior-x:none}

body{
font-family:'Outfit',sans-serif;
background:var(--deep);
color:var(--cream);
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
touch-action:manipulation;
position:relative}

nav{
position:fixed;
top:0;
left:0;
right:0;
z-index:1000;
padding:1.25rem 3rem;
display:flex;
justify-content:space-between;
align-items:center;
transition:all .4s;
background:transparent}

nav.scrolled{
background:rgba(17,17,17,.95);
backdrop-filter:blur(20px);
padding:.75rem 3rem;
border-bottom:1px solid rgba(200,164,94,.15)}

.nav-logo{
font-family:'Playfair Display',serif;
font-size:1.4rem;
font-weight:600;
color:var(--cream);
letter-spacing:.5px;
text-decoration:none}

.nav-logo span{
color:var(--gold);
font-style:italic;
font-weight:400}

.logo-img{
height:220px;
width:auto;
transition:height .3s}

nav.scrolled .logo-img{
height:55px}

.nav-links{
display:flex;
gap:2.5rem;
list-style:none;
align-items:center}

.nav-links a{
color:var(--text-light);
text-decoration:none;
font-size:.85rem;
font-weight:400;
letter-spacing:1.5px;
text-transform:uppercase;
transition:color .3s;
position:relative}

.nav-links a::after{
content:'';
position:absolute;
bottom:-4px;
left:0;
width:0;
height:1px;
background:var(--gold);
transition:width .3s}

.nav-links a:hover{
color:var(--gold)}

.nav-links a:hover::after{
width:100%}

.nav-links a.active{
color:var(--gold)}

.nav-links a.active::after{
width:100%}

.nav-cta{
background:var(--gold)!important;
color:var(--deep)!important;
padding:.6rem 1.5rem;
font-weight:500!important;
letter-spacing:1px!important}

.nav-cta:hover{
background:var(--gold-light)!important}

.nav-cta::after{
display:none!important}

.hamburger{
display:none;
flex-direction:column;
gap:5px;
cursor:pointer;
z-index:1001;
padding:10px;
margin:-10px;
-webkit-tap-highlight-color:transparent}

.hamburger span{
width:28px;
height:2px;
background:var(--cream);
transition:all .3s}

.mobile-close{
position:absolute;
top:0;
right:0;
width:72px;
height:72px;
display:flex;
align-items:center;
justify-content:center;
font-size:2.25rem;
color:var(--cream);
cursor:pointer;
opacity:.8;
transition:opacity .3s;
z-index:1003;
-webkit-tap-highlight-color:transparent}

.mobile-close:hover{
opacity:1}

.mobile-menu{
display:none;
position:fixed;
inset:0;
background:rgba(17,17,17,.98);
backdrop-filter:blur(30px);
z-index:1002;
flex-direction:column;
justify-content:center;
align-items:center;
gap:0}

.mobile-menu.active{
display:flex}

.mobile-menu a{
color:var(--cream);
text-decoration:none;
font-family:'Playfair Display',serif;
font-size:1.75rem;
font-weight:400;
transition:color .3s;
padding:1rem 3rem;
width:100%;
text-align:center;
-webkit-tap-highlight-color:transparent}

.mobile-menu a:hover,
.mobile-menu a:active{
color:var(--gold)}

.section-tag{
font-size:.75rem;
letter-spacing:4px;
text-transform:uppercase;
color:var(--gold);
margin-bottom:1rem;
font-weight:500}

.btn{
display:inline-block;
padding:1rem 2.25rem;
font-size:.8rem;
font-weight:500;
letter-spacing:2px;
text-transform:uppercase;
text-decoration:none;
transition:all .3s;
font-family:'Outfit',sans-serif}

.btn-primary{
background:var(--gold);
color:var(--deep)}

.btn-primary:hover{
background:var(--gold-light);
transform:translateY(-2px)}

.btn-outline{
border:1px solid rgba(200,164,94,.5);
color:var(--gold-light)}

.btn-outline:hover{
background:rgba(200,164,94,.1);
border-color:var(--gold);
transform:translateY(-2px)}

.mobile-menu a.mobile-order{
color:var(--deep);
background:var(--gold);
padding:.75rem 2rem;
border-radius:6px;
font-family:'Outfit',sans-serif;
font-size:1rem;
font-weight:500;
letter-spacing:1px;
text-transform:uppercase;
margin-top:1.5rem;
width:auto}

.mobile-menu a.mobile-order:hover,
.mobile-menu a.mobile-order:active{
background:var(--gold-light);
color:var(--deep)}

/* === Order Online / Delivery Section === */

.order-online{
padding:4rem 2rem;
text-align:center;
border-top:1px solid rgba(200,164,94,.15)}

.order-online h2{
font-family:'Playfair Display',serif;
font-size:2rem;
font-weight:400;
color:var(--cream);
margin-bottom:.75rem}

.order-online p{
color:var(--cream-dim);
max-width:480px;
margin:0 auto 2rem;
line-height:1.7}

.order-online .delivery-logo{
width:150px;
margin-bottom:2rem;
transition:transform .3s}

.order-online .delivery-logo:hover{
transform:scale(1.05)}

/* === Reveal Animations === */

.reveal{
opacity:0;
transform:translateY(30px);
transition:opacity .8s,transform .8s}

.reveal.visible{
opacity:1;
transform:translateY(0)}

.page-hero{
position:relative;
height:50vh;
min-height:400px;
display:flex;
align-items:flex-end;
overflow:hidden}

.page-hero-img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
filter:brightness(.45)}

.page-hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(to top,rgba(17,17,17,.95),rgba(17,17,17,.2))}

.page-hero-content{
position:relative;
z-index:2;
padding:0 5rem 3rem}

.page-hero-content h1{
font-family:'Playfair Display',serif;
font-size:clamp(2.5rem,4vw,3.5rem);
font-weight:700;
color:var(--white);
margin-bottom:.5rem}

.page-hero-content p{
color:var(--text-light);
font-weight:300;
font-size:1.05rem;
max-width:550px}

.kitchen-notice{
background:rgba(200,164,94,.1);
border-bottom:1px solid rgba(200,164,94,.2);
padding:.85rem 2rem;
text-align:center;
font-size:.85rem;
color:var(--gold-light);
letter-spacing:.5px}

.kitchen-notice strong{
color:var(--gold);
font-weight:600}

footer{
background:var(--warm);
padding:4rem 5rem 2rem;
border-top:1px solid rgba(200,164,94,.1)}

.footer-content{
display:flex;
justify-content:space-between;
align-items:flex-start;
max-width:1400px;
margin:0 auto;
padding-bottom:3rem;
border-bottom:1px solid rgba(200,164,94,.08)}

.footer-brand .nav-logo{
font-size:1.6rem;
margin-bottom:.75rem;
display:block}

.footer-brand p{
color:var(--text-mid);
font-weight:300;
font-size:.9rem;
line-height:1.6;
max-width:350px}

.footer-nap{
margin-top:1rem;
font-size:.8rem;
font-weight:300;
color:var(--text-mid);
line-height:1.7}

.footer-nap a{
color:var(--gold);
text-decoration:none}

.footer-links{
display:flex;
gap:4rem}

.footer-col h3{
font-size:.75rem;
letter-spacing:3px;
text-transform:uppercase;
color:var(--gold);
margin-bottom:1.25rem;
font-weight:500}

.footer-col a{
display:block;
color:var(--text-light);
text-decoration:none;
font-weight:300;
font-size:.9rem;
margin-bottom:.6rem;
transition:color .3s}

.footer-col a:hover{
color:var(--gold)}

.footer-bottom{
display:flex;
justify-content:space-between;
align-items:center;
max-width:1400px;
margin:0 auto;
padding-top:2rem}

.footer-bottom p{
color:var(--text-mid);
font-size:.8rem;
font-weight:300}

.social-links{
display:flex;
gap:1.5rem}

.social-links a{
color:var(--text-mid);
text-decoration:none;
font-size:.85rem;
letter-spacing:1px;
transition:color .3s}

.social-links a:hover{
color:var(--gold)}

/* Email Signup */
.footer-signup{
max-width:1400px;
margin:0 auto;
padding:2rem 0;
border-bottom:1px solid rgba(200,164,94,.08);
display:flex;
align-items:center;
justify-content:space-between;
gap:2rem}

.footer-signup-text h3{
font-size:.75rem;
letter-spacing:3px;
text-transform:uppercase;
color:var(--gold);
margin-bottom:.4rem;
font-weight:500}

.footer-signup-text p{
color:var(--text-mid);
font-size:.85rem;
font-weight:300}

.footer-signup-form{
display:flex;
gap:.5rem;
flex-shrink:0}

.footer-signup-form input[type="email"]{
background:rgba(255,255,255,.06);
border:1px solid rgba(200,164,94,.2);
color:var(--cream);
padding:.65rem 1rem;
font-family:'Outfit',sans-serif;
font-size:.85rem;
border-radius:4px;
width:250px;
outline:none;
transition:border-color .3s}

.footer-signup-form input[type="email"]::placeholder{
color:var(--text-mid);
opacity:.7}

.footer-signup-form input[type="email"]:focus{
border-color:var(--gold)}

.footer-signup-form button{
background:var(--gold);
color:#111;
border:none;
padding:.65rem 1.25rem;
font-family:'Outfit',sans-serif;
font-size:.8rem;
font-weight:500;
letter-spacing:1px;
text-transform:uppercase;
border-radius:4px;
cursor:pointer;
transition:background .3s}

.footer-signup-form button:hover{
background:#d4b06a}

@media(max-width:768px){
.footer-signup{flex-direction:column;text-align:center;gap:1rem}
.footer-signup-form{width:100%}
.footer-signup-form input[type="email"]{flex:1;width:auto}
}

@media(max-width:1024px){
.logo-img{height:160px}
nav.scrolled .logo-img{height:50px}
}

@media(max-width:768px){
nav { padding: 1rem 1.5rem; }
nav.scrolled { padding: .75rem 1.5rem; }
.nav-links { display: none; }
.hamburger { display: flex; }
.page-hero-content { padding: 0 1.5rem 2rem; }
footer { padding: 3rem 1.5rem 1.5rem; }
.footer-content { flex-direction: column; gap: 2.5rem; }
.footer-links { gap: 2.5rem; }
.footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
}

/* --- Shared Mobile Polish & Accessibility --- */

/* Safety: show all content if JS/observer fails */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; }
}

    
/* ===== GLOBAL MOBILE POLISH ===== */

/* Larger tap targets for all nav links in mobile menu */
@media (max-width: 768px) {
    /* Hamburger padding already in base CSS */

    /* Footer links — easier to tap */
    .footer-col a {
        padding: .4rem 0;
        display: block;
    }

    /* Buttons full-width on small screens */
    .btn {
        display: block;
        width: 100%;
        text-align: center;
    }

    /* Page hero content padding */
    .page-hero-content {
        padding: 0 1.25rem 2rem;
    }

    /* Prevent text from running edge-to-edge */
    .kitchen-notice {
        padding: .85rem 1.25rem;
        font-size: .8rem;
    }
}

@media (max-width: 480px) {
    /* Nav logo smaller on tiny screens */
    .logo-img {
        height: 144px;
    }

    /* Tighter hero on small phones */
    .page-hero {
        min-height: 340px;
    }

    .page-hero-content h1 {
        font-size: 2rem;
    }

    /* Footer brand text readable */
    .footer-brand p {
        font-size: .85rem;
    }

    /* Footer columns stack neatly */
    .footer-links {
        flex-direction: column;
        gap: 1.5rem;
    }
}

/* --- Active Nav State --- */
.mobile-menu a.active{
color:var(--gold);
font-weight:600}

/* --- Back to Top Button --- */
.back-to-top{
position:fixed;
bottom:2rem;
right:2rem;
width:44px;
height:44px;
background:rgba(200,164,94,.15);
border:1px solid rgba(200,164,94,.3);
border-radius:50%;
color:var(--gold);
font-size:1.2rem;
cursor:pointer;
opacity:0;
visibility:hidden;
transition:all .3s;
z-index:999;
display:flex;
align-items:center;
justify-content:center;
backdrop-filter:blur(10px);
-webkit-tap-highlight-color:transparent}

.back-to-top.visible{
opacity:1;
visibility:visible}

.back-to-top:hover{
background:rgba(200,164,94,.25);
border-color:var(--gold)}