/*
 * Header fallback for the time before NitroPack's delayed stylesheets load.
 * Exclude this file from NitroPack's CSS delay/optimization.
 *
 * :where() rules have zero specificity, so theme, Bootstrap and NitroPack rules
 * override them wherever this file ends up in the cascade.
 * The other rules repeat the final Bootstrap/theme values, because they must beat
 * NitroPack's mobile critical CSS and stay true afterwards. Keep them in sync.
 */

/*
 * Legal bar: hidden until the theme styles it (theme sets display:flex up to 992px).
 * Starting from display:none also stops the bar sliding away when style.css loads,
 * because transitions don't run from display:none.
 */
:where(.mobile-licenta-18--container) {
  display: none;
}

/* Submenus: index.js opens them with an inline display on mobile. */
:where(header .dropdown-menu) {
  display: none;
}

/*
 * Sliding offer bar (views/blocks/lp-sliding-bar.twig). Same rules as
 * assets/halloween-2024/styles/style.css, minus the marquee animation.
 */
.page-template-template_lp .halloween-banner-ctn {
  display: none !important;
}

:where(header) {
  position: relative;
}

.halloween-banner-ctn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
  height: 40px;
  background-color: #f7b733;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
}

.halloween-banner-ctn .halloween-banner {
  color: #000;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
}

.halloween-banner-ctn .halloween-banner a {
  font-weight: 700;
  color: #000;
  text-decoration: none;
}

.halloween-banner-ctn .halloween-banner span {
  font-size: 15px;
  display: inline-block;
  margin: 0 40px;
}

.halloween-banner-ctn .halloween-banner span img {
  margin-bottom: 0;
}

.halloween-banner-ctn .halloween-banner span .icon {
  width: 31px;
}

.halloween-banner-ctn .halloween-banner span .angles {
  width: 25px;
}

.halloween-banner-ctn .halloween-banner span a {
  display: flex;
  align-items: center;
}

.halloween-banner-ctn .halloween-banner span a div {
  margin: 0 8px;
}

@media screen and (min-width: 768px) {
  .olympics-calendar.halloween-banner-ctn {
    height: 41px;
  }

  /* Extra class: has to beat NitroPack's inline 15px/40px rule on tablets. */
  .olympics-calendar.halloween-banner-ctn .halloween-banner span {
    margin: 0 160px;
    font-size: 18px;
  }
}

@media (min-width: 992px) {
  /* Bootstrap lg utilities, same order as Bootstrap: none has to come last. */
  header .d-lg-block {
    display: block !important;
  }

  header .d-lg-flex {
    display: flex !important;
  }

  header .d-lg-none {
    display: none !important;
  }

  header .py-lg-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Burger menu banner: the theme hides it from 991px up. */
  header .navbar .nav-banner {
    display: none;
  }

  /* Bootstrap navbar-expand-lg: horizontal menu instead of the stacked mobile one. */
  header .navbar-expand-lg {
    flex-wrap: nowrap;
  }

  header .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  header .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }

  /* Menu items render 40px tall once the theme has loaded. */
  :where(header .bottom-header .nav-item),
  :where(header .bottom-header .nav-link) {
    min-height: 40px;
  }

  :where(header .bottom-header .nav-link) {
    display: flex;
    align-items: center;
  }
}