/* ==========================================================================
   WorldAutoSteel – print.css  (v2)
   Loaded by the theme as worldautosteel-style-print-css (media="print").
   Covers: home, Why Steel + child pages, About Us, listings (articles,
   technical publications, webinars, press releases), single press release,
   technical publication, webinar, contact.
   ========================================================================== */

@page {
  size: A4;
  margin: 15mm 14mm 18mm;
}

/* Bootstrap 4 print styles force a 992px min-width and A3 pages – undo. */
html,
body,
.container {
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 10.5pt;
  line-height: 1.45;
  color: #000;
  background: #fff !important;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Prevent a blank trailing page */
html,
body,
#page,
.site,
.min-vh-100 {
  height: auto !important;
  min-height: 0 !important;
}

/* Tracking pixels, plugin leftovers and anything else after the page wrapper */
body > *:not(#page) {
  display: none !important;
}

/* No trailing margin after the last block of content */
.main-content > .row:last-child > [class*="col"] > :last-child,
.main-content > .row:last-child > [class*="col"] > :last-child > :last-child {
  margin-bottom: 0 !important;
}


.container {
  /*padding-left: 0 !important;
  padding-right: 0 !important;*/
}

.main-content * {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ==========================================================================
   1. Hide site chrome, plugins and interactive bits
   ========================================================================== */
#wpadminbar,
.skip-link,
.cky-overlay,
.cky-btn-revisit-wrapper,
.cky-consent-container,
.cky-modal,
.a2a_kit,
#addtoany,
#wfboxOverlay,
#wordfenceBox,
.gl-modal-overlay,
.gl-play-icon,

/* header: everything except the logo */
#masthead .header-nav,
#masthead .navbar-toggler,
#masthead .navbar-lang,
#masthead .members-login,
#masthead .col-sm-auto.col-auto,

/* footers */
.top-footer,
.site-footer,
.pb-5:empty,

/* carousel controls */
.carousel-indicators,
.carousel-control-prev,
.carousel-control-next,
.slider-controls,

/* listings: pagination, "Read more", tile chevrons */
.paginationNav,
.pagination,
.readmore,
.tile-overview-chevron,

/* white icons on coloured teaser cards would print invisible */
.announcement_icon,

/* contact form (and any other CF7 form) */
.wpcf7,

/* empty caption scaffolding, empty columns, empty contact fields */
.caption-bg,
.caption-text:empty,
figcaption:has(.caption-text:empty),
.main-content [class*="col"]:empty,
.contacts .telephone:empty,
.contacts .email:empty,

/* page tools (print/copy buttons) and anything else marked */
.page-tools,
.no-print {
  display: none !important;
}

/* ==========================================================================
   2. Header: logo only, breadcrumbs as a small context line
   ========================================================================== */
#masthead .site-header {
  display: block !important;
  background: none !important;
  padding: 0 0 4mm !important;
  margin: 0 0 4mm !important;
  border-bottom: 0.75pt solid #0056a7;
}

#masthead .header-logo {
  display: block;
  height: 12mm;
  width: auto;
}

#masthead .row {
  margin: 0 !important;
}

.site-breadcrumbs .breadcrumb {
  background: none !important;
  padding: 0 !important;
  margin: 0 0 3mm !important;
  font-size: 8pt;
  color: #555;
}

.site-breadcrumbs a {
  color: #555 !important;
  text-decoration: none !important;
}

/* ==========================================================================
   3. Colour handling
   Coloured blocks (bg-azure, bg-orange, bg-steelblue-100 …) use white text.
   Strip the backgrounds and turn the text dark so nothing disappears and
   pages don't use a cartridge of ink.
   ========================================================================== */
.main-content [class*="bg-"] {
  background: none !important;
}

.main-content [class*="bg-"],
.main-content [class*="bg-"] *,
.main-content .text-white {
  color: #000 !important;
}

.main-content .border-white {
  border-color: #0056a7 !important;
}

.heading-style-1,
.main-content [class*="bg-"] .heading-style-1 {
  color: #0056a7 !important;
}

