/* Custom CSS for SQT Spicules Website */

/* CSS-Only Logo Styles - Simple SQT Text */
.css-logo {
    @apply inline-block;
    font-family: 'Arial Black', 'Helvetica', sans-serif;
    font-size: 28px;
    font-weight: 900;
    color: #1e40af;
    text-decoration: none;
    letter-spacing: -1px;
    transition: all 0.3s ease;
    text-shadow: 0 2px 4px rgba(30, 64, 175, 0.1);
}

.css-logo:hover {
    color: #2563eb;
    transform: translateY(-1px);
    text-shadow: 0 3px 6px rgba(30, 64, 175, 0.2);
    text-decoration: none;
}

/* Footer logo variant */
.css-logo.footer-logo {
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.css-logo.footer-logo:hover {
    color: #dbeafe;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .css-logo {
        font-size: 24px;
        letter-spacing: -0.5px;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .css-logo {
        font-size: 20px;
        letter-spacing: 0px;
    }
}

/* Navigation Styles */
.nav-link {
    @apply text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200;
}

.nav-link.active {
    @apply text-primary-600 font-semibold;
}

.mobile-nav-link {
    @apply block text-gray-700 hover:text-primary-600 hover:bg-primary-50 px-3 py-2 rounded-md text-base font-medium transition-colors duration-200;
}

.mobile-nav-link.active {
    @apply text-primary-600 bg-primary-50 font-semibold;
}

/* Button Styles */
.btn {
    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 shadow-md hover:shadow-lg;
}

.btn-secondary {
    @apply bg-secondary-600 text-white hover:bg-secondary-700 focus:ring-secondary-500 shadow-md hover:shadow-lg;
}

.btn-outline {
    @apply border-primary-300 text-primary-700 hover:bg-primary-50 focus:ring-primary-500;
}

.btn-lg {
    @apply px-6 py-3 text-base;
}

/* Typography */
.heading-1 {
    @apply text-4xl lg:text-5xl font-bold text-gray-900 leading-tight;
}

.heading-2 {
    @apply text-3xl lg:text-4xl font-bold text-gray-900 leading-tight;
}

.heading-3 {
    @apply text-2xl lg:text-3xl font-semibold text-gray-900 leading-tight;
}

.text-lead {
    @apply text-xl text-gray-600 leading-relaxed;
}

/* Card Styles */
.card {
    @apply bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden;
}

.card-header {
    @apply px-6 py-4 border-b border-gray-200;
}

.card-body {
    @apply px-6 py-4;
}

.card-footer {
    @apply px-6 py-4 bg-gray-50 border-t border-gray-200;
}

/* Hero Section */
.hero-gradient {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #0ea5e9 100%);
}

.hero-overlay {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.9) 0%, rgba(59, 130, 246, 0.8) 50%, rgba(14, 165, 233, 0.7) 100%);
}

/* Feature Cards */
.feature-card {
    @apply card hover:scale-105 transform transition-all duration-300;
}

.feature-icon {
    @apply w-12 h-12 mx-auto mb-4 p-3 bg-primary-100 text-primary-600 rounded-full;
}

/* Product Cards */
.product-card {
    @apply card group cursor-pointer;
}

.product-image {
    @apply w-full h-48 object-cover transition-transform duration-300 group-hover:scale-105;
}

/* Section Spacing */
.section-padding {
    @apply py-16 lg:py-24;
}

.section-padding-sm {
    @apply py-12 lg:py-16;
}

/* Container */
.container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

@keyframes pulse-subtle {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

.pulse-subtle {
    animation: pulse-subtle 2s infinite;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Skip Link for 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: 0;
}

.focus\:not-sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 0.5rem 1rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Language-specific typography adjustments */
[lang="ko"] {
    line-height: 1.8;
    word-break: keep-all;
}

[lang="ja"] {
    line-height: 1.8;
    word-break: keep-all;
}

[lang="zh"] {
    line-height: 1.7;
}

[lang="en"] {
    line-height: 1.6;
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .card {
        box-shadow: none !important;
        border: 1px solid #e5e7eb;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .nav-link {
        @apply border border-transparent hover:border-primary-600;
    }
    
    .btn-primary {
        @apply border-2 border-primary-800;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}