/* BOSCERT 官網 — 共用樣式與響應式設定 */
:root {
  --teal-900: #123843; --teal-800: #1D4E5C; --teal-600: #2F7384; --teal-300: #8FD3DE;
  --ink: #1B2433; --muted: #4A5568; --line: #DCE4E3; --bg: #F3F6F5;
  /* 字級與間距縮放（內頁的設計稿以 1440px 畫布製作） */
  --fh: .86; --fb: .86; --sp: .9; --hs: .9;
  --gutter: max(16px, calc(80px * var(--sp)));
}
@media (max-width: 1280px) { :root { --fh: .8; --fb: .84; --sp: .75; --hs: .8; } }
@media (max-width: 900px)  { :root { --fh: .66; --fb: .8; --sp: .5; --hs: .65; } }
@media (max-width: 600px)  { :root { --fh: .56; --fb: .74; --sp: .3; --hs: .55; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; background: var(--bg); color: var(--ink); }
a { color: var(--teal-800); text-decoration: none; }
a:hover { color: var(--teal-600); }
input, textarea, select, button { font-family: inherit; }
img, svg, iframe { max-width: 100%; }
[id] { scroll-margin-top: 110px; }
:focus-visible { outline: 3px solid var(--teal-300); outline-offset: 2px; }
.skip-link { position: absolute; left: -9999px; top: 8px; background: #fff; padding: 8px 14px; z-index: 100; }
.skip-link:focus { left: 8px; }

.page { width: 100%; max-width: 1440px; margin: 0 auto; background: var(--bg); min-height: 60vh; }
.page h1, .page h2, .page h3 { overflow-wrap: anywhere; }

/* ---------- 頁首 ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: 0 1px 0 var(--line); }
.topbar { background: var(--teal-900); color: #D0E3E6; font-size: 15px; }
.topbar-inner { max-width: 1440px; margin: 0 auto; height: 36px; display: flex; align-items: center; gap: 28px; padding: 0 var(--gutter); }
.topbar a { color: #D0E3E6; }
.topbar a:hover { color: #fff; }
.navbar { max-width: 1440px; margin: 0 auto; height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 var(--gutter); }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; }
.brand svg { width: 44px; height: 49px; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; gap: 1px; }
.brand-en { font-family: "Noto Serif TC", serif; font-weight: 900; font-size: 27px; letter-spacing: 2px; color: #1B2A4E; line-height: 1.1; }
.brand-zh { font-size: 15px; color: var(--muted); letter-spacing: 1.5px; }
.nav { display: flex; gap: 6px; align-items: center; }
.nav-link { padding: 10px 16px; border-radius: 4px; font-size: 18px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.nav-link:hover { background: #E1EEF0; color: var(--teal-800); }
.nav-link.is-active { background: var(--teal-600); color: #fff; font-weight: 700; }
.nav-toggle { display: none; width: 46px; height: 46px; border: 1px solid #AFC0C0; border-radius: 4px; background: #fff; cursor: pointer; padding: 11px 10px; flex-direction: column; justify-content: space-between; }
.nav-toggle span { display: block; height: 2px; background: var(--teal-800); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 1280px) {
  .nav { gap: 4px; }
  .nav-link { padding: 9px 12px; font-size: 17px; }
}
/* 平板與較窄視窗：選單項目移到第二列，仍逐項分開顯示 */
@media (max-width: 1100px) {
  .navbar { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 10px; row-gap: 8px; }
  .nav { width: 100%; flex-wrap: wrap; gap: 6px; }
  .nav-link { padding: 8px 14px; font-size: 16px; }
}
/* 手機：改為選單按鈕 */
@media (max-width: 700px) {
  .navbar { flex-wrap: nowrap; height: 64px; padding-top: 0; padding-bottom: 0; position: relative; }
  .nav-toggle { display: flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; width: auto; background: #fff; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 8px var(--gutter) 16px; box-shadow: 0 12px 24px rgba(18,56,67,.12); border-top: 1px solid var(--line); }
  .nav.is-open { display: flex; }
  .nav-link { padding: 14px 12px; font-size: 18px; border-bottom: 1px solid var(--line); border-radius: 0; }
}
@media (max-width: 700px) {
  .topbar { display: none; }
  .brand svg { width: 38px; height: 42px; }
  .brand-en { font-size: 22px; }
  .brand-zh { font-size: 12px; letter-spacing: .5px; }
}

/* ---------- 篩選按鈕（原設計為連結樣式） ---------- */
button[data-filter] { font: inherit; background: transparent; color: var(--teal-800); cursor: pointer; border: 1px solid #AFC0C0; border-radius: 40px; padding: 9px 20px; }
button[data-filter].is-on { background: var(--teal-800); color: #fff; border-color: var(--teal-800); }
[data-hidden] { display: none !important; }

/* ---------- 表單 ---------- */
form input:not([type="checkbox"]):not([type="radio"]), form select, form textarea { max-width: 100%; min-width: 0; }
form .is-invalid { border-color: #C0392B !important; box-shadow: 0 0 0 2px rgba(192,57,43,.15); }
.form-status:empty { display: none; }
.form-status { font-size: 17px; line-height: 1.7; padding: 14px 18px; border-radius: 6px; }
.form-status.is-ok { background: #E1EEF0; color: var(--teal-800); border: 1px solid #9EC4CC; }
.form-status.is-err { background: #FDECEA; color: #8A2A1F; border: 1px solid #F1B8B0; }
button[type="submit"][disabled] { opacity: .6; cursor: progress; }

/* ---------- 表格 ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 620px; }

/* ---------- 頁尾 ---------- */
.site-footer { width: 100%; }
.site-footer > * { max-width: calc(1440px - 160px); margin-left: auto; margin-right: auto; width: 100%; }
.site-footer a:hover { color: #fff !important; }

/* ---------- 桌機以下 ---------- */
@media (max-width: 1280px) {
  [data-g="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  [data-g="footer"] { grid-template-columns: repeat(3, max-content) !important; justify-content: start !important; column-gap: 56px !important; }
  [data-g="footer"] > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
  [data-g="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-g="side"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-g="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-g="3"] > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* 表格式清單（文件下載、課程日程）改為卡片 */
  [data-g="table"] { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 16px !important; }
  [data-g="table"] > * { flex: 0 0 auto; min-width: 0; }
  [data-g="table"] > :first-child { flex-basis: 100%; font-weight: 700; }
  [data-g="table"] > :last-child:not(:first-child) { white-space: nowrap; width: auto !important; padding-left: 18px !important; padding-right: 18px !important; }
  [data-g="table"][data-head] { display: none !important; }
  [data-g="table"] > a, [data-g="table"] > :last-child:is(a, span[style*="background"]) { margin-left: auto; }
  .page [style*="white-space: nowrap"] { white-space: normal !important; }
}
@media (max-width: 700px) {
  [data-g="2"], [data-g="3"], [data-g="4"], [data-g="5"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-g="3"] > :last-child:nth-child(odd) { grid-column: auto; }
  [data-g="footer"] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 28px !important; }
  [data-g="footer"] [style*="grid-template-columns: repeat(2, max-content)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 16px !important; }
  [data-span] { grid-column: auto !important; }
  .page [style*="display: flex"]:not([style*="flex-direction: column"]) { flex-wrap: wrap; }
  svg[data-deco] { display: none; }
  article[style] { padding-left: 18px !important; padding-right: 18px !important; }
  .site-footer [style*="justify-content: space-between"] { flex-direction: column; gap: 10px; }
  /* 設計稿裡的內聯大字表單元件 */
  .page input:not([type="checkbox"]):not([type="radio"]), .page select { height: 46px !important; font-size: 16px !important; }
  .page textarea { font-size: 16px !important; }
  .page form { padding: 22px 18px !important; }
  .page button[type="submit"] { width: 100%; align-self: stretch !important; }
  iframe[title*="地圖"] { height: 300px !important; }
}
@media print {
  .site-header, .site-footer, .skip-link { display: none !important; }
  .page { max-width: none; }
}

/* ---------- 簡易內頁（隱私權政策、404） ---------- */
.simple-banner { background: var(--teal-800); color: #fff; padding: 56px var(--gutter); display: flex; flex-direction: column; gap: 12px; }
.simple-banner .crumb, .simple-banner .crumb a { color: #9EC4CC; font-size: 16px; }
.simple-banner h1 { margin: 0; font-family: "Noto Serif TC", serif; font-weight: 900; font-size: clamp(32px, 5vw, 52px); }
.simple-body { max-width: 880px; margin: 0 auto; padding: 48px 20px 80px; font-size: 18px; line-height: 1.95; }
.simple-body h2 { font-family: "Noto Serif TC", serif; color: var(--teal-800); font-size: 24px; margin: 32px 0 6px; }
.simple-body p { margin: 0 0 12px; }
.simple-body .muted { color: #6B7280; font-size: 16px; margin-top: 28px; }
.simple-body .btn { display: inline-block; background: var(--teal-600); color: #fff; padding: 12px 28px; border-radius: 4px; font-weight: 700; }