/*
 * Porivasa.com - Main Stylesheet
 * Built with Tailwind CSS
 */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* Tailwind Directives */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom CSS Variables */
:root {
    /* Colors */
    --color-primary: #1E3A5F;
    --color-primary-light: #2B4F7A;
    --color-primary-dark: #152B47;
    --color-text: #334155;
    --color-text-light: #64748B;
    --color-accent: #D4A373;
    --color-accent-light: #E5C4A1;
    --color-bg: #FFFFFF;
    --color-bg-alt: #F8F9FA;
    --color-border: #E2E8F0;
    
    /* Academic Year Colors */
    --color-1st-year: #0D9488;
    --color-2nd-year: #3B82F6;
    --color-3rd-year: #8B5CF6;
    --color-4th-year: #F59E0B;
    --color-masters: #B45309;
    
    /* Typography */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
    
    /* Spacing */
    --container-max: 1280px;
    --header-height: 72px;
}

/* Base Styles */
@layer base {
    html {
        scroll-behavior: smooth;
    }
    
    body {
        font-family: var(--font-body);
        color: var(--color-text);
        background-color: var(--color-bg);
        line-height: 1.7;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-heading);
        font-weight: 600;
        line-height: 1.3;
        color: var(--color-primary);
    }
    
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    
    a {
        color: var(--color-primary);
        text-decoration: none;
        transition: color 0.2s ease;
    }
    
    a:hover {
        color: var(--color-accent);
    }
    
    ::selection {
        background-color: var(--color-accent);
        color: white;
    }
}

