/*!
Theme Name: portfolio_2.2
Theme URI: http://underscores.me/
Author: Paul Botwid
Author URI: https://makesmefeel.com
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: portfolio-theme-2-2
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

portfolio_2.2 is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/
html {
  scroll-behavior: smooth;
  font-size: 18px;
  margin: 0;
}

body {
  margin-block: 0;
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #151515;
  background-color: #f7f7f7;
}

p {
  margin-block-start: 0;
  margin-block-end: 0;
  line-height: 1.5em;
  max-width: 35rem;
}

p + p {
  margin-top: 0.5em;
}

.text-xl {
  font-size: 1.25rem;
}
.text-xl > p {
  max-width: none;
}

article.project {
  min-height: 75vh;
  margin-bottom: 4rem;
}

.container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding: 0 32px;
  box-sizing: border-box;
}

h1 {
  font-size: 2.5em;
  font-weight: 600;
}

h2 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-top: 1em;
}
h2:not(:last-child) {
  margin-bottom: 0.5rem;
}
h2:first-child {
  margin-top: 0;
}

.entry-content p.huge-para, h1 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  max-width: 100%;
  margin-top: 0;
  font-weight: 375;
  margin-bottom: 0.5em;
  text-underline-offset: 0.15em;
  line-height: 1.1em;
  color: #151515;
}

h3 {
  @apply text-2xl max-w-3xl;
  margin-bottom: 0.5em;
  font-weight: 500;
}
h3 + h5 {
  margin-top: -0.5rem;
  color: #919191;
}

h5 {
  margin-bottom: 0.5rem;
}

h4.entry-title {
  margin-bottom: 0.5rem;
}

h1 a, h2 a, h3 a {
  text-decoration: underline;
}
h1 a:hover, h2 a:hover, h3 a:hover {
  text-decoration: none;
}

h4 {
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
  margin-bottom: 8px;
}

figcaption, figcaption .wp-element-caption, .text-s {
  font-size: 0.8rem;
  line-height: 1.5em;
  color: #555;
}

.entry-content h4 {
  margin-bottom: 0.5rem;
}

a.catalog-project {
  text-decoration: none !important;
  color: #151515;
}

hr, .wp-block-separator {
  margin-block-end: 2rem;
  border: none;
  border: 0.8px solid #151515;
  outline: none;
  padding: 0;
  background: none;
}

.text-balance {
  text-wrap: balance;
}

.entry-content > .wp-block-image:not(:first-child), .entry-content > .wp-block-columns:not(:first-child), .entry-content > .wp-block-video:not(:first-child) {
  margin-block: 4rem;
}

body, html {
  height: 100vh;
}

div#page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main#primary {
  flex: 1;
}

a[target=_blank]::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 0.4em; /* scales with font size */
  height: 0.4em;
  margin-left: 0em;
  vertical-align: text-top;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26' fill='none'><path d='M25.4102 0.379883V2.5L25.4111 2.50195H25.4102V20.3809H22.4102V5.50195L2.8125 25.0947L0.691406 22.9736L20.2881 3.38086H5.41016V0.379883H25.4102Z' fill='blue'/></svg>");
}

figcaption {
  @apply text-sm text-lightgrey;
}
figcaption a {
  text-decoration: underline;
}
figcaption a:hover {
  text-decoration: none;
}

:where(figure) {
  margin: 0;
}

.expand-link {
  text-decoration: underline;
  text-decoration-thickness: 0.075em;
  cursor: pointer;
}
.expand-link:hover {
  text-decoration: none;
}

.expand-text {
  display: none;
}
.expand-text.expanded {
  display: inline;
}

.absolute-center {
  @apply absolute top-1/2 left-1/2;
  transform: translate(-50%, -50%);
}

.text-border-bottom, #start-intro a, a.button h2 {
  display: inline;
  line-height: 1.35em;
}

body.video-first #portfolio-wrapper div.wp-block-group.video {
  grid-row: 1;
}

body.web-first #portfolio-wrapper div.wp-block-group.web {
  grid-row: 1;
}

.hide-at-first {
  display: none;
}

.has-hidden:hover .hide-at-first {
  display: inline-block;
  margin-left: 0.2em;
}

