html { font-size: 14px; }

@media (min-width: 480px)  { html { font-size: 15px; } }
@media (min-width: 768px)  { html { font-size: 15px; } }
@media (min-width: 1440px) { html { font-size: 16px; } }

body.menu-open {
  overflow: hidden;
  height: 100dvh;
  position: fixed;
  width: 100%;
  touch-action: none; 
}

#burger-menu { display: none; }

@media (max-width: 1025px) {
  
  #burger-menu {
    display: block;
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 2000;
    background-color: var(--color-bg-dark);
    border: none;
    border-radius: 100%;
    padding: 1rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transition: background-color 0.3s ease;
  }

  #burger-menu:hover { 
    background-color: var(--color-accent); 
  }

  #burger-menu i { 
    font-size: 1.5rem; 
    color: white; 
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  }

  #burger-menu i.fa-xmark {
    transform: rotate(90deg);
  }

  #wrapper_header { display: none; }
  #main_content { margin-left: 0; }
  
  #text_zone { 
    margin: 0; 
    background-color: rgba(255,255,255,0.8); 
    border: none; 
  }
  
  #text_zone_content { margin: 2.5rem; }

  #wrapper_header.show {
    display: flex !important;
    width: 100%;
    background-color: var(--color-bg-dark);
    z-index: 1500;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
    animation: slideIn 0.4s ease forwards;
  }

  #wrapper_header.show #header { gap: 1rem; }
  #wrapper_header.show #header_img img { width: 10rem; }
  #wrapper_header.show #header_name h1 { font-size: 2.2rem; }
  #wrapper_header.show #header_logo { width: 90%; }

  #wrapper_header.show .logo i {
    font-size: 3.2rem;
    transition: transform 0.5s ease, color 0.5s ease;
  }
  
  #wrapper_header.show .logo i:hover { 
    transform: scale(1.2); 
    color: var(--color-accent); 
  }

  #wrapper_header.show .menu-nav ul li a { 
    font-size: 1.75rem; 
    padding: 1.5rem;
  }

  @keyframes slideIn { 
    from { transform: translateX(-100%); opacity: 0; } 
    to { transform: translateX(0); opacity: 1; } 
  }
  
  @keyframes slideOut { 
    from { transform: translateX(0); opacity: 1; } 
    to { transform: translateX(-100%); opacity: 0; } 
  }

  #wrapper_header.hide { animation: slideOut 0.4s ease forwards; }
  #wrapper_header.no-animation { animation: none !important; transition: none !important; }
}