/*
Theme Name: Tracery
Author: Kris Lovett
Version: 0.01

*/

/* DEFAULTS */

div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {margin: 0;padding: 0;border: 0;}table {border-collapse: collapse;border-spacing: 0;}big {font-size: 120%;}small,sup,sub {font-size: 80%;}sup {vertical-align: super;}sub {vertical-align: sub;}dd {margin-left: 20px;}kbd,tt {font-family: courier;}ins {text-decoration: underline;}del,strike,s {text-decoration: line-through;}dt {font-weight: bold;}address,cite,var {font-style: italic;}* {box-sizing: border-box;-webkit-tap-highlight-color: transparent;}.screen-reader-text {border: 0;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;word-wrap: normal;word-break: normal;}.screen-reader-text:focus {background-color: #f7f7f7;border-radius: 3px;box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);clip: auto;-webkit-clip-path: none;clip-path: none;color: #007acc;display: block;font-size: 14px;font-size: 0.875rem;font-weight: 700;height: auto;right: 5px;line-height: normal;padding: 15px 23px 14px;text-decoration: none;top: 5px;width: auto;z-index: 100000;}.skip-link {left: -9999rem;top: 2.5rem;z-index: 999999999;text-decoration: underline;}.skip-link:focus {display: block;left: 6px;top: 7px;font-size: 14px;font-weight: 600;text-decoration: none;line-height: normal;padding: 15px 23px 14px;z-index: 100000;right: auto;}.visually-hidden:not(:focus):not(:active),.form-allowed-tags:not(:focus):not(:active) {position: absolute;height: 1px;width: 1px;overflow: hidden;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);white-space: nowrap;}

/* STYLING */

/* IMPORTS */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600&family=Signika:wght@500;600&display=swap');

/* VARIABLES */
:root {
	--full-width: clamp(290px, 90vw, 1920px);
	--auto-grid-min-size: 16rem;
	--header-height: 275px;

	--text-max-width: max(290px, 800px);
  --line-height: 1.5rem;
	--heading-font: 'Rubik', sans-serif;
	--body-font: 'Signika', sans-serif;

	--font-size-xxl: 2.488rem;
  --font-size-xl: 2.074rem;
  --font-size-lg: 1.728rem;
  --font-size-md: 1.44rem;
  --font-size-sm: 1.2rem;
  --font-size-xs: 1.1rem;
  --font-size-reg: 1rem;

	--margin-xl: 3rem;
	--margin-lg: 2rem;
	--margin-md: 1.5rem;
	--margin-sm: 1rem;

	--padding-lg: 1.5rem;
	--padding-md: 1rem;
	--padding-sm: 0.8rem;

	--border: 3px solid var(--text-color);

  --text-color: #1a1615;
  --background-color: #ebebeb;
  --link-color: #9c7965;
}

/* GENERAL */
* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
  width: 100%;
  overflow-x: hidden;
	font-size: 20px;
}

body {
	color: var(--text-color);
	background: var(--background-color);
	font-family: var(--body-font);
	font-weight: 600;
  margin: 0;
	padding: 0;
  overflow-x: hidden;
	line-height: 1.5;
}

#wrapper {
  width: var(--full-width);
	margin: auto;
}

.alignfull {
  width: auto;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
}

.alignwide {
  max-width: var(--full-width);
	margin-left: auto;
	margin-right: auto;
}

a {
	color: var(--secondary-color);
	text-decoration: none;
}

p, ol, ul, wp-block-verse, blockquote {
	line-height:  var(--line-height);
  margin-top: var(--margin-sm);
  margin-bottom: var(--margin-lg);
}

main h1, main h2, main h3, main h4, main h5, main h6, p, ol, ul, .wp-block-verse, blockquote, .wp-block-table, .entry-footer, .wp-block-buttons {
	max-width: var(--full-width);
  margin-left: auto;
  margin-right: auto;
}

p, ol, ul, .wp-block-verse, blockquote, .wp-block-buttons {
	max-width: var(--text-max-width);
  margin-left: auto;
  margin-right: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height:  1.25em;
	font-weight: 500;
	font-family: var(--heading-font);
	text-transform: uppercase;
}

.heading {
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	border-top: var(--border);
	border-bottom: var(--border);
}

.heading.wp-block-group {
	padding: var(--padding-sm) 0;
}

h1 {
	font-size: var(--font-size-xxl);
}

h2 {
  font-size: var(--font-size-xl);
}

h3 {
  font-size: var(--font-size-lg);
}

