/*
Theme Name: GravityWP
Theme URI: 
Description: 
Author: olivier@aiwos.com
Version: 1.0
Tags: 
*/

/* @import "/wp-includes/css/dist/block-library/style.min.css";*/

html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 
a, em, hr, img, figure, small, b, u, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, tr, th, td {
	background:transparent;
	border:0;
	margin:0;
	padding:0;
	vertical-align:baseline;
}

* {
	box-sizing: border-box;
	scroll-behavior:smooth;
}

body {
	font:1rem/1.5 'Roboto',sans-serif;
	--color-black:#212529;
	--color-white:#fff;
	--color-grey:#6c757d;
	--color-light-blue:#ddecf5;
	--color-lightest-blue:#f7f8fa;
	--color-medium-blue:#5299bc;
	--color-dark-blue:#327397;
	--color-orange:#f98c19;
	--color-heading:#416576;
	color:var(--color-black);
	overflow-x:hidden;
	max-width:2560px;
}

:focus {
	outline: 2px dotted #333;
	outline-offset:5px;
}

h1, h2, h3, h4, h5 {
	font-weight:400;
}

h2 {
	font-size:1.5rem;
	font-weight:500;
	margin-bottom:.5rem;

	&.thin {
		font-weight:200;
		font-size:2rem;
		margin-bottom:1rem;

		&+ p {
			margin-top:-1em;
		}
	}
}

h3 {
	font-size:1.5rem;
}

h4 {
	font-size:1.5rem;
}

main,
header,
footer {
	max-width:1300px;
    margin:0 auto;
}

main {
	padding:0 1em;
}

a {
	text-decoration:none;
	cursor:pointer;
	color:var(--color-dark-blue);
}

	a img {
		border: none;
	}

img,
figure {
	max-width:100%;
	display:block;
	height:auto;
}

p {
	margin-bottom:1em;

	&> a {
		color:inherit;
		text-decoration:underline;
	}
}

.has-medium-font-size {
	font-size:1.25rem;
}

.has-large-font-size {
	font-size:2.25rem;
}

.has-text-align-center,
.text-center {
	text-align:center;
}

.button,
.btn,
.wp-block-button > a {
	font-family:'Roboto',sans-serif;
	border-radius:5px;
	line-height:2;
	padding:0 .5rem;
	white-space:nowrap;
	border:none;
	cursor:pointer;

	&.gform_next_button,
	&.small,
	&.btn-secondary {
		color:#191919;
		padding:0.175rem 0.75rem;
		background:var(--color-light-blue);
		border-radius:3px;
	}

	&.btn-orange {
		background:var(--color-heading);
		color:var(--color-white);
		text-decoration:none;
		margin-top:.5em;
		display: inline-flex;
		justify-content: center;
		gap: .25em;
	}
}

.wp-block-buttons {
	margin-bottom:2em;
}

.wp-block-button > a {
	display:inline-flex;
}

.badge {
	border-radius:3px;
	font-weight:500;
	background:var(--color-dark-blue);
	color:var(--color-white);
	padding:.25em .5em;
	font-size:15px;

	&.light {
		background:var(--color-lightest-blue);
		color:var(--color-dark-blue);
	}
}

