/*
Theme Name: Wouter Jaspers
Theme URI: https://wouterjaspers.com
Description: Portfolio child theme for Eksell. Image-led homepage with a filterable work grid, book and workshop blocks, self-updating upcoming dates and a contact strip. Edit everything under Appearance → Customize → Homepage.
Author: Wouter Jaspers
Template: eksell
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wouterjaspers
*/

/* -------------------------------------------------------------------------------------------
   1. Type
   Archivo for text and headings, IBM Plex Mono for small labels. Both self-hosted.
------------------------------------------------------------------------------------------- */

:root {
	--eksell-body-font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
	--eksell-headings-font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
	--eksell-headings-weight: 800;
	--wj-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.wj-mono,
.preview-meta,
.post-meta,
.filter-list .term-count,
.archive-prefix {
	font-family: var( --wj-mono );
	letter-spacing: .02em;
	text-transform: uppercase;
}

.wj-mono {
	font-size: 1.2rem;
	font-weight: 400;
}

.site-title {
	font-weight: 800;
	letter-spacing: -.01em;
}

.site-description {
	font-family: var( --wj-mono );
	font-size: 1.1rem;
	letter-spacing: .02em;
	text-transform: uppercase;
}


/* -------------------------------------------------------------------------------------------
   2. Header: inline menu on wide screens
------------------------------------------------------------------------------------------- */

.wj-inline-nav { display: none; }

@media ( min-width: 1200px ) {

	.wj-inline-nav {
		display: block;
		margin-right: 2.4rem;
	}

	.wj-inline-menu {
		display: flex;
		flex-wrap: nowrap;
		gap: 2.4rem;
		white-space: nowrap;
	}

	.wj-inline-menu a {
		color: inherit;
		font-size: 1.6rem;
		font-weight: 500;
		text-decoration: none;
	}

	.wj-inline-menu a:hover,
	.wj-inline-menu a:focus,
	.wj-inline-menu .current-menu-item > a {
		color: var( --eksell-accent-color );
	}

}


/* -------------------------------------------------------------------------------------------
   3. Shared pieces
------------------------------------------------------------------------------------------- */

.wj-media-img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.wj-placeholder {
	align-items: flex-end;
	background-color: var( --eksell-light-background-color );
	background-image: repeating-linear-gradient( 0deg, rgba( 128, 128, 128, .08 ) 0 1px, transparent 1px 4px );
	box-sizing: border-box;
	color: var( --eksell-secondary-color );
	display: flex;
	height: 100%;
	min-height: 24rem;
	padding: 1.6rem;
	width: 100%;
}

.wj-kicker {
	color: var( --eksell-secondary-color );
	margin: 0;
}

.wj-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
	padding-top: .8rem;
}

.wj-btn {
	align-items: center;
	border: .1rem solid var( --eksell-primary-color );
	box-sizing: border-box;
	color: var( --eksell-primary-color );
	display: inline-flex;
	font-size: 1.6rem;
	font-weight: 600;
	min-height: 4.8rem;
	padding: 0 2.6rem;
	text-decoration: none;
	transition: background-color .15s linear, color .15s linear, border-color .15s linear;
}

.wj-btn:hover,
.wj-btn:focus {
	background-color: var( --eksell-primary-color );
	color: var( --eksell-background-color );
}

.wj-btn-primary {
	background-color: var( --eksell-accent-color );
	border-color: var( --eksell-accent-color );
	color: #0e0f0e;
}

.wj-btn-primary:hover,
.wj-btn-primary:focus {
	background-color: var( --eksell-primary-color );
	border-color: var( --eksell-primary-color );
	color: var( --eksell-background-color );
}


/* -------------------------------------------------------------------------------------------
   4. Hero
------------------------------------------------------------------------------------------- */

.wj-hero {
	padding-top: .8rem;
}

.wj-hero-media {
	margin: 0;
	position: relative;
}

.wj-hero-media .wj-media-img,
.wj-hero-media .wj-placeholder {
	aspect-ratio: 16 / 7;
	height: auto;
	max-height: 78vh;
}

.wj-hero-media figcaption {
	color: var( --eksell-secondary-color );
	margin-top: 1.2rem;
}

