/* ==========================================================
ON ZON SU SCHOOL
TEMPLATE NAVBAR 2026
File: css/navbar2026/navbar-onzonsu-2026-responsive.css
Tablet e mobile
========================================================== */

/* ==========================================================
Tablet / mobile generale
========================================================== */

@media screen and (max-width: 991px) {

.navbar-onzonsu-2026 .navbar-header {
float: none;
}

.navbar-onzonsu-2026 .navbar-toggle {
display: block;
}

.navbar-onzonsu-2026 .navbar-collapse {
border-top: 0;
box-shadow: none;
}

.navbar-onzonsu-2026 .navbar-collapse.collapse {
display: none !important;
}

.navbar-onzonsu-2026 .navbar-collapse.collapse.in {
display: block !important;
}

.navbar-onzonsu-2026 .navbar-nav {
float: none !important;
margin: 0;
}

.navbar-onzonsu-2026 .navbar-nav > li {
float: none;
}

.navbar-onzonsu-2026 .navbar-nav > li > a,
.navbar-onzonsu-2026 .navbar-nav > li > .nav-dropdown-button {
width: 100%;
}

}

/* ==========================================================
Mobile compatto 2026
========================================================== */

@media screen and (max-width: 767px) {

/* Contenitore navbar */
.navbar-onzonsu-2026 {
min-height: 48px;
}

.navbar-onzonsu-2026 .container {
padding-left: 15px;
padding-right: 15px;
}

/* Header mobile: hamburger centrato e telefono */
.navbar-onzonsu-2026 .navbar-header.mobile-hamburger-center {
position: relative;
min-height: 48px;
float: none;
text-align: center;
}

.navbar-onzonsu-2026 .navbar-toggle {
float: none !important;
display: inline-block !important;
margin: 7px auto !important;
padding: 8px 10px !important;
border: 1px solid rgba(179,84,0,0.35) !important;
border-radius: 4px !important;
background: #f7f3ec !important;
}

.navbar-onzonsu-2026 .navbar-toggle:hover,
.navbar-onzonsu-2026 .navbar-toggle:focus {
background: #fffaf5 !important;
outline: 2px solid rgba(179,84,0,0.35) !important;
outline-offset: 2px !important;
}

.navbar-onzonsu-2026 .navbar-toggle .icon-bar {
background-color: #B35400 !important;
}

.navbar-onzonsu-2026 .mobile-call-icon-navbar {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
color: #B35400 !important;
font-size: 24px;
text-decoration: none !important;
}

.navbar-onzonsu-2026 .mobile-call-icon-navbar:hover,
.navbar-onzonsu-2026 .mobile-call-icon-navbar:focus {
color: #E67E22 !important;
text-decoration: none !important;
}

/* Contenitore menu mobile scrollabile se troppo lungo */
.navbar-onzonsu-2026 #main-navbar,
.navbar-onzonsu-2026 .navbar-collapse {
width: 100%;
max-height: calc(100vh - 72px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding-left: 0 !important;
padding-right: 0 !important;
}

.navbar-onzonsu-2026 #main-navbar .navbar-nav,
.navbar-onzonsu-2026 .navbar-collapse .navbar-nav {
margin-top: 0 !important;
margin-bottom: 0 !important;
}

/* Ogni voce principale mobile in targa neutra e uniforme */
.navbar-onzonsu-2026 #main-navbar .navbar-nav > li,
.navbar-onzonsu-2026 .navbar-collapse .navbar-nav > li {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  background: #f7f3ec !important;
  border-left: 0 !important;
  border-radius: 5px !important;
  list-style: none !important;
}

.navbar-onzonsu-2026 #main-navbar .navbar-nav > li::before,
.navbar-onzonsu-2026 .navbar-collapse .navbar-nav > li::before {
content: none !important;
display: none !important;
}

/* Voci principali mobile: link e button identici */
.navbar-onzonsu-2026 #main-navbar .navbar-nav > li > a,
.navbar-onzonsu-2026 #main-navbar .navbar-nav > li > button.nav-dropdown-button,
.navbar-onzonsu-2026 .navbar-collapse .navbar-nav > li > a,
.navbar-onzonsu-2026 .navbar-collapse .navbar-nav > li > button.nav-dropdown-button {
display: block !important;
width: 100% !important;
padding: 8px 15px !important;
background: transparent !important;
color: #333 !important;
border: 0 !important;
font-family: inherit !important;
font-size: 17px !important;
line-height: 1.35 !important;
font-weight: 900 !important;
text-transform: uppercase !important;
letter-spacing: 0.03em !important;
text-align: left !important;
text-decoration: none !important;
min-height: 0 !important;
height: auto !important;
box-shadow: none !important;
outline: none;
-webkit-appearance: none;
appearance: none;
}
/* Caret e simbolo registrato proporzionati nel mobile */
.navbar-onzonsu-2026 #main-navbar .nav-dropdown-button .caret,
.navbar-onzonsu-2026 .navbar-collapse .nav-dropdown-button .caret {
  margin-left: 6px !important;
  align-self: center !important;
}

.navbar-onzonsu-2026 #main-navbar .registered-mark,
.navbar-onzonsu-2026 .navbar-collapse .registered-mark {
  font-size: 0.68em !important;
  line-height: 0 !important;
  vertical-align: super !important;
}
/* Voce corrente su mobile */
.navbar-onzonsu-2026 #main-navbar .navbar-nav > li.nav-current-page > a,
.navbar-onzonsu-2026 #main-navbar .navbar-nav > li.active > a,
.navbar-onzonsu-2026 .navbar-collapse .navbar-nav > li.nav-current-page > a,
.navbar-onzonsu-2026 .navbar-collapse .navbar-nav > li.active > a {
color: #B35400 !important;
font-weight: 900 !important;
background: #fffaf5 !important;
}

/* Hover mobile: acceso solo durante interazione */
.navbar-onzonsu-2026 #main-navbar .navbar-nav > li > a:hover,
.navbar-onzonsu-2026 #main-navbar .navbar-nav > li > button.nav-dropdown-button:hover,
.navbar-onzonsu-2026 .navbar-collapse .navbar-nav > li > a:hover,
.navbar-onzonsu-2026 .navbar-collapse .navbar-nav > li > button.nav-dropdown-button:hover {
color: #B35400 !important;
background: #fffaf5 !important;
}

/* Focus mobile neutro per evitare accensioni permanenti dopo tap */
.navbar-onzonsu-2026 #main-navbar .navbar-nav > li > a:focus,
.navbar-onzonsu-2026 #main-navbar .navbar-nav > li > button.nav-dropdown-button:focus,
.navbar-onzonsu-2026 .navbar-collapse .navbar-nav > li > a:focus,
.navbar-onzonsu-2026 .navbar-collapse .navbar-nav > li > button.nav-dropdown-button:focus {
color: #333 !important;
background: transparent !important;
outline: 2px solid rgba(179,84,0,0.35) !important;
outline-offset: 2px !important;
}

/* La pagina corrente deve restare evidenziata anche se in focus */
.navbar-onzonsu-2026 #main-navbar .navbar-nav > li.nav-current-page > a:focus,
.navbar-onzonsu-2026 #main-navbar .navbar-nav > li.active > a:focus,
.navbar-onzonsu-2026 .navbar-collapse .navbar-nav > li.nav-current-page > a:focus,
.navbar-onzonsu-2026 .navbar-collapse .navbar-nav > li.active > a:focus {
color: #B35400 !important;
background: #fffaf5 !important;
}

/* Dropdown aperto su mobile: voce principale neutra, salvo pagina corrente */
.navbar-onzonsu-2026 #main-navbar .navbar-nav > li.open > button.nav-dropdown-button,
.navbar-onzonsu-2026 .navbar-collapse .navbar-nav > li.open > button.nav-dropdown-button,
.navbar-onzonsu-2026 #main-navbar .navbar-nav > li > button.nav-dropdown-button[aria-expanded="true"],
.navbar-onzonsu-2026 .navbar-collapse .navbar-nav > li > button.nav-dropdown-button[aria-expanded="true"] {
color: #333 !important;
background: transparent !important;
}

.navbar-onzonsu-2026 #main-navbar .navbar-nav > li.nav-current-page > button.nav-dropdown-button,
.navbar-onzonsu-2026 #main-navbar .navbar-nav > li.active > button.nav-dropdown-button,
.navbar-onzonsu-2026 .navbar-collapse .navbar-nav > li.nav-current-page > button.nav-dropdown-button,
.navbar-onzonsu-2026 .navbar-collapse .navbar-nav > li.active > button.nav-dropdown-button {
color: #B35400 !important;
background: #fffaf5 !important;
}

/* Sottomenu mobile: sempre visibile sotto la voce principale */
.navbar-onzonsu-2026 #main-navbar .drop-down,
.navbar-onzonsu-2026 .navbar-collapse .drop-down,
.navbar-onzonsu-2026 #main-navbar .navbar-nav > li.dropdown > .drop-down,
.navbar-onzonsu-2026 .navbar-collapse .navbar-nav > li.dropdown > .drop-down {
  display: block !important;
  position: static !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 2px 0 5px !important;
  background: #ffffff !important;
  border-top: 1px solid rgba(179,84,0,0.12) !important;
  border-left: 0 !important;
  box-shadow: none !important;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  transition: none !important;
}

.navbar-onzonsu-2026 #main-navbar .drop-down li,
.navbar-onzonsu-2026 .navbar-collapse .drop-down li {
position: relative !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}

/* Pallino tradizionale nei sottomenu */
.navbar-onzonsu-2026 #main-navbar .drop-down li::before,
.navbar-onzonsu-2026 .navbar-collapse .drop-down li::before {
content: "•" !important;
display: inline-block !important;
position: absolute !important;
left: 13px !important;
top: 5px !important;
color: #B35400 !important;
font-size: 18px !important;
line-height: 1 !important;
}

.navbar-onzonsu-2026 #main-navbar .drop-down li a,
.navbar-onzonsu-2026 .navbar-collapse .drop-down li a {
display: block !important;
padding: 5px 15px 5px 30px !important;
background: transparent !important;
color: #333 !important;
font-family: inherit !important;
font-size: 16px !important;
line-height: 1.22 !important;
font-weight: 500 !important;
text-transform: none !important;
letter-spacing: normal !important;
text-decoration: none !important;
min-height: 0 !important;
height: auto !important;
}

.navbar-onzonsu-2026 #main-navbar .drop-down li a.dropdown-overview,
.navbar-onzonsu-2026 .navbar-collapse .drop-down li a.dropdown-overview {
color: #333 !important;
font-weight: 500 !important;
}

.navbar-onzonsu-2026 #main-navbar .drop-down li a:hover,
.navbar-onzonsu-2026 .navbar-collapse .drop-down li a:hover {
color: #B35400 !important;
background: #fffaf5 !important;
}

.navbar-onzonsu-2026 #main-navbar .drop-down li a:focus,
.navbar-onzonsu-2026 .navbar-collapse .drop-down li a:focus,
.navbar-onzonsu-2026 #main-navbar .drop-down li a.dropdown-overview:focus,
.navbar-onzonsu-2026 .navbar-collapse .drop-down li a.dropdown-overview:focus {
color: #333 !important;
background: transparent !important;
outline: 2px solid rgba(179,84,0,0.35) !important;
outline-offset: 2px !important;
}

}

/* ==========================================================
Schermi molto piccoli
========================================================== */

@media screen and (max-width: 480px) {

.navbar-onzonsu-2026 .navbar-toggle {
margin-top: 7px !important;
margin-bottom: 7px !important;
}

.navbar-onzonsu-2026 .mobile-call-icon-navbar {
right: 10px;
width: 40px;
height: 40px;
font-size: 22px;
}

.navbar-onzonsu-2026 #main-navbar .navbar-nav > li > a,
.navbar-onzonsu-2026 #main-navbar .navbar-nav > li > button.nav-dropdown-button,
.navbar-onzonsu-2026 .navbar-collapse .navbar-nav > li > a,
.navbar-onzonsu-2026 .navbar-collapse .navbar-nav > li > button.nav-dropdown-button {
padding-top: 8px !important;
padding-bottom: 8px !important;
font-size: 16px !important;
font-weight: 900 !important;
line-height: 1.28 !important;
}

.navbar-onzonsu-2026 #main-navbar .drop-down li a,
.navbar-onzonsu-2026 .navbar-collapse .drop-down li a {
font-size: 15px !important;
line-height: 1.22 !important;
}

}