/*
Theme Name: WordPress Theme Development (Final Project)
Theme URI: https://wsimonar.bitweb1.nwtc.edu

Author: Ark Racer
Author URI: https://wsimonar.bitweb1.nwtc.edu

Description: This is Ark Racer's theme for the Final Project of WordPress Theme Development.
Tags: simple-layout

Template: wptd-a06

Version: 1.0

Requires at least: 5.0
Tested up to: 6.8.3
Requires PHP: 7.0 and greater

License: GNU GPL
License URI: https://www.gnu.org/licenses/gpl-3.0.txt

Text Domain: wptd

General comments (optional):
*/



/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
	margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
	display: block;
	margin: 5px auto 5px auto;
}

.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}

.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

a img.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}

a img.alignnone {
	margin: 5px 20px 20px 0;
}

a img.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

a img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	background: #fff;
	border: 1px solid #f0f0f0;
	max-width: 96%; /* Image does not overflow the content area */
	padding: 5px 3px 10px;
	text-align: center;
}

.wp-caption.alignnone {
	margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
	margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
	margin: 5px 0 20px 20px;
}

.wp-caption img {
	border: 0 none;
	height: auto;
	margin: 0;
	max-width: 98.5%;
	padding: 0;
	width: auto;
}

.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	margin: 0;
	padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}

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

:root {
	--theme-color-background-normal: #00FF6E;
	--theme-color-text-normal: #000000;
	--theme-color-hyperlink-normal: #003C8A;
	--theme-color-hyperlink-selected: #620F99;
	--theme-color-background-errors: #E6E6E6;
	--theme-color-text-errors: #990000;
	--theme-color-accent-primary: #01B750;
	--theme-color-accent-secondary: #009942;
	--nav-main-height: 64px;
    	--grid-columns-12: repeat(12, 1fr);
    	--grid-columns-8: repeat(8, 1fr);
    	--grid-gap: 20px;
    	--grid-gap-half: calc(var(--grid-gap) * .5);
}

body {
	background-color: var(--theme-color-background-normal);
	color: var(--theme-color-text-normal);
	padding: 25px;
	margin: 0;
}

.wrapper {
    	margin: calc(var(--nav-main-height) + 2rem) auto 0;
    	width: min(1280px, 94%);
}

header {
	position: fixed;
    	z-index: 999;
    	top: 0;
    	right: 0;
    	left: 0;
    	height: 64px;
	background-color: var(--theme-color-background-normal)
}

header h1 {
	position: fixed;
	z-index: 1;
	top: 0;
	right: 0;
	left: 0;
	height: 64px;
	padding: 0 var(--grid-gap);
	margin: 0;
	font-size: 2em;
}

header h1 a {
	display: block;
}

header h1 span {
	display: block;
	padding-right: calc(4px + 48px);
	font-size: .4em;
	line-height: 1;
	margin-top: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#custom-header {
    	display: none;
}

.header-content-ad {
    	display: none;
}

.nav-main ul,
.nav-sub ul {
	list-style: none;
	padding: var(--grid-gap-half) 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	font-family: "Crimson Pro", serif;
}

.nav-main ul a,
.nav-sub ul a {
	display: block;
	line-height: 2;
	padding: 0 var(--grid-gap);
	border-bottom: 2px solid transparent;
	transition: all .5s ease-in;
}

.nav-sub {
    	display: none;
	font-family: "Crimson Pro", serif;
}

.nav-main-drawer {
	position: fixed;
	z-index: -1;
	right: 0;
	left: 0;
	top: 0;
	transform: translateY(-100%);
	transition: all .2s ease-in-out;
	padding: 5rem var(--grid-gap) var(--grid-gap);
	background-color: var(--theme-color-background-normal);
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

.nav-main-drawer form {
    	align-self: center;
}

.nav-main-drawer form > div {
    	display: flex;
}

.nav-main-drawer form input[name=s] {
	border: 1px solid var(--theme-color-text-normal);
	padding: 0 .25em;
	margin: 0;
	font-family: inherit;
	outline: none;
	font-size: 1rem;
	line-height: 2;
	flex: 1;
}

.nav-main-drawer form input[type=submit] {
	border: 1px solid var(--theme-color-text-normal);
	border-left: none;
	padding: 0 .25em;
	margin: 0;
	font-family: inherit;
	outline: none;
	font-size: 1rem;
	line-height: 2;
}

[for=nav-toggle-icon] {
	position: fixed;
	z-index: 999;
	top: .5rem;
	right: var(--grid-gap);
	width: 48px;
	height: 48px;
	cursor: pointer;
}

[id=nav-toggle-icon] {
    	display: none;
}

[for=nav-toggle-icon] span {
	width: 80%;
	top: 50%;
	left: 10%;
	transform: translateY(-50%);
}

[for=nav-toggle-icon] span::before,
[for=nav-toggle-icon] span,
[for=nav-toggle-icon] span::after {
	background-color: var(--theme-color-background-normal);
	height: 6px;
	position: absolute;
	content: '';
	transition: all .25s ease-in;
	border-radius: 3px;
}

[for=nav-toggle-icon] span::before {
    	width: 100%;
    	top: -10px;
}

[for=nav-toggle-icon] span::after {
    	width: 100%;
    	top: 10px;
}

[id=nav-toggle-icon]:checked~[for=nav-toggle-icon] span {
    	background-color: transparent;
}

[id=nav-toggle-icon]:checked~[for=nav-toggle-icon] span::before,
[id=nav-toggle-icon]:checked~[for=nav-toggle-icon] span::after {
    	top: 0;
}

[id=nav-toggle-icon]:checked~[for=nav-toggle-icon] span::before {
    	transform: rotate(-135deg);
}

[id=nav-toggle-icon]:checked~[for=nav-toggle-icon] span::after {
    	transform: rotate(135deg);
}

#nav-toggle-icon:checked~.nav-main-drawer {
    	transform: translateY(0);
}

