/* Stix Theme Main Styles */

/* Base styles */
body {
    @apply font-sans text-gray-900 leading-relaxed;
}

/* Header styles */
.site-header {
    @apply bg-white shadow-sm border-b border-gray-200;
}

.main-navigation {
    @apply container mx-auto px-4 py-4;
}

.nav-menu a {
    @apply text-gray-700 hover:text-stix-blue transition-colors duration-200 font-medium;
}

/* Content styles */
.site-content {
    @apply min-h-screen;
}

.site-main {
    @apply container mx-auto px-4 py-12;
}

/* Entry styles */
.entry-title {
    @apply text-stix-dark mb-6 text-3xl md:text-4xl font-bold;
}

/* Default entry content - applies to pages and other content */
.entry-content {
    @apply prose prose-lg;
    width: 100%;
}

/* Full width for pages */
.page .entry-content {
    @apply max-w-none;
    width: 100%;
    max-width: none !important;
}

/* Single post specific styles - force constrained width */
.single .entry-content {
    max-width: 768px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    width: 100% !important;
}

.single .entry-content p {
    @apply text-gray-800 leading-relaxed mb-6;
}

.single .entry-content h1,
.single .entry-content h2,
.single .entry-content h3,
.single .entry-content h4,
.single .entry-content h5,
.single .entry-content h6 {
    @apply text-stix-dark font-bold mt-8 mb-4;
}

.single .entry-content h2 {
    @apply text-2xl md:text-3xl;
}

.single .entry-content h3 {
    @apply text-xl md:text-2xl;
}

.single .entry-content a {
    @apply text-stix-blue hover:underline font-medium;
}

/* Media elements in single posts */
.single .entry-content img {
    @apply rounded-md shadow-md my-6 max-w-full mx-auto;
}

.single .entry-content figure {
    @apply my-8;
}

.single .entry-content figcaption {
    @apply text-center text-sm text-gray-600 mt-2;
}

/* Lists in single posts */
.single .entry-content ul,
.single .entry-content ol {
    @apply my-6 pl-6;
}

.single .entry-content li {
    @apply mb-2;
}

/* Blockquotes in single posts */
.single .entry-content blockquote {
    @apply pl-6 py-2 border-l-4 border-stix-blue bg-blue-50 italic my-8 rounded-r;
}

/* Tables in single posts */
.single .entry-content table {
    @apply w-full my-8 border-collapse;
}

.single .entry-content th {
    @apply bg-gray-100 p-3 border border-gray-300 font-semibold text-left;
}

.single .entry-content td {
    @apply p-3 border border-gray-300;
}

.entry-content p {
    @apply mb-6 text-gray-800 leading-relaxed;
}

.entry-content a {
    @apply text-stix-blue hover:underline font-medium;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    @apply text-stix-dark font-bold mt-8 mb-4;
}

.entry-content h2 {
    @apply text-2xl md:text-3xl;
}

.entry-content h3 {
    @apply text-xl md:text-2xl;
}

/* Enhanced media styling */
.entry-content img {
    @apply rounded-md shadow-md my-6 max-w-full mx-auto;
}

.entry-content figure {
    @apply my-8;
}

.entry-content figcaption {
    @apply text-center text-sm text-gray-600 mt-2;
}

/* Lists styling */
.entry-content ul,
.entry-content ol {
    @apply my-6;
}

.entry-content li {
    @apply mb-2;
}

/* Blockquote styling */
.entry-content blockquote {
    @apply pl-6 py-2 border-l-4 border-stix-blue bg-blue-50 italic my-8 rounded-r;
}

/* Table styling */
.entry-content table {
    @apply w-full my-8 border-collapse;
}

.entry-content th {
    @apply bg-gray-100 p-3 border border-gray-300 font-semibold text-left;
}

.entry-content td {
    @apply p-3 border border-gray-300;
}

/* Button styles */
.btn {
    @apply inline-block px-6 py-3 rounded-lg font-medium transition-all duration-200;
}

.btn-primary {
    @apply bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-8 py-4 rounded-xl font-semibold transition-all duration-300 hover:scale-105 transform shadow-lg hover:shadow-xl;
}

.btn-secondary {
    @apply bg-white text-gray-800 border border-gray-300 hover:bg-gray-50 hover:border-gray-400 transition-all duration-300;
}

