/* Custom styles for My Awesome App */

/* Basic body styling */
body {
    font-family: 'Inter', sans-serif; /* Example font, assume it's loaded via Google Fonts or similar */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #333; /* Default text color */
}

/* Scrollbar styling for better UX */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Focus outline for accessibility */
*:focus {
    outline: 2px solid #3b82f6; /* Tailwind blue-500 */
    outline-offset: 2px;
}

/* Utility for hidden elements that become visible on hover/focus */
.group:hover .group-hover\:block,
.group:focus-within .group-focus-within\:block {
    display: block;
}

/* Custom button styles if needed, complementing Tailwind's */
.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out;
}

.btn-secondary {
    @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out;
}

/* Basic animation for fade-in elements */
.fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive image styling */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Placeholder for custom form styling */
.form-input {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm;
}

/* General link styling */
a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* A simple card component base */
.card {
    @apply bg-white rounded-lg shadow-md p-6;
}

/* Additional utility classes */
.container {
    max-width: 1200px; /* Override Tailwind's default container max-width if needed */
}

/* Ensure sticky elements work correctly */
.sticky {
    position: sticky;
}

/* Simple text truncation */
.truncate-multiline {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* number of lines to show */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 移动端内容区防溢出（系统追加，请勿删除） */
@media (max-width: 768px) {
  .page-content img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }
  .page-content {
    overflow-x: hidden;
    max-width: 100%;
  }
  body {
    overflow-x: hidden;
  }
}