/*
 * kkbc-header-1.css - header and hero fixes (findings S2 and L-018 of the website theme cleanup), 2026-10-13.
 * Loaded after every other stylesheet of the theme (inc/kkbc-header.php). No older .css or .js file was changed.
 *
 *   S2   (1) The header hides by its own height, and the sub-navigation moves with it.
 *        (2) No line break in the desktop menu; less space between the items from 1025 to 1440 px.
 *        (3) The breakpoint of the script in footer.php is now the CSS value (1024), see footer.php.
 *   L-018  A dark layer of 45% under the hero text (home hero and inner hero).
 *
 * A later change of this file gets a new file name (kkbc-header-2.css), because the CDN keeps a file
 * under its old name. No !important is used in this file (no old rule that it beats has one).
 *
 * Desktop menu = the widths above 1024 px. At 1024 px and below, responsive.css:93 hides <header> and shows the
 * mobile bar; nothing in this file changes that. No closed mobile panel is hidden here, so visibility/display is
 * not touched.
 */

/* ---- S2 (1): hide by the real height ------------------------------------------------------
   The scroll script (footer.php, function scrollHide) adds the class "sticky" to <header> and to .MobileMenu when
   the visitor scrolls down, and removes it when the visitor scrolls up. A second script adds "Fixed" to <header>
   after 50 px of scroll (style.css:175: position fixed).
   Hidden state, selector 1:   header.sticky
     Old rule: style.css:176  header.sticky { transform: translate(0px, -51px) }  - the header is 71 px high (92 px when
     the menu wrapped), so 20 to 41 px stayed on the screen. Same selector, this file loads later, so it wins.
     translateY(-100%) is a percentage of the element's own height, so it is right at every height.
   Hidden state, selector 2:   header.sticky + .NavbarArea   (the sub-navigation, the next sibling of <header>)
     Old rule: style.css:177  header.sticky+.NavbarArea { transform: translate(0px, -51px) }.
     Above 1024 px the sub-navigation is position:static (responsive.css:94 makes it sticky only at 1024 px and below),
     so its "top" has no effect. Its visible top edge is moved up by the height of the header, which puts it at the top
     of the window (top = 0) when the header is gone. A percentage cannot be used, because it would be a percentage of
     the sub-navigation's own height; so the height of the header is the variable --kkbc-header-h below.
     (js/custom-ajax.js:108 sets an inline "top" on .NavbarArea; an inline style cannot be beaten without !important,
     so this rule does not use top.)
   The mobile bar is not changed: responsive.css:104 and :105 already move .MobileMenu by 90 px (it is 81 px high)
   and the sub-navigation by 80 px, so this part only applies above 1024 px. */
header.sticky {
  transform: translateY(-100%);
}

/* Height of the desktop header: 25 px padding above and below the menu link plus one line of text.
   14px font, line height 1.5 = 21px  ->  71px (measured on the live site at 1200 and 1400 px: 71).
   From 1700 to 2000 px custom.css:1 and :6 set the menu font to 1vw, and the line to 1.5vw  ->  50px + 1.5vw
   (measured at 1800 px: 77). */
:root {
  --kkbc-header-h: 71px;
}
@media (min-width: 1700px) and (max-width: 2000px) {
  :root {
    --kkbc-header-h: calc(50px + 1.5vw);
  }
}
@media (min-width: 1025px) {
  header.sticky + .NavbarArea {
    transform: translateY(-71px); /* for a browser without CSS variables: the height of the header at most widths */
    transform: translateY(calc(-1 * var(--kkbc-header-h)));
  }
}

