/**
 * Visual styles for History Menu - tab-style menu for CCNM History page navigation
 *
 */

nav.menu--history-plus,
nav.menu--history-menu {
	position: sticky;
	top: 44px;
	background-color: white;
	z-index: 50;
	border-bottom: 1px solid #bbbbbb;
}

.menu--history-plus #mobileMenu {
	overflow: auto;
}

#block-ccnm-history-plus-menu input[type=checkbox],
#block-ccnm-history-plus-menu label,
#block-ccnm-history-menu input[type=checkbox],
#block-ccnm-history-menu label {
	display: none;
}

#block-ccnm-history-plus-menu ul,
#block-ccnm-history-menu ul {
    list-style: none;
    padding: 0;
	margin-bottom: 0;
	margin-top: 0;
}

/* By default, hide all menu items, then selectively enable */
#block-ccnm-history-menu li {
    display: none;
}

#block-ccnm-history-menu ul li ul {
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s ease;
  display: none;
}

/* Default formatting for visible links */
#block-ccnm-history-plus-menu a,
#block-ccnm-history-menu a {
  display: inline-block;
  color: #696969;
  font-weight: bold;
  background-color: white;
  text-align: center;
}

/* Selective un-hiding */
/* Current active item are always visible by default */
#block-ccnm-history-plus-menu li,
#block-ccnm-history-menu li.menu-item--active-trail,
#block-ccnm-history-menu li.menu-item--active-trail li {
    display: inline-block;
}

/* Building CCNM and Life at CCNM menu items for this vicar should be visible */
#block-ccnm-history-menu ul .menu-item--active-trail ul {
  visibility: visible;
  opacity: 1;
  display: inline-block;
}

/* Items immediately before should be visible */
.page-stirling #block-ccnm-history-menu ul.top-level > li.item-1,
.page-challacombe #block-ccnm-history-menu ul.top-level > li.item-2,
.page-birkett #block-ccnm-history-menu li.item-3, 
.page-habershon #block-ccnm-history-menu li.item-4, 
.page-bartle #block-ccnm-history-menu li.item-5,
.page-roberts #block-ccnm-history-menu li.item-6,
.page-coombs #block-ccnm-history-menu li.item-7,
.page-short #block-ccnm-history-menu li.item-8,
.page-downey #block-ccnm-history-menu li.item-9,
.page-kuhrt #block-ccnm-history-menu li.item-10 {
    display: inline-block;
	& a {
		display: inline-block;
	}
}

/* As should the items immediately after */
.page-stirling #block-ccnm-history-menu ul.top-level > li.item-3,
.page-challacombe #block-ccnm-history-menu li.item-4,
.page-birkett #block-ccnm-history-menu li.item-5, 
.page-habershon #block-ccnm-history-menu li.item-6, 
.page-bartle #block-ccnm-history-menu li.item-7,
.page-roberts #block-ccnm-history-menu li.item-8,
.page-coombs #block-ccnm-history-menu li.item-9,
.page-short #block-ccnm-history-menu li.item-10,
.page-downey #block-ccnm-history-menu li.item-11,
.page-kuhrt #block-ccnm-history-menu li.item-12  {
    display: inline-block;
	& a {
		display: inline-block;
	}
}

#block-ccnm-history-menu li.menu-item--active-trail a {
	color: var(--colour-grey-x40);
	border-bottom: 6px solid LightBlue;
}

#block-ccnm-history-plus-menu a:hover,
#block-ccnm-history-menu li.menu-item--active-trail a:hover,
#block-ccnm-history-menu a:hover {
  color: var(--colour-venetian-red);
  text-decoration: none;
}

#block-ccnm-history-menu li.menu-item--active-trail a.is-active {
  color: var(--colour-text);
  border-bottom: 6px solid blue;
}

#block-ccnm-history-plus-menu a {
	border-bottom: 6px solid silver;
}

#block-ccnm-history-plus-menu a.is-active {
	border-bottom: 6px solid gold;
}

@media all and (min-width: 960px) {

	nav.menu--history-menu {
		position: sticky;
		top: 0px;
	}

}