header {
	padding:1em;
	position:relative;

	&:before {
		content:"";
		background:inherit;
		position:absolute;
		height:70px;
		width:200vw;
		z-index:-1;
		top:0;
		left:-100%;
	}

	&.front {
		background:var(--color-light-blue);
	}

	#logo {
		display:block;
		height:30px;
		width:164px;
		background:url(images/logo.svg) no-repeat center;
		background-size:contain;
		color:transparent;
	}

	#mobile-menu {
		display:none;
		color:var(--color-white);
		padding:.25em .5em;
		background:var(--color-medium-blue);

	}

	section {
		display:flex;
		align-items:center;
		gap:1em;

		.menu {
			display:flex;
			align-items:center;
			font-weight:500;
			gap:1rem;
			list-style:none;
			white-space:nowrap;
			
			li {
				a {
					display:flex;
					color:rgba(25,25,25,.65);

					&:hover {
						color:rgba(25,25,25,.8);
					}

				}

				&:last-child a span {
					background:var(--color-dark-blue);
					color:var(--color-white);
					padding:0 1rem;
				}
			}
		}
	}

	#search {
		flex-grow:1;

		div {
			display:flex;
			gap:10px;
			align-items:center;

			input#s {
				font:1rem 'Roboto',sans-serif;
				background:var(--color-lightest-blue);
				border:1px solid #dee2e6;
				display:block;
				line-height:1.5;
				padding: .375rem .75rem;
				flex-grow:1;
				order:2;

				&:focus {
					box-shadow: 0 0 0 .25rem rgba(102,171,204,.25);
					outline:none;
				}
			}

			input#searchsubmit {
				background:url(images/icon-search.svg) no-repeat;
				background-size:cover;
				width:1rem;
				height:1rem;
				appearance:none;
				border:none;
				color:transparent;
				order:1;
				cursor:pointer;
			}

		}
	}
}

.icon,
.fa {
	display:inline-flex;
	gap:2px;
	align-items:center;
	vertical-align:middle;

	&:before {
		content:"";
		width:18px;
		height:18px;
		background-repeat:no-repeat;
		background-size:contain;
		background-position:center;
		opacity:.6;
	}

	&.cap:before { background-image:url(images/icon-cap.svg); }
	&.bookmark:before { background-image:url(images/icon-bookmark.svg); }
	&.plus:before { background-image:url(images/icon-plus.svg); }
	&.question:before { background-image:url(images/icon-question.svg); }
	&.blog:before { background-image:url(images/icon-blog.svg); }
	&.alert:before { background-image:url(images/icon-exclamation.svg); }
	&.caret:before { background-image:url(images/icon-caret.svg); }
	&.folder:before { background-image:url(images/icon-folder.svg); }
	&.cart-light:before,
   	&.fa-shopping-cart:before { background-image:url(images/icon-cart.svg); filter:invert(1); opacity:1; }
	&.cart:before { background-image:url(images/icon-cart.svg); opacity:.9; }
	&.book:before { background-image:url(images/icon-book.svg); }
	&.arrow:before { background-image:url(images/icon-arrow-circle.svg); opacity:.9; }
	&.file:before,
   	&.fa-file:before	{ background-image:url(images/icon-file.svg); opacity:.9; height:15px; }
	&.download:before { background-image:url(images/icon-download.svg); opacity:.9; }
	&.tag:before,
	&.fa-tag:before { background-image:url(images/icon-tag.svg); opacity:.9; }
	&.info:before,
	&.fa-info-circle:before { background-image:url(images/icon-info.svg); opacity:.9; }
	&.history:before { background-image:url(images/icon-history.svg); opacity:.9; }
	&.dev:before { background-image:url(images/icon-develop.svg); opacity:.75; }
	&.github:before { background-image:url(images/icon-github.svg); }
	&.wordpress:before { background-image:url(images/icon-wordpress.svg); }
	&.twitter:before { background-image:url(images/icon-twitter.svg); }
	&.linkedin:before { background-image:url(images/icon-linkedin.svg); }
}

.wp-block-columns,
.is-layout-flex {
	display:flex;
	align-items:center;
	gap:1em;
}

.home-intro {
	background:var(--color-light-blue);
	margin-bottom:30px;
	position:relative;
	padding:1em;
	border-radius:0 0 5px 5px;

	&:before {
		content:"";
		background:inherit;
		position:absolute;
		height:100%;
		width:200vw;
		z-index:-1;
		top:0;
		left:-100%;
	}

	&> div {
		max-width:820px;
		display:flex;
		padding:60px 0 50px;
		margin:0 auto;
	}

	.wp-block-button > a {
		font-size: 1.125em;
		line-height:1.6875;
		padding: 0.375rem 2.75rem;
		color:var(--color-dark-blue);
		transition:all .3s;

		&:hover {
			transform:scale(1.025);
			box-shadow:0 4px 10px 0px rgba(18,25,97,.1);
		}
	}

	.fa:before {
		opacity:1;
		transform:scale(1.33);
	}

	.gwp-link-arrow {
		margin-right:10px !important;
	}

	.gwp-home-intro {
		font-size:2.5rem;
		font-weight: 100;
		line-height: 1.2;
		margin-bottom:1em;

		a {
			font-weight:400;
			color:var(--color-dark-blue);
			text-decoration:none;
		}
	}

	.icon {
		margin-right:5px;
		
		&:before {
			opacity:.9;
			transform:scale(1.3);
		}
	}

	&:after {
		content: "";
		width: 0;
		height: 0;
		border-left: 20px solid transparent;
		border-right: 20px solid transparent;
		border-top: 20px solid #ddecf5;
		display: block;
		margin-left: 62px;
		position:absolute;
		top:100%;
  	}

}

