/* Online Tools — print-only stylesheet (shared by all online-tool pages).
   Goals:
   - header mirrors the mobile header (logo + language/search/menu icons)
   - footer trimmed to contact + copyright, light panel with dark text
   - calculator pages print in a single (mobile-like) column, with results
     and reference tables kept and UI chrome (buttons/CTAs/nav) removed
   - content pages (modernization) print in a single column without anchor nav
   Loaded via <link media="print"> on each tool page. */

@media print {
  @page {
    size: A4 portrait;
    margin: 12mm;
  }

  html,
  body {
    height: auto !important;
    overflow: visible !important;
    background: #fff !important;
  }

  /* =========================================================
     Header — mirror the mobile header
     ========================================================= */
  .page-scroll-top {
    position: static !important;
  }

  .header-top,
  .menu-main-container,
  .nav-close-btn {
    display: none !important;
  }

  .header-nav-column {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .header-nav-logo {
    flex: none !important;
    width: auto !important;
  }

  .header-nav-logo img {
    display: block !important;
    height: 44px !important;
    width: auto !important;
  }

  .header-language {
    display: flex !important;
    align-items: center !important;
    margin-top: 0 !important;
  }

  .language-show {
    display: block !important;
  }

  .language-list {
    display: none !important;
  }

  .header-search {
    display: inline-flex !important;
  }

  .nav-show-btn {
    display: flex !important;
  }

  /* =========================================================
     Floating widgets (chat bubble, back-to-top, mobile bars)
     ========================================================= */
  .right-nav,
  .common-up-btn,
  .footer-fixed,
  salesmartly-chat-widget {
    display: none !important;
  }

  /* =========================================================
     Layout containers
     ========================================================= */
  .container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* =========================================================
     Hero — drop the black banner, keep the title in ink
     ========================================================= */
  .online_tools_hero {
    background: none !important;
    color: #111 !important;
    padding: 12px 0 !important;
  }

  .online_tools_hero h1 {
    color: #111 !important;
  }

  .online_tools_hero p {
    color: #444 !important;
  }

  .online_tools_hero .chip1row {
    display: none !important;
  }

  /* =========================================================
     Brand colours for surfaces that still print
     ========================================================= */
  body,
  .online_tools_block .results-head,
  .online_tools_block .rhead,
  .online_tools_block .step-num,
  .online_tools_block .step-n,
  .online_tools_block .mode-tab.active,
  .online_tools_block .formula-box,
  .online_tools_block .tstat,
  .modernization_block .tstat,
  .modernization_block .bar,
  .modernization_block .step .n {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* =========================================================
     Remove UI chrome that has no value on paper
     ========================================================= */
  .page-breadcrumbs,
  .form2-column,
  .news_cta,
  .topbanner-info,
  .topbanner-img,
  .show-top-nav,
  .online_tools_block .quote-cta,
  .online_tools_block .calc-btn,
  .online_tools_block .btn-row,
  .online_tools_block .result-actions,
  .online_tools_block .ractions,
  .online_tools_block .ref-tabs,
  .online_tools_block .presets,
  .online_tools_block .cta,
  .modernization_block .chiprow,
  .modernization_block .introcta {
    display: none !important;
  }

  /* =========================================================
     Calculator pages (.online_tools_block) — single column
     ========================================================= */
  .online_tools_block .steps-grid,
  .online_tools_block .calc {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .online_tools_block .field-row,
  .online_tools_block .frow,
  .online_tools_block .field-row-3,
  .online_tools_block .type-select-row,
  .online_tools_block .grid-2,
  .online_tools_block .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Results panels: static, kept on one page */
  .online_tools_block .results-panel,
  .online_tools_block .results-right,
  .online_tools_block .rpanel {
    position: static !important;
  }

  .online_tools_block .step-card,
  .online_tools_block .card,
  .online_tools_block .results-panel,
  .online_tools_block .rpanel {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* =========================================================
     Reference sections — show every pane, shrink the tables
     ========================================================= */
  .online_tools_block .ref-section,
  .online_tools_block .ref {
    padding: 16px 0 0 !important;
    margin-top: 16px !important;
  }

  /* "How this calculator works": print only the tab the user is currently
     looking at. Hidden panes stay hidden so the sheet matches the screen. */
  .online_tools_block .ref-pane {
    display: none !important;
  }

  .online_tools_block .ref-pane.active {
    display: block !important;
  }

  .online_tools_block .ref-table,
  .online_tools_block .dt,
  .online_tools_block .dtable,
  .online_tools_block .spectrum-table,
  .online_tools_block .equiv-table,
  .modernization_block .stable {
    font-size: 12px !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .online_tools_block .ref-table th,
  .online_tools_block .ref-table td,
  .online_tools_block .dt th,
  .online_tools_block .dt td,
  .modernization_block .stable th,
  .modernization_block .stable td {
    padding: 5px 8px !important;
  }

  .online_tools_block .formula-box,
  .online_tools_block .fml {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .online_tools_block .fml {
    font-size: 11px !important;
  }

  /* Wide tables scroll on screen; let them fit the page in print */
  .online_tools_block .table-scroll,
  .online_tools_block [style*="overflow-x"] {
    overflow: visible !important;
  }

  /* Related cards — three across */
  .online_tools_block .rel-grid {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 10px !important;
  }

  .online_tools_block .rel-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* =========================================================
     Girder pre-sizing estimator (.girder_pre_sizing_estimator)
     Its markup sits in .resources_block instead of .online_tools_block,
     so the calculator treatment above is mirrored here — same result
     on paper: single column, no UI chrome, results and tables kept.
     ========================================================= */
  .girder_pre_sizing_estimator .grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .girder_pre_sizing_estimator .frow {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .girder_pre_sizing_estimator .card,
  .girder_pre_sizing_estimator .rpanel {
    position: static !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .girder_pre_sizing_estimator .rhead {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .girder_pre_sizing_estimator .calc-btn,
  .girder_pre_sizing_estimator .ractions,
  .girder_pre_sizing_estimator .quote-cta {
    display: none !important;
  }

  .girder_pre_sizing_estimator .ref {
    padding: 16px 0 0 !important;
    margin-top: 16px !important;
  }

  .girder_pre_sizing_estimator .rtable {
    font-size: 12px !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .girder_pre_sizing_estimator .rtable td {
    font-size: 12px !important;
    padding: 5px 8px !important;
  }

  .girder_pre_sizing_estimator .disclaimer {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* =========================================================
     Content page (.modernization_block) — single column
     ========================================================= */
  .modernization_block {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .modernization_block .introgrid,
  .modernization_block .tgrid,
  .modernization_block .steps {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .modernization_block .introimg,
  .modernization_block .introimg img,
  .modernization_block .cimg,
  .modernization_block .cimg img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }

  .modernization_block .sec-head {
    break-after: avoid;
    page-break-after: avoid;
  }

  .modernization_block .tcard,
  .modernization_block .retrofits_tcard,
  .modernization_block .step,
  .modernization_block .qa {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .steel_section_properties_calculator .grid{ grid-template-columns: 1fr ;}
  /* =========================================================
     Footer — mobile-like minimal, light panel with dark text
     ========================================================= */
  .page-footer {
    margin-top: 24px !important;
    /* Keep the wordmark, contacts and copyright on one sheet. Without this the
       footer splits across two pages whenever a long page ends mid-block, and
       the logo is left stranded at the bottom of the previous page. */
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .footer-pro1,
  .footer-pro2,
  .footer-pro3,
  .footer-form-sec {
    display: none !important;
  }

  .footer-info-sec {
    background: #fff !important;
    padding: 16px 0 !important;
  }

  .footer-copyright {
    background: #fff !important;
    padding: 12px 0 !important;
  }

  .footer-contact {
    width: auto !important;
    margin-right: 0 !important;
  }

  .footer-contact-item,
  .footer-contact-item::before {
    color: #444 !important;
  }

  .copyright-txt {
    color: #444 !important;
  }

  .footer-sns-list .iconfont {
    color: #555 !important;
  }
}