/* 全域與基本設定 */
body {
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', '微軟正黑體', sans-serif;
    margin: 0;
    background-color: #f4f7f6;
    color: #333;
}

/* 頂部 Header 設計 */
.main-header {
    background-color: #ffffff;
    padding: 1rem 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
}

.weather-widget {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.location-selector {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

#location-select {
    font-size: 1rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
}

/* 滑動按鈕樣式 */
.day-toggle-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    padding: 0.5rem;
}
.day-toggle-container.disabled { cursor: not-allowed; opacity: 0.5; }
.toggle-label { font-weight: 500; color: #888; transition: color 0.3s; }
.toggle-label.active { color: #007bff; font-weight: 700; }
.toggle-switch { width: 48px; height: 26px; background-color: #ccc; border-radius: 13px; position: relative; transition: background-color 0.3s; }
.toggle-knob { width: 22px; height: 22px; background-color: white; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: transform 0.3s ease-in-out; }
.day-toggle-container.toggled .toggle-switch { background-color: #007bff; }
.day-toggle-container.toggled .toggle-knob { transform: translateX(22px); }


/* 天氣資訊顯示框 */
.weather-info-box {
    background-color: #e9f5ff;
    border: 1px solid #bde0fe;
    border-radius: 8px;
    padding: 0.8rem 1.2rem;
    min-height: 42px;
    display: flex;
    align-items: center;
    flex-grow: 1;
    overflow: hidden;
}

.weather-info-box .loading, .weather-info-box .error, .weather-info-box .placeholder {
    width: 100%;
    text-align: center;
    font-style: italic;
    color: #555;
}

/* 四欄式 Grid 佈局 */
.weather-row {
    width: 100%;
    display: grid;
    grid-template-columns: 40px 1fr minmax(130px, auto) minmax(130px, auto);
    gap: 1rem;
    align-items: center;
    font-size: 0.95rem;
}

/* 天氣圖示的樣式 */
.weather-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.weather-icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 2;
    color: #0056b3;
}


/* ===================================== */
/* ==== 法律新聞區塊樣式 ==== */
/* ===================================== */

.content-area {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 2rem;
}

.news-container {
    background-color: #fff;
    padding: 1.5rem 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e0e0e0;
}

.section-header h2 {
    margin: 0;
    color: #333;
    font-size: 1.5rem;
}

.back-link {
    font-size: 0.9rem;
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
    padding: 0.5em 1em;
    border: 1px solid #007bff;
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
}

.back-link:hover {
    background-color: #007bff;
    color: white;
}

#news-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ▼▼▼▼▼ 這裡是修改的部分 ▼▼▼▼▼ */
.news-item {
    display: flex;
    flex-direction: column; /* 改為垂直排列 */
    align-items: flex-start; /* 靠左對齊 */
    gap: 0.25rem; /* 縮小標題與下方資訊的間距 */
    padding: 1rem 1.2rem;
    border-radius: 6px;
    text-decoration: none;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.news-title {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
    color: #333;
}

.news-meta {
    font-size: 0.85rem; /* 縮小字體 */
    color: #6c757d;  /* 改為淺灰色 */
}

.news-item:hover {
    background-color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.news-item:hover .news-title {
    color: #0056b3;
}
/* ▲▲▲▲▲ 這裡是修改的部分 ▲▲▲▲▲ */


.news-list-placeholder {
    color: #888;
    font-style: italic;
    padding: 2rem;
    text-align: center;
}

/* ================================================== */
/* ==== ▼▼▼▼▼ 手機版響應式設計 (RWD) ▼▼▼▼▼ ==== */
/* ================================================== */
@media (max-width: 768px) {

    .main-header {
        padding: 1rem;
    }

    .weather-widget {
        flex-wrap: wrap;
    }
    
    .location-selector {
        flex-grow: 1;
    }

    .location-selector label {
        display: none;
    }
    
    .weather-info-box {
        width: 100%;
        flex-basis: 100%;
        flex-grow: 0;
        margin-top: 1rem;
        order: 3;
    }
    
    .weather-row {
        grid-template-columns: auto 1fr;
        row-gap: 0.5rem;
        font-size: 1rem;
    }
    
    .content-area {
        margin-top: 1rem;
        padding: 0 1rem;
    }

    .news-container {
        padding: 1rem 1.2rem;
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }
    
    .news-title {
        font-size: 1rem; /* 可微調手機版的標題大小 */
        line-height: 1.5;
    }
}