@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');  
 /* .comic-neue {
  font-family: "Comic Neue", cursive;
  font-weight: 300-700;
  font-style: normal-italic;
}
.comfortaa {
  font-family: "Comfortaa", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300-700;
  font-style: normal;
} */


 
  
  
  :root {
    /* Cacao palette */
    --color-cacao-050: #F9F5F3;
    --color-cacao-100: #F0E5E1;
    --color-cacao-200: #E6D5CE;
    --color-cacao-300: #D3B6AB;
    --color-cacao-400: #AA8B7E;
    --color-cacao-500: #815F51;
    --color-cacao-600: hsl(18, 32%, 30%);
    --color-cacao-700: #4D3328;
    --color-cacao-800: #422C22;
    --color-cacao-900: #36241C;
    /* yellow palette */
    --color-yellow-100: #FFE863;
    --color-yellow-200: #FFE150;
    --color-yellow-300: #FFD93D;
    --color-yellow-400: #FACB2E;
    --color-yellow-500: #F5BD1F;
    /* gold palette */
    --color-gold-100: #FFB300;
    --color-gold-200: #E8B04B;
    --color-gold-300: #c99200;
    /* orange palette */
    --color-orange-100: #E67E22;
    --color-orange-200: #d2691e;
    --color-orange-300: #c85000;
    /* red palette */
     --color-red-100: #ff6b57;
    --color-red-200: #d6341d;
    --color-red-300: #a31200;
  }
 * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html, body {
    overflow-x: hidden;
    width: 100%;
    }
    html {
        font-size: 62.5%;
    }
    body {
      font-family: "Comfortaa", sans-serif;
      font-optical-sizing: auto;
      font-weight: 500;
      font-style: normal;
      color: #222;
      background-color: var(--color-cacao-300);
      line-height: 1.6;
      font-size: 1.6rem;
      /* min-height: 200vh;  to make scrolling visible */
    }
      .container {
      width: 100%;
      /* max-width: 1440px; */
      margin: 0 auto;
      text-align: center;
      
    }
       h1, h2 {
      margin-bottom: 1.6rem;
    }

    p {
      max-width: 700px;
      margin: 0 auto 2rem;
    }
