/* Mobile responsive styles for www.innovarad.tw */
@media only screen and (max-width: 768px) {

  /* === 防止橫向溢出 === */
  html {
    background-color: #fff !important;
    background-image: none !important;
    background: #fff !important;
  }

  body {
    max-width: 100% !important;
    background-color: #fff !important;
    background-image: none !important;
    background: #fff !important;
  }

  /* 防止橫向溢出但不破壞 fixed header：用 #main / #wrapper 包住即可 */
  #wrapper, #main {
    overflow-x: hidden !important;
  }

  body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    background-color: #fff !important;
    margin: 0 !important;
    padding-top: 54px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 移除 #wrapper margin-top 造成的色條 */
  #wrapper {
    margin-top: 0 !important;
  }

  /* === 覆蓋 Twenty Ten 所有固定寬度 912px 的元素 === */
  #wrapper,
  #main,
  #branding,
  #colophon,
  #access,
  #access .menu-header,
  #access div.menu,
  div.menu,
  #site-title,
  #site-generator,
  #site-description {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
  }

  /* === Container 修正 float + 負 margin === */
  #container {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }

  /* #content padding 37px 是 twentyten 預設造成切半的元兇 */
  #content {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border: none !important;
    border-right: none !important;
    border-left: none !important;
    box-shadow: none !important;
  }

  /* 確保主要結構元素都沒有殘留 border */
  #wrapper,
  #main,
  #container,
  #branding {
    border: none !important;
    box-shadow: none !important;
  }

  /* 隱藏側邊欄 */
  #primary,
  #secondary {
    display: none !important;
  }

  /* === Header === */
  #header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background-color: #E8412A !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: 500 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  }

  #masthead {
    padding: 10px 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #branding {
    text-align: center;
  }

  #site-title {
    font-size: 110% !important;
    font-weight: 400 !important;
    margin: 0 !important;
    line-height: 2.2 !important;
  }

  #site-title,
  #site-title a,
  #site-title span,
  #site-description {
    color: #fff !important;
  }

  /* 隱藏 banner 圖片 */
  #masthead img,
  #header > img,
  #branding img {
    display: none !important;
  }

  /* === 漢堡按鈕 === */
  #mobile-menu-toggle {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    width: 36px !important;
    height: 36px !important;
    background: transparent !important;
    border: none !important;
    padding: 8px 6px !important;
    cursor: pointer !important;
    z-index: 100 !important;
    box-sizing: border-box !important;
  }

  #mobile-menu-toggle span {
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    background-color: #fff !important;
    margin: 4px 0 !important;
    border-radius: 1px !important;
    transition: transform 0.2s, opacity 0.2s !important;
  }

  body.mobile-menu-open #mobile-menu-toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg) !important;
  }

  body.mobile-menu-open #mobile-menu-toggle span:nth-child(2) {
    opacity: 0 !important;
  }

  body.mobile-menu-open #mobile-menu-toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg) !important;
  }

  /* === Header 縮小（漢堡按鈕在左、標題置中） === */
  #header {
    min-height: 54px !important;
    height: auto !important;
  }

  #masthead {
    min-height: 54px !important;
    padding: 0 !important;
    position: relative !important;
  }

  #branding {
    padding: 0 50px !important;
    text-align: center !important;
  }

  #site-title {
    line-height: 54px !important;
    font-size: 110% !important;
    font-weight: 700 !important;
  }

  /* === 導覽列：左側滑出 drawer，寬約 50% === */
  #access {
    position: fixed !important;
    top: 0 !important;
    left: -220px !important;
    width: 50% !important;
    max-width: 220px !important;
    height: 100% !important;
    background-color: #912314 !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: 2px 0 12px rgba(0,0,0,0.3) !important;
    z-index: 1000 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
    transform: none !important;
    transition: left 0.28s ease-out !important;
    will-change: left !important;
  }

  body.mobile-menu-open #access {
    left: 0 !important;
  }

  /* 背景遮罩 */
  #mobile-menu-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0,0,0,0.4) !important;
    z-index: 999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.28s ease-out, visibility 0.28s !important;
  }

  body.mobile-menu-open #mobile-menu-backdrop {
    opacity: 1 !important;
    visibility: visible !important;
  }

  #access ul,
  #access ul.menu {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: block !important;
    width: 100% !important;
  }

  #access li,
  #access ul li {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    position: static !important;
  }

  #access li a,
  #access ul li a {
    display: block !important;
    padding: 12px 18px !important;
    font-size: 90% !important;
    font-weight: 700 !important;
    text-align: left !important;
    color: #fff !important;
    text-decoration: none !important;
    background: transparent !important;
  }

  #access li a:active {
    background-color: rgba(255,255,255,0.15) !important;
  }

  /* 選單 emoji */
  #access .menu-emoji {
    display: inline-block !important;
    width: 24px !important;
    margin-right: 10px !important;
    font-size: 110% !important;
    text-align: center !important;
  }

  /* 隱藏二級選單 */
  #access ul ul {
    display: none !important;
  }

  /* skip link */
  .skip-link {
    display: none !important;
  }

  /* === 文章列表 === */
  .hentry {
    padding: 16px 0 !important;
    border-bottom: none !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #content .entry-title,
  #content h1.entry-title,
  #content h2.entry-title,
  #content h3.entry-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin: 0 0 10px !important;
  }

  #content .entry-title a {
    font-weight: 700 !important;
    font-size: inherit !important;
  }

  .entry-title a {
    text-decoration: none !important;
    color: #E8412A !important;
  }

  /* 全站連結品牌色 */
  #content a,
  .entry-content a {
    color: #E8412A !important;
  }

  .entry-content a:visited {
    color: #b8331f !important;
  }

  .entry-content {
    font-size: 95% !important;
    line-height: 1.7 !important;
    color: rgba(0,0,0,0.72) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  .entry-meta,
  .entry-utility {
    font-size: 75% !important;
    color: rgba(0,0,0,0.4) !important;
    margin: 5px 0 !important;
  }

  /* === 圖片 === */
  img {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
  }

  /* === 強制覆蓋所有 inline width（文章內容有大量 style="width:615px" 等） === */
  #content *,
  .entry-content *,
  .post * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #content div[style*="width"],
  .entry-content div[style*="width"],
  #content p[style*="width"],
  .entry-content p[style*="width"],
  #content span[style*="width"],
  .entry-content span[style*="width"] {
    width: auto !important;
    max-width: 100% !important;
  }

  /* wp-caption 有 !important，必須再覆蓋 */
  .wp-caption,
  .wp-caption img,
  .wp-caption-text,
  .alignnone,
  .aligncenter,
  .alignleft,
  .alignright {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
    display: block !important;
  }

  /* 文章內的標題避免太大 */
  .entry-content h1,
  .entry-content h2,
  .entry-content h3,
  .entry-content h4,
  #content h1,
  #content h2,
  #content h3,
  #content h4 {
    font-size: 110% !important;
    line-height: 1.4 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    margin: 18px 0 8px !important;
  }

  /* 文章內所有元素強制斷字 */
  .entry-content,
  .entry-content p,
  .entry-content div,
  .entry-content span,
  .entry-content li {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* === 分頁 === */
  .navigation,
  .navigation *,
  .nav-previous,
  .nav-next,
  .nav-previous a,
  .nav-next a,
  #nav-above,
  #nav-below {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    background-image: none !important;
  }

  .navigation,
  #nav-above,
  #nav-below {
    padding: 15px 0 !important;
    text-align: center !important;
    font-size: 90% !important;
    overflow: hidden !important;
    margin-top: 25px !important;
    margin-bottom: 10px !important;
  }

  /* single post 文章下方分隔線去除（避免與上一篇文章 navigation 間橫線） */
  body.single .hentry,
  body.single-post .hentry,
  body.page .hentry {
    border-bottom: none !important;
  }

  /* 取代 Facebook like 按鈕的灰色空框：改為 2px 淡灰線 */
  .fb-like {
    display: block !important;
    height: 2px !important;
    min-height: 2px !important;
    max-height: 2px !important;
    background-color: #e8e8e8 !important;
    border: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
    overflow: hidden !important;
  }
  .fb-like > *,
  .fb-like iframe,
  .fb-like span {
    display: none !important;
  }

  /* fb-like 的父 div 容器（width:615 h:62 原灰色分隔線）— 改為透明，只保留 fb-like 內部 3px 灰線 */
  div:has(> .fb-like) {
    max-width: 100% !important;
    width: auto !important;
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* 文章內 615x90 / 615x40 的空白 placeholder div（舊版 FB like 按鈕保留空間）— 隱藏
     注意：只抓 height:90px/40px 且白色背景，不抓 width:615px，避免誤殺同寬的灰色分隔線（height:62px） */
  div[style*="height:90px"],
  div[style*="height: 90px"],
  div[style*="height:40px"][style*="#ffffff"],
  div[style*="height: 40px"][style*="#ffffff"] {
    display: none !important;
  }

  /* 文章內 width:615px 的寬度容器強制縮為 100%（如 height:62px 的灰色分隔線等） */
  #content div[style*="width:615px"],
  #content div[style*="width: 615px"],
  .entry-content div[style*="width:615px"],
  .entry-content div[style*="width: 615px"] {
    width: auto !important;
    max-width: 100% !important;
  }

  /* 文章內 height:62px 灰色分隔線：清為透明，只保留 fb-like 內部 3px 灰線 */
  div[style*="height:62px"],
  div[style*="height: 62px"] {
    height: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }

  /* fb-like 上下 margin 縮小，避免灰線與其他內容間留白過多 */
  .fb-like {
    margin: 10px 0 !important;
    height: 2px !important;
    min-height: 2px !important;
    max-height: 2px !important;
    background-color: #e8e8e8 !important;
  }

  /* === 單篇文章 === */
  h1.entry-title,
  .post-title {
    font-size: 126% !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    padding: 12px 0 !important;
  }

  /* === Footer：僅保留版權資訊 #site-generator，其他全清 === */
  #site-info {
    display: none !important;
  }

  #footer,
  #colophon,
  #site-generator {
    width: 100% !important;
    padding: 15px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    font-size: 80% !important;
    color: rgba(0,0,0,0.5) !important;
    text-align: center !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    background-image: none !important;
    clear: both !important;
  }

  #footer-widget-area,
  #footer .widget-area,
  #footer .widget {
    float: none !important;
    width: 100% !important;
    margin: 0 0 15px !important;
    box-sizing: border-box !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* === 表格橫向捲動 === */
  .entry-content table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }
}