h4 {
  font-size: var(--font-size-md);
}

h5 {
  font-size: var(--font-size-sm);
}

h6 {
  font-size: var(--font-size-xs);
}

/* Smaller headings on mobile */
@media screen and (max-width: 781px) {
  :root {
    --font-size-xxl: 1.802rem;
    --font-size-xl: 1.602rem;
    --font-size-lg: 1.424rem;
    --font-size-md: 1.266rem;
    --font-size-sm: 1.125rem;
    --font-size-xs: 1.075rem;
    --font-size-reg: 1rem;
  }

	h2 {
	  font-size: var(--font-size-md);
	}
}

ol,
ul {
	list-style-position: inside;
}

img {
	max-width: 100%;
	object-fit: cover;
}

figcaption {
  font-style: italic;
  margin-top: var(--margin-sm) !important;
  text-align: center;
}

/* FANCY BLOCKQUOTES */
/* .fancy-blockquote {
  display: grid;
  grid-template-columns: 5% auto;
  column-gap: 5%;
}

.fancy-blockquote::before {
  content: " ";
  padding: 0;
  margin: 2rem 0 0 0;
  background-image: url('/wp-content/themes/plainblank/img/open-quote.svg');
  background-repeat: no-repeat;
  display: block;
  float: left;
  grid-column: 1;
  grid-row: 1;
}

.fancy-lockquote p {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}

.fancy-blockquote cite {
  display: block;
  width: 100%;
  grid-row: 2;
  grid-column: 2;
} */

.wp-block-cover__inner-container {
  max-width: var(--full-width);
}

.wp-block-media-text {
	margin: var(--margin-xl) auto;
}

.wp-block-media-text .wp-block-media-text__content {
	padding: 0;
	padding-right: 5rem;
}

.art-grid .wp-block-media-text {
	margin: 0;
}

.art-grid .wp-block-media-text .wp-block-media-text__content {
	width: : var(--text-full-width);
	padding: 0 8%;
}

.art-grid .wp-block-media-text .wp-block-media-text__media img {
	border-top: none;
}

.art-flexbox {
	margin: 0;
	gap: 0 !important;
	justify-content: center;
}

.art-grid .wp-block-image {
	margin: 0;
}

.art-grid figure {
	max-height: 50vh;
	background-color: var(--text-color);
}

.art-grid img {
	width: 100%;
	max-height: 50vh;
	object-fit: cover;
	border: var(--border);
	border-bottom: none;
	border-left: none;
	box-sizing: border-box;
}

.art-50 {
	width: 50%;
	aspect-ratio: 2 / 1;
}

.art-25 {
	width: 25%;
	aspect-ratio: 1 / 1;
}

.contact-block {
	margin: var(--margin-xl) auto;
}

.nf-form-fields-required {
	display: none;
}

.nf-field-label {
	font-size: var(--font-size-reg);
	text-transform: lowercase;
}

.ninja-forms-req-symbol {
	color: var(--link-color);
}

.nf-error .nf-error-msg, .nf-error-msg {
	text-transform: lowercase;
	font-size: var(--font-size-reg);
}

.contact-block .nf-form-content input:not([type=button]), .contact-block .nf-form-content textarea.ninja-forms-field {
	border: var(--border);
	background: none;
	color: var(--text-color);
}

.wp-block-button__link, .nf-form-content input[type=button] {
  color: var(--background-color) !important;
  background-color: var(--link-color) !important;
	border: var(--border) !important;
  border-radius: 0;
  font-size: var(--font-size-sm);
	font-family: var(--body-font);
	font-weight: 500;
  padding: 0.6rem 1.4rem !important;
	margin-right: var(--margin-lg);
	text-transform: lowercase;
	height: unset !important;
	appearance: none;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.wp-block-button__link:hover, .nf-form-content input[type=button]:hover {
	background-color: var(--text-color) !important;
}

.wp-block-file .wp-block-file__button {
  margin: 0 var(--margin-sm);
}

.wp-block-table {
	border-collapse: collapse;
}

.wp-block-table tr, .wp-block-table td, .wp-block-table th  {
  border: var(--border);
}

.wp-block-table th {
  font-weight: bold;
}

.wp-block-audio audio {
  min-width: 0;
}

.round-img img {
	border: var(--border);
	border-radius: 50%;
}

.metaslider {
	width: 100vw !important;
	margin: 0 calc(50% - 50vw) !important;
}

#baguetteBox-overlay .full-image {
    padding: 20px calc(2% + 6px);
}

