/**
 * Settings for the Footer Region
 * This contains the following blocks (in the order displayed):
 * 1. Email sign-up (ID: #block-shema-mail-signup)
 * 2. Picture slideshow (ID: #block-views-ccnm-picture-slideshow-block)
 * 3. Calendar slideshow (ID: #block-calendar-slideshow)
 * 4. Social Media (ID: #block-social-media)
 * 5. CCNM Policy Statement (#block-ccnm-policies)
 * 6. Login link (front page only) (#block-ccnm-login)
 *
 */
 
/* Default paragraph format for footer content */
.region-footer p  {
  margin: 0.5rem 0 0.5rem 0;
  padding: 0;
}
 
/* MailChimp Embedded Sign Up form */
/* - see also ui-dialog.css which has generic formatting */

/* Governs the placement of the MailChimp logo */
.region-footer #mc_embed_signup .foot {
	grid-template-columns: none;
}

/* The sign-up form is set at a fixed width of 720px , or 96% of the screen width - whichever is the lower */
/* This means a cut-off point of 750px for the screen width (96% of 750 equals 720) */
@media all and (min-width: 750px) { 

.region-footer #mc_embed_signup  {
	width: 720px;
}

/* With this width to play with, we can set the form fields as inline blocks - as there is enough space to place them side by side */
.region-footer #mc_embed_signup .mc-field-group {
	display: inline-block;
	width: 188px;
	margin-right: 2px;
	padding-bottom: 0.5rem;
	min-height: 2rem;
}

/* This is to ensure the MailChimp logo is centred */
.region-footer #mc_embed_signup .foot {
	width: 688px;
}

}

/* With screen widths less than 750px we fix the width at 96% of the screen width */
/* The form fields will revert to the default from inline-block, and so they will be stacked vertically */
@media all and (max-width: 749px) { 

.region-footer #mc_embed_signup  {
	width: 96%;
}

}

/* Picture carousel */
#block-3d-picture-carousel {
    font-size: 0;
}

#block-3d-picture-carousel .pb__pmw_300 {
    max-width: 19.25rem;
}

#block-3d-picture-carousel .pb__caro-item {
    height: 17.75rem;
}

/* Calendar slideshow */

/* Height set to 258px because initial load settings don't make space for the images displayed */
#block-calendar-slideshow .views_slideshow_cycle_teaser_section {
    height: 258px;
}

#block-calendar-slideshow .view-header {
  font-size: var(--font-size-h3);  				/* ~20px */
  margin: var(--space-xl) 0 0;					/*	2rem = 32px */		
  text-align: center;
  font-weight: bold;
}

#block-calendar-slideshow .views-row  {
  text-align: center;
}

#block-calendar-slideshow .views-field  {
  line-height: 3rem;							/* 48px - create space following image */
  font-size: var(--font-size-base);				/* 1rem = 16px */
}

/*  Social Media Block */
#block-social-media   {
  width: 100%;	
  clear: both;
  float: left;
}

#block-social-media img,
#block-social-media iframe  {
  padding: 0.5rem;  
}

/*  CCNM Policies Block */
#block-ccnm-policies  {
  float: left;
  clear: both;
  width: 100%;
  padding: 0;  
  margin-bottom: 0.5rem;
  background: #d8d8d8;
}

#block-ccnm-policies img  {
  padding: 1rem 0 0 0;
}

/* Login link */
#block-ccnm-login  {
  float: right;
  clear: both;  /* allows no floating elements left or right of this */
  margin: -1rem 2rem 0.5rem 2rem;
}

/* Login link should be invisible except when hovered over - achieved by formatting */
#block-ccnm-login p {
  margin-top: 0;
}

#block-ccnm-login a {
  text-decoration: none;
}

#block-ccnm-login a:link,  
#block-ccnm-login a:visited  {
	color: #d8d8d8;
}
/* Link text switches to red, becoming visible, when hovered over */
#block-ccnm-login a:hover  {
	color: #990000;
}

/* END OF Common / Default formatting */

/* Formatting for smaller screen widths (typically smartphones and tablets in portrait orientation) */
@media all and (max-width: 959px) { 

.region-footer {
  background-color: #d8d8d8;
}

#footer  {
  width: 100%;
  margin-top: -0.5rem;
}

.ccnm-picture-slideshow img {
  margin: auto;
}

.ccnm-picture-slideshow  {
	margin-top: 1rem;
}

}
/* End of formatting specific to smartphone (landscape or portrait) and tablet (portrait) */
/* @media all and (max-width: 959px) */

/* Make sure we tell the browser to reserve space for the pictures */
@media all and (max-width: 671px) { 

#block-calendar-slideshow  {
	height: 336px;
}

#block-calendar-slideshow .views_slideshow_slide {
    margin-left: 0.5rem;
    width: calc(100% - 1rem);
}

#block-3d-picture-carousel .pb__pmw_300 {
    max-width: calc(100% - 1rem);
}

#block-3d-picture-carousel .pb__caro-wrap__inner {
    height: 22rem;
}

#block-3d-picture-carousel .pb__caro-item {
    padding-inline: 2.4375rem;
}

}
/* End of formatting specific to small width screens */
/* @media all and (max-width: 599px) */


/* For wider phone/tablet displays we have enough room to show the picture and calendar slideshows side by side */
@media all and (min-width: 672px) and (max-width: 959px) { 

/* Calendar Slideshow */
#block-calendar-slideshow  {
	width: 50%;
	float: right;
}

.views-element-container#block-calendar-slideshow  {
	clear: none;
}

#block-calendar-slideshow .views_slideshow_slide {
    width: calc(100% - 1rem);
}

#block-views-ccnm-picture-slideshow-block  {
	width: 50%;
	float: left;
	padding: 78px 0;		/* Twitter feed is 476px height so with 320x320 images needs 78px top and bottom to centre it */
}

}

/* Formatting common for wider screens (PCS, laptops and larger tablets in landscape orientation) */
@media all and (min-width: 960px) {

/* The picture slideshow block */
#block-views-ccnm-picture-slideshow-block  {
  clear: right;
  float: right;
  background-color: #d8d8d8;			/* Override the default #c5c5c5 */
  padding: 0;					
  height: 336px;						
  width: 320px;
  margin-right: calc(50% - 360px);
}

/* Calendar slideshow */
#block-calendar-slideshow  {
  clear: left;
  float: left;
  padding: 0;							/* Padding to produce the grey border effect and vertically centre */
  height: 336px;						/* Fixed height to align with the picture slideshow to the left of it*/
  margin-left: calc(50% - 360px);
  width: 360px;
}
#block-calendar-slideshow h2 {
  margin-bottom: 1rem;
}

#block-calendar-slideshow .views-row {
    width: 360px;
}

#block-calendar-slideshow .views-field-field-ccnm-group-poster  {
    height: 204px;
}

}  
/* END OF: Formatting common to tablets in landscape and desktops */
/* @media all and (min-width: 960px) */