/*
Theme Name: Coders Teaparty
Author: Sova
Author URI: https://equestria.social/@graymouse
Description: Simple custom theme for Coders Teaparty Game Development team
Version: 1.0
Requires at least: 5.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: coders-teaparty
Domain Path: /languages
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

/* =============== GENERAL STYLES =============== */

@font-face {
	font-family: 'Poiret One';
	src: url('assets/fonts/Poiret_One/PoiretOne-Regular.ttf') format('truetype')
}

@font-face {
	font-family: 'Festus Regular';
	src: url('assets/fonts/Festus\ Regular.ttf') format('truetype')
}

@font-face {
	font-family: 'Hymmnos';
	src: url('assets/fonts/hymmnos.ttf') format('truetype')
}

/* Variables only */
:root {
	--default-font-family: "Source Sans 3";
	--button-color: #AFC696;
	--button-hover-color: #D889A7;
	--link-color: steelblue; 
	--mobile-header-height: 4rem;
	/* darjilling color */
	--primary-color: #f0e7e0;
	/* matcha tea color */
	--secondary-color: #AFC696;
	/* raspberry-like */
	--link-hover-color: #D889A7;
	--website--max-width: 1200px;
	--footer-height: 5rem;
}

:root {
	background-color: #23153c;
	background-attachment: fixed;
}

html,
body {
	font-family: var(--default-font-family) !important;
	font-weight: 300;
	margin: 0; /* remove default browser margins */ 
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}


html {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}


body {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

ul.menu {
	margin: 0;
}

h1,
h2 {
	font-family: 'Poiret One';
	margin-top: 0.5em;
  	margin-bottom: 0.5em;
}

h3 {
  font-family: 'Festus Regular', cursive;
  font-size: 28px;
  margin: 0.25em 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-align: inherit;
	font-optical-sizing: auto;
	font-weight: 700;
}

h1 {
	color: #6fa329;
	font-size: 42px;
}

h2 {
	color: #6fa329;
	font-size: 36px;
}

a {
	text-decoration: none;
	color: var(--link-color);
	display: inline-block;
	position: relative;  
}

/* =============== TABLE STYLES =============== */
table {
  	width: 100%;
}

tr:nth-of-type(2n+1) {
	background-color: #f6f9fb;
}

th {
	background-color: var(--secondary-color);  
	padding: .25em 0;
}

td {
	text-align: center;
	padding: .25em 0;
}

/* =============== LINK STYLES =============== */
a:hover {
	color: var(--link-hover-color);
}

.content-area p > a::after,
.ct-breadcrumbs a::after {
	background: none repeat scroll 0 0 transparent;
	bottom: 0;
	content: "";
	display: block;
	height: 2px;
	background: var(--link-hover-color);
	transition: all 0.25s ease 0s, left 0.25s ease 0s;
	width: 0;
	position: absolute;
	top: 0;
	opacity: .45;
	margin-top: 1.25em;
  }
  
.content-area p > a:hover::after,
.ct-breadcrumbs a:hover::after {
	width: 100%;
}

.content-area p > a.no-hover-effects, 
.content-area p > .no-hover-effects a {
	padding-bottom: initial;
}

.content-area p > a.no-hover-effects::after, 
.content-area p > .no-hover-effects a::after  {
	display: none;
}

h1 > a:after, 
h2 > a:after {
	display: none;
}

li {
	padding-top: .5em;
}

input[type="text"],
input[type="search"] {
	padding: 0.75em;
	font-size: 16px;
	font-family: var(--default-font-family);
	font-weight: lighter;
}

input[type="text"],
input[type="password"],
input[type="search"] {
	border: 1px double darkgray;
	outline: none;
	box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.07);
	border-radius: 5px;
}

form input[type="submit"] {
	padding: .75em;
	text-transform: uppercase;
	font-family: "Poiret One", sans-serif;
	background: var(--secondary-color);
	border: none;
	border-radius: 5px;
	transition: background-color 130ms ease-in;
}

nav.pagination .prev:hover,
nav.pagination .next:hover,
form input[type="submit"]:hover {
	cursor: pointer;
	background: var(--link-hover-color);
}

.text-centered {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
}

.as-button {
	color: var(--button-color, lightgreen);
}
.as-button:hover {
	color: var(--button-hover-color, pink);
}

blockquote {
	color: gray;
	display: block;  
	border-left: 2px solid var(--link-color);
	margin: 1.25em 0;
	padding: 0.5em 10px;
	position: relative;
	background: linear-gradient(90deg, var(--primary-color), transparent);
}
  
blockquote > p {
	display: inline;
	line-height: 1.5em;
}

video {
	width: 100%;
}

/* --- experimental colors --- */
/* --- https://doka.guide/css/accent-color/ --- */
html {
  --brand: hotpink;
  scrollbar-color: hotpink Canvas;
}

:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }

:is(
  ::-webkit-calendar-picker-indicator,
  ::-webkit-clear-button,
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button
) {
	color: var(--brand);
}

/* =============== CONTENT STYLES =============== */

.content-wrap {	
	margin: 0 auto;
	max-width: var(--website--max-width);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;  
	z-index: 1;
}

@media screen AND (min-width: 601px) {
	.content-wrap:not(.no-sidebar) {
		background-color: var(--primary-color);  
		flex-grow: 1;
		display: grid;
		grid-template-columns: 1fr 5fr;
	}
}

.content-area {  
	padding: 2rem 4rem;
	background: white;
	border-radius: 0 0 .33em .33em;
	position: relative;
	overflow-x: hidden;
	display: flex;
  	flex-direction: column;
}

.content-wrap.no-sidebar .content-area {
	background-color: #eadbc9;  
	border-radius: 2rem;
	margin: auto;
}

