/*
Theme Name: Sichelero
Theme URI: https://sichelero.com.br
Author: Sichelero Máquinas
Author URI: https://sichelero.com.br
Description: Tema profissional Sichelero — Tecnologia nacional que transforma sua produção em lucro.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
License URI: https://sichelero.com.br
Text Domain: sichelero
Tags: custom-background, custom-logo, full-width-template, theme-options, responsive-layout
*/

/* ============================================================
   DESIGN TOKENS — Sichelero Brand System
   ============================================================ */

:root {
    /* Brand Color Design Tokens */
    --color-brand-dark: #193D1D;
    /* Celtic / Dark Green (Main text / dark backgrounds) */
    --color-brand-primary: #39693B;
    /* Primary Green (Main brand color / CTAs) */
    --color-brand-accent: #87E681;
    /* Pastel Green (Highlights / badges / accents) */
    --color-brand-accent-hover: #7BE074;
    /* Pastel Green Hover (Highlights / badges hover) */
    --color-brand-light: #D5E8CF;
    /* Secondary Container (Soft backgrounds / icon boxes) */
    --color-brand-bg: #FCFDF9;
    /* Loafer / Main Bg (App/Page background) */
    --color-brand-surface: #FEFDFE;
    /* Prim / Surface (Cards / header backgrounds) */
    --color-brand-offwhite: #F8F4E3;
    /* Quarter Spanish White (Hero detail backgrounds) */
    --color-brand-graytext: #526350;
    /* Secondary text (Body text / descriptions) */
    --color-brand-border: #C2C9BD;
    /* Outline variant (Borders / dividers) */
    --color-brand-alt: rgb(235, 255, 204);
    /* Alternative Green Background */
    --color-brand-scrim: rgba(0, 0, 0, 0.6);
    /* Image Scrim Overlay */

    /* RGB values for opacity support in Tailwind */
    --color-brand-dark-rgb: 25, 61, 29;
    --color-brand-scrim-rgb: 0, 0, 0;
    --color-brand-primary-rgb: 57, 105, 59;
    --color-brand-accent-rgb: 135, 230, 129;
    --color-brand-accent-hover-rgb: 123, 224, 116;
    --color-brand-light-rgb: 213, 232, 207;
    --color-brand-bg-rgb: 252, 253, 249;
    --color-brand-surface-rgb: 254, 253, 254;
    --color-brand-offwhite-rgb: 248, 244, 227;
    --color-brand-graytext-rgb: 82, 99, 80;
    --color-brand-border-rgb: 194, 201, 189;
    --color-brand-alt-rgb: 235, 255, 204;
}

/* ============================================================
   TAILWIND LAYER UTILITIES
   ============================================================ */

@layer utilities {
    .hide-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .hide-scrollbar::-webkit-scrollbar {
        display: none;
    }
}

/* ============================================================
   HEADER — Scroll State
   ============================================================ */

#main-header.scrolled {
    background-color: rgba(var(--color-brand-surface-rgb), 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(var(--color-brand-border-rgb), 0.3);
    box-shadow: 0 2px 4px -1px rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.05);
}

#main-header.scrolled nav {
    color: var(--color-brand-graytext) !important;
}

#main-header.scrolled nav a:hover,
#main-header.scrolled nav a.text-brand-accent {
    color: var(--color-brand-dark) !important;
}

#main-header.scrolled .logotype,
#main-header.scrolled #mobile-menu-btn {
    color: var(--color-brand-dark) !important;
}

/* ============================================================
   CAROUSEL — Scroll Snap (touch devices only)
   ============================================================ */

@media (hover: none) {
    #machines-carousel {
        scroll-snap-type: x mandatory;
    }

    #machines-carousel > div {
        scroll-snap-align: start;
    }
}

/* ============================================================
   CAROUSEL — Bleed Utility (Ultrawide Screens)
   ============================================================ */

.carousel-bleed {
    padding-left: 1rem;
    padding-right: 1rem;
    scroll-padding-left: 1rem;
}

@media (min-width: 768px) {
    .carousel-bleed {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
        scroll-padding-left: 2.5rem;
    }
}

@media (min-width: 1680px) {
    .carousel-bleed {
        padding-left: calc(50vw - 760px);
        padding-right: calc(50vw - 760px);
        scroll-padding-left: calc(50vw - 760px);
    }
}

@media (min-width: 2560px) {
    .carousel-bleed {
        padding-left: 0 !important;
        padding-right: 0 !important;
        justify-content: center;
        overflow-x: hidden !important;
    }
}

/* ============================================================
   TESTIMONIAL CAROUSEL
   ============================================================ */

.testimonial-card {
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    filter: blur(4px) grayscale(40%);
    transform: scale(0.9);
    pointer-events: none;
    z-index: 10;
}

@media (min-width: 1024px) {
    .testimonial-card {
        margin-left: -60px;
        margin-right: -60px;
        opacity: 0.4;
    }
}

.testimonial-card.active {
    opacity: 1;
    filter: none;
    transform: scale(1);
    pointer-events: auto;
    z-index: 30;
}

.testimonial-card.prev,
.testimonial-card.next {
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

@media (min-width: 1024px) {
    .testimonial-card.prev {
        opacity: 0.5;
        filter: blur(3px) grayscale(20%);
        transform: scale(0.9);
        pointer-events: auto;
        z-index: 20;
    }

    .testimonial-card.next {
        opacity: 0.5;
        filter: blur(3px) grayscale(20%);
        transform: scale(0.9);
        pointer-events: auto;
        z-index: 20;
    }
}

@media (min-width: 1024px) {
    .testimonial-card.prev {
        transform: scale(0.9);
    }

    .testimonial-card.next {
        transform: scale(0.9);
    }
}

/* ============================================================
   ARCH LOGO BUTTONS (Testimonial Navigation)
   ============================================================ */

.arch-logo-btn {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.arch-logo-btn span {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.arch-logo-btn.active span {
    background-color: var(--color-brand-primary) !important;
    transform: scale(1.6);
    box-shadow: 0 0 0 6px rgba(var(--color-brand-primary-rgb), 0.2);
}

.arch-logo-btn.active-mobile span {
    background-color: var(--color-brand-primary) !important;
    transform: scale(1.6);
    box-shadow: 0 0 0 6px rgba(var(--color-brand-primary-rgb), 0.2);
}