/* ==========================================================================
   4. Grid: A4 is narrower than Bootstrap's md breakpoint, so keep the
   intended multi-column layouts instead of stacking everything.
   ========================================================================== */
.main-content .row {
  display: flex !important;
  flex-wrap: wrap !important;
}

.main-content .col-md-6 {
  flex: 0 0 50% !important;
  max-width: 50% !important;
}

.main-content .col-md-12,
.main-content .col {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* Home: three teaser boxes side by side */
.main-content > .row > .col-md-4 {
  flex: 0 0 33.333% !important;
  max-width: 33.333% !important;
}

/* Card grids, tiles and contact boxes */
.main-content .row-cols-lg-4 > .col {
  flex: 0 0 25% !important;
  max-width: 25% !important;
}

.main-content .row-cols-lg-3 > .col {
  flex: 0 0 33.333% !important;
  max-width: 33.333% !important;
}

/* ==========================================================================
   5. Hero carousels → plain page title
   (.banner-carousel on content pages, #main-carousel on home / listings)
   Always print the first slide, whichever one is showing on screen.
   ========================================================================== */

.main-content .carousel,
.main-content .carousel-inner,
.main-content .carousel-item,
.main-content .carousel .card,
.main-content .carousel-caption,
.main-content .card-img-overlay {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  top: auto !important;
  bottom: auto !important;
  overflow: visible !important;
}

.main-content .carousel-caption > :last-child {
  margin-bottom: 0 !important;
}

.main-content .carousel.mb-4 {
  margin-bottom: 10mm !important;
}

.main-content .carousel {
  margin-bottom: 4mm !important;
  --caption-width: auto !important;
  --banner-height: auto !important;
  --banner-tab-height: auto !important;
  --banner-mobile-height: auto!important;  
}

.main-content .carousel-item {
  display: none !important;
}

.main-content .carousel-item:first-child {
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
  float: none !important;
  margin: 0 !important;
}

/* Hide the banner photos. Delete this rule to print them. */
.main-content .carousel .embed-responsive,
.main-content .carousel .embed-responsive * {
  display: none !important;
  height: 1px;
}

.main-content .carousel .card {
  border: 0 !important;
}

.main-content .carousel-caption,
.main-content .card-img-overlay {
  position: static !important;
  padding: 0 !important;
  text-align: left !important;
}

.main-content .carousel-caption h3,
.main-content .carousel-caption .h1 {
  font-size: 22pt;
  line-height: 1.15;
  margin: 0 0 2mm;
  border: 0 !important;
}

.main-content .carousel-caption p,
.carousel-caption-text {
  display: block !important;
    color:#000 !important;
  font-size: 11pt;
  margin: 0 0 2mm;
}

.main-content .carousel-caption hr {
  border-top: 0.75pt solid #0056a7;
  margin: 0;
  width: 25mm;
}

/* Page title on single posts / simple pages */
.page-header {
  padding: 0 !important;
  margin: 0 0 3mm !important;
}

.page-title {
  font-size: 20pt;
  line-height: 1.2;
  margin: 0 !important;
}

/* ==========================================================================
   6. Teaser boxes (announcement_teaser, homepage_teaser)
   ========================================================================== */
.main-content .announcement_teaser,
.main-content .homepage_teaser {
  background: #eef4fa !important;
  border: 0 !important;
  border-left: 3pt solid #0056a7 !important;
  border-radius: 0 !important;
  break-inside: avoid;
  page-break-inside: avoid;
}

.announcement_teaser .card-body,
.homepage_teaser .card-body {
  padding: 3mm 4mm !important;
}

.announcement_teaser .row,
.homepage_teaser .row {
  margin: 0 !important;
}

.announcement_teaser [class*="col"],
.homepage_teaser [class*="col"] {
  padding: 0 !important;
  flex: 1 1 auto !important;
  max-width: 100% !important;
}

.announcement_teaser h3,
.announcement_teaser .h5,
.homepage_teaser .h5 {
  font-size: 11pt;
  line-height: 1.4;
  margin: 0;
}

.announcement_teaser h4,
.announcement_teaser h5 {
  font-size: 11pt;
  margin: 0 0 1.5mm;
}

/* ==========================================================================
   7. Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5 {
  break-after: avoid;
  page-break-after: avoid;
  break-inside: avoid;
  page-break-inside: avoid;
}

.main-content h2,
.main-content .h2 { font-size: 15pt; }

.main-content h3,
.main-content .h3 { font-size: 13pt; }

.main-content h4 { font-size: 11.5pt; }

.main-text p,
.main-text li {
  orphans: 3;
  widows: 3;
}

.mb-4 {
  margin-bottom: 4mm !important;
}

.news-date {
  font-size: 9pt;
  color: #555;
  margin-bottom: 3mm;
}

/* ==========================================================================
   8. Links: underline, and show the address of real text links
   (not card titles, logos or image links)
   ========================================================================== */
.main-content a {
  color: #0056a7 !important;
  text-decoration: underline;
}

.main-content a[href^="http"]:not(.stretched-link):not(.embed-responsive):not(:has(img))::after {
  content: " (" attr(href) ")";
  font-size: 7.5pt;
  color: #555;
  word-break: break-all;
}

/* Bootstrap's stretched-link overlay */
.stretched-link::after {
  content: none !important;
}

/* Buttons inside content print as plain links */
.main-content .btn {
  display: inline !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #0056a7 !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   9. Images and figures
   ========================================================================== */
img {
  max-width: 100% !important;
  height: auto !important;
}

figure,
.figure-image {
  margin: 0 0 4mm !important;
  break-inside: avoid;
  page-break-inside: avoid;
}

/* stop a half-column image from towering over its text */
.col-md-6 .figure-image img {
  max-height: 80mm;
  width: auto !important;
  object-fit: contain;
}

/* WordPress-aligned images in post content */
.main-text img.alignleft {
  float: left;
  max-width: 55mm !important;
  margin: 0 5mm 3mm 0;
}

.main-text img.alignright {
  float: right;
  max-width: 55mm !important;
  margin: 0 0 3mm 5mm;
}

.main-text img.aligncenter {
  display: block;
  max-width: 90mm !important;
  margin: 0 auto 4mm;
}

.main-text::after {
  content: "";
  display: table;
  clear: both;
}

/* ==========================================================================
   10. Card listings (home "What's new", articles, technical publications,
   webinars, "Why Steel" cards)
   ========================================================================== */
.news-items-blocks .row {
  margin-left: -1.5mm !important;
  margin-right: -1.5mm !important;
}

.news-items-blocks .row > .col {
  padding: 0 1.5mm !important;
  margin-bottom: 3mm !important;
}

.news-items-blocks .card {
  border: 0.5pt solid #ccc !important;
  border-radius: 0 !important;
  break-inside: avoid;
  page-break-inside: avoid;
}

.news-items-blocks .card .row {
  margin: 0 !important;
  padding: 1.5mm 2.5mm 0 !important;
}

.news-items-blocks .card-body {
  padding: 1.5mm 2.5mm 2.5mm !important;
}

.news-items-blocks .card-title {
  font-size: 9.5pt;
  line-height: 1.3;
  margin: 0;
}

.news-items-blocks .card-title a {
  color: #000 !important;
  text-decoration: none;
}

.news-items-blocks .date {
  font-size: 8pt;
  color: #555;
}

/* ==========================================================================
   11. Press release listing rows
   ========================================================================== */
.news-cateogry-listing {
  padding: 0 0 3mm !important;
  margin: 0 0 3mm !important;
  border-bottom: 0.5pt solid #ccc;
  break-inside: avoid;
  page-break-inside: avoid;
}

.news-cateogry-listing h3 {
  font-size: 12pt;
  margin: 0 0 1mm;
}

.news-cateogry-listing .news-date {
  margin-bottom: 1.5mm;
}

.news-cateogry-listing p {
  margin: 0;
}

/* ==========================================================================
   12. Tiles (Why Steel overview)
   ========================================================================== */
.main-content .tile-blocks-container .row-cols-lg-4>* {
        -ms-flex: 0 0 33.333333% !important;
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
}

.tile-block {
  border: 0.5pt solid #ccc !important;
  padding: 3mm !important;
  break-inside: avoid;
  page-break-inside: avoid;
}

.tile-block h3 {
  font-size: 11pt;
  margin: 0;
}

.tile-block a {
  text-decoration: none !important;
}

.tile-block .figure-image {
  margin: 2mm 0 0 !important;
}

/* ==========================================================================
   13. About Us: stats table, contact boxes, member logos
   ========================================================================== */
/* Layout tables (border="0") get no grid lines */
table[border="0"] td,
table[border="0"] th {
  border: 0 !important;
}

.table-responsive {
  overflow: visible !important;
}

.main-text table h1 {
  font-size: 20pt;
  margin: 1mm 0;
}

.main-text table h4 {
  font-size: 9.5pt;
  margin: 0;
}

.contacts-box-column {
  margin-bottom: 4mm !important;
}

.contacts-box {
  border: 0.5pt solid #ccc !important;
  border-radius: 0 !important;
  padding: 3mm !important;
  margin-bottom: 0px !important;
  height: 100%;
  break-inside: avoid;
  page-break-inside: avoid;
}

.top-contact {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto ;
    grid-auto-flow: row;
    grid-template-areas:
             "contact-image"
             "name"             
              "job-title"
              "organization"
              "bottom-contact" !important;
}

.contacts-box .contact-image {
  float: none !important;
  margin: 0 0 10px 0 !important;
}

.contacts-box .contact-image img {
  max-height: 100% !important;
  width: 100% !important;
  margin-bottom: 2mm !important;
}


.contacts-box h4 {
  font-size: 11pt;
  margin: 0 0 1mm;
  border: 0 !important;
  padding-left: 0px;
}

.contacts-box .name {
    margin-bottom: 5px !important;
}

.contacts-box .jobtitle,
.contacts-box .organization {
  font-size: 9pt;
}

.image-list .image-list-item {
  flex: 0 0 25% !important;
  max-width: 25% !important;
  margin-bottom: 4mm !important;
  break-inside: avoid;
  page-break-inside: avoid;
}
.image-list .image-list-item div{
  height: auto !important;
  padding: 5mm !important;
}
.image-list .image-list-item img {
  max-height: 100% !important;
  width: 100% !important;
  width: auto !important;
  object-fit: contain;
}

.image-list .image-list-item h5 {
  font-size: 8pt;
  margin: 1.5mm 0 0;
}

.image-list .image-list-item a {
  text-decoration: none !important;
  color: #000 !important;
}

/* ==========================================================================
   14. Speaker / document teasers (webinar pages)
   ========================================================================== */
.doc-teaser-item {
  break-inside: avoid;
  page-break-inside: avoid;
  border-top: 0 !important;
}

.doc-teaser-item .doc-teaser-item-image {
  /*flex: 0 0 25% !important;
  max-width: 25% !important;*/
  max-width: 240px !important;
}

.doc-teaser-item .col-md {
  flex: 1 1 0% !important;
  /*max-width: 75% !important;*/
}

.doc-teaser-item .flex-square {
  margin: 0 !important;
}

.doc-teaser-item .card-body {
  padding: 0 0 0 4mm !important;
}

.doc-teaser-item h4 {
  font-size: 11pt;
}

/* ==========================================================================
   15. Galleries and data tables
   ========================================================================== */
.gl-gallery {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 3mm !important;
}

.gl-item {
  break-inside: avoid;
}

table {
  width: 100% !important;
  border-collapse: collapse;
  font-size: 9pt;
}

thead {
  display: table-header-group;
}

tr {
  break-inside: avoid;
  page-break-inside: avoid;
}

th,
td {
  border: 0.5pt solid #999;
  padding: 1.5mm 2mm !important;
}

/* ==========================================================================
   16. Page-break helpers (add as extra CSS classes in the editor)
   ========================================================================== */
.page-break-before { break-before: page; page-break-before: always; }
.page-break-after  { break-after: page;  page-break-after: always; }
.avoid-break       { break-inside: avoid; page-break-inside: avoid; }