/*                                                                      */
/* 		           NAVIGATION - MOBILE ONLY               		        */
/*                                                                      */
/* v001 02 Aug 2019 -   Initial version created from WOL mobile-only-nav.css     */
/* v002 06 Aug 2019 -   Modified to new content element names           */
/* v003 07 Aug 2019 -   Inherited search-bar-container stuff from GS    */
/* v004 20 Sep 2019 -   Set mobile image offsets for RHM                */
/* v005 27 Sep 2019 -   Fix search box at top of mobile-only nav        */
/*                                                                      */
/*                                                                      */

/* *** Primary Nav *** */

nav.primary ul li.home,
nav.primary ul li.welcome,
nav.primary ul li.my-account {
  display: block;		/* They are omitted in usual mobile nav, but needed in this variant */
}

div.wrapper.overlay {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: 1;		/* Default z-index puts it behind header.banner */
  background-color: transparent;
  transition: background-color 0.1s ease;
  transition-delay: 0.4s;
}

div.wrapper {
  margin-left: 0px;		/* All wrappers (except nav) normally up against left edge of page */
  transition: margin-left 0.4s ease;
}
body.menu-out div.wrapper {
  margin-left: -270px;	/* Move all wrappers (except nav) so they appear to slide of the page */
}

/* On ARP 3, we also have to do this to the absolute positioned H2 */
body section.content h2 {
  margin-left: 0;
  transition: margin-left 0.4s ease;
}
body.menu-out section.content h2 {
  margin-left: -270px;
}


body.menu-out nav#func {
  /*display: none;*/
}

div.wrapper.nav,
div.wrapper.search-bar-container {
  position: absolute;		/* Take out of main flow, as it will be appearing over on right */
  overflow: hidden;			/* Width 0 isn't enough to make this vanish */
  right: 0;
  top: 0;
  width: 0;
  transition: width 0.4s ease;
}
div.wrapper.nav { top: 52px; }		/* This one has to appear a bit further down */

nav.primary ul,
div.wrapper.search-bar-container div.search-bar {
  display: block;		/* Always display them, because their containers can't be seen */
}

body.menu-out div.wrapper.nav,
body.menu-out div.wrapper.search-bar-container {
  margin-left: 0;
  display: block;
  width: 270px;
}
div.wrapper.nav ul,
div.wrapper.search-bar-container div.search-bar {
  width: 270px;
  overflow-x: hidden;		/* This makes it appear to slide from right, instead of just getting wider */
}
body.menu-out div.wrapper.nav nav {}
body.menu-out nav.primary ul {
  display: block;
  border-right: 0;
}

:root {
  --indent-step: 15px;
}

/* Primary nav changes specific to MOBILE nav */
nav.primary ul li a {
  font-size: 16px;      
  border-bottom: 2px solid white;
}
/* Colours and offsets */
nav.primary ul li a {
  padding-left: 20px;
  background-color: #1C3A6B /* __ ARP 3 __ Dark Blue (Pantone 541c)  */;
}
nav.primary ul li ul li a {
  padding-left: 35px;
  background-color: #0083A9 /* __ ARP 3 __ Blue (Pantone 314c) */;
}
nav.primary ul li ul li ul li a {
  padding-left: 50px;
  background-color: #6E267B /* __ ARP 3 __ Purple (Pantone 259c) */;
}
nav.primary ul li ul li ul li ul li a {
  padding-left: 65px;
  background-color: #dd052b /* __ ARP 3 __ Red (Pantone 186c) */;
}
nav.primary ul li ul li ul li ul li ul li a {
  padding-left: 80px;
  background-color: #F0AB00 /* __ ARP 3 __ Gold (Pantone 130c) */;
  color: black;
}


header.banner {		/* Make sure nav#func doesn't fall through and go too far right */
  position: relative;
}
/*header.banner nav#func li.search,*/       /* Bring back search icon for ARP 3 */
header.banner nav#func li.account {
  display: none;
}
body.menu-out header.banner nav#func li.disp-nav a {
  background-position: -50px -391px;
}

body.menu-out {
  background-color: rgba(0, 0, 0, 0.4);
  transition: background-color 0.1s ease;
  transition-delay: 0.4s;
}

nav.primary p.pagetitle { display: none } /* Iain 31 Jul 2017 says hide page title for now */


/* ************************ */
/*      Arrows on subnav    */
/* ************************ */

nav.primary ul li.has_subnav a {
  background-position: -270px -800px;
}
nav.primary ul li.has_subnav ul li a {
  background-position: -250px -751px;
}


/* **************************************** */
/* 			SEARCH BAR						*/
/* **************************************** */

div.wrapper.search-bar-container div.search-bar {
  display: block;
  width: 270px;
}
div.wrapper.search-bar-container div.search-bar {
  margin-right: 0px;
}
div.wrapper.search-bar-container .search-bar input.term {
  width: 190px;
}
.search-bar input.submit {
  margin-right: 0px;        /* Needed to fix mobile-only nav (27 Sep 2019) */
}