/* Navbar container */

.navbar{
  width:100%;
  transition:background 0.4s ease;
  position: relative;
  z-index: 1100;

  background: linear-gradient(
    to right,
    #FCF7F4 0%,   /* logo background color */
    #FCF7F4 30%,
    #E2D8D2 60%,
    #D6CBC4 80%,
    #CFC3BB 100%
  );
}


/* Navbar layout */

.nav-container{
  max-width:1200px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  position:relative;
}

/* Logo */

.logo img{
  height:100px;
}

/* Navigation links */

.menu{
  display:flex;
  gap:32px;
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
}

.menu a{
  text-decoration:none;
  color:#6B5A4E;
  font-size:clamp(16px, 1.2vw, 20px);
  font-weight:500;
  letter-spacing:0.5px;
  transition:color 0.3s;
}

.menu a:hover{
  color:#6F8790;
}

/* Page layout */

body{
  margin:0;
  font-family:"Georgia", serif;
  background:#FFFFFF;
  color:#4A4A4A;
}

/* Global box sizing */

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

/* Main content container */

main{
  max-width:1200px;
  margin:auto;
  padding:40px 20px;
  width:100%;
}

/* Hamburger icon */

.hamburger{
  display:none;
  flex-direction:column;
  cursor:pointer;
  gap:5px;
}

.hamburger span{
  width:25px;
  height:3px;
  background:#6B5A4E;
  border-radius:2px;
}

/* Mobile menu */

@media (max-width:900px){

  .menu{
    position:absolute;
    top:90%;
    left:0;
    width:100%;

    background:#FCF7F4;

    flex-direction:column;
    align-items:center;
    gap:20px;

    padding:20px 0;

    opacity:0;

    transform:none; /* reset desktop centering */
    translate:0 -10px;

    pointer-events:none;

    transition:
      opacity 0.35s ease,
      translate 0.35s ease;
  }

  .menu.active{
    opacity:1;
    translate:0 10px;
    pointer-events:auto;
  }

  .hamburger{
    display:flex;
  }

}