/*
 Theme Name:   Blocksy Child – Markus Cajöri
 Description:  Portfolio of Markus Cajöri on Blocksy: dark, monospace, left navigation rail, 4:3 work grid with type filter.
 Author:       8am
 Author URI:   https://8am.ch
 Template:     blocksy
 Version:      2.0.0
 Text Domain:  cajoeri
*/

/* -------------------------------------------------------------------------
 * Tokens. Colours come from the Blocksy palette (Customizer → Colors) so the
 * client can still tune them there; the fallbacks are the original values.
 * ---------------------------------------------------------------------- */
:root {
	--cajoeri-rail: 280px;
	--cajoeri-rail-pad: 40px;
	--cajoeri-bg: var(--theme-palette-color-7, #1c1c1c);
	--cajoeri-surface: var(--theme-palette-color-5, #363636);
	--cajoeri-text: var(--theme-palette-color-3, #b2b2b2);
	--cajoeri-link: var(--theme-palette-color-1, #dedede);
	--cajoeri-link-hover: var(--theme-palette-color-2, #999999);
	--cajoeri-heading: var(--theme-palette-color-4, #f5f5f5);
	--cajoeri-muted: #666666;
	--cajoeri-font: "DM Mono", "Courier New", "Liberation Mono", monospace;

	/* Blocksy sets "monospace" from the Customizer; pin a real stack so every
	   platform renders the same typewriter face at full size. */
	--theme-font-family: var(--cajoeri-font);
}

html {
	background: var(--cajoeri-bg);
	-webkit-text-size-adjust: 100%;
}

body {
	text-rendering: optimizeLegibility;
}

/* Blocksy's main column should not add vertical padding around our full-bleed layouts */
.cajoeri-portfolio #main {
	padding: 0;
}

.cajoeri-page {
	width: 100%;
}

/* -------------------------------------------------------------------------
 * Header (Blocksy header builder) – shared
 * ---------------------------------------------------------------------- */
#header [data-row*="middle"] {
	background-color: var(--cajoeri-bg);
}

#header .site-title {
	--theme-font-size: 28px;
	--theme-line-height: 1.1;
	--theme-font-weight: 700;
	--theme-link-initial-color: var(--cajoeri-heading);
	--theme-link-hover-color: var(--cajoeri-link-hover);
	font-family: var(--cajoeri-font);
}

#header [data-id="menu"] > ul > li > a,
#offcanvas [data-id="mobile-menu"] {
	--theme-font-size: 14px;
	--theme-text-transform: none;
	--theme-font-weight: 700;
	--theme-letter-spacing: 0;
	--theme-link-initial-color: var(--cajoeri-link);
	--theme-link-hover-color: var(--cajoeri-link-hover);
	font-family: var(--cajoeri-font);
}

#header [data-id="menu"] > ul > li.current-menu-item > a,
#header [data-id="menu"] > ul > li > a.is-active,
#offcanvas [data-id="mobile-menu"] .current-menu-item > a,
#offcanvas [data-id="mobile-menu"] a.is-active {
	--theme-link-initial-color: var(--cajoeri-link-hover);
	color: var(--cajoeri-link-hover);
}

#header [data-id="trigger"] {
	--theme-icon-color: var(--cajoeri-link);
	--theme-icon-hover-color: var(--cajoeri-link-hover);
}

#offcanvas .ct-panel-inner {
	background-color: rgba(20, 20, 20, 0.98);
}

#offcanvas [data-id="mobile-menu"] {
	--theme-font-size: 18px;
	--theme-font-weight: 700;
}

/* Hide the search toggle if it is still in the builder */
#header [data-id="search"] {
	display: none;
}

/* -------------------------------------------------------------------------
 * Header as a fixed left rail on desktop (Blocksy switches to the mobile
 * header below 1000px, where the default stacked header + offcanvas is used)
 * ---------------------------------------------------------------------- */
