/*
Theme Name: HC Packaging Vietnam
Theme URI: https://www.hcpackaging.vn/
Author: HC Packaging migration
Description: A faithful, manageable WordPress reconstruction of the HC Packaging Vietnam website.
Version: 1.0.5
Text Domain: hcpackaging-vn
*/

body.admin-bar .header { top: 32px; }
.hc-empty { min-height: 45vh; display: grid; place-items: center; }
.hc-form-status { display: block; margin-top: 10px; font-size: 14px; }
.hc-form-status.is-error { color: #b00020; }
.hc-form-status.is-success { color: #147ce0; }
.product-show .bigimg:not(.slick-initialized) > div:not(:first-child) { display: none; }
.hc-pagination .page-numbers { display: inline-block; margin: 0 3px; }
.hc-pagination .current { color: #147ce0; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Keep aspect-ratio image slots proportional without overriding icons, logos,
   banners, or source-authored fixed-size assets globally. */
.middleCenter {
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Desktop product galleries occupy the full visible left pane. Keep the
   original aspect-ratio slot as the minimum on wide/short screens, but expand
   it to the viewport height on taller screens and crop without distortion. */
@media (min-width: 1201px) {
  .product-show .left-hezi .bigimg span {
    min-height: calc(100vh - 135px);
  }

  .product-show .left-hezi .bigimg .middleCenter {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
  }
}

/* The legacy inner-page layout is rendered at 0.8 zoom in this range. Use the
   inverse viewport height so the fixed gallery still visually fills the pane. */
@media (min-width: 1201px) and (max-width: 1500px) {
  .product-show .left-hezi .bigimg span {
    min-height: calc(125vh - 135px);
  }
}

/* The homepage's large linked composition has fixed HTML width/height
   attributes. When its container narrows, override only that image's height
   so it keeps its 1300:895 source ratio. */
.home-main > .list .container > img[usemap] {
  display: block;
  width: 100%;
  height: auto;
}

/* Legacy news articles often include fixed HTML width and height attributes.
   Constrain only article-body media so its intrinsic ratio survives on mobile. */
.news-show .p img {
  max-width: 100%;
  height: auto !important;
}

/* Seven legacy articles contain editor-injected nowrap spans around complete
   paragraphs. Allow those paragraphs to wrap inside the mobile article body. */
.news-show .p [style*="text-wrap: nowrap"],
.news-show .p [style*="white-space: nowrap"] {
  white-space: normal !important;
  text-wrap: wrap !important;
  overflow-wrap: anywhere;
}

/* The source stylesheet declares a desktop footer width after its mobile rules,
   which clips the page when a desktop window is narrowed. */
@media (max-width: 1200px) {
  .footer .container {
    width: 100% !important;
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
  }
}

@media (max-width: 768px) {
  .home-main .show .item:nth-child(2) .img,
  .home-main .show .item:nth-child(4) .img {
    margin-right: 0;
  }
}

/* Do not scale whole page regions on narrow phones. Individual components
   already have responsive rules and remain sharper at their real CSS size. */
@media (max-width: 420px) {
  .inmain,
  .inbanner,
  .footer {
    zoom: 1 !important;
  }

  /* The legacy mobile banner relied on the section-level 0.8 zoom to reduce
     an intrinsic-width image. Once whole-section zoom is removed, size only
     the mobile banner to its viewport and keep its natural aspect ratio. */
  .inbanner .inbanner-slick .img2 img {
    display: block;
    width: 100%;
    height: auto;
  }
}

@media (max-width: 782px) {
  body.admin-bar .header { top: 46px; }
}