.header {
  position: sticky;
  top: 0;
  z-index: 10001;
  width: 100%;
}

.navbar.is_transparent {
  background-color: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 0 var(--line);
  transition: transform 0.15s ease;
}

/* Single posts only (see js/hero-header.js): slides the header's
   visible bar out of the way for the brief scroll range where it
   would otherwise overlap the hero title, then straight back once
   past it. Applied to .navbar (not .header, which stays sticky) -
   transform on a position:sticky element itself doesn't render
   reliably in some engines; its non-sticky child does. */
.header.header--hidden .navbar.is_transparent {
  transform: translateY(-100%);
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  gap: 20px;
  padding: 14px 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
}

.list-home {
  border-radius: 8px;
  background-color: var(--orange);
  padding: 10px 22px;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #fff;
  transition: background-color 0.3s;
  box-shadow: 0 2px 8px rgba(193, 89, 28, 0.3);
}

.list-home:hover {
  background-color: var(--orange-dark);
}

.house-icon {
  display: none;
}

.list-home-content {
  display: flex;
  align-items: center;
}

.list-home-text {
  display: flex;
  flex-direction: column;
}

.list-home-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.3px;
}

.list-home-subtitle {
  font-size: 14px;
  font-weight: 400;
  color: rgb(0, 0, 0);
  margin-top: -4px;
}

.logo img {
  height: 34px;
  width: auto;
  display: block;
}

/* Primary menu (desktop) */
.main-nav {
  flex: 1;
}

.main-nav__links {
  display: flex;
  gap: 26px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav__links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}

.main-nav__links a:hover {
  color: var(--teal-dark);
  border-bottom-color: var(--teal);
}

/* Header search */
.header-search form.search-form {
  display: flex;
  align-items: center;
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 4px 6px 4px 14px;
}

.header-search .search-field {
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ink);
  width: 130px;
  outline: none;
}

.header-search .search-submit {
  border: none;
  background: var(--teal);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 16px;
  cursor: pointer;
}

.header-search .search-submit:hover {
  background: var(--teal-dark);
}

.auth_menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  min-width: 0;
}

.menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-item {
  margin-right: 15px;
}

.menu-item:last-child {
  margin-right: 0;
}

.menu-item a {
  text-decoration: none;
  color: inherit;
  font-size: 14px;
}

.sign_up {
  background-color: var(--teal);
  transition: background-color 0.2s ease 0s;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  min-height: 38px;
  border-radius: 3px;
}

.sign_up:hover {
  background-color: var(--teal-dark);
}

.sign_in {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
}

/* Mobile Responsive */
@media (max-width: 1920px) and (min-width: 769px) {
  .navigation {
    display: none !important;
  }

  .auth_menu {
    display: flex;
  }
}

@media (max-width: 1245px) {
  .header .container {
    width: 95%;
  }
}

/* For screens 992px or less */
@media (max-width: 992px) {
  .navigation {
    display: block !important;
  }

  .auth_menu {
    display: none;
  }

  .main-nav,
  .header-search {
    display: none;
  }

  .menu-item {
    margin-right: 0px;
  }
}

/* Quick css for presentation */
.navigation {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navigation__logo a {
  text-decoration: none;
}

.navigation__logo p {
  color: #ffffff;
  font-weight: bolder;
  text-transform: uppercase;
  text-decoration: none;
}

.navigation__links {
  position: absolute;
  width: 300px;
  height: 100vh;
  left: -1000px;
  top: 0;
  z-index: 2;
  transition: left 0.3s ease-in;
  background: var(--teal);
  color: #ffffff;
  list-style: none;
  box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.35);
  padding: 0;
  margin: 0;
}

.navigation__links li {
  padding: 5px 10px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.navigation__links a {
  color: #ffffff;
  text-decoration: none;
}

#hamburger {
  visibility: hidden;
}

.navigation__button {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1px solid var(--ink);
  cursor: pointer;
}

.navigation__button span {
  position: absolute;
  left: 5px;
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: var(--ink);
  transform-origin: center;
  transition: opacity 0.2s linear, all 0.3s linear;
}

.navigation__button span:nth-of-type(1) {
  top: 10px;
}

.navigation__button span:nth-of-type(2) {
  top: 15px;
}

.navigation__button span:nth-of-type(3) {
  top: 20px;
}

/* Here comes the magic */

#hamburger:checked~.navigation__links {
  /* Or it can be "input[type="checkbox"] ~ .navigation__links" */
  left: 0;
}

/* Styles for our "close" button */
#hamburger:checked~.navigation__button span:nth-of-type(1) {
  transform: rotate(45deg);
  top: 15px;
}

#hamburger:checked~.navigation__button span:nth-of-type(2) {
  opacity: 0;
}

#hamburger:checked~.navigation__button span:nth-of-type(3) {
  transform: rotate(-45deg);
  top: 15px;
}