/* ===== CoffitoKitchen Warm Theme ===== */

/* Override root variables with warm coffee theme */
:root {
    /* Warm color palette inspired by CoffitoKitchen */
    --coffito-bg: #f8f7f4;
    --coffito-text: #4a3728;
    --coffito-text-secondary: #6b6b6b;
    --coffito-olive: #808000;
    --coffito-accent: #d4a574;
    --coffito-accent-dark: #b8885a;
    --coffito-cream: #f5e6d3;
    --coffito-latte: #e8d4b8;
    --coffito-wood: #8b6f47;
    --coffito-border: #d8d8d8;
    --coffito-shadow: rgba(74, 55, 40, 0.08);
    --coffito-shadow-lg: rgba(74, 55, 40, 0.15);

    /* Fonts */
    --font-serif: 'Playfair Display', 'Cormorant Garamond', serif;
    --font-sans: 'Montserrat', 'Inter', sans-serif;
}

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

/* Warm background with subtle texture */
body {
    background-color: var(--coffito-bg);
    background-image:
        linear-gradient(135deg, rgba(245, 230, 211, 0.3) 0%, rgba(232, 212, 184, 0.2) 100%),
        repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(212, 165, 116, 0.02) 2px, rgba(212, 165, 116, 0.02) 4px);
    color: var(--coffito-text);
}

/* Warm header styling with animated background */
.project-header {
    background: url('/pictures/8 Бит.gif') center/cover no-repeat, linear-gradient(135deg, var(--coffito-cream) 0%, var(--coffito-latte) 100%);
    border-bottom: 2px solid var(--coffito-accent);
    box-shadow: 0 4px 20px var(--coffito-shadow-lg);
    position: relative;
}

/* Затемняющий оверлей для читаемости текста */
.project-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 250, 240, 0.65);
    z-index: 0;
}

/* Контент поверх оверлея */
.project-header .container {
    position: relative;
    z-index: 1;
}

/* Back link with warm hover */
.back-link {
    color: var(--coffito-wood);
    transition: all 0.3s ease;
}

.back-link:hover {
    color: var(--coffito-accent-dark);
    transform: translateX(-4px);
}

/* Hero title with serif font */
.project-hero-title {
    font-family: var(--font-serif);
    color: var(--coffito-text);
    text-shadow:
        2px 2px 4px rgba(255, 255, 255, 0.8),
        -1px -1px 2px rgba(255, 255, 255, 0.6),
        0 0 20px rgba(255, 255, 255, 0.5);
}

/* Hero description - оливковый цвет */
.project-hero-desc {
    color: var(--coffito-olive) !important;
}

/* Hero stats - коричневый цвет без свечения */
.hero-stat-value {
    color: var(--coffito-text) !important;
    text-shadow: none !important;
}

/* Category badge */
.project-category {
    background: rgba(212, 165, 116, 0.2);
    color: var(--coffito-wood);
    border: 1px solid var(--coffito-accent);
}

/* Section titles */
.section-title {
    font-family: var(--font-serif);
    color: var(--coffito-text);
    position: relative;
    padding-bottom: 16px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--coffito-accent), transparent);
    border-radius: 2px;
}

/* Feature cards with warm shadows */
.feature-card,
.result-card {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--coffito-border);
    box-shadow: 0 4px 16px var(--coffito-shadow);
    transition: all 0.3s ease;
}

.feature-card:hover,
.result-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px var(--coffito-shadow-lg);
    border-color: var(--coffito-accent);
}

/* Force text color override for Firefox and all browsers */
.feature-card p,
.result-card p,
.card-content p,
.analytics-item p,
.analytics-item li,
.analytics-item ul li,
.problem-box li,
.solution-box li,
.project-hero-desc,
.hero-stat-label,
.section-desc,
.step-content p,
.comparison-theirs,
.comparison-theirs-header,
.comparison-side.theirs .side-value,
.project-cta p {
    color: var(--coffito-text-secondary) !important;
}

.feature-card h3,
.result-card h3,
.card-content h3 {
    color: var(--coffito-text) !important;
}

/* Feature icons with warm gradient */
.feature-icon,
.result-icon {
    background: linear-gradient(135deg, var(--coffito-accent) 0%, var(--coffito-accent-dark) 100%);
    box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3);
}

