/* 自定義樣式補充 Tailwind CSS */

/* 子導航鏈接樣式 */
.sub-nav-link {
    @apply px-3 py-1 rounded transition;
    @apply hover:bg-green-700;
}

.sub-nav-link.active {
    @apply bg-green-700 font-semibold;
}

/* 內容區域平滑滾動 */
html {
    scroll-behavior: smooth;
}

/* 內容區域顯示/隱藏動畫 */
.content-section {
    transition: opacity 0.3s ease-in-out;
}

.content-section.hidden {
    display: none;
}

/* 響應式字體大小 */
@media (max-width: 640px) {
    h1 {
        @apply text-xl;
    }
    
    h2 {
        @apply text-2xl;
    }
    
    h3 {
        @apply text-xl;
    }
}

/* 移動端按鈕調整 */
@media (max-width: 640px) {
    .container button {
        @apply text-xs px-3 py-1.5;
    }
}

/* 表格樣式（理事會名單） */
.board-list {
    @apply w-full;
}

.board-list-item {
    @apply py-2 border-b border-gray-200;
}

/* 頁腳響應式調整 */
@media (max-width: 1024px) {
    footer .lg\\:text-right {
        @apply text-left;
    }
    
    footer .lg\\:flex-row {
        @apply flex-col;
    }
    
    footer .lg\\:justify-end {
        @apply justify-start;
    }
}

/* Header 背景圖片樣式 */
.header-with-banner {
    position: relative;
    overflow: hidden;
    background-image: url('../images/banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 200px;
}

/* 添加半透明遮罩層，確保文字清晰可見 */
.header-with-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 0;
}

/* 確保 header 內容在背景圖之上 */
.header-with-banner > * {
    position: relative;
    z-index: 1;
}

/* Logo 圖片樣式 */
.logo-img {
    max-height: 100px;
    width: auto;
    height: auto;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}

/* 響應式 Logo 調整 */
@media (max-width: 640px) {
    .logo-img {
        max-height: 80px;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .logo-img {
        max-height: 100px;
    }
}

/* 列表樣式優化 */
ol.list-decimal {
    @apply space-y-2;
}

ol.list-decimal li {
    @apply leading-relaxed;
}

/* 內容區域間距優化 */
.content-section p {
    @apply leading-relaxed mb-2;
}

/* 響應式表格 */
@media (max-width: 768px) {
    .grid.grid-cols-2 {
        @apply grid-cols-1;
    }
}

/* 自定義按鈕顏色 */
.btn-primary {
    background-color: #468f74;
    color: white;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #3a7a62;
}
.sub-menu{
    width: auto;
}
.sub-menu a{
    color: #000;
}

.bg-green-white{
    background: linear-gradient(to bottom, #ccded7, #ffffff);
}

.about-item-title{
    color: #468f74;
    font-size: 20px;
    width: 300px;
    font-weight: 500;
    border-bottom: 2px solid #468f74;
    padding-bottom: 4px;
    margin-bottom: 10px;
}

/* 消息列表卡片樣式 */
.news-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card:hover {
    transform: translateY(-4px);
}

/* 文本截斷樣式 */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 新聞列表樣式 */
.press-item {
    transition: background-color 0.3s ease;
}

.press-item:hover {
    background-color: #f9fafb;
}

/* 響應式調整 */
@media (max-width: 768px) {
    .about-item-title {
        width: 100%;
    }
    
    .news-card img {
        height: 200px;
    }
}


.bg-green{
    background: #c6e4da;
}
     /* 自定义三角形箭头 */
     #search_select + .triangle-arrow {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
    }
    .triangle-arrow {
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 8px solid #32a85a;
    }