.has-white-background-color {
	background:var(--color-white);
}

.has-orange-background-color {
	background:var(--color-heading);
	color:var(--color-white);
}

.gwp-link-arrow {
	display:flex;
	align-items:center;
	gap:.5rem;
	
	&:after {
		content:"";
		display:block;
		width: 0; 
		height: 0; 
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		border-left: 5px solid #999;
	}
}

.tutorials {
	margin-bottom:40px;
	padding:1em;

	&>a {
		margin:1em 0;
		color:var(--color-dark-blue);
		float:right;
	}

	grid a {
		border:1px solid #ddd;
		transition:box-shadow .5s;

		&:hover {
			border-color:#ccc;
			box-shadow:0 8px 20px 0px rgba(18,25,97,.2);
		}
	}

	&.small {
		h3 {
			font-size:1.33rem;
			margin-bottom:.5em;
		}

		h4 {
			font-size:1.25rem;
			line-height:1.4;
			margin-bottom:.25em;
		}

		grid {
			grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
		}
	}
}

grid {
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
	gap:1.5em;

	&.meta {
		grid-template-columns:1fr 1fr;
		gap:1em;
		margin-bottom:2em;
		
		a {
			background:var(--color-light-blue);
			padding:20px;
			transition:outline .5s;

			img {
				float:right;
				max-width:70px;
			}

			h4 {
				font-size:1.25rem;
			}

			&:hover {
				outline:2px solid var(--color-medium-blue);
			}
		}
	}

	a {
		display:inline-block;
		border-radius:5px;
		color:var(--color-black);

		div {
			padding:1em;
		}
	}

	h3 {
		font:500 1.125rem/1.5 "Roboto",sans-serif;
		margin-bottom:.5rem;
		color:var(--color-heading);
	}
}

.addons {
	padding:2rem 1rem 20px;
	border-radius:5px;
	margin-bottom:2em;

	&:before {
		content: "";
		width: 0;
		height: 0;
		border-left: 20px solid transparent;
		border-right: 20px solid transparent;
		border-top: 20px solid var(--color-white);
		display: block;
		position:relative;
		left:50%;
		top:-2rem;
		margin-left:-20px;
	}

	&.dark {
		background:var(--color-medium-blue);
		margin:20px 0 0;

		h2 {
			color:var(--color-white);
			padding-top:1rem;
			position:relative;
			font-weight:200;

		}
	}

	&.light {
		background:var(--color-light-blue);
		padding-top:1.5em;

		.btn-orange {
			display:inline-flex;
			margin:0 0 1em;
		}
	}

	grid {
		display:grid;
		grid-template-columns: repeat( auto-fit, minmax(410px, 1fr) );
		grid-gap:1rem;

		&> div {
			background:var(--color-white);
			border-radius:5px;
			box-shadow:0 8px 20px 0px rgba(18,25,97,.1);
			display:flex;
			flex-direction:column;
		}

		.card-body {
			padding:1rem 1rem 0;
			min-height:170px;
			flex-grow:1;

			img {
				float:right;
				margin:0 0 1rem 1rem;
			}

			h3 {
				color:var(--color-heading);
				font-size:1.25rem;
				font-weight:500;
				line-height:1.2;
				margin-bottom:.5rem;
			}

			a {
				max-width:calc(100% - 170px);
			}
		}

		.card-footer {
			padding:0.5rem;
			gap:.5rem;
		}
	}

	&.small {
		background:var(--color-lightest-blue);
		margin-top:2em;

		h3 {
			font-size:1.33rem;
			margin:-1em 0 1em;
			text-align:center;
		}

		grid {
			grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
		}

		&> a {
			justify-content:right;
		}
	}

}

