/* ============================================
   Sidebar / Navigation Styles
   ============================================ */

#header { position: fixed; top: 0; left: 0; right: 0; z-index: 999; background: var(--background); transition: background 0.3s ease; }
#header.scrolled { background: var(--background); }
.nav-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px var(--gutter-mobile); height: 60px; border-bottom: 1px solid #d9d5d5; }
.nav-list { display: flex; align-items: center; gap: 20px; }
.nav-item { display: flex; align-items: center; }
.nav-item .logodesktop { height: 36px; width: auto; }
.nav-item .logomobile { display: none; height: 36px; width: auto; }
.nav-item-hidden { display: none; }

#mobileMenuButton { background: none; border: none; cursor: pointer; padding: 0; }
.mobileMenu { display: flex; align-items: center; gap: 10px; }
.mobileMenu span { font-family: var(--font-mono); font-size: 10px;  letter-spacing: 0.5px; color: var(--foreground); }
#close { display: none; }

.sidebar { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 998; background: var(--background); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap-mobile); padding: 80px var(--gutter-mobile) 40px; transform: translateX(-100%); transition: transform 0.5s cubic-bezier(0.77, 0, 0.18, 1); overflow-y: auto; }
.sidebar.open { transform: translateX(0); }
.sidebar__links { font-family: var(--font-mono); font-size: 10px;  letter-spacing: 2px; color: var(--foreground); text-decoration: none; display: block; padding: 8px 0; transition: opacity 0.15s ease; }
.sidebar__links:hover { opacity: 0.6; }
.first__sidebar { grid-column: 1; }
.second__sidebar { grid-column: 2 / span 2; }
.third__sidebar { grid-column: 4 / span 1; }

.menu-list { margin: 0; padding: 0; }
.menu-list li { margin-bottom: 4px; }
.menu-list a { font-family: var(--font-mono); font-size: 10px;  letter-spacing: 2px; color: var(--foreground); text-decoration: none; display: block; padding: 4px 0; transition: opacity 0.15s ease; }
.menu-list a:hover { opacity: 0.6; }
.sidebar-caption { font-family: var(--font-mono); font-size: 10px;  opacity: 0.5; margin-bottom: 15px; display: block; }
.quote-trigger { cursor: pointer; }

.menu-contenitore { position: fixed; top: 0; right: 0; width: 100%; max-width: 500px; height: 100vh; z-index: 1000; background: var(--background); transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.77, 0, 0.18, 1); overflow-y: auto; padding: 30px; }
.menu-contenitore.open { transform: translateX(0); }
.menu-contenitore .closeButton { position: absolute; top: 20px; right: 20px; background: none; border: none; cursor: pointer; padding: 8px; }
.menu-contenitore .closeButton svg { width: 24px; height: 24px; }

.quoteForm h2 { font-family: var(--font-heading); font-size: 20px;  margin-bottom: 30px; }
.form-group { margin-bottom: 20px; }
.form-group label { font-family: var(--font-mono); font-size: 10px;  display: block; margin-bottom: 5px; opacity: 0.5; }
.form-group input, .form-group select, .form-group textarea { width: 100%; border: none; outline: none; padding: 10px 0; font-size: 12px; font-family: var(--font-body); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: transparent; color: var(--foreground); border-radius: 0; -webkit-appearance: none; }
.form-group textarea { min-height: 100px; resize: vertical; }
.form-group select { cursor: pointer; }
.form-group .checkbox-group { display: flex; align-items: flex-start; gap: 10px; margin-top: 15px; }
.form-group .checkbox-group input[type="checkbox"] { width: auto; margin-top: 3px; border: none; }
.form-group .checkbox-group label { opacity: 1; font-size: 10px; margin-bottom: 0; }
.form-footer-text { font-size: 12px; margin-top: 20px; opacity: 0.7; }

.mobileSideMenu { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 997; background: var(--background); transform: translateX(-100%); transition: transform 0.4s cubic-bezier(0.77, 0, 0.18, 1); overflow-y: auto; padding: 80px var(--gutter-mobile) 40px; }
.mobileSideMenu.open { transform: translateX(0); }

@media (max-width: 1023px) {
    .nav-item .logodesktop { display: none; }
    .nav-item .logomobile { display: block; }
    .sidebar { grid-template-columns: 1fr 1fr; }
    .first__sidebar { grid-column: 1; }
    .second__sidebar { grid-column: 2; }
    .third__sidebar { grid-column: 1 / span 2; }
    .menu-contenitore { max-width: 100%; }
}
.desktop-only { display: none; }
@media (min-width: 1024px) {
    .desktop-only { display: flex; }
    .nav-bar { padding: 12px var(--gutter-desktop); max-width: 100%; }
    #mobileMenuButton { display: none; }
    .nav-list { display: flex; align-items: center; gap: 30px; width: 100%; }
    .nav-item { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; }
    .nav-item:hover { opacity: 0.6; }
    .nav-right { margin-left: auto; display: flex; align-items: center; gap: 30px; }
    .lang-selector { position: relative; display: flex; align-items: center; }
    .lang-selector select { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; border: none; background: transparent; color: var(--foreground); padding: 4px 20px 4px 8px; cursor: pointer; outline: none; appearance: none; -webkit-appearance: none; }
    .lang-selector::after { content: "▾"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 8px; pointer-events: none; opacity: 0.5; }
    .sidebar { grid-template-columns: repeat(7, 1fr); padding: 100px var(--gutter-desktop) 40px; }
    .first__sidebar { grid-column: 1; }
    .second__sidebar { grid-column: 2 / span 2; }
    .third__sidebar { grid-column: 4 / span 2; }
    .fourth__sidebar { grid-column: 6 / span 2; }
}