/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800&family=Pacifico&display=swap');

body {
  margin: 0;
  font-family: 'Nunito Sans', Arial, sans-serif;
}

/*Website heading style*/
    header {
      display: grid; /*turns my heading into a grid that can be formatted with columns and rows*/
      grid-template-columns: auto 1fr; /*two columns, the first takes up as much space is needed (my logo), and the second column (my nav buttons) take up the rest of the space*/
      align-items: center; /*all items are aligned vertically, so no matter the height of the container, they will be aligned on the vertical center*/
      padding: 0.5em 1em; /*specifies spacing inside the header, top and bottom is .5em, left and right is 1em (1em is equal to the font scale value of where the item is)*/
      background-color: #E7CFBC; /*background color - updated to match new palette*/
      border-bottom: 2px solid #C98686; /*border updated to match new palette*/
    }

    .header-left { /*styling the left column of my header (photo, name, tagline)*/
      display: flex; /*turns section into a flex container, items will stack horizontally instead of vertically*/
      align-items: center; /*aligns items on the vertical center line*/
      gap: 1em; /*adds a gap of 1em between the logo and text box*/
    }

    header img { 
      max-height: 100px; /*the header img will be max 100 pixels in height*/
    }

    header h1 { /*formatting all h1 elements in the header*/
      margin: 0; 
      font-size: 2.5em;
      color: #5E574D;
      font-family: 'Nunito Sans', Arial, sans-serif;
    }

    header h1 .cursive {
      font-family: 'Pacifico', cursive;
      font-size: 1.3em;
    }

    header h2 { /*formatting all h2 elements in the header*/
      margin: 0;
      font-size: 1.2em;
      font-weight: normal;
      color: #5E574D;
    }

    .header-right { /*formatting the navigation bar and action buttons (login and donate)*/
      display: flex; /*turns section into a flex container, items will stack horizontally instead of vertically*/
      justify-content: space-evenly; /*space items evenly*/
      align-items: center; /*aligns items on the vertical center line*/
    }

    nav { /*styles the nav containers*/
      display: flex; /*turns section into a flex container, items will stack horizontally instead of vertically*/
      gap: 2em; /*adds a gap of 2em between each nav button*/
    }

    nav a { /*styles all the nav links*/
      text-decoration: none; 
      color: #5E574D; 
      font-weight: bold;
      font-size: 1.2em;
    }

    nav a:hover { /*changes hover color over the nav links*/
      color: #C98686;
    }

    .actions { /*the container holding my login and donate buttons*/
      display: flex; /*turns section into a flex container, items will stack horizontally instead of vertically*/
      gap: 1em; /*adds a gap of 1em between each button*/
      align-items: center;
    }

    .actions button { /*styles the actual buttons in the container*/
      padding: 0.5em 1em;
      border: none; 
      border-radius: 5px;
      font-weight: bold;
      cursor: pointer; /*changes the mouse to a hand when it hovers over the button*/
    }

    .actions .login { /*styles the login button*/
      background-color: #C98686;
      color: white;
    }

.lang-switch {
  display: inline-flex;
  gap: 0.35em;
  margin-right: 0.35em;
}

.actions .login {
  margin-left: 0.4em;
}

.lang-btn {
  padding: 0.42em 0.65em;
  border-radius: 6px;
  border: 1px solid #c3a992;
  background: #fff8f3;
  color: #5E574D;
  font-size: 0.86em;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.lang-btn:hover {
  border-color: #C98686;
}

.lang-btn.active {
  background: #5E574D;
  color: #FFF4EC;
  border-color: #5E574D;
}

@media (max-width: 960px) {
  .header-right {
    gap: 0.8em;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  nav {
    gap: 1em;
  }

  .actions {
    gap: 0.55em;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

/* LOGIN BUTTON STYLE (matches your theme) */
.actions .login {
  background-color: #C98686;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

.actions .login:hover {
  background-color: #5E574D;
}

/* MODAL BACKDROP */
.modal {
  display: none;
  position: fixed;
  z-index: 20; /* stays above header */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
}

/* MODAL WINDOW BOX */
.modal-content {
  background: white;
  width: 320px;
  margin: 10% auto;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(0,0,0,0.3);
}

/* CLOSE (X) BUTTON */
.close {
  float: right;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}

/* FORM INPUTS */
#loginForm input {
  width: 100%;
  padding: 8px;
  margin: 6px 0 14px 0;
  border-radius: 6px;
  border: 1px solid #aaa;
}

/* LOGIN BUTTON INSIDE MODAL */
.modal-login-btn {
  width: 100%;
  background: #C98686;
  color: white;
  padding: 10px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

.modal-login-btn:hover {
  background: #5E574D;
}