/* Global styles for One Meal - One Night */
:root{
  --border:6px;
  --shadow-offset:8px;
  --accent: #FFD700; /* header */
  --body-bg: #FF6F61; /* body background */
  --button-bg: #fff;
  --link-padding: 10px 14px;
  --text-color: #000;
}
*{box-sizing:border-box}
html,body{height:100%;}
body{
  font-family: Arial, sans-serif;
  background: var(--body-bg);
  margin:0;
  padding:0;
  color: var(--text-color);
}
header{
  background: var(--accent);
  padding: 28px 20px 28px 20px;
  border-bottom: 4px solid #000;
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 #000;
  position: relative;
  overflow: visible;
}
h1{ margin:0; font-size:2.5rem; font-weight:900; text-transform:uppercase }

/* Burger Button */
#burger{
  background: var(--button-bg);
  border: var(--border)px solid #000;
  padding: 12px 16px;
  font-weight:900;
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 #000;
  cursor:pointer;
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 1200;
  font-size: 1.18rem;
  transition: transform 160ms ease, box-shadow 160ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height:1;
}
#burger:hover{ transform: translateY(-3px); box-shadow: calc(var(--shadow-offset)+2px) calc(var(--shadow-offset)+2px) 0 #000 }
#burger .icon{ display:inline-block; transition: transform 240ms cubic-bezier(.2,.9,.2,1) }
#burger.open .icon{ transform: rotate(90deg) scale(1.05) }

/* Nav accordion */
nav#nav-menu{
  position: relative;
  width: auto;
  padding: 0 0 0 0;
  background: none;
  border: none;
  box-shadow: none;
  display: block;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 380ms cubic-bezier(.2,.9,.2,1), opacity 260ms ease;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
nav#nav-menu a{
  text-decoration: none;
  color: var(--text-color);
  border: 4px solid #000;
  padding: var(--link-padding);
  background: #fff;
  box-shadow: 6px 6px 0 #000;
  font-weight: bold;
  display: block;
  text-align: left;
  opacity: 0;
  transform: translateY(-6px) scale(.995);
  transition: opacity 280ms ease, transform 300ms cubic-bezier(.2,.9,.2,1);
}
nav#nav-menu.active{ opacity:1 }

section{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:30px;
  border-bottom:4px solid #000;
}
.card{ background:#fff; padding:20px; border:4px solid #000; box-shadow:6px 6px 0 #000; margin-bottom:20px; max-width:900px }

/* typography */
p, li, button{ font-size:1.05rem; line-height:1.6 }
h2{ font-size:1.6rem; margin-bottom:15px }

/* responsive tweaks */
@media (max-width:768px){
  h1{ font-size:1.8rem }
  header{ padding:18px 14px 18px 14px }
  #burger{ right:12px; top:12px; padding:10px 12px }
  nav#nav-menu{ margin-top:12px }
  nav#nav-menu a{ padding:10px 12px }
}
@media (max-width:480px){
  h1{ font-size:1.5rem }
  #burger{ padding:10px 12px; font-size:1rem }
}

/* helper: visually hidden */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0 }