/* header */
    header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 8vh;
      width: 100%;
      padding: 0 2rem;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 2200;
      background: var(--color-cacao-800);
      transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    }
    header.vanilla {
      background: var(--color-cacao-100);
    }
    header.cacao-200 {
      background: var(--color-cacao-200);
    }
    header.legal {
      background: var(--color-cacao-300);
    }
     header.cacao-400 {
      background: var(--color-cacao-400);
    }
     header.cacao-700 {
      background: var(--color-cacao-700);
    }
    header.cacao-900 {
      background: var(--color-cacao-900);
    }
    header.orange {
      background: var(--color-orange-100);
    }
    header.orange-200 {
      background: var(--color-orange-200);
    }
     header.orange-300 {
      background: var(--color-orange-300);
    }
     header.gold {
      background: var(--color-gold-100);
    }
      header.gold-200 {
      background: var(--color-gold-200);
    }
      header.gold-300 {
      background: var(--color-gold-300);
    }
   

 /* Logo */
    .logo {
       position: relative;
        width: 40px;   /* match your logo width */
        height: 40px;   /* match your logo height */
    }
    .logo img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      transition: opacity 0.3s ease;
    }
    .logo-scrolled {
      opacity: 0;
      
    }
    header.scrolled .logo-default {
      opacity: 0;
    }
    header.scrolled .logo-scrolled {
      opacity: 1;
    }

    /* Nav Links */
    nav {
        flex: 1 1 auto; 
        display: flex;
        justify-content: center; 
        align-items: center;
    }

    nav ul {
      display: flex;
      gap: 2rem;
      list-style: none;
    }
    .nav-link {
        position: relative;
        text-decoration: none;
        color: var(--color-gold-100);
        font-weight: 700;
        transition: color 0.3s ease, background-color 0.3s ease;
        padding: 0.5rem 1rem;
        border-radius: 12px;
        }
      .nav-link.legal,
      .nav-link.vanilla,
      .nav-link.cacao-200,
      .nav-link.cacao-400,
      .nav-link.orange,
      .nav-link.orange-200,
      .nav-link.orange-300,
      .nav-link.gold,
      .nav-link.gold-200,
      .nav-link.gold-300 {
        color: var(--color-cacao-900);
      }
     



        .nav-link.active {
        background-color: var(--color-gold-100);
        color: var(--color-cacao-900);
        border-radius: 1rem;
        padding: 0.8rem 1.4rem;
        transition: all 0.3s ease;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        /* cursor: default;  */
        }
        .nav-link.legal.active {
        background-color: var(--color-cacao-900);
        color: var(--color-cacao-300);  
        }
         .nav-link.vanilla.active {
          background-color: var(--color-cacao-900);
          color: var(--color-cacao-100);
         }
          .nav-link.cacao-200.active {
          background-color: var(--color-cacao-900);
          color: var(--color-cacao-200);
         }
           .nav-link.cacao-400.active {
          background-color: var(--color-cacao-900);
          color: var(--color-cacao-400);
         }
        .nav-link.orange.active {
          background-color: var(--color-cacao-900);
          color: var(--color-orange-100);
        }
         .nav-link.orange-200.active {
          background-color: var(--color-cacao-900);
          color: var(--color-orange-200);
        }
         .nav-link.orange-300.active {
          background-color: var(--color-cacao-900);
          color: var(--color-orange-300);
        }
         .nav-link.gold.active {
          background-color: var(--color-cacao-900);
          color: var(--color-gold-100);
        }
         .nav-link.gold-200.active {
          background-color: var(--color-cacao-900);
          color: var(--color-gold-200);
        }
          .nav-link.gold-300.active {
          background-color: var(--color-cacao-900);
          color: var(--color-gold-300);
        }
   
        .nav-link:hover {
          transform: translateY(-2px);
          text-decoration: underline;
          text-decoration-color: var(--color-gold-100);
          text-underline-offset: 8px;
        }
        .nav-link.legal:hover,
        .nav-link.vanilla:hover,
        .nav-link.cacao-200:hover,
         .nav-link.cacao-400:hover,
        .nav-link.orange:hover,
        .nav-link.orange-200:hover,
        .nav-link.orange-300:hover,
        .nav-link.gold:hover,
        .nav-link.gold-200:hover,
        .nav-link.gold-300:hover   {
          text-decoration-color: var(--color-cacao-900);
        }
     
        /*MUST STAY HERE*/
       header.scrolled .nav-link:hover {
          text-decoration-color: var(--color-cacao-900);
        }
       header.scrolled .nav-link.active {
          background-color: var(--color-cacao-800);
          color: var(--color-cacao-100);
        }
    /* Login Button (desktop) */
    .right-controls {
      flex: 0 0 auto; 
      display: flex;
      align-items: center;
      gap: 1.6rem;
    }
    .login-btn {
      display: flex;
      align-items: center;
      gap: .8rem;
      background-color: transparent;
      color: var(--color-gold-100);
      border: none;
      border-radius: 20px;
      padding: 0.5rem 2.4rem;
      font-size: 1.8rem;
      cursor: pointer;
      font-weight: 700;
      transition: background 0.3s ease;
    }
    .login-btn.legal,
    .login-btn.vanilla,
    .login-btn.cacao-200,
    .login-btn.cacao-400,
    .login-btn.orange,
    .login-btn.orange-200,
    .login-btn.orange-300,
    .login-btn.gold,
    .login-btn.gold-200,
    .login-btn.gold-300   {
      color: var(--color-cacao-900);
    }
  

    .login-btn:hover {
      opacity: 0.6;
    }
    /* Hamburger */
  .hamburger {
        /* display: flex; */
        display: none; 
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 24px;
        cursor: pointer;
        gap: 5px;
        z-index: 2300;
      
    }
    .hamburger span,
    .page-home .hamburger span {
       width: 100%;
      display: block;
      height: 3px;
      background-color: var(--color-gold-100);
      border-radius: 2px;
      transition: all 0.3s ease;
      transform-origin: center;
    }
    .page-legal .hamburger span,
    .page-vanilla .hamburger span,
    .page-cacao-200 .hamburger span,
    .page-cacao-400 .hamburger span,
    .page-orange .hamburger span,
    .page-orange-200 .hamburger span,
    .page-orange-300 .hamburger span,
    .page-gold .hamburger span,
    .page-gold-200 .hamburger span,
    .page-gold-300 .hamburger span {
      background-color: var(--color-cacao-900);
    }

    /* Mobile Hamburger Nav Overlay */
    .mobile-menu {
      position: fixed;
      top: 0;
      right: -100%;
      width: 70%;
      height: 100vh;
      box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2rem;
      transition: right 0.4s ease;
    }

    .mobile-menu.open {
      right: 0;
      background-color: var(--color-cacao-800);
    }

    .mobile-menu a {
      font-size: 2rem;
      font-weight: 700;
      color: var(--color-gold-100);
      text-decoration: none;
      transition: color 0.3s ease;
    }

    /* Animate Hamburger to X */
    .hamburger.active span:nth-child(1) {
      transform: rotate(45deg) translateY(11px);
    }

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

    .hamburger.active span:nth-child(3) {
      transform: rotate(-45deg) translateY(-11px);
    }
 /* Login Overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 4000;
}

/* Active state */
.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Modal container */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 4100;
  
}

