/**
 * Settings for the Mobile Menu 
 * This is the primary (main) menu formatted for smaller width screens - mainly smartphones and tablets
 * LAYER 2A/3A - FORMATTING FOR A SPECIFIC SUBSET OF A TYPE OF CONTENT (MENUS) 
 */

/** These settings only apply where the screen width is less than 960px **/
@media all and (max-width: 959px) {

/* The menu block used on wider (typically desktop PC) screens is hidden */
#block-ccnm-pc-navigation  {
	display: none;
}

/** Position the menu as the first thing below the CCNM logo **/
#block-ccnm-navigation  {
	margin-top: 0;
	background: #BEBC97; 			/* We use the CCNM gold colour for the background */
}

/* Styling for the menu header, which acts as background for the 'hamburger' icon - i.e. comprising the three parallel horizontal lines */
#block-ccnm-navigation .menuHeader {
  display: block;
  position: fixed;					/* Fixed relative to the viewport... */
  top: 0;							/* ...the fixed position being right at the top of the screen */ 
  z-index: 99;
  width: 100%;
  height: 2.75rem;  				/* Set the same as the height of the individual menu items */
  background: #BEBC97; 				/* CCNM gold colour background */
}

#block-ccnm-navigation #mobileMenu {
  width: 100%;
  position: fixed;					/* The block is positioned fixed relative to the viewport - so that it remains in the same place when scrolling */
  left: 0;
  top: 44px;  						/* Set so as to fit adjacent to the menu header when displayed */
  z-index: 99;
  transform: translateX(-100%);		/* By default the menu items are not displayed - achieved by translating it off the screen */
  transition: transform 250ms ease-in-out;		/* The menu transition effect when the 'hamburger' is toggled has a slow start and end lasting 0.25 secs */
  background: #BEBC97; 				/* CCNM gold colour background */
}

/* Before we launch into the clever stuff with the 'hamburger' and the up/down arrows, we style the individual menu items */
#block-ccnm-navigation ul {
  float: left;
  background: #BEBC97; 				/* CCNM gold colour background */
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

#block-ccnm-navigation li {
	display: block;
	padding: 0;
	margin: 0;
	border-top: solid white;
    border-width: 1px;
}
/* Each menu item has a white top border, but no bottom border - we need to set the bottom border for the last item in each level of the menu */
#block-ccnm-navigation ul li li li:last-child,
#block-ccnm-navigation ul li li:last-child,
#block-ccnm-navigation ul li:last-child {
  border-bottom: solid white;
  border-width: 1px;
}
/* ...but we don't want this set if the last item itself has children and is expanded */
#block-ccnm-navigation ul li:last-child li {
  border-bottom: none;
}
/* Styling for the links for each menu item */
#block-ccnm-navigation ul a,
#block-ccnm-navigation ul a:visited,
#block-ccnm-navigation ul span {
  color: #ffffff;
  text-decoration: none;
  display: inline-block;
  padding: 0.75rem 1rem;
}
/* If the menu item has children, we reduce the width of the link so as to allow space for the up/down arrows */
#block-ccnm-navigation ul .has-children a,
#block-ccnm-navigation ul .has-children span {
  width: calc(100% - 28px);
}

/**
 * Styling the Hamburger Icon
 */

/* To make the hamburger to work, we have an input checkbox hidden underneath it */ 
#block-ccnm-navigation input[type=checkbox] {
  transition: all 0.3s;
  box-sizing: border-box;
  display: none;
}

/* The label for the input check box actually contains the hamburger */
.menuIconToggle {
  transition: all 0.3s;
  box-sizing: border-box;
  cursor: pointer;
  position: fixed;
  z-index: 99;
  top: 14px; 						/* This is to align with the .menuHeader */
  left: 1rem;
  height: 1.5rem;
  width: 1.5rem;
  background: #BEBC97; 				/* CCNM gold colour background */
}

/* Style the 3 elements (horizontal lines) of the hamburger */
#block-ccnm-navigation .spinner {
  transition: all 0.3s;
  box-sizing: border-box;
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: #fff;
}