article {
	padding-bottom:50px;

	ul {
		margin:1em;
	}

	&.is-layout-flex {
		align-items:initial;
	}

	section {
		max-width:730px;

		figure {
			background: var(--color-light-blue);
			padding:.5em;
			margin-bottom:1em;
			border-radius:5px;

			&.wp-block-table {
				background:var(--color-lightest-blue);
			}

			figcaption {
				font-size:.875rem;
				margin-bottom:0 !important;
				color:var(--color-black);
			}
		}

		&.add-on {
			max-width:initial;
			padding:0 1rem;


			.container > p:first-child {
				max-width:800px;
			}

			h1 {
				color:var(--color-grey);
				font-weight:400;
				margin-bottom:.25em;
				font-size:1.25rem;
				text-transform:uppercase;

				&:before {
					content:"ADD-ON ";
					font-weight:bold;
				}
			}

			h2 {
				font-weight:100;
				font-size:2.25rem;
				line-height:1.25;
				max-width:880px;

				strong {
					color:var(--color-dark-blue);
				}
			}

			.addon-header {
				background:var(--color-lightest-blue);
				padding:2rem 1rem;
				margin-bottom:1em;
				position:relative;;
				min-height:260px;

				img {
					max-width:164px;
					max-height:164px;
					border-radius:5px;
					float:left;
					margin-right:1rem;
				}

				&+ p {
					max-width:800px;
				}
			}

			.meta {
				width:300px;
				display:inline-block;
				float:right;
				border:1px solid #ddd;
				background:var(--color-white);
				padding:1em 1.5em;
				line-height:1.6;
				box-shadow: transparent 0 0 0 0,transparent 0 0 0 0,rgba(0,0,0,.25) 0 9px 26px -18px;
				position:absolute;
				right:1rem;
				top:100%;
				margin-top:-6rem;

				a {
					color:var(--color-black);
					text-decoration:underline;

					&.btn {
						color:var(--color-white);
						text-decoration:none;

						&:before {
							filter:invert(1);
						}
					}
				}

				.icon {
					gap:5px;

					&.info:before,
					&.history:before,
					&.tag:before {
						transform:scale(1.25);
					}
				}

				p {
					margin-bottom:0;
				}

				small {
					opacity:.75;
				}

				#changelog {
					display:none;
					position:fixed;
					top:0;
					left:0;
					width:100vw;
					height:100vh;
					background:#0005;
					padding:2rem;
					z-index:1;

					&> div {
						position:relative;
						background:var(--color-white);
						padding:1.75rem;
						max-width:800px;
					}

					&.active {
						display:flex;
						justify-content:center;
						align-items:center;
					}

					h3 {
						border-bottom:1px solid #999;
						margin-bottom: .75em;
					  	padding-bottom: .25em;
					  	font-size: 1.25rem;
					  	font-weight: 500;

						&:after {
							content:"\1F5D9";
							position:absolute;
							right: .75rem;
							top: .5rem;
							cursor:pointer;
							opacity:.5;
						}
					}
				}
			}
		}
	}

	div.aside {
		width:320px;
		flex-shrink:0;
		margin-left:auto;

		.entry-meta {
			padding:1rem;
			border:1px solid var(--color-light-blue);
			margin-bottom:1em;

			.gwp-author-image {
				max-width:60px;
				border-radius:100%;
				float:right;
			}
		}
		.quick-nav {
			position:sticky;
			top:2rem;

			h5 {
				text-transform: uppercase;
				font-size: 80%;
				background: var(--color-light-blue);
				padding: .5rem 1rem;
			}

			nav {
				border:1px solid var(--color-light-blue);
				padding:1em;
				display:flex;
				flex-direction:column;
				gap:.75em;
			}
		}
	}
}