.wj-statement-row {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 2.4rem;
	justify-content: space-between;
	padding-top: 4rem;
}

.wj-statement {
	font-size: 2.4rem;
	font-weight: 500;
	letter-spacing: -.01em;
	line-height: 1.25;
	margin: 0;
	max-width: 86rem;
}

.wj-location {
	color: var( --eksell-secondary-color );
}

@media ( min-width: 700px ) {
	.wj-statement { font-size: 3.4rem; }
	.wj-hero-media .wj-media-img,
	.wj-hero-media .wj-placeholder { aspect-ratio: 16 / 7; }
}

@media ( max-width: 699px ) {
	.wj-hero-media .wj-media-img,
	.wj-hero-media .wj-placeholder { aspect-ratio: 4 / 3; }
}


/* -------------------------------------------------------------------------------------------
   5. Work grid and filter (Eksell's own, restyled)
------------------------------------------------------------------------------------------- */

.wj-home .wj-work {
	padding-top: 8rem;
}

.wj-home .wj-filter-header {
	margin-bottom: 4rem;
	padding: 0;
}

.wj-home .filter-wrapper {
	border-bottom: .1rem solid var( --eksell-border-color );
	margin: 0;
}

.wj-home .filter-list {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.6rem;
	justify-content: flex-start;
	margin: 0;
}

.wj-home .filter-list li {
	margin: 0;
}

.wj-home .filter-link {
	border-bottom: .3rem solid transparent;
	color: var( --eksell-secondary-color );
	display: inline-flex;
	font-size: 1.6rem;
	font-weight: 600;
	gap: .6rem;
	margin-bottom: -.1rem;
	min-height: 4.4rem;
	align-items: center;
	padding: 1rem .2rem .8rem;
	text-decoration: none;
}

.wj-home .filter-link:hover,
.wj-home .filter-link:focus {
	color: var( --eksell-primary-color );
}

.wj-home .filter-link.active {
	border-bottom-color: var( --eksell-accent-color );
	color: var( --eksell-primary-color );
}

.preview-title {
	font-weight: 600;
	letter-spacing: -.005em;
}

.preview-media img {
	transition: filter .2s linear;
}

.preview-media-link:hover img,
.preview-media-link:focus img {
	filter: brightness( 1.12 );
}


/* No grey band behind the grid and the "Load more" button on the homepage. */
.wj-home .posts:before,
.js .wj-home .pagination-wrapper.pagination-type-button:before {
	display: none;
}

.wj-home .posts {
	padding-bottom: 1.6rem;
}

.wj-home #load-more {
	background: transparent;
	border: .1rem solid var( --eksell-border-color );
	color: var( --eksell-primary-color );
	font-weight: 600;
}

.wj-home #load-more:hover,
.wj-home #load-more:focus {
	border-color: var( --eksell-accent-color );
	color: var( --eksell-accent-color );
}


/* -------------------------------------------------------------------------------------------
   6. Book and workshop bands
------------------------------------------------------------------------------------------- */

.wj-band {
	padding-top: 6.4rem;
}

.wj-band-inner {
	align-items: center;
	border-top: .1rem solid var( --eksell-border-color );
	display: flex;
	flex-wrap: wrap;
	gap: 4rem 6.4rem;
	padding-top: 6.4rem;
}

.wj-band-media {
	flex: 1 1 32rem;
	min-width: 0;
}

.wj-band-text {
	display: flex;
	flex: 1 1 40rem;
	flex-direction: column;
	gap: 2rem;
	min-width: 0;
}

.wj-band-text h2 {
	letter-spacing: -.02em;
	line-height: 1;
	margin: 0;
}

.wj-book-media {
	flex: 0 1 38rem;
}

.wj-book-media .wj-media-img,
.wj-book-media .wj-placeholder {
	aspect-ratio: 3 / 4;
	height: auto;
}

.wj-book-media a {
	display: block;
}

.wj-book-title {
	font-size: 4.8rem;
}

.wj-book-subtitle,
.wj-ws-text {
	font-size: 2rem;
	line-height: 1.4;
	margin: 0;
	max-width: 56rem;
}

.wj-ws-title {
	font-size: 4rem;
}

