/* Classic navigation — carried over from the previous lettings.co.uk site.
   Background colour comes from config('nav.background') via an inline style,
   so this file only handles layout, type and hover behaviour. */

.navigation-classic {
  padding-top: 0;
  padding-bottom: 0;
  color: #333;
  border-radius: 0;
  box-shadow: none;
  border: none;
  margin-bottom: 0;
}

/* The classic bar carries a long link row, so it needs more width than the
   Bootstrap .container caps at. Both the top bar and the link row use this so
   the phone number stays aligned with the last link. */
.navigation-classic .nav-classic-container {
  width: 100%;
  max-width: 1800px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 24px;
  padding-left: 24px;
}

/* Full-height bar on desktop only — on mobile it sizes to the wordmark so the
   collapsed bar is not left with 144px of empty space. */
@media (min-width: 1200px) {
  .navigation-classic {
    min-height: var(--nav-height, 144px);
  }
}

@media (max-width: 1199.98px) {
  .navigation-classic .nav-classic-container {
    padding-right: 16px;
    padding-left: 16px;
  }
}

.navigation-classic .navbar-brand {
  text-decoration: none;
  font-weight: 700;
  font-family: arial, sans-serif;
  color: #fff;
  height: 100px;
  font-size: 50px;
  line-height: 85px;
}

.navigation-classic .navbar-brand:hover,
.navigation-classic .navbar-brand:focus {
  color: #fff !important;
}

/* Between 1200px and ~1400px the wordmark at full size pushed the last link
   past the right edge of the bar, so it steps down before the link row does. */
@media (max-width: 1500px) {
  .navigation-classic .navbar-brand {
    font-size: 42px;
  }
}

@media (max-width: 1300px) {
  .navigation-classic .navbar-brand {
    font-size: 34px;
  }
}

@media (max-width: 768px) {
  .navigation-classic .navbar-brand {
    height: 75px;
    font-size: 30px;
    line-height: 75px;
  }
}

@media (max-width: 500px) {
  .navigation-classic .navbar-brand {
    font-size: 25px;
  }
}

/* Links */
.navigation-classic .navbar-nav .nav-link {
  color: #fff !important;
  font-family: arial, sans-serif;
  font-weight: 700;
  padding-left: 18px;
  padding-right: 18px;
  position: relative;
  white-space: nowrap;
}

.navigation-classic .navbar-nav .nav-link:focus,
.navigation-classic .navbar-nav .nav-link:hover {
  color: #fff !important;
  background-color: transparent;
}

.navigation-classic .navbar-nav .nav-link::after {
  content: '';
  opacity: 0;
  transition: all 0.2s;
  height: 2px;
  width: calc(100% - 36px);
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 18px;
}

.navigation-classic .navbar-nav .nav-link:hover::after {
  opacity: 1;
}

.navigation-classic .navbar-nav .nav-link.active,
.navigation-classic .navbar-nav .nav-link.active:focus,
.navigation-classic .navbar-nav .nav-link.active:hover {
  color: #e6e6e6 !important;
  box-shadow: none;
  background: none;
  pointer-events: none;
}

/* Tighten spacing when the link set gets long */
@media (max-width: 1500px) {
  .navigation-classic .navbar-nav .nav-link {
    padding-left: 12px;
    padding-right: 12px;
  }
  .navigation-classic .navbar-nav .nav-link::after {
    width: calc(100% - 24px);
    left: 12px;
  }
}

@media (max-width: 1350px) {
  .navigation-classic .navbar-nav .nav-link {
    padding-left: 9px;
    padding-right: 9px;
    font-size: 0.9rem;
  }
  .navigation-classic .navbar-nav .nav-link::after {
    width: calc(100% - 18px);
    left: 9px;
  }
}

/* Top bar */
.navigation-classic .topbar-link {
  position: relative;
}

.navigation-classic .topbar-link:hover {
  color: #fff !important;
}

.navigation-classic .topbar-link::after {
  content: '';
  opacity: 0;
  transition: all 0.2s;
  height: 2px;
  width: 100%;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
}

.navigation-classic .topbar-link:hover::after {
  opacity: 1;
}

/* Toggler */
.navigation-classic .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.6);
}

.navigation-classic .navbar-toggler:hover,
.navigation-classic .navbar-toggler:focus {
  background: none;
  box-shadow: none;
}

/* Below the desktop breakpoint the inline link row never opens — the burger
   opens the template's slide-in drawer instead (see below). */
@media (max-width: 1199.98px) {
  .navigation-classic .navbar-collapse {
    display: none !important;
  }
}

/* Saved-properties badge */
.navigation-classic .nav-saved-badge {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 10px;
  background-color: #fff;
  color: rgb(var(--brand-color));
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

/* The template's centred mobile bar is not rendered in this style. */
.navigation-classic + .navbar-mobile {
  display: none !important;
}

/* Slide-in mobile drawer — the current template's mobile menu.
   ui-improvements.css carries the link, close-button, overlay and badge styles;
   this block is the base geometry that normally lives in nav.css, merged with
   the template's slide-in overrides so load order cannot flip them back. */
.full-screen-menu {
  position: fixed;
  top: 0;
  left: auto;
  right: -320px;
  width: 300px;
  max-width: 85vw;
  height: 100%;
  background-color: rgb(var(--brand-color));
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow-y: auto;
  padding: 80px 30px 30px 30px;
  box-sizing: border-box;
  z-index: 99999;
  transition: right 0.3s ease;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
}

.full-screen-menu.show {
  display: flex;
  right: 0;
}

/* The drawer is mobile-only; the desktop link row takes over at 1200px. */
@media (min-width: 1200px) {
  .full-screen-menu,
  .mobile-nav-overlay {
    display: none !important;
  }
}