@media (min-width: 1000px) {
	#header [data-device="desktop"] {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: var(--cajoeri-rail);
		padding: var(--cajoeri-rail-pad);
		box-sizing: border-box;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--cajoeri-bg);
		z-index: 20;
	}

	.admin-bar #header [data-device="desktop"] {
		top: 32px;
	}

	#header [data-device="desktop"] [data-row] {
		--height: auto;
		min-height: 0;
		background: transparent;
	}

	#header [data-device="desktop"] [data-row] > div {
		--shrink-height: 0;
		--height: auto;
		min-height: 0;
	}

	#header [data-device="desktop"] [data-row] > .ct-container {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		width: 100%;
		max-width: none;
		min-height: 0;
		padding: 0;
		margin: 0;
	}

	#header [data-device="desktop"] [data-column],
	#header [data-device="desktop"] [data-items] {
		display: block;
		width: 100%;
		margin: 0;
		height: auto;
		min-height: 0;
	}

	#header [data-device="desktop"] [data-column="end"] {
		justify-content: flex-start;
	}

	#header [data-device="desktop"] .site-branding {
		margin: 0;
	}

	#header [data-device="desktop"] .site-title a {
		display: inline-block;
		max-width: 200px;
	}

	#header [data-device="desktop"] [data-id="menu"] {
		margin: 0;
	}

	#header [data-device="desktop"] [data-id="menu"] > ul {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}

	#header [data-device="desktop"] [data-id="menu"] > ul > li {
		margin: 0;
	}

	#header [data-device="desktop"] [data-id="menu"] > ul > li > a {
		--height: auto;
		display: inline-flex;
		min-height: 0;
		height: auto;
		padding: 2px 0;
		line-height: 1.6;
	}

	/* the copyright lives in the rail on desktop */
	#footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: var(--cajoeri-rail);
		box-sizing: border-box;
		padding: 0 var(--cajoeri-rail-pad) 28px;
		background: var(--cajoeri-bg);
		z-index: 21;
	}

	#footer [data-row] > .ct-container {
		--container-spacing: 0;
		padding: 0;
		max-width: none;
		width: 100%;
	}

	#main-container > #main {
		margin-left: var(--cajoeri-rail);
		min-height: 100vh;
	}
}

/* -------------------------------------------------------------------------
 * Footer / copyright
 * ---------------------------------------------------------------------- */
#footer {
	background-color: var(--cajoeri-bg);
}

#footer [data-row*="bottom"] {
	background: transparent;
}

#footer [data-id="copyright"] {
	--theme-font-size: 12px;
	--theme-line-height: 1.6;
	--theme-link-initial-color: var(--cajoeri-muted);
	--theme-link-hover-color: var(--cajoeri-text);
	color: var(--cajoeri-text);
	font-family: var(--cajoeri-font);
}

#footer [data-id="copyright"] p {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Portfolio grid
 * ---------------------------------------------------------------------- */
.cajoeri-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 0;
	width: 100%;
}

.cajoeri-item {
	position: relative;
	display: block;
	margin: 0;
}

.cajoeri-item[hidden] {
	display: none;
}

.cajoeri-item__link {
	display: block;
	position: relative;
	overflow: hidden;
	background: var(--cajoeri-surface);
	color: #fff;
	text-decoration: none;
	outline-offset: -3px;
}

.cajoeri-item__media {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.cajoeri-item__media img,
.cajoeri-item__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.3s ease, transform 0.4s ease;
}

.cajoeri-item__caption {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 16px 20px;
	box-sizing: border-box;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.cajoeri-item__title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: #f5f5f5;
}

.cajoeri-item__types {
	font-size: 12px;
	color: var(--cajoeri-text);
}

@media (hover: hover) and (pointer: fine) {
	.cajoeri-item__link:hover img,
	.cajoeri-item__link:focus-visible img {
		opacity: 0.18;
		transform: scale(1.03);
	}

	.cajoeri-item__link:hover .cajoeri-item__caption,
	.cajoeri-item__link:focus-visible .cajoeri-item__caption {
		opacity: 1;
	}
}

/* Touch screens: no hover, so always show the title as a bottom label */
@media (hover: none), (pointer: coarse) {
	.cajoeri-item__caption {
		opacity: 1;
		justify-content: flex-end;
		align-items: flex-start;
		text-align: left;
		padding: 40px 16px 12px;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
	}

	.cajoeri-item__title {
		font-size: 14px;
		margin-bottom: 2px;
	}

	.cajoeri-item__types {
		font-size: 11px;
	}
}

.cajoeri-empty {
	padding: 40px;
	color: var(--cajoeri-text);
}

/* -------------------------------------------------------------------------
 * Single portfolio item
 * ---------------------------------------------------------------------- */
.cajoeri-single {
	position: relative;
	width: 100%;
}

.cajoeri-single__info {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding: 28px 24px 32px;
	background: var(--cajoeri-surface);
	color: #fff;
}

.cajoeri-single__title {
	margin: 0 0 14px;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #f5f5f5;
}

.cajoeri-single__desc {
	font-size: 14px;
	line-height: 1.6;
	color: #f5f5f5;
}

.cajoeri-single__desc p,
.cajoeri-single__desc div {
	margin: 0 0 0.8em;
}

.cajoeri-single__desc > :last-child {
	margin-bottom: 0;
}

.cajoeri-single__desc a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cajoeri-single__desc a:hover {
	color: var(--cajoeri-link);
}

.cajoeri-single__terms {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 18px 0 0;
	padding: 0;
	font-size: 13px;
}

.cajoeri-single__terms a {
	color: #fff;
	text-decoration: none;
}

.cajoeri-single__terms a::before {
	content: "\2713\00a0";
}

.cajoeri-single__terms a:hover {
	color: var(--cajoeri-link);
}

/* toggle only matters where the box overlays the media (desktop) */
.cajoeri-single__toggle {
	display: none;
}

.cajoeri-single__media {
	width: 100%;
}

