/* Updated 2023 07 29 */

:root {
	--dark:		63,42,85;
	--light:	#9a999a;
	--medium:	#005B56;
	--grey:		#222;
	--gold:		#ffb100;
	--hover:	all .2s ease-in-out;
	--scale:	scale(1.1);
}

/* RESET*/
:root { line-sizing: normal; text-spacing: trim-start allow-end trim-adjacent ideograph-alpha ideograph-numeric; }
* { position: relative;	box-sizing: border-box;	background-clip: padding-box; max-width: 100%; line-height: calc(1em + 0.5rem); hyphens: auto; scroll-behavior: smooth; }
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
img, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; height: auto; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

html, body { 
	margin: 0;
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-overflow-scrolling: touch;
}

body {
	position: relative; 
	font: normal 1.25rem/1.7 'Ysabeau', sans-serif;
	color: #222;
	text-rendering: optimizeSpeed;
	overflow-x: hidden;
	overflow-y: scroll;
}

/* SCROLLBAR */
::-webkit-scrollbar { width: 20px; }
::-webkit-scrollbar-track { background: #232E33; }
::-webkit-scrollbar-thumb { 
	min-height: 100px; 
	background-color: #6D2D03; 
	background: url(/wp-content/themes/otq2023/images/hero-03.jpg); 
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 100px; 
	box-shadow: inset 1px 1px 5px rgba(255,255,255, 0.3);
}

/* Elements */

h1 { 			font-size: 2rem; }
h2 { 			font-size: 1.75rem; }
h3 { 			font-size: 1.5rem; }
h4, h5, h6 { 	font-size: 1.3rem; }


h1, h2, h3, h4, h5, h6 {
	margin: 0 0 2em;
	line-height: 1.2; }

h2:has(~ ul),
h2:has(~ p),
h3:has(~ ul),
h3:has(~ p) {
	margin-bottom: 1rem;
}

.flex-start,
body .is-layout-flex.flex-start {
	align-items: flex-start !important;
}

.wp-block-image figure {
	margin-bottom: 2rem;
}

.wp-block-image figcaption {
	text-align: center; 
	border-bottom: 1px solid;
}
	
caption, figcaption { text-wrap: balance; /* Takes a line that will wrap and splits it more evenly, to look balanced */ }

:is(h1, h2, h3) + * { margin-bottom: 0.5em; }


p, dl, ol, ul, address { margin: 0 0 24px; }

dd, li { margin: 0 0 8px 32px; }

/* Links without a class get default styling. */
ba:not([class*=""]); { 
	text-decoration: none; 
	cursor: pointer; 
}

.btn-wrap {
	display: flex; 
	align-items: center;
	flex-wrap: wrap;
	gap: 2rem;
}

.btn-wrap a {
	display: inline-flex;
	gap: 2rem;
	padding: .5rem 2rem;
	background-color: #579AF6;
	color: #fff; 
	text-decoration: none;
	border-radius: .5rem;
}

.btn-wrap a:hover {
	background-color: #000;
}

pre { 
	font: normal 1rem/1.7 'Ysabeau', sans-serif; 
	white-space: pre-wrap; 
}
hr { border: .5px solid; }
blockquote { quotes: none; }
blockquote:before, blockquote:after { content: none; }


/* Layout */

header {
	display: grid; 
	grid-template-columns: 66% 34%; 
	grid-template-rows: 1fr; 
	gap: 0px 0px; 
	grid-template-areas: 
	  ". ."; 
	background-color: #070707;
  }

header img {
	grid-column: -1/1; z-index: 1;
	grid-row: -1/1;
	height: 100%; 
	width: 100%;
	max-width: 100%;
	min-width: 100%;
	object-fit: contain;
	display: block;
}

header hgroup {
	grid-column: 1/2; z-index: 2;
	grid-row: -1/1;
	align-self: center;
	position: relative;
	color: #fff;
}

header h1 {
	margin: 0 auto 1rem;
	font-size: 128px;
	
	font-family: 'Great Vibes';
	font-weight: normal;
	text-align: center;
	text-shadow: 0 0 25px black;
	white-space: nowrap;
}

header span {
	display: block;
	margin: -24px 0 0 0;
	left: -6%;
	width: 100%;
	font-size: 16px;
	font-family: 'Ysabeau';
	letter-spacing: 2px;
	text-transform: uppercase;
}

header p::before { content: '\b7\a0'; }

header p::after { content: '\a0\b7'; }

main {
	margin: 0 auto; 
	padding: 0 1.5rem 4rem;
	width: 1000px; max-width: 100%;
}

nav { 
	margin-bottom: 2rem; 
	background: #070707; 
}

nav ul {
	display: flex; 
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 0;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	text-align: center; }

nav li {
	margin: 0; }

nav .menu a {
	display: inline-block;
	padding: 12px 24px;
	color: #fff;
	text-decoration: none;
	border: 0;
	transition: var(--hover);
}

nav .menu:hover a:not(:hover) {
  opacity: 0.5;
}

nav a {
	display: inline-block;
	padding: 12px 24px;
	font-weight: bold;
	text-decoration: none; }

nav a:hover { 
	color: #fff; 
}

.search-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: -100px 0 0;
  padding: 0;
  height: 100px;
  background-color: #D2BC87;
  transition: all 500ms cubic-bezier(0.420, 0.000, 0.560, 1.230);
}