/* 800px is the width of the layout container that holds the menu */
@media all and (min-width: 800px)  {

/* Set left margin to centre the menu - calculated width including whitespace is 668.6px */
#block-ccnm-history-menu ul.top-level {
  margin-left: 42px;
}

#block-ccnm-history-menu .menu-item--active-trail.menuparent {
  margin-left: 2.5rem;
}

#block-ccnm-history-menu .menu-item--active-trail .item-2 {
  margin-right: 2.5rem;
}

#block-ccnm-history-plus-menu ul.top-level {
    margin-left: 92px;
}

}
/* END of min-width 800px formatting */

/* min-width 600px formatting */
@media all and (min-width: 600px)  {

/* Items immediately before should be visible */
.page-stirling #block-ccnm-history-menu ul.top-level > li.item-1 a,
.page-challacombe #block-ccnm-history-menu ul.top-level > li.item-2 a,
.page-birkett #block-ccnm-history-menu li.item-3 a, 
.page-habershon #block-ccnm-history-menu li.item-4 a, 
.page-bartle #block-ccnm-history-menu li.item-5 a,
.page-roberts #block-ccnm-history-menu li.item-6 a,
.page-coombs #block-ccnm-history-menu li.item-7 a,
.page-short #block-ccnm-history-menu li.item-8 a,
.page-downey #block-ccnm-history-menu li.item-9 a,
.page-kuhrt #block-ccnm-history-menu li.item-10 a {
    border-bottom: 6px solid silver;
}

/* As should the items immediately after */
.page-stirling #block-ccnm-history-menu ul.top-level > li.item-3 a,
.page-challacombe #block-ccnm-history-menu li.item-4 a,
.page-birkett #block-ccnm-history-menu li.item-5 a, 
.page-habershon #block-ccnm-history-menu li.item-6 a, 
.page-bartle #block-ccnm-history-menu li.item-7 a,
.page-roberts #block-ccnm-history-menu li.item-8 a,
.page-coombs #block-ccnm-history-menu li.item-9 a,
.page-short #block-ccnm-history-menu li.item-10 a,
.page-downey #block-ccnm-history-menu li.item-11 a,
.page-kuhrt #block-ccnm-history-menu li.item-12 a  {
    border-bottom: 6px solid silver;
}

/* Dimensions wide enough for all except Challacome */
#block-ccnm-history-menu a,
#block-ccnm-history-menu span {
  width: 100px;
}
	
/* Allen Challacombe link - needs to be wider and padding reduced to retain overall width of 124px */
#block-ccnm-history-menu .item-3 > a {
  width: 104px;
}

/* John Short link needs reduced width to force into 2 lines, increasing LR padding to compensate */
#block-ccnm-history-menu .item-9 > a {
  width: 80px;
}
	
#block-ccnm-history-plus-menu a {
  font-size: 0.875rem;
}

#block-ccnm-history-plus-menu a {
  letter-spacing: -0.25px;
  width: 120px;
  padding: 0.875rem 0rem;
}

#HistoryPlusNavigation {
	display: none;
}

}
/* END of min-width 600px formatting */

/* Padding for menu items is constant from 672px width upwards */
@media all and (min-width: 672px)  {
	
/* Dimensions wide enough for all except Challacome */
#block-ccnm-history-menu a {
  padding: 0.5rem 0.75rem;
}
	
/* Allen Challacombe link - padding reduced to retain overall width of 124px */
#block-ccnm-history-menu .item-3 > a {
  padding: 0.5rem 0.625rem;
}

/* John Short link padding increased because of reduced width to force into 2 lines */
#block-ccnm-history-menu .item-9 > a {
  padding: 0.5rem 1.375rem;
}

}
/* END of min-width 672px formatting */

/* From 600px to 671px the L-R margins for the 1st and Last items are adjusted to keep the active trail centered */
@media all and (min-width: 600px) and (max-width: 671px) {

#block-ccnm-history-menu ul.top-level {
    margin-left: calc(25% - 140px);
	margin-right: calc(25% - 140px);
}

#block-ccnm-history-menu .menu-item--active-trail.menuparent {
  margin-left: calc(50% - 280px);
}

#block-ccnm-history-menu .menu-item--active-trail .item-2 {
  margin-right: 0;
}

