/* style.css - Custom Styles for Online Business Ideas Website (Copy 2 - Deep Purple/Magenta Theme) */

/* Base styles for the Inter font and general body styling */
body {
    font-family: 'Inter', sans-serif;
    background-color: #fdf2f8; /* bg-pink-50 (very light pink/off-white) */
    color: #1f2937; /* text-gray-900 (darker text for contrast) */
}

/* Basic styling for links to ensure good readability */
a {
    color: #a21caf; /* text-fuchsia-700 (deep magenta) */
    transition-property: color;
    transition-duration: 200ms; /* transition-colors duration-200 */
}
a:hover {
    color: #86198f; /* hover:text-fuchsia-800 */
}

/* Styling for headings - now using Poppins */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif; /* Applied Poppins font */
    font-weight: 700; /* font-bold */
    color: #111827; /* text-gray-900 */
    margin-bottom: 1rem; /* mb-4 */
}

/* Styling for paragraphs */
p {
    margin-bottom: 1rem; /* mb-4 */
    line-height: 1.625; /* leading-relaxed */
}

/* Styling for buttons */
.btn-primary {
    display: inline-block; /* inline-block */
    background-color: #a21caf; /* bg-fuchsia-700 */
    color: #ffffff; /* text-white */
    padding: 0.75rem 1.5rem; /* px-6 py-3 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    transition-property: background-color, transform; /* Added transform for subtle hover effect */
    transition-duration: 200ms; /* transition-colors duration-200 */
    text-align: center; /* Ensure text is centered */
    cursor: pointer; /* Indicate it's clickable */
    border: none; /* Remove default button border */
}
.btn-primary:hover {
    background-color: #86198f; /* hover:bg-fuchsia-800 */
    transform: translateY(-2px); /* Subtle lift on hover */
}

/* Styling for card-like elements */
.card {
    background-color: #ffffff; /* bg-white */
    padding: 1.5rem; /* p-6 */
    border-radius: 0.75rem; /* rounded-xl - slightly more rounded */
    box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06); /* Slightly more pronounced shadow */
    border: 1px solid #fbcfe8; /* border border-pink-200 */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Added transition for hover */
}
.card:hover {
    transform: translateY(-3px); /* Subtle lift on hover */
    box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.15), 0 3px 6px -2px rgba(0, 0, 0, 0.08); /* Enhanced shadow on hover */
}

/* Responsive image styling */
img {
    max-width: 100%; /* max-w-full */
    height: auto; /* h-auto */
    border-radius: 0.5rem; /* rounded-lg */
}

/* Fix for dropdown menu hover - ensure the dropdown appears immediately */
.group .group-hover\:block {
    margin-top: 0; /* Remove any gap */
    top: 100%; /* Position right below the parent */
}
/* Ensure dropdown is wide enough and doesn't get cut off */
.group ul {
    min-width: max-content; /* Ensure content fits */
}

/* Specific styles for the random tip banner */
.bg-yellow-50 { background-color: #fefce8; } /* Lighter yellow */
.border-yellow-200 { border-color: #fde68a; }
.text-yellow-800 { color: #854d09; }

/* Specific styles for the newsletter signup card */
.bg-blue-50 { background-color: #fdf2f8; } /* Light pink for newsletter */
.border-blue-200 { border-color: #fbcfe8; }
.text-blue-800 { color: #a21caf; } /* Matching main theme color */

/* Specific styles for the banner ad placeholder */
.bg-gray-200 { background-color: #e2e8f0; } /* Consistent gray */
.text-gray-600 { color: #4a5568; }

/* Specific styles for advertisement packages (adjusting to new palette) */
.bg-green-50 { background-color: #fdf2f8; } /* Light pink */
.border-green-200 { border-color: #fbcfe8; }
.text-green-800 { color: #a21caf; } /* Matching main theme color */

/* Article card SVG background colors (adjusting to new palette/contrast) */
.bg-green-500 { background-color: #8b5cf6; } /* Violet */
.bg-blue-500 { background-color: #6366f1; } /* Indigo */
.bg-purple-500 { background-color: #a21caf; } /* Fuchsia */
.bg-orange-500 { background-color: #f43f5e; } /* Rose */
.bg-yellow-500 { background-color: #eab308; } /* Amber */
.bg-teal-500 { background-color: #0d9488; } /* Teal */
.bg-red-500 { background-color: #dc2626; } /* Red */
.bg-gray-700 { background-color: #374151; } /* Dark Gray */
.bg-gray-500 { background-color: #6b7280; } /* Medium Gray */
.bg-blue-700 { background-color: #4f46e5; } /* Darker Indigo */
.bg-indigo-500 { background-color: #a21caf; } /* Fuchsia */
.bg-pink-500 { background-color: #db2777; } /* Deeper Pink */