/**
 * Visual styles for Primary Menu - in larger width screens (mainly PCs and laptops)
 *
 * This applies where the screen width is greater than or equal to 960px 
 * The menu block for this is #block-ccnm-pc-navigation
 *
 * On smaller screens it is replaced by the more mobile-friendly format in #block-ccnm-navigation and set in mobile-menu.css
 */

/** We apply the settings where the screen width is greater than or equal to 960px **/
@media all and (min-width: 960px) {

/* Hide the mobile menu display - which is fixed at the top of the viewport */
#block-ccnm-navigation,
#block-ccnm-pc-navigation input[type=checkbox],
#block-ccnm-pc-navigation label {
	display: none;
}

/** PRIMARY MENU - horizontal menu in header **/
/* Would this be better in header.css? Particularly as we may want to explicitly override the nav margin-top setting of 0.5rem 
 * Some revamping of the code there would be good for future maintenance
 * We can always quote the below, saying the block has width 600px and margin-left equal to 50% - 300px to centre it
 */
#block-ccnm-pc-navigation  {
  width: 600px;  						/* Width is the maximum allowing the menu to be positioned to the right of the CCNM logo rather than below it */
  margin-left: calc(50% - 300px);		/* Set the left margin so that the menu is positioned in the centre of the screen */
}

/**
  ul width should be set to 600px
  and margin-left set on individual menu items to effectively centre them e.g. -200px for the 3rd item (What's On)
 */
#block-ccnm-pc-navigation ul {
  float: left;
  height: 76px;  						/* Purpose is to set the header region height */
  margin: 0;
  padding: 0;
  line-height: 1.25;
  list-style: none;
}

/* The second level is hidden by default */
#block-ccnm-pc-navigation ul li ul {
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s ease;
  display: none;
}

/* When hovering over a top level menu item, make the menu items below it visible */
#block-ccnm-pc-navigation ul li:hover > ul,				/* All ul elements where the parent is a li element currently hovered over */
#block-ccnm-pc-navigation ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
  background-color: var(--colour-whitesmoke);
}

/* Position the second level menu below the top level */
#block-ccnm-pc-navigation li:hover > ul {	
  top: 2rem;
  width: 600px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.5);		/* box shadow for the next level menu when it becomes visible */
}

/* Next level includes menu descriptions - 600px width so position appropriately */
#block-ccnm-pc-navigation li.item-2:hover > ul {	
  margin-left: -100px;
}
#block-ccnm-pc-navigation li.item-3:hover > ul {	
  margin-left: -200px;
}
#block-ccnm-pc-navigation li.item-4:hover > ul {	
  margin-left: -300px;
}

/* Set the width of the top level menu items - there being 6 of these to fit in the 600px width menu */
#block-ccnm-pc-navigation li {
  width: 100px;
  margin: 0;
}

/* Positioning of the menu items, the z-index ensuring the menu appears above others (like the banner image) */
#block-ccnm-pc-navigation ul li {
  float: left;
  position: relative;
  z-index: 498;
}

/* The second (and third) levels are set with a greater width to accommodate longer text than the top level */
#block-ccnm-pc-navigation .level-1 li {
  margin-top: 0;
  margin-right: 0;
  width: 300px;
}

/* Make first item full width for 'About Us' and 'What's On' - where there are an odd number */
/* Also second 'What's On' item .item-3 .item-2 - when there's a seasonal extra item - Christmas or Easter */
#block-ccnm-pc-navigation .item-2 .item-1,
#block-ccnm-pc-navigation .item-3 .item-22,    /* Change 22 to 2 when Christmas or Easter items enabled */
#block-ccnm-pc-navigation .item-3 .item-1 {
  width: 600px;
}

/* Styling of the menu links */
#block-ccnm-pc-navigation a,
#block-ccnm-pc-navigation span {
  display: block;
  position: relative;
  color: #404040;
  background-color: white;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  padding: 0.5rem 0.25rem;
}

/* Styling for lower level menu links */
#block-ccnm-pc-navigation .level-1 a {
  text-align: left;
  padding: 0.5rem;
  z-index: 499;
  border: 1px solid silver;
  background-color: white;
  &::after {
	  display: block;
	  padding: 0.5rem 0;
	  content: attr(title);
	  letter-spacing: 0.25px;
	  text-transform: none;
	  font-weight: 400;
  }
}

#block-ccnm-pc-navigation a:focus,
#block-ccnm-pc-navigation a:hover,
#block-ccnm-pc-navigation a:active,
#block-ccnm-pc-navigation span:hover {
  background: white;
  outline: 0;
}

#block-ccnm-pc-navigation li li:hover > ul,
#block-ccnm-pc-navigation li li > ul:hover {
   left: 100%;
   box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
   z-index: 499;
}

/* Currently we have no 3rd level - but in this eventuality a right arrow would be displayed to indicate it when a 2nd level item is hovered over */
#block-ccnm-pc-navigation li:hover > li.menu-item--expanded:after,
#block-ccnm-pc-navigation li li span:after {
  content: " ►";
}

#block-ccnm-pc-navigation li li.menu-item--expanded > ul {
  margin-top: -2rem;							/* Positioning so that 1st menu item horizontally aligns with its parent */
}

}