/* ============ FONTS (must stay the first line, same as home.css) ============ */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;600&family=DM+Sans:wght@400;500;700&display=swap");

/* =====================================================
   SITE-NAV.CSS - the shared top navigation (partials/site_nav.html).
   Used by base.html and by the full-page templates (explore,
   details, add accommodation) so every page has the same nav.
   All classes start with "site-" so they never clash with page CSS.
   ===================================================== */

:root {
  --hf-forest: #24483f;
  --hf-cream: #faf7f0;
  --hf-sage: #dce6da;
  --hf-button: #374d47;
  --hf-middle: #263f38;
  --hf-footer: #1b332d;
  --hf-terracotta: #c8795a;
  --hf-text: #292d2a;
  --hf-grey: #4f5651;
}

.site-header,
.site-header * {
  box-sizing: border-box;
}

/* ============ HEADER ============ */

/* Sticky: stays at the top while scrolling.
   Distance from the page edge copied from home:
   left/right = body 12px + page-frame 8px + hero 28px = 48px (more on screens wider than 1424px)
   top        = 12px padding only (no margin), the same small gap as the home page;
                it is also the cream band above the pill while scrolling */
.site-header {
  position: sticky;
  top: 0;
  z-index: 2000; /* above page content, the dropdown (20) and Leaflet maps (panes/controls up to 1000) */
  margin-top: 0;
  padding: 12px max(48px, calc((100% - 1328px) / 2)) 12px;
  background: var(--hf-cream);
}

.site-nav {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  padding: 8px 8px 8px 24px;
  border: 1px solid rgba(36, 72, 63, 0.1);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(36, 72, 63, 0.08);
  color: var(--hf-forest);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  color: var(--hf-forest);
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.site-brand-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--hf-sage);
  color: var(--hf-forest);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 19px;
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.site-nav-links a {
  padding: 10px 16px;
  border-radius: 999px;
  color: var(--hf-forest);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav-links a:hover {
  background: var(--hf-sage);
  color: var(--hf-forest);
}

/* "Become A Host": small outlined pill (logged-in users who are not admins) */
.site-nav-links .site-nav-host {
  margin-left: 6px;
  padding: 8px 18px;
  border: 1.5px solid #24483F;
  border-radius: 999px;
  color: #24483F;
  transition: background-color 150ms ease, color 150ms ease;
}

.site-nav-links .site-nav-host:hover {
  background: #24483F;
  color: #FAF7F0;
}

/* ============ USER MENU (approved profile design, scaled to home proportions) ============ */

.site-user-menu {
  position: relative;
  flex-shrink: 0;
}

.site-user-summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border: 1.5px solid #24483f;
  border-radius: 999px;
  background: #dce6da;
  color: #24483f;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

/* hide the little ▸ triangle browsers add to <summary> */
.site-user-summary::-webkit-details-marker {
  display: none;
}

.site-user-avatar {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: #24483f;
  color: #faf7f0;
}

.site-user-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.site-user-chevron {
  flex: none;
  transition: transform 0.15s ease;
}

.site-user-menu[open] .site-user-chevron {
  transform: rotate(180deg);
}

.site-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: flex;
  width: 232px;
  box-sizing: border-box;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border: 1px solid rgba(36, 72, 63, 0.12);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 14px 36px rgba(36, 72, 63, 0.16);
}

.site-user-dropdown a {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 12px;
  padding: 0px 14px;
  border-radius: 14px;
  color: #24483f;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.site-user-dropdown a svg{
  flex: none;
}

.site-user-dropdown a:hover {
  background: #dce6da;
}

.site-user-dropdown a.site-user-current {
  background: #24483f;
  color: #ffffff;
}

.site-user-divider {
  height: 1px;
  margin: 4px 14px;
  background: rgba(36, 72, 63, 0.12);
}

/* The page you are on */
.site-nav-links a[aria-current="page"],
.site-nav-links a[aria-current="page"]:hover {
  background: transparent;
  color: var(--hf-forest);
  text-decoration: underline;
  text-decoration-color: var(--hf-terracotta);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* ============ SIGN UP / LOG IN (visitors, copied from the landing page) ============ */

.site-auth {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
}

.site-auth-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 17px;
  border: 1px solid var(--hf-button);
  border-radius: 999px;
  background: #fff;
  color: var(--hf-button);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.site-auth-button:hover {
  background: var(--hf-sage);
  color: var(--hf-forest);
}

.site-auth-button-dark {
  background: var(--hf-button);
  color: #fff;
}

.site-auth-button-dark:hover {
  background: var(--hf-middle);
  color: #fff;
}

/* ============ TABLET ============ */

@media (max-width: 1024px) {
  .site-nav {
    min-height: 60px;
    padding-left: 18px;
  }

  .site-brand {
    font-size: 20px;
  }

  .site-nav-links {
    gap: 0;
    font-size: 13px;
  }

  .site-nav-links a {
    padding: 8px 10px;
  }

  .site-nav-links .site-nav-host {
    padding: 7px 14px;
  }
}

/* ============ MOBILE ============ */

@media (max-width: 600px) {
  /* home on mobile: body 5px + page-frame 5px + hero 12px = 22px */
  .site-header {
    margin-top: 0;
    padding: 12px 22px 10px;
  }

  .site-nav {
    flex-wrap: wrap;
    min-height: 0;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 24px;
  }

  .site-brand {
    font-size: 19px;
  }

  .site-brand-icon {
    width: 27px;
    height: 27px;
  }

  /* the links move to their own row under the logo and the user menu */
  .site-nav-links {
    order: 3;
    width: 100%;
    justify-content: space-between;
    padding-top: 4px;
    font-size: 13px;
  }

  .site-nav-links a {
    padding: 7px 8px;
  }

  /* 4 links can be wider than a phone: let them wrap instead of overflowing */
  .site-nav-links {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .site-nav-links .site-nav-host {
    margin-left: 0;
    padding: 6px 12px;
  }
}

/* ============ BOOKING BANNER (under the nav, logged-in users) ============
   Same side space as .site-header, so it lines up with the nav pill. */
.booking-banner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  margin: 12px auto 0;
  padding: 0 max(48px, calc((100% - 1328px) / 2));
}

/* "display: flex" above would beat the hidden attribute without this */
.booking-banner[hidden] {
  display: none;
}

.booking-banner-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border: 1px solid;
  border-radius: 24px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.4;
}

.booking-banner-item.is-approved {
  border-color: #24483F;
  background: #DCE6DA;
  color: #24483F;
}

.booking-banner-item.is-rejected {
  border-color: #C8795A;
  background: #FBEDE6;
  color: #8A4A32;
}

.booking-banner-icon {
  flex-shrink: 0;
  font-weight: 700;
}

.booking-banner-text {
  min-width: 0;
}

.booking-banner-close {
  flex-shrink: 0;
  margin-left: auto;
  padding: 0 6px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.booking-banner-close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 6px;
}

@media (max-width: 600px) {
  .booking-banner {
    padding: 0 22px;
  }

  .booking-banner-item {
    padding: 10px 14px;
    font-size: 14px;
  }
}