/*
Theme Name: DC Proost
Theme URI: http://darskycreative.com/themes/dc-proost
Author: Darsky Creative
Author URI: http://darskycreative.com/
Description: DC Proost is a custom theme designed by Darsky Creative.
Version: 1.1.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.en.html
Text Domain: dc-proost
Tags: custom-header, custom-menu, custom-logo, featured-images, footer-widgets, theme-options

This file is part of the DC Proost Wordpress theme.

The DC Proost Wordpress theme is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

The DC Proost Wordpress theme is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with the DC Proost Wordpress theme.  If not, see <http://www.gnu.org/licenses/>.
*/

/***** Custom Fonts ************

font-family: "Encode Sans Expanded", sans-serif;
font-family: "Roboto", sans-serif;
font-family: "Roboto Condensed", sans-serif;

***** end Custom Fonts ********/

@view-transition {
	navigation: auto;
}

:root {
	--clr-blue: hsl(186, 42%, 55%); /* #5db3bd */
	--clr-dark: hsl(0, 0%, 0%);
	--clr-text-gray: #c9c9c9;
	--clr-gray: #616161;
	--clr-gray-light: #aaaaaa;
	--clr-gray-light-2: #8a8a8a;
	--clr-gray-border: #939393;

    --clr-main: hsl(0, 0%, 0%);
	--clr-secondary: hsl(0, 0%, 100%);
	--clr-button: var(--clr-secondary);

	--background-main: hsl(0, 0%, 100%);
	--background-button: var(--clr-blue);
	--background-button-hover: var(--clr-dark);

	--clr-link: var(--clr-blue);

	--clr-border: var(--clr-gray-light);
    --clr-border-dark: var(--clr-gray);

    --max-width: 90rem;
	--max-width-text: 64rem;
    --padding-rl: 1.25rem;
    --banner-ht: 25rem;
    --no-banner-ht: 15rem;
    --width-sidebar: 30rem;
    --margin-sidebar: 9rem;
    --trans-duration: 0.2s;

	--ff-encode-sans-exp: "Encode Sans Expanded", sans-serif;
	--ff-roboto: "Roboto", sans-serif;
	--ff-roboto-condensed: "Roboto Condensed", sans-serif;
    --ff-primary: var(--ff-roboto);
    --ff-secondary: var(--ff-roboto-condensed);
	--ff-quote: var(--ff-encode-sans-exp);
}

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow-wrap: normal !important;
}

html * {
    margin: 0;
    padding: 0;
}

html {
	scroll-behavior: smooth;
    scroll-padding-top: calc(var(--ht-header, 3rem) + 2rem);
}

html:focus-within {
    scroll-behavior: smooth;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    font-family: var(--ff-primary);
	color: var(--clr-main);
}

.entry-content {
	/* display: grid; */
	padding-bottom: 6.25rem;
}

img {
    max-width: 100%;
}

.aligncenter {
	clear: left;
}

.dc-content {
	position: relative;
	width: 100%;
	max-width: var(--max-width);
	justify-self: center;

	&.narrow {
		max-width: var(--max-width-text);
	}

	&.has-background-block {
		max-width: var(--max-width);
		display: grid;
		--_content-width: 39rem;

		.hentry {
			max-width: var(--_content-width);
		}

		.entry-content {
			padding-bottom: 2rem;
		}

		.background-block {
			display: grid;
			grid-template-columns: auto auto;
			justify-content: center;
			align-self: end;
	
			.bg-image {
				margin-top: 1.75rem;
			}
		}

		@media (width >= 62.5rem) { /* 1000px */
			& {
				overflow: hidden;
				isolation: isolate;
				grid-template-columns: var(--_content-width) 1fr;
				grid-template-areas:
					'heading heading'
					'textContent bgBlock';
			}

			h1 {
				grid-area: heading;
			}

			.hentry {
				grid-area: textContent;
			}

			.background-block {
				grid-area: bgBlock;
				margin-top: 0.75rem;
				margin-left: -15rem;
				z-index: -1;

				img {
					max-width: unset;
				}
			}
		}

		@media (width >= 81.25rem) { /* 1300px */
			.background-block {
				margin-left: 0;
			}
		}
	}
}


