/* 選舉入口頁樣式（只有 start.html 使用）
   比照原網站：不指定字型（用瀏覽器預設）、深綠／米白／深藍配色、白底加 cec.gif */
body { margin: 0; background: #ffffff url("cec.gif"); color: #000000; }
.wrap { max-width: 900px; margin: 0 auto; padding: 24px 16px 40px; }
h1 { text-align: center; color: #004080; font-size: 2em; font-weight: normal; margin: 8px 0 4px; }
.lead { text-align: center; margin: 0 0 24px; }

/* 10 個選舉別按鈕：寬螢幕 5 欄 x 2 列，窄螢幕自動換行 */
.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 760px) { .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }

/* 按鈕：平常透明，滑鼠移過去顯示淡綠半透明底色
   要調深淺：改 --hover 最後一個數字（0.08 很淡 ～ 0.20 明顯）*/
:root { --hover: rgba(0, 64, 0, 0.12); }
a.tile {
  display: block; text-align: center; text-decoration: none;
  border: 1px solid #004000; background: transparent; color: #000000;
  padding: 16px 8px;
}
a.tile .name { display: block; font-size: 1.25em; margin-bottom: 6px; }
a.tile .yrs  { display: block; color: #004080; }
a.tile:hover, a.tile:focus-visible { background: var(--hover); }
a.tile:focus-visible { outline: 2px solid #004080; outline-offset: 2px; }

.all { text-align: center; margin-top: 28px; }
a.tile.wide { display: inline-block; padding: 10px 28px; }

/* 查詢表單：放在標題下方，取代原本的說明文字
   用 text-align 置中，各種瀏覽器顯示模式都能正確置中 */
form.search { text-align: center; margin: 14px 0 24px; }
form.search label { margin-left: 10px; }
form.search label:first-child { margin-left: 0; }
form.search select { padding: 3px 4px; margin-right: 4px; }
form.search button {
  margin-left: 10px; padding: 4px 18px; cursor: pointer;
  border: 1px solid #004000; background: transparent; color: #000000;
  font: inherit;
}
form.search button:hover, form.search button:focus-visible { background: var(--hover); }