.content-area .article-full .gallery {
	display: flex;
	gap: 1em;
	justify-content: space-between;
}

.content-area .article-full img {
	max-width: 100%; /* prevent images from overflowing */
	height: auto;
}

.article-full {
	font-size: clamp(1rem, -0.231vw + 1.185rem, 1.125rem);
}

.article-full > p {
    text-indent: 1em each-line;
}

.article-full > p > a {
    text-indent: 0;
}

.article-full li > p {
	margin: 0;
}

.blog .posts-list {
    display: flex;
	flex-direction: column;
    gap: 1.5em;
	min-height: 100%;
}

.blog .article-loop {
	display: flex;
	align-items: center;
	gap: 1em;
	flex: 1 0 30%;
}

.blog .article-loop a:has(.wp-post-image) {
  flex: 1 2 250px;
  height: 100%;
}

.article-loop header {
  flex: 2 1 70%;
}

.article-loop .wp-post-image {
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
}

.blog .article-loop header > :first-child {
  margin-top: 0;
}
.blog .article-loop header > :last-child {
  margin-bottom: 0;
}

/* Post tags: Single Post styles */
body:not(.blog) .post-tags {
	display: flex;
	gap: 0.25em;
	margin: 1em 0;
	align-items: baseline;
	flex-wrap: wrap;
}
body:not(.blog) .post-tag {
	color: black;
	display: inline-block;
	padding: .15em .75em;
	border-radius: .25em;
	background: var(--button-color);
	transition: color 0.15s;
	box-shadow: 1px 1px gray;
}
body:not(.blog) .post-tag .tag-post-count {
  	padding-left: .75em;
}
body:not(.blog) .post-tags > a:hover > .post-tag {
  	background: var(--button-hover-color);
}
body:not(.blog) .tag-description {
	position: fixed;
	padding: .15em .5em;
	background: lightgray;
	border-radius: 3px;
	display: none;
	z-index: 1;
}

/* Post Tags: archive styles*/
body.blog .post-tags {
	display: flex;
	flex-wrap: wrap;
}
body.blog .post-tag {
	font-weight: bold;
	margin-left: .5em;
}


/* =============== PAGINATION STYLES =============== */
div.no-hover-effects:has(.navigation.pagination) {
	margin-top: auto;
}

nav.pagination > .nav-links {
	display: flex;
	width: 100%;
	border: solid 1px black;
	border-radius: 3px;
	margin-top: 2rem;
}

nav.pagination .page-numbers {
	display: block;
	flex: 1 0;
	padding: .25em .75em;
	text-align: center;
	color: black;
	transition: background-color 140ms ease-in;
}

nav.pagination .prev,
nav.pagination .next,
nav.pagination .current,
nav.pagination .page-numbers:not(.prev, .next, .current, .dots):hover {
	background: var(--secondary-color);
}

nav.pagination > .nav-links > .page-numbers:not(.page-numbers:last-child) {
	border-right: 1px solid black;
}

nav.pagination .prev,
nav.pagination .next {
	font-family: "Poiret One", sans-serif;
}

/* =============== MISC STYLES =============== */

.error-message,
.success-message {
	padding: 1em;
	display: block;
	max-width: 50%;
	margin: 0 auto;
	text-align: center;
}

.error-message {
	background-color: pink;
}

.success-message {
	background-color: lightgreen;
}

.mobile-header {
	display: none;
}

/* TODO: check if these are still relevant after youtube plugin removal*/
.video-container {
	width: 100%; /*now it is 100% of viewport (window) width.*/
	display: inline-block;
	position: relative;
  }
  
  .video-container::after {
	padding-top: 56.25%; /* 16:9 ratio - divide height by width and multiply by 100 */
	display: block;
	content: '';
  }
  
  .video-container > iframe{
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
}

/* Screen readers only text */
.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;
}

/* --- Starry Sky animation on background by Jed Crowther https://codepen.io/jedcrowther/pen/wdzQvy --- */

.star {
	box-shadow: 0px 0px 1px 1px rgba(255, 255, 255, 0.4);
	position: absolute;
	width: 1px;
	height: 1px;
	border-radius: 2px;
	background-color: white;
}

/* --- WP default Gallery shortcode re-styling --- */
.gallery .gallery-item {
	display: flex;
	flex-direction: column;
	margin: 0;
	width: 100%;
	
	align-items: center;
	text-align: center;
}

/* =============== TABLET STYLES =============== */
@media screen AND (600px < width < 1024px) {
	.content-wrap:not(.no-sidebar) {
    	background-color: var(--primary-color);
    	flex-grow: 1;
    	display: grid;
    	grid-template-columns: 1fr 2fr;
	}
}

/* =============== MOBILE STYLES =============== */
@media screen AND (max-width: 600px){
	body {
		overflow: initial; /* no Vanta.js anyways */
	}

	.content-area {
		height: 100%;
	}

    .mobile-header {
		display: block;
		height: 4rem;
		width: 100vw;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		background: #34305a;    
		box-shadow: 2px 0px 7px darkcyan;
    }

	
	.content-area {  
		margin: 0;	/* shrink margin intended for clouds shape divider */
		border-radius: 0;
		padding: 4rem 2rem;
	}

	.blog .posts-list {
		display: flex;
		flex-direction: column;
	}
    .mobile-menu-switch {
        margin: .5rem;
        margin-left: auto;
        background: steelblue;
        width: 3rem;
        height: 3rem;
        clip-path: polygon(20% 0%, 100% 0, 100% 80%, 80% 100%, 0 100%, 0% 20%);
    }

	.mobile-menu-switch img {
		transform: rotate(90deg);
	}
}