.work-sans {
    font-family: 'Work Sans', sans-serif;
}

/*--------*/
/* header */
/*--------*/

/* 基礎樣式 (取代 Tailwind 的 absolute z-50 bg-white shadow-lg border... 等) */
.dropdown-submenu {
    position: absolute;
    z-index: 50;
    background-color: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    padding-top: 0.5rem; /* py-2 */
    padding-bottom: 0.5rem; /* py-2 */
    width: 12rem; /* w-48 */
    border: 1px solid #e5e7eb; /* border border-gray-100 */
    margin-top: 0; /* mt-0 */
    
    /* 動畫過渡 */
    transition: all 0.3s ease-in-out;
}

/* 隱藏狀態 (預設狀態) */
.dropdown-submenu-hidden {
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px); /* 相當於 translate-y-2 */
}

/* 顯示狀態 (JS 會切換到這個狀態) */
.dropdown-submenu-visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}
        
#menu-toggle:checked + #menu {
    display: block;
}


.hover\:grow {
    transition: all 0.3s;
    transform: scale(1);
}

.hover\:grow:hover {
    transform: scale(1.02);
}


/*--------*/
/* carousel */
/*--------*/
.carousel-open:checked + .carousel-item {
    position: static;
    opacity: 100;
}

.carousel-item {
    -webkit-transition: opacity 0.6s ease-out;
    transition: opacity 0.6s ease-out;
}

#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
    display: block;
}

.carousel-indicators {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 2%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
}

#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
    color: #000;
    /*Set to match the Tailwind colour you want the active one to be */
}