/* SiteOrigin Panel styles */
.panel-grid {
    @apply w-full max-w-7xl mx-auto;
}

.panel-grid-cell {
    @apply px-4;
}

.so-panel {
    @apply mb-8;
}

/* Center SiteOrigin layout content */
.panel-layout {
    @apply max-w-7xl mx-auto px-4;
}

.siteorigin-panels-layout {
    @apply max-w-7xl mx-auto;
}

/* Cinema-specific styles */
.hero-section {
    @apply bg-gradient-to-r from-stix-blue to-blue-600 text-white py-20;
}

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

.feature-card {
    @apply bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow duration-200;
}

.pricing-card {
    @apply bg-white rounded-lg shadow-md p-8 border-2 border-transparent hover:border-stix-blue transition-all duration-200;
}

/* Campaign Component Styles */
.thumbnail-grid {
    @apply grid grid-cols-2 md:grid-cols-3 gap-4;
}

.thumbnail-item {
    @apply relative overflow-hidden rounded-lg cursor-pointer transform transition-all duration-300 hover:scale-105;
}

.thumbnail-item img {
    @apply w-full h-full object-cover;
}

.thumbnail-overlay {
    @apply absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-20 transition-all duration-300;
}

/* Quality Comparison Styles */
.quality-comparison {
    @apply grid grid-cols-1 md:grid-cols-2 gap-8;
}

.comparison-item {
    @apply relative overflow-hidden rounded-xl;
}

.comparison-badge {
    @apply absolute top-4 left-4 px-3 py-1 rounded-full text-sm font-semibold;
}

.badge-8k {
    @apply bg-green-500 text-white;
}

.badge-4k {
    @apply bg-yellow-500 text-black;
}

/* Equipment Gallery Styles */
.equipment-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

.equipment-item {
    @apply bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1;
}

.equipment-icon {
    @apply w-16 h-16 mx-auto mb-4 text-blue-600;
}

/* Workflow Styles */
.workflow-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6;
}

.workflow-step {
    @apply text-center p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300;
}

.workflow-icon {
    @apply w-16 h-16 mx-auto mb-4 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white text-2xl;
}

/* Address Lookup Styles */
.address-input-container {
    @apply relative;
}

.address-suggestions {
    @apply absolute top-full left-0 right-0 bg-white border border-gray-300 rounded-lg shadow-lg z-10 max-h-60 overflow-y-auto;
}

.address-suggestion {
    @apply px-4 py-3 hover:bg-gray-50 cursor-pointer border-b border-gray-100 last:border-b-0;
}

/* Animation Classes */
.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

.animate-slide-in-left {
    animation: slideInLeft 0.8s ease-out forwards;
}

.animate-slide-in-right {
    animation: slideInRight 0.8s ease-out forwards;
}

.animate-bounce-in {
    animation: bounceIn 0.8s ease-out forwards;
}

.animate-pulse-slow {
    animation: pulse 3s ease-in-out infinite;
}

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

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

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Video Background Styles */
.video-background {
    @apply absolute inset-0 w-full h-full object-cover;
}

.video-overlay {
    @apply absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent;
}

/* Interactive Elements */
.interactive-hover {
    @apply transition-all duration-300 hover:scale-105 hover:shadow-xl;
}

.glass-effect {
    @apply backdrop-blur-lg bg-white/10 border border-white/20;
}

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

.form-input:focus {
    @apply outline-none;
}

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

.form-error {
    @apply border-red-500 focus:ring-red-500;
}

/* Loading States */
.loading {
    @apply opacity-75 cursor-not-allowed;
}

.loading::after {
    content: '';
    @apply inline-block w-4 h-4 ml-2 border-2 border-white border-t-transparent rounded-full animate-spin;
}

/* Responsive utilities */
@media (max-width: 768px) {
    .container {
        @apply px-4;
    }
    
    .hero-section {
        @apply py-12;
    }
    
    .workflow-grid {
        @apply grid-cols-1 gap-4;
    }
    
    .equipment-grid {
        @apply grid-cols-1 gap-4;
    }
    
    .thumbnail-grid {
        @apply grid-cols-2 gap-2;
    }
}