/* District Collective — shared shell styles.
   Page layout stays inline on the elements (as designed); this file holds
   only what inline styles cannot express: fonts, resets, hover and state. */

@font-face { font-family: 'Soehne'; src: url('../fonts/soehne-buch.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Soehne Breit'; src: url('../fonts/soehne-breit-kraftig.woff2') format('woff2'); font-weight: 400 650; font-style: normal; font-display: swap; }
@font-face { font-family: 'Soehne Breit'; src: url('../fonts/soehne-breit-fett.woff2') format('woff2'); font-weight: 651 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Perfectly Nineties'; src: url('../fonts/perfectlynineties-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Perfectly Nineties'; src: url('../fonts/perfectlynineties-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'FKT Echo'; src: url('../fonts/fktecho-bold.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: #16151C; }
img { display: block; }
/* The UA sheet hides [hidden] with display:none, but layout here is authored as
   inline styles, and an inline `display` outranks any stylesheet rule. Without
   !important, #spaces-list stayed on screen when the map view was selected and
   the map rendered underneath it. */
[hidden] { display: none !important; }
a { color: #FF5A00; text-decoration: none; }
a:hover { color: #FF7A33; }
:focus-visible { outline: 2px solid #FF5A00; outline-offset: 3px; }

/* hover states lifted from the design */
.hv-1:hover { color: #E4E7D5 !important }
.hv-2:hover { color: #FF5A00 !important }
.hv-3:hover { background: #FF7A33 !important; color: #16151C !important }
.hv-4:hover { color: #E4E7D5 !important; border-bottom-color: #E4E7D5 !important }
.hv-5:hover { color: #E4E7D5 !important; border-color: #4A4654 !important }
.hv-6:hover { color: #E4E7D5 !important; border-color: #E4E7D5 !important }

/* featured spaces view switch */
.view-btn { font-family: 'Soehne', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; padding: 9px 16px; border: 1px solid #3F3C46; background: transparent; color: #E4E7D5; cursor: pointer; }
.view-btn:hover { border-color: #E4E7D5; }
.view-btn.is-on { background: #E4E7D5; color: #16151C; }

/* FAQ accordion */
.faq-q { width: 100%; display: flex; gap: 20px; align-items: baseline; justify-content: space-between; text-align: left; background: none; border: 0; padding: 20px 0; cursor: pointer; font-family: 'Soehne', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; color: #E4E7D5; }
.faq-sign { color: #FF5A00; font-size: 22px; line-height: 1; }

/* /enter — sign in and sign up.
   Box model stays inline on the elements, as everywhere else. What lives here
   is what an inline style cannot reach: the placeholder, the focus ring and
   Chrome's autofill, which repaints its own background and would otherwise
   drop a white block into the middle of a dark form. */
.field { font-family: 'Soehne', Helvetica, Arial, sans-serif; font-size: 16px; color: #E4E7D5; background: #1C1A24; border: 1px solid #3F3C46; }
.field::placeholder { color: #6F6C60; }
.field:hover { border-color: #4A4654; }
.field:focus { outline: none; border-color: #FF5A00; }
.field:-webkit-autofill,
.field:-webkit-autofill:hover,
.field:-webkit-autofill:focus { -webkit-text-fill-color: #E4E7D5; -webkit-box-shadow: 0 0 0 40px #1C1A24 inset; caret-color: #E4E7D5; }
.field:disabled { color: #6F6C60; cursor: not-allowed; }

/* The segmented controls reuse .view-btn/.is-on from the featured-spaces
   switch, so both sides of the site say "selected" the same way. */
.seg { flex: 1; text-align: center; }

/* Header navigation.
   Written out in full, the four links plus the wordmark plus the orange
   button need more width than a phone has, and the sticky bar wraps onto two
   and then three rows — eating the top of every page it is stuck to. Below
   the breakpoint the links collapse behind a menu button instead.

   The show/hide rules carry !important because the nav has an inline
   `display: flex`. Layout on this site is authored inline, and an inline
   declaration outranks any stylesheet rule, media query or not — the same
   reason the [hidden] rule near the top of this file needs it. */
.nav-toggle { display: none; }
.nav-bars { position: relative; display: block; width: 18px; height: 2px; background: #E4E7D5; }
.nav-bars::before, .nav-bars::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: #E4E7D5; }
.nav-bars::before { transform: translateY(-6px); }
.nav-bars::after { transform: translateY(6px); }
/* Keyed off aria-expanded rather than a second class, so the thing the screen
   reader announces and the thing the eye sees cannot drift apart. */
.nav-toggle[aria-expanded="true"] .nav-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-bars::after { transform: rotate(-45deg); }
.nav-bars, .nav-bars::before, .nav-bars::after { transition: transform .18s ease, background-color .18s ease; }
@media (prefers-reduced-motion: reduce) { .nav-bars, .nav-bars::before, .nav-bars::after { transition: none; } }

@media (max-width: 900px) {
  .nav-bar { gap: 10px 14px !important; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 40px; padding: 0; background: transparent; border: 1px solid #3F3C46; color: #E4E7D5; cursor: pointer; }
  .nav-toggle:hover { border-color: #E4E7D5; }

  /* The nav carried the margin-left:auto that pushed everything right. With
     it hidden, the button has to take that over or the bar bunches up on the
     left. The CTA shrinks so that wordmark + button + toggle still fit across
     a 375px phone with room to spare. */
  .nav-cta { margin-left: auto; font-size: 14px !important; padding: 9px 14px !important; }

  .site-nav { display: none !important; }
  .site-nav.is-open {
    display: flex !important;
    /* Last, so the panel opens as its own row under the bar rather than
       between the wordmark and the button, which is where DOM order puts it. */
    order: 1;
    flex-direction: column;
    /* The nav is inline-styled `align-items: center; flex-wrap: wrap`. Left as
       they are, the links shrink to their text and sit centred with dividers
       that stop short of the edges. Both need !important to turn over. */
    align-items: stretch !important; flex-wrap: nowrap !important;
    width: 100%; margin-left: 0 !important; gap: 0 !important;
    border-top: 1px solid #2B2933; margin-top: 2px;
  }
  .site-nav.is-open > a { padding: 14px 2px; border-bottom: 1px solid #2B2933; font-size: 16px; }
  .site-nav.is-open > a:last-child { border-bottom: 0; }
}