h1.block {
	font-size:1.8rem;
	font-weight:400;
	color:var(--color-dark-blue);
	background:var(--color-light-blue);
	padding:.5em;
	margin-bottom:1.5rem;

	&.page {
		background:var(--color-medium-blue);
		color:var(--color-white);
		padding:1.5rem 1rem;

		span {
			padding:.5em .75em;
		}
	}

	span {
		font-size:1.33rem;
		padding:.25em .75em;
		border-radius:3px;
		background:var(--color-lightest-blue);
		margin-right:.25em;
		display:inline-flex !important;
		gap:.25em;

		&:before {
			transform:scale(1.5);
		}

		&.blog {
			gap:.5em; 
		}
	}

	p {
		font-size:1rem;
		color:var(--color-black);
		margin:1em 0 0;
	}

	img {
		float:right;
		margin-left:2em;
	}
}

.wp-orange-button {
	background: #fef7f4;
	color: var(--color-black);
	padding: .25rem .5rem;
	font-size: 1rem;
	text-align: left;
	border: 1px solid var(--color-orange);
	border-radius: .25rem;
	text-decoration: none;
	display:inline-flex;
	margin-top:1em;
	align-items:center;
	gap:.25em;
	transition:all .3s;

	&:before {
		content:"";
		width:18px;
		height:18px;
		background:url(images/icon-external.svg) no-repeat;
		background-size:contain;
		display:inline-block;
		transition:all .3s;
	}

	&:hover {
		background:var(--color-orange);
		color:var(--color-white);

		&:before {
			filter:invert(1);
		}
	}
}

.tags {
	list-style:none;
	display:flex;
	gap:.5em;
	padding:1em;
	font-size:0.875rem;
	flex-wrap:wrap;
	position:absolute;
	opacity:0;
	pointer-events:none;
	background:#fff;
	border:1px solid #ccc;
	box-shadow:0 8px 20px 0px rgba(18,25,97,.2);
	margin-top:.5rem;

	li {
		line-height:2;
		white-space:nowrap;
		color:#191919;
		background:var(--color-lightest-blue);
		border-radius:3px;
		padding: 0 0.5rem;
	}
}

.archive .btn.trigger {
	position:relative;
	background-color:var(--color-medium-blue);
	color:var(--color-white);
	font-size:.9rem;
	padding:.25rem .5rem;

	&.active + ul {
		opacity:1;
		pointer-events:auto;
	}

	&.active:after {
		content:"";
		width: 0;
		height: 0;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-top: 8px solid var(--color-medium-blue);
		display: block;
		left: 50%;
		margin-left:-8px;
		position:absolute;
		top:100%;
	}
}

#term-search {
	display:block;
	height:3rem;
	width:100%;
	font-size:1.1rem;
	margin:1rem 0;
	border:1px solid #ddd;
	padding:0 .5rem;
}

.card-columns {
	display:grid;
	grid-template-columns: repeat( auto-fit, minmax(240px, 1fr) );
	grid-gap:1em;
	margin-bottom:50px;

	a {
		border:1px solid #ddd;
		transition:box-shadow .5s;

		&:hover {
			border-color:#ccc;
			box-shadow:0 8px 20px 0px rgba(18,25,97,.2);
		}

		span {
			display:block;
			padding:1em;
			color:var(--color-black);

			h2 {
				color:var(--color-dark-blue);
				line-height:1.2;
			}

			small {
				display:block;
				color:var(--color-dark-blue);
				margin-top:.5em;
			}
		}

		&.hidden {
			display:none;
		}
	}
}

.modal {
	opacity:0;
	position:absolute;
	pointer-events:none;
}

/* DEPRECATED - old gview, remove when appropriate */
.gwp-addon-details {
	margin:-6em 0 1em;
	box-shadow: transparent 0 0 0 0,transparent 0 0 0 0,rgba(0,0,0,.25) 0 9px 26px -18px;
	border:1px solid #ddd;
	padding:1em 1.25em;
	background:var(--color-white);

	p {
		margin:0 0 .25em;

		.fa:not(.fa-file):before {
			transform:scale(1.25);
		}
	}

	a {
		color:var(--color-black);
		text-decoration:underline;
	}

	.small {
		font-size:.875em;
		opacity:.75;
	}
}

