/* ======================= LAYOUT CSS ======================= */





/* 1. Struttura sezioni principali */


section {


  padding-block: var(--spacing-xl);


}





/* 2. Header fisso */


.header {


  position: fixed;


  top: 0;


  left: 0;


  width: 100%;


  z-index: 1000;


  background-color: transparent;


  transition: background-color var(--transition), box-shadow var(--transition);


}





.header.scrolled {


  background-color: var(--color-light);


  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);


}





/* 3. Logo container */


.logo-container {


  padding: var(--spacing-sm);


  display: flex;


  align-items: center;


  justify-content: center;


}





.logo-container img {


  max-height: 100px;


  width: auto;


}





/* 4. Menu */


.menu {


  display: flex;


  justify-content: space-between;


  align-items: center;


  padding-inline: var(--spacing-md);


}





.menu ul {


  display: flex;


  gap: var(--spacing-sm);


}





.menu ul li a {


  font-size: var(--font-size-base);


  padding: var(--spacing-xs) var(--spacing-sm);


  border-radius: 4px;


  transition: background-color var(--transition);


}





.menu ul li a:hover {


  background-color: var(--color-secondary);


}





/* 5. Social Icons */


.social-icons {


  display: flex;


  gap: var(--spacing-xs);


}





.social-icons a img {


  width: 24px;


  height: 24px;


  transition: transform var(--transition);


}





.social-icons a:hover img {


  transform: scale(1.1);


}