/* Page-specific navigation integration.
   Content header artwork is reused on Content + Cine Cafe only.
   Home retains its approved native top bar. */

:root {
  --shared-nav-ink: #050505;
  --shared-nav-gold: #d8ae63;
}

.shared-top-nav {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 120;
  width: 100%;
  overflow: hidden;
  background: var(--shared-nav-ink);
}

.shared-nav-artwork {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

/* The locked Content header contains a hamburger at far left. Mask only that
   authored icon while retaining the original logo/search artwork. */
.shared-top-nav::after {
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 16%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 42% 50%,
    #050505 0%,
    #050505 48%,
    rgba(5,5,5,.99) 64%,
    rgba(5,5,5,.92) 78%,
    rgba(5,5,5,0) 100%
  );
}

.shared-nav-brand-hotspot,
.shared-nav-search-hotspot {
  position: absolute;
  z-index: 4;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.shared-nav-brand-hotspot {
  left: 16%;
  top: 8%;
  width: 68%;
  height: 84%;
}

.shared-nav-search-hotspot {
  right: 0;
  top: 14%;
  width: 16%;
  height: 72%;
  cursor: pointer;
}

.shared-nav-brand-hotspot:focus-visible,
.shared-nav-search-hotspot:focus-visible {
  outline: 2px solid var(--shared-nav-gold);
  outline-offset: -4px;
}

/* CONTENT PAGE — same approved header treatment. */
.brand-header {
  background: var(--shared-nav-ink) !important;
}

.brand-header > .shared-top-nav {
  position: relative;
}

.brand-header > .brand-artwork {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  visibility: hidden;
  pointer-events: none;
}

.header-menu,
.header-search {
  display: none !important;
}

/* HOME PAGE — keep the original baked top menu. Only remove/mask hamburger. */
.hm3-stage::before {
  content: '';
  position: absolute;
  z-index: 19;
  left: 1.1%;
  top: .55%;
  width: 8.2%;
  height: 4.9%;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    #050505 0%,
    #050505 60%,
    rgba(5,5,5,.97) 75%,
    rgba(5,5,5,0) 100%
  );
}

.hm3-menu {
  display: none !important;
}

/* Transparent Home link over the native Home-page brand title. */
.hm3-home {
  left: 17%;
  top: .35%;
  width: 66%;
  height: 5.25%;
  z-index: 21;
  border-radius: 10px;
}

/* CINE CAFE — Content header is a real row ABOVE the untouched Cafe stage. */
.cine-cafe-page {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.cine-cafe-page > .shared-top-nav {
  position: relative;
  flex: 0 0 auto;
  width: min(100%, 900px);
}

/* Remove only the Cafe master’s own hamburger graphic + hit area. */
.cine-cafe-stage::before {
  content: '';
  position: absolute;
  z-index: 8;
  left: .9%;
  top: .65%;
  width: 7.4%;
  height: 5.1%;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    #050505 0%,
    #050505 60%,
    rgba(5,5,5,.97) 75%,
    rgba(5,5,5,0) 100%
  );
}

.hotspot-menu {
  display: none !important;
}