/* Component Styles */
@layer components {
    /* Container */
    .container {
        max-width: var(--container-max);
        margin: 0 auto;
        padding: 0 1rem;
    }
    
    /* Buttons */
    .btn {
        @apply inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition-all duration-200;
    }
    
    .btn-primary {
        background-color: var(--color-primary);
        color: white;
    }
    
    .btn-primary:hover {
        background-color: var(--color-primary-light);
        color: white;
        transform: translateY(-1px);
    }
    
    .btn-accent {
        background-color: var(--color-accent);
        color: white;
    }
    
    .btn-accent:hover {
        background-color: var(--color-accent-light);
        color: var(--color-primary);
    }
    
    .btn-outline {
        border: 2px solid var(--color-primary);
        color: var(--color-primary);
        background: transparent;
    }
    
    .btn-outline:hover {
        background-color: var(--color-primary);
        color: white;
    }
    
    /* Cards */
    .card {
        @apply bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden transition-all duration-300;
    }
    
    .card:hover {
        @apply shadow-lg;
        transform: translateY(-4px);
    }
    
    .card-body {
        @apply p-6;
    }
    
    /* Post Card */
    .post-card {
        @apply card;
    }
    
    .post-card .thumbnail {
        @apply aspect-video bg-gray-100 overflow-hidden;
    }
    
    .post-card .thumbnail img {
        @apply w-full h-full object-cover transition-transform duration-500;
    }
    
    .post-card:hover .thumbnail img {
        transform: scale(1.05);
    }
    
    .post-card .badge {
        @apply inline-block px-3 py-1 text-xs font-semibold rounded-full;
    }
    
    /* Year Cards */
    .year-card {
        @apply card cursor-pointer;
        border-left: 4px solid var(--color-primary);
    }
    
    .year-card.year-1st { border-left-color: var(--color-1st-year); }
    .year-card.year-2nd { border-left-color: var(--color-2nd-year); }
    .year-card.year-3rd { border-left-color: var(--color-3rd-year); }
    .year-card.year-4th { border-left-color: var(--color-4th-year); }
    .year-card.year-masters { border-left-color: var(--color-masters); }
    
    .year-card:hover {
        @apply shadow-xl;
    }
    
    .year-card .subjects-preview {
        @apply max-h-0 overflow-hidden transition-all duration-300;
    }
    
    .year-card:hover .subjects-preview {
        max-height: 200px;
    }
    
    /* Badges */
    .badge {
        @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
    }
    
    .badge-primary {
        background-color: var(--color-primary);
        color: white;
    }
    
    .badge-accent {
        background-color: var(--color-accent);
        color: white;
    }
    
    .badge-bangla {
        @apply bg-green-100 text-green-800;
    }
    
    .badge-1st { background-color: var(--color-1st-year); color: white; }
    .badge-2nd { background-color: var(--color-2nd-year); color: white; }
    .badge-3rd { background-color: var(--color-3rd-year); color: white; }
    .badge-4th { background-color: var(--color-4th-year); color: white; }
    .badge-masters { background-color: var(--color-masters); color: white; }
    
    /* Author Card */
    .author-pill {
        @apply inline-flex items-center px-4 py-2 bg-gray-100 rounded-full text-sm font-medium transition-all duration-200;
    }
    
    .author-pill:hover {
        @apply bg-gray-200 shadow-md;
        transform: translateY(-2px);
    }
    
    /* Notice Board */
    .notice-board {
        @apply border-l-4 border-amber-400 bg-amber-50 p-4 rounded-r-lg;
    }
    
    .notice-board.urgent {
        @apply border-red-500 bg-red-50;
    }
    
    /* Breadcrumb */
    .breadcrumb {
        @apply flex items-center flex-wrap gap-2 text-sm text-gray-600;
    }
    
    .breadcrumb-item a {
        @apply hover:text-primary hover:underline;
    }
    
    .breadcrumb-separator {
        @apply text-gray-400;
    }
    
    /* Search Bar */
    .search-bar {
        @apply relative w-full max-w-2xl mx-auto;
    }
    
    .search-bar input {
        @apply w-full px-6 py-4 text-lg border-2 border-gray-200 rounded-full shadow-lg;
        @apply focus:outline-none focus:border-primary focus:ring-4 focus:ring-primary/10;
    }
    
    .search-bar button {
        @apply absolute right-2 top-1/2 -translate-y-1/2 p-3 bg-primary text-white rounded-full;
        @apply hover:bg-primary-light transition-colors;
    }
    
    /* Mega Menu */
    .mega-menu {
        @apply absolute left-0 right-0 top-full bg-white shadow-xl border-t opacity-0 invisible;
        @apply transition-all duration-200;
    }
    
    .nav-item:hover .mega-menu {
        @apply opacity-100 visible;
    }
    
    /* Content Styles */
    .prose {
        @apply text-gray-700 leading-relaxed;
    }
    
    .prose h2 {
        @apply text-2xl font-bold text-primary mt-8 mb-4;
    }
    
    .prose h3 {
        @apply text-xl font-bold text-primary mt-6 mb-3;
    }
    
    .prose p {
        @apply mb-4;
    }
    
    .prose ul, .prose ol {
        @apply mb-4 pl-6;
    }
    
    .prose li {
        @apply mb-2;
    }
    
    .prose blockquote {
        @apply border-l-4 border-accent pl-4 italic text-gray-600 my-6;
    }
    
    .prose a {
        @apply text-primary underline hover:text-accent;
    }
    
    /* Comments */
    .comment {
        @apply border-l-2 border-gray-200 pl-4 py-4;
    }
    
    .comment-reply {
        @apply ml-8 mt-4;
    }
    
    /* Forms */
    .form-input {
        @apply w-full px-4 py-3 border border-gray-300 rounded-lg;
        @apply focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20;
    }
    
    .form-label {
        @apply block text-sm font-medium text-gray-700 mb-2;
    }
    
    /* Stats Counter */
    .stat-counter {
        @apply text-center;
    }
    
    .stat-counter .number {
        @apply text-4xl font-bold text-primary;
        font-family: var(--font-heading);
    }
    
    .stat-counter .label {
        @apply text-sm text-gray-600 mt-1;
    }
    
    /* Marquee Animation */
    .marquee {
        @apply overflow-hidden whitespace-nowrap;
    }
    
    .marquee-content {
        @apply inline-flex gap-4;
        animation: marquee 30s linear infinite;
    }
    
    .marquee:hover .marquee-content {
        animation-play-state: paused;
    }
    
    @keyframes marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
    
    /* Flash Messages */
    .flash-message {
        @apply fixed top-24 right-4 z-50 px-6 py-4 rounded-lg shadow-lg max-w-sm;
        animation: slideIn 0.3s ease-out;
    }
    
    .flash-success {
        @apply bg-green-500 text-white;
    }
    
    .flash-error {
        @apply bg-red-500 text-white;
    }
    
    @keyframes slideIn {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    /* Pagination */
    .pagination {
        @apply flex items-center justify-center gap-2 mt-8;
    }
    
    .pagination a, .pagination span {
        @apply px-4 py-2 rounded-lg border border-gray-300;
    }
    
    .pagination a:hover {
        @apply bg-gray-100;
    }
    
    .pagination .active {
        @apply bg-primary text-white border-primary;
    }
}

/* Utility Classes */
@layer utilities {
    .text-primary {
        color: var(--color-primary);
    }
    
    .text-accent {
        color: var(--color-accent);
    }
    
    .bg-primary {
        background-color: var(--color-primary);
    }
    
    .bg-accent {
        background-color: var(--color-accent);
    }
    
    .border-primary {
        border-color: var(--color-primary);
    }
    
    .font-heading {
        font-family: var(--font-heading);
    }
    
    .font-body {
        font-family: var(--font-body);
    }
    
    /* Aspect Ratios */
    .aspect-1-1 {
        aspect-ratio: 1 / 1;
    }
    
    /* Line Clamp */
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* Responsive Tweaks */
@media (max-width: 768px) {
    :root {
        --header-height: 64px;
    }
    
    h1 { font-size: 1.875rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    
    .container {
        padding: 0 0.75rem;
    }
}