/* Audit fixes -- loaded on every page (both the layout.php template and the
   standalone includes/head.php template used by index.php / index-2.php).
   Kept as one small file, loaded last, so it reliably wins the cascade
   without having to hunt through the large legacy responsive.min.css. */

/* The footer is treated as just another 100vh "slide" by the full-page
   scroll system, and body/html have overflow:hidden, so any footer content
   taller than one screen (testimonials + links + copyright) gets clipped and
   never becomes reachable/visible. Let it keep its own natural height and
   scroll internally instead of being clipped. */
.section.FooterSection {
  height: 100vh;
  display: block;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Desktop-only NFT marketplace icons block (home page, 3rd section) --
   belt-and-braces hide on mobile/tablet widths in addition to the existing
   .hidden_on_mobile rule. */
@media only screen and (max-width: 1025px) {
  #section2 .worklogo,
  #section2 .NftHeading {
    display: none !important;
  }
}

/* Review platform badges (Google/Bark/Fiverr) in the header/mobile-menu
   ("Connect With Us" panel): the legacy responsive.min.css has a dozen
   duplicate breakpoint rules that shrink these logos down to as little as
   ~40x27px on mobile. At that size, combined with the white silhouette
   filter (brightness(0) invert(1)) used to recolor them, the fine detail in
   the wordmarks is lost and they read as blank white boxes. Force a legible
   minimum size and preserve aspect ratio instead of stretching. */
@media only screen and (max-width: 1025px) {
  .connectsocial2 ul li img,
  .TestimonialIcons img {
    width: auto !important;
    height: 34px !important;
    max-width: 100px !important;
    object-fit: contain !important;
  }
}
@media only screen and (max-width: 767px) {
  .TestimonialIcons ul {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .TestimonialIcons ul li {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
}

/* Same white background + fixed-percentage-width problem exists in several
   more of the legacy duplicate breakpoint blocks below 575.98px. The
   background sits behind the white silhouette logos (brightness(0)
   invert(1)) and hides them entirely (white-on-white); the width:12%/16%/24%
   forces each li into a box far narrower than the icon rendered inside it,
   so once the background stops masking that, the icons visibly overflow
   and crowd together unevenly. Neutralize both everywhere .TestimonialIcons
   li appears on mobile, regardless of which duplicate block is active at a
   given width. */
@media only screen and (max-width: 1025px) {
  .TestimonialIcons li {
    background: transparent !important;
    width: auto !important;
    padding: 0 !important;
  }
}

/* Main footer's review badge row (Google/Bark/Fiverr, full-color logos, not
   the white-silhouette treatment above). The legacy rule lays these out as a
   divider-separated inline-block list, which wraps unevenly and crowds the
   icons together on narrow phones. Rebuilt as a plain, self-contained flex
   row so it can't be affected by whatever the legacy rules do at any given
   breakpoint. */
@media only screen and (max-width: 767px) {
  .footerreviews {
    flex-wrap: wrap !important;
  }
  .footerreviews ul {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 16px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .footerreviews ul li {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .footerreviews img {
    width: auto !important;
    height: 34px !important;
    max-width: 90px !important;
    object-fit: contain !important;
    transform: none !important;
  }
}