.page-stirling #block-ccnm-history-menu ul.top-level > li.item-3,
.page-challacombe #block-ccnm-history-menu li.item-4,
.page-birkett #block-ccnm-history-menu li.item-5, 
.page-habershon #block-ccnm-history-menu li.item-6, 
.page-bartle #block-ccnm-history-menu li.item-7,
.page-roberts #block-ccnm-history-menu li.item-8,
.page-coombs #block-ccnm-history-menu li.item-9,
.page-short #block-ccnm-history-menu li.item-10,
.page-downey #block-ccnm-history-menu li.item-11,
.page-kuhrt #block-ccnm-history-menu li.item-12  {
    margin-left: calc(50% - 280px);
}

#block-ccnm-history-plus-menu ul.top-level {
    margin-left: calc(50% - 292px);
	margin-right: calc(50% - 292px);
}

#block-ccnm-history-plus-menu a {
  width: 112px;
}

}
/* END of min-width 672px to 799px formatting */

/* From 672px to 799px the LR margins for the 1st and Last items are reduced to keep them equidistant*/
@media all and (min-width: 672px) and (max-width: 799px) {

/* Set left margin to centre the menu - calculated width including whitespace is 668.6px */
#block-ccnm-history-menu ul.top-level {
    margin-left: calc(25% - 160px);
	margin-right: calc(25% - 160px);
}

#block-ccnm-history-menu .menu-item--active-trail.menuparent {
  margin-left: calc(50% - 320px);
}

#block-ccnm-history-menu .menu-item--active-trail .item-2 {
  margin-right: 0;
}

.page-stirling #block-ccnm-history-menu ul.top-level > li.item-3,
.page-challacombe #block-ccnm-history-menu li.item-4,
.page-birkett #block-ccnm-history-menu li.item-5, 
.page-habershon #block-ccnm-history-menu li.item-6, 
.page-bartle #block-ccnm-history-menu li.item-7,
.page-roberts #block-ccnm-history-menu li.item-8,
.page-coombs #block-ccnm-history-menu li.item-9,
.page-short #block-ccnm-history-menu li.item-10,
.page-downey #block-ccnm-history-menu li.item-11,
.page-kuhrt #block-ccnm-history-menu li.item-12  {
    margin-left: calc(50% - 318px);
}

#block-ccnm-history-plus-menu ul.top-level {
    margin-left: calc(50% - 309px);
	margin-right: calc(50% - 309px);
}

}
/* END of min-width 672px to 799px formatting */

@media all and (max-width: 671px)  {
	/* Full display of Home, Next and Previous Items */
	/* Padding and margins reduced to the minimum values */
	
	#block-ccnm-history-menu ul.top-menu {
		margin: 0.5rem 0.5rem 0 0.5rem;
	}
	
	#block-ccnm-history-menu a,
	#block-ccnm-history-menu span {
		padding: 0.5rem 0.25rem;
	}

	/* Allen Challacombe link needs to be a little wider */
	#block-ccnm-history-menu .item-3 > a {
		padding: 0.5rem 0.125rem;
	}

	/* John Short link needs reduced width to force into 2 lines, increasing LR padding to compensate */
	#block-ccnm-history-menu .item-9 > a {
		padding: 0.5rem 0.875rem;
	}

}
/* END of max-width 671px formatting */

