/* ===================================================================
   澎湖縣政府開放資料平台 - CKAN Theme
   =================================================================== */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');

:root {
  --penghu-navy: #5BB5E3;
  --penghu-blue: #374FC3;
  --penghu-sky: #5BB5E3;
  --penghu-bg: #FBFBFB;
  --penghu-max-w: 1200px;
}

body, th, td, input, textarea, select, button {
  font-family: 'Open Sans', '微軟正黑體', 'Microsoft JhengHei', Arial, Helvetica, sans-serif;
  font-size: 16px;
}
body { background-color: #fff; margin: 0; }

/* 覆蓋 CKAN 預設 bg.png 紋理背景 */
.main,
.toolbar,
.site-footer,
.masthead,
.homepage {
  background-image: none !important;
  background-color: #fff;
}
.main { background-color: #fff !important; }

/* =====================================================================
   全域統一寬度：所有區塊對齊 1025px
   ===================================================================== */

/* === 帳號列（最頂端）：與 #footer 同樣做法 === */
.account-masthead {
  max-width: var(--penghu-max-w);
  margin: 0 auto;
  background-color: var(--penghu-sky);
  position: relative;
  z-index: 1100;
  padding: 2px 0;
  font-size: 13px;
}
.account-masthead > .container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 8% !important;
  margin: 0 !important;
}

/* === 導航列（第二列）：與 #footer 同樣做法 === */
.masthead, .penghu-masthead {
  max-width: var(--penghu-max-w);
  margin: 0 auto;
  background-color: var(--penghu-sky) !important;
  border: none !important;
  border-bottom: none !important;
  position: relative;
  z-index: 1099;
  padding: 0;
  min-height: auto !important;
  box-shadow: none !important;
  margin-bottom: 0;
}
.penghu-masthead > .container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 8% !important;
  margin: 0 !important;
}
.penghu-topnav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 5px 0;
}
.penghu-topnav > li > a {
  color: #fff !important;
  font-size: 18px;
  padding: 8px 20px;
  text-decoration: none;
}
.penghu-topnav > li > a:hover {
  color: #ccc !important;
}
/* 隱藏 masthead 內的預設元素 */
.masthead .logo,
.masthead hgroup,
.masthead .site-search,
.masthead .navbar-toggler,
.masthead .navbar { display: none; }

/* === 全域對齊：header / content / footer 統一 1025px === */

/* header 區域：全寬背景色，內容居中 1025px */
.account-masthead,
.masthead,
.penghu-masthead {
  width: 100%;
}
.account-masthead > .container,
.penghu-masthead > .container,
.masthead > .container {
  max-width: var(--penghu-max-w) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* CKAN content container：僅首頁清除限制（用 :has 偵測 #wrapper） */
div#content.container:has(> .row > #wrapper),
div#content.container:has(> .wrapper > #wrapper) {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
div#content.container:has(#wrapper) > .row.wrapper,
div#content.container:has(#wrapper) > .wrapper {
  --bs-gutter-x: 0 !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 內頁 container 對齊 1025px */
div#content.container:not(:has(#wrapper)) {
  max-width: var(--penghu-max-w);
  margin: 0 auto;
}

/* #wrapper 自己控制寬度居中（與參考站一致） */

/* =====================================================================
   全域內頁配色
   ===================================================================== */
