/* Reset & Base */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background-color: #000000;
  color: #ffffff;
  font-family: Arial, sans-serif;
}

/* Header */
#header {
  max-width: 100%;
  min-height: 15%;
  max-height: 15%;
  display: block;
  position: relative; /* for mobile toggle positioning */
}
#header-logo {
  max-width: 30%;
  display: block;
  margin: auto;
}

/* Layout Wrapper */
#main-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-height: 70%;
}

/* Sidebar Navigation (default desktop) */
#sidebar-nav {
  flex: 0 0 200px;        /* fixed 200px on desktop */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.button-cell {
  display: block;
  width: 200px;
  height: 38px;
  margin: 5px 0;
  border-radius: 20px;
  background-color: #000000;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
}

/* Footer */
#footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  max-height: 15%;
  padding: 20px;
}
#footer-left,
#footer-right {
  flex-grow: 1;
  max-width: 50%;
  max-height: 100%;
  margin: auto;
  text-align: center;
  color: #dddddd;
}
#footer-left strong {
  color: #ffffff;
}
#footer-right a {
  color: #99ccff;
  text-decoration: none;
}

/* Mobile Hamburger (hidden by default) */
#mobile-menu-toggle {
  display: none;          /* shown only under 768px */
  font-size: 28px;
  cursor: pointer;
  padding: 10px;
  color: #ffffff;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
}

/* --- Button Images --- */
.button-cell.home      { background-image: url("../assets/home.png"); }
.button-cell.home:hover{ background-image: url("../assets/home_mo.png"); }
.button-cell.home:active,
.button-cell.home.current { background-image: url("../assets/home_act.png") !important; }

.button-cell.about     { background-image: url("../assets/aboutus.png"); }
.button-cell.about:hover{ background-image: url("../assets/aboutus_mo.png"); }
.button-cell.about:active,
.button-cell.about.current { background-image: url("../assets/aboutus_act.png") !important; }

.button-cell.rules     { background-image: url("../assets/rules.png"); }
.button-cell.rules:hover{ background-image: url("../assets/rules_mo.png"); }
.button-cell.rules:active,
.button-cell.rules.current { background-image: url("../assets/rules_act.png") !important; }

.button-cell.hours     { background-image: url("../assets/hours.png"); }
.button-cell.hours:hover{ background-image: url("../assets/hours_mo.png"); }
.button-cell.hours:active,
.button-cell.hours.current { background-image: url("../assets/hours_act.png") !important; }

.button-cell.prices    { background-image: url("../assets/prices.png"); }
.button-cell.prices:hover{ background-image: url("../assets/prices_mo.png"); }
.button-cell.prices:active,
.button-cell.prices.current { background-image: url("../assets/prices_act.png") !important; }

.button-cell.events    { background-image: url("../assets/events.png"); }
.button-cell.events:hover{ background-image: url("../assets/events_mo.png"); }
.button-cell.events:active,
.button-cell.events.current { background-image: url("../assets/events_act.png") !important; }

.button-cell.socials   { background-image: url("../assets/socials.png"); }
.button-cell.socials:hover{ background-image: url("../assets/socials_mo.png"); }
.button-cell.socials:active,
.button-cell.socials.current { background-image: url("../assets/socials_act.png") !important; }

.button-cell.photos    { background-image: url("../assets/photos.png"); }
.button-cell.photos:hover{ background-image: url("../assets/photos_mo.png"); }
.button-cell.photos:active,
.button-cell.photos.current { background-image: url("../assets/photos_act.png") !important; }

.button-cell.directions{ background-image: url("../assets/directions.png"); }
.button-cell.directions:hover{ background-image: url("../assets/directions_mo.png"); }
.button-cell.directions:active,
.button-cell.directions.current { background-image: url("../assets/directions_act.png") !important; }

.button-cell.contact   { background-image: url("../assets/contactus.png"); }
.button-cell.contact:hover{ background-image: url("../assets/contactus_mo.png"); }
.button-cell.contact:active,
.button-cell.contact.current { background-image: url("../assets/contactus_act.png") !important; }

.button-cell.faq       { background-image: url("../assets/faq.png"); }
.button-cell.faq:hover { background-image: url("../assets/faq_mo.png"); }
.button-cell.faq:active,
.button-cell.faq.current { background-image: url("../assets/faq_act.png") !important; }

/* --- Responsive Tweaks --- */

/* Tablets */
@media (max-width: 992px) {
  #sidebar-nav {
    flex: 0 0 150px;
  }
  .button-cell {
    width: 150px;
    height: 32px;
  }
}

/* Mobiles */
@media (max-width: 768px) {
  #sidebar-nav {
    display: none; /* hide sidebar */
  }
  #mobile-menu-toggle {
    display: block; /* show hamburger */
  }
  #main-wrapper {
    flex-direction: column; /* content stacked under header */
  }
}