ul.gwp-features {
	list-style:none;
	margin:.5em 0 0 1.5em;

	li {
		margin-bottom:1em;

		&::before {
			content: "";
			position: relative;
			width:18px;
			height:18px;
			display:block; 
			float:left;
			margin:.2em 0 0 -1.5rem;
			background:url(images/icon-checkmark.svg) no-repeat;
			background-size:contain;
		}
	}
}

.gwp-table table {
	background:var(--color-white);
	
	thead th {
		border: 1px solid #66abcc;
		text-transform: uppercase;
		font-size: 80%;
		color: #fff;
		padding: .5rem 1rem;
		letter-spacing: .75px;
		background: #327397;
	}
}

.gform_wrapper.gravity-theme.gwp-demo-form_wrapper {
	padding: 1.5rem;
	border: 1px solid #327397;
	margin-bottom: 1rem;

	&::before {
		content: "DEMO";
		float: right;
		margin-right: -25px;
		margin-top: -50px;
		background: #327397;
		color: #fff;
		padding: 5px 80px;
		font-size: 80%;
		border-top-right-radius: .25rem;
		border-top-left-radius: .25rem;
		border-bottom-left-radius: .25rem;
	}

	.gfield input {
		background: #f7f8fa;
	  	border: 1px solid #ced4da;
		padding:8px;
		font:1rem 'Roboto',sans-serif;
	}

	label {
		font-weight:500;
		display:inline-block;
	}

	.button {
		font-size:.9rem;

		&:hover {
			background:#bfdbec;
		}
	}

	.gform_page_footer {
		padding:0;
	}

}

.gfield input.large {
	width:100%;
}

.pb-5 {
	padding-bottom:3rem;
}

.p-4,
.pt-5 {
	padding:1.5rem;
}

blockquote.wp-block-quote {
	background: #f7f8fa;
	padding: 2rem;
	font-size: 160%;
	border-radius: .25rem;
	margin-bottom:1em;

	p {
		font-weight:100;
	}
}

.gwp-refund-policy {
	padding:2em 0;
	max-width: 50%;
	margin: auto;

	figure {
		background:none;

		&+ div {
			margin-top:2em;
		}
	}
}

.gf_invisible,
.hidden_label .gfield_label,
.screen-reader-text,
.gfield_visibility_hidden {
	left: -9999px;
	position: absolute;
	visibility: hidden;
}

.subscribe {
	background:var(--color-lightest-blue);
	padding:30px;
	justify-content:center;
	margin-bottom:2em;

	h3 {
		font-size:2rem;
		font-weight:100;
	}

	img {
		width:130px;
	}
}

