/* The top bar every page carries: slim, white, the NOHM logo on the left
   (drawn exactly like the app's and the admin panel's), with a small
   raised ™, tall enough to hold nav buttons on the right. Pages link this file and
   open <body> with <header class="bar"><a href="/">NOHM</a></header>.
   The homepage's bar is clear over its photo (.bar.clear) until you
   scroll. */
.bar {
  position: sticky; top: 0; z-index: 10;
  height: 52px; padding: 0 20px;
  display: flex; align-items: center;
  background: #fff;
  border-bottom: 1px solid #e6e7e9;
}
.bar a {
  font-family: var(--font-display);
  font-weight: var(--weight-hero); font-size: 19px; line-height: 1; letter-spacing: var(--tracking-headline); word-spacing: var(--word-spacing-headline);
  color: #171a20; text-decoration: none;
}
/* The NOHM logo (owner, 2026-10-12: "that's the new logo everywhere"):
   NOHM in thin, even lines, drawn (/img/nohm-mark.svg, the same shapes as
   the app's and the admin panel's), in the link's color. The word stays in
   the link, at size 0, for screen readers and search. --mark is the
   letters' height: the capitals of 19px text, as the old mark's were. */
.bar > a:first-child {
  --mark: 14px;
  display: inline-flex; align-items: flex-start;
  font-size: 0; line-height: 1;
}
.bar > a:first-child::before {
  content: ""; flex: none;
  width: calc(var(--mark) * 5.25); height: var(--mark);
  background: currentColor;
  -webkit-mask: url(/img/nohm-mark.svg) center / 100% 100% no-repeat;
          mask: url(/img/nohm-mark.svg) center / 100% 100% no-repeat;
}
.bar { justify-content: space-between; }

/* Menu button on the right of the bar, and the full-screen menu it opens
   (Tesla style: a white sheet, a list of links with chevrons). Built by
   /menu.js, which every page loads. */
.menu-btn {
  font: var(--weight-ui) 14px/1 var(--font-text);
  color: #171a20;
  background: #f4f4f4;
  border: 0; border-radius: 4px;
  padding: 9px 14px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.menu-btn:hover { background: #e6e7e9; }
/* Clear over a photo: white wordmark and a frosted Menu button. */
.bar.clear a { color: #fff; }
.bar.clear .menu-btn { color: #fff; background: rgba(255, 255, 255, 0.16); }
.bar.clear .menu-btn:hover { background: rgba(255, 255, 255, 0.26); }
.menu {
  position: fixed; inset: 0; z-index: 100;
  display: none; flex-direction: column;
  background: #fff;
  font-family: var(--font-text);
  overflow-y: auto;
}
.menu.open { display: flex; }
.menu-top { height: 52px; display: flex; align-items: center; justify-content: flex-end; padding: 0 12px; }
.menu-close {
  width: 40px; height: 40px; border: 0; border-radius: 4px;
  background: transparent; cursor: pointer; display: grid; place-items: center;
}
.menu-close:hover { background: #f4f4f4; }
.menu ul { list-style: none; margin: 8px 0 0; padding: 0 12px; }
.menu li a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 12px; border-radius: 4px;
  font-size: 17px; color: #171a20; text-decoration: none; font-weight: var(--weight-ui);
}
.menu li a:hover { background: #f4f4f4; }
.menu li a::after {
  content: ""; width: 7px; height: 7px;
  border-right: 1.5px solid #5c5e62; border-top: 1.5px solid #5c5e62;
  transform: rotate(45deg);
}
body.menu-open { overflow: hidden; }
/* The quiet sign-in under the menu's list (menu.js): small print, plain
   links to the web portal for PM Professional companies and landlords. */
.menu-signin {
  margin: 16px 24px 40px; padding-top: 20px;
  border-top: 1px solid #e6e7e9;
  font-size: 14px; line-height: 1.5; color: #6e6e73;
}
.menu-signin a { display: block; width: fit-content; color: #171a20; font-weight: var(--weight-ui); text-decoration: none; }
.menu-signin a + a { margin-top: 8px; }
.menu-signin a:hover { text-decoration: underline; }
.menu-signin p { margin: 8px 0 0; }

/* Rentals on nohm.app links (menu.js shows them only while the server
   has the search on): hidden means hidden, whatever a page's own styles. */
[data-rentals][hidden] { display: none !important; }