/* Workflow steps with coffee theme */
.workflow-step {
    background: rgba(255, 255, 255, 0.9);
    border-left: 4px solid var(--coffito-accent);
}

.step-number {
    background: linear-gradient(135deg, var(--coffito-accent) 0%, var(--coffito-accent-dark) 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3);
}

/* Analytics items */
.analytics-item {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--coffito-border);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.3s ease;
}

.analytics-item:hover {
    background: white;
    border-color: var(--coffito-accent);
    box-shadow: 0 4px 16px var(--coffito-shadow);
}

.analytics-item strong {
    color: var(--coffito-wood) !important;
}

/* Comparison table - warm styling */
.comparison-ours-header {
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.15), rgba(212, 165, 116, 0.05));
    color: var(--coffito-wood);
    border-left: 3px solid var(--coffito-accent);
}

.comparison-ours {
    color: var(--coffito-wood);
    font-weight: 600;
    background: rgba(212, 165, 116, 0.05);
}

.comparison-side.ours {
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.15), rgba(212, 165, 116, 0.05));
    border: 1px solid rgba(212, 165, 116, 0.3);
}

.comparison-side.ours .side-value {
    color: var(--coffito-wood);
}

/* VS divider with accent */
.vs-divider {
    color: var(--coffito-accent-dark);
}

/* Tech stack badges */
.tech-stack {
    gap: 12px;
}

.tech-badge {
    background: rgba(212, 165, 116, 0.1);
    color: var(--coffito-wood);
    border: 1px solid var(--coffito-accent);
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.tech-badge:hover {
    background: var(--coffito-accent);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3);
}

/* Device frames - warm accents */
.device-iphone,
.device-android,
.device-tablet,
.device-browser {
    box-shadow: 0 8px 32px var(--coffito-shadow-lg);
}

/* Override for static videos - no gallery, so use cover to fill frame without black bars */
.device-content video {
    object-fit: cover !important;
}

/* Contact section */
.contact-methods {
    gap: 16px;
}

.contact-card {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid var(--coffito-border);
    transition: all 0.3s ease;
}

.contact-card:hover {
    border-color: var(--coffito-accent);
    box-shadow: 0 8px 24px var(--coffito-shadow-lg);
    transform: translateY(-4px);
}

.contact-icon {
    background: linear-gradient(135deg, var(--coffito-accent) 0%, var(--coffito-accent-dark) 100%);
}

/* Project section backgrounds */
.project-section {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 60px 0;
    margin-bottom: 40px;
    box-shadow: 0 2px 16px rgba(74, 55, 40, 0.04);
}

/* Buttons with coffee theme */
.btn,
.btn-primary {
    background: linear-gradient(135deg, var(--coffito-accent) 0%, var(--coffito-accent-dark) 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3);
    transition: all 0.3s ease;
}

.btn:hover,
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 165, 116, 0.4);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--coffito-bg);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--coffito-accent), var(--coffito-accent-dark));
    border-radius: 6px;
    border: 2px solid var(--coffito-bg);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--coffito-wood);
}

/* Selection color */
::selection {
    background: var(--coffito-accent);
    color: white;
}

/* Warm shadow for cards on hover */
@keyframes warmGlow {
    0%, 100% {
        box-shadow: 0 4px 16px var(--coffito-shadow);
    }
    50% {
        box-shadow: 0 8px 24px rgba(212, 165, 116, 0.2);
    }
}

/* Floating Navigation - Warm Theme */
.floating-nav {
    background: rgba(248, 247, 244, 0.5) !important;
    border: 1px solid rgba(212, 165, 116, 0.3) !important;
    box-shadow:
        0 8px 32px rgba(74, 55, 40, 0.15),
        0 2px 8px rgba(74, 55, 40, 0.08),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 0 rgba(212, 165, 116, 0.2) !important;
    backdrop-filter: blur(32px) saturate(200%) brightness(1.05) !important;
    -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(1.05) !important;
}

.nav-blob {
    background: linear-gradient(135deg, var(--coffito-accent) 0%, var(--coffito-accent-dark) 100%) !important;
    box-shadow: 0 4px 12px rgba(212, 165, 116, 0.4) !important;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.nav-item {
    color: var(--coffito-text-secondary) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.nav-item:hover {
    color: var(--coffito-text) !important;
    background: rgba(212, 165, 116, 0.1) !important;
}

.nav-item.active {
    color: white !important;
    font-weight: 600 !important;
}