/*
 Theme Name: Starscream Child
 Theme URI: https://thebeartraxs.com/
 Description: Permanent child theme for the Starscream parent theme.
 Author: Eric Kowalewski
 Author URI: https://thebeartraxs.com
 Version: 1.0.0
 Template: starscream
 Text Domain: starscream-child
 Tags: child-theme, woocommerce, responsive
*/

/* 
  You can put your overrides below. This file is versioned with filemtime in functions.php, 
  so updates bust cache automatically.
*/

/* ===== Banners: full-width + centered, mobile-friendly crop ===== */
.child-header-banner,
.child-footer-banner {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden; /* enables clean side-cropping on small screens */
}

.child-header-banner { margin-bottom: 24px; }
.child-footer-banner { margin-top: 24px; }

.child-header-banner__link,
.child-footer-banner__link {
  display: block;
  width: 100%;
  height: auto;
}

.child-header-banner__img,
.child-footer-banner__img {
  display: block;
  width: 100%;
  height: auto;            /* Desktop: show full image */
  object-position: center; /* Always keep the center as the focal point */
}

/* ===== Mobile & tablet: crop sides, keep center ===== */
@media (max-width: 768px) {
  .child-header-banner__img,
  .child-footer-banner__img {
    height: 200px;       /* banner strip height for mobile/tablet */
    object-fit: cover;   /* crops the sides instead of squashing */
  }
}

@media (max-width: 480px) {
  .child-header-banner__img,
  .child-footer-banner__img {
    height: 160px;       /* a bit shorter on very small phones */
  }
}