@media all and (max-width: 599px)  {
	/* Replace Next and Previous with arrows */
	
	/* Items immediately before should be replaced by a left arrow */
	.page-stirling #block-ccnm-history-menu ul.top-level > li.item-1,
	.page-challacombe #block-ccnm-history-menu ul.top-level > li.item-2,
	.page-birkett #block-ccnm-history-menu li.item-3, 
	.page-habershon #block-ccnm-history-menu li.item-4, 
	.page-bartle #block-ccnm-history-menu li.item-5,
	.page-roberts #block-ccnm-history-menu li.item-6,
	.page-coombs #block-ccnm-history-menu li.item-7,
	.page-short #block-ccnm-history-menu li.item-8,
	.page-downey #block-ccnm-history-menu li.item-9,
	.page-kuhrt #block-ccnm-history-menu li.item-10 {
		display: inline-block;
		& a {
			display: inline-block;
			font-size: 0;
			background-color: #e6f2ff;  /* close to Alice Blue */
			color: blue;
			border: 1px solid silver;
			border-radius: 8px;
			padding: 0.1875rem;
			width: 20px;
			&::before {
				font-size: 1.5rem;
				line-height: 1;
				content: "<";
			}
		}
	}

	/* Items immediately after should be replaced by a right arrow */
	.page-stirling #block-ccnm-history-menu ul.top-level > li.item-3,
	.page-challacombe #block-ccnm-history-menu li.item-4,
	.page-birkett #block-ccnm-history-menu li.item-5, 
	.page-habershon #block-ccnm-history-menu li.item-6, 
	.page-bartle #block-ccnm-history-menu li.item-7,
	.page-roberts #block-ccnm-history-menu li.item-8,
	.page-coombs #block-ccnm-history-menu li.item-9,
	.page-short #block-ccnm-history-menu li.item-10,
	.page-downey #block-ccnm-history-menu li.item-11,
	.page-kuhrt #block-ccnm-history-menu li.item-12  {
		display: inline-block;
		& a {
			display: inline-block;
			font-size: 0;
			background-color: #e6f2ff;  /* close to Alice Blue */
			color: blue;
			border: 1px solid silver;
			border-radius: 8px;
			padding: 0.1875rem;
			width: 20px;
			&::before {
				font-size: 1.5rem;
				line-height: 1;
				content: ">";
			}
		}
	}
	
	#HistoryPlusNavigation {
		display: block;
		margin-bottom: 1.5rem;
	}
	
	#block-ccnm-history-plus-menu  {
		display: none;
	}
	
}
/* END of max-width 599px formatting */

@media all and (min-width: 420px) and (max-width: 599px)  {
	/* Font size and letter spacing reduced */
	/* Next and Previous replaced by arrows */
	#block-ccnm-history-menu .menu-item--active-trail.menuparent {
		margin-left: calc(25% - 97px);
		margin-right: calc(25% - 97px);
	}

	#block-ccnm-history-menu .menu-item--active-trail .item-2 {
		margin-right: 0;
	}
	
	#block-ccnm-history-menu li.menu-item--active-trail,
	#block-ccnm-history-menu .menu-item--active-trail li {
		letter-spacing: -0.4px;			/* To reduce whitespace between li to 4px */
	}
	
	.page-stirling #block-ccnm-history-menu ul.top-level > li.item-1,
	.page-challacombe #block-ccnm-history-menu ul.top-level > li.item-2,
	.page-birkett #block-ccnm-history-menu li.item-3, 
	.page-habershon #block-ccnm-history-menu li.item-4, 
	.page-bartle #block-ccnm-history-menu li.item-5,
	.page-roberts #block-ccnm-history-menu li.item-6,
	.page-coombs #block-ccnm-history-menu li.item-7,
	.page-short #block-ccnm-history-menu li.item-8,
	.page-downey #block-ccnm-history-menu li.item-9,
	.page-kuhrt #block-ccnm-history-menu li.item-10 {
		margin-left: calc(25% - 101px);
	}
	
	#block-ccnm-history-menu a,
	#block-ccnm-history-menu span {
		width: 100px;
	}

	#block-ccnm-history-menu .menu-item--active-trail a {
		letter-spacing: 0px;			/* Override li spacing for the text of the links themselves */
	}

	/* Allen Challacombe link needs to be a little wider */
	#block-ccnm-history-menu .item-3 > a {
		width: 104px;
	}

	/* John Short link needs reduced width to force into 2 lines */
	#block-ccnm-history-menu .item-9 > a {
		width: 80px;
	}

}

