/* =========================================
   列印專用樣式 (@media print) - 最終優化版 (包含 herobanner 背景圖與 friendlylink Logo)
   ========================================= */
@media print {
  /* 1. 隱藏所有互動 UI、導覽列、讀取畫面、裝飾特效，並徹底移除所有圓形與箭頭 */
  .loading-screen, .nav-wrapper, .button-container, .floating-circle-button,
  .circle-button2, .circle-button3, .slick-dots-wrapper, .line-vertical, 
  .moving-line, .moving-line2, .c-child, .cross-deco, .circle-button, 
  .circle-button-left, .circle-button-right, .arrow, /* 徹底刪除圓形與右側箭頭 */
  .back-to-top, .skip-link, .skip-link-u, .skip-link-c, .menu-overlay, 
  .theme-toggle, .hamburger, .nav-icons, .floating-block .rectangle-container,
  .slick-cloned {
    display: none !important;
  }

  /* 2. 重設全域背景與邊界，預設強制大部分文字為黑色 
     (已將 .banner 移除，避免洗掉背景圖) */
  body, html, main, section, .main-bg, .post, .service, .slogan, .leader, 
  .policy, .join, .friendlylink, .footer, .join-info, .service-card-large, 
  .service-card-small, .floating-block {
    background: none !important;
    background-color: #fff !important;
    color: #000 !important;
  }

  * {
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* 3. 調整網頁區塊為適合 A4 列印的靜態排版 */
  section {
    page-break-inside: avoid;
    margin: 20px 0 !important;
    padding: 0 !important;
    height: auto !important;
  }

  .floating {
    position: static !important;
    margin: 0 !important;
    transform: none !important;
  }

  .floating-block {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    border: 1px solid #ccc !important;
    padding: 20px !important;
    margin: 20px 0 !important;
    box-sizing: border-box !important;
  }

  /* 4. 輪播圖 (Slick Carousel) - 只顯示當前畫面上看到的那一張 */
  .slick-slider, .slick-list, .slick-track {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
  }
  
  .slick-slide {
    display: none !important; 
  }

  .slick-slide.slick-current {
    display: block !important; 
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    position: static !important;
    transform: none !important;
    margin: 0 0 20px 0 !important;
  }

  /* 針對 newsbanner 的優化列印排版 */
  .newsbanner {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 20px 0 !important;
    page-break-inside: avoid;
  }

  .newsbanner .slick-slide {
    display: none !important;
    width: 100% !important;
  }

  .newsbanner .slick-slide.slick-current {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    height: auto !important;
    transform: none !important;
    opacity: 1 !important;
    page-break-inside: avoid;
  }

  .newsbanner .slide.slick-current,
  .newsbanner .slide.really-center,
  .slide.slick-current {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border: 1px solid #999 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    page-break-inside: avoid;
    box-sizing: border-box !important;
    background: #fff !important;
    position: relative !important;
  }

  .newsbanner .slide.slick-current img,
  .newsbanner .slide.really-center img,
  .slide.slick-current img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  .newsbanner .slide.slick-current .overlay,
  .newsbanner .slide.slick-current .gradient,
  .newsbanner .slide.slick-current .gradient-overlay,
  .newsbanner .slide.really-center .overlay,
  .newsbanner .slide.really-center .gradient,
  .newsbanner .slide.really-center .gradient-overlay {
    display: none !important;
  }

  .newsbanner .slide-box,
  .newsbanner .slide.slick-current .slide-box,
  .newsbanner .slide.really-center .slide-box {
    position: static !important;
    width: 100% !important;
    padding: 15px !important;
    bottom: auto !important;
    left: auto !important;
    background: #fff !important;
    z-index: auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .newsbanner .meta,
  .newsbanner .slide-box .meta,
  .newsbanner .slick-current .meta,
  .newsbanner .really-center .meta {
    opacity: 1 !important;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin-bottom: 10px !important;
    z-index: auto !important;
  }

  .newsbanner .meta .tag,
  .newsbanner .slide-box .meta .tag {
    background: #f0f0f0 !important;
    color: #000 !important;
    border: 1px solid #999 !important;
    border-radius: 15px !important;
    padding: 3px 12px !important;
    font-size: 11pt !important;
  }

  .newsbanner .meta .date,
  .newsbanner .slide-box .meta .date {
    color: #666 !important;
    opacity: 1 !important;
    font-size: 10pt !important;
  }

  .newsbanner .caption,
  .newsbanner .slide-box .caption,
  .newsbanner .slick-current .caption,
  .newsbanner .really-center .caption {
    opacity: 1 !important;
    pointer-events: auto !important;
    display: block !important;
    width: 100% !important;
    color: #000 !important;
    z-index: auto !important;
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12pt !important;
    line-height: 1.5 !important;
  }

  /* 針對長官介紹 (Leader Carousel) 的當前項目重排 */
  .leader-item.slick-current {
    border: 1px solid #ccc !important;
    padding: 15px !important;
    max-width: 350px !important;
    margin: 0 auto 20px auto !important; 
    text-align: center !important;
    page-break-inside: avoid;
    box-sizing: border-box !important;
  }
  .leader-item.slick-current img {
    max-width: 100% !important;
    height: auto !important;
    margin-bottom: 10px !important;
  }
  .leader-item.slick-current .leader-text {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 0 !important;
  }

  /* ★ Herobanner 背景圖與文字優化 ★ */
  .herobanner .banner {
    display: none !important; /* 預設隱藏所有 */
  }

  /* 只顯示當前輪播，或者當 Slick 尚未載入時的第一張 */
  .herobanner .banner.slick-current,
  .herobanner .banner.slick-active,
  .banner-slider:not(.slick-slider) .banner:first-child {
    display: block !important;
    /* 強制瀏覽器印出背景圖 */
    -webkit-print-color-adjust: exact !important; 
    print-color-adjust: exact !important; 
  }

  .herobanner .title-area {
    position: static !important;
    transform: none !important;
    padding: 40px !important;
    margin-bottom: 20px !important;
  }

  /* 既然背景印出圖片了，上面的文字必須強制轉白以確保可讀性 */
  .herobanner .title-area,
  .herobanner .title-area * {
    color: #fff !important;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.8) !important; /* 增加陰影避免圖片太白看不清 */
  }

  /* 5. 清除遮罩與漸層覆蓋層 */
  .gradient, .overlay, .gradient-overlay, .overlay-dim, 
  .leader-overlay-white, .leader-overlay-blue {
    display: none !important;
  }

  /* 6. 其他並排或網格佈局調整 */
  .service-box, .friendlylink-box, .join-container {
    display: block !important;
  }

  .service-card-large, .service-card-small, .join-info, .join-video {
    width: 100% !important;
    border: 1px solid #ccc !important;
    margin-bottom: 15px !important;
    page-break-inside: avoid;
    height: auto !important;
    box-sizing: border-box !important;
  }

  .service-card-grid {
    display: block !important;
    height: auto !important;
  }

  .logo-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px !important;
  }

  /* ★ friendlylink 的 Logo 強制顯示 ★ */
  .logo-icon {
    opacity: 1 !important;
    /* 若 Logo 本身為白圖，取消註解下一行可轉為黑色以利在白紙顯示 */
    /* filter: brightness(0) !important; */ 
    
    /* 強制瀏覽器即使未勾選「列印背景圖形」，也要把行內 background-image 印出來 */
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .policy .list {
    display: block !important;
    margin-top: 20px !important;
  }

  .policy .list-row {
    margin-bottom: 10px !important;
    page-break-inside: avoid;
  }

  /* 7. 便民服務白底圖示修復 (白色轉為黑色) */
  .service-card-small .icon-svg,
  .service-card-small img {
    filter: brightness(0) !important;
    display: inline-block !important;
  }

  .service-card-small .icon-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* =========================================
     8. 解決 category1, category2 與 btnbar1(btn1) 在有背景圖形時的相衝問題
     ========================================= */
  .post-links .category1,
  .post-links .category2,
  .post .btn1,
  .btnbar1 .btn1,
  #btnbar1 .btn1,
  .btnbar2 .btn2{
    color: #fff !important;
    background-color: #1440A1 !important; /* 強制使用安全的國防深藍底色 */
    border: 1px solid #1440A1 !important;
    display: inline-block !important;
    visibility: visible !important;
    /* 精髓：強制瀏覽器在列印時完美保留此處的背景色彩與對比度 */
    -webkit-print-color-adjust: exact !important; 
    print-color-adjust: exact !important; 
  }

  /* 確保按鈕內部的文字 span 與後綴 icon 也一併強制為純白 */
  .post .btn1 span, .post .btn1::after,
  .btnbar1 .btn1 span, .btnbar1 .btn1::after,
  #btnbar1 .btn1 span, #btnbar1 .btn1::after,
  .btnbar2 .btn2 span, .btnbar2 .btn2::after,
  #btnbar2 .btn2 span, #btnbar2 .btn2::after {
    color: #fff !important;
  }
}