/***** Category Archive page *********/
.archive-grid {
	display: grid;
	justify-content: center;

	.categories-list {
		justify-self: center;
		width: 100%;
		max-width: 20rem;
		margin-bottom: 3.75rem;
		display: grid;
		gap: 1.25rem;
		list-style-type: none;

		a {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 1rem;
			color: hsl(0, 0%, 0%);
			line-height: 2.2rem;
			background-color: hsl(0, 0%, 100%);
			border: 1px solid var(--clr-gray-border);
			border-radius: 4px;
			padding-inline: 1.25em 0.8125em;

			&::after {
				border-left-color: hsl(0, 0%, 0%);
			}

			&.current,
			&:hover,
			&:focus {
				text-decoration: none;
				color: hsl(0, 0%, 100%);
				background-color: hsl(0, 0%, 0%);

				&::after {
					border-left-color: hsl(0, 0%, 100%);
				}
			}

			&.current {
				background-color: var(--clr-gray-border);
			}
		}
	}

	.dc-post-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 2rem;
		justify-content: center;

		.post-item {
			flex-basis: 22.5rem;
			display: grid;
			border: 1px solid var(--clr-gray-border);

			a {
				display: grid;
				padding: 1.625rem 1.25rem 3.75rem;

				&:hover,
				&:focus {
					text-decoration: none;

					.post-title,
					.read-more {
						text-decoration: underline;
					}
				}
			}
			.post-title {
				font-size: 0.9375rem;
				line-height: 1.4;
				margin-block: 0 1.3em;
			}

			.post-date {
				font-weight: 700;
				font-size: 0.6875rem;
				color: hsl(0, 0%, 0%);
			}

			.post-content p {
				font-size: 0.8125rem;
				color: hsl(0, 0%, 0%);
				margin-bottom: 2.4em;
			}

			.read-more {
				align-self: end;
				font-weight: 700;
				font-size: 0.8125rem;

				&::before {
					border-left-color: hsl(0, 0%, 0%);
					top: 0;
					margin-right: 0.5em;
				}
			}
		}
	}

	@media (width >= 53.125rem) { /* 850px */
		.categories-list {
			margin-bottom: 4.375rem;
		}

		.dc-post-grid {
			column-gap: 5rem;
			row-gap: 4.375rem;

			.post-item {
				.post-title {
					font-size: 1rem;
				}

				.post-date {
					font-size: 0.75rem;
				}

				.post-content p {
					font-size: 0.875rem;
				}

				.read-more {
					font-size: 0.875rem;
				}
			}
		}
	}

	@media (width >= 100rem) { /* 1600px */
		grid-template-columns: 20rem 1fr;
		align-items: start;
		gap: 1rem;
	}

	@media (width >= 100rem) { /* 1600px */
		gap: 6.875rem;
	}
}

.archive.category {
	.pagination {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1.375rem;
		padding-block: 0.75rem;
		padding-inline: 1rem;
		background-color: var(--clr-gray-border);
		margin-top: 5rem;

		a {
			font-weight: 500;
			font-size: 1rem;
			color: hsl(0, 0%, 0%);
			line-height: 2.4;
			padding-block: 0;
			padding-inline: 0.625rem;
			background-color: hsl(0, 0%, 100%);
		}
	}

	footer {
		.articles {
			display: none;
		}
	}
}
/***** end Category Archive page *****/


/***** graphics *****************/
:root {
	--_border-width: 0.4em;
}

.arrow {
    display: inline-block;
    width: 0;
    height: 0;
}

.arrow-up-after::after,
.arrow-up-before::before,
.arrow-down-after::after,
.arrow-down-before::before,
.arrow-right-after::after,
.arrow-right-before::before,
.arrow-left-after::after,
.arrow-left-before::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: var(--_border-width);
    border-color: transparent;
    display: inline-block;
    position: relative;
    transition: all var(--trans-duration) linear;
}

.arrow-right-after::after,
.arrow-left-after::after,
.arrow-right-before::before,
.arrow-left-before::before {
    top: 1px;
}

.arrow-up-after::after,
.arrow-down-after::after,
.arrow-up-before::before,
.arrow-down-before::before {
    top: -0.1em;
}

.arrow-up-after::after,
.arrow-down-after::after,
.arrow-right-after::after,
.arrow-left-after::after {
    margin-left: 1em;
}

.arrow-up-before::before,
.arrow-down-before::before,
.arrow-right-before::before,
.arrow-left-before::before {
    margin-right: 1em;
}

.arrow-up-after::after,
.arrow-up-before::before {
    border-top-style: none;
    border-bottom-color: inherit;
}

.arrow-down-after::after,
.arrow-down-before::before {
    border-bottom-style: none;
    border-top-color: inherit;
}

.arrow-right-after::after,
.arrow-right-before::before {
    border-right-style: none;
    border-left-color: inherit;
}

.arrow-left-after::after,
.arrow-left-before::before {
    border-left-style: none;
    border-right-color: inherit;
}
/***** end graphics *************/