.search-box label { color: #070707; }

.search-box input { 
  padding: .5rem;
  text-align: center;
  border: 0;
  border-radius: 7px;
}

.search-box ::-webkit-input-placeholder {
  text-align: center;
}

body.search-open .search-box {
  margin: 0;
  box-shadow: inset auto #000;
  transition: all 500ms cubic-bezier(0.420, 0.000, 0.560, 1.230);
}

img.searcher {
  display: inline-block; 
  height: 36px;
  width: 16px;
  cursor: pointer;
}

.search-results > div {
	width: 300px; 
}

.search-results .post h2 { 
	font-size: 1rem; 
}

.post h1 {
	margin: 0 0 1rem;
	font-size: 36px;
}

.pagination {
	display: flex; 
	justify-content: center; 
	gap: 2rem;
	flex-wrap: wrap;
	margin: 0 0 10rem;
}

.pagination a {
	padding: .5rem 2rem;
	background-color: #070707;
	color: #fff;
	text-decoration: none;
	border-radius: .5rem;
}

footer { 
	background: #070707; 
}

.copy {
		margin: 0;
		padding: 24px;
		font-size: 14px;
		color: #fff;
		text-align: center;
		text-transform: uppercase; 
}

[href="#top"], [id="search_container"] {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed; right: 20px; bottom: 20px;
    height: 40px;
    width: 40px;
    background-color: #666;
    border-radius: 50%;
    padding-bottom: 2px;
    text-decoration: none;
    white-space: nowrap;
    border: 0;
}

[id="search_container"] {
	bottom: 68px; 
	transform: translateZ(0);
}

[id="search_container"] img {
	height: 24px;
	width: 24px;
}

.intro {
	margin-bottom: 2rem; 
	padding: 2rem;
	border: 1px solid #666;
}

.intro .btn-wrap {
	margin-bottom: 0;
}

/* ARCHIVES */

.post-welcome h1 {
	margin: 0 0 1rem;
	padding: .75rem;
	background-color: #579AF6;
	color: #fff;
	border-radius: 3px;
}

.post-welcome h3 {
	 margin-bottom: 4px;
}

.archive {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.archive > .post {
	margin-bottom: 3rem; 
	width: 450px; max-width: 100%;
	overflow: visible;
	transition: var(--hover);
}

.archive > .post:hover .featured-image img {
	transform: scale(1.025); 
	box-shadow: 0 0 10px 5px rgba(0,0,0, .09);
}

.archive .featured-image:not(:empty) {
	margin: 0 0 1rem; 
	padding: 1rem;
	background-color: #fff;
	box-shadow: 0 0 7px 3px rgba(0,0,0, .13);
}

.archive .featured-image:not(:empty) img {
	border: 1px solid #ccc;
	transition: var(--hover);
}

.featured-image-caption {
	margin: -2rem 0 2rem;
	padding: .25rem;
	font-size: .9rem;
	text-align: center;
}

.archive h2 {
	padding: 0 1rem;
	font-size: 1.25rem;
	text-align: center;
	transition: var(--hover);
}

.archive h2 a {
	padding: 0 0 4px; 
	color: #777;
	text-decoration: none; 
	border: 0;
}

.archive > .post:hover h2 {
	transform: scale(1.025); 
}

.post-welcome {
	margin: 0 13px 2rem;
	padding: 1rem 2rem;
	box-shadow: 0 0 7px 3px rgba(0,0,0, .13);
}

.post-welcome h2 {
	margin: 0 0 8px;
	padding: 0;
	font-size: 2rem;
	text-align: left;
}


/* SINGLE PAGE */

main.single {
	width: 800px; max-width: 100%;
}

.single .featured-image {
	margin-bottom: 2rem;
	border: 1px solid #070707;
}


/* ABOUT PAGE */

.bio img {
	padding: 8px;
	border: 1px solid;
	border-radius: 4px;
}

#skip-link {
	position: absolute; 
	left: -9999px;
}

#skip-link:focus {
	display: block;
	left: auto;
	margin: 100px auto;
	padding: 4px;
	width: fit-content;
	background-color: red;
	color: #fff;
	text-decoration: none;
	outline: 0; 
}