@media all and (min-width: 375px) and (max-width: 419px)  {
	/* Font size and letter spacing reduced */
	
	/* Items immediately before should be visible too */
	.page-stirling #block-ccnm-history-menu ul.top-level > li.item-1,
	.page-challacombe #block-ccnm-history-menu ul.top-level > li.item-2,
	.page-birkett #block-ccnm-history-menu li.item-3, 
	.page-habershon #block-ccnm-history-menu li.item-4, 
	.page-bartle #block-ccnm-history-menu li.item-5,
	.page-roberts #block-ccnm-history-menu li.item-6,
	.page-coombs #block-ccnm-history-menu li.item-7,
	.page-short #block-ccnm-history-menu li.item-8,
	.page-downey #block-ccnm-history-menu li.item-9,
	.page-kuhrt #block-ccnm-history-menu li.item-10 {
		margin-left: calc(25% - 90px);
	}	
	
	#block-ccnm-history-menu .menu-item--active-trail.menuparent {
		margin-left: calc(25% - 84px);
		margin-right: calc(25% - 84px);
	}
	
	#block-ccnm-history-menu li.menu-item--active-trail,
	#block-ccnm-history-menu .menu-item--active-trail li {
		letter-spacing: -0.4px;			/* To decrease whitespace between li */
	}
	
	#block-ccnm-history-menu a,
	#block-ccnm-history-menu span {
		font-size: 0.875rem;
		letter-spacing: -0.25px;
		padding: 0.5rem 0.375rem;
		width: 80px;
	}

	/* Allen Challacombe link needs to be a little wider */
	#block-ccnm-history-menu .item-3 > a {
		width: 88px;
		padding: 0.5rem 0.0625rem;
	}

	/* John Short link needs reduced width to force into 2 lines */
	#block-ccnm-history-menu .item-9 > a {
		width: 70px;
		padding: 0.5rem 0.625rem;
	}

}

@media all and (max-width: 374px)  {
	/* Font size and letter spacing reduced */
	
	#block-ccnm-history-menu ul.top-level {
		margin: 0.5rem 0.375rem 0 0.375rem;
	}
	
	#block-ccnm-history-menu .menu-item--active-trail.menuparent {
		margin-left: calc(25% - 77px);
		margin-right: calc(25% - 77px);
	}
	
	#block-ccnm-history-menu li.menu-item--active-trail,
	#block-ccnm-history-menu .menu-item--active-trail li {
		letter-spacing: -0.6px;			/* To decrease whitespace between li to around 3.5px */
	}
	
	#block-ccnm-history-menu a,
	#block-ccnm-history-menu span {
		font-size: 0.75rem;
		letter-spacing: -0.25px;
		width: 72px;
		padding: 0.5rem 0.25rem;
	}

	/* Allen Challacombe link needs to be a little wider */
	#block-ccnm-history-menu .item-3 > a {
		width: 76px;
		padding: 0.5rem 0.125rem;
	}

	/* John Short link needs reduced width to force into 2 lines */
	#block-ccnm-history-menu .item-9 > a {
		width: 60px;
		padding: 0.5rem 0.625rem;
	}

	/* Items immediately before should be visible too */
	.page-stirling #block-ccnm-history-menu ul.top-level > li.item-1,
	.page-challacombe #block-ccnm-history-menu ul.top-level > li.item-2,
	.page-birkett #block-ccnm-history-menu li.item-3, 
	.page-habershon #block-ccnm-history-menu li.item-4, 
	.page-bartle #block-ccnm-history-menu li.item-5,
	.page-roberts #block-ccnm-history-menu li.item-6,
	.page-coombs #block-ccnm-history-menu li.item-7,
	.page-short #block-ccnm-history-menu li.item-8,
	.page-downey #block-ccnm-history-menu li.item-9,
	.page-kuhrt #block-ccnm-history-menu li.item-10 {
		margin-left: calc(25% - 76px);
		& a {
			width: 18px;
		}
	}

	/* Items after */
	.page-stirling #block-ccnm-history-menu ul.top-level > li.item-3,
	.page-challacombe #block-ccnm-history-menu li.item-4,
	.page-birkett #block-ccnm-history-menu li.item-5, 
	.page-habershon #block-ccnm-history-menu li.item-6, 
	.page-bartle #block-ccnm-history-menu li.item-7,
	.page-roberts #block-ccnm-history-menu li.item-8,
	.page-coombs #block-ccnm-history-menu li.item-9,
	.page-short #block-ccnm-history-menu li.item-10,
	.page-downey #block-ccnm-history-menu li.item-11,
	.page-kuhrt #block-ccnm-history-menu li.item-12  {
		& a {
			width: 18px;
		}
	}

}