/***** Accessibility ********/
.sr-only {
    border: 0;
    clip: rect(0,0,0,0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
/***** end Accessibility ****/


/***** Protected Message *********/
.protected-message-block {
	max-width: 28.125rem;

	h3 {
		a {
			display: inline-flex;
			align-items: center;
		}
		a:first-child {
			margin-right: 2em;
		}

		a:nth-child(2) {
			&::after {
				content: '|';
				margin-inline: 0.5em 0.25em;
			}
		}

		a:nth-child(3) {
			&::after {
				content: url(images/icon-key-gray.png);
				margin-left: 0.5em;
			}
		}
	}
}
/***** end Protected Message *****/


/***** General page content ***********/
#page-content {
    min-height: 50vh;
	--_content-top-margin: 2rem;
	margin-top: calc(var(--ht-header) + var(--_content-top-margin));
	background-color: var(--background-main);
}

#main-content-wrapper {
	color: var(--clr-main);
    display: grid;
	margin-inline: var(--padding-rl);
}

.entry-content {
	.wp-block-group {
		width: 100%;
		max-width: var(--max-width-text);

		.form-group {
			padding: 1.5rem;
			border: 1px solid var(--clr-blue);
			border-radius: 1rem;
			
			h2 {
				margin-top: 0;
			}
		}
	}

	.wp-block-columns {
		max-width: var(--max-width);
	}

	.wp-block-group,
	.wp-block-columns {
		justify-self: center;
		padding-inline: var(--padding-rl);
	}
}

h1 {
    font-weight: 900;
	font-size: clamp(3rem, 8vw, 3.75rem);
	color: var(--clr-blue);
	margin-block: 0.5em 1.1em;
	text-align: center;
}

h2 {
    font-weight: 500;
	font-size: clamp(1.875rem, 6vw, 2.5rem);
	color: var(--clr-gray-light-2);
	margin-block: 0.5em 0.3em;
}

h3 {
	font-size: 1.125rem;
    font-weight: 400;
	margin-block: 1em 0.75em;
}

p,
ul {
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 1.5em;
}

p.has-large-font-size {
	font-weight: 400;
	font-size: clamp(1.25rem, 5vw, 2.25rem) !important;
	line-height: 1.2;
}

main {
	ol,
	ul {
		padding-left: 1.25rem;

		h1,
		h2,
		h3,
		h4 {
			margin-block: 0 0.6em;
		}
	}

	ol {
		list-style-position: inside;
	}

	/* Set list style to right arrow */
	/* ul {
		li {
			list-style-type: none;

			&::before {
				content: '';
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 0.4em;
				border-color: transparent;
				display: inline-block;
				position: relative;
				transition: all var(--trans-duration) linear;
				top: 1px;
				margin-right: 0.4em;
				border-right-style: none;
				border-left-color: inherit;
			}
		}
	} */
}

ul.wp-block-list {
	padding-left: 1.25rem;

	li {
		list-style-type: none;
		margin-bottom: 0.5em;

		&::before {
			content: '';
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 0.4em;
			border-color: transparent;
			display: inline-block;
			position: relative;
			transition: all var(--trans-duration) linear;
			top: 1px;
			margin-right: 0.4em;
			border-right-style: none;
			border-left-color: inherit;
		}
	}
}

a,
a:visited {
    font-weight: 500;
    text-decoration: none;
    color: var(--clr-link);
    cursor: pointer;
    
	&:hover {
        transition: all var(--trans-duration) linear;
		text-decoration-line: underline;
	}

	&.on-page-link {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: 400;
		font-size: 1rem;
		color: hsl(0, 0%, 100%);
		padding-block: 0.3em;
		padding-inline: 1em 0.75em;
		border-radius: 3px;
		background-color: var(--clr-blue);

		&::after {
			top: 0;
		}

		&:hover,
		&:focus {
			text-decoration: none;
			background-color: hsl(0, 0%, 0%);
		}
	}
}

.button,
.wpforms-submit {
	display: inline-block;
	transition: all var(--trans-duration) linear;
	font-weight: 400;
	background-color: var(--background-button) !important;
	border-radius: 4px;

	&,
	&:visited {
		color: var(--clr-button);
	}

	&:hover,
	&:focus {
		text-decoration: none !important;
		color: var(--clr-button);
		background: unset !important;
		background-color: var(--background-button-hover) !important;
	}
}

.wp-block-button__link:hover {
    text-decoration: none;
	background-color: var(--background-button) !important;
    scale: 1.1;
}

a.learn-more,
a.readmore {
    padding-left: 0.75em;
    background: url(images/arrow-right-black.png) left 45% no-repeat;
    margin-left: 0.5em;
}

