/*
Theme Name: UKSPF Insight
Author: George English
Author URI: http://englishwebdesign.com
Description: Bespoke theme
Version: 9999.9.9
*/

* {
	box-sizing: border-box;
}

:root {
	--grid-gap: 30px;

	--grey: hsl(218deg, 5%, 57%);
	--border-grey: hsl(218deg, 9%, 92%); /* #eee */
	--bg-grey: hsl(218deg, 9%, 96%); /* #f9f9f9; */
}

.sr-only,
.screen-reader-text,
.screen-reader-response {
	position: absolute !important;
	width: 1px !important;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}

body {
	font-family: 'EB Garamond', serif;
	margin: 0;
	line-height: 1.4;
	font-size: 16px;
	color: hsl(218deg, 50%, 22%);
}

@media (min-width: 568px) {
	
	:root {
		--grid-gap: 36px;
	}

}

@media (min-width: 1400px) {

	:root {
		--grid-gap: 40px;
	}

}

@media (min-width: 1600px) {

	body {
		font-size: 18px;
	}
}

h1, h2, h3, h4, h5, h6, p, ul, ol {
	margin: 0 0 15px;
}	

ul {
	list-style: none;
	padding: 0;
}

hr {
	border: none;
	border-top: 1px solid var(--border-grey);
	margin: var(--grid-gap) 0;
}

blockquote {
	margin: var(--grid-gap) 0;
	font-size: 1.2em;
	line-height: 1.2;
	border-left: 3px solid;
	margin-left: calc((var(--grid-gap) * -1) - 3px);
	padding-left: var(--grid-gap);
}

.item.item-list {
	padding-bottom: 20px;
}

.item-list hr {
	margin: calc(var(--grid-gap) / 2) 0;
	margin-right: calc(var(--grid-gap) * -1);
}

.item-list h3 {
	position: relative;
	padding-left: 30px;
}

.item-list .number {
	position: absolute;
	left: 0;
	font-size: 1.25em;
}

p.margin-top {
	margin-top: 16px;
}

p {
	max-width: 44em;
}

img {
	display: block;
	width: 100%;
	height: auto;
	vertical-align: top;
}

h1 b {
	font-weight: 700;
}

h1, h2, h3, h4, 
.wp-block-rss__item-title {
	font-weight: 500;
}

h1,
h2,
h3,
.wp-block-rss__item-title {
	line-height: 1.2;
}

h1, h2 {
	font-size: 1.5em;
	/*margin-bottom: calc(var(--grid-gap) - 0.5em);*/
}

a h2,
h3,
.wp-block-rss__item-title {
	font-size: 1.2em;
	margin-bottom: 12px;
}

.col-span-2 h2 {
	font-size: 1.5em;
}

@media (min-width: 568px) {

	.headline,
	.col-span-2 .headline {
		font-size: 2em;
		line-height: 1.1;
	}

}

/*.headline span {
	background: linear-gradient(transparent 60%, var(--bg-grey) 60%);
}*/

.left-heading {
	margin-top: -0.25em;
}

small {
	font-size: calc(1em - 2px);
}

/* */

input {
	font-family: inherit;
	font-size: inherit;

	margin: 0;
	width: 100%;

	line-height: 24px;
	padding: 10px 16px;
	border: none;
	border-radius: 6px;

	transition: 0.2s;

	box-shadow: 
		0 0 0 1px rgba(0,0,0,0.1),
		0 15px 20px rgba(0,0,0,0.05);
}

input:focus {
	outline: none;
	box-shadow: 
		0 0 0 1px #007bff,
		0 30px 40px rgba(0,0,0,0.05),
		0 0 0 5px rgba(0,123,255,0.2),
		0 15px 20px rgba(0,123,255,0.1);
}

input[type="submit"] {
	cursor: pointer;
}

.search-form {
	position: relative;
}

.search-field {
	padding-right: 44px;
}

.search-submit {
	font-size: 0;
	width: 44px;

	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	box-shadow: none;
	background-color: transparent;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="hsl(218deg, 50%, 15%)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>');
	background-repeat: no-repeat;
	background-position: center;

	border: none;
	cursor: pointer;
}

@media (min-width: 1400px) {
	input {
		padding: 11px 17px;
	}

	.search-submit {
		width: 46px;
	}	
}

/* */

.logo small {
	font-size: 0.666em;
}

.logo {
	font-size: 2.5em;
	line-height: 1;
}

*:last-child {
	margin-bottom: 0;
}

