/* ChanSpace — nav + footer shared across every page using the Organic
   design system. Page-specific layout lives in each page's own stylesheet
   (e.g. listings.css, listing-detail.css); tokens/components in
   organic-tokens.css. */

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* ===== Nav ===== */
.o-nav { display: flex; align-items: center; gap: 22px; padding: 18px 0; }
.o-nav .logo { display: flex; align-items: center; gap: 9px; font-family: var(--font-heading); font-size: 22px; color: var(--color-text); }
.o-nav .logo-dot {
  width: 28px; height: 28px; border-radius: 50%; background: var(--color-accent-2-300);
  display: inline-grid; place-items: center; font-size: 14px; color: var(--color-accent-2-800);
}
.o-nav .nav-links { display: flex; align-items: center; gap: 22px; }
.o-nav .nav-links a { font-size: 14px; color: var(--color-text); }
.o-nav .nav-links a.nav-active { color: var(--color-accent-700); font-weight: 600; }
.o-nav .nav-actions { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.o-nav .saved-link, .o-nav .account-link { font-size: 13.5px; color: var(--color-text); white-space: nowrap; }
.o-nav .nav-hamburger { display: none; }
.nav-links-saved-clone { display: none; }
.nav-links-account-clone { display: none; }

/* ===== Footer ===== */
.o-footer { margin-top: auto; background: var(--color-surface); padding: 40px 32px 30px; }
.o-footer-inner { max-width: 1240px; margin: 0 auto; display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
.o-footer-brand { max-width: 32ch; }
.o-footer-brand .logo { font-family: var(--font-heading); font-size: 19px; }
.o-footer-brand p { font-size: 13.5px; margin-top: 8px; }
.o-footer-links { display: flex; gap: 26px; flex-wrap: wrap; margin-left: auto; }
.o-footer-links a { font-size: 13.5px; }
.o-copyright { max-width: 1240px; margin: 26px auto 0; font-size: 12.5px; }

/* ban-check.js's hard-ban modal is injected as raw HTML (no organic-page
   wrapper class) and normally relies on styles.css, which these pages don't
   load — restyle it here with Organic tokens so it's still legible if a
   hard-banned session hits one of these pages. */
.ban-modal-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(32, 30, 29, 0.6);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  font-family: var(--font-body);
}
.ban-modal {
  background: var(--color-surface); border-radius: var(--radius-lg);
  padding: 32px 28px; max-width: 420px; width: 100%; text-align: center;
}
.ban-modal-title { font-family: var(--font-heading); font-size: 1.4rem; color: var(--color-accent-800); margin: 0 0 12px; }
.ban-modal-text { font-size: 1rem; line-height: 1.6; color: var(--color-text); margin: 0 0 22px; }
.ban-modal .btn-full { width: 100%; }

@media (max-width: 860px) {
  .wrap { padding: 0 18px; }
  .o-nav { padding: 16px 0 10px; gap: 10px; position: relative; flex-wrap: wrap; }
  .o-nav .logo { font-size: 19px; }
  .o-nav .logo-dot { width: 24px; height: 24px; font-size: 12px; }
  /* nav-actions (lang toggle + CTA) drops to its own row instead of
     squeezing into the same row as the logo — at 390px there isn't room
     for both without the lang-toggle pill (which clips via its own
     overflow:hidden) getting crushed below its content's natural width. */
  .o-nav .nav-actions { flex-basis: 100%; flex-shrink: 0; justify-content: flex-end; gap: 10px; }
  .o-nav .lang-toggle { flex-shrink: 0; }
  .o-nav .nav-actions .btn { flex-shrink: 0; }
  .o-nav .nav-links {
    display: none; position: absolute; top: 100%; left: 18px; right: 18px; z-index: 30;
    flex-direction: column; gap: 2px; background: var(--color-surface); border-radius: 0 0 16px 16px;
    box-shadow: var(--shadow-lg); padding: 8px;
  }
  .o-nav .nav-links.nav-links-open { display: flex; }
  .o-nav .nav-links a { padding: 12px 10px; border-radius: 10px; }
  .o-nav .nav-links a:hover { background: var(--color-neutral-100); }
  .o-nav .nav-hamburger {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
    width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--color-divider);
    background: var(--color-surface); cursor: pointer;
  }
  .o-nav .nav-hamburger span { display: block; width: 16px; height: 2px; background: var(--color-text); border-radius: 2px; }
  .o-nav .saved-link { display: none; }
  .nav-links-saved-clone { display: block !important; }
  .o-nav .account-link { display: none; }
  .nav-links-account-clone { display: block !important; }

  .o-footer { padding: 32px 18px 24px; }
}