Refactor: Restringimento drag & drop, legenda impostazioni, modalità offline e rimozione sezione liturgia

src/app/home/home.page.scss

@@ -31,7 +31,7 @@
 .search-wrapper-group {
   display: flex;
   flex-direction: column;
-  padding: 8px 16px 12px 16px; // Added top padding for extra clearance
+  padding: 2px 16px 12px 16px; // Reduced top padding
   gap: 12px;
 }
 
@@ -174,7 +174,7 @@ ion-title {
     align-items: center;
     justify-content: flex-start;
     gap: 12px;
-    padding: 20px 0 16px 24px; // Increased padding for mobile spacing
+    padding: 16px 0 4px 24px; // Reduced padding to bring search bar closer
   }
 
   .header-logo {
@@ -661,7 +661,7 @@ ion-title {
   justify-content: center;
   padding: 0 12px 0 0;
   cursor: grab;
-  color: rgba(255, 255, 255, 0.3);
+  color: rgba(255, 255, 255, 0.5);
   
   ion-icon {
     font-size: 1.8rem;
@@ -748,3 +748,143 @@ ion-title {
 .transparent-list {
   padding-bottom: 100px !important;
 }
+
+.suggeriti-header-card {
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 12px;
+  backdrop-filter: blur(15px);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  transition: background 0.3s ease, border-color 0.3s ease;
+
+  &:active {
+    background: rgba(255, 255, 255, 0.08);
+  }
+
+  .card-inner {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .card-header-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: padding-bottom 0.3s ease, border-bottom-color 0.3s ease;
+  }
+
+  &.expanded {
+    .card-header-row {
+      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+      padding-bottom: 6px;
+    }
+  }
+
+  .card-header-left {
+    display: flex;
+    align-items: center;
+  }
+
+  .expand-icon {
+    font-size: 1.25rem;
+    color: var(--ion-color-secondary);
+    transition: transform 0.3s ease;
+  }
+
+  .card-label {
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    color: var(--ion-color-secondary);
+  }
+
+  .card-date-compact {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 8px;
+  }
+
+  .expandable-content {
+    max-height: 0;
+    opacity: 0;
+    overflow: hidden;
+    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, margin-top 0.35s ease;
+    
+    &.show {
+      max-height: 400px; /* High enough to fit summary */
+      opacity: 1;
+      margin-top: 10px;
+    }
+  }
+
+  .card-date-row {
+    margin-bottom: 6px;
+  }
+
+  .card-date {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.5);
+  }
+
+  .card-title {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: white;
+    margin: 4px 0 0 0;
+  }
+
+  .card-summary {
+    font-size: 0.85rem;
+    line-height: 1.45;
+    color: rgba(255, 255, 255, 0.75);
+    margin: 6px 0 0 0;
+    font-weight: 400;
+  }
+}
+
+:host-context(body.high-contrast) .suggeriti-header-card {
+  background: #ffffff !important;
+  border-color: #000000 !important;
+  box-shadow: none !important;
+
+  .card-date-compact {
+    color: black !important;
+    background: transparent !important;
+  }
+
+  &.expanded {
+    .card-header-row {
+      border-bottom-color: rgba(0, 0, 0, 0.15);
+    }
+  }
+
+  .card-label {
+    color: black !important;
+  }
+
+  .card-date {
+    color: black !important;
+  }
+
+  .card-title {
+    color: black !important;
+  }
+
+  .card-summary {
+    color: black !important;
+  }
+}
+
+:host-context(body.high-contrast) {
+  .drag-handle {
+    color: rgba(0, 0, 0, 0.6) !important;
+  }
+}