/* 基本設定 */
body {
    font-family: 'Noto Sans TC', sans-serif;
    background-color: #fff;
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* 主容器 - 滿版 */
.main-container {
    width: 100%;
}

/* 統一區塊樣式 */
.content-section {
    padding: 30px 40px;
    border-bottom: 1px solid #e9e9e9;
}

.content-section:last-child {
    border-bottom: none;
}

/* 頂部區塊 */
.header-section {
    padding: 25px 40px;
    border-bottom: 1px solid #e9e9e9;
}

.header-container {
    display: flex;
    align-items: center;
}

.logo-section .site-logo {
    width: 150px; /* 放大 */
    height: 150px; /* 放大 */
    border-radius: 50%;
    border: 3px solid #d9534f;
    object-fit: cover;
    margin-right: 30px;
}

.title-and-nav-section {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.title-section {
    text-align: center;
}

.title-section .site-title {
    font-family: 'Noto Serif TC', serif;
    font-size: 4.5rem; /* 放大 */
    font-weight: 700;
    color: #d9534f;
    margin: 0;
    margin-bottom: 30px;
}

/* 功能選單 */
.main-navigation {
    padding: 25px 30px;
    border: 3px dashed #d9534f;
    border-radius: 15px;
}

.nav-menu {
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative; /* For dropdown positioning */
}

.nav-item .nav-link {
    text-decoration: none;
    color: #444;
    font-weight: 600; /* 加粗 */
    font-size: 1.5rem; /* 放大 */
    padding: 10px 20px;
    border-radius: 8px;
    display: block;
    transition: background-color 0.3s, color 0.3s;
}

.nav-item .nav-link:hover {
    background-color: #d9534f;
    color: #fff;
}

/* Dropdown Menu */
.has-dropdown:hover .dropdown-menu {
    display: block; /* Show dropdown on hover */
    opacity: 1;
    visibility: visible;
}

.dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    list-style: none;
    padding: 10px 0;
    margin-top: 5px; /* Add a little space back */
    min-width: 200px;
    z-index: 1000;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.dropdown-menu li a {
    padding: 12px 25px;
    display: block;
    text-decoration: none;
    color: #333;
    font-size: 1.2rem; /* 放大 */
    white-space: nowrap;
    transition: background-color 0.2s;
}

.dropdown-menu li a:hover {
    background-color: #f5f5f5;
}

.dropdown-menu li.active a {
    background-color: #d9534f;
    color: #fff;
    font-weight: bold;
}


/* 中段區塊 */
.carousel-section, .dashboard-section {
    background-color: #fdf6f6;
    border-radius: 15px;
    margin: 0;
    padding: 40px;
    text-align: center;
}

.carousel-section h2, .dashboard-section h2 {
    margin-top: 0;
    font-size: 2.8rem; /* 放大 */
    color: #333;
}

.carousel-section p, .dashboard-section p {
    font-size: 1.5rem; /* 放大 */
}

/* 內容頁 - 通用樣式 */
.content-section .content h3 {
    font-size: 2.8rem; /* 放大標題 */
    text-align: center;
    margin-bottom: 1.5em;
    color: #333;
}

.content-section .content img {
    max-width: 100%;
    height: auto;
    object-fit: contain; /* 維持等比例 */
    display: block;
    margin-right: auto;
    border-radius: 8px;
}

/* 行政區選擇 */
.district-selector label {
    font-size: 1.4rem;
    font-weight: 500;
    margin-right: 10px;
}

.district-selector .form-select {
    font-size: 1.3rem;
    padding: 8px 12px;
}

/* 底部區塊 */
.bottom-container {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.qr-section, .links-section {
    background-color: #fdf6f6;
    border-radius: 15px;
    padding: 40px;
    width: 48%;
    text-align: center;
}

.qr-section h3, .links-section h3 {
    margin-top: 0;
    font-size: 2.2rem; /* 放大 */
    line-height: 1.4;
    color: #333;
}

.qr-code {
    width: 150px;
    height: 150px;
    margin-top: 20px;
}

.related-links {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
}

.related-links li a {
    text-decoration: none;
    color: #d9534f;
    display: block;
    padding: 8px 0;
    font-size: 1.4rem; /* 放大 */
    font-weight: 500;
}

.related-links li a:hover {
    text-decoration: underline;
}

/* 頁腳版權 */
.copyright-section {
    text-align: center;
    padding: 50px 20px;
    font-size: 1.5rem; /* 放大 */
    font-weight: 500;
    color: #fff;
    background-color: #3a3a3a;
}

/* Hide specific images as requested by user */
img[src="../upload/files/20240513175259_47d6803896.png"] {
    display: none !important;
}
img[src="../upload/files/20240513191542_6334d16bc7.png"] {
    display: none !important;
}

/* Note section styles */
.note {
    margin-top: 2em;
    position: relative;
    padding: 25px;
    width: 90%;
    margin-left: 0;
    margin-right: auto;
}

.noteInner {
    background-color: #CDE5A8;
    border-radius: 20px;
    padding: 20px;
    min-height: 100px;
    position: relative;
    z-index: 1;
}

.note h3 {
    font-size: 2.0rem; /* Larger font for note titles */
    text-align: left; /* Align note titles left */
    margin-bottom: 0.8em;
    color: #333;
}

.note p, .note ul li {
    padding-left: 0;
    margin-left: 0;
    font-size: 1.6rem; /* Larger font for note content */
    line-height: 1.6;
}

.noteLi {
    list-style: none;
    display: flex;
    align-items: center; /* Align icon and text */
    margin-bottom: 0.5em;
}

.noteLi img.listImage {
    width: 35px !important; /* Make pin icon larger */
    height: 35px !important;
    margin-right: 20px !important;
    flex-shrink: 0;
}

/* Border images for notes */
.note > div:first-child img, .note > div:nth-child(2) img {
    position: absolute;
    z-index: 10;
    width: 100px !important;
    height: 100px !important;
}

.note > div:first-child img { /* flowerBorderL.png / leafBorderL.png */
    top: 0;
    left: 0;
}

.note > div:nth-child(2) img { /* flowerBorderR.png / leafBorderR.png */
    bottom: 0;
    right: 0;
}

/* --- 手機版響應式間距調整 (Mobile Spacing) --- */
@media (max-width: 768px) {
    .content-section,
    .header-section {
        padding-top: 20px;    /* 縮小區塊的垂直留白 */
        padding-bottom: 20px;
    }

    .bottom-container .qr-section, 
    .bottom-container .links-section {
        padding: 20px 15px; /* 縮小底部區塊內距 */
    }
}