/* PUBLICATIONS */

.filter-box {
	padding: 1rem;
	background-color: burlywood;
}

.or-filter {
	margin: 1rem 0 .5rem;
}


.or-filter span {
	font-variant: all-small-caps;
	color: red;
	text-transform: uppercase;
}

#filterInput {
	padding: .5rem;
	width: 400px; max-width: 99%;
	text-align: center;
	border: 3px solid #ccc; 
	border-radius: .5rem;
	outline: none;
}

#filterInput:focus {
	border: 3px solid blue;
}

#filterResult {
	margin: .5rem 0 2rem;
	color: blue;
}

#filterResult + h3 {
	margin: 2rem 0 0;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #666; font-size: 14px; line-height: 1; text-transform: uppercase; text-align: center; }
::-moz-placeholder { /* Firefox 19+ */ color: #666; }
:-ms-input-placeholder { /* IE 10+ */ color: #666; }
:-moz-placeholder { /* Firefox 18- */ color: #666; }

#filterInput:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: transparent; }
#filterInput:focus::-moz-placeholder { /* Firefox 19+ */ color: transparent; }
#filterInput:focus:-ms-input-placeholder { /* IE 10+ */ color: transparent; }
#filterInput:focus:-moz-placeholder { /* Firefox 18- */ color: transparent; }

.books-authored {
	margin-top: 2rem;
}

.book-group {
	margin-bottom: 3rem;
}

.book-group > div {
	display: flex;
}

.book-group figure {
	order: 1; 
	margin-right: 1rem;
	padding-top: .5rem;
}

.book-group img {
	display: block;  
	width: 100%;
	height: auto;
}

.book-group p {
	display: flex; 
	flex-direction: column; 
	order: 2; 
	width: calc(100% - 120px);
}

.book-group a {
	display: block; 
	margin-top: .25rem;
	padding: 2px 1rem;
	width: fit-content;
	background-color: #F3A847;
	font-size: 1rem;
	text-decoration: none;
	border-radius: .5rem;
}


.page-86 .post h2 {
	margin: 2em 0 1em;
}

.page-86 .has-link a {
	padding: 2px 8px;
	background-color: burlywood;
	font-size: .85rem;
	text-decoration: none;
	text-transform: uppercase;
	border-radius: 4px;
}

/* VIDEOS */

.is-provider-youtube {
	margin-bottom: 4rem;
}

.is-provider-youtube iframe {
	width: 100%;
	aspect-ratio: 16/9;
}


/* Tables */

table {
	border-collapse: collapse;
	border-spacing: 0; }

		
/* Focus Styles */

:focus-visible, :focus {
	outline: 2px solid red;
  	outline-offset: 2px; 
}

/* Remove the focus outline */
:focus:not(:focus-visible) {
  outline: none;
}


/* Forms */

input,
textarea,
select,
button {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
input,
textarea,
button {
  border: 1px solid gray;
}

button {
	-webkit-appearance: none;
	padding: 0;
	min-width: 100px;	
	background: none;
	border: none;
	border-radius: 0;
	text-align: inherit;
	box-shadow: none;
	cursor: pointer;
}


/* Content Layout Shift */
/* doesn't render stuff you can't see */
{
  content-visibility: auto; 
  contain-intrinsic-size: 1000px; 
}

.btn {
  will-change: transform;
}


/* Utility Classes */

.flex { 				display: flex; }
.flex-row, .fr { 		flex-direction: row; }
.flex-column, .fc { 	flex-direction: column; }
.justify-center, .jc { 	justify-content: center; }
.justify-around, .ja { 	justify-content: space-around; }
.justify-between, .jb { justify-content: space-between; }
.justify-end, .je { 	justify-content: flex-end; }
.align-center, .ac { 	align-items: center; }
.align-start, .as { 	align-items: flex-start; }
.flex-wrap, .fw { 		flex-wrap: wrap; }
.grid {					display: grid; }
.gap1 { gap: 1rem; }
.gap2 { gap: 2rem; }

.red { color: #f00; }
.alignleft { float: left; margin: 0 24px 24px 0; }
.alignright { float: right; margin: 0 0 24px 24px; }
b, strong { font-weight: bold; }
i, em { font-style: italic; }
.center { text-align: center; }
.btn-wrap.center { justify-content: center; }
.marb-2 { margin-bottom: 2rem; }
.marb-4 { margin-bottom: 4rem; }
.tight { margin-bottom: .5rem; }
.nomar { margin: 0; }
.file { font-size: .8rem; color: #777; text-transform: uppercase; }
.note { font-size: .8rem; color: #777; }
hr { margin: 2rem 0; }

[hidden], 
[type="hidden"], 
.visually-hidden, 
[aria-hidden="true"] { border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px;	margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }


/* Mobile Nav */

body.menu-open { overflow-y: hidden; }

.m-menu, nav.mobile { display: none; }

nav.mobile {
	align-items: flex-start; 
	position: absolute; top: 0; left: -300px; z-index: 7; 
	height: 100%; 
	width: 300px;
	box-shadow: 0 0 1000px 1000px rgba(0,0,0,.5);
	overflow-y: scroll;
	overflow-x: hidden;
	transition: all .2s ease-in-out;
}

nav.mobile > div { width: 100%; }

nav.mobile li {
	margin: 0 0 4px;
	padding-left: 10px;
}

nav.mobile a {
	padding: 8px 8px 8px 0;
	font-size: 14px;
}

nav.mobile .sub-menu { margin: 0 0 0 8px; }

nav.mobile .sub-menu li { padding-left: 0; }

nav.mobile .sub-menu a::before {
	content: '\00bb';
	margin-right: 8px;
}

nav.mobile .menu-container::-webkit-scrollbar { width: 12px; }
nav.mobile .menu-container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); background-color: #555; }
nav.mobile .menu-container::-webkit-scrollbar-thumb { min-height: 50px; background-color: #fc3; border-radius: 24px; outline: 0 solid slategrey; }

nav.mobile .menu-container {
 /* for proper scrolling */
    position: absolute; top: 0; left: 0;
	padding: 64px 0;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.close {
    display: grid; 
	align-items: center;
	position: fixed; top: 52px; right: 6px; z-index: 2;
	margin: 0;
    height: 36px;
    width: 36px;
    background-color: var(--grey);
    font: bold 18px/1px arial, sans-serif;
    color: #fff;
    border: 2px solid var(--grey);
    border-radius: 100%;
	transition: transform .2s ease-in-out;
    cursor: pointer;
}

.close img {
	display: block;
	margin: 0 auto;
	height: 20px;
	width: auto;
}

@media (max-width: 1500px) {
	header h1 {
		font-size: 84px;
	}

	header span {
		top: 4px;
		left: -14%;
	}

	header span::before {
		display: none;
	}
}

@media (max-width: 1040px) {
	nav.top { display: none; }
	.m-menu { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 8px; font-size: 20px; color: #fff; text-align: center; }
	nav.mobile.show { display: flex; transform: translatex(300px); }
	nav.mobile .menu li,
	nav.mobile .menu li a { display: block; width: 100%; }
}

@media (max-width: 1000px) {
	header hgroup {
		top: 25%;
	}
	header h1 {
		margin-bottom: 3rem; 
		font-size: 64px;
	}

	header span {
		font-size: 12px;
	}

	header span::before,
	header span::after {
		display: none;
	}
}

@media (max-width: 750px) {
	header hgroup {
		top: 0; 
		align-self: center;
	}
	header h1 {
		margin-bottom: 3rem; 
		font-size: 48px;
	}

	header span {
		top: 24px;
		left: 0;
	}
	
}

@media (max-width: 550px) {
	header {
		display: flex;
		flex-wrap: wrap;
	}
	header * {
		min-width: 100%;
	}

	header hgroup {
		order: 1;
		padding: 1rem;
		text-align: center;
		background-color: #070707;
	}

	header img {
		order: 2;
	}

	header h1 {
		margin-bottom: 3rem; 
		font-size: 48px;
	}

	header span {
		margin-left: 0;
	}
}

@media (max-width: 435px) {
	header h1 { font-size: 2rem; }
	.menu li { width: 50%; }
}