/*
 * Canonical site header geometry.
 *
 * This file is loaded after page-specific styles so every route uses the same
 * navigation layout as the home and feed pages.
 */
.nav__mobile-header,
.nav__mobile-tabs {
  display: none;
}

@media (max-width: 759px) {
  .nav {
    display: block;
    padding: 0;
  }

  /* The desktop controls remain unchanged and are simply replaced by the
     two-row mobile composition at the existing breakpoint. */
  .nav > .nav__left,
  .nav > .nav__search,
  .nav > .nav__right,
  .nav > .nav__menu-bar {
    display: none !important;
  }

  .nav__mobile-header {
    min-height: 64px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .nav__mobile-logo {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--fg);
    font-family: var(--ff-display);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.15;
    text-decoration: none;
  }

  .nav__mobile-logo img {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
  }

  .nav__mobile-tabs {
    height: 48px;
    margin: 0;
    padding: 0 10px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 44px;
    align-items: stretch;
    gap: 0;
    list-style: none;
    overflow: visible;
  }

  .nav__mobile-tabs::-webkit-scrollbar { display: none; }

  .nav__mobile-tabs > li { min-width: 0; }

  .nav__mobile-tabs a {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--muted);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }

  .nav__mobile-more { position: relative; }
  .nav__mobile-more > button {
    width: 44px; height: 44px; margin: 2px 0; padding: 0; border: 0;
    border-radius: 8px; background: transparent; color: var(--menu-inactive);
    font-size: 18px; font-weight: 700; cursor: pointer;
  }
  .nav__mobile-overflow {
    position: absolute; z-index: 30; top: 44px; right: 0; width: 170px;
    margin: 0; padding: 6px; list-style: none; border: 1px solid rgba(23,52,4,.12);
    border-radius: 10px; background: var(--surface); box-shadow: 0 10px 28px rgba(23,52,4,.16);
  }
  .nav__mobile-overflow[hidden] { display: none; }
  .nav__mobile-overflow a { height: 44px; padding: 0 12px; justify-content: flex-start; border-radius: 7px; }
  .nav__mobile-overflow a.is-active { background: var(--green); color: #fff; }
  .nav__mobile-overflow a.is-active::after { display: none; }

  .nav__mobile-tabs a.is-active {
    color: #fff;
    background: var(--green);
  }

  .nav__mobile-tabs a.is-active::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: var(--accent);
  }
}

.auth-prompt[hidden] { display: none; }

@media (max-width: 759px) {
  html.auth-prompt-open { overflow: hidden; }
  .auth-prompt { position: fixed; inset: 0; z-index: 1000; }
  .auth-prompt__backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(23, 52, 4, .36); }
  .auth-prompt__sheet {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    gap: 12px;
    padding: 10px 20px calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0;
    background: var(--surface);
    color: var(--text);
    text-align: center;
    box-shadow: 0 -12px 40px rgba(23, 52, 4, .16);
  }
  .auth-prompt__handle { width: 42px; height: 4px; margin: 0 auto 4px; border-radius: 99px; background: #d3d0c7; }
  .auth-prompt__sheet h2 { margin: 0 0 4px; font-size: 18px; line-height: 1.35; }
  .auth-prompt__login { min-height: 44px; font-size: 15px; }
  .auth-prompt__cancel { min-height: 40px; border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-weight: 600; }
}

@media (min-width: 760px) { .auth-prompt { display: none; } }

@media (min-width: 760px) {
  .nav__right .nav__create,
  .nav__right > .btn--ghost {
    box-sizing: border-box;
    height: 42px !important;
    border: 1px solid rgba(23, 52, 4, .18);
    border-radius: 7px !important;
  }

  .nav__right .nav__create {
    background: var(--c-primary);
    color: #fff;
  }

  .nav__right .nav__create:hover {
    background: color-mix(in srgb, var(--c-primary) 82%, white);
    border-color: color-mix(in srgb, var(--c-primary) 75%, white);
    color: #fff;
  }
}

@media (min-width: 961px) {
  .site-header {
    background: rgba(255, 255, 255, .94);
  }

  .nav {
    width: min(calc(100% - 48px), 1020px);
    max-width: none;
    margin-inline: auto;
    padding: 10px 0 0;
    grid-template-columns: 204px 1fr auto !important;
    column-gap: 20px !important;
  }

  .nav__logo--desktop {
    width: 204px;
    height: 52px;
    padding: 0;
    gap: 10px;
    justify-content: flex-start;
  }

  .nav__logo--desktop img {
    width: 46px;
    height: 46px;
  }

  .nav__brand {
    max-width: none;
    font-size: 20px;
    font-weight: 700;
    line-height: 23px;
    white-space: nowrap;
  }

  .nav__search {
    width: 400px;
    justify-self: end;
  }

  .nav__search input {
    height: 46px;
    padding-left: 42px;
    border-radius: 7px;
    font-size: 15px;
    background: var(--surface);
  }

  .nav__search-btn {
    left: 12px;
  }

  .nav__right {
    gap: 12px;
  }

  .nav__right .nav__create {
    padding: 0 19px !important;
  }

  .nav__create-label {
    font-size: 15px;
  }

  .nav__right > .nav__action:not(.nav__create) {
    width: 42px;
    height: 42px;
  }

  .nav__right > .nav__action:not(.nav__create) svg {
    width: 24px;
    height: 24px;
  }

  .nav__profile-btn {
    height: 42px;
  }

  .nav__avatar {
    width: 42px;
    height: 42px;
  }

  .nav__menu-bar {
    padding-top: 4px;
  }

  .nav__menu-bar .nav__menu--desktop {
    gap: 30px;
  }

  .nav__menu-bar .nav__menu a {
    height: 46px;
    padding: 0 4px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    color: #292a27;
  }

  .nav__menu-bar .nav__menu a.is-active {
    color: #fff;
    background: var(--green);
    font-weight: 600;
  }

  .nav__menu-bar .nav__menu a.is-active::after {
    left: 4px;
    right: 4px;
    bottom: 0;
    height: 2px;
    background: transparent;
  }
}

/* Typography only: keep the established mobile header geometry and menu flow. */
.nav__brand,
.nav__mobile-logo {
  font-family: var(--ff-body);
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: -.01em;
}

@media (max-width: 759px) {
  .nav__mobile-tabs a {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 22px;
    font-weight: 500;
    letter-spacing: -.005em;
  }

  .nav__mobile-tabs a.is-active {
    color: #173404;
    font-weight: 600;
  }

  .nav__mobile-more > button {
    color: var(--text-secondary);
    font-family: var(--ff-body);
    font-size: 15px;
    line-height: 22px;
    font-weight: 500;
    letter-spacing: normal;
  }
}