/* ============================================================
   Site navbar — ONE header for every page (inner, home, auction)
   Frame-justified: brand | menu (fills + justifies) | actions.
   Pairs with includes/navbar.php. Loaded after style.css /
   landing.css so it wins the cascade over any legacy rules.
   ============================================================ */
.site-nav { position: sticky; top: 0; z-index: 40; background: var(--navbg, #070a10);
  border-bottom: 2px solid var(--primary, #f5b60d); }
html[data-theme="light"] .site-nav { background: #ffffff; }
.sn-in { max-width: 1440px; margin: 0 auto; padding: 8px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; }

/* ---- brand ---- */
.sn-brand { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; text-decoration: none; }
.sn-brand:hover { text-decoration: none; }
.sn-logo { width: 38px; height: 38px; object-fit: contain; border-radius: 8px; }
.sn-name { display: flex; flex-direction: column; line-height: 1.1; }
.sn-t1 { font-weight: 900; font-size: 1.02rem; letter-spacing: .06em; color: var(--primary, #f5b60d);
  text-transform: uppercase; white-space: nowrap; }
.sn-t2 { font-size: .56rem; font-weight: 700; letter-spacing: .24em; color: #e8a11c;
  text-transform: uppercase; white-space: nowrap; }
html[data-theme="light"] .sn-t2 { color: #8a6508; }

/* ---- menu: few top-level items + parent dropdowns, centered ---- */
.sn-links { flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
  justify-content: center; gap: clamp(2px, .8vw, 14px); }
.sn-links > a, .sn-dd-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 10px clamp(8px, .8vw, 14px); font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  color: var(--text, #f2f5fa); white-space: nowrap; text-decoration: none;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none;
  cursor: pointer; font-family: inherit; line-height: 1.2; }
html[data-theme="light"] .sn-links > a, html[data-theme="light"] .sn-dd-btn { color: #1b2437; }
.sn-links > a:hover, .sn-links > a.active, .sn-dd-btn:hover, .sn-dd-btn.active,
.sn-dd.open > .sn-dd-btn { color: var(--primary, #f5b60d);
  border-bottom-color: var(--primary, #f5b60d); text-decoration: none; background: none; }
.sn-links a.hl, .sn-dd-btn.hl { color: var(--primary, #f5b60d); }
.sn-links a.out { color: var(--red, #ff5252) !important; }
.sn-caret { font-size: .62em; opacity: .7; transition: transform .18s; }
.sn-dd.open > .sn-dd-btn .sn-caret { transform: rotate(180deg); }

/* ---- dropdown panels (desktop) ---- */
.sn-dd { position: relative; }
.sn-dd-menu { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 200px; padding: 6px; display: flex; flex-direction: column;
  background: var(--navbg, #0b0f17); border: 1px solid var(--border, #232c3d);
  border-top: 2px solid var(--primary, #f5b60d); border-radius: 0 0 12px 12px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; transition: opacity .16s, transform .16s, visibility .16s; }
html[data-theme="light"] .sn-dd-menu { background: #ffffff; border-color: #d9dfec;
  border-top-color: var(--primary, #f5b60d); box-shadow: 0 14px 30px rgba(20, 30, 60, .16); }
.sn-dd:hover > .sn-dd-menu, .sn-dd.open > .sn-dd-menu, .sn-dd:focus-within > .sn-dd-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.sn-dd-menu a { display: flex; align-items: center; gap: 8px; padding: 11px 14px; min-height: 44px;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--text, #f2f5fa);
  text-decoration: none; border-radius: 9px; white-space: nowrap; }
html[data-theme="light"] .sn-dd-menu a { color: #1b2437; }
.sn-dd-menu a:hover, .sn-dd-menu a.active { color: var(--primary, #f5b60d);
  background: rgba(245, 182, 13, .1); text-decoration: none; }
.sn-dd-acc .sn-dd-menu { left: auto; right: 0; transform: translateY(6px); }
.sn-dd-acc:hover > .sn-dd-menu, .sn-dd-acc.open > .sn-dd-menu, .sn-dd-acc:focus-within > .sn-dd-menu {
  transform: translateY(0); }

/* drawer chrome — desktop hides it */
.sn-drawer-head, .sn-backdrop { display: none; }

/* ---- right actions: login + theme ---- */
.sn-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.sn-login { display: inline-flex; align-items: center; background: var(--primary, #f5b60d);
  color: var(--primary-ink, #14100a); font-weight: 800; font-size: .74rem; letter-spacing: .05em;
  padding: 9px 16px; min-height: 38px; border-radius: 9px; text-decoration: none; white-space: nowrap; }
.sn-login:hover { filter: brightness(1.08); color: var(--primary-ink, #14100a); text-decoration: none; }
.sn-theme { width: 36px; height: 36px; border-radius: 50%; background: none; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .25); color: var(--text, #f2f5fa); font-size: 1rem; }
html[data-theme="light"] .sn-theme { border-color: #d9dfec; color: #1b2437; }

/* ---- burger (hidden on desktop) ---- */
.sn-burger { display: none; width: 44px; height: 44px; background: none; cursor: pointer;
  border: 1px solid var(--border, #232c3d); border-radius: 10px; color: var(--text, #f2f5fa);
  font-size: 1.3rem; line-height: 1; }
html[data-theme="light"] .sn-burger { color: #1b2437; border-color: #d9dfec; }

/* ---- mobile (≤1100px): burger opens a LEFT slide-in drawer ---- */
@media (max-width: 1100px) {
  .sn-in { gap: 8px; padding: 8px 12px; }
  .sn-burger { display: block; order: 3; width: 44px; height: 44px; font-size: 1.2rem; }
  .sn-actions { order: 2; margin-left: auto; gap: 5px; }
  .sn-login { padding: 7px 10px; font-size: .68rem; min-height: 40px; }
  .sn-theme { width: 38px; height: 38px; }

  /* dim the page behind the drawer */
  .sn-backdrop { position: fixed; inset: 0; z-index: 48; background: rgba(0, 0, 0, .55);
    opacity: 0; visibility: hidden; transition: opacity .22s, visibility .22s; }
  .sn-backdrop.show { display: block; opacity: 1; visibility: visible; }

  /* the drawer itself — anchored LEFT, slides in from the left */
  .sn-links { position: fixed; top: 0; left: 0; bottom: 0; z-index: 49;
    width: min(300px, 84vw); display: flex; flex-direction: column; align-items: stretch;
    justify-content: flex-start; gap: 0; padding: 0 0 18px; overflow-y: auto;
    background: var(--navbg, #0b0f17); border-right: 2px solid var(--primary, #f5b60d);
    box-shadow: 8px 0 30px rgba(0, 0, 0, .5);
    transform: translateX(-102%); transition: transform .25s ease; }
  html[data-theme="light"] .sn-links { background: #ffffff; }
  .sn-links.open { transform: translateX(0); }
  html.sn-noscroll, html.sn-noscroll body { overflow: hidden; }

  .sn-drawer-head { display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; margin-bottom: 4px;
    border-bottom: 2px solid var(--primary, #f5b60d); }
  .sn-drawer-title { font-weight: 900; font-size: .92rem; letter-spacing: .06em;
    color: var(--primary, #f5b60d); text-transform: uppercase; }
  .sn-drawer-close { width: 44px; height: 44px; background: none; cursor: pointer;
    border: 1px solid var(--border, #232c3d); border-radius: 10px;
    color: var(--text, #f2f5fa); font-size: 1rem; }
  html[data-theme="light"] .sn-drawer-close { color: #1b2437; border-color: #d9dfec; }

  .sn-links > a, .sn-dd-btn { width: 100%; justify-content: flex-start; text-align: left;
    padding: 12px 16px; min-height: 44px; font-size: .86rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06); }
  html[data-theme="light"] .sn-links > a, html[data-theme="light"] .sn-dd-btn {
    border-bottom-color: rgba(0, 0, 0, .06); }
  .sn-links > a:hover, .sn-links > a.active, .sn-dd-btn:hover, .sn-dd-btn.active {
    border-bottom-color: var(--primary, #f5b60d); }
  .sn-dd { width: 100%; }
  .sn-dd-btn { display: flex; }
  .sn-dd-btn .sn-caret { margin-left: auto; }

  /* dropdowns become in-flow accordions — tap to expand, no hover */
  .sn-dd-menu, .sn-dd-acc .sn-dd-menu { position: static; transform: none; min-width: 0;
    display: none; opacity: 1; visibility: visible; padding: 0; border: 0; border-radius: 0;
    box-shadow: none; background: rgba(255, 255, 255, .035); transition: none; }
  html[data-theme="light"] .sn-dd-menu { background: rgba(20, 30, 60, .05); }
  .sn-dd:hover > .sn-dd-menu, .sn-dd:focus-within > .sn-dd-menu { display: none; transform: none; }
  .sn-dd.open > .sn-dd-menu, .sn-dd.open:hover > .sn-dd-menu { display: flex; transform: none; }
  .sn-dd-menu a { padding: 12px 16px 12px 34px; min-height: 44px; font-size: .82rem;
    border-radius: 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
  html[data-theme="light"] .sn-dd-menu a { border-bottom-color: rgba(0, 0, 0, .05); }
}
@media (max-width: 430px) {
  .sn-t1 { font-size: .88rem; letter-spacing: .03em; }
  .sn-t2 { font-size: .5rem; letter-spacing: .14em; }
  .sn-logo { width: 32px; height: 32px; }
  .sn-in { gap: 6px; padding: 8px 10px; }
  .sn-login { padding: 7px 9px; font-size: .64rem; }
}

/* home page (landing.css) — neutralise its own nav vars/layout leaks */
body.landing .site-nav { background: #070a10; }
html[data-theme="light"] body.landing .site-nav { background: #ffffff; }
body.landing .sn-links > a, body.landing .sn-dd-btn { color: var(--lp-text, #f2f5fa); }
html[data-theme="light"] body.landing .sn-links > a,
html[data-theme="light"] body.landing .sn-dd-btn { color: #1b2437; }
body.landing .sn-links > a:hover, body.landing .sn-links > a.active,
body.landing .sn-dd-btn:hover, body.landing .sn-dd-btn.active,
body.landing .sn-dd-menu a:hover, body.landing .sn-dd-menu a.active { color: var(--lp-gold, #f5b60d); }

/* print: never print the chrome */
@media print { .site-nav { display: none !important; } }

/* "!" badge on MY ACCOUNT — the member still has details to fill in on account.php */
.sn-links .sn-alert { display: inline-block; min-width: 15px; margin-left: 5px; padding: 0 4px;
  border-radius: 999px; background: #e23b3b; color: #fff; font-size: .6rem; font-weight: 900;
  line-height: 15px; text-align: center; vertical-align: middle; }

/* ---- Ad slots (Admin → Ads & Analytics) — in navbar.css because it is the one
   stylesheet loaded by BOTH the inner pages and the standalone homepage ---- */
.ad-slot { margin: 14px auto; max-width: 1100px; text-align: center; overflow: hidden; }
.ad-slot ins.adsbygoogle { border-radius: 12px; }
.ad-house { display: flex; align-items: center; justify-content: center; min-height: 60px;
  border: 1px dashed rgba(150, 160, 190, .35); border-radius: 12px; padding: 10px; }
.ad-house img { max-width: 100%; height: auto; border-radius: 8px; }
.ad-sidebar { margin: 14px 0; }
.ad-sticky { display: none; }
@media (max-width: 760px) {
  .ad-sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    margin: 0; max-width: none; background: rgba(7, 10, 16, .92); padding: 4px 4px
    calc(4px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 14px rgba(0, 0, 0, .35); }
  html[data-theme="light"] .ad-sticky { background: rgba(255, 255, 255, .95); }
  body:has(.ad-sticky) { padding-bottom: 70px; }          /* keep content clear of the strip */
  .in-app .ad-sticky { display: none; }                   /* the app shows AdMob instead */
}