/* 
  Abastecer Ortopédico - Core Styles
  Optimized for Performance and Layout Stability
*/

:root {
    --primary: #b40001;
    --on-primary: #ffffff;
    --secondary: #ef4444;
    --background: #FDFDFD;
    --surface: #FDFDFD;
    --on-surface: #1C0000;
    --on-surface-variant: #573434;
    --surface-container: #F5E9E9;
    --surface-container-low: #FDFDFD;
    --surface-container-high: #EDD6D6;
}

@font-face {
    font-family: 'Kristen ITC';
    src: url('/ITCKRIST.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #FDFDFD;
    color: #1C0000;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Stability for Web Components */
top-navbar {
    display: block;
    height: 76px; /* Match: header top-5 (20px) + nav h-14 (56px) */
}

@media (max-width: 1024px) {
    top-navbar {
        height: 60px; /* Match: header top-3 (12px) + nav h-12 (48px) */
    }
}

/* Hero Section Stability */
#home {
    min-height: 80vh; /* Reserve space for Hero */
    margin-top: -76px;
    margin-bottom: 0; /* Removed for Desktop to tighten space */
}

@media (max-width: 1024px) {
    #home {
        margin-top: -60px;
        margin-bottom: 1rem; /* Very minimal for tablets */
    }
}

@media (max-width: 768px) {
    #home {
        min-height: 90vh;
    }
}

/* Fix for Short Viewports (Laptops with small height) */
@media (max-height: 750px) {
    #home > div {
        padding-top: 5rem !important; /* Reduce the compensatory padding */
        padding-bottom: 2rem !important;
    }
}

@media (max-height: 600px) {
    #home h1 {
        font-size: clamp(1.5rem, 6vh, 2.5rem) !important;
    }
    #home p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

btn-whatsapp, btn-expandable-phone {
    display: block;
    height: 50px;
    min-width: 145px;
}

@media (min-width: 1024px) {
    btn-whatsapp, btn-expandable-phone {
        height: 56px !important;
        min-width: 170px;
    }
}

/* Reveal Animations Stability - Hide by default in CSS to avoid flicker */
.reveal-item, .reveal-glass {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform, opacity;
}

.reveal-glass {
    transform: scale(0.95) translateY(20px);
}

.reveal-item.reveal-init, .reveal-glass.reveal-init {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.reveal-on-load {
    opacity: 0;
    will-change: transform, opacity;
    animation: revealOnLoad 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes revealOnLoad {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.on-load-delay-300 { animation-delay: 300ms; }
.on-load-delay-400 { animation-delay: 400ms; }
.on-load-delay-500 { animation-delay: 500ms; }
.on-load-delay-700 { animation-delay: 700ms; }
.on-load-delay-800 { animation-delay: 800ms; }

/* Section Title Stabilization */
.section-title {
    font-family: 'Figtree', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: var(--on-surface);
}

@media (min-width: 768px) {
    .section-title {
        font-size: 3.5rem;
        letter-spacing: -0.05em;
    }
}

/* Component Placeholders to avoid jumps */
#reviews-carousel {
    min-height: 280px;
    contain: layout style;
}

#faq-accordion, #cms-faq-accordion {
    min-height: 300px;
}

#cms-category-grid, #cms-product-grid {
    min-height: 400px;
    contain: layout style;
}

/* Hide Mobile Menu by Default */
#mobile-menu {
    opacity: 0;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translateY(-20px);
}

#mobile-menu.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.mobile-link {
    opacity: 0;
    transform: translateY(10px);
}

#mobile-menu.active .mobile-link {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}