.wj-ws-media .wj-media-img,
.wj-ws-media .wj-placeholder {
	aspect-ratio: 4 / 3;
	height: auto;
}

.wj-meta {
	color: var( --eksell-secondary-color );
	display: flex;
	flex-wrap: wrap;
	gap: .8rem 2.4rem;
	margin: 0;
}

.wj-meta li { margin: 0; }

@media ( min-width: 700px ) {
	.wj-book-title { font-size: 6.4rem; }
	.wj-ws-title { font-size: 4.8rem; }
	.wj-book-subtitle { font-size: 2.2rem; }
}


/* -------------------------------------------------------------------------------------------
   7. Upcoming dates
------------------------------------------------------------------------------------------- */

.wj-dates {
	padding-bottom: 9.6rem;
}

.wj-dates-head {
	align-items: baseline;
	border-top: .1rem solid var( --eksell-border-color );
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem;
	justify-content: space-between;
	padding: 4.8rem 0 2.4rem;
}

.wj-dates-head h2 {
	font-size: 3.2rem;
	margin: 0;
}

.wj-dates-head a {
	color: var( --eksell-secondary-color );
	text-decoration: none;
}

.wj-dates-head a:hover,
.wj-dates-head a:focus {
	color: var( --eksell-accent-color );
}

.wj-date {
	align-items: baseline;
	border-top: .1rem solid var( --eksell-border-color );
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 3.2rem;
	margin: 0;
	padding: 2.2rem 0;
}

.wj-date-when {
	color: var( --eksell-secondary-color );
	flex: 0 0 18rem;
	font-size: 1.3rem;
}

.wj-date-what {
	flex: 1 1 32rem;
	font-size: 2rem;
	font-weight: 600;
}

.wj-date-what a {
	text-decoration: none;
}

.wj-date-what a:hover,
.wj-date-what a:focus {
	color: var( --eksell-accent-color );
}

.wj-date-where {
	color: var( --eksell-secondary-color );
	flex: 0 1 26rem;
	font-size: 1.6rem;
}

.wj-dates-empty {
	color: var( --eksell-secondary-color );
	font-size: 1.8rem;
}


/* -------------------------------------------------------------------------------------------
   8. Contact strip (above the footer on every page)
------------------------------------------------------------------------------------------- */

.wj-contact {
	border-top: .1rem solid var( --eksell-border-color );
	display: flex;
	flex-wrap: wrap;
	gap: 4.8rem;
	justify-content: space-between;
	padding: 5.6rem 0;
}

.wj-contact-col {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.wj-label {
	color: var( --eksell-secondary-color );
	font-size: 1.1rem;
}

.wj-contact-email {
	font-size: 2.4rem;
	font-weight: 600;
	text-decoration: none;
}

.wj-contact-email:hover,
.wj-contact-email:focus,
.wj-links a:hover,
.wj-links a:focus {
	color: var( --eksell-accent-color );
}

.wj-links {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	margin: 0;
}

.wj-links li { margin: 0; }

.wj-links a {
	font-size: 1.6rem;
	text-decoration: none;
}

.wj-newsletter {
	flex: 0 1 38rem;
	margin: 0;
}

.wj-newsletter-row {
	display: flex;
	gap: .8rem;
}

.wj-newsletter input[type="email"] {
	background: transparent;
	border: .1rem solid var( --eksell-border-color );
	color: var( --eksell-primary-color );
	flex: 1 1 auto;
	font-size: 1.6rem;
	margin: 0;
	min-height: 4.8rem;
	min-width: 0;
	padding: 0 1.4rem;
}

.wj-newsletter button {
	background: var( --eksell-primary-color );
	border: 0;
	color: var( --eksell-background-color );
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0;
	min-height: 4.8rem;
	padding: 0 2rem;
}

.wj-newsletter button:hover,
.wj-newsletter button:focus {
	background: var( --eksell-accent-color );
	color: #0e0f0e;
}

/* Don't mark "#work"-style anchor links as the current page. */
.wj-inline-menu .menu-item-type-custom.current-menu-item > a {
	color: inherit;
}

@media ( max-width: 699px ) {
	.wj-home .wj-work { padding-top: 5.6rem; }
	.wj-band, .wj-band-inner { padding-top: 4.8rem; }
}