/*
Theme Name: Twenty Seventeen - CAS
Description: Twenty Seventeen child theme for CAS sites
Template: twentyseventeen
Author: ncvp
Version: 1
*/

/******************************/
/* Just this theme above here */
/******************************/

/* 
Block gallery caption fix
Courtesy of Claude
Not used 'cos block galleries are rubbish
/*

/* Ensure image containers don't hide overflow */
.wp-block-gallery .blocks-gallery-item figure,
.wp-block-gallery .wp-block-image figure {
	position: relative;
}

/* Move gallery captions below images and fix text styling */
.wp-block-gallery .blocks-gallery-item figcaption,
.wp-block-gallery .wp-block-image figcaption,
.gallery-item .gallery-caption {
	position: relative !important;						/* Vital */
	text-shadow: none !important;							/* Text a bit blurred without this */
	-webkit-text-fill-color: #000 !important;		/* Vital */
	background: none !important;							/* I quite like the effect without this */
/*
	color: #000 !important;
	padding: 8px 0;
	font-size: 14px;
	text-align: center;
*/
}

/* Remove blur effect from gallery images */
.wp-block-gallery .blocks-gallery-item figure img,
.wp-block-gallery .wp-block-image figure img,
.gallery-item img {
	filter: none !important;
	-webkit-filter: none !important;
}

/* Also remove any backdrop blur on the caption area */
.wp-block-gallery .blocks-gallery-item figcaption::before,
.wp-block-gallery .wp-block-image figcaption::before {
	display: none !important;
}

/* 
Stop the lower height first load causing a flash. 
See also mobile @media setting
*/

.site-header {
	min-height: 260px;
}

/*
Reduce dead space near top of page
*/

/* Reduce dead space between menu and page/post title */
.site-content,
div.panel-content div.wrap {			/* This catches Home page */
	padding-top: 1.5em;
}

/* Reduce dead space between page title and content. Slightly different on home page */
div.panel-content div.wrap,
header.entry-header {
	margin-bottom: .3em !important;
}

/********/
/* Misc */
/********/

/* Parent div.entry-content p:has(code) over the top. Affected any paragraph which contained a code tag */
code { 
	background-color:#ccc;
	padding: 7px 10px;
	border-radius: 5px
}

/* Refer to a label in a diagram */
.labl {
	border: 5px solid #00f;
	border-radius: 20px;
	padding: 0 10px;
}

/* Rather surprisingly this works much of the time for tables in pages */
table.ncvp td {
	border: 1px solid #aaa;
	padding: 2px 5px;
}

/**********/
/* Footer */
/**********/

/* 
These styles are duplicated in all my child themes
I couldn't make putting them in ncvp-live-misc.css work
Probably because the plugin styles are loaded before the theme's
*/

/* Footer elements nicely laid out side-by-side */
.ncvp-footer-01 {
	display: flex;
	justify-content: space-between;
}

/* svg sprite social icons */

.ncvp-smenu ul {
	list-style: none; 					/* No bullets */
}
.ncvp-smenu li {
	float: left;							/* Horizontal rather than vertical list */
}
.ncvp-smenu svg {
	height: 2em;							/* Size of icon */
	width: 3em;								/* Horizontal spacing */
	fill: lightblue;
}
.ncvp-smenu svg:hover {
	fill: blue;
}

/**********/ 
/*	Mobile */
/**********/

@media (width < 780px) {

	/* Stop header area flashing. 80px or auto work */
	.site-header {
		min-height: auto;
	}

	/* Footer elements one above the other and centred. Where did this come from? */

	.ncvp-footer-01 {
		display: initial;
	}
		
	.ncvp-footer-01 div {
		display: table;
		margin: 0 auto;
		text-align: center;
	}

	/* Reduce site logo and title size */

	.custom-logo-link img {
		max-width: 40%;
	}

	.site-title {
		font-size: 1rem;
	}

	.site-description, .site-description a {
		font-size: .7rem;
		line-height: 1rem;
	}
}

/***********/
/* Desktop */
/***********/

@media (width >= 780px) {

	/* Force blog page to single column. All this seems to be necessary, even without widgets */

	.blog:not(.has-sidebar) #primary article, 
	.archive:not(.has-sidebar) #primary article, 
	.search:not(.has-sidebar) #primary article {
		width: 100%;
	}

	.blog:not(.has-sidebar) #primary .entry-header,
	.archive:not(.has-sidebar) #primary .entry-header,
	.search:not(.has-sidebar) #primary .entry-header {
		width: 100%;
		float: none;
	}
}