/* ============================================================
   SUM Property Management — Blog Shared Styles
   Edit this file to update blog typography/components sitewide.
   ============================================================ */

/* Icons */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Glassmorphism card */
.liquid-glass {
  background: rgba(255,255,255,0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 8px 32px 0 rgba(31,38,135,0.07);
}

/* Buttons */
.satin-button-primary {
  background: linear-gradient(135deg, #001530 0%, #1a3f6f 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.2), 0 4px 12px rgba(0,21,48,0.25);
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.satin-button-primary:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.3), 0 6px 20px rgba(0,21,48,0.3);
}
.satin-button-white {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,1), 0 4px 12px rgba(0,0,0,0.05);
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.satin-button-white:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 2px rgba(255,255,255,1), 0 6px 20px rgba(0,0,0,0.08);
}

/* Page background */
.bg-mesh-gradient {
  background-color: #f8f9fb;
  background-image:
    radial-gradient(at 0% 0%,   rgba(213,227,255,0.3) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(168,200,255,0.2) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(213,227,255,0.3) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(168,200,255,0.2) 0px, transparent 50%);
}

/* ── Article prose typography ──────────────────────────────── */
.prose h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 600; color: #001530; margin-top: 2.5rem; margin-bottom: 1rem; }
.prose h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; color: #001530; margin-top: 2rem; margin-bottom: 0.75rem; }
.prose h4 { font-size: 1.125rem; line-height: 1.625rem; font-weight: 600; color: #001530; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.prose p  { margin-bottom: 1.25rem; color: #43474f; line-height: 1.75; }
.prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1.25rem; }
.prose ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1.25rem; }
.prose ul li, .prose ol li { margin-bottom: 0.5rem; color: #43474f; line-height: 1.75; }
.prose strong { color: #191c1e; font-weight: 600; }
.prose blockquote { border-left: 4px solid #001530; padding-left: 1rem; margin: 1.5rem 0; font-style: italic; color: #43474f; }
.prose a { color: #001530; text-decoration: underline; }
.prose a:hover { color: #3e5f91; }