/*
 * Theme Name: HB Almanac
 * Template: blankslate
 * Theme URI:         (not required)
 * Description:       Custom theme description...
 * Version:           1.0.0
 * Author:            John Jones
 * Author URI:        https://www.longjohnjones.com
 * Tags:              block-patterns, full-site-editing
 * Text Domain:       
 * Domain Path:       /assets/lang
 * Tested up to:      6.4
 * Requires at least: 6.2
 * Requires PHP:      7.4
 * License:           GNU General Public License v2.0 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
	--primary-font: helvetica, sans-serif;
	--primary-text-color: #444;
	--secondary-text-color: #222;
	--unvisited-link-color: #6b90b8;
	--hovered-link-color: #859bde;
	--visited-link-color: #9889b7;
	--meta-text-color: #888;
	
}

body {
	font-family: var(--primary-font);
	line-height: 1.4em;
	color: var(--primary-text-color);
	width: 100%;
	& div#container {
		gap: 50px;
		& aside#sidebar {
			width: 15vw;
			
			& ul.xoxo {
				list-style: none;
				padding-left: 0;
			}
			& p + p {
				margin-top: 1em;
			}
			& h1, h2, h3 {
				font-weight: bold;
				font-style: italic;
				margin-bottom: .5em;
			}
		}
		main#content {
			width: 60vw;
			max-width: 800px;
			& article.post {
				padding: 20px;
				border-radius: 20px;
				margin-bottom: 20px;
			}
		}
	}
	&.home main#content article.post {
		border: 1px solid #DDD;
	}
	&.page-id-67 {
		& p {
			margin-block-start: .5em;
		}
	}
}

h1, h2, h3, h4, h5, h6 > a {
	line-height: inherit;
}

em {
	font-style: italic;
}

strong {
	font-weight: bold;
}

a {
	color: var(--unvisited-link-color)
}

a:hover {
	color: var(--hovered-link-color);
}

a:visited {
	color: var(--visited-link-color);
}

p code {
	font-family: monospace;
	border: 1px solid #CCC;
	border-radius: .4em;
	padding: 0 .1em;
	color: #666;
}

p > img {
	border-radius: 3px;
	position: relative;
	top: .3em;
	width: 1em;
	height: 1.2em;
	margin: 0 2px;
}

ul {
	list-style-type: disc;
	padding-left: 3em;
}

ul li {
	margin-top: .5em;
}

#header {
	background: linear-gradient(to bottom, #DDD, transparent);
	padding: 4vh 2vw;
	display: flex;
	justify-content: space-between;
}

#branding #site-title {
	font-size: 1.8em;
	
}

#branding #site-title a {
	color: var(--secondary-text-color);
}

#branding #site-description {
	font-size: .7em;
	line-height: 1em;
	margin-top: .4em;
	color: var(--primary-text-color)
}

#menu {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items:baseline;
	height: min-content;
	font-family: monospace;
	& ul {
		list-style-type: none;
		display: flex;
		gap: 10px;
		padding-left: unset;
	}
	& a {
		color: var(--meta-text-color);
	}
	& #search form {
		display: flex;
		flex-wrap: wrap;
		justify-content: right;
		gap: 5px;
		& input {
			font-family: monospace;
		}
	}
}






footer#footer {
	display: flex;
	justify-content: center;
	margin-top: 40px;
	padding: 60px;
	background-color: #DDD;
	font-family: monospace;
}

.nav-links {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	& div {
		font-family: monospace;
		&:last-child {
			text-align: right;
		}
	}
}

#container {
	margin-top: 7vh;
	display: flex;
	justify-content: center;
	width: 100%;
}






.single .post {
	margin-bottom: 20px;
	padding: 0vw;
	border-radius: 20px;
	& footer.entry-footer {
		border-radius: 0 0 20px 20px;
		padding: 10px
	}
}

.wp-post-image {
	width: 100%;
	height: unset;
	border-radius: 15px;
}

.post > header, .post .entry-summary {
	padding: 0 1vw;
	margin-bottom: 2em;
}

.title {
	grid-area: title;
}

.entry-meta {
	grid-area: tags;
	font-variant: small-caps;
	font-size: .8em;
	color: var(--meta-text-color);
}

.entry-meta a {
	all: unset;
	cursor: pointer;
}

.entry-summary {
	grid-area: excerpt;
}

.entry-title {
	margin: .4em 0 .2em 0;
	font-size: 2.5em;
	line-height: 1em;
}

.entry-title a {
	color: var(--secondary-text-color);
}



/* POSTS */

.entry-content {
	padding: 0 1vw;
}

.entry-content > p + p {
	margin: 1.3em 0 0 0;
}

.entry-content > *:not(p,img){
	margin: 1em 0;
}

.entry-content h2 {
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1.5em;
	margin: 1em 0 0 0;
}

.entry-content h3 {
	font-size: 1.3em;
	font-weight: bold;
}

.entry-footer {
	width: 100%;
	text-align: center;
	font-size: .8em;
	background-color: #DDD;
}