.wp-block-spacer {
    clear: none;
}

blockquote {
    padding: 2rem 5%;
}

.wp-block-image a {
    display: block;
}

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

.wp-block-image .alignleft,
.wp-block-image .alignright {
    float: none;
}

.wp-block-image .alignleft img,
.wp-block-image .alignright img {
    padding-top: 0.3rem;
}

.wp-block-image .aligncenter {
    margin-bottom: 1.25rem;
}

.nocomments {
    display: none;
}

@media (min-width: 37.5rem) { /* 600px */
    .wp-block-image .alignleft,
    .wp-block-image .alignright {
        max-width: 50%;
    }

    .wp-block-image .alignleft {
        float: left;
        margin-right: 3rem;
		margin-top: 0;
    }

    .wp-block-image .alignright {
        float: right;
        margin-left: 2rem;
		margin-top: 0;
    }
}

@media (min-width: 56.25rem) { /* 900px */
    .widget-area {
        display: block;
    }

    .has-sidebar .wp-block-image {
        max-width: calc(100% - var(--width-sidebar) - var(--margin-sidebar));
    }

    .has-sidebar .wp-block-column-is-layout-flow > .wp-block-image {
        max-width: 100%;
    }
}
/***** end General page content *******/


/***** Custom Product Image Grid *********/
.product-image-grid .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        'image1 image2'
        'image1 image3';
    gap: 1rem;
    justify-content: center;
}

.product-image-grid .wp-block-image:nth-child(1) {
    grid-area: image1;
    max-width: 90%;
    align-self: center;
    justify-self: right;
}

.product-image-grid .wp-block-image:nth-child(2) {
    grid-area: image2;
}

.product-image-grid .wp-block-image:nth-child(3) {
    grid-area: image3;
    max-width: 70%;
}
/***** end Custom Product Image Grid *****/


/***** On-page links ************/
.dc-onpage-link {
    padding-top: 7.5rem;
    margin-top: -7.5rem;
}
/***** end On-page links ********/


/***** WP Video Lightbox **************/
p:has(a[rel="wp-video-lightbox"]) {
    padding-bottom: 0;
}

a[rel="wp-video-lightbox"] {
    display: block;
}

a[rel="wp-video-lightbox"] img {
    display: inline-block;
}

@media (max-width: 47.9375rem) { /* 767px */
    #pp_full_res {
        aspect-ratio: 16 / 9;
    }

    #pp_full_res iframe {
        width: 100%;
        height: 100%;
    }

    .pp_details {
        background-color: #000;
    }

    a.pp_close {
        right: 5% !important;
        top: -7px !important;
    }
}

@media (max-width: 56.1875rem) { /* 899px */
    a[rel="wp-video-lightbox"] img {
        width: 100%;
    }
}
/***** end WP Video Lightbox **********/


/***** Contact/Payment forms ***********/
.wpforms-container {
	.wpforms-field {
		padding-block: 0.5rem;

		.wpforms-field-row p {
			font-size: 1.125rem;
		}
	}

	.wpforms-field-label {
		margin-bottom: 0.5rem !important;
	}

	.wpforms-field-payment-single .wpforms-single-item-price,
	.wpforms-field-payment-total .wpforms-payment-total {
		font-size: clamp(1.25rem, 5vw, 1.5rem) !important;
	}
}

@media (min-width: 56.25rem) { /* 900px */
}
/***** end Contact/Payment forms ******/


/***** Blog posts listing page *********/
.page-template-page-blog {
	h1 {
		margin-block: 1em;
	}

	.dc-post-grid {
		max-width: 81.25rem;
		padding-inline: 1rem;
		justify-self: center;
		display: flex;
		flex-wrap: wrap;
		gap: 5rem;
		justify-content: center;

		.post-block {
			flex-basis: 22.5rem;
			display: grid;

			a {
				display: grid;
				grid-template-rows: min-content auto 1fr min-content;
				gap: 1.5rem;
				padding: 1.125rem;
				justify-items: center;
				text-align: center;
				background-color: hsl(0, 0%, 100%);
				border-radius: 0.3rem;
				box-shadow: 0 0 20px hsl(0, 0%, 80%);
				transition: all var(--trans-duration) ease-in-out;

				&:hover,
				&:focus {
					text-decoration: none;
					scale: 1.1;
				}

				.thumbnail-wrapper {
					width: 90%;
					aspect-ratio: 3 / 2;
					margin-inline: auto;

					img {
						width: 100%;
						height: 100%;
						object-fit: contain;
						object-position: center;
					}
				}

				h2,
				p {
					font-family: var(--ff-fira-sans-reg);
					color: var(--clr-main);
					margin: 0;
				}

				h2 {
					font-size: 1.875rem;
				}

				p {
					font-size: 0.875rem;
				}

				.read-more {
					align-self: flex-end;
				}
			}
		}
	}
}
/***** end Blog posts listing page *****/


