/*
Theme Name: Ilton montagem de móveis
Author: Stefany Oliveira
Author URI: https://desenvolvedoraweb.com.br
Description: Tema WordPress para Ilton montagem de móveis - Montador de Móveis Profissional no Rio de Janeiro. Layout moderno e responsivo.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: montagem-pro
Tags: one-column, custom-menu, featured-images, translation-ready, custom-colors, custom-header, custom-logo, custom-background, threaded-comments, full-width-template, sticky-post, theme-options
*/

/* Estilos do tema serão adicionados aqui ou via Tailwind CSS */

/* Cor personalizada para bg-blue-600 */
.bg-blue-600 {
    background-color: rgb(50, 73, 90) !important;
}

/* Hover state para bg-blue-600 */
.hover\:bg-blue-700:hover,
.bg-blue-600:hover {
    background-color: rgb(40, 58, 72) !important;
}

/* Header Fixo com Background Personalizado */
header.fixed {
    background-color: #f4f3ef !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
header .custom-logo-link {
    display: flex;
    align-items: center;
    height: 40px;
}

header .custom-logo {
    max-height: 40px;
    width: auto;
    height: auto;
}

/* Carrossel da Galeria */
.gallery-carousel {
    position: relative;
    overflow: hidden;
    padding: 0 50px;
}

.gallery-track {
    display: flex;
    will-change: transform;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-slide {
    transition: transform 0.3s ease;
    padding: 0 0.25rem;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Mobile: slide ocupa 100% da largura visível, uma imagem por vez */
@media (max-width: 768px) {
    .gallery-slide {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding: 0 4px;
    }
}

.gallery-prev,
.gallery-next {
    opacity: 0.8;
}

.gallery-prev:hover,
.gallery-next:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

.gallery-dots .dot {
    cursor: pointer;
    transition: all 0.3s ease;
}

.gallery-dots .dot:hover {
    background-color: #2563eb !important;
}

/* Responsivo - Ajustar padding do carrossel em mobile */
@media (max-width: 640px) {
    .gallery-carousel {
        padding: 0 40px;
    }
    
    .gallery-prev,
    .gallery-next {
        padding: 8px;
    }
}

/* Carrossel de Testimonials */
.testimonial-carousel {
    position: relative;
    overflow: hidden;
    padding: 0 50px;
}

.testimonial-track {
    display: flex;
    will-change: transform;
    transition: transform 0.6s ease-in-out;
}

.testimonial-slide {
    transition: transform 0.3s ease;
}

.testimonial-prev,
.testimonial-next {
    opacity: 0.8;
}

.testimonial-prev:hover,
.testimonial-next:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

.testimonial-dots .dot {
    cursor: pointer;
    transition: all 0.3s ease;
}

.testimonial-dots .dot:hover {
    background-color: #2563eb !important;
}

.testimonial-dots .dot-active,
.gallery-dots .dot-active {
    background-color: rgb(50, 73, 90) !important;
}

/* Responsivo - Ajustar padding do carrossel de testimonials em mobile */
@media (max-width: 640px) {
    .testimonial-carousel {
        padding: 0 40px;
    }
    
    .testimonial-prev,
    .testimonial-next {
        padding: 8px;
    }
}

/* Botão WhatsApp Flutuante - Fixo no canto inferior direito */
a.whatsapp-float {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 9999;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    background-color: #22c55e;
    color: #ffffff;
    text-decoration: none;
}

a.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

a.whatsapp-float svg {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

/* Notificações do formulário de contato */
.contact-notification {
    font-size: 0.9375rem;
    line-height: 1.5;
}
.contact-notification-success {
    background-color: rgba(34, 197, 94, 0.15);
    border-color: rgb(34, 197, 94);
    color: rgb(187, 247, 208);
}
.contact-notification-success .contact-notification-icon {
    color: rgb(34, 197, 94);
}
.contact-notification-error {
    background-color: rgba(234, 179, 8, 0.15);
    border-color: rgb(234, 179, 8);
    color: rgb(254, 249, 195);
}
.contact-notification-error .contact-notification-icon {
    color: rgb(234, 179, 8);
}

/* ===== Efeitos suaves ao dar scroll (scroll reveal) ===== */
.scroll-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-reveal--visible {
    opacity: 1;
    transform: translateY(0);
}

/* Pequenos atrasos em sequência para cards/listas */
.scroll-reveal--delay-1 { transition-delay: 0.1s; }
.scroll-reveal--delay-2 { transition-delay: 0.2s; }
.scroll-reveal--delay-3 { transition-delay: 0.3s; }
.scroll-reveal--delay-4 { transition-delay: 0.4s; }
.scroll-reveal--delay-5 { transition-delay: 0.5s; }
.scroll-reveal--delay-6 { transition-delay: 0.6s; }

/* Variante mais sutil (só fade) para textos grandes */
.scroll-reveal-fade {
    opacity: 0;
    transition: opacity 0.7s ease-out;
}
.scroll-reveal-fade.scroll-reveal--visible {
    opacity: 1;
}