.docs {
	article {
		display:flex;
	
		div.aside {
			width:300px;
			display:flex;
			flex-direction:column;
			margin-right:2em;

			nav {
				display:flex;
				flex-direction:column;
				border:1px solid var(--color-light-blue);

				&:before {
					content:"TOPICS";
					font-size:.8em;
					background: var(--color-light-blue);
					padding: .5rem 1rem;
				}

				a {

					&.caret {
						padding:.25em;
						align-items: baseline;

						&:before {
							background-size:12px;
							width:1rem;
							flex-shrink:0;
							height:12px;
						}
					}

					&.folder {
						padding:.3em .25em;

						&:before {
							margin:.25em;
						}
					}

					&:hover {
						background:var(--color-lightest-blue);
					}

					&.active {
						background:var(--color-heading);
						color:var(--color-white);
						pointer-events:none;

						&:before {
							filter:invert(1);
						}
					}

					&.current {
						background:var(--color-light-blue);
						color:var(--color-black);
						pointer-events:none;
					}
				}
			}
		}

		.article-index {
			width:250px;
			flex-shrink:0;
			margin-left:2em;

			&> div {
				background:var(--color-lightest-blue);
				padding:1em;
				position:sticky;
				top:1rem;

				&:before {
					content:"In this article:";
					font-size:1.1em;
					display:block;
					margin-bottom:.25em;
				}
			}

			a {
				display:flex;
				font-size:.9rem;
				align-items:baseline;
				margin-bottom:.25em;

				&:before {
					transform:scale(.9);
					position:relative;
					top:3px;
					flex-shrink:0;
				}
			}
		}
	}

	h1 span {
		color:var(--color-dark-blue);
	}

	grid {
		grid-template-columns:1fr 1fr;
		margin-bottom:2em;

		a {
			border:1px solid #ddd;
			box-shadow:0 8px 10px 0px rgba(18,25,97,.1);
			transition:all .3s;

			&:hover {
				box-shadow:0 8px 20px 0px rgba(18,25,97,.2);
			}

			small {
				background:rgba(33,37,41, 0.03);
				display:block;
				line-height:2rem;
				border-bottom:1px solid #ddd;
				text-indent:.5rem;
			}

			div {
				padding:1rem;

				h2 {
					font-size:1.4rem;
					line-height:1.2;
					color:var(--color-heading);
				}
			}
		}
	}

	.related-addon {
		position:relative;
		background:var(--color-lightest-blue);
		padding:1.25rem 1.25rem 1.25rem 2.5rem;
		border:1px solid #ddd;
		margin-top:2em;

		h3 {
			font-size:1.25rem;
			font-weight:500;
			color:var(--color-heading);
		}

		&:before {
			content:'';
			position:absolute;
			width:12px;
			height:30px;
			background: var(--color-dark-blue) url(images/icon-exclamation.svg) no-repeat center;
			background-size:32px;
			padding: 10px 15px;
			border-radius: 0.25rem;
			left:0;
			margin-left:-20px;
		}
	}
}

.pricing {
	background:var(--color-light-blue);

	article {
		padding:2em 1em;

		h1 {
			font-size:3rem;
			font-weight:100;
			text-wrap:balance;
		}
	}

	select {
		border:none;
		padding:.5em;
		margin-bottom:1em;

		&.site-selector {
			display:block;
		}
	}

	.gwp-pricing-table {
		margin-bottom:1.5em;
	}

	.pricing-title {
		font-size:28px;
	}

	.gwp-price {
		font-size:42px;
		line-height:1;

		&+ p {
			height:28px;
		}
	}

	p.gwp-pricing-included::before {
		content: "";
		display: inline-block;
		margin-right: 6px;
		width:1em;
		height:1em;
		background:url(images/icon-checkmark-square.svg) no-repeat center;
		background-size:contain;
		vertical-align:text-top;
	}

	.d-none {
		display:none;
	}

	p.badge {
		padding:.75rem;
		background:var(--color-dark-blue);
	}

	.gwp-popular {
		padding-top:1.5rem;
		margin-top:-9px;
	}

	hr {
		margin-bottom:.5em;
	}

	.wp-block-button a {
		padding:.25em 1.5em;
	}

	.has-small-font-size {
		font-size:13px;
	}

	.has-white-background-color {
		padding:0 1em;
	}

	.gwp-arrow-light-blue + .wp-block-spacer {
		display:none;
	}
}

.archive,
.blogs {
	margin-bottom:100px;
	padding:1em;

	grid {
		background:var(--color-lightest-blue);
		padding:1em;
		border-radius:5px;

		a {
			background:var(--color-white);
			padding:1em;
			transition:box-shadow .3s;

			img {
				margin-bottom:.5em;
			}

			h3 {
				color:var(--color-medium-blue);
			}

			&:hover {
				box-shadow:0 8px 20px 0px rgba(18,25,97,.2);
			}

			.meta {
				color:#767676;
			}
		}
	}

	&> a {
		color:var(--color-dark-blue);
		margin:1em 0;
		color:var(--color-dark-blue);
	}
}

.archive {
	margin-bottom:0;

	h1 {
		font-weight:100;
	}

	h2 {
		font-size:1.4rem;
		line-height:1.2;
		margin-bottom:.25em;
	}
		
	grid {
		background:var(--color-medium-blue);

		a {
			padding:0;

			img {
				max-height:330px;
				object-fit:cover;
				margin:0;
				border-radius:5px 5px 0 0;
			}

			div {
				padding:1em;
			}
		}
	}
}

