/* =====================================================
   HEADER.CSS
   Food Delivery Local
   Header / Navigation Styling Only
===================================================== */


/* =====================================================
   MAIN SITE HEADER BAR
===================================================== */

.site-header{
background:#2e7d32;
padding:12px 0;
}


/* =====================================================
   HEADER CONTAINER
   Controls width and centering of navigation
===================================================== */

.header-container{
max-width:1100px;
margin:auto;
display:flex;
justify-content:center;
align-items:center;
padding:0 15px;
box-sizing:border-box;
}


/* =====================================================
   MAIN NAVIGATION LAYOUT
===================================================== */

.main-nav{
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
}


/* =====================================================
   MAIN NAVIGATION LINKS
===================================================== */

.main-nav a{
color:white;
text-decoration:none;
font-weight:bold;
font-size:15px;
margin:6px 16px;
white-space:nowrap;
}

.main-nav a:hover{
text-decoration:underline;
}


/* =====================================================
   FORCE HEADER NAV COLORS
   Ensures nav links remain white
===================================================== */

.site-header a{
color:white;
text-decoration:none;
font-weight:bold;
}

.site-header a:visited{
color:white;
}

.site-header a:hover{
text-decoration:underline;
}


/* =====================================================
   FINAL NAV FIX
   Prevents spacing conflicts with other CSS rules
===================================================== */

.site-header .header-container{
display:flex;
justify-content:center;
align-items:center;
}

.site-header .main-nav{
display:flex;
justify-content:center;
align-items:center;
}

.site-header .main-nav a{
margin:0 20px !important;
color:white;
text-decoration:none;
font-weight:bold;
font-size:15px;
}


/* =====================================================
   CITY PAGE HEADER (SECONDARY HEADER)
===================================================== */

.fdl-city-header{
background:#ffffff;
border-bottom:1px solid #e5e5e5;
}

.fdl-header-inner{
max-width:1100px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 20px;
}


/* =====================================================
   CITY HEADER LOGO
===================================================== */

.fdl-logo{
height:48px;
}


/* =====================================================
   CITY PAGE NAVIGATION LINKS
===================================================== */

.fdl-city-nav a{
margin-left:24px;
text-decoration:none;
font-weight:600;
color:#333;
}

.fdl-city-nav a:hover{
color:#0b7dda;
}


/* =====================================================
   HEADER COLOR OVERRIDE FIX
   Prevents other CSS from changing header colors
===================================================== */

.site-header{
background:#2e7d32 !important;
}

.site-header a,
.site-header a:visited{
color:#ffffff !important;
}

.fdl-city-header{
background:#2e7d32 !important;
border-bottom:none !important;
}

.fdl-city-nav a{
color:#ffffff !important;
}

.fdl-city-nav a:hover{
color:#e8f5e9 !important;
}


/* =====================================================
   MOBILE NAVIGATION
===================================================== */

@media screen and (max-width:768px){

.main-nav{
flex-direction:column;
gap:10px;
}

.main-nav a{
display:block;
width:100%;
text-align:center;
margin:4px 0;
}

.fdl-header-inner{
flex-direction:column;
gap:12px;
}

.fdl-city-nav{
display:flex;
flex-direction:column;
gap:10px;
align-items:center;
}

}