/* HEADER */

header {
	height: var(--header-height);
  display: flex;
  align-content: center;
	font-family: var(--heading-font);
	border-bottom: var(--border);
}

.header-wrapper {
	width: 95vw;
	margin: 0 auto;
	margin-right: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header-inner-wrapper {
	width: 75%;
}

header a {
	color: var(--text-color);
	text-decoration: none;
	text-transform: lowercase;
}

header li  {
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

header li:hover  {
	color: var(--background-color);
	background-color: var(--link-color);
}

.site-title a {
	font-size: var(--font-size-xxl);
	font-weight: 500;
	text-transform: uppercase;
}

.logo img {
	border-radius: 50%;
	width: 70%;
	height: 70%;
	border: var(--border);
}

.header-info-container {
	display: flex;
	align-items: center;
}

.header-info {
	font-size: var(--font-size-md);
	font-weight: 500;
}

.header-icons img {
	margin: 1rem var(--margin-md);
	height: 2.5rem;
	width: 2.5rem;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.header-icons img:hover {
	transform: scale(1.2);
}

.header-icons img:first-of-type {
	margin-left: 0;
}

nav {
	width: 25%;
}

nav ul {
	list-style: none;
	text-align: right;
	font-weight: 500;
	font-size: var(--font-size-sm);
	height: var(--header-height);
	width: 100%;
	margin: 0;
}

nav ul li {
	border: var(--border);
	border-top: none;
	border-right: none;
	height: 25%;
}

nav ul li:last-of-type {
	border-bottom: none;
}

nav ul li a {
	padding-right: 5vw;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.hamburger {
	display: none;
}

.bar {
  height: 0.2rem;
  width: 1.2rem;
  margin: 0.3rem 0;
  background: var(--text-color);
  -webkit-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

.logo-icon {
  display: none;
}

.header-info-container-mobile {
	display: none;
}

.back-to-top {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 10;
	margin: 0 2% 2% 0;
	border: var(--border);
	border-radius: 50%;
	background: #1a1615ba;
}

.back-to-top a {
	display: block;
	height: 10vmin;
	width: 10vmin;
	padding: 10%;
	color: var(--background-color);
}

.back-to-top svg {
	min-width: 1px;
}
/* .sticky-nav {
	position: fixed;
	bottom: 0;
	z-index: 1000;
	display: flex;
	justify-content: flex-end;
}

.sticky-nav ul {
    list-style: none;
    text-align: right;
    font-weight: 500;
    font-size: var(--font-size-sm);
    height: auto;
    width: min-content;
		display: flex;
		justify-content: flex-end;
		background-color: var(--link-color);
		border: var(--border);
}

.sticky-nav ul li {
	border: none;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: auto;
	text-transform: lowercase;
	margin: 0.5rem 1rem;
}

.sticky-nav ul li a {
  padding-right: 0;
  width: auto;
	color: var(--background-color);
} */

/* Mobile */
@media screen and (max-width: 781px) {
	:root {
		--header-height: 5rem;
	}

	.header-info-container {
		display: none;
	}

	.header-info-container-mobile {
		display: block;
		width: var(--full-width);
		margin: 0 auto;
		padding: var(--padding-md) 0;
	}

	.header-description {
		width: var(--full-width);
		margin: var(--margin-sm) auto;
		margin-top: 0;
		font-weight: 500;
	}

	.header-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.header-info-container-mobile .logo img {
		width: 90%;
		height: 90%;
		max-width: 120px;
		max-height: 120px;
	}

	.header-icons {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.header-icons img {
    margin: 0;
    height: 12.5vw;
    width: 12.5vw;
		max-width: 50px;
		max-height: 50px;
	}

  .header-wrapper {
    width: 100%;
    display: grid;
    grid-template-rows: var(--header-height) auto;
    grid-template-columns: auto auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }

	.site-title a {
		font-size: var(--font-size-lg);
	}

  .nav {
    background: var(--background-color);
		width: 100%;
    grid-row: 2;
    grid-column-start: 1;
    grid-column-end: 3;
    position: relative;
    z-index: 10;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: top;
    transform-origin: top;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
	}

	nav ul {
		height: unset;
		width: 100vw;
		margin: 0 calc(50% - 50vw);
		display: block;
	}

	nav ul li {
		border-left: none;
		height: unset;
		width: 100vw;
		margin: 0;
		padding: var(--padding-sm) 0;
	}

	nav ul li:first-of-type {
		border-top: var(--border);
	}

	nav ul li:last-of-type {
		border-bottom: var(--border);
	}

  .nav.active {
    transform: scaleY(1);
  }

  .header-inner-wrapper {
    width: var(--full-width);
    margin: auto;
    display: flex;
    grid-row: 1;
    grid-column-start: 1;
    grid-column-end: 3;
    justify-content: space-between;
    align-items: center;
  }

  .site-title, .hamburger {
    display: flex;
    height: var(--header-height);
    align-items: center;
  }

  .hamburger {
    height: var(--header-height);
  }


	.hamburger.active .bar:nth-child(2) {
    -webkit-transform: translateX(10vw);
    transform: translateX(10vw);
    opacity: 0;
	}

	.hamburger.active .bar:nth-child(1) {
		-webkit-transform: translateY(0.5em) rotate(405deg);
		transform: translateY(0.5em) rotate(405deg);
	}

	.hamburger.active .bar:nth-child(3) {
		-webkit-transform: translateY(-0.5em) rotate(-45deg);
		transform: translateY(-0.5em) rotate(-45deg);
	}
}

/* ENTRY */

.entry-content {
  margin-bottom: var(--margin-xl);
}

.entry-content > .wp-block-cover:first-child {
  margin-top: calc(-1 * var(--margin-xl));
}

.entry-meta {
  max-width: var(--text-max-width);
  margin-left: auto !important;
  margin-right: auto !important;
}

.entry-meta,
.entry-summary a img {
	margin: var(--margin-sm) 0;
}

.entry-footer {
	font-weight: bold;
	margin-top: var(--margin-xl);
}

/* LOOP */
#posts-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
	grid-gap: 1rem;
	justify-content: center;
	align-items: baseline;
	margin: var(--margin-xl) auto;
}

#posts-container .post {
	border: var(--border);
}

#posts-container img {
  width: 100%;
  height: 15rem;
}

/* COMMENTS */
#comments {
  margin-bottom: var(--margin-xl);
}

.comment {
	border: var(--border);
	padding: var(--padding-md);
  list-style: none;
}

.comment-form-comment label {
	display: block;
}

textarea#comment {
	display: block;
	width: min(90%, var(--full-width));
}

.comment-meta {
  background: none;
  color: var(--text-color);
  text-align: left;
}

.comment-metadata {
  margin-top: 0;
}

.comment-content, .reply {
  margin-top: 0;
  padding-left: var(--padding-md);
  padding-right: var(--padding-md);
}

#cancel-comment-reply-link {
  margin-left: var(--margin-sm);
}