.pagination {
	margin:2em 0;
	text-align:center;

	.nav-links {
		display:flex;
		justify-content:center;
		gap:.5em;
	}
}

zoom {
	display:block;
	overflow:hidden;

	img {
		transition:transform .5s ease;
	}
}

a:hover > zoom > img,
zoom:hover > img {
	/* transform:scale(1.1); */
}

footer {
	position:relative;
	background:var(--color-lightest-blue);
	padding:2em;
	border-radius:5px;

	&:before {
		content:"";
		background:inherit;
		position:absolute;
		height:100%;
		width:200vw;
		z-index:-1;
		top:0;
		left:-100vw;
	}

	ul {
		list-style:none;
	}

	.menu {
		display:grid;
		grid-template-columns: repeat( auto-fit, minmax(240px, 1fr) );
		grid-gap:50px;

		a {
			color:var(--color-black);
		}

		&>li > a {
			display:none;
		}

		.heading {
			margin-top:1em;
		}

		.heading > a,
		li:first-child > a {
			pointer-events:none;
			text-transform:uppercase;
			color:var(--color-medium-blue);

			span {
				color:var(--color-black);
				text-transform:none;
				display:block;
				font-size:.8rem;
			}
		}

		&+ img {
			position:absolute;
			bottom:2em;
			right:2em;
			width:200px;
			mix-blend-mode:darken;
		}
	}

	&+ section a {
		margin:0 auto;
		display:block;
		padding:1.5rem;
		color:var(--color-black);
		text-align:center;
		font-size:.8rem;
	}
}

/* Checkout page */
.container-fluid {
	display:flex;
}

pre.wp-block-code  {
	border:none;
	border-radius:10px;

	code {
		white-space:wrap;
	}
}

@media only screen and (max-width: 768px) {
	body {
		font-size:1rem;
		line-height:1.5;
	}

	input#s {
		width:90px;
	}

	.addons {
		margin-bottom:0;
		padding-bottom:20px;

		&.dark  {
			padding-bottom:50px;
		}

		grid {
			grid-template-columns: repeat( auto-fit, minmax(320px, 1fr) );
		}
	}

	article {
		padding:0 1em;

		&.is-layout-flex {
			flex-direction:column;
		}

		div.aside {
			width:initial;
			margin-left:initial;
		}

		.tutorials {
			padding-left:0;
			padding-right:0;
		}

	}

	code {
		overflow:scroll;
		max-width:100%;
		display:block;
	}

	footer .menu + img {
		bottom:2em;
		right:0;
		width:130px;
	}
}

@media only screen and (max-width: 460px) {
	header {
		#mobile-menu {
			display:block;

			&.active + .menu {
				display:block;
				position:absolute;
			}
		}

		section {
			.menu {
				display:none;
				position:absolute;
				right:1em;
				top:4rem;
				z-index:1;
				background:var(--color-white);
				box-shadow:0 10px 10px #0001;
				padding:.5em;

				li {
					padding:.25em;
				}

				a {
					justify-content:center;
				}

				&:before {
					content: "";
					width: 0;
					height: 0;
					border-left:8px solid transparent;
					border-right:8px solid transparent;
					border-bottom:8px solid var(--color-white);
					display: block;
					position:absolute;
					right:.5rem;
					top:0;
					margin-top:-8px;
				}
			}
		}
	}

	.home-intro {
		&> div {
			max-width:initial;
			padding:10px 0 25px;
		}

		.gwp-home-intro {
			font-size:1.75rem;
		}

		img {
			display:none;
		}
	}

	.home-intro {
		& .wp-block-button > a {
			padding:0.375rem 2rem;
		}
	}

	.addon-header {
		img {
			max-width:100px !important;
			height:auto;
			margin-bottom:1rem;
		}

		h2 {
			clear:both;
			font-size:1.4rem;
		}

		.meta {
			margin-top:1rem !important;
			position:static !important;
			float:none !important;
		}
	}

	#wpadminbar .with-avatar {
		display:none !important;
	}
}