/* ═══════════════════════════════════════════════════════════════════════
   common.css — Stili condivisi per tutti i prototipi Marta Platform
   Applicato a tutte le pagine in prototipi/ come ultimo foglio di stile
   ═══════════════════════════════════════════════════════════════════════ */

/* In-page anchors. Not a Design System token. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ─── Feature list: da lista testo → card con icona ───────────────────
   Trasforma la sezione .section-list nel formato "Funzionalità che fanno
   la differenza": due colonne di card bianche con icona scura a sinistra.
   Tecnica: display:contents sui wrapper di colonna → tutti gli item
   diventano figli diretti del grid, riempendo le 2 colonne in ordine.
   ─────────────────────────────────────────────────────────────────────── */

/* Sezione: sfondo leggermente rosa/crema come in marta-platform.com */
.section-list {
  background: #fff9fc;
}

/* Il grid rimane a 2 colonne ma con gap più stretto */
.section-list .grid-2-col {
  gap: 0.625rem !important;
  align-items: start;
}

/* "Dissolvi" i wrapper di colonna: i loro figli entrano direttamente nel grid */
.section-list .first-list-column,
.section-list .second-list-column {
  display: contents;
}

/* Ogni voce diventa una card orizzontale con icona */
.section-list .list-item_wrapper {
  background: #ffffff !important;
  border-radius: 1rem !important;
  border: 1px solid #efefef !important;
  padding: 0.875rem 1.125rem !important;
  margin: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05) !important;
}

