﻿/* ==========================================================
   無障礙 AA 修正樣式
   國立成功大學 會計學系暨財務金融研究所
   ========================================================== */

/* ----------------------------------------------------------
   螢幕閱讀器專用（視覺隱藏、輔具可讀）
   ---------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------
   跳至主要內容 Skip Link
   預設隱藏，Tab 聚焦時顯示於左上角
   ---------------------------------------------------------- */
.skip-link {
  position: fixed;
  top: -100px;
  left: 0;
  z-index: 9999;
  background: #003366;
  color: #fff !important;
  padding: 10px 18px;
  font-size: 0.875em;
  font-weight: bold;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid #ffcc00 !important;
  outline-offset: 2px !important;
}

/* ----------------------------------------------------------
   ::: 定位連結（accesskey 快速鍵錨點）
   預設視覺隱藏，聚焦時顯示
   ---------------------------------------------------------- */
#ac-shortcuts {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9998;
  height: 0;
  overflow: visible;
}
#ac-shortcuts a {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  font-size: 0;
  color: transparent;
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
}
#ac-shortcuts a:focus {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  overflow: visible;
  font-size: 0.8125em;
  color: #fff;
  background: #003366;
  padding: 4px 12px;
  z-index: 10000;
  outline: 3px solid #ffcc00 !important;
  outline-offset: 2px !important;
}

/* ----------------------------------------------------------
   焦點指示器 Focus Indicator
   覆蓋主題樣式，確保所有可互動元素有明顯框線
   ---------------------------------------------------------- */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
  outline: 3px solid #005fcc !important;
  outline-offset: 2px !important;
}

/* 定位區塊（landmark）滑鼠點擊時不顯示外框；鍵盤 accesskey 仍正常顯示 */
#header:focus:not(:focus-visible),
#main-content:focus:not(:focus-visible),
#footer:focus:not(:focus-visible) {
  outline: none !important;
}

/* ----------------------------------------------------------
   搜尋按鈕（<button> 重設，讓 .search-btn 樣式繼續生效）
   ---------------------------------------------------------- */
button.search-btn {
  cursor: pointer;
  border: none;
  font-family: inherit;
  background-color: #666;
  color: #fff;
}
button.search-btn:hover,
button.search-btn:focus {
  background-color: #f0721d;
  color: #fff;
}

/* ----------------------------------------------------------
   標籤切換（Tabs）選中狀態
   ---------------------------------------------------------- */
#inews .tabs a[aria-selected="true"] {
  font-weight: bold;
}

/* ----------------------------------------------------------
   榮譽事蹟捲動 — 暫停按鈕
   ---------------------------------------------------------- */
.marquee-ctrl-btn {
  display: none;
}
/*.marquee-ctrl-btn {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 10px;
  font-size: 0.75em;
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
  color: #333;
  line-height: 1.4;
	position: absolute;
	left: 180px;
	top: -13px;
}
.marquee-ctrl-btn:hover {
  background: #e0e0e0;
}
.marquee-ctrl-btn:focus {
  outline: 3px solid #005fcc !important;
  outline-offset: 2px !important;
}*/


/* ----------------------------------------------------------
   輪播 prev/next 按鈕：focus 時也要滑入（原本只有 hover）
   osSlider.css 的 :hover 規則 specificity = 0,2,1；
   這裡 :focus 規則相同，因為 a11y.css 載入更晚，cascade 勝出。
   ---------------------------------------------------------- */
.osSlider-main .slider-btn-prev:focus {
  left: 5px;
}
.osSlider-main .slider-btn-next:focus {
  right: 5px;
}

/* 輪播圓點導覽 focus 狀態 */
.osSlider-main .slider-nav li:focus {
  outline: 3px solid #ffcc00 !important;
  outline-offset: 2px !important;
  border-radius: 50%;
}

/* ----------------------------------------------------------
   輪播 Banner 暫停按鈕
   ---------------------------------------------------------- */
#ibanner {
  position: relative; /* 讓絕對定位的按鈕有參考點 */
}
.banner-pause-btn {
  position: absolute;
  bottom: 17px;
  right: 10px;
  z-index: 200;
  padding: 3px 8px;
  font-size: 0.8em;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  cursor: pointer;
  line-height: 1.4;
  letter-spacing: 0.04em;
  transition: background 0.2s;
}
.banner-pause-btn:hover {
  background: rgba(0, 0, 0, 0.9);
}
.banner-pause-btn:focus {
  outline: 3px solid #ffcc00 !important;
  outline-offset: 2px !important;
}