.project-grid-header {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2rem;
}
.project-grid-header h2 {
  margin-bottom: 0;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  grid-gap: 1.5rem;
}

.project-filters {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.project-filters h4 {
  margin-bottom: 0;
}
.project-filters .project-filters--list {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.project-filters a {
  display: inline-block;
  text-decoration: none;
  padding: 4px 8px;
  min-width: 4rem;
  text-align: center;
  border-radius: 6px;
  color: #555;
  transition: all 0.2s;
  border: 1px solid;
}
.project-filters a.is-active, .project-filters a:hover {
  color: white;
  background-color: #2A0BF7;
  border-color: #2A0BF7;
}

.mobile-filter-select-wrapper {
  display: flex;
  flex-direction: column;
}
.mobile-filter-select-wrapper label {
  font-size: 0.8em;
}
.mobile-filter-select-wrapper select {
  display: block;
  width: 100%;
  max-width: 20rem;
  padding: 0.5rem 2rem 0.5rem 0.75rem; /* left pad + room for dropdown arrow */
  font-size: 1rem;
  line-height: 1.4;
  color: inherit;
  background: none;
  border: 2px solid #151515;
  border-radius: 0.25rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath fill='%23666' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.6rem auto;
  /* reset default OS / browser UI */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.catalog-project {
  display: block;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}
.catalog-project * {
  max-width: 100%;
}
.catalog-project .roles {
  font-size: 0.75rem;
  margin: 0;
}
.catalog-project h2 {
  margin-bottom: 0.1rem;
}
.catalog-project h4 {
  margin-bottom: 0;
  display: flex;
  font-weight: 550;
}
.catalog-project .project_card--text_content {
  margin-top: 0.5em;
  line-height: 1.5em;
  position: relative;
  padding: 0 4px 4px 4px;
}
.catalog-project .catalog-project__title {
  display: flex;
  color: #555;
  font-size: 1em;
  margin: 0;
  font-weight: 400;
}
.catalog-project .project_card--description {
  font-weight: 450;
}
.catalog-project .hover-arrow {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  top: 2rem;
  right: 2rem;
  opacity: 0;
  transform: translate(-1.5rem, 1.5rem);
}
.catalog-project .hover-arrow svg {
  width: 100%;
  height: 100%;
}

.catalog-project:hover .project_card--text_content span, .catalog-project:hover .project_card--text_content p, .catalog-project:hover .project_card--text_content h4, .catalog-project:hover .project_card--text_content h2 {
  color: #2A0BF7;
}
.project-cover {
  aspect-ratio: 1/1;
  background-position: center;
  background-size: cover;
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.project-cover .project-tags {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  gap: 0.5rem;
  width: 100%;
  flex-flow: row wrap;
  justify-content: flex-start;
}
.project-cover .project-tags span {
  padding: 4px 8px;
  display: inline-block;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transform: translate(0, 3rem);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.project-cover.is-video video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover; /* fills like a background image */
  display: block;
}

.border .project-cover {
  border: 1px solid #ddd;
}

.leading-5 {
  line-height: 1em;
}

a p {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}

.entry-header {
  margin-block: 4rem;
}

#cross-over {
  position: relative;
}
#cross-over:before, #cross-over:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 1em;
  background: rgb(255, 55, 55);
  width: 100%;
  transform: translate(-50%, -50%) rotate(30deg);
  transform-origin: center;
}
#cross-over:before {
  transform: translate(-50%, -50%) rotate(-30deg);
}

.alignfull {
  width: 100vw;
  margin: 2rem calc(50% - 50vw);
  padding: 0 32px;
}
.alignfull.has-background {
  padding-block: 32px;
}
.alignfull .wp-block-columns {
  margin-block: 1rem;
}

.alignwide {
  width: 100%;
}

.entry-content p + h5 {
  margin-top: -0.75em;
  color: #919191;
}

a {
  color: #2A0BF7;
  text-decoration: none;
  text-decoration-line: underline;
  text-decoration-thickness: 0.075em;
}

@screen xl {
  .alignwide {
    width: calc(100% + 8rem);
    position: relative;
    margin-left: -4rem;
  }
}
.wp-block-image {
  @apply my-8;
}
.wp-block-image.aligncenter {
  @apply mx-auto;
}

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

.wp-block-image img, .wp-block-video video {
  border-radius: 6px;
}

.no-margin .wp-block-column {
  margin-bottom: 0.5rem;
}
.no-margin .wp-block-column .wp-block-image {
  margin: 0;
}

.wp-block-embed iframe {
  width: 100%;
}

.wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 55.8%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 6px;
}
.wp-block-embed__wrapper .video_embed_cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 2;
  pointer-events: none;
}