/* ---- S2 (2): no line break in the menu, less space from 1025 to 1440 px ------------------------
   Old rule: style.css:122  header .navbar .navbar-nav .nav-item .nav-link { padding: 25px 40px 25px 20px }
   (60 px of space beside each of the 6 text items, no white-space rule). From 1100 to 1320 px the items did not fit,
   and "Contact us" broke into two lines (header 92 px). Same selector, this file loads later, so it wins.
   What I assumed (measured with the real font, DM Sans 500 14px, on the live sites at 1200 px; text width without
   padding): German 77+81+77+52+135 (Was wir tun, Wer wir sind, Ressourcen, Karriere, Kontaktieren Sie uns) + region
   "Germany" 61+24 (icon); Japanese 114+100+57+56+85 + region "Japan" 40+24; English 79+77+69+52+73 + "United
   States" 89+24. With the space below, the menu needs 801 px (German, the longest), 771 px (Japanese), 758 px (English).
   Space that the menu can use at 1100 px with the values below: 1100 - 140 (container) - 100 (logo and its
   margin) - 10 (collapse padding) = 850 px. At 1025 px the container is made narrower (see the last rule of this
   block). The font size is not changed.
   The values are the ones that responsive.css:24 and :84 already use at 992 to 1170 px: link padding 10px left and
   30px right, language item margin 20px, logo 80px with a 20px margin, 10px padding right of the menu box. */
@media (min-width: 1025px) {
  header .navbar .navbar-nav .nav-item .nav-link {
    white-space: nowrap;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  /* beats style.css:122 (same selector). The Search item has its own, more specific rule (style.css:125), so it
     keeps its padding; the arrow of the other items moves with the new padding (rule after this one). */
  header .navbar .navbar-nav .nav-item .nav-link {
    padding-inline: 10px 30px;
  }
  /* beats style.css:123 (the arrow: right 15px); the pair 30px padding / 10px arrow is the one of responsive.css:28 */
  header .navbar .navbar-nav .nav-item .nav-link:after {
    inset-inline-end: 10px;
  }
  /* beats style.css:128 (.nav-item.Language, margin 0 30px 0 0). Keeps the old direction: space after the item. */
  header .navbar .navbar-nav .nav-item.Language {
    margin-inline: 0 20px;
  }
  /* beats style.css:117 (logo: margin 0 150px 0 0, max-width 100px) */
  header .navbar .navbar-brand {
    margin-inline: 0 20px;
    max-width: 80px;
  }
  /* beats style.css:120 (padding 0 50px 0 0) */
  header .navbar .navbar-collapse {
    padding-inline: 0 10px;
  }
}
@media (min-width: 1025px) and (max-width: 1099px) {
  /* beats style.css:113 .container (padding 0 70px): at 1025 px the menu needs 801 px, the box gives
     1025 - 140 - 110 = 775 px with 70 px beside it, and 855 px with 30 px (the value of responsive.css:108). */
  header .container {
    padding-inline: 30px;
  }
}

/* ---- L-018: dark layer of 45% under the hero text -------------------------------------------
   Home hero. Old rule: style.css:845  .VideoArea:before { background: rgb(0 0 0 / 15%); position: absolute;
   top: -71px; left: 0; width: 100%; height: 100vh }. Two faults: (a) the layer has no z-index, and .VideoBox
   (position:relative, later in the page) is painted over it, so the 15% is under the video and cannot darken it;
   (b) it starts 71 px above the box, so its lower 71 px stay without a layer, where the text of the hero sits.
   The same selector (.VideoArea:before) now has: 45% black; top 0 and the full height of .VideoArea; z-index 1,
   which is above .VideoBox and .SliderArea (position:relative, z-index auto) and below .TypingArea
   (style.css:852, z-index 1, later in the page) and .Home_Header (style.css:181, z-index 9, the white menu).
   pointer-events:none so the layer never takes a click. No text shadow is added. */
.VideoArea:before {
  background: rgb(0 0 0 / 45%);
  top: 0;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Inner hero. Old rule: style.css:199  .privacy_breadcum:after { background: linear-gradient(180deg,
   rgba(35,35,35,0) 19.51%, rgba(10,50,40,0.6) 75.85%); position: absolute; bottom: 0; height: 100%; width: 100% }.
   The layer is already under the text (figcaption has z-index 1, style.css:202) and above the picture, but it is
   0% dark down to 19.5% of the height and below 45% down to about 62% of it (the old gradient reaches 45% at
   62%), so a text higher in the picture had less. The
   gradient now starts at 45% black and ends at the same colour and 60% as before, so the layer is never below 45%.
   Same selector, this file loads later. search.php and search_template.php switch the layer off (content:none) in
   their own style tag; that still works, because this rule sets no content. */
.privacy_breadcum:after {
  background: linear-gradient(180deg, rgb(0 0 0 / 45%) 0%, rgba(10, 50, 40, 0.6) 75.85%);
}