/*
Theme Name: CozyStay Passalacqua
Template: cozystay
Description: v2 sandbox child theme. Panel-menu restyle + visible header hamburger.
Version: 0.3
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Inter:wght@300;400;500&display=swap');

/* ===== Header hamburger: visible + "MENU" label ===== */
.site-header .menu-toggle,
#sticky-site-header .menu-toggle {
  color: #f3ece0 !important;
  --line-width: 28px !important;
  --height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
}
.site-header .menu-toggle:after,
#sticky-site-header .menu-toggle:after {
  content: "MENU";
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: currentColor;
  margin-left: 16px;
  display: inline-block;
  transition: color 0.4s ease;
}
#sticky-site-header .menu-toggle,
#sticky-site-header .menu-toggle:after { color: #401616 !important; }

.site-header .menu-toggle:hover,
.site-header .menu-toggle:focus,
#sticky-site-header .menu-toggle:hover { color: #a3852e !important; }

/* ===== Panel: wider, slower, cinematic ===== */
.sidemenu {
  max-width: min(640px, 56vw) !important;
  transition: opacity 0.6s cubic-bezier(.2,0,.2,1) !important;
}
.sidemenu.fullwidth {
  max-width: 100vw !important;
}
@media (max-width: 768px) {
  .sidemenu { max-width: 100vw !important; }
}

.sidemenu:before {
  background: rgba(20, 8, 8, 0.55) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  transition: opacity 0.6s ease !important;
}

.sidemenu .container {
  background-color: #401616 !important;
  background-image: linear-gradient(180deg, #4a1a1a 0%, #2c0d0d 100%) !important;
  color: #f3ece0 !important;
  padding: 0 !important;
  transition: transform 0.7s cubic-bezier(.2,0,.2,1) !important;
}

.sidemenu.sidemenu-custom .container { padding: 0 !important; }

/* Inner content padding */
.sidemenu .sidemenu-content {
  padding: clamp(40px, 8vh, 96px) clamp(40px, 6vw, 96px);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ===== Header row inside panel: close + logo ===== */
.sidemenu .sidemenu-content .elementor-section:first-child {
  margin-bottom: clamp(48px, 8vh, 120px) !important;
  padding: 0 !important;
}

.sidemenu .menu-toggle.close-button {
  background: transparent !important;
  border: none !important;
  color: #f3ece0 !important;
  width: 32px;
  height: 32px;
  position: relative;
  cursor: pointer;
  transition: transform 0.4s ease;
}
.sidemenu .menu-toggle.close-button:hover {
  transform: rotate(90deg);
}
.sidemenu .menu-toggle.close-button .menu-toggle-icon {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
}
.sidemenu .menu-toggle.close-button .menu-toggle-icon:before,
.sidemenu .menu-toggle.close-button .menu-toggle-icon:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 22px;
  height: 1px;
  background: currentColor;
}
.sidemenu .menu-toggle.close-button .menu-toggle-icon:before { transform: rotate(45deg); }
.sidemenu .menu-toggle.close-button .menu-toggle-icon:after  { transform: rotate(-45deg); }

.sidemenu .elementor-widget-cs_logo img {
  max-height: 56px !important;
  width: auto !important;
  height: auto !important;
  filter: brightness(1.1) contrast(0.95);
}

/* ===== Menu items: big italic serif, generous spacing ===== */
.sidemenu nav.cs-menu,
.sidemenu .elementor-widget-cs_menu nav { width: 100% !important; }

.sidemenu .cs-menu ul.menu,
.sidemenu .cs-menu .main-navigation ul,
.sidemenu ul.menu {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  text-align: left !important;
}

.sidemenu .cs-menu ul.menu > li,
.sidemenu ul.menu > li {
  display: block !important;
  margin: 0 !important;
  padding: clamp(8px, 1.4vh, 18px) 0 !important;
  border: none !important;
}

.sidemenu .cs-menu ul.menu > li > a,
.sidemenu ul.menu > li > a {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: clamp(2.2rem, 4.2vw, 4.4rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.005em !important;
  color: #f3ece0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  display: inline-block !important;
  padding: 0 !important;
  position: relative;
  transition: color 0.4s ease, transform 0.5s cubic-bezier(.2,0,.2,1);
}

.sidemenu .cs-menu ul.menu > li > a:after,
.sidemenu ul.menu > li > a:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.05em;
  width: 100%;
  height: 1px;
  background: #a3852e;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(.2,0,.2,1);
}
.no-touch .sidemenu .cs-menu ul.menu > li > a:hover,
.sidemenu .cs-menu ul.menu > li > a:hover,
.sidemenu ul.menu > li > a:hover {
  color: #d6b15a !important;
  opacity: 1 !important;
}
.sidemenu ul.menu > li > a:hover:after { transform: scaleX(1); }

/* Sub-menu: render small, sans, indented */
.sidemenu ul.menu li ul,
.sidemenu ul.sub-menu {
  list-style: none !important;
  padding-left: 18px !important;
  margin: 8px 0 0 !important;
}
.sidemenu ul.sub-menu li a {
  font-family: "Inter", system-ui, sans-serif !important;
  font-style: normal !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: rgba(243, 236, 224, 0.7) !important;
  font-weight: 400 !important;
}

/* ===== Auxiliary content (eyebrows, contact, social) ===== */
.sidemenu .elementor-widget-text-editor,
.sidemenu .elementor-widget-text-editor p {
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(243, 236, 224, 0.7) !important;
  line-height: 1.8 !important;
}

.sidemenu .elementor-widget-cs_title .cs-title {
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.36em !important;
  text-transform: uppercase !important;
  color: #a3852e !important;
  font-weight: 400 !important;
  margin-bottom: 0.6em !important;
}

.sidemenu .elementor-widget-cs_socials a,
.sidemenu .elementor-social-icons-wrapper a {
  color: #f3ece0 !important;
  opacity: 0.8;
  transition: color 0.4s ease, opacity 0.4s ease;
}
.sidemenu .elementor-widget-cs_socials a:hover { color: #a3852e !important; opacity: 1; }

.sidemenu a.button {
  background: transparent !important;
  border: 1px solid rgba(243, 236, 224, 0.4) !important;
  color: #f3ece0 !important;
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  padding: 16px 32px !important;
  border-radius: 0 !important;
}
.sidemenu a.button:hover {
  background: #a3852e !important;
  border-color: #a3852e !important;
  color: #401616 !important;
}

/* Sequenced fade-up on open */
.sidemenu .cs-menu ul.menu > li,
.sidemenu .elementor-widget {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,0,.2,1);
}
.sidemenu.show .cs-menu ul.menu > li,
.sidemenu.show .elementor-widget {
  opacity: 1;
  transform: none;
}
.sidemenu.show .cs-menu ul.menu > li:nth-child(1) { transition-delay: 0.20s; }
.sidemenu.show .cs-menu ul.menu > li:nth-child(2) { transition-delay: 0.27s; }
.sidemenu.show .cs-menu ul.menu > li:nth-child(3) { transition-delay: 0.34s; }
.sidemenu.show .cs-menu ul.menu > li:nth-child(4) { transition-delay: 0.41s; }
.sidemenu.show .cs-menu ul.menu > li:nth-child(5) { transition-delay: 0.48s; }
.sidemenu.show .cs-menu ul.menu > li:nth-child(6) { transition-delay: 0.55s; }
.sidemenu.show .cs-menu ul.menu > li:nth-child(7) { transition-delay: 0.62s; }
.sidemenu.show .cs-menu ul.menu > li:nth-child(8) { transition-delay: 0.69s; }