/* ============================================
   ITALY MADE EASY — Beamer Custom CSS
   v2 · Giugno 2026 — classi reali dal DOM
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;700;800&display=swap');

/* 1. Gradient bar in cima all'header */
.header {
  position: relative;
  overflow: visible !important;
}
.header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0090FF 0%, #E93D82 100%);
  z-index: 10;
}

/* 2. Font Figtree ovunque */
.container,
.container * {
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont,
               'Segoe UI', system-ui, sans-serif !important;
}

/* 3. Container widget con ombra soft */
.container {
  box-shadow: 0 8px 32px rgba(28, 52, 71, 0.10) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* 4. Singoli post */
.feature {
  padding: 18px 22px !important;
  border-bottom: 2px solid rgb(0 0 0 / 52%) !important;
  box-shadow: none !important;
  transition: background 0.2s ease !important;
}
.feature:last-child {
  border-bottom: none !important;
}

/* 5. Hover post — accent blu trasparente */
.feature:hover {
  background: rgba(0, 144, 255, 0.03) !important;
}

/* 6. Pillole categoria */
.category {
  letter-spacing: 0.05em !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 100px !important;
}

/* 7. Badge notifiche → giallo brand */
#beamerSelector .beamer_icon.active,
#beamerButton .counter {
  background: #F7DE15 !important;
  color: #1C3447 !important;
  border: 2px solid #FFFFFF !important;
  font-weight: 800 !important;
}

/* 8. Bell / trigger button gradient brand */
#beamerSelector,
#beamerButton {
  background: linear-gradient(135deg, #0090FF 0%, #E93D82 100%) !important;
  box-shadow: 0 4px 16px rgba(0, 144, 255, 0.25) !important;
}

/* 9. CTA / Read More / action buttons → gradient pill */
.featureAction a,
.readmoreButton,
[data-link-mode="button"] .featureAction a {
  background: linear-gradient(135deg, #0090FF 0%, #E93D82 100%) !important;
  color: #FFFFFF !important;
  border-radius: 100px !important;
  border: none !important;
  padding: 10px 20px !important;
  font-weight: 700 !important;
  display: inline-block !important;
}

/* 10. Titolo header */
.headerTitle a {
  color: #1C3447 !important;
  font-weight: 700 !important;
}

/* 11. Link nel corpo del post → bianco senza sottolineatura */
.featureContent a {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* 12. Link nel titolo e nell'azione → dark brand */
.featureTitle a,
.featureAction a {
  color: #1C3447 !important;
}

/* 13. News scroll area */
.news {
  background-color: #ffffff !important;
}