.wp-block-embed__wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.small-border img {
  border: 1px solid lightgrey;
}

.entry-content blockquote {
  @apply p-8 my-8 w-fit;
  background-color: #f6f6f6;
}
.entry-content blockquote p {
  @apply text-gray-700 leading-8;
}
.entry-content blockquote cite {
  @apply text-lightgrey;
}

strong {
  font-weight: 600;
}

ul li {
  margin-left: 1rem;
  margin-bottom: 0.1em;
}

ul {
  margin-bottom: 1rem;
  padding-left: 1rem;
  @apply text-lg;
}

a.button {
  margin-top: 2rem;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
}

nav.main-menu {
  display: flex;
  justify-content: space-between;
  margin-block: 32px;
  margin-inline: 4px;
  font-size: 1.5rem;
}
nav.main-menu ul {
  list-style: none;
  display: flex;
  margin: 0;
}
nav.main-menu ul li:first-child:before {
  content: "";
}

nav.post-navigation .nav-links {
  margin-top: 2rem;
  display: flex;
  justify-content: space-between;
}
nav.post-navigation .nav-links a {
  display: flex;
  flex-flow: column;
}
nav.post-navigation .nav-links a span:first-child {
  color: rgba(145, 145, 145, var(--tw-text-opacity));
}
nav.post-navigation .nav-links a span:last-child {
  font-size: larger;
}
nav.post-navigation .nav-links a:hover span {
  color: rgba(145, 145, 145, var(--tw-text-opacity));
}
nav.post-navigation .nav-links .nav-next {
  text-align: right;
}

.spinning-ornament {
  max-width: 25em;
}

.spin-this, .spinning-ornament #ornament {
  transform-origin: center;
  animation: spin 80s reverse linear infinite;
}

.project-top-content {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  gap: 4rem;
  margin-bottom: 6rem;
}

.project-summary-header {
  flex: 1 1 45rem; /* grow, shrink, base width 45rem */
}

.project-facts-grid-wrapper {
  flex-basis: 20rem;
}

.project-facts-grid {
  margin-top: 0.5rem;
  flex: 1 1 20rem; /* tries to be 20rem but can grow to 100% when wrapped */
  max-width: 20rem;
  display: flex;
  flex-flow: column;
  gap: 1.5rem;
}

.facts-item:first-child {
  border-left: 0;
  padding-left: 0;
}

.facts-text {
  margin: 0;
}

.wp-block-columns {
  margin-block: 2rem;
}

/* remove margin for nested column groups */
.wp-block-columns .wp-block-columns {
  margin-block: 0;
}

.padded-column {
  background: #FAFAFA;
  padding: 2rem;
  border: 2px solid #ddd;
  border-radius: 6px;
}

.wp-block-quote, .entry-content .wp-block-quote {
  background: none;
  padding-left: 0rem;
  margin-left: 0;
  margin-block: 2rem;
}
.wp-block-quote p + p, .entry-content .wp-block-quote p + p {
  margin-top: 0.5rem;
}

.fade-out-vertical {
  position: relative;
  display: block;
  /* Make sure the image stays fully visible under the mask */
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

footer#colophon {
  margin-block: 4rem 2rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
footer#colophon .site-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.sig-animation {
  width: 2rem;
}

.sig-animation svg path {
  stroke-width: 4px;
  stroke: #151515;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
@media screen and (min-width: 68rem) {
  .catalog-project__grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }
  .project-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
  }
  .alignwide {
    width: calc(100% + 8rem);
    position: relative;
    margin-left: -4rem;
  }
}