/***** Blog pagination *********************/
.page-template-page-blog .entry-title {
	display: none;
}

.pagination {
	position: relative;
	font-size: 1.125rem;
	line-height: 1;
	text-align: center;
	padding-block: 2.25rem;

	span,
	a {
		display: inline-block;
		margin: 2px 2px 2px 0;
		padding: 6px 9px 5px 9px;
		text-decoration: none;
		width: auto;
		transition: background var(--trans-duration) ease-in-out;
	}

	a {
		font-weight: 300;

		&,
		&:visited {
			color: hsl(0, 0%, 0%);
		}
		
		&.past-posts-link {
			display: block;
			margin-bottom: 1em;
			float: right;
		}
	}

	a:hover,
	a:focus,
	.current {
		text-decoration: none;
		background: var(--clr-blue);
	}
}

#nav-below a {
	display: block;
    font-weight: 300;
	margin: 1.25em 0;
}

.nav-previous,
.nav-next {
    position: relative;
}

.nav-previous {
    float: right;
}

.nav-next {
    float: left;
}
/***** end Blog pagination *****************/


/***** 404 Page (Not Found) ***********/
#on-page-menu ul {
    list-style-type: none;
    margin-left: 5%;
}

#on-page-menu li a {
    padding-left: 1.25rem;
    background: url(images/arrow-right-blue-light.png) center left no-repeat;
}
/***** end 404 Page (Not Found) *******/


/***** Search form (WP standard search) ***********/
.widget_search {
	display: grid;
	justify-items: center;
}

.search-form {
	display: grid;
    width: 100%;
    max-width: 61rem;
	
	* {
		font-family: var(--ff-primary);
	}

	label,
	input[type="search"] {
		width: 100%;
	}

	.form-heading {
		grid-area: heading;
		font-weight: 900;
		font-size: 1.375rem;
		color: hsl(0, 0%, 100%);
		margin-block: 0;
		letter-spacing: 0.2em;
		text-align: center;
	}

	input[type="search"] {
		grid-area: input;
		height: 2.6875rem;
		font-size: 1.25rem;
		padding: 0.25em;
		border: 1px solid #d7d7d7;
		caret-color: var(--clr-link);
		caret-shape: block;
	}
	
	input[type="submit"] {
		grid-area: submit;
		width: 4.75rem;
		height: 2.6875rem;
		background-color: hsl(0, 0%, 100%);
		background-image: url(images/icon-arrow-right-arched.png);
		background-repeat: no-repeat;
		background-position: 0.625rem center;
		border: 1px solid #d7d7d7;
		--_border-radius: 10rem;
		border-top-right-radius: var(--_border-radius);
		border-bottom-right-radius: var(--_border-radius);
		align-self: end;

		&:hover,
		&:focus {
			cursor: pointer;
			background-color: var(--clr-dark);
		}
	}

	@media (width < 50rem) { /* 800px */
		& {
			row-gap: 1.75rem;
			grid-template-columns: 1fr auto;
			grid-template-areas:
				'heading heading'
				'input submit';

			input[type="submit"] {
				margin-left: 0.25rem;
			}
		}
	}

	@media (width >= 50rem) { /* 800px */
		& {
			grid-template-columns: auto 1fr auto;
			grid-template-areas: 'heading input submit';
			align-items: center;

			input[type="submit"] {
				margin-left: 0.3125rem;
			}

			.form-heading {
				margin-right: 4.375rem;
			}
		}
	}
}
/***** end Search form (WP standard search) *******/


/***** Dimensional Video settings **********/
.dimensional-video {
	position: relative;
    height: 0;
    padding-bottom: 56.25%;
    max-width: calc(90% - 30rem);
}
/***** end Dimensional Video settings ******/


/***** FAQs *************/
.schema-faq-answer p {
    border-left-color: var(--clr-gray-light);
}
/***** end FAQs *********/


/***** Testimonials **********/
.dc-list-all-testimonials {
	.testimonial {
		margin-bottom: 3rem;
	}

	.testimonial-content {
		font-style: italic;

		p {
			margin-bottom: 0.5em;
		}
	}

	.testimonial-name {
		&::before {
			content: '\2014';
			margin-right: 0.25em;
		}
	}
}
/***** end Testimonials ******/