/* CLIPHORIUM_NAV_CSS_V7 (mobile works even on jobs page) */

:root{
  --nav-bg: rgba(10,10,12,.72);
  --nav-stroke: rgba(255,255,255,.12);
  --nav-text: rgba(255,255,255,.92);
  --nav-muted: rgba(255,255,255,.65);
  --gold: #D4AF37;
  --goldHi: #F5D66A;
}

.ch-nav-wrap{
  position: sticky;
  top: 0;
  z-index: 99990;
  padding: 12px 16px;
}

.ch-nav{
  max-width: 1400px;
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;

  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--nav-stroke);
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
}

.ch-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
}

.ch-logo{
  height: 120px;
  width: auto;
  display:block;
}

.ch-links{
  display:flex;
  align-items:center;
  gap: 14px;
}

.ch-link{
  color: var(--nav-muted);
  font-weight: 600;
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
}

.ch-link:hover{
  color: var(--nav-text);
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

.ch-cta{
  color: var(--nav-text);
  border-color: rgba(212,175,55,.45);
  background: rgba(212,175,55,.10);
}

.ch-burger{
  display:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--nav-text);
  border-radius: 14px;
  padding: 10px 14px;
  cursor:pointer;
  font-size: 18px;
  line-height: 1;
}

/* mobile menu */
.ch-mobile{
  display:none;
}

@media (max-width: 820px){

  .ch-links{ display:none !important; }

  /* FORCE burger visible even if jobs.console.css tries to hide it */
  .ch-burger{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    z-index: 99999;
  }

  /* smaller nav logo on mobile so it doesn't eat the screen */
  .ch-logo{
    height: 84px;
  }

  .ch-mobile{
    display:none !important;
    position: fixed;
    top: 92px;
    left: 16px;
    right: 16px;
    z-index: 99998;

    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(10,10,12,.92);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 80px rgba(0,0,0,.60);
  }

  .ch-mobile.is-open{
    display:flex !important;
    flex-direction:column;
    gap:10px;
  }

  .ch-mobile .ch-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
  }

  .ch-mobile .ch-cta{
    border-color: rgba(212,175,55,.45);
    background: rgba(212,175,55,.10);
  }
}

/* ===== CLIPHORIUM NAV LOGO HARD LOCK (V8) ===== */
.ch-logo{
  height: 120px !important;
  max-height: 120px !important;
  width: auto !important;
  display:block;
  object-fit: contain;
}

@media (max-width: 820px){
  .ch-logo{
    height: 84px !important;
    max-height: 84px !important;
  }
}

/* reserve nav space so late image load doesn't resize layout */
.ch-nav{
  min-height: 92px;
}
@media (max-width: 820px){
  .ch-nav{
    min-height: 74px;
  }
}

/* ===== CLIPHORIUM NAV CLICK + OVERLAY LOCK (V9) ===== */

/* Always above page UI (Playback loves overlays) */
.ch-nav-wrap{
  z-index: 2147483000 !important;
  pointer-events: auto !important;
}

/* ensure nav and burger always clickable */
.ch-nav,
.ch-burger,
.ch-mobile{
  pointer-events: auto !important;
}

/* HARD lock logo sizing everywhere */
.ch-nav-wrap .ch-logo{
  height: 120px !important;
  max-height: 120px !important;
  width: auto !important;
  object-fit: contain !important;
  display:block !important;
}

@media (max-width: 820px){
  .ch-nav-wrap .ch-logo{
    height: 84px !important;
    max-height: 84px !important;
  }
}

/* ===== CLIPHORIUM MOBILE MENU HARD FIX (V10) ===== */

/* Ensure nav is positioned so z-index actually works */
.ch-nav-wrap{
  position: sticky !important;
  top: 0 !important;
  width: 100% !important;
}

/* Mobile menu hidden by default */
#chMobile{
  display: none !important;
  opacity: 0 !important;
  transform: translateY(-6px) !important;
  pointer-events: none !important;
}

/* Mobile menu visible when opened */
#chMobile.is-open{
  display: block !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Make it feel like an enterprise dropdown */
#chMobile{
  margin-top: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,10,12,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 10px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

/* Tap reliability */
#chBurger{
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ===== CLIPHORIUM MOBILE LOGO SIZE FIX (V12) ===== */
/* Keep huge premium logo on desktop, but shrink on phones */
@media (max-width: 780px){
  .ch-nav-wrap .ch-logo{
    height: 72px !important;
    max-height: 72px !important;
  }

  .ch-nav{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

/* ===== CLIPHORIUM MOBILE LOGO HARD LOCK (V13) ===== */
/* Works even if the img has NO .ch-logo class */
@media (max-width: 780px){
  .ch-nav-wrap .ch-brand img,
  .ch-nav-wrap a.ch-brand > img,
  .ch-nav-wrap img[src*="cliphorium-logo-transparent"]{
    height: 72px !important;
    max-height: 72px !important;
    width: auto !important;
    object-fit: contain !important;
  }
}

/* ===== CLIPHORIUM_LOGO_LOCK (V10) ===== */
/* Pixel-perfect match: nav logo + footer logo use same height */
:root{
  --chLogoH: 124px;      /* desktop logo height */
  --chLogoHMobile: 78px; /* mobile logo height */
}

/* NAV logo */
.ch-brand img,
.ch-logo{
  height: var(--chLogoH) !important;
  width: auto !important;
  max-height: var(--chLogoH) !important;
  object-fit: contain !important;
}

@media (max-width: 720px){
  .ch-brand img,
  .ch-logo{
    height: var(--chLogoHMobile) !important;
    max-height: var(--chLogoHMobile) !important;
  }
}

/* ===== CLIPHORIUM_NAV_RAIL_MATCH_V1 ===== */
.ch-nav{
  width: min(var(--chRail, 1400px), calc(100vw - (var(--chGutter, 22px) * 2))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   PLAYBACK OVERRIDE — force NON-sticky header/footer (playback only)
   ========================================================= */
body.playback-page #ch-navbar,
body.playback-page header#ch-navbar,
body.playback-page header.ch-navbar,
body.playback-page #ch-footerbar,
body.playback-page footer#ch-footerbar,
body.playback-page footer.ch-footerbar{
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  inset: auto !important;
  transform: none !important;
  z-index: auto !important;
}

/* If nav.css has mobile overlay close buttons, hide them on playback */
body.playback-page .ch-menu-close,
body.playback-page button[aria-label="Close"],
body.playback-page button[aria-label="Close menu"],
body.playback-page button[aria-label="Open menu"]{
  display: none !important;
}