/* Active modal */
.modal.active {
  opacity: 1;
  visibility: visible;
}

/* Modal content */
.modal-content {
  background: var(--color-cacao-300);
  padding: 3.2rem;
  border-radius: 2rem;
  width: 90%;
  max-width: 400px;
  position: relative;
  text-align: left;
}

/* Close button */
.close-modal {
  position: absolute;
  top: 1.6rem;
  right: 2.4rem;
  background: none;
  border: none;
  font-size: 4rem;
  cursor: pointer;
  color: var(--color-cacao-900);
}

/* Form basics */
form {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.modal-content h2 {
  color: var(--color-orange-300);
}
.form-login,
.form-signup,
.form-forgot {
  color: var(--color-cacao-500);
}

label {
  font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"] {
  padding: 0.75rem;
  border: 1px solid var(--color-cacao-100);
  background-color: var(--color-cacao-100);
  color: var(--color-cacao-900);
  border-radius: 1rem;
  width: 100%;
  font-size: 1.6rem;
}   


.form-signup input:focus,
.form-login input:focus,
.form-forgot input:focus {
  border: 2px solid var(--color-cacao-500);   
  outline: none;               
}
/* Buttons */
.btn {
  padding: 1.6rem;
  border: none;
  border-radius: 1.2rem;
  font-size: 1.6rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s ease;
}

/* Independent stylable buttons */
.btn-login {
  background: var(--color-gold-100);
  color: var(--color-cacao-900);
  margin-top: 2.6rem;
}


.btn-signup {
  background: var(--color-cacao-900);
  color: var(--color-gold-100);
}

.btn-forgot {
  background: transparent;
  color: var(--color-cacao-900);
  text-decoration: underline;
  
}

.btn-signup-submit {
  background: var(--color-cacao-900);
  color: var(--color-gold-100);
}

.btn-restore {
 background: var(--color-cacao-900);
  color: var(--color-gold-100);
}

.btn:hover {
  opacity: 0.9;
}
/* Notification box for SIGNUP/RESTORE*/
.notification {
  display: none; /* hidden by default */
  padding: 1.2rem 1.6rem;
  margin-top: 10px;
  border-radius: 1.2rem;
  font-size: 1.8rem;
  text-align: center;
  transition: all 0.3s ease;
}

/* Success style */
.notification.success {
  background-color: #4CAF50;
  color: white;
}

/* Error style */
.notification.error {
  background-color: #f44336;
  color: white;
}

/* Small animation to fade in/out */
.notification.show {
  display: block;
  opacity: 0;
  animation: fadeInOut 3s forwards;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(-10px); }
  10% { opacity: 1; transform: translateY(0); }
  90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}
/* LOGIN Fade-out message animation */
.fade-message {
  opacity: 1;
  transition: opacity 0.6s ease;
}

.fade-message.hide {
  opacity: 0;
}

/* STICKY SEARCH BUTTON */
    .sticky-search {
    position: fixed;
    bottom: 12px;
    right: 8px;
    z-index: 9999;
    }


    .sticky-search-box {
    background-color: var(--color-cacao-800);
    color: var(--color-gold-100);
    padding: 2.8rem 2rem;
    border-radius: 1.6rem;
    display: flex;
    flex-direction: column; /* vertical layout */
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    gap: 6px;
    }
    .sticky-search-box.orange {
      color: var(--color-orange-100);
    }
    .sticky-search-box .fa-solid.fa-magnifying-glass {
      color: var(--color-gold-100);
      margin-bottom: 1rem;
    }
    .sticky-search-box.orange .fa-solid.fa-magnifying-glass {
      color: var(--color-orange-100);
    } 

    .vertical-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 2rem;
    letter-spacing: 2px;
    font-weight: bold;
    }


    .sticky-mobile-toggle {
    display: none;
    background-color: var(--color-cacao-800);
    color: var(--color-gold-100);
    padding: 12px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    }
    .sticky-mobile-toggle.orange {
    color: var(--color-orange-100);
    }
    .sticky-close-btn {
    display: none; /* Hidden on desktop */
    font-size: 20px;
    }


