/* ===================================================
   KAMICKA — Base & Utilities
   Tailwind CDN handles the full design system.
   This file holds only states that require CSS cascade.
   =================================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

/* Hide scrollbar on carousel tracks and tab bar (Chrome/Safari) */
#specialties-carousel::-webkit-scrollbar,
#kamicka-carousel::-webkit-scrollbar,
#factory-facilities .overflow-x-auto::-webkit-scrollbar {
    display: none;
}

/* Navbar shadow on scroll (toggled by JS) */
#mainNavbar.scrolled {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

/* Active nav link */
#mainNavbar .nav-link.active {
    opacity: 0.75;
}

/* Scroll-to-top: hidden by default, shown when .visible is added by JS */
.scroll-to-top {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    background-color: #323d73;
    transform: translateY(-4px);
}

/* ===================================================
   Mega Menu — category sidebar active state
   =================================================== */
.mega-cat-btn .mega-cat-label {
    color: #5e5e5e;
}

.mega-cat-btn.active-cat {
    background-color: #fbfbfd;
    border: 1px solid rgba(61, 73, 136, 0.05) !important;
    border-radius: 16px;
}

.mega-cat-btn.active-cat .mega-cat-label {
    color: #3d4988;
}

.mega-cat-btn:not(.active-cat):hover {
    background-color: #fbfbfd;
}

/* Smooth panel swap */
.mega-cat-panel {
    animation: megaPanelIn 0.15s ease;
}

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

/* ===================================================
   Categories mega menu — link hover state
   =================================================== */
.cat-nav-label {
    color: #5e5e5e;
}

.cat-nav-link {
    border: 1px solid transparent;
}

.cat-nav-link:hover {
    background-color: #fbfbfd;
    border-color: rgba(61, 73, 136, 0.05);
}

.cat-nav-link:hover .cat-nav-label {
    color: #3d4988;
}

.cat-nav-link.active {
    background-color: #fbfbfd;
    border-color: rgba(61, 73, 136, 0.05);
}

.cat-nav-link.active .cat-nav-label {
    color: #3d4988;
}

/* ===================================================
   Accordion — smooth open / close animation
   max-height drives the height transition;
   display:block !important overrides Tailwind's
   .hidden so the element stays in flow for animation.

   padding-bottom is forced to 0 on the closed state
   because browsers render pb even when max-height:0,
   causing extra bottom spacing on inactive items.
   =================================================== */
.accordion-content {
    display: block !important;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding-bottom: 0 !important; /* prevent pb bleed-through on closed items */
    /* Closing: opacity fades first, then height + padding collapse */
    transition: max-height 0.36s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.18s ease,
                padding-bottom 0.36s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-item[data-open="true"] .accordion-content {
    opacity: 1;
    padding-bottom: 1rem !important; /* restore pb-4 when open */
    /* Opening: height expands, opacity + padding follow */
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease 0.07s,
                padding-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 1024px) {
    .accordion-item[data-open="true"] .accordion-content {
        padding-bottom: 18px !important; /* restore lg:pb-[18px] when open */
    }
}