.version-note {
	background: #DDD;
	padding: .8em;
	border-radius: 10px;
	text-align: center;
}

.definition dl {
	padding-left: 1em;
}

.definition dt {
	margin-left: 1em;
	line-height: .6em;
	
}

.definition dd {
	font-family: serif;
	font-style: italic;
	border: 1px dotted;
	border-radius: 1em;
	padding: 0 1em;
	margin:0;
}

.wp-block-image.aligncenter {
	width: 100%;
}

.wp-block-gallery.has-nested-images figure.wp-block-image {
	& figcaption.wp-element-caption {
		opacity: 0;
		padding: 25px 5px 10px;
		font-size: .8em;
		line-height: 1.2em;
		text-align: center;
		color: var(--primary-text-color);
		background: linear-gradient(0deg,#000000FF,#000000AA 80%,#0000);
		transition: all .2s ease;
	}
	&:hover figcaption.wp-element-caption {
		opacity: 100%;
		transition: all .2s ease;
	}
}

.simpletoc-list {
	list-style-type: none;
	line-height: 1em;
	padding: 0 0 0 1em;
	border-left: 2px solid var(--unvisited-link-color);
}

.simpletoc-list li ul {
	list-style-type: none;
	border-left: 2px solid var(--unvisited-link-color);
	padding: 0 0 0 1em;
	margin-left: 2em
}

/* CODE BLOCK PRO */
.wp-block-kevinbatdorf-code-block-pro {
	min-width:0; /* seems to have a min-width set to 100% which makes it difficult to place side-by-side with an image in a "row" block */
	flex: 1 1 50%;
}

/* COMMENTS */

#comments {
	margin-top: 100px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 1vw;
}

#comments #commentform {
	margin-bottom: 2em;
}

#comments #commentform .logged-in-as {
	display: block;
	font-size: .8em;
	color: var(--meta-text-color);
}

#comments #commentform .required-field-message {
	display: block;
	margin-bottom: 1em;
}

#comments #commentform label {
	display: block;
}

input[type=submit], textarea {
	border: 1px solid gray;
	border-radius: 12px;
	resize: none;
	color: var(--primary-text-color);
	margin-bottom: 1em;
}

input {
	border: 1px outset gray;
	border-radius: 12px !important;
	padding: 5px;
}

.wp-block-file {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}

.wp-block-file > a:first-child {
	display: none;
	text-align: right;
}

.wp-block-file .wp-element-button {
	background: #444;
	padding: 1em;
	text-align: center;
	text-decoration: unset;
}


.wp-block-file .wp-element-button:hover {
	background: #333;
}

#comments #commentform textarea {
	width: 100%;
	padding: 10px
}



@media (prefers-color-scheme: dark) {
	:root {
		--primary-text-color: #DDD;
		--secondary-text-color: #FFF;
		--unvisited-link-color: #dbc686;
		--hovered-link-color: #c29064;
		--visited-link-color: #A89C7A;
		--meta-text-color: #888;

	}
	
	body {
		background: #222;	
		&.home main#content {
			& article.post {
				border: 1px solid #3a3a3a;
			}
		}
	}
	
	#header {
		background: linear-gradient(to bottom, #000, transparent);
	}
	
	footer#footer {
		background-color: #444;
	}
	
	p code {
		font-family: monospace;
		border: 1px solid #666;
		border-radius: .4em;
		padding: 0 .1em;
		color: #CCC;
	}
	
	.version-note {
		background: #333;
	}
	
	input, textarea {
		background: #222;
		color: var(--primary-text-color);
	}
	
	

	
	.post footer.entry-footer {
		width: 100%;
		text-align: center;
		font-size: .8em;
		background-color: #444;
	}

	
}

@media (max-width: 599px){
	body {
		& header#header {
			flex-wrap: wrap;
			gap: 50px;
			& nav#menu {
				justify-content: space-evenly;
				& .menu-pages-container ul {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-evenly;
					gap: 14px;
					font-size: 1.2em;
				}
				& #search input {
					margin-bottom: 0;
				}
			}
			
		}
		& div#container {
			flex-direction: column;
			padding: 0 10px;
			& main#content {
				width: unset;
				line-height: 1.8;
			}
			& aside#sidebar {
				flex: 1 1 auto;
				width: unset;
				padding: 10px;
			}
		}
	}
	.home main#content {
		width: 100%;
		max-width: unset;
		padding: 2px;
	}
	
	#menu .menu {
		order: 1
	}
	
	#menu #search{
		order: -1;
	}
	
	.post {
		width: 100%;
		padding: 3vw 3vw;
		margin-bottom: 10px;
	}
}

@media (hover:none){
	.wp-block-gallery.has-nested-images figure.wp-block-image {
	& figcaption.wp-element-caption {
		opacity: unset;
		transition: unset;
	}
	&:hover figcaption.wp-element-caption {
		opacity: unset;
		transition: unset;
	}
}
}