/**
 * Single portafoglio — floating "Properties menu" widget.
 * Markup lives in the single-portafoglio FSE template (.wrapper-menu-properties
 * + a wp:query list). JS (properties-menu.js) toggles it open and follows scroll.
 */

/* Trigger tab fixed on the LEFT edge; only the right (inner) corners rounded. */
.menu-properties-trigger {
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 90;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  margin: 0;
  padding: 14px 8px;
  border: 0;
  border-radius: 0 6px 6px 0;
  background: var(--wp--preset--color--accent-2, #003a70);
  color: #fff;
  font-size: var(--wp--preset--font-size--xs, 12px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
}
.menu-properties-trigger:hover { opacity: 0.9; }
.menu-properties-trigger[hidden] { display: none; }

/* Floating panel — fixed (follows the scroll), opens on the left near the tab. */
.wrapper-menu-properties {
  position: fixed;
  top: 120px;
  left: 24px;
  width: 320px;
  max-width: 86vw;
  max-height: calc(100vh - 160px);
  z-index: 95;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-16px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.wrapper-menu-properties.active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.wrapper-menu-properties .menu-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 58, 112, 0.15);
}
.wrapper-menu-properties .menu-header img {
  max-height: 26px;
  width: auto;
}
.wrapper-menu-properties .menu-title {
  flex: 1;
  margin: 0;
  font-size: var(--wp--preset--font-size--xs, 12px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-2, #003a70);
}
.wrapper-menu-properties .close-icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  cursor: pointer;
}
.wrapper-menu-properties .close-icon::before,
.wrapper-menu-properties .close-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--wp--preset--color--accent-2, #003a70);
}
.wrapper-menu-properties .close-icon::before { transform: rotate(45deg); }
.wrapper-menu-properties .close-icon::after { transform: rotate(-45deg); }

/* List (rendered by wp:query → ul.wp-block-post-template > li.wp-block-post).
   It is the internal scroll container; overscroll-behavior keeps the wheel from
   scrolling the page once the list reaches its ends. */
.wrapper-menu-properties .wrapper-list-properties {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 16px 16px;
}
.wrapper-menu-properties .wrapper-list-properties ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wrapper-menu-properties .wrapper-list-properties li {
  margin: 0;
}
.wrapper-menu-properties .wrapper-list-properties a {
  display: block;
  padding: 7px 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--wp--preset--color--accent-2, #003a70);
  text-decoration: none;
}
.wrapper-menu-properties .wrapper-list-properties a:hover {
  text-decoration: none;
  opacity: 0.7;
}

@media (max-width: 781px) {
  .wrapper-menu-properties { left: 12px; width: 280px; }
}