/* Pusertif-inspired public navigation: utility language row above a floating nav pill. */
#header {
  height: 128px;
  border: 0;
  display: block;
  padding: 0;
  background: transparent;
  transition: height .28s ease, padding .28s ease, background-color .28s ease;
}

#header::before { display: none; }

.public-header-utility {
  height: 38px;
  overflow: hidden;
  transition: height .28s ease, opacity .2s ease;
}

.public-header-utility > .container {
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  max-width: 1320px;
}

.public-language-segment {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  box-shadow: 0 8px 20px rgba(48,0,0,.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.public-language-segment a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 50px;
  min-height: 27px;
  padding: 4px 10px;
  border-radius: 999px;
  color: rgba(255,255,255,.82);
  font: 700 11px/1 "Poppins", sans-serif;
  text-decoration: none;
}

.public-language-segment a:hover,
.public-language-segment a.active {
  color: #8f1717;
  background: #fff;
}

.public-language-segment img {
  width: 19px;
  height: 13px;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(16,24,40,.12);
}

#header .public-header-main {
  height: 82px;
  max-width: 1320px;
  gap: 14px;
  margin-top: 4px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(117,7,7,.46);
  box-shadow: 0 16px 34px rgba(48,0,0,.15);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  transition: height .28s ease, margin .28s ease, background-color .28s ease, box-shadow .28s ease;
}

#header .logo { flex: 0 0 auto; padding-left: 8px; }
#header .logo img { max-height: 50px; }

#header .navbar { margin-left: auto; }
#header .navbar > ul {
  gap: 3px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
}

#header .navbar > ul > li > a {
  min-height: 40px;
  padding: 9px 12px;
  border-radius: 999px;
  color: rgba(255,255,255,.88);
}

#header .navbar > ul > li > a::before { display: none; }
#header .navbar > ul > li:hover > a,
#header .navbar > ul > li > a.active {
  color: #fff;
  background: rgba(255,255,255,.17);
}

#header.header-scrolled {
  height: 76px;
  padding-top: 5px;
  background: rgba(113,7,7,.94);
  box-shadow: 0 10px 28px rgba(48,0,0,.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#header.header-scrolled .public-header-utility { height: 0; opacity: 0; }
#header.header-scrolled .public-header-main {
  height: 64px;
  margin-top: 0;
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  box-shadow: none;
}
#header.header-scrolled .logo img { max-height: 42px; }

.public-language-mobile { display: none; }

#header.header-solid {
  height: 76px;
  padding-top: 5px;
  background: #930f13;
  box-shadow: 0 8px 24px rgba(48,0,0,.18);
}
#header.header-solid .public-header-utility { display: none; }
#header.header-solid .public-header-main { height: 64px; margin-top: 0; background: rgba(255,255,255,.08); box-shadow: none; }
#header.header-solid .public-language-mobile { display: inline-flex; }

@media (max-width: 1199px) {
  #header .navbar > ul > li > a { padding-inline: 9px; font-size: 12px; }
  #header .public-header-main { margin-inline: 12px; width: calc(100% - 24px); }
}

@media (max-width: 991px) {
  #header,
  #header.header-scrolled,
  #header.header-solid { height: 72px; padding-top: 5px; }
  #header .public-header-utility { display: none; }
  #header .public-header-main,
  #header.header-scrolled .public-header-main,
  #header.header-solid .public-header-main { height: 62px; margin: 0 10px; width: calc(100% - 20px); padding: 8px 12px; }
  #header .logo img { max-height: 41px; }
  .public-language-mobile { display: inline-flex; padding: 2px; }
  .public-language-mobile a { min-width: 35px; min-height: 27px; padding: 4px 7px; }
  #header .navbar { order: 3; }
  #header .navbar-mobile { margin: 0; }
  #header .navbar-mobile > ul { display: block; border-radius: 8px; background: #fff; }
  #header .navbar-mobile > ul > li > a { color: #344054; border-radius: 6px; }
}

@media (max-width: 575px) {
  .public-language-mobile a { min-width: 31px; font-size: 10px; }
  #header .public-header-actions { gap: 5px; }
}
