body {
  font-family: 'Rubik', sans-serif;
}
nav.navigation{
	margin: auto;
	width: 100%;
	background:  #34a792;
	color: #FFF;
	height: 80px;
}

ul#primary-menu{
	width: 100%;
	list-style-type: none;
	height: auto;
	padding-left: 0px !important;
}

ul#primary-menu>li{
	float: left;
	width: 50%;
}
ul#primary-menu>li>a{
	padding: 20px;
	padding-left: 40px;
	display: inline-block;
	line-height: 40px;
	font-size: 18px;
	font-weight: 200;
}
ul#primary-menu .sub-nav{
	list-style-type: none;
}
ul#primary-menu .menu-item-955{
	background-color: #b6dbca;
}
ul#primary-menu .menu-item:first-child a{
	color: #648880;
}
ul#primary-menu .menu-item a{
	color: #fff;
}
/* posiziona i sottomenu */
.navigation .menu-item { position: relative; }

.navigation .menu-item .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: .25rem;
  white-space: nowrap;
  z-index: 100;
}

/* allineamenti */
.dropdown-right .sub-menu { right: 0; left: auto; }
.dropdown-left  .sub-menu { left: 0;  right: auto; }

/* mostra al passaggio del mouse */
.navigation .menu-item:hover > .sub-menu {
  display: block;
}

/* stile voci */
.sub-menu li { list-style: none; }
.sub-menu li.divider { margin: .5rem 0; border-top: 1px solid #eaeaea; }
.sub-menu a {
  display: flex;
  align-items: center;
  padding: .5rem 1rem;
  color: #333;
  text-decoration: none;
}
.sub-menu a:hover { color: #fff; }

/* icone spaziatura */
.sub-menu a i { margin-right: .5rem; }
/* 1) Sfondo del sottomenu uguale al green della fascia superiore */
/* Sostituisci #00a859 con il valore esatto del tuo verde */
.navigation .menu-item .sub-menu {
  background-color: #34a792;
}

#primary-menu > .menu-item:first-child .sub-menu {
  background-color: #b6dbca;
}

/* 2) Font più grande per le voci del sottomenu */
#primary-menu > .menu-item:first-child .sub-menu a {
  font-size: 18px; /* ~18px, regola a piacere */
  line-height: 1.4;
  color: #648880;
}
.navigation .menu-item .sub-menu a {
  font-size: 18px; /* ~18px, regola a piacere */
  line-height: 1.4;
}
.menu-text{
	font-weight: 200;
}

/* 3) Prima voce del menu principale: sfondo verde chiaro e testo allineato a destra */
/* Qui assumiamo che la "prima voce" sia il primo <li> dentro a #primary-menu */
#primary-menu > .menu-item:first-child > a {
  background-color: #b6dbca;
  text-align: right;
  display: block;      /* perché text-align funzioni su <a> */
  padding-right: 40px; /* un po’ di respiro a destra */
}
/* 1. Nascondi il burger su desktop e mostra il menu */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #fff;
}
/* Rimuove la “caret” da TUTTI i dropdown-toggle */
.dropdown-toggle::after {
  display: none !important;
  content: none !important;
}


/* ===== Burger icon ===== */
.menu-toggle {
  background:none;
  border:none;
  cursor:pointer;
  width:2rem;
  height:2rem;
  position:relative;
  z-index:1001;
}
.burger-icon,
.burger-icon::before,
.burger-icon::after {
  content:'';
  display:block;
  width:100%;
  height:2px;
  background:#333;
  margin:0.4rem 0;
  transition:transform 0.3s ease, opacity 0.3s ease;
}
.burger-icon::before,
.burger-icon::after {
  position:absolute; left:0;
}
.burger-icon::before { top:0; }
.burger-icon::after { bottom:0; }

/* ===== Off-canvas ===== */
.offcanvas-menu {
  position:fixed;
  top:0; right:-100%;
  width:80%; max-width:300px; height:100%;
  background:#fafafa;
  box-shadow:-2px 0 8px rgba(0,0,0,0.2);
  overflow-y:auto;
  transition:right 0.3s ease;
  z-index:1000;
  padding:4rem 1rem;
  background: #34a792;
}

/* ===== Accordion mobile ===== */
.accordion-menu { list-style:none; }
.accordion-menu .menu-item + .menu-item { margin-top:1rem; }
.accordion-menu .menu-item-has-children > a {
  display:block; position:relative;
  text-decoration:none; font-weight:bold;
  padding:0.5rem; color:#333; cursor:pointer;
}
.accordion-menu .menu-item-has-children > a::after {
  content:'+'; position:absolute; right:0.5rem;
  font-size:1.2rem; transition:transform 0.3s ease;
}
.accordion-menu .menu-item-has-children.open > a::after {
  content:'–';
}
.sub-menu-mob {
  list-style:none;
  max-height:0; overflow:hidden;
  transition:max-height 0.3s ease;
  padding-left:1rem;
}
.menu-item-has-children.open .sub-menu-mob {
  max-height:500px;
}

.sub-menu-mob a {
	color: #fff;
}

.sub-menu-mob li {
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #ccc;

}
/* ===== Stato aperto offcanvas ===== */
.offcanvas-open .offcanvas-menu { right:0; }
.offcanvas-open .burger-icon { background:transparent; }
.offcanvas-open .burger-icon::before {
  transform:translateY(6px) rotate(45deg);
}
.offcanvas-open .burger-icon::after {
  transform:translateY(-6px) rotate(-45deg);
}

/* ===== Breakpoint ===== */
@media (min-width:768px) {
  /* mostra desktop, nascondi mobile */
  .main-nav { display:flex; }
  .menu-toggle,
  .offcanvas-menu { display:none; }
}
@media (max-width:767px) {
  /* mobile: nascondi desktop */
  .main-nav { display:none; }
}