.cajoeri-video {
	position: relative;
	width: 100%;
	aspect-ratio: var(--cajoeri-ratio, 16 / 9);
	background: #000;
}

.cajoeri-video iframe,
.cajoeri-video video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.cajoeri-gallery {
	width: 100%;
}

.cajoeri-gallery__item {
	margin: 0;
}

.cajoeri-gallery__item img {
	display: block;
	width: 100%;
	height: auto;
}

.cajoeri-gallery__item figcaption {
	padding: 10px 24px;
	font-size: 12px;
	color: var(--cajoeri-text);
}

.cajoeri-audio {
	padding: 24px;
}

.cajoeri-audio audio {
	width: 100%;
}

.cajoeri-single__nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 16px;
	align-items: center;
	padding: 28px 24px 40px;
	font-size: 13px;
	line-height: 1.5;
}

.cajoeri-single__nav a {
	color: var(--cajoeri-link);
	text-decoration: none;
}

.cajoeri-single__nav a:hover {
	color: var(--cajoeri-link-hover);
}

.cajoeri-single__next {
	text-align: right;
}

.cajoeri-single__all {
	color: var(--cajoeri-muted) !important;
}

.cajoeri-single__all:hover {
	color: var(--cajoeri-text) !important;
}

@media (min-width: 1000px) {
	.cajoeri-single__info {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 5;
		width: 100%;
		max-width: 500px;
		padding: 40px 50px 44px;
		background: rgba(54, 54, 54, 0.92);
		backdrop-filter: blur(2px);
	}

	.cajoeri-single__toggle {
		display: block;
		position: absolute;
		right: 0;
		bottom: 0;
		width: 30px;
		height: 30px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: #222;
		color: #fff;
		cursor: pointer;
		font-size: 0;
		line-height: 0;
	}

	.cajoeri-single__toggle::before {
		content: "\00d7";
		font-size: 20px;
		line-height: 30px;
		font-family: var(--cajoeri-font);
	}

	.cajoeri-single__toggle:hover {
		background: #000;
	}

	.cajoeri-single__toggle:focus-visible {
		outline: 2px solid #fff;
		outline-offset: -4px;
	}

	.cajoeri-single__info.is-collapsed {
		width: 30px;
		height: 30px;
		padding: 0;
		overflow: hidden;
	}

	.cajoeri-single__info.is-collapsed > :not(.cajoeri-single__toggle) {
		display: none;
	}

	.cajoeri-single__info.is-collapsed .cajoeri-single__toggle::before {
		content: "i";
		font-weight: 700;
	}

	.cajoeri-single__nav {
		padding: 32px 40px 48px;
	}

	.cajoeri-gallery__item figcaption {
		padding: 10px 40px;
	}
}

/* -------------------------------------------------------------------------
 * Regular pages (Impressum etc.): Blocksy content column, dark
 * ---------------------------------------------------------------------- */
.page:not(.cajoeri-portfolio) .entry-content,
.page:not(.cajoeri-portfolio) .page-title {
	color: var(--cajoeri-text);
}

.page:not(.cajoeri-portfolio) .entry-content h2,
.page:not(.cajoeri-portfolio) .entry-content h3 {
	color: var(--cajoeri-heading);
}

/* -------------------------------------------------------------------------
 * Motion & misc
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.cajoeri-item__media img,
	.cajoeri-item__caption {
		transition: none;
	}
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Contact block (Blocksy header "text" item) and gallery rows
 * ---------------------------------------------------------------------- */
#header .ct-header-text,
#offcanvas .ct-header-text {
	--theme-font-size: 12px;
	--theme-line-height: 1.6;
	color: var(--cajoeri-text);
	font-family: var(--cajoeri-font);
	font-size: 12px;
	line-height: 1.6;
}

#header .ct-header-text .entry-content > p,
#offcanvas .ct-header-text .entry-content > p {
	margin: 0 0 10px;
}

#header .ct-header-text a,
#offcanvas .ct-header-text a {
	color: var(--cajoeri-link);
	text-decoration: none;
}

#header .ct-header-text a:hover,
#offcanvas .ct-header-text a:hover {
	color: var(--cajoeri-link-hover);
}

#offcanvas .ct-header-text {
	margin-top: 28px;
	font-size: 14px;
}

@media (min-width: 1000px) {
	#header [data-device="desktop"] {
		gap: 28px;
	}

	#header [data-device="desktop"] [data-row="bottom"] {
		margin-top: 28px;
		margin-bottom: 90px; /* keep clear of the fixed copyright */
	}
}

/* portrait images sit side by side instead of stacking full width */
.cajoeri-gallery__row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
}

.cajoeri-gallery__row .cajoeri-gallery__item {
	aspect-ratio: 4 / 5;
	box-sizing: border-box;
	padding: 6%;
}

.cajoeri-gallery__row .cajoeri-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (min-width: 1000px) {
	.cajoeri-gallery__row {
		grid-template-columns: repeat(3, 1fr);
	}
}