/*
 Theme Name:   Blok Projects theme
 Theme URI:    https://paramountdigital.co.uk/
 Description:  Blok Projects theme - Blok Projects WordPress Theme built upon GeneratePress.
 Author:       Paramount Digital
 Author URI:   http://paramountdigital.co.uk
 Template:     generatepress
 Version:      0.0.2
*/

@font-face {
	font-family: "roc-grotesk";
	font-display: swap;
}
@font-face {
	font-family: "roc-grotesk-wide";
	font-display: swap;
}

/* root variables */
:root {
	--blue: #2A7DD6;
	--navy-blue: #00253F;
	--text-colour: #00253F;
	--black: #212121;
	--white: #FFFFFF;
	--grey: #ECEAE4;
	--dark-bg: #272525;
}

html {
  	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: border-box;
	min-height: 0;
	min-width: 0;
}

/* default section styles */
.site-main > * {
	margin-bottom: 0;
}
section {
	padding: 50px 0;
	contain: layout style paint;
}
section[class*="previous-"] {
	position: relative;
    overflow: hidden;
}
.c-projects-archive__grid,
.c-posts-archive__grid {
	contain: layout style;
}
section[class*="previous-"] .container {
	z-index: 1;
	position: relative;
}
@media (max-width: 575px) {
	section {
		padding: 30px 0;
	}
}

/* background colours */

/* search results page */

/* swiper pagination */

/* container settings */
#page,
#page .site-content {
	width: 100%; 
	max-width: 100%;
	padding: 0;
}
#page .site-content .site-main {
    margin: 0;
}
.site-content .content-area {
	width: 100%; 
}
.container, .grid-container {
	--bs-gutter-x: 15px;
	width: 100%;
	padding-right: var(--bs-gutter-x, 15px);
	padding-left: var(--bs-gutter-x, 15px);
	margin-right: auto;
	margin-left: auto;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}
.background-dark {
	background: var(--dark-bg, #272525);
	color: #fff;
}
section.background-dark:has(+ .background-dark) {
	margin-bottom: 0;
	padding-bottom: 0;
}
@media (min-width: 992px) {
	.container, .grid-container {
		max-width: 1580px;
	}
}
@media (max-width: 991px) {
	.container, .grid-container {
		--bs-gutter-x: 20px;
		padding-right: var(--bs-gutter-x, 20px);
		padding-left: var(--bs-gutter-x, 20px);
	}
}

/*
 * CLS prevention: override GeneratePress default nav sizing (line-height:60px)
 * immediately so the nav doesn't render tall then collapse when navigation.css loads.
 */
.main-navigation .inside-navigation .main-nav ul li a {
	line-height: 21px;
	padding: 8px 18px;
	font-size: 16px;
}
.main-navigation {
	margin: 16px 0 20px 0;
}

.c-social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.c-social-links li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	transition: background 0.2s ease;
}
.c-social-links li a:hover {
	background: rgba(255, 255, 255, 0.2);
}
.c-social-links__heading {
	margin-bottom: 12px;
}

/* call out cog */
.site-cog {
	position: fixed;
	bottom: 30px;
	right: 30px;
	z-index: 999;
	width: 108px;
	height: 108px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.site-cog:hover,
.site-cog.is-active {
	transform: scale(1.05);
}
.site-cog__shape {
	position: absolute;
	width: 108px;
	height: 108px;
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.site-cog:hover .site-cog__shape,
.site-cog.is-active .site-cog__shape {
	transform: rotate(25deg);
}
.site-cog .site-cog__shape path:first-child {
	transition: ease fill .2s;
}
.site-cog:hover .site-cog__shape path:first-child, .site-cog.is-active .site-cog__shape path:first-child {
	fill: var(--dark-bg);
}
.site-cog__text {
	width: 75px;
	height: 75px;
	animation: cogSpin 12s linear infinite;
	transition: animation-duration 0.3s ease;
}
.site-cog:hover .site-cog__text,
.site-cog.is-active .site-cog__text {
	animation-duration: 6s;

}
.site-cog__text text {
	fill: #000000;
	font-size: 20px;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	transition: ease fill .2s;
}
.site-cog:hover .site-cog__text text,
.site-cog.is-active .site-cog__text text {
	fill: #fff;
}
.site-cog__speech_bubble {
	transform: scale(1) rotate(0deg);
	transform-origin: center;
	transition: ease all .3s;
}
.site-cog:hover .site-cog__speech_bubble, .site-cog.is-active .site-cog__speech_bubble {
	transform: scale(1.5) rotate(-40deg);
}
@keyframes cogSpin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
@media (max-width: 575px) {
	.site-cog {
		width: 82px;
		height: 82px;
		bottom: 10px;
		right: 10px;
	}
	.site-cog__shape {
		width: 82px;
		height: 82px;
	}
	.site-cog__text {
		width: 65px;
		height: 65px;
	}
	.site-cog__text text {
		font-size: 20px;
	}
}