.container {
	max-width: 1360px;
	margin: 0 auto;

	border-left: 1px solid var(--border-grey);
	border-right: 1px solid var(--border-grey);
	padding: 0 var(--grid-gap);

	overflow: hidden;
}

.site-header nav {
	height: 100%;
	display: flex;
	align-items: flex-end;
	padding-bottom: 0.4em;
}

.site-header nav ul {
	display: flex;
	font-size: 20px;
}

.site-header nav li + li {
	margin-left: var(--grid-gap);
}

/* */

.btn-burger {
    transition: 0s;

    /*transition-delay: 0.3s;

    opacity: 1 !important;*/

    position: absolute;
	z-index: 30;
	background: var(--bg-grey);
	border: none;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	padding: 0;

	right: 20px;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.burger-bar {
    display: block;
    width: 22px;
    border-top: 2px solid;
    transition: transform 0.3s;
}

.btn-burger .state-inactive .burger-bar + .burger-bar {
    margin-top: 4px;
}

.btn-burger .state-inactive {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.btn-burger .state-inactive,
.btn-burger .state-active {
    width: 22px;
    height: 22px;
    position: relative;
    overflow: hidden;
}

.btn-burger .state-active {
    position: absolute;
}

.btn-burger .state-inactive .burger-bar:nth-child(1) {
    transition-delay: 0.3s;
}

.btn-burger .state-inactive .burger-bar:nth-child(2) {
    transition-delay: 0.35s;
}

.btn-burger .state-inactive .burger-bar:nth-child(3) {
    transition-delay: 0.4s;
    /*width: 16px;*/
}

.btn-burger .state-active .burger-bar {
    position: absolute;
    top: calc(50% - 1px);
    left: calc(50% - 11px);
}

.btn-burger .state-active .burger-bar:nth-child(1) {
    transform: rotate(-45deg) translateX(-27px);

    transition-delay: 0.1s;
}

.btn-burger .state-active .burger-bar:nth-child(2) {
    transform: rotate(45deg) translateX(27px);
}

/* */

body.main-nav-active .btn-burger {
    transition-delay: 0s;
}

body.main-nav-active .btn-burger .state-inactive .burger-bar {
    transform: translateX(22px);
}

body.main-nav-active .btn-burger .state-inactive .burger-bar:nth-child(1) {
    transition-delay: 0s;
}

body.main-nav-active .btn-burger .state-inactive .burger-bar:nth-child(2) {
    transition-delay: 0.05s;
}

body.main-nav-active .btn-burger .state-inactive .burger-bar:nth-child(3) {
    transition-delay: 0.1s;
}

/* */

@keyframes cross_1 {
    0% {
        transform: rotate(-45deg) translateX(27px);
    }
    100% {
        transform: rotate(-45deg);
    }
}

@keyframes cross_2 {
    0% {
        transform: rotate(45deg) translateX(-27px);
    }
    100% {
        transform: rotate(45deg);
    }
}

body.main-nav-active .btn-burger .state-active .burger-bar:nth-child(1) {
    transform: rotate(-45deg);
    transition: 0s;
    transition-delay: 0s;

    animation-name: cross_1;
    animation-duration: 0.3s;
    animation-fill-mode: backwards;
    animation-delay: 0.5s;
}

body.main-nav-active .btn-burger .state-active .burger-bar:nth-child(2) {
    transform: rotate(45deg);
    transition: 0s;
    transition-delay: 0s;

    animation-name: cross_2;
    animation-duration: 0.3s;
    animation-fill-mode: backwards;
    animation-delay: 0.4s;
}

/* */

.section-sep {
	margin-left: calc(var(--grid-gap) * -1);
	margin-right: calc(var(--grid-gap) * -1);
}

.main-grid,
.is-grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-flow: dense;
	grid-gap: var(--grid-gap);
}

.main-grid {
	/*border-top: 1px solid rgba(128, 128, 128, 0.25);*/
	/*border-left: 1px solid;*/
	/*margin-top: 40px;*/
	padding-top: var(--grid-gap);
}

.main-grid:first-child {
	border-top: none;
}

@media (max-width: 567px) {

	.site-header nav {
		display: none;
	}

}

@media (min-width: 568px) {

	.btn-burger {
		display: none;
	}

	.container {
		width: 90%;
	}

	.main-grid {
		grid-template-columns: 1fr 1fr;
	}

	.main-grid .main-grid {
		grid-template-columns: 1fr;
	}

	.col-span-2 {
		grid-column-start: span 2;
	}

	.row-span-2 {
		grid-row-start: span 2;
	}

}

@media (min-width: 768px) {
	.main-grid {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.col-span-3 {
		grid-column-start: span 2;
	}

	.main-grid .col-span-3 .main-grid,
	.is-grid {
		grid-template-columns: 1fr 1fr;
	}

}

@media (min-width: 1024px) {
	.main-grid {
		grid-template-columns: 0.8fr 1fr 1fr 1fr;
	}

	.col-span-3 {
		grid-column-start: span 3;
	}

	.main-grid .col-span-3 .main-grid,
	.is-grid {
		grid-template-columns: 1fr 1fr 1fr;
	}

}

.main-grid .item,
.wp-block-rss__item {
	/*border-right: 1px solid;*/
	border-bottom: 1px solid rgba(128, 128, 128, 0.25);
	padding-bottom: var(--grid-gap);
}

.main-grid .item a {
	color: inherit;
	text-decoration: none;
}



.image {
	background-color: var(--bg-grey);
	background-size: cover;
	background-position: center;
}

.image:before {
	content: "";
	display: block;
	padding-top: 66.666%;
}

.item .image,
img.post-image {
	display: block;
	width: 100%;
	margin-bottom: var(--grid-gap);
}

.col-span-2 .image:before {
	padding-top: 50%;
}

.main-grid a,
.logo a {
	color: inherit;
	text-decoration: none;
}

a h2,
.item-list a h3 {
	color: hsl(218deg, 66%, 33%);
}

a:hover h2,
.item-list a:hover h3 {
	text-decoration: underline;
	text-decoration-color: hsla(218deg, 66%, 33%, 0.1);
	text-decoration-thickness: 0.2em;
}

a:visited u,
.main-grid a:visited h2,
.main-grid .wp-block-rss__item-title:visited {
	color: purple;
}

.post-category,
.wp-block-rss__item-title a:before {
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 12px;
	color: var(--grey);
}

.wp-block-rss__item-title a:before {
	content: "";
	width: 16px;
	height: 16px;
	display: block;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="hsl(218deg, 5%, 57%)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>');
}

.spacer {
	height: calc(var(--grid-gap) * 5);
}

.lozenge {
	background: var(--bg-grey);
	display: inline-block;
	padding: 0.1em 0.6em;
	border-radius: 2em;
	margin-bottom: 0.25em;
	font-size: 15px;
}

@media (min-width: 1400px) {

	.post-category,
	.wp-block-rss__item-title a:before {
		font-size: 13px;
	}

}

@media (min-width: 1600px) {

	.lozenge {
		font-size: 16px;
	}
}

.site-footer {
	padding-top: var(--grid-gap);
	padding-bottom: var(--grid-gap);
}

.site-footer a {
	color: inherit;
}

.paragraph-1 *,
.paragraph-2 *,
.paragraph-3 *,
.paragraph-4 * {
	display: none;
}

.paragraph-1 p:nth-of-type(1) {
	display: block;
}

.paragraph-2 p:nth-of-type(2) {
	display: block;
}

.paragraph-3 p:nth-of-type(3) {
	display: block;
}

.paragraph-4 p:nth-of-type(4) {
	display: block;
}

.paragraph-4 p:nth-of-type(4):after {
	content: "..";
}

/* */

.tabs {
	white-space: nowrap;
	overflow-y: auto;

	box-shadow: inset 0 -1px 0 var(--border-grey);
}

.tabs .tab {
	display: inline-block; 
	margin-right: var(--grid-gap); 
	padding-bottom: var(--grid-gap); 
	border-bottom: 1px solid transparent;
	color: var(--grey);
}

.tab:hover,
.tab.active {
	border-bottom: 1px solid;
	color: inherit;
}

.hidden {
	display: none !important;
}

/* */

.page-pullout {
	border-top: 1px solid var(--border-grey);
	border-bottom: 1px solid var(--border-grey);
	background: var(--bg-grey);
	padding: calc(var(--grid-gap) * 1.5);
	margin-left: calc(var(--grid-gap) * -1);
	margin-right: calc(var(--grid-gap) * -1);

	text-align: center;
}

.page-pullout input {
	max-width: 360px;
}

.page-pullout p {
	margin-left: auto;
	margin-right: auto;
}

/* */

.block-newsletter {
	padding-right: var(--grid-gap);
	padding-bottom: var(--grid-gap);
	margin-right: calc(var(--grid-gap) * -1);
	border-bottom: 3px solid;
}

@media (max-width: 567px) {

	.block-newsletter {
		margin-left: calc(var(--grid-gap) * -1);
		margin-bottom: var(--grid-gap);
	}

}

.block-newsletter .search-submit {
	background-image: none;
}