/* KTNBS - Custom CSS Styles */

/* CSS Variables */
:root {
    --primary: #0066cc;
    --primary-dark: #0052a3;
    --secondary: #00cc66;
    --accent: #f3f4f6;
    --muted: #6b7280;
    --danger: #dc2626;
    --warning: #f59e0b;
    --success: #10b981;
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Prompt', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1 {
    @apply text-4xl md:text-5xl font-bold mb-4;
}

h2 {
    @apply text-3xl md:text-4xl font-bold mb-3;
}

h3 {
    @apply text-2xl md:text-3xl font-semibold mb-2;
}

h4 {
    @apply text-xl md:text-2xl font-semibold mb-2;
}

/* Animations */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in 0.6s ease-out;
}

@keyframes slide-in-right {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slide-in-right {
    animation: slide-in-right 0.6s ease-out;
}

@keyframes pulse-slow {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse-slow {
    animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Custom Utilities */
.text-gradient {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-gradient-primary {
    background: linear-gradient(135deg, var(--primary), #0052a3);
}

.bg-gradient-secondary {
    background: linear-gradient(135deg, var(--secondary), #00a352);
}

/* Card Styles */
.card {
    @apply bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow p-6;
}

.card-hover {
    @apply transform hover:-translate-y-1 transition-transform duration-300;
}

/* Button Styles */
.btn {
    @apply px-6 py-3 rounded-lg font-medium transition-all duration-300 inline-flex items-center gap-2;
}

.btn-primary {
    @apply bg-primary text-white hover:bg-primary-dark;
}

.btn-secondary {
    @apply bg-secondary text-white hover:opacity-90;
}

.btn-outline {
    @apply border-2 border-primary text-primary hover:bg-primary hover:text-white;
}

/* Form Styles */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
}

.form-error {
    @apply text-red-600 text-sm mt-1;
}

/* Section Styles */
.section {
    @apply py-16 md:py-20 lg:py-24;
}

.section-title {
    @apply text-3xl md:text-4xl font-bold text-center mb-4;
}

.section-subtitle {
    @apply text-lg md:text-xl text-muted text-center mb-12 max-w-3xl mx-auto;
}

/* Hero Section */
.hero {
    @apply relative min-h-[500px] md:min-h-[600px] lg:min-h-[700px] flex items-center justify-center;
}

.hero-overlay {
    @apply absolute inset-0 bg-black/40;
}

.hero-content {
    @apply relative z-10 text-center text-white max-w-4xl mx-auto px-4;
}

/* Grid Layouts */
.grid-products {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6;
}

.grid-blog {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8;
}

.grid-features {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8;
}

/* Badge Styles */
.badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
}

.badge-primary {
    @apply bg-primary/10 text-primary;
}

.badge-success {
    @apply bg-green-100 text-green-800;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-danger {
    @apply bg-red-100 text-red-800;
}

/* Loading Spinner */
.spinner {
    @apply inline-block w-8 h-8 border-4 border-gray-200 border-t-primary rounded-full animate-spin;
}

/* Responsive Image */
.img-responsive {
    @apply w-full h-auto object-cover;
}

/* Product Card */
.product-card {
    @apply bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1;
}

.product-card-image {
    @apply w-full h-40 object-cover;
}

.product-card-body {
    @apply p-4;
}

/* Blog Card */
.blog-card {
    @apply bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-shadow;
}

.blog-card-image {
    @apply w-full h-44 object-cover;
}

.blog-card-body {
    @apply p-6;
}

/* Testimonial */
.testimonial {
    @apply bg-white p-6 rounded-lg shadow-sm;
}

.testimonial-quote {
    @apply text-lg text-gray-700 mb-4 italic;
}

.testimonial-author {
    @apply flex items-center gap-3;
}

/* Breadcrumb */
.breadcrumb {
    @apply flex items-center gap-2 text-sm text-muted;
}

.breadcrumb-item {
    @apply flex items-center gap-2;
}

.breadcrumb-separator {
    @apply text-gray-400;
}

/* Table Styles */
.table {
    @apply w-full text-left border-collapse;
}

.table th {
    @apply bg-gray-100 px-4 py-3 font-semibold text-gray-700 border-b;
}

.table td {
    @apply px-4 py-3 border-b;
}

.table tr:hover {
    @apply bg-gray-50;
}

/* Dark Mode Support (for future) */
.dark {
    --primary: #3b82f6;
    --accent: #1f2937;
    --muted: #9ca3af;
}

.dark body {
    @apply bg-gray-900 text-gray-100;
}

.dark .card,
.dark .product-card,
.dark .blog-card {
    @apply bg-gray-800;
}

/* Print Styles */
@media print {
    nav,
    footer,
    .no-print {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
    }
    
    h1 {
        font-size: 24pt;
    }
    
    h2 {
        font-size: 20pt;
    }
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus Styles */
*:focus-visible {
    @apply outline-2 outline-offset-2 outline-primary;
}

/* Skip to Content Link */
.skip-link {
    @apply absolute -top-10 left-0 bg-primary text-white px-4 py-2 z-50;
}

.skip-link:focus {
    @apply top-0;
}