.nav-footer {
    	margin: calc(var(--grid-gap) * 2) 0 var(--grid-gap);
	font-family: "Crimson Pro", serif;
}

.nav-footer > ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}

.nav-footer > ul :nth-last-child(3) {
    	margin-left: auto;
}

.nav-footer > ul a {
	display: block;
	padding: 0 .25em;
	line-height: 2;
	text-decoration: none;
}

.nav-footer > ul :first-child a {
    	padding-left: 0;
}

.nav-footer > ul :last-child a {
    	padding-right: 0;
}

h1,
h3 {
	font-family: "Germania One", Impact, sans-serif;
	font-weight: normal;
}

h2,
h4,
h5,
h6 {
	font-family: "Crimson Pro", serif;
	font-weight: 900;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-align: center;
	font-variant-caps: small-caps;
}

p {
	font-family: "Crimson Pro", serif;
	text-align: left;
}

footer {
	font-weight: 600;
	font-family: "Crimson Pro", serif;
}

a,
a:link,
a:visited {
	color: var(--theme-color-hyperlink-normal);
}

a:hover,
a:focus,
a:active {
	color: var(--theme-color-hyperlink-selected);
}

.splide {
    	margin-bottom: var(--grid-gap);
}

.splide a,
.splide a:link,
.splide a:visited {
    	color: var(--theme-color-hyperlink-normal);
}

.splide a:hover,
.splide a:focus,
.splide a:active {
    	color: var(--theme-color-hyperlink-selected);
}

.splide__slide img {
	object-fit: cover;
	height: 270px;
	width: 100%;
}

.splide__slide-title {
	margin: 0;
	padding: 0 var(--grid-gap) 0;
	line-height: 1.4em;
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	background: var(--theme-color-background-normal);
	backdrop-filter: blur(10px);
}

.splide__toggle {
	position: relative;
	float: right;
	margin-top: -2em;
	margin-right: 1em;
}

figure {
	margin: 0;
	padding: 0;
}

figure img {
	width: 100%;
	height: auto;
}

.cards {
	padding-left: 0;
	margin: 0;
	list-style: none;
}

.cards .card {
	overflow: hidden;
}

.home .cards .card {
	border: 1px solid var(--theme-color-text-normal);
	border-radius: .5rem;
}

.cards .card-link {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	flex: 0 0 100%;
}

.cards .card-figure {
	position: relative;
	margin: 0;
	line-height: 0;
	overflow: hidden;
}

.cards .card-figure img {
	width: 100%;
	height: 270px;
	object-fit: cover;
	transform-origin: 40% 80%;
	transform: rotate(0) scale(1);
	transition: all 2s;
	/* filter: grayscale(100); */
}

.cards .card-figure-caption {
    	padding: 0 10px;
}

.cards .card-link:hover .card-figure img {
	transform: rotate(8deg) scale(2);
	/* filter: grayscale(0); */
}

.cards .card-figure-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0px;
	background-color: rgba(255, 255, 255, 0.5);
	color: var(--theme-color-text-normal);
	line-height: 2;
	font-family: "Crimson Pro", serif;
	font-style: italic;
}

.cards .card-section {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	padding: var(--grid-gap-half);
}

.cards .card-section-title {
	margin-bottom: 0;
	border-bottom: 1px solid var(--theme-color-text-normal);
}

.cards .card-section-meta {
	display: flex;
	flex-wrap: wrap;
}

.cards .card-section-meta * {
	flex: 0 0 50%;
	font-size: .8em;
	line-height: 2;
}

.cards .card-section-meta :nth-child(even) {
    	text-align: right;
}

.cards .card-section-excerpt {
    	flex-grow: 1;
}