/* SIDEBAR WIDGET */

.sidebar-container {
  margin: var(--margin-xl) 0;
}

.sidebar-container, .sidebar-container ul, .sidebar-container ol {
	list-style: none;
  max-width: none;
}

/* Search */

.wp-block-search__inside-wrapper {
	display: block;
	margin: 0;
}

.widget-area .wp-block-search__input {
	padding: 0 var(--padding-sm);
	height: 1.8rem;
	width: 25ch;
	margin-right: var(--margin-sm);
}

/* Recent comments */
footer.wp-block-latest-comments__comment-meta {
	background: none;
	color: var(--text-color);
	text-align: left;
	padding: 0;
}

/* FOOTER */

footer {
	background: var(--link-color);
	color: var(--text-color);
	padding: var(--padding-sm);
	width: 100%;
	text-align: center;
	text-transform: lowercase;
	border-top: var(--border);
	font-size: 0.8rem;
}

.copyright {
	width: var(--full-width);
}

/* UTILITIES */
/* Keep an inline-floated image within the max-width of the text */
.floated-image .wp-block-image {
  width: var(--text-max-width);
  margin-left: auto !important;
  margin-right: auto !important;
}

.uppercase {
  text-transform: uppercase;
}

/* MOBILE */
@media screen and (max-width: 781px) {
	.contact-block, .mobile-flip {
		flex-direction: column-reverse;
	}
}

@media screen and (max-width: 700px) {
	.art-grid figure {
		max-height: unset;
	}

	.art-grid img {
		max-height: unset;
		border-left: var(--border);
	}

	.art-flexbox {
		background-color: var(--text-color);
	}

	.art-50 {
		width: 100%;
	}

	.art-100-mobile {
		width: 100% !important;
		aspect-ratio: 1 / 1;
	}

	.art-25 {
		width: 50%;
	}
}


@media screen and (max-width: 600px) {
	.wp-block-media-text .wp-block-media-text__content {
		padding: 0;
	}
}