/*
Theme Name: Delib Zope 2020
Description: The default theme for Delib.
Author: Team Rubber
Version: 0.51
*/


/* 
css sections:
	1. GENERAL
	2. HOME PAGE
	3. HOME PAGE - PAGINATE NAVIGATION
	4. SINGLE POST
	5. SINGLE POST - POST NAVIGATION
*/



/* --------------------------------------------------------------------- */
/* @group 1. GENERAL */
	
	.clear {
		clear: both;
	}
	
	/* category colors */
		.blog .post .post-category { color: #637988; } /* default - blue-gray */
		
		.blog .post .post-category__commentary { color: #7c3075; } /* purple */
		.blog .post .post-category__digital-heroes  { color: #7c3075; } /* purple */
		.blog .post .post-category__company { color: #288188; } /* dark teal */
		.blog .post .post-category__practical-democracy-post  { color: #d5517b; } /* pink */
		.blog .post .post-category__product { color: #171e2e } /* citizen space dark blue */
		.blog .post .post-category__vacancies { color: rgb(0, 136, 79); } /* green */
		.blog .post .post-category__current-vacancies { color: rgb(0, 136, 79); } /* green */
		.blog .post .post-category__podcast { color: #7c3030; } /* red brown */
	
/* @end */

/* --------------------------------------------------------------------- */
/* @group 2. HOME PAGE */
	
	.blog.home .content {
		width: 100%;
		float: left;
		margin-top: -20px;
	}
	.blog.home .row {
	}
	.blog.home .post {
		display: block;
		padding: 4px;
		margin-bottom: 22px;
		line-height: 1.375;
		background-color: #fff;
		border: 1px solid #ddd;
		height: 400px;
		overflow: hidden;
		border-radius: 4px;
		position: relative;
	}
	
	/* post image */
		.blog.home .post .thumbnail-image span {
			display: block;
			height: 240px;
			background-size: cover;
			background-position: center;
		}
	
	/* post categories */
		.blog.home .post .post-category {
			padding-right: 20px;
			font-size: 16px;
		}
		
	/* post title */
		.blog.home .post .post-header {
			padding: 16px 16px;
			width: auto;
			max-width: 100%;
		}
		.blog.home .post .post-title {
			font-size: 18px;
			line-height: 28px;
			margin-top: 5px;
			margin-bottom: 11px;
		}
		.blog.home .post .post-title a {
			color: #000;
		}
	
	/* post date */
		.blog.home .post .post-meta {
			border-top: none;
			position: absolute;
			bottom: 0;
			right: 0;
			left: 0;
			padding: 0 0 6px 20px;
			line-height: 13px;
			background: white;
			box-shadow: 0 -3px 8px 2px rgba(255,255,255,0.95);
		}
		.blog.home .post .post-meta .post-date {
			font-size: 13px;
			line-height: 13px;
			color: #666;
		}
		.blog.home .post .post-meta .post-sticky {
			font-size: 14px;
			line-height: 14px;
			color: #4858b6;
			text-transform: uppercase;
			font-weight: 100;
		}
	
	@media (max-width: 768px) {
		.blog.home .content {
			float: none;
			margin-top: 20px;
		}
		.blog.home .post .post-inner h3 {
			font-size: 20px;
			line-height: 26px;
		}
		.blog.home .post .post-inner p {
			font-size: 15px;
		}
	}

/* @end */

/* --------------------------------------------------------------------- */
/* @group 3. HOME PAGE - PAGINATE NAVIGATION */

	.blog.home .paginate-navigation {
		margin-top: 15px;
		padding: 0 20px;
	}
	.blog.home .paginate-navigation p {
		display: inline;
		font-family: 'Lato', Helvetica, sans-serif;
		font-size: 0.9em;
		letter-spacing: 1px;
	}
	.blog.home .paginate-navigation p + p:before {
		content: "/";
		display: inline;
		margin: 0 20px;
		color: #aaa;
	}
	
	/* link color */
		.blog.home .paginate-navigation,
		.blog.home .paginate-navigation a {
			color: #666;
		}
		.blog.home .paginate-navigation a:hover {
			color: #006aff;
		}
	
	/* layout */
		.blog.home .paginate-navigation .page-number {
			float: left;
		}
		.blog.home .paginate-navigation .page-prev-next {
			float: right;
		}

/* @end */

/* --------------------------------------------------------------------- */
/* @group 4. SINGLE POST */
	
	.blog.single .post-inner {
		padding-bottom: 60px;
	}
	.blog.single a,
	.blog.single p {
		word-wrap: break-word; /* prevent   joined words or long text/urls breaking out of wrapper */
	}
	
	/* main title */
		.blog.single .post-header .post-title {
			font-weight: bold;
			letter-spacing: 1px;
			text-align: center;
			margin: 30px 0 19px 0;
			
			padding: 0 40px;
			font-size: 44px;
		}
		@media (max-width: 330px) {
			.blog.single .post-header .post-title {
				font-size: 30px;
				padding: 0 5px;
			}
		}
		@media (min-width: 331px) and (max-width: 380px) {
			.blog.single .post-header .post-title {
				font-size: 36px;
				padding: 0 20px;
			}
		}
		@media (min-width: 381px) and (max-width: 600px) {
			.blog.single .post-header .post-title {
				font-size: 40px;
				padding: 0 30px;
			}
		}
		
		/* no orphan paired grouping */
			@media (min-width: 500px) {
				.blog.single .post-header .post-title .pair-s { 
					white-space: nowrap;
				}
			}
			@media (min-width: 600px) {
				.blog.single .post-header .post-title .pair-l {
					white-space: nowrap;
				}
			}
	
	/* content headings */
		.blog.single .post-content h5 {
			font-size: 1.1em;
			font-weight: bold;
		}
		.blog.single .post-content h6 {
			font-family: 'Lato', Helvetica, sans-serif;
			font-size: 0.8rem;
			font-weight: 900;
			text-transform: uppercase;
			letter-spacing: 1px;
		}
	
	/* tables */
		.blog.single .post-content th, .post-content td {
			padding: 2%;
			margin: 0;
			overflow: visible;
			line-height: 120%;
			border-bottom: 1px solid #DDD;
		}
		.blog.single .post-content table tbody > tr:nth-child(odd) > td {
			background: #f9f9f9;
		}
	
	/* images */
		.blog.single .post-content img {
			padding: 5px;
			border: 1px solid #ddd;
			max-width: 100%;
			height: auto;
		}
		.blog.single .wp-block-image {
			margin-bottom: 1em;
			text-align: center; /* for narrow images */
		}
		img.alignleft {
			float: left;
		}
		img.alignright {
			float: right;
		}
		.aligncenter {
			display: block;
			margin-left: auto;
			margin-right: auto;
		}
		figure.wp-caption.alignleft,
		img.alignleft {
			margin: 5px 20px 5px 0;
		}
		.wp-caption.alignleft {
			margin: 5px 10px 5px 0;
		}
		figure.wp-caption.alignright,
		img.alignright {
			margin: 5px 0 5px 20px;
		}
		.wp-caption.alignright {
			margin: 5px 0 5px 10px;
		}
		img.aligncenter {
			margin: 5px auto;
		}
		img.alignnone {
			margin: 5px 0;
		}
		div.wp-caption.alignright img[class*="wp-image-"] {
			float: right;
		}
		div.wp-caption.alignright .wp-caption-text {
			padding-left: 10px;
		}
		
		/* gutenberg editor extra alignment options */
			.blog.single .post-content .alignfull {
				margin: 32px calc(50% - 50vw);
				max-width: 100vw;
				width: 100vw;
			}
			
			/* post images break out of page width */
				.blog.single .post-header,
				.blog.single .post-content > * {
					max-width: 685px;
					margin-left: auto;
					margin-right: auto;
				}
				.blog.single .post-content .alignwide {
					max-width: none; /* i.e. fills to 970px */
					margin-left: 0;
					margin-right: 0;
				}
	
	/* captions */
		.blog.single .wp-block-image figcaption {
			margin-top: 0.5em;
			font-size: 14px;
		}
		.wp-caption .wp-caption-text,
		.entry-caption,
		.gallery-caption {
			font-style: italic;
			padding-top: 10px;
			text-align: center;
			color: #666;
			letter-spacing: 0.5px;
			font-size: 0.8em;
		}
		
		/* fix for inline style width */
			.wp-caption {
				max-width: 100% !important;
			}
	
	/* post meta */
		.blog.single .post-meta {
			text-align: center;
			margin-bottom: 40px;
			color: #666;
		}
		.blog.single .post-meta p {
			display: inline-block;
			font-size: 0.75em;
			letter-spacing: 1px;
			margin-bottom: 12px;
		}
		.blog.single .post-meta p + p:before {
			content: "";
			margin: 0 13px 0 13px;
			color: #ccc;
			display: inline-block;
			width: 1px;
			background: #ddd;
			height: 18px;
			position: relative;
			top: 4px;
		}
		@media (max-width: 500px) {
			.blog.single .post-meta {
				margin-top: 30px;
			}
			.blog.single .post-meta p {
				display: block;
			}
			.blog.single .post-meta p + p:before {
				display: none;
			}
		}
	
	/* blockquote */
		.blog.single .post-content blockquote {
			padding: 28px 30px 30px 90px;
			margin-top: 2em;
			margin-bottom: 2em;
			background: #fafafa;
			border: 1px solid #eee;
			border-width: 1px 0;
			position: relative;
			font-size: 28px;
			line-height: 1.6;
			font-style: italic;
		}
		.blog.single .post-content blockquote:after {
			content: '”';
			width: 90px;
			font-family: 'Georgia', serif;
			font-size: 72px;
			line-height: 72px;
			font-weight: 700;
			font-style: normal;
			text-align: center;
			color: #ca2017;
			position: absolute;
			top: 31px;
			left: 0px;
		}
	
	/* twitter embeds */
		.twitter-tweet-rendered {
			margin-left: auto;
			margin-right: auto;
		}

/* @end */

/* --------------------------------------------------------------------- */
/* @group 5. SINGLE POST - POST NAVIGATION */
	
	.blog.single .post-navigation {
		border-top: 1px solid #ddd;
		position: relative;
	}
	.blog.single .post-navigation-inner {
		padding: 30px 0;
	}
	.blog.single .post-navigation:before {
		content: "";
		display: block;
		width: 1px;
		height: 100%;
		background: #ddd;
		position: absolute;
		left: 50%;
	}
	
	/* prev/next label */
		.blog.single .post-navigation p {
			display: inline-block;
			padding-bottom: 2px;
			border-bottom: 2px solid #ccc;
			margin-bottom: 8px;
			font-size: 0.8em;
			letter-spacing: 1px;
		}
		
	/* prev/next article title link */
		.blog.single .post-navigation h4 {
			font-size: 1em;
			line-height: 130%;
			font-weight: bold;
			margin-top: 11px;
		}
		.blog.single .post-navigation h4 a {
			color: #111;
		}
		.blog.single .post-navigation h4 a:hover {
			color: #006aff;
		}
	
	/* prev/next layout */
		.blog.single .post-nav-prev,
		.blog.single .post-nav-next {
			float: left;
			width: 47.5%;
		}
		.blog.single .post-nav-next {
			float: right;
		}
		.blog.single .post-nav-next,
		.blog.single .post-nav-next h4 {
			text-align: right;
		}

/* @end */