/*
 * kkbc-home-nav-1.css - the mobile bar of the home page is transparent at the top (issue #271, 2026-10-19).
 * Same behaviour as the desktop home page: css/style-2.css:181-196 (.Home_Header, class "Fixed" after 50 px of scroll).
 * No new script. The scroll handler in footer.php already adds the class "Fixed" to .MobileMenu at 50 px and removes it
 * again; this file only styles the state without that class. Same threshold as the desktop (50 px).
 * Widths: 1024 px and below (css/responsive-2.css:91 shows .MobileMenu and hides <header> there). Home page only (body.home).
 * A later change of this file gets a new file name (kkbc-home-nav-2.css), because the CDN keeps a file under its old name.
 * No !important is used in this file.
 *
 * State at the top (no class "Fixed"): transparent bar, no shadow, white logo, white hamburger, white search and language
 * icons and text. The pictures are made white with filter: brightness(0) invert(1), as the desktop does for its search icon
 * (style-2.css:186). State after 50 px ("Fixed"): none of these rules apply, so today's bar shows.
 *
 * Layout. The bar is 81 px high and in the flow (style-2.css:1794), so the hero started 81 px lower. The bar now lies over the
 * hero: the hero moves up by the height of the bar (margin-top) and its picture box grows by the same height (padding-top),
 * the text box moves down by the same height. The text stays where it was; the page keeps its height (scrollHeight +0).
 * After 50 px the bar is position:fixed and out of the flow; inc/kkbc-scroll-height.php then gives the body a padding-top of
 * 81 px (class kkbc-bar-fixed), which holds the hero in the same place. So nothing moves when the class "Fixed" changes.
 * The open menu (.MobileNav, z-index 101, background #0D1317) covers the bar, so white on white cannot happen.
 */
@media screen and (max-width: 1024px) {
  body.home .MobileMenu:not(.Fixed) {
    background-color: transparent;
    box-shadow: none;
  }
  body.home .MobileMenu:not(.Fixed) .MobileClick button {
    background: transparent;
  }
  body.home .MobileMenu:not(.Fixed) .MobileClick img,
  body.home .MobileMenu:not(.Fixed) .MobileLogo img,
  body.home .MobileMenu:not(.Fixed) .MobileSearch .Search img,
  body.home .MobileMenu:not(.Fixed) .MobileSearch .Language:not(.show) .nav-link img {
    filter: brightness(0) invert(1);
  }
  body.home .MobileMenu:not(.Fixed) .MobileSearch .Language:not(.show) .nav-link {
    color: #fff;
  }

  body.home .VideoArea {
    margin-top: -81px;
  }
  body.home .VideoArea .VideoBox {
    box-sizing: content-box;
    padding-top: 81px;
  }
  body.home .VideoArea .TypingArea {
    top: 81px;
  }
}