.btn-primary, .btn-primary:focus { background-color: var(--penghu-blue); border-color: var(--penghu-blue); }
.btn-primary:hover { background-color: var(--penghu-navy); border-color: var(--penghu-navy); }
.module-heading { background-color: var(--penghu-navy); border-color: var(--penghu-navy); color: #fff; }
.module-heading a { color: #fff; }
a { color: var(--penghu-blue); }
a:hover { color: var(--penghu-sky); }
.nav-simple > .active > a, .nav-simple > .active > a:hover { background-color: var(--penghu-sky); border-color: var(--penghu-sky); }
.site-search .btn { background-color: var(--penghu-navy); color: #fff; border-color: var(--penghu-navy); }
.site-search .btn:hover { background-color: var(--penghu-blue); }
.pagination > .active > a, .pagination > .active > span { background-color: var(--penghu-blue); border-color: var(--penghu-blue); }
.tag { background-color: var(--penghu-sky); }

.freego { position: absolute; left: -9999px; font-size: 0; line-height: 0; overflow: hidden; }

/* CKAN core skip link (.visually-hidden-focusable) fallback —
   Bootstrap 5 應提供此規則,但在本站未生效,補上以免文字常駐可見 */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =====================================================================
   無障礙 (WCAG 2.1 AA)
   ===================================================================== */

/* 1. 焦點指示器：所有可互動元素顯示清晰焦點框 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #F7C948 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.3) !important;
}

/* 跳轉連結：Tab 聚焦時顯示
   visually-hidden-focusable 通常包著 <a>,focus 在子元素,需用 :focus-within */
.freego:focus,
.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-within {
  position: fixed !important;
  top: 5px;
  left: 5px;
  z-index: 9999;
  font-size: 16px !important;
  line-height: 1.5 !important;
  padding: 10px 20px;
  background: #F7C948;
  color: #000;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
}

/* 2. 色彩對比強化（確保 4.5:1 以上） */
/* 淺藍背景上的白字改為深色確保對比 */
.account-masthead a,
.account-masthead .account a,
.account-masthead nav a {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
/* footer 白字加強對比 */
.footer_box p,
#footer a {
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* 清除 header 區域的分隔線（僅針對容器本身，不影響子元素） */
.account-masthead,
.masthead,
.penghu-masthead,
.toolbar {
  border: none !important;
  box-shadow: none !important;
}

/* =====================================================================
   首頁主體
   ===================================================================== */
#wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--penghu-max-w);
  margin: 0 auto;
  top: 0;
  overflow: hidden;
  box-sizing: border-box;
}

#header { position: absolute; z-index: 1000; width: 100%; height: 70px; padding: 0; }

/* Logo */
.logo { position: absolute; top: 55px; left: 8%; }
.logo img { width: 340px; height: auto; }
.logo h1 { margin: 0; }

.logo_opendata { position: absolute; top: 95px; left: 16%; z-index: 100; }
.logo_opendata img { width: 587px; height: auto; }

.lighthouse { position: absolute; top: 280px; left: 7%; z-index: 100; }
.lighthouse img { width: 233px; height: auto; }

.rainbow { position: absolute; bottom: -30px; right: 0px; }
.rainbow img { width: 720px; height: auto; }

/* 搜尋框 */
.search_box { position: absolute; top: 213px; left: 50%; transform: translateX(-50%); z-index: 200; }
.search_box input {
  font-size: 18px; display: block; width: 470px; padding: 0 15px;
  height: 41px; border: solid 1px var(--penghu-sky); background-color: white;
  color: #9B9BA0; float: left; margin: 0 5px 0 0;
}
.search_box button, .search_box a[title] {
  float: left; display: block; width: 42px; height: 42px;
  background: var(--penghu-navy); text-align: center; border: none; cursor: pointer;
}
.search_box button::before, .search_box a[title]::before {
  font-size: 24px; line-height: 40px; color: #FFF;
  content: "\f002"; font-family: FontAwesome;
  font-style: normal; font-weight: normal;
}
.search_box button:hover, .search_box a[title]:hover { background: var(--penghu-blue); }

/* 選單（banner 下方） */
.top_menu_btn { display: none; }
.top_menu { position: absolute; width: 100%; top: 404px; z-index: 200; }
.top_menu ul { list-style: none; margin: 0 auto; width: 70%; text-align: center; padding: 0; }
.top_menu ul > li { display: inline-block; }
.top_menu ul > li > a {
  display: block; padding: 0 15px; margin: 32px 0px;
  font-size: 18px; line-height: 18px; color: var(--penghu-blue);
  border-left: solid 1px var(--penghu-sky); text-decoration: none;
}
.top_menu ul > li:first-child a { border: none; }
.top_menu ul > li > a:hover { color: var(--penghu-sky); }

.data-title {
  display: inline-block; font-size: 1.375em; color: var(--penghu-navy);
  padding: 5px; line-height: 0px; margin: 47px 0px 0px;
  letter-spacing: 2px; font-weight: 600;
}

/* Banner */
.top_banner { background: #f2f2f2; }
.top_banner > div { height: 404px; overflow: hidden; }
.top_banner img { width: 100%; height: 404px; object-fit: cover; }

/* 三欄內容區 */
#full_block {
  position: relative; z-index: 100;
  padding: 67px 100px 83px; margin: 0px 0px 7px;
  background: var(--penghu-bg);
}

.list_box { position: relative; }
.list_box > ul { list-style: none; margin: 0; padding: 0; }
.list_box > ul > li { width: 33.3%; float: left; }

.list_box .item { margin: 0 10px; }
.list_box .item img { display: inline-block; margin: 33px 0px 0px; vertical-align: top;}
.list_box .item hr { display: block; margin: 5px 0px 8px; height: 1px; background: var(--penghu-blue); border: none; }
.list_box .item ul { display: block; padding: 10px 20px; border-radius: 0 0 15px 0; border: 1px solid var(--penghu-sky); list-style: none; }
.list_box .item > ul > li > a {
  display: block; font-size: 15px; color: #404040;
  line-height: 2.4;
  word-break: keep-all; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; text-decoration: none;
}
.list_box .item > ul > li > a::before { content: "\2027  "; }
.list_box .item > ul > li > a:hover { color: #969696; }
.list_box .item > ul > li.more { text-align: right; line-height: 1.2em; }
.list_box .item > ul > li.more > a {
  display: inline-block; padding: 5px 15px;
  color: var(--penghu-blue); font-size: 14px; line-height: 14px;
}
.list_box .item > ul > li.more > a::before { display: none; }
.list_box .item > ul > li.more > a:hover { color: var(--penghu-sky); }

/* 統計卡片 */
.list_box .item_s { margin: 0 10px; }
.list_box .item_s img { display: inline-block; margin: 33px 0px 0px; vertical-align: top;}
.list_box .item_s hr { display: block; margin: 5px 0px 8px; height: 1px; background: var(--penghu-blue); border: none; }
.list_box .item_s ul { display: block; padding: 30px 12% 67px; border-radius: 0 0 15px 0; border: 1px solid var(--penghu-sky); list-style: none; }
.statistics_n { font-size: 26px; color: var(--penghu-blue); text-decoration: none; }
.statistics_name { padding: 0px 15px 0px; font-size: 17px; color: var(--penghu-blue); text-decoration: none; }
.list_box .item_s ul li { line-height: 2.4; }

.clear { clear: both; }

/* =====================================================================
   Footer
   ===================================================================== */
/* 隱藏 CKAN 預設 footer */
.site-footer { display: none !important; }

#footer {
  z-index: 100;
  max-width: var(--penghu-max-w);
  min-height: 120px;
  margin: 0 auto;
  color: #FBFBFB;
  background-color: var(--penghu-sky);
  overflow: hidden;
}
.footer_box {
  max-width: 420px; text-align: left; float: left;
  margin: 25px 8% auto 8%;
}
.footer_box p { font-size: 14px; float: left; line-height: 170%; color: #FBFBFB; margin: 0; }
.footer_icon { min-width: 250px; float: left; margin: 25px auto auto 8%; }
.footer_icon img { height: 25px; width: auto; margin: 0px 5px; }
.footer_icon a:hover { opacity: 0.8; }

/* =====================================================================
   RWD - 響應式設計（Mobile First 向上覆蓋）
   斷點：1024px / 800px / 660px / 480px / 375px
   ===================================================================== */

/* ---------- 1024px 以下：平板橫向 ---------- */
@media only screen and (max-width: 1024px) {
  /* 導航列 */
  .penghu-topnav > li > a { font-size: 15px; padding: 6px 12px; }

  /* 首頁 */
  #full_block { padding: 60px 5% 70px; }
  .logo img { width: 300px; }
  .logo_opendata img { width: 500px; }
  .lighthouse img { width: 200px; }
  .rainbow img { width: 600px; }
  .search_box input { width: 400px; }
  .top_menu ul { width: 85%; }
  .top_menu ul > li > a { font-size: 16px; padding: 0 12px; }

  /* Footer */
  .footer_box { margin: 20px 5% auto 5%; }
  .footer_icon { margin: 20px auto auto 5%; }
}

/* ---------- 800px 以下：平板直向 ---------- */
@media only screen and (max-width: 800px) {
  /* 導航列 */
  .penghu-topnav { flex-wrap: wrap; justify-content: center; }
  .penghu-topnav > li > a { font-size: 14px; padding: 5px 10px; }

  /* 首頁 Banner 與定位 */
  .top_banner > div { height: 320px; }
  .top_banner img { height: 320px; }
  .logo { top: 25px; left: 5%; }
  .logo img { width: 260px; }
  .logo_opendata { top: 62px; left: 10%; }
  .logo_opendata img { width: 420px; }
  .lighthouse { top: 200px; left: 5%; }
  .lighthouse img { width: 170px; }
  .rainbow img { width: 450px; }

  /* 搜尋框 */
  .search_box { top: 160px; }
  .search_box input { width: 350px; font-size: 16px; }

  /* 選單 */
  .top_menu { top: 320px; }
  .top_menu ul { width: 95%; }
  .top_menu ul > li > a { font-size: 15px; padding: 0 10px; margin: 25px 0; }

  /* 三欄 */
  #full_block { padding: 50px 3% 60px; }

  /* Footer */
  #footer { min-height: auto; padding: 15px 0; }
  .footer_box { max-width: 100%; margin: 15px 5%; }
  .footer_icon { margin: 15px 5%; }
}

/* ---------- 660px 以下：手機橫向 / 大螢幕手機 ---------- */
@media only screen and (max-width: 660px) {
  /* 帳號列 + 導航列 */
  .account-masthead { padding: 4px 0; }
  .penghu-topnav > li > a { font-size: 13px; padding: 4px 8px; }

  /* 首頁 Banner */
  .top_banner > div { height: 280px; }
  .top_banner img { height: 280px; }

  /* Logo 改為相對定位，置頂置中 */
  .logo { position: relative; top: 0; left: 0; text-align: center; margin: 10px auto; width: 100%; }
  .logo img { width: 200px; }

  /* opendata logo */
  .logo_opendata { position: relative; top: 0; left: 0; text-align: center; width: 100%; margin-top: 5px; }
  .logo_opendata img { width: 380px; max-width: 90%; }

  /* 燈塔隱藏（手機不需要） */
  .lighthouse { display: none; }

  /* 搜尋框 */
  .search_box {
    position: relative; top: 0; left: 0; transform: none;
    width: 90%; margin: 15px auto; display: flex;
  }
  .search_box input { width: 100%; flex: 1; font-size: 16px; height: 42px; margin: 0; }
  .search_box button { width: 48px; height: 42px; flex-shrink: 0; }

  /* 選單改為側邊欄滑入 */
  .top_menu {
    position: fixed; width: 260px; padding: 0 15px;
    height: 100%; top: 0; left: -280px; z-index: 1500;
    background: rgba(91,181,227,0.95);
    transition: left 0.3s ease-in-out;
    margin: 0;
  }
  .top_menu.on { left: 0; }
  .top_menu ul { width: 100%; display: block; margin: 80px 0 0 0; text-align: left; }
  .top_menu ul > li { display: block; border-bottom: solid 1px rgba(255,255,255,0.4); }
  .top_menu ul > li > a {
    font-size: 16px; margin: 0; padding: 12px 15px;
    border-left: none; color: #fff; display: block;
  }
  .top_menu ul > li > a:hover { background: rgba(255,255,255,0.15); }

  /* 漢堡選單按鈕 */
  .top_menu_btn {
    display: block; position: fixed; top: 0; left: 0;
    font-size: 24px; padding: 9px 10px; z-index: 1501;
    background: rgba(255,255,255,0.9);
  }
  .top_menu_btn::before {
    font-size: 24px; width: 32px; text-align: center; line-height: 32px;
    color: #333; content: "\f0c9"; font-family: FontAwesome;
    transition: 0.3s;
  }
  .top_menu_btn.on::before { content: "\f00d"; }

  /* Banner 區域調整 */
  #header {
    position: relative; height: auto; padding: 10px 5%;
  }

  /* 三欄改單欄 */
  #full_block { padding: 20px 4% 40px; }
  .list_box > ul > li { width: 100%; float: none; margin: 0 0 20px 0; }
  .list_box .item { margin: 0; }
  .list_box .item_s { margin: 0; }
  .list_box .item > ul > li > a { font-size: 14px; line-height: 2.2; }
  .list_box .item_s ul { padding: 20px 8% 40px; }
  .data-title { margin: 20px 0 0; font-size: 1.2em; }

  /* 彩虹橋 */
  .rainbow { bottom: -20px; }
  .rainbow img { width: 350px; }

  /* Footer 改垂直排列 */
  #footer { text-align: center; padding: 20px 5%; }
  .footer_box { float: none; max-width: 100%; margin: 10px auto; text-align: center; }
  .footer_box p { float: none; display: block; line-height: 180%; text-align: center; }
  .footer_icon { float: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 15px auto; min-width: auto; }
  .footer_icon img { height: 28px; }
}

/* ---------- 480px 以下：手機直向 ---------- */
@media only screen and (max-width: 480px) {
  .penghu-topnav > li > a { font-size: 12px; padding: 4px 6px; }

  .logo img { width: 180px; }
  .logo_opendata img { width: 320px; }

  .search_box { width: 95%; }
  .search_box input { font-size: 15px; height: 40px; }
  .search_box button { width: 44px; height: 40px; }

  .top_menu ul > li > a { font-size: 13px; padding: 0 8px; margin: 8px 0; }

  .top_banner > div { height: 220px; }
  .top_banner img { height: 220px; }

  #full_block { padding: 15px 3% 30px; }
  .list_box .item > ul > li > a { font-size: 13px; }
  .statistics_n { font-size: 22px; }
  .statistics_name { font-size: 14px; }

  .rainbow img { width: 280px; }

  .footer_box p { font-size: 12px; }
  .footer_icon img { height: 24px; }
}

/* ---------- 375px 以下：小螢幕手機 ---------- */
@media only screen and (max-width: 375px) {
  .penghu-topnav > li > a { font-size: 11px; padding: 3px 5px; }

  .logo img { width: 160px; }
  .logo_opendata img { width: 280px; }

  .top_banner > div { height: 180px; }
  .top_banner img { height: 180px; }

  .top_menu ul > li > a { font-size: 12px; padding: 0 6px; }

  #full_block { padding: 10px 2% 25px; }
  .data-title { font-size: 1.1em; letter-spacing: 1px; }
  .list_box .item ul { padding: 8px 12px; }
  .list_box .item_s ul { padding: 15px 5% 30px; }
  .statistics_n { font-size: 20px; }
  .statistics_name { font-size: 13px; }

  .rainbow { display: none; }

  .footer_box p { font-size: 11px; }
}