/**
 * Settings for the header region
 * This region contains the following blocks, in the order they are presented:
 * 1. The Welcome Banner across the top of the site (grey background)
 * 2. The CCNM logo
 * 3. The main menu
 * 4. The Search box
 * 5. The Header Banner (for the banner image with CCNM 'motto')
 *
 */

/**
 * Grey Welcome Banner
 *
 * Contains text in a single paragraph, which is all we need to theme */
#block-ccnm-welcome-banner p {
	color: white;
	background-color: #989898;		/* Grey background */ 
	font-size: 0.875rem;			/* 14 point (1rem = 16 point) */
	line-height: 1.125rem;			/* 18 px */
	padding: 0.5rem;				/* This effectively determines the height of the banner */
	margin: 0;						/* Overrides the standard paragraph margins */
}

#block-ccnm-welcome-banner .field a  {
	color: white;					/* Font colour for the links in the banner */
}

#block-ccnm-welcome-banner .field a:hover  {
	text-decoration: underline;		/* Ensure text of the link is underlined when the mouse hovers over it */
}

/**
 * CCNM Logo
 */
/* Formatting for the link (back to the home page) wrapping around the CCNM logo image */
 
/* Note there is an anomaly here, in that the 'container' for the link, #block-ccnm-logo, takes its dimensions, not from the logo itself (which is 
 within an 'a' element) but the two hidden divs .site-slogan and .site-name - both at 22px which is 1.375rem as specified.
 As also noted, these heights are only used to push down the primary menu to align with the logo.
 A more elegant solution would be to define the dimensions of #block-ccnm-logo and set margin-top on block-ccnm-pc-navigation
 This would also require changing the two hidden block dimensions */  
.site-logo {
  float: left; 						/* Ensures the logo is positioned to the left of the screen  */
  margin-left: calc(50% - 480px);	/* Adjust position of the logo image according to the width of the screen */
  padding: 0;
}

/* Logo image */
#block-ccnm-logo img {
  margin: 0 1rem;
  width: 116px;
  height: auto;
}

/* The name of the website and slogan - these are standard 'Branding Header' blocks that we don't use */
.site-slogan,
.site-name {
  height: 1.25rem;  				/* The only purpose this serves is to position the primary menu which comes below it */
  margin: 0;
  visibility: hidden;				/* The blocks are not shown */
}

/**
 * Primary Menu
 * This - the horizontal menu - falls within the block which has the ID #block-ccnm-pc-navigation
 * All the formatting for this block is contained within the separate "menu.css" file
 * Apart from the opening "nav" which in views.css is given a margin-top of 0.5rem
 * We should move the block settings to here so that this file has all the block dimensions
 * In other words it should include ALL of the header-specific settings EXCEPT where the details justify a separate css file
 */

/**
 * Search box
 * - Here we have the common formatting: additional formatting dependent on the screen width comes later
 * - but there are some specific settings in form.css too, which is confusing
 */
.block-search input,
.form-search  {
	line-height: 1.375rem;
}

/* Set the formatting for the 'spyglass' button */
.block-search input#edit-submit--2,				/* Sometimes drupal randomly switches to this */
.block-search input#edit-submit {
    background-color: transparent;				/* FF and Edge suggest this is redundant? */
	background: url(CCNMsearch.svg);
	background-repeat: no-repeat;
    background-size: 22px;
    border: 0;
	min-width: 22px;
}

/**
 * Status messages
 * - This code is redundant now as it only appears for logged on users - for which the standard Clara theme applies 
 * - The main concern was to position status messages so as not to obscure the logo or main menu
 */
.messages--status {
	position: relative;
	top: -36px;
	left: 20%;
}

/** Display menu on smartphone or tablet in portrait **/
/* We switch the order of the blocks around, with the main menu at the top followed by the CCNM logo, Search box and Header Banner */
@media all and (max-width: 959px) {

/**
 * Primary Menu
 * This - the 'mobile' menu - falls within the block which has the ID #block-ccnm-navigation
 * All the formatting for this block is contained within the separate "mobile-menu.css" file
 * AGAIN we should include the statement pertaining to the block dimensions and positioning
 */

/**
 * Grey Welcome Banner
 * This needs to be repositioned so that it is now below the primary (mobile) menu on first view
 * (Note that scrolling retains the menu viewport position, hence the need to set the margin-top value - not sure why not for the block itself?)
 */
#block-ccnm-welcome-banner p {
	margin-top: 2.75rem;
}

/**
 * CCNM Logo
 * This is now centred across the full screen
 */
.site-logo {
  width: 100%;
  margin-left: 0;
}

#block-ccnm-logo img {
  margin-left: calc(50% - 58px);		/* Centre the image by setting the left margin - noting that the image width is 128px */
}

/**
 * Search box
 * - Likewise, this now occupies the full width of the screen
 */
form#search-block-form  {
	margin-top: 0.5rem;
}

.search-block-form  {
  width: 100%;
  float: left;
  margin-bottom: 1rem;
}

.form-search  {
	width: 80%;							/* Width and left margin centre the search box leaving a small margin either side of it */
	margin-left: 10%
}

/* Override the default inline-block setting as this interferes with the width of the input box */
.search-block-form .form-type-search  {
  display: inline;
}

}

/** Formatting for desktop PC and large tablets in landscape **/
@media all and (min-width: 960px) {

#block-ccnm-slogan p  {
  margin: 0 0.5rem;
}

/* Size and position the Search box */
.search-block-form  {
  width: 180px;
  float: right;							/* Ensures this is to the right of the primary menu */
  margin-right: calc(50% - 480px);		/* Position it adjacent to the primary menu (rather than to the far right of the screen) */
}

form#search-block-form  {
	margin: 0;
}

.form-search  {
	width: 144px;						/* This is the width of the search box itself */
}

}