/* ----------------------------------------------------------
   表格 caption（若有的話）
   ---------------------------------------------------------- */
table caption {
  font-size: 1em;
  font-weight: bold;
  margin-bottom: 6px;
  text-align: left;
  color: #333;
}

/* ========================================
   手機版 (<768px)
   改為單欄響應式佈局
   ======================================== */
@media (max-width: 767px) {
    /* 主容器 */
    .main {
        width: 100% !important;
        padding: 0;
    }

    /* 確保 accesskey 不影響佈局 */
    .accesskey {
        display: none;
    }

    /* 內容區域 */
    #content {
        width: 100%;
	margin: 0;
	padding: 1px 0 35px;
	border-radius: 0;
    }

    .content1,
    .content2 {
        width: calc(100% - 10px) !important;
        padding: 5px;
        background: none;
    }

    /* 選單 - 隱藏原始選單，改用漢堡選單 */
    .hed {
        width: 100% !important;
        height: auto !important;
        background: transparent !important;
        overflow: visible !important;
    }

    .navbar-custom {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* 原始選單改為漢堡選單（稍後用 JS 控制） */
    .menu-bt {
        display: none !important; /* 預設隱藏，等待 JS 控制 */
    }

    .menu-bt.mobile-open {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: #fff !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
        padding-top: 60px !important;
        padding-bottom: 20px !important;
        margin: 0 !important;
        text-align: left !important;
    }

    .menu-bt.mobile-open > li {
        float: none !important;
        width: calc(100% - 10px) !important;
        display: block !important;
        position: static !important;
        border-bottom: 1px solid #eee !important;
        background: none !important;
        padding: 0 5px !important;
        margin: 0 !important;
        text-align: left !important;
    }

    .menu-bt.mobile-open > li > a {
        display: block !important;
        width: calc(100% - 40px) !important;
        padding: 12px 20px !important;
        color: #333 !important;
        border: none !important;
        background: none !important;
        text-align: left !important;
        font-size: 1.05em !important;
        line-height: 1.5 !important;
		border-radius: 0 !important;
    }

    .menu-bt.mobile-open ul {
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
        background: #f9f9f9 !important;
        display: none !important; /* 預設收合 */
        left: 0 !important;
        top: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0 !important;
        text-align: left !important;
    }

    .menu-bt.mobile-open ul.submenu-open {
        display: block !important;
    }

    .menu-bt.mobile-open ul li {
        display: block !important;
        width: 100% !important;
        float: none !important;
        position: static !important;
        border-bottom: 1px solid #ddd !important;
    }

    .menu-bt.mobile-open ul li a {
        display: block !important;
        width: calc(100% -60px) !important;
        padding: 12px 20px 12px 40px !important;
        color: #666 !important;
        background: none !important;
        text-align: left !important;
    }

    .menu-bt.mobile-open ul ul li a {
        padding-left: 60px !important;
    }

    /* 手機版取消所有選單連結與項目的 hover 效果 */
    .menu-bt.mobile-open a:hover,
    .menu-bt.mobile-open li:hover > a {
        color: inherit !important;
        background-color: transparent !important;
    }

    /* 有下層選單的連結：右側顯示展開箭頭 */
    .menu-bt.mobile-open li > a[aria-haspopup="true"] {
        position: relative !important;
        width: 100% !important;          /* 撐滿整個 li */
        box-sizing: border-box !important;
        padding-right: 42px !important;  /* 留空間給箭頭 */
    }
    .menu-bt.mobile-open li > a[aria-haspopup="true"]::after {
        content: '';
        position: absolute;
        right: 16px;
        top: 50%;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 7px solid currentColor;
        transform: translateY(-50%);
        transition: transform 0.2s ease;
        pointer-events: none;
        opacity: 0.7;
    }
    /* 展開狀態：箭頭轉向上 */
    .menu-bt.mobile-open li > a[aria-expanded="true"]::after {
        transform: translateY(-50%) rotate(180deg);
    }


    /* 表格響應式 - 公告詳細內容 */
	.edit table {
	width:100%;
	max-width: 100% !important;
	}
	.edit table th {
		padding: 8px 8px !important;
	}
	.edit table td {
		font-size: 0.9em !important;
		line-height: 1.5 !important;
		padding: 7px 8px !important;
		border: 1px solid #CCC;
	}
	table.fancytable1 {
        width: 100% !important;
        display: block;
        border: none !important;
		overflow: hidden;
        overflow-x: auto !important;
    }

    table.fancytable1 tbody {
        display: block;
        width: 100%;
    }

    table.fancytable1 tr {
        display: block;
        width: 100% !important;
        border-bottom: 1px solid #ddd;
        margin-bottom: 3px;
    }

    table.fancytable1 th {
        display: block;
        width: 100% !important;
        text-align: left !important;
        padding: 8px 10px !important;
        font-weight: bold;
        background: #f5f5f5 !important;
        border: none !important;
    }

    table.fancytable1 td {
        display: block;
        width: 100%;
        padding: 13px 10px;
        border: none !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
	

    /*table.fancytable2 {
        width: 100% !important;
        display: block;
        border: none !important;
        overflow-x: auto;
    }
	table.fancytable4 {
        width: 100% !important;
        display: block;
        overflow-x: auto;
    }

    .fancytable2 tbody, .fancytable4 tbody {
        display: block;
        width: 100%;
    }

    .fancytable2 tr, .fancytable4 tr {
        display: block;
        width: 100% !important;
        border-bottom: 1px solid #ddd;
        margin-bottom: 3px;
    }

    .fancytable2 th, .fancytable4 th {
        display: block;
        width: calc(100% - 24px) !important;
        text-align: left !important;
        padding: 8px 12px !important;
        font-weight: bold;
        background: #f5f5f5 !important;
        border: none !important;
    }

    .fancytable2 td, .fancytable4 td {
        display: block;
        width: calc(100% - 24px) !important;
        padding: 12px !important;
        border: none !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .fancytable2 td.news_w4,
    .fancytable2 td.news_w5 {
        white-space: normal !important;
        word-break: break-word;
    }*/

    /* 表格響應式 - 公告列表頁（卡片式） */
    /*table.fancytable {
        width: 100% !important;
        display: block !important;
        border: none !important;
    }

    .fancytable thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .fancytable tbody {
        display: block;
        width: 100%;
    }

    .fancytable tr  {
        display: block;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-bottom: 10px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,.07);
    }
	.fancytable th {
        display: none;
    }
    .fancytable td {
        display: flex !important;
        align-items: flex-start;
        padding: 8px 10px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        border-right: none !important;
        border-left: none !important;
        white-space: normal !important;
        word-break: break-word;
        font-size: 0.95em !important;
		line-height: 1.5 !important;
        width: auto !important;
    }

    .fancytable td:last-child {
        border-bottom: none !important;
    }

    .fancytable td::before {
        flex-shrink: 0;
        width: 42px;
        font-weight: bold;
        color: #777;
        font-size: 0.9em;
        margin-right: 10px;
        padding-top: 2px;
		text-align: center;
    }

    .fancytable td.news_w1::before { content: "單位"; }
    .fancytable td.news_w2::before { content: "主旨"; }
    .fancytable td.news_w3::before { content: "日期"; }*/


}

/* ========================================
   漢堡選單按鈕（手機版專用）
   ======================================== */
@media (max-width: 767px) {
    /* 漢堡按鈕容器 */
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        z-index: 100;
        background: #c65001;
        padding: 11px 20px;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin: 0;
        width: 100%;
        box-sizing: border-box;
		font-size: 1.05em;
		line-height: 1.5;
    }

    /* 選單開啟時，漢堡按鈕固定在頂部 */
    .mobile-menu-toggle.active {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 10000 !important;
    }

    /* 漢堡圖示 */
    .mobile-menu-icon {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 24px;
        height: 18px;
        margin-right: 12px;
    }

    .mobile-menu-icon span {
        display: block;
        width: 100%;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    /* 開啟時的動畫 */
    .mobile-menu-toggle.active .mobile-menu-icon span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .mobile-menu-toggle.active .mobile-menu-icon span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active .mobile-menu-icon span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    /* 選單文字 */
    .mobile-menu-text {
        color: #fff;
        font-size: 1.05em;
        line-height: 1.3;
    }
}

/* 桌面版隱藏漢堡按鈕 */
@media (min-width: 768px) {
    .mobile-menu-toggle {
        display: none !important;
    }
}


/* ========================================
   打印樣式
   ======================================== */
@media print {
    .mobile-menu-toggle,
    #navi
 {
        display: none !important;
    }

    .main {
        width: 100% !important;
    }
}
