/**
 * Formatting of the basic content elements
 * 
 * LAYER1 of design - GENERIC FORMATTING AVAILABLE FOR ALL TYPES OF CONTENT
 * - May be overridden in lower levels of the design for specific types of content (e.g. views.css)
 * - Specialised content elements have their own css (e.g. forms.css, media.css, tables.css)
 *
 * Covers the following:
 * 1. Top-level formatting i.e. HTML and BODY
 * 2. Typography ~ paragraph and headings
 * 3. Links
 * 4. Lists
 * 5. Miscellany ~
 **/

html {
  font-family: 'Open Sans',tahoma,arial,sans-serif;
  color: var(--colour-text);
  font-size: 100%; 						/* Use a 16px base font size */
  line-height: var(--line-height);  	/* 1.375 = 22px by default */
}

body {
  padding: 0;
}

/**
 * Typography
 *
 * To achieve a pleasant vertical rhythm, we use Compass' Vertical Rhythm mixins
 * so that the line height of our base font becomes the basic unit of vertical
 * measurement. We use multiples of that unit to set the top and bottom margins
 * for our block level elements and to set the line heights of any fonts.
 * For more information, see:
 * - https://24ways.org/2006/compose-to-a-vertical-rhythm
 * - https://fonts.google.com/knowledge/using_type/choosing_a_suitable_line_height
 * - https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
 *
 * Problem in margin settings
 * - assuming h2 used as page header with h3 used for sections of text within a page
 * - problem is that we want the top margin to be different depending on whether h3 follows h2 or <p>.
 * - but CSS selectors/combinators should be able to deal with the above?
 * - h2 ~ h3 selects all h3 elements that are preceded by a <h2> element
 * - p ~ h3 selects all h3 elements that are preceded by a <p> element
 */

p,
pre {
  margin: var(--space-m) var(--space-xs);		/* 1rem 0.5rem */
}
blockquote {
  /* Indent the quote on both sides. */
  margin: var(--space-l) 1.75rem;
}

/**
 * Heading Styles
 */
h1,
h2 {
  font-size: var(--font-size-h2);  				/* ~24px */
  line-height: var(--line-height-heading); 		/* 1.25 = 30px */
  margin: var(--space-xl) 0; 
  padding: 0.5rem;								/* Ensure that the header text does not extend to the margins */
  color: var(--colour-grey-x40);
  letter-spacing: 0.25px;
}
h3 {
  font-size: var(--font-size-h3);  				/* ~20px */
  line-height: var(--line-height-heading); 		/* ~25px */
  margin: var(--space-l) var(--space-xs) var(--space-m);  
  color: var(--colour-steel-blue);				/* Steel Blue */
}
/* Format as h2 in individual news articles */
.page-node-type-article h3  {
	text-align: center;
	font-size: var(--font-size-h2);
	line-height: var(--line-height-heading);
	margin: 1.5rem 0;
    margin-top: 1.5rem;
	padding: 0.5rem;
	color: var(--colour-grey-x58);
	letter-spacing: 0.5px;
}

h4 {
  font-size: var(--font-size-h4);					/* default to 18px */
  line-height: var(--line-height-heading); 
  margin: 1.5rem 0.5rem 1rem 0.5rem;
  color: var(--colour-grey-x20);
}

/* On smaller screens we need wider margins on paragraphs and headings */
@media all and (max-width: 799px) {

h1,
h2 {
  text-align: center;
  padding: 0.5rem 1rem !important;								
}

h3 {
  text-align: center;
  margin: var(--space-l) var(--space-m) var(--space-m) !important;  
}

h4 {
  margin: 1.5rem 1rem 1rem 1rem !important;
  color: var(--colour-grey-x20);
}

.region-content p {
  margin: var(--space-m) !important;		/* 1rem */
}

}

h5 {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-heading); 
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
h6 {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-heading); 
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Should there be a separate CSS called typography.css for these styles? */
/* Background colours for general use */ 
.red   { background-color: var(--colour-red); }
.gold  { background-color: var(--colour-gold); }
.blue  { background-color: var(--colour-blue); }
.grey  { background-color: var(--colour-grey); }

.centre-text  {
	text-align: center;
}

.small {
  font-size: 0.75rem;
}

/**
 * Links
 */
a:link,
a:visited,
a:active  {
    color: #990000;					/* colour links red */
	text-decoration: none;			/* no underline */
}

a:hover,
a:focus {
	text-decoration: underline;		/* underline the link text when hovered over */
}

/* Address `outline` inconsistency between Chrome and other browsers. */
a:focus {
  outline: thin dotted;
}

/* Improve readability when focused and also mouse hovered in all browsers. */
a:active,
a:hover {
  outline: 0;
}

/**
 * Lists
 */
ul,
ol {
  margin: 0.5rem;
  padding: 0 0 0.25rem 2rem; 		/* LTR */
}
ul {
  list-style-type: square;
}
[dir="rtl"] ul,
[dir="rtl"] ol {
  padding: 0 1rem 0.25rem 0;
}
ol ol,
ul ul {
  margin: 0;
  padding: 0 0 0.25rem 1rem; 		/* LTR */
}
[dir="rtl"] ol ol,
[dir="rtl"] ul ul {
  padding: 0 1rem 0.25rem 0;
}
li  {
  margin-bottom: 0.25rem;
}

/* Similarly these classes aren't really that good a fit */
/* The following are normally used for headers that either contain an image or are followed by an image */
/* other issue is the ability to remember the class names */
.img-below  {
  margin-bottom: 0;
}

/* Used where an image acts as the header for a content item */
.img-header  {
	padding: 0;
	margin-bottom: 0;
}

.nomargin  {
	margin: 0;
}

/**
 * Styles for general use on content (general deviations from the normal cases set up in element.css)
*/
.page-title,
.node .submitted /* The "posted by" information */ {
  display: none;
}

/* Improve readability of pre-formatted text in all browsers. */
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Set consistent quote types. */
q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

/* Address inconsistent and variable font size in all browsers. */
small {
  font-size: 75%;
}

/* Prevent `sub` and `sup` affecting `line-height` in all browsers. */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5rem;
}
sub {
  bottom: -0.25rem;
}

/**
 * Indent threaded comments.
 * - originally in indented.css
 * - comments disabled but retained as a generally available style if needed
 * - switched from 25px to 24px
 */
.indented {
  margin-left: 1.5rem; /* LTR */
}
[dir="rtl"] .indented {
  margin-right: 1.5rem;
  margin-left: 0;
}

/* Only known usage is on the node/add page - not needed as shema is not used as the Admin theme. Retained just in case */
.node-type-list  {
  padding: 1rem;
  margin-top: 0;
}