@charset "utf-8";
/* =============================================================
   responsive.css
   Mobile-friendly / responsive layer for the legacy 2015
   fixed-width (1000/1070px, table-based) site.

   Design rule: the DESKTOP layout (viewport > 980px) must stay
   visually identical. Every layout change lives inside a media
   query, so wide screens are untouched. Only the two harmless
   global rules below apply everywhere.
   ============================================================= */

/* --- Global, safe everywhere -------------------------------- */
img { max-width: 100%; }

/* Hamburger UI is hidden until a small viewport asks for it. */
.mobile-topbar,
.mobile-nav { display: none; }


/* =============================================================
   TABLET & PHONE  (<= 980px)  ->  switch into "mobile layout"
   Below 980px the 1000px desktop frame can't fit anyway, so we
   fully fluidize widths and swap the hover menu for a hamburger.
   ============================================================= */
@media screen and (max-width: 980px) {

  html { -webkit-text-size-adjust: 100%; }

  body {
    min-width: 0 !important;
    /* No overflow-x:hidden here — wide data tables (e.g. the score
       result pages) must stay horizontally scrollable rather than
       being clipped. Main pages are fluidized below so they don't
       overflow in the first place. */
  }

  img { height: auto; }           /* keep aspect ratio when shrunk */

  /* ---- Neutralize the fixed pixel widths --------------------
     These widths live in inline style="" attributes and HTML
     width="" attributes spread across 158 pages, so we target
     them by attribute-substring instead of editing every file. */
  [style*="min-width:1000px"],
  [style*="min-width: 1000px"],
  .outer,
  .layout_type            { min-width: 0 !important; }

  [style*="width:1070px"],
  [style*="width: 1070px"],
  [style*="width:1000px"],
  [style*="width: 1000px"],
  [style*="width:920px"],
  [style*="width:840px"]  { width: auto !important;
                            max-width: 100% !important; }

  table[width="1000"],
  table[width="1070"],
  table[width="950"],
  table[width="920"]      { width: 100% !important;
                            max-width: 100% !important; }

  .headnav,
  .headnav-inner          { width: 100% !important; }

  /* Generic guard: nothing wider than the screen. */
  table                   { max-width: 100% !important; }

  /* The home-page news ticker is a fixed 500px box. */
  .abgne-news-scroll      { width: 100% !important;
                            max-width: 100% !important; }

  /* ---- Collapse / replace the desktop menu bar -------------- */
  /* The menu band is a stack of 85px-tall divs; one carries the
     MainMenuBg strip. Hide the hover menu and flatten the band. */
  .headnav,
  .hdmenu                 { display: none !important; }

  [style*="height:85px"]  { height: auto !important; }

  [style*="MainMenuBg"]   { background-image: none !important;
                            min-width: 0 !important;
                            height: auto !important; }

  /* Show the JS-built mobile chrome. */
  .mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10000;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 14px;
    background: #3abfa2;          /* matches the site's teal accent */
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
  }
  .mobile-brand {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    line-height: 1.3;
    font-family: "微軟正黑體", Verdana, Geneva, sans-serif;
  }
  .mobile-brand:hover { color: #fff; text-decoration: none; }

  .mobile-nav-toggle {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: transparent;
    width: 44px;
    height: 40px;
    padding: 8px;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 0 0 auto;
  }
  .mobile-nav-toggle span {
    display: block;
    height: 3px;
    width: 100%;
    border-radius: 3px;
    background: #fff;
    transition: transform .25s ease, opacity .2s ease;
  }
  .mobile-nav-toggle.active span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
  .mobile-nav-toggle.active span:nth-child(2) { opacity: 0; }
  .mobile-nav-toggle.active span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

  /* Slide-down accordion panel */
  .mobile-nav {
    display: block;
    position: -webkit-sticky;
    position: sticky;
    top: 60px;
    z-index: 9999;
    width: 100%;
    box-sizing: border-box;
    max-height: 0;
    overflow: hidden;
    background: #ffffff;
    border-bottom: 0 solid #3abfa2;
    transition: max-height .35s ease;
  }
  .mobile-nav.open {
    max-height: 80vh;
    overflow-y: auto;
    border-bottom-width: 3px;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-nav ul { list-style: none; margin: 0; padding: 0; }
  .mobile-nav li { border-bottom: 1px solid #e6e6e6; }

  /* Top-level row: label + expand chevron */
  .mobile-nav .mnav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    padding: 13px 16px;
    margin: 0;
    border: 0;
    background: #f7f7f7;
    color: #222;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    text-decoration: none;
    font-family: "微軟正黑體", Verdana, Geneva, sans-serif;
    cursor: pointer;
  }
  .mobile-nav .mnav-head:hover { text-decoration: none; color: #222; }
  .mobile-nav .mnav-head .mnav-caret {
    flex: 0 0 auto;
    margin-left: 10px;
    border: solid #3abfa2;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 4px;
    transform: rotate(45deg);
    transition: transform .25s ease;
  }
  .mobile-nav li.open > .mnav-head { background: #3abfa2; color: #fff; }
  .mobile-nav li.open > .mnav-head .mnav-caret {
    border-color: #fff;
    transform: rotate(-135deg);
  }

  /* Sub-item list, hidden until its parent is opened */
  .mobile-nav .mnav-sub { max-height: 0; overflow: hidden; transition: max-height .3s ease; background: #fff; }
  .mobile-nav li.open > .mnav-sub { max-height: 1500px; }
  .mobile-nav .mnav-sub a {
    display: block;
    padding: 12px 16px 12px 30px;
    color: #0c4379;
    font-size: 15px;
    text-decoration: none;
    border-top: 1px solid #f0f0f0;
    font-family: "微軟正黑體", Verdana, Geneva, sans-serif;
  }
  .mobile-nav .mnav-sub a:active,
  .mobile-nav .mnav-sub a:hover { background: #eef7f5; color: #0c4379; }

  /* ---- Stack the two-column (left-menu / content) layouts ----
     The 20/80 (inner pages) and 65/80/35 (home) splits are the
     only cells with these exact width attributes. */
  td[width="20%"],
  td[width="80%"],
  td[width="65%"],
  td[width="35%"] {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
  }

  /* Left side-menu cleanup when stacked */
  [style*="LeftMenuBg"]     { background-image: none !important; height: auto !important; }
  td[height="553"]          { height: auto !important; }
  .LeftMenuBg               { height: auto !important; }

  /* Left sub-menu -> horizontal wrapping "chips".
     Stacked full-width it wasted vertical space and the fixed-width
     underline image looked broken. mobile-menu.js tags the menu's
     table with .mobile-sidemenu; here we reflow its rows into pills.
     (The table chain is flattened so the one-cell-per-row layout can
     flow inline and wrap.) */
  .mobile-sidemenu          { display: block; width: 100% !important;
                              margin: 0 0 6px; }
  .mobile-sidemenu tbody    { display: block; padding: 8px 6px; }
  .mobile-sidemenu tr       { display: inline-block; vertical-align: top; }
  .mobile-sidemenu td.LeftMenuLink {
    display: inline-block;
    height: auto !important;
    margin: 4px;
    padding: 0;
    background-image: none !important;
  }
  .mobile-sidemenu td.LeftMenuLink a {
    display: block;
    padding: 8px 14px;
    border: 1px solid #3abfa2;
    border-radius: 18px;
    background: #eef7f5;
    color: #0c4379;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.2;
  }
  .mobile-sidemenu td.LeftMenuLink a:hover,
  .mobile-sidemenu td.LeftMenuLink a:active {
    background: #3abfa2;
    color: #ffffff;
    text-decoration: none;
  }

  /* ---- News rows: wrap only the long title column ----------
     The legacy rows are [badge][title][date][views]. Forcing the
     whole row to wrap broke short cells mid-value ("531次點閱" ->
     three lines). Instead, ONLY the title wraps; the short atomic
     cells stay on one line and the title shrinks to give them room,
     so each row fits the phone width. */
  .NewsListTitle,
  .NewsListTitle a {
    white-space: normal !important;
    word-break: break-word;
  }
  /* Keep the date / view-count columns intact and compact. The
     :not(.NewsListTitle) guard is important — the title cell also
     carries a nowrap attribute, and we must NOT re-freeze it here. */
  #contentText3 td,
  .NewsBlock td {
    font-size: 13px;
    padding-left: 3px !important;
    padding-right: 3px !important;
  }
  #contentText3 td[nowrap]:not(.NewsListTitle),
  .NewsBlock td[nowrap]:not(.NewsListTitle) { white-space: nowrap !important; }

  /* ---- Old fixed-size video / social embeds ---------------- */
  object, embed, iframe { max-width: 100% !important; }
  .fb-page,
  .fb-page span,
  .fb-page iframe { max-width: 100% !important; }

  /* ---- Misc fixed-position tweaks from index inline CSS ---- */
  .topmarquee { left: 0 !important; width: 100% !important; }
  div.logo    { position: static !important; }
}


/* =============================================================
   PHONE polish  (<= 600px)
   ============================================================= */
@media screen and (max-width: 600px) {

  /* Slightly larger base text for small screens */
  .NewsListTitle a,
  .SystemTitle a   { font-size: 16px; }

  /* Section title bars: the left padding is sized for a desktop
     background graphic; trim it so headings aren't pushed off. */
  .PageSubTitle    { padding-left: 16px !important;
                     height: auto !important;
                     line-height: 1.4; }

  /* Home-page "system links" row: 6 fixed 12% cells are too tight.
     Float them so they wrap to 3 per row. */
  td.SystemTitle {
    display: inline-block !important;
    width: 31% !important;
    vertical-align: top;
    margin: 1%;
    box-sizing: border-box;
  }

  /* Comfortable tap targets + no iOS zoom-on-focus (>=16px). */
  input, select, textarea, button { font-size: 16px; }

  /* Trim oversized desktop paddings inside content cells */
  [style*="padding-left:20px"] { padding-left: 10px !important; }
}