/*                                                                      */
/* 		                   SEARCH                       		        */
/*                                                                      */
/* v001 02 Aug 2019 -   Initial version created from WOL tablet.css     */
/* v002 06 Aug 2019 -   Modified to new content element names           */
/* v003 07 Aug 2019 -   Inherit .wrapper.search-bar-container from GS   */
/* v004 20 Sep 2019 -   Move search bar on results page below nav       */
/*                                                                      */
/*                                                                      */

:root {
  --search-button-width: 100px;
}

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

  header #search-icon {
    display: block;             /* Appears from Tablet up */
  }

  header #search-icon {
	position: absolute;
	top: 30px;
	right: calc( 2 * var(--left-margin) );
	height: 40px;
	width: 40px;
	border-radius: 30px;
	cursor: pointer;
	background-position: -105px -255px;
	background-color: #dd052b /* __ ARP 3 __ Red (Pantone 186c) */;
  }
  header #search-icon.isDown {
	background-color: var(--audience-color);
  }
  div.wrapper.search-bar-container {
	display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 200;		/* Has to be on top of features which are 101. */
  }
  div.wrapper.search-bar-container div.search-bar {
	display: block;
    top: 50px;
    right: 0px;
    padding: 0;
    margin: 0 auto;		/* To centre it */
    overflow: auto;		/* Because the form within it will be floated right */
  }

  div.wrapper.header div.search-bar {
	display: none;
  }


  .search-bar input.term {
    color: #636469 /* ARP 3 Dark Grey */ !important;    /* This designed to override the audience color on tablet and above but leave it working on mobile */
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 20px;
    height: 41px;                               /* Increased 40px to 41 px 17 Mar 2022 */
    /* All available space less button width + 20px left padding */
    width: calc( 100% - var(--search-button-width) - 20px ); 
  }
  .search-bar input.submit {
	/*font-family: Oswald, Arial, Helvetica, sans-serif;*/
	font-weight: 700;
    height: 40px;
    width: 50px;
    padding: 0px 0px 0px 0px;
    margin-top: 0px;
    margin-right: 0px;
	background-color: var(--audience-color);
  }

  div.wrapper.header div.search-bar {				/* Do not display this on most pages ... */
	display: none;
  }
  
  /* No aside on search results page */
  body.search aside { width: 0; }
  body.search section.content { width: 100%; }
  
  /*div.wrapper.sitemap*/ div.search-bar {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: auto;	/* Because the form within it will be floated right */
  }

  .search-bar input.submit {
    width: 40px;
    height: 41px;
    margin-right: 0;
  }


  /* Positioning of search term box on the search results page */
  /* Keep these changes together at bottom of file until I'm sure they work */
  
  /* This block above can be removed, as we're using search-bar-container instead */
  body.search div.wrapper.header div.search-bar {
    display: none !important;       /* important because javascript is interfering */
    margin-top: 45px;  /* Keep this as it gives space for search bar to appear on */
  }
  body.search div.wrapper.search-bar-container {
    display: block;
    top: 151px;
  }  
  body.search header #search-icon {
    display: none;
  }
  body.search div.wrapper.search-bar-container div.search-bar {
    top: 0;
    max-width: none;
  }



/* ******************************************** */
/*          Added from NPG 2020 site            */
/* ******************************************** */
  div.wrapper.search-bar-container .search-bar form, 
  div.wrapper.sitemap div.search-bar form {
    border-radius: 25px;
    margin-left: 4%;
    margin-right: 4%;
    background-color: white;
    border: 2px solid white;
  }
  div.wrapper.search-bar-container .search-bar input.submit, 
  div.wrapper.sitemap .search-bar input.submit {
    border-radius: 25px;
    width: var(--search-button-width);
  }