.cards .card-section-button {
	align-self: flex-end;
	margin: 10px;
	padding: 0 1em;
	border-radius: .5em;
	border: 1px solid;
	line-height: 2;
}

.widget {
	margin: var(--grid-gap) 0;
	display: flex;
	flex-direction: column;
}

hr {
	color: var(--theme-color-text-normal);
	border: 3px solid var(--theme-color-text-normal);
	width: 100%;
}

.error {
	background-color: var(--theme-color-background-errors);
	color: var(--theme-color-text-errors);
	padding: 5px;
}

@media screen and (min-width: 768px) {
	header h1::after {
		display: block;
        	font-size: .4em;
        	line-height: 4;
		font-variant-caps: small-caps;
	}

	.home header h1::after {
        	content: ".home - index.php"
    	}

    	.archive header h1::after {
        	content: ".archive - index.php"
    	}

    	.page header h1::after {
        	content: ".page - page.php"
    	}

    	.single header h1::after {
        	content: ".single - single.php"
    	}

    	.search header h1::after {
        	content: ".search - index.php"
    	}

    	.error404 header h1::after {
        	content: ".error404 - index.php"
    	}

	.wrapper {
        	margin: 0 auto;
        	display: grid;
        	grid-template-rows: auto 1fr auto;
        	gap: var(--grid-gap);
    	}

	header {
		position: static;
		color: var(--theme-color-text-normal);
		height: auto;
	}

	.header-content {
		display: grid;
		grid-template-columns: var(--grid-columns-12);
		gap: var(--grid-gap);
	}

	header h1 {
		grid-column: span 7;
		position: static;
		height: auto;
		background: var(--theme-color-background-normal);
		padding: 0 var(--grid-gap);
		margin: 0;
		font-size: 2em;
	}

	header h1 a {
		border-bottom: none;
	}

	header h1 span {
		display: block;
		padding-right: calc(4px + 48px);
		font-size: .4em;
		line-height: 1;
		text-transform: uppercase;
		margin-top: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	#custom-header {
    		display: block;
		object-fit: contain;
        	max-width: 100%;
		margin: 0 auto;
	}

	.header-content-ad {
		display: block;
		padding: 0 var(--grid-gap);
		grid-column: span 5;
		display: flex;
		justify-content: flex-end;
	}

	.header-content-ad img {
		object-fit: contain;
		max-width: 100%;
	}

	[for=nav-toggle-icon] {
		display: none;
	}

	.nav-sub {
		display: block;
	}

	.nav-main-drawer {
		position: static;
		display: flex;
		z-index: -1;
		right: 0;
		left: 0;
		top: 0;
		transform: translateY(0);
		transition: all .2s ease-in-out;
		padding: 0;
		background: var(--theme-color-background-normal);
		color: var(--theme-color-text-normal);
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		box-shadow: none;
	}

	.nav-main {
		margin-right: auto;
	}

	.nav-main,
	.nav-sub {
		background: var(--theme-color-background-normal);
	}

	.nav-main ul,
	.nav-sub ul {
		flex-direction: row;
	}

	.nav-main ul a:hover,
	.nav-sub ul a:hover,
	.nav-main .current-menu-item a,
	.nav-sub .current-menu-item a {
		border-bottom-color: var(--theme-color-text-normal);
	}

	.nav-main-drawer form {
		padding-right: var(--grid-gap);
	}

	.main-content {
		display: grid;
		grid-template-columns: var(--grid-columns-12);
		gap: var(--grid-gap);
	}

	.main-content main {
		grid-column: span 8;
	}

	.main-content aside {
		grid-column: span 4;
	}

	.home .main-content .cards {
		display: grid;
		grid-template-columns: var(--grid-columns-8);
		gap: var(--grid-gap);
	}

	.main-content .card {
		grid-column: span 4;
	}

	.page-template-page_full-width,
	.page-template-page_full-width header,
	.page-template-page_full-width header nav,
	.page-template-page_full-width header nav .nav-main-drawer,
	.page-template-page_full-width header nav .nav-main-drawer .nav-main,
	.page-template-page_full-width header .header-content,
	.page-template-page_full-width header h1,
	.page-template-page_full-width header .nav-sub,
	.page-template-page_full-width .main-content {
		background-color: lightgoldenrodyellow;
	}

	.page-id-63,
	.page-id-63 header,
	.page-id-63 header nav,
	.page-id-63 header nav .nav-main-drawer,
	.page-id-63 header nav .nav-main-drawer .nav-main,
	.page-id-63 header .header-content,
	.page-id-63 header h1,
	.page-id-63 header .nav-sub,
	.page-id-63 .main-content {
		background-color: lightgray;
	}

	.footer-upper {
		display: grid;
		grid-template-columns: var(--grid-columns-12);
		gap: var(--grid-gap);
	}

	.footer-upper .widget {
		grid-column: span 4;
	}
}