/**
 * Visual styles for sermons and sermon series
 *
 * This CSS file covers formatting for:
 * - individual nodes where specific overrides of the base elements in elements.css are required
 * - fields within the sermon and sermon series views
 * - sermon video views
 *
 * Note:
 * - generic formatting of views is done in views.css
 *
*/ 

/* Normally we don't use the Page Title (h1) format - we use h2 headers instead */
/* The Sermons and Sermon Series nodes are an exception - format it like h2 for consistency */
.page-node-type-ccnm-sermon-series  h1.page-title,
.page-node-type-ccnm-sermon  h1.page-title {
  display: block;								/* To override the default 'display: none' directive for h1 elements */
  text-transform: capitalize;					/* Capitalise each word in the title */
}

.page-node-type-ccnm-sermon .field__item audio  {
	width: 100%;
	margin: 0;
}

/* Para format needs zero LR margins - because of the 0.5rem padding on the node__content container */
/* The need for this could be removed by removing that padding - but we would then need to add margins to other the node fields */
/* Being: field--name-field-service-logo, -sermon-audio-file, -bible-reading and -date-of-sermon */
.page-node-type-ccnm-sermon-series  .node__content p,
.page-node-type-ccnm-sermon .node__content p {
  margin: 1rem 0;
}

.page-node-type-ccnm-sermon .node__content .field--name-field-bible-reading,
.page-node-type-ccnm-sermon .node__content .field--name-field-date-of-sermon {
  margin: 1rem 0;
  font-style: italic;
}

/**
 * Sermon views 
 *
*/

/* In the sermon downloads view tables, the table caption is actually used as the header for grouping by the service logo */
.view-ccnm-sermons .view-grouping-header,
.view-ccnm-sermons caption  {
	font-weight: bold;
    text-align: center;
    padding: 0.75rem 0 0.5rem 0;
}

/* The following fields are displayed in tabular format in the Sermon Archive views */
.view-ccnm-sermons .views-field  {
	padding: 0.25rem;
}

/* Where the service logo is displayed, make sure it is no larger than needed */
.view-ccnm-sermons .views-field-field-service-logo {
	width: 128px;
}

/* We define % widths for the first 3 cells - date, title and speaker - leaving 36% for the audio controls */
.view-ccnm-sermons .views-field-field-date-of-sermon  {
	width: 12%;						/* Note: a minimum of ~90px is required to ensure it fits on 1 line */
}

.view-ccnm-sermons .views-field-title  {
	width: 36%;
}

.view-ccnm-sermons .views-field-field-sermon-speaker  {
	width: 16%;
}

.views-field-field-sermon-audio-file  {
	text-align: right;
}

/* Formatting the Sermon Search form */
.sermon-search .form--inline .form-actions  {
	float: none;
	clear: none;
}

.sermon-search .form--inline .form-item {
  margin-right: 0.25em; 
}

.sermon-search #edit-combine  {
	line-height: 1.5;
}

.sermon-search select  {
	height: 2rem;
}

.sermon-search #edit-submit-ccnm-sermons  {
	margin-top: 2.75rem;
	line-height: 1.75;
}

.speaker-search #edit-submit-ccnm-sermons  {
	line-height: 1.875;
}

.speaker-search .view-grouping-header  {
	font-weight: bold;
    text-align: center;
    padding: 0.75rem 0 0.5rem 0;
}

/* The 'Why I Am A Christian' view has more space available, so allow more for the speaker */
.path-whyiamachristian .views-field-field-sermon-speaker  {
	width: 40%;
}

/* Formatting the pager for the sermon views - allow space between it and the view table above it */
.view-ccnm-sermons nav  {
	margin-top: 0.5rem;
}

/* Formatting the Navigation table shown at the bottom of sermons views - linking to previous years */
.view-ccnm-sermons .navigation td {
  border: 1px solid #cccccc;
  text-align: center;
}

/**
 * Sermon series views
 *
*/

/* Sermon series date range displayed in italics - for both for the individual nodes and the various views */
.views-field-field-series-date-range  {
  font-style: italic;
}