/* Icona: dark square con checkmark SVG inline via data-uri */
.section-list .list-item_wrapper::before {
  content: '';
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: #141C24;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4.5 10.5l4 4 7-8' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Testo: allineato verticalmente con l'icona */
.section-list .list-item-text_wrapper {
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  min-height: 40px !important;
  flex: 1 !important;
}

.section-list .list-item-text_wrapper .text-size-regular {
  font-size: 0.9375rem !important;
  line-height: 1.5 !important;
}

/* ─── Pill cards (legacy Webflow classes) ──────────────────────────────
   Prototype pages now use Stack card (.mkt-stack / .mkt-stack-card).
   This leftover 2-col grid only applies if a page still has
   .home_promo_card-wrapper.
   ─────────────────────────────────────────────────────────────────────── */

.marta-promo-trigger_content {
  position: static !important;
  height: auto !important;
  overflow: visible !important;
}

.home_promo_card-wrapper {
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem !important;
  height: auto !important;
  width: 100% !important;
}

.home_promo-card {
  position: static !important;
  height: auto !important;
  min-height: 200px !important;
  border-radius: 1.25rem !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Colori: manteniamo le varianti originali */
.home_promo-card.is-first,
.home_promo-card:not(.is-second-new) {
  background-color: var(--vinaccia-800, #770045) !important;
}
.home_promo-card.is-second-new {
  background-color: #ffffff !important;
  border: 1px solid #efefef !important;
}

.promo-text_wrapper {
  position: static !important;
  height: auto !important;
  padding: 2rem 2.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .75rem !important;
  flex: 1 !important;
}

/* Testi bianchi nelle card scure */
.home_promo-card.is-first .text-size-regular,
.home_promo-card:not(.is-second-new) .text-size-regular {
  color: rgba(255,255,255,.8) !important;
}


@media (max-width: 767px) {
  .home_promo_card-wrapper {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   MEGA-NAVBAR — Menu Marta 2.0 con dropdown a 6 voci
   ═══════════════════════════════════════════════════════════════════════ */

/* Reset & override della vecchia proto-nav */
.proto-nav.proto-nav--v2 {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--greyscale-200);
  font-family: "Source Sans 3", sans-serif;
}

.proto-nav--v2 .proto-nav__inner {
  max-width: 82rem;
  margin: 0 auto;
  padding: 0 2rem;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.proto-nav--v2 .proto-nav__logo-link { flex-shrink: 0; }

.proto-nav--v2 .proto-nav__menu { flex: 1; }

.proto-nav--v2 .proto-nav__list {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.proto-nav--v2 .proto-nav__item { position: relative; }

/* Trigger button */
.proto-nav--v2 .proto-nav__trigger {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--greyscale-800);
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.proto-nav--v2 .proto-nav__trigger:hover,
.proto-nav--v2 .proto-nav__item:hover .proto-nav__trigger {
  background: var(--greyscale-100);
  color: var(--vinaccia-800);
}
.proto-nav--v2 .proto-nav__trigger svg {
  transition: transform 0.2s;
  opacity: 0.6;
}
.proto-nav--v2 .proto-nav__item:hover .proto-nav__trigger svg,
.proto-nav--v2 .proto-nav__trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Dropdown panel */
.proto-nav--v2 .proto-nav__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: #ffffff;
  border: 1px solid var(--greyscale-200);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.12);
  min-width: 280px;
  padding: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 300;
}
.proto-nav--v2 .proto-nav__item:hover .proto-nav__dropdown,
.proto-nav--v2 .proto-nav__item:focus-within .proto-nav__dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Dropdown list */
.proto-nav--v2 .proto-nav__dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Dropdown link */
.proto-nav--v2 .proto-nav__dropdown-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--greyscale-800);
  transition: background 0.12s;
}
.proto-nav--v2 .proto-nav__dropdown-link:hover {
  background: var(--vinaccia-100, #ffebf6);
}
.proto-nav--v2 .proto-nav__dropdown-link--soon {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}
.proto-nav--v2 .proto-nav__dd-icon {
  font-size: 1.25rem;
  width: 36px;
  height: 36px;
  background: var(--greyscale-100);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.proto-nav--v2 .proto-nav__dropdown-link strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}
.proto-nav--v2 .proto-nav__dropdown-link small {
  font-size: 0.75rem;
  color: #777;
  line-height: 1.2;
}

/* CTA button */
.proto-nav--v2 .proto-nav__actions {
  flex-shrink: 0;
  margin-left: auto;
}

/* Mobile: hide nav links */
@media (max-width: 900px) {
  .proto-nav--v2 .proto-nav__menu { display: none; }
}

/* Keyboard focus: keep dropdown open when trigger has focus */
.proto-nav--v2 .proto-nav__trigger:focus-visible {
  outline: 2px solid var(--vinaccia-500);
  outline-offset: 2px;
}

/* ─── Animazione staggered per le card (opzionale, non invasiva) ─────── */
@media (prefers-reduced-motion: no-preference) {
  .section-list .list-item_wrapper {
    opacity: 0;
    transform: translateY(8px);
    animation: cardFadeUp 0.35s ease-out forwards;
    animation-play-state: paused;
  }
  .section-list.in-view .list-item_wrapper {
    animation-play-state: running;
  }
  .section-list .first-list-column .list-item_wrapper:nth-child(1),
  .section-list .second-list-column .list-item_wrapper:nth-child(1) { animation-delay: 0.00s; }
  .section-list .first-list-column .list-item_wrapper:nth-child(2),
  .section-list .second-list-column .list-item_wrapper:nth-child(2) { animation-delay: 0.08s; }
  .section-list .first-list-column .list-item_wrapper:nth-child(3),
  .section-list .second-list-column .list-item_wrapper:nth-child(3) { animation-delay: 0.16s; }
  .section-list .first-list-column .list-item_wrapper:nth-child(4),
  .section-list .second-list-column .list-item_wrapper:nth-child(4) { animation-delay: 0.24s; }
  .section-list .first-list-column .list-item_wrapper:nth-child(5),
  .section-list .second-list-column .list-item_wrapper:nth-child(5) { animation-delay: 0.32s; }
  @keyframes cardFadeUp {
    to { opacity: 1; transform: translateY(0); }
  }
}

/* Marketing FAQ. Native details/summary inside the existing section shell
   (padding-global, container-medium, heading-style-h3, text-size-regular).
   Not a Design System component. No new tokens or breakpoints. */
.mkt-faq {
  background: var(--color-softy-100);
  font-family: var(--font-family-lexend);
}

.mkt-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.mkt-faq__item {
  margin: 0;
  background: var(--color-standard-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-8);
  padding-inline: var(--space-16);
}

.mkt-faq__item > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
  padding-block: var(--space-16);
  cursor: pointer;
  list-style: none;
  color: var(--color-gray-900);
  font-family: var(--font-family-lexend);
  font-size: var(--text-body-large-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--text-body-large-line-height);
}

.mkt-faq__item > summary::-webkit-details-marker {
  display: none;
}

.mkt-faq__item > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.mkt-faq__item[open] > summary::after {
  margin-top: 0.65em;
  transform: rotate(225deg);
}

.mkt-faq__answer {
  padding-bottom: var(--space-16);
  color: var(--color-gray-800);
  font-size: var(--text-body-medium-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-body-medium-line-height);
}

.mkt-faq__answer p {
  margin: 0 0 var(--space-16);
}

.mkt-faq__answer p:last-child {
  margin-bottom: 0;
}

.mkt-faq__answer a {
  color: var(--color-pink-800);
  text-decoration: underline;
}