/* FOOTER */
.site-footer {
  background-color: var(--color-cacao-900);
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1.5rem 1.5rem;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
}
.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-col h4 {
  margin: 0 0 1rem;
  padding: 0;
  line-height: 1.2;
  font-size: 2rem;
  color: var(--color-orange-100);
  font-weight: 700;
}

.footer-col a {
  display: block;
  color: var(--color-cacao-300);
  text-decoration: none;
  font-size: 1.4rem;
  padding: 0.35rem 0;
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer-col a:hover {
  color: var(--color-orange-100);
  transform: translateY(1px);
}

.footer-bottom {
  border-top: 1px solid var(--color-cacao-700);
  margin-top: 3rem;
  padding-top: 1.25rem;
  text-align: center;
  font-size: 1.4rem;
  color: var(--color-cacao-500);
}
.footer-bottom .brand {
  color: var(--color-orange-100);
  font-size: 1.8rem;
}

.footer-bottom a {
  color: var(--color-cacao-300);
  text-decoration: none;
  font-size: 1.4rem;
}

.footer-bottom a:hover {
  color: var(--color-orange-300);
}

.footer-heart {
  margin: 0 0.25rem;
  color: var(--color-cacao-300);
  transition: color 0.2s ease;
}

/* CONSENT BANNER */
.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  max-width: 90vw;
  background: var(--color-cacao-900);
  padding: 16px 20px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);

  z-index: 9999;
  animation: fadeInUp 0.4s ease;
}

.cookie-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cookie-content h3 {
  color: var(--color-cacao-200);
}

.cookie-content p {
  margin: 0;
  font-size: 1.8rem;
  line-height: 1.4;
  color: var(--color-cacao-400);
  
}
.cookie-content a {
  color: var(--color-gold-100);
}
.cookie-content span {
  color: var(--color-cacao-200);
}

.cookie-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.btn {
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.8rem;
  transition: all 0.2s ease;
}

/* Equal visual weight (important for GDPR) */
.accept {
  background: var(--color-gold-300);
  color: var(--color-cacao-900);
}

.reject {
  background: var(--color-cacao-700);
  color: var(--color-cacao-400);
}

.accept:hover {
  background: var(--color-gold-200);
}

.reject:hover {
  background: var(--color-cacao-800);
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
/* RESPONSIVE */
@media (max-width: 900px) {
     html {
    font-size: 56.25%; /* 1rem = 9px */
    }
      nav ul {
        display: none;
      }
      .hamburger {
        display: flex; /* show hamburger on mobile */
      }
   
      .login-btn {
        padding: 0.5rem;
        border-radius: 50%;
        /* width: 42px;
        height: 42px; */
        font-size: 2.6rem;
      }
      .login-btn span {
        display: none;
      }
      .mobile-menu {
          position: fixed;
          top: 0;
          right: -100%;
          width: 100vw; /* full viewport width */
          height: 100vh; 
          background: var(--color-cacao-300);
          z-index: 2000;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 2rem;
          transition: right 0.4s ease;
          z-index: 2000;
          }

        /* When menu is open */
        .mobile-menu.open {
          right: 0; /* slide in fully */
            }
          header.scrolled .login-btn {
              color: var(--color-cacao-900);
            }
          header.scrolled .hamburger span {
            background-color: var(--color-cacao-900);
            } 
         
          

        }
@media (max-width: 768px) {
  /* STICKY SEARCH BAR */
        .sticky-search-box {
        display: none;
        }
        .sticky-mobile-toggle {
        display: block;
        }
        .expanded .sticky-search-box {
        display: flex;
        }
        .expanded .sticky-mobile-toggle {
        display: none;
        }
        .sticky-close-btn {
        display: block; /* Show close icon on mobile */
        }
        /* FOOTER */
        .footer-columns {
          row-gap: 2.5rem;
        }

        .footer-col h4 {
          margin-bottom: 0.75rem;
        }
}
@media (max-width:600px) {
   .cookie-banner {
    width: 90vw;
    bottom: 10px;
    padding: 14px;
  }

  .cookie-actions {
    justify-content: space-between;
  }

  .btn {
    flex: 1;
  }
}

@media (max-width: 500px) {
          .modal-content {
            width: 95%;
            padding: 1.5rem;
          }
          
        }
    
@media (max-width: 480px) {
  html {
    font-size: 50%; /* 1rem = 8px */
  }

}