:root {
    --color-1: #ff3333;
    --color-2: #e69900;
    --color-3: #33a033;
    --color-4: #3385ff;
    --color-5: #9933ff;
    --color-6: #e6005c;
    --color-7: #00b3e6;
}
.dark {
    --color-1: #ff6b6b;
    --color-2: #ffa94d;
    --color-3: #69db7c;
    --color-4: #4dabf7;
    --color-5: #da77f2;
    --color-6: #faa2c1;
    --color-7: #66d9e8;
}
.img-placeholder {
    background-color: #f0f0f0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.category-title {
    color: var(--text-color);
}
#searchInput {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
}
.weather-icon {
    position: relative;
    cursor: pointer;
}

.dropdown {
    position: relative;
}

.dropdown-bridge {
    position: absolute;
    height: 20px;
    left: 0;
    right: 0;
    bottom: -20px;
}

@media (hover: hover) and (pointer: fine) {
    .dropdown:hover .dropdown-menu,
    .dropdown-menu:hover {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

.dropdown-menu {
    transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    display: block !important;
}

.dropdown-menu.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.category-link, #map-menu a, #translate-menu a {
    transition: background-color 0.2s ease;
}

#welcomeModal {
    backdrop-filter: blur(5px);
    transition: opacity 0.5s ease;
}

#settingsBubble {
    animation: slightRotate 500ms infinite alternate;
    z-index: 30;
    transform-origin: bottom right;
}

@keyframes slightRotate {
    0% {
        transform: rotate(0deg);
    }
    30% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(10deg);
    }
}

/* 新聞跑馬燈樣式 */
.news-item {
    display: inline-flex;
    align-items: center;
    margin-right: 0.5rem; /* 進一步減少間距 */
    gap: 0.5rem;
    white-space: nowrap;
}

.news-category {
    flex-shrink: 0;
    color: white;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.news-title {
    white-space: nowrap;
    flex-shrink: 0;
}

/* 導覽列統一容器樣式 */
@media (max-width: 768px) {
    /* 在小螢幕上，使用 4 欄網格，Logo 佔滿整行 */
    #custom-links {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    /* 手機版 Logo 佔位符樣式 */
    .logo-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        grid-column: 1 / -1; /* 佔滿整行 */
        grid-row: 1; /* 固定在第一行 */
        pointer-events: none; /* 防止 Logo 被拖拽 */
        margin-bottom: 0.5rem;
    }
}

@media (min-width: 769px) {
    /* 在中等螢幕上，使用 9 欄網格（4個連結 + Logo + 4個連結） */
    #custom-links {
        grid-template-columns: repeat(4, 1fr) auto repeat(4, 1fr) !important;
        gap: 0.5rem !important;
        grid-auto-rows: minmax(60px, auto); /* 確保所有行都有最小高度 */
    }
    
    /* Logo 佔位符樣式 */
    .logo-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 60px;
        grid-column: 5; /* 固定在第5欄（中間位置） */
        grid-row: 1; /* 固定在第一行 */
        pointer-events: none; /* 防止 Logo 被拖拽 */
    }
    
    /* 拖拽時的樣式 */
    #custom-links.sortable-dragging {
        grid-template-columns: repeat(4, 1fr) auto repeat(4, 1fr) !important;
    }
    
    /* 確保拖拽元素不會影響網格佈局 */
    #custom-links .sortable-ghost {
        opacity: 0.4;
        grid-column: span 1; /* 確保拖拽元素只佔一欄 */
    }
}

/* 確保連結網格在各種螢幕尺寸下都能正常顯示 */
#custom-links {
    min-height: 60px; /* 確保容器有最小高度 */
}

/* 在極小螢幕上調整連結大小 */
@media (max-width: 480px) {
    #custom-links {
        grid-template-columns: repeat(4, 1fr) !important; /* 維持四個連結一行 */
        gap: 0.25rem !important;
    }
}

/* 全域連結 hover 底線效果 */
a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: currentColor; /* 讓底線顏色跟隨文字顏色 */
}

/* 頂部導覽列連結的 hover 底線顏色 */
#custom-links a:hover {
    text-decoration: underline !important;
    text-underline-offset: 2px;
    text-decoration-color: #dc2626 !important; /* 紅色底線，對應 Tailwind text-red-600 */
}

/* 深色模式下的紅色底線 */
.dark #custom-links a:hover {
    text-decoration-color: #f87171 !important; /* 淺紅色底線，對應 Tailwind dark:text-red-400 */
}

/* 確保搜尋按鈕和設定按鈕不受影響 */
button:hover,
#searchButton:hover,
#settingsButton:hover {
    text-decoration: none !important;
}