* {
  font-family: "Roboto", sans-serif;
}


/* Small screens first for quick loading */
@media (max-width: 480px) {
  #navDiv {
    width: 220px;
    right: -220px;
    padding-top: 80px;
  }

  #navBtns .btnList button {
    width: 190px;
    height: 62px;
  }

  #navBtns .btnList button span {
    font-size: 15px;
  }


}

body {
  margin: 0;
  padding: 0;
}

header {
  position: sticky;
  top: 0;
  z-index: 1000;   /* keeps it above content */
  background: white; /* important so content doesn't show through */
}

#navbar {
  display: flex;
  gap: 20px;
  background-color: #D3CBCB;
  top: 0;
  left: 0;
  width: 100vw;
  align-items: center;
}

#navLogo {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #F7F4F0;
  background-color: #D3CBCB;
  font-size: 36px;
  padding: 10px;
  text-shadow: 1px 1px 2px #3C3C43CC;
}

#navLogo a{
  text-decoration: none;
   color: #F7F4F0;
}

h1{
  font-size:  1.5rem;
}

/* --- Base Layout --- */
#navBtns .btnList {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  gap: 0;
}

/* Remove spacing and overlap the trapezoids */
#navBtns .btnList li {
  margin: 0;
  padding: 0;
  line-height: 0;
  margin-left: -30px;
  /* overlap more to close the slanted gap */
}

#navBtns .btnList li:first-child {
  margin-left: 0;
}

/* --- Button Container --- */
#navBtns .btnList button {
  position: relative;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-block;
  width: 143px;
  height: 83px;
  transition: all 0.2s ease;
  overflow: hidden;
}

/* --- SVG Base --- */
#navBtns .btnList svg {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

#navBtns .btnList svg path {
  fill: #d3cbcb;
  stroke: #dedddd;
  stroke-width: 2;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.15));
  transition: all 0.2s ease;
}

/* --- Text Overlay --- */
#navBtns .btnList button span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  color: #3C3C43CC;
  z-index: 2;
  user-select: none;
  pointer-events: none;
}

/* --- Hover --- */
#navBtns .btnList button:hover svg path {
  fill: #cfc7c7;
}

/* --- Pressed In --- */
#navBtns .btnList button:active svg path {
  fill: #bdb5b5;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.3)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
  transform: translateY(2px);
}

/* Pressed text rotate effect
#navBtns .btnList button:active span {
  color: #3c3c3c;
  transform: translate(-50%, -48%);
}*/

#navBtns .btnList svg path {
  stroke: #dedddd;
  stroke-width: 2;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.15));
  transition: all 0.2s ease;

  /* 🎨 Gradient fill simulating a convex (bombed) surface */
  
  fill: url(#buttonGradient);
  
 
}

/* Hamburger styling */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-right: 10px;
  z-index: 20;
}

.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background: #333;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Hamburger animation */
.hamburger.active span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

#hamburgerBtn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* pushes hamburger to the right */
  flex: 1;
  /* expands to fill available space */
  padding: 10px;

}


/* Responsive (mobile) */
/* === MOBILE MENU === */
@media (max-width: 1084px) {
  .hamburger {
    display: flex;
  }

  /* === MENU CONTAINER === */
  #navDiv {
    position: fixed;
    top: 0;
    right: -260px;
    width: 200px;
    height: 100vh;
    background: none;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 90px;
    /* keeps spacing under header */
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 15;
    overflow-y: auto;

  }

  #navDiv.active {
    right: 0;
  }

  /* === BUTTON LIST === */
  #navBtns .btnList {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0;
    margin: 0;
    width: 100%;
    align-items: center;
    background-color: #D3CBCB;
    /* same as menu */
    border-radius: 10px;
  }

  #navBtns .btnList li {
    margin: 0;
    width: 100%;
    list-style: none;
  }

  /* === BUTTON === */
  #navBtns .btnList button {
    position: relative;
    width: 190px;
    height: 55px;
    background: #CFC7C7;
    /* match desktop buttons */
    border: 1.5px solid #BDB5B5;
    /* soft border */
    color: #3C3C43CC;
    /* text */

    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  }

  /* === TEXT === */
  #navBtns .btnList button span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #3C3C43CC;
    z-index: 2;
    pointer-events: none;
    white-space: nowrap;
  }


  /* === ACTIVE === */

  /* === SVG SUPPORT (optional if using icons) === */
  #navBtns .btnList svg path {
    fill: #CFC7C7;
    stroke: #DEDDDD;
    stroke-width: 2;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.15));
    transition: fill 0.2s ease;
  }

  #navBtns .btnList button:hover svg path {
    fill: #c8c2c2;
    /* Changes Button colour on hover*/
    border-color: #AFA7A7;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }

  #navBtns .btnList button:active svg path {

    fill: #bdb5b5;
    /*Button pressed*/
    border-color: #9E9696;
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.3),
      0 1px 3px rgba(0, 0, 0, 0.2);

    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.3)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
    transform: scale(0.98);
  }
}