/* Preaching Programme FIND OUT MORE link for promoted (current) Sermon Series */
/* Arguably this could go in front-page.css */
.field--name-field-sermon-series-link  {
	text-align: right;
	margin: 1rem 0.5rem 1.5rem 0;
}

/* Sermon series views */
#block-view-header-930-preaching-programme,
#block-view-header-11am-preaching-programme  {
	margin-top: 0.5rem;
}
.page-node-type-ccnm-sermon-series .views-element-container,
.path-preaching .views-element-container  {
	padding-bottom: 0.5rem;
}

/* Sermon series header on the Preaching Programme page - note that more than 1 series can be marked as current */
.view-preaching-programme .view-grouping-header  {
  font-size: 1.25rem;  /* defaulting to 20px */
  line-height: 1.5rem; 
  margin: 0; 
  padding: 0.5rem;
  font-weight: bold;
  color: #4682B4;	/* Steel Blue - as per default h3 */
  letter-spacing: 0.5px;
}

.view-preaching-programme .view-grouping-content .view-grouping-header {
  font-size: 1rem;  
  line-height: 1.125rem; 
  margin: 1.5rem 0; 
  padding: 0;
  color: black;
  text-transform: none;
  letter-spacing: 0px;
}

.path-preaching caption p {
	margin: 0.75rem 0.5rem;
}

.view-preaching-programme th {
	text-align: left;
}

.view-preaching-programme .views-field {
	padding: 0.5rem;			/* To aid readability by spacing the entries out - is this now needed with default padding? */
}

.view-preaching-programme .views-field-field-date-of-sermon {
	width: 100px;
}

.view-preaching-programme .views-field-field-sermon-speaker  {
	width: 128px;
}

/* Past preaching view - presented as teaser content so use border as a separator */
.view-past-preaching .views-row  {
	border-top: 2px solid #585858;
	padding-top: 0.5rem;
}

.view-past-preaching .views-field-title  {
	font-size: 1.5rem;
}

/**
 * Sermon video views 
 *
*/
.view-sermon-videos h3 {
	margin-bottom: 0;
}
.view-sermon-videos .views-field-rendered-entity {
	margin-top: 0.5rem;
}

.view-sermon-videos .views-field-field-video-tag  {
	margin-left: 0.5rem;
}

/* Formatting for small mobile screens, where the RL paragraph margins are smaller (1rem not 1.5rem) */
@media all and (max-width: 599px) {
	
.view-ccnm-sermons .views-field-field-date-of-sermon  {
	width: 60px;					/* Sufficient for 2 line display with the year as the 2nd line */
}
	
/* Don't display the service logo in the output from a sermon speaker search as space is limited */
.speaker-search .views-field-field-service-logo  {
	display: none;
}
	
.view-sermon-videos .views-field-field-video-tag  {
	margin-left: 1rem;
}
	
}

/* Formatting specific for small screens (smartphone mobile and tablet (portrait) */
@media all and (min-width: 600px) and (max-width: 959px)  {

/* Below 750px width the date will be forced on to 2 lines */
/* Worth looking at different scenarios - if date is 2 line then title should be too */ 
/* So what is a sensible minimum width for the title? */
/* Doesn't want to be smaller than 144px which is 36% of a 400px screen width - squeezes on to 3 lines */
/* Speaker similarly needs to be a minimum of 60px, which is 15% of a 400px screen width */
/* This leaves around 104px for the audio controls: */
/* - but a big problem is the automatic margins of 0.5rem that apply in addition to the padding */
/* - these are set in media.css ~ so where should we counteract this instruction? */

.speaker-search .views-field-field-service-logo  {
	width: 20%;
}

.speaker-search .views-field-title,
.speaker-search .views-field-field-sermon-audio-file  {
	width: 32%;
}

}

/* Formatting specific for desktops and large tablet */
@media all and (min-width: 960px) {

.path-whyiamachristian .views-field  {
	padding: 0.25rem 1.5rem;
}

}