/* The middle of the hamburger */
#block-ccnm-navigation .horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}

/* The top of the hamburger */
#block-ccnm-navigation .diagonal.line-1 {
  position: relative;
  transition: all 0.3s;
  box-sizing: border-box;
  float: left;
}

/* The bottom of the hamburger */
#block-ccnm-navigation .diagonal.line-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}

/* When the user clicks on the hamburger icon, the checkbox underneath it is checked, and we slide in the menu from the left */
#block-ccnm-navigation input[type="checkbox"]:checked ~ #mobileMenu { transform: translateX(0); }

/* At the same time, we make the middle part of the hamburger disappear when it is clicked on */
#block-ccnm-navigation input[type=checkbox]:checked ~ .menuIconToggle > .horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  opacity: 0;
}
/* Meanwhile, we rotate the top and bottom lines of the hamburger to form a "X" */
#block-ccnm-navigation input[type=checkbox]:checked ~ .menuIconToggle > .diagonal.line-1 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(135deg);
  margin-top: 8px;
}
#block-ccnm-navigation input[type=checkbox]:checked ~ .menuIconToggle > .diagonal.line-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(-135deg);
  margin-top: -9px;
}

/**
 * Styling the Up/Down arrow toggle
 */
/* As with the hamburger, the Down arrow has a checkbox hidden underneath it */
#block-ccnm-navigation input[type=checkbox].menuDownArrow {
  float: right;
  height: 1.125rem;
  width: 1.125rem;
  margin: 0.75rem 0.75rem;
}
/* The input label will contain the Down arrow */
#block-ccnm-navigation .downArrow {
  transition: all 0.3s;
  box-sizing: border-box;
  display: inline-block;
  float: right;
  height: 2.625rem;
  width: 2.625rem;
  padding: 0.625rem;
  margin-bottom: 0;
}

/* The Down arrow is in the 'after' selector of the .down-arrow div element */
#block-ccnm-navigation .down-arrow:after {
	content: "▼";
	color: #fff;
}

/* Styling to ensure that when the input checkbox is checked, the Down ("▼") arrow flips to an Up arrow ("▲") */
/* In this case we need to use the IDs for each checkbox to distinguish between them */
#block-ccnm-navigation input[type=checkbox]#menuDownArrow10:checked ~ .downArrow > .down-arrow.level-0:after,
#block-ccnm-navigation input[type=checkbox]#menuDownArrow11:checked ~ .downArrow > .down-arrow.level-1:after,
#block-ccnm-navigation input[type=checkbox]#menuDownArrow20:checked ~ .downArrow > .down-arrow.level-0:after,
#block-ccnm-navigation input[type=checkbox]#menuDownArrow30:checked ~ .downArrow > .down-arrow.level-0:after {
	content: "▲";
}

/* Control visibility of sub-levels ul.menu.level-1 and ul.menu.level-2 */
/* By default, only the top level menu (level 0) should be shown */
#block-ccnm-navigation .menu.level-1,
#block-ccnm-navigation .menu.level-2  {
	display: none;
	transition: all 0.3s;
}

/* Make the menus appear based on whether the checkboxes (underneath the "▼" arrow) are checked */
#block-ccnm-navigation input[type=checkbox]#menuDownArrow10:checked ~ .menu.level-1,
#block-ccnm-navigation input[type=checkbox]#menuDownArrow11:checked ~ .menu.level-2,
#block-ccnm-navigation input[type=checkbox]#menuDownArrow20:checked ~ .menu.level-1,
#block-ccnm-navigation input[type=checkbox]#menuDownArrow30:checked ~ .menu.level-1 {
	display: block;
}

/* Legacy formatting from superfish */
#block-ccnm-navigation ul li li a,
#block-ccnm-navigation ul li li span {
  padding-left: 2rem;
}
#block-ccnm-navigation ul li li li a,
#block-ccnm-navigation ul li li li span {
  padding-left: 3rem;
}

/* This is actually for the dummy div in the welcome heading - we probably want a dummy custom block instead */
.position-fix  {
	height: 36px;
}

}
/* End of small-screen formatting  */