/*
Theme Name: André Bratten
Theme URI: https://andrebratten.com
Author: André Bratten
Description: Oxblood ground, Cyan blue, plain tabs, and a mountain that moves to the music.
Version: 1.2.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: andrebratten
*/

/* The whole page: an oxblood ground holding one black window under a row of tabs. */
:root {
	--ab-ground: var(--wp--preset--color--ground, #3d0a06);
	--ab-window: var(--wp--preset--color--window, #000000);
	--ab-bone: var(--wp--preset--color--bone, #efe6d2);
	--ab-sand: var(--wp--preset--color--sand, #e3d6bd);
	--ab-dust: var(--wp--preset--color--dust, #b9ab92);
	--ab-blue: var(--wp--preset--color--blue, #5784c8);
	--ab-deep-blue: var(--wp--preset--color--deep-blue, #2e5c9e);
	--ab-gutter: clamp(16px, 5vw, 64px);
}

html { background: var(--ab-ground); }

body {
	margin: 0;
	font-kerning: normal;
	font-synthesis: none;
	font-variant-numeric: oldstyle-nums;
}

.wp-site-blocks {
	box-sizing: border-box;
	max-width: calc(1088px + 32px);
	margin-inline: auto;
	padding-block: clamp(24px, 3.4vw, 48px) 64px;
	padding-left: max(16px, env(safe-area-inset-left, 0px));
	padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.wp-site-blocks > * { margin-block: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid var(--ab-bone);
	outline-offset: 3px;
}

/* Only for people using a screen reader: the lit tab already says which page this is. */
.ab-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- The name, the peaks and the line under them ---------- */
.ab-masthead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 24px;
	margin-bottom: 24px;
}

.ab-name {
	margin: 0;
	font-size: clamp(28px, 6vw, 34px);
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.ab-name a {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	color: inherit;
	text-decoration: none;
}

.ab-name a:hover { color: var(--ab-blue); }

.ab-name a::before {
	content: "";
	display: block;
	flex: none;
	height: clamp(30px, 6.6vw, 40px);
	aspect-ratio: 244 / 111;
	background: var(--ab-blue);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 3 244 111'%3E%3Cpath d='M7.20 110.40L80.20 7.10L153.25 110.40M96.95 110.40L170.00 7.10L243.00 110.40M7.20 110.40L243.00 110.40' fill='none' stroke='%23000' stroke-width='6.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 3 244 111'%3E%3Cpath d='M7.20 110.40L80.20 7.10L153.25 110.40M96.95 110.40L170.00 7.10L243.00 110.40M7.20 110.40L243.00 110.40' fill='none' stroke='%23000' stroke-width='6.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ab-role {
	margin: 0;
	color: var(--ab-sand);
	font-style: italic;
}

/* ---------- Tabs ---------- */
.ab-tabs.wp-block-navigation { display: block; margin: 0; font-size: 17px; }

.ab-tabs .wp-block-navigation__container {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	width: 100%;
	justify-content: stretch;
}

.ab-tabs .wp-block-navigation-item { flex: 1 1 auto; margin: 0; }

.ab-tabs .wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 0 16px;
	color: var(--ab-bone);
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	background: transparent;
	clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
}

.ab-tabs .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	background: var(--ab-deep-blue);
}

/* The lit tab belongs to the black window, and stays black. */
.ab-tabs .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.ab-tabs .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	background: var(--ab-window);
}

.ab-tabs .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
	background: var(--ab-window);
	outline: 2px solid var(--ab-bone);
	outline-offset: -7px;
}

@media (max-width: 600px) {
	.ab-tabs.wp-block-navigation { font-size: 16px; }
	.ab-tabs .wp-block-navigation-item__content.wp-block-navigation-item__content { padding: 0 11px; }
}

/* ---------- The black window ---------- */
.ab-window {
	position: relative;
	min-height: clamp(320px, 50vh, 640px);
	margin: 0;
	background: var(--ab-window);
}

.ab-page { padding: 48px var(--ab-gutter) 64px; }
.ab-page > * + * { margin-block-start: 24px; }
.ab-page p,
.ab-page ul,
.ab-page ol { max-width: 38em; }

/* What a tab says until there is something to show. */
.ab-waiting {
	margin: 0;
	font-size: var(--wp--preset--font-size--large, 24px);
	line-height: 1.35;
}

/* ---------- Pages with a wall of covers or photos ---------- */
.ab-wall-title { margin: 56px 0 0; }
.ab-wall-title:first-child { margin-top: 0; }

.wp-block-gallery.has-nested-images.ab-wall {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(200px, 44%), 1fr));
	gap: 32px;
	margin: 24px 0 0;
}

.wp-block-gallery.has-nested-images.ab-wall:first-child { margin-top: 0; }

.wp-block-gallery.has-nested-images.ab-wall figure.wp-block-image {
	display: block;
	flex: none;
	width: 100% !important;
	margin: 0 !important;
}

.wp-block-gallery.has-nested-images.ab-wall figure.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	flex: none;
}

.wp-block-gallery.has-nested-images.ab-wall figure.wp-block-image figcaption {
	position: static;
	display: block;
	box-sizing: border-box;
	max-height: none;
	margin: 0;
	padding: 12px 0 0;
	overflow: visible;
	color: var(--ab-dust);
	font-size: 16px;
	line-height: 1.45;
	text-align: left;
	text-shadow: none;
	background: none;
	flex: none;
}

.wp-block-gallery.has-nested-images.ab-wall figure.wp-block-image figcaption em {
	display: inline-block;
	margin-bottom: 4px;
	color: var(--ab-bone);
	font-size: 20px;
	line-height: 1.3;
}

/* ---------- Small Landscapes ---------- */
.ab-studio.wp-block-columns { gap: 40px 64px; align-items: center; }
.ab-studio .wp-block-image { max-width: 300px; margin: 0; }
.ab-studio .wp-block-image img { display: block; width: 100%; height: auto; }
.ab-studio p + p { margin-top: 16px; }

/* ---------- Thoughts ---------- */
.ab-entries { list-style: none; margin: 0; padding: 0; }
.ab-entries > li { margin: 0; }
.ab-entries > li + li { margin-top: 40px; }
.ab-entries .wp-block-post-date { color: var(--ab-dust); font-size: 16px; }
.ab-entries .wp-block-post-title { margin: 0; font-size: 24px; line-height: 1.35; font-weight: 400; }
.ab-entries .wp-block-post-title a { color: inherit; text-decoration: none; }
.ab-entries .wp-block-post-title a:hover { color: var(--ab-blue); }
.ab-entries .wp-block-post-excerpt { margin-top: 8px; }
.ab-entries .wp-block-post-excerpt__excerpt { margin: 0; max-width: 38em; }

.ab-thought .wp-block-post-date { color: var(--ab-dust); font-size: 16px; }
.ab-thought .wp-block-post-title { margin: 0; max-width: 20em; }

.ab-pager { margin-top: 48px; gap: 24px; }

/* ---------- Front page ---------- */
.ab-scene {
	position: relative;
	aspect-ratio: 544 / 340;
	background: var(--ab-window);
}

.ab-scene img,
.ab-scene canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	image-rendering: pixelated;
}

.ab-scene canvas[hidden] { display: none; }

/* Sliders and buttons are drawn here rather than left to the browser, so they belong to the page. */
.ab-player {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 8px 24px;
	align-items: center;
	padding: 8px var(--ab-gutter) 32px;
}

.ab-play {
	min-width: 104px;
	min-height: 44px;
	padding: 0 20px;
	border: 0;
	color: var(--ab-bone);
	font: inherit;
	font-size: 17px;
	cursor: pointer;
	background: var(--ab-window);
	clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
}

.ab-play:hover { background: var(--ab-deep-blue); }

.ab-play:focus-visible {
	background: var(--ab-deep-blue);
	outline: 2px solid var(--ab-bone);
	outline-offset: -7px;
}

.ab-track { display: flex; flex-direction: column; min-width: 0; }

.ab-line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0 16px;
}

.ab-title { font-size: 24px; font-style: italic; line-height: 1.25; }
.ab-time { color: var(--ab-dust); font-size: 16px; font-variant-numeric: oldstyle-nums tabular-nums; }

.ab-player input[type="range"] {
	--ab-fill: 0%;
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 32px;
	margin: 0;
	background: transparent;
	cursor: pointer;
}

.ab-player input[type="range"]::-webkit-slider-runnable-track {
	height: 2px;
	background: linear-gradient(to right, var(--ab-blue) var(--ab-fill), var(--ab-dust) var(--ab-fill));
}

.ab-player input[type="range"]::-moz-range-track {
	height: 2px;
	background: linear-gradient(to right, var(--ab-blue) var(--ab-fill), var(--ab-dust) var(--ab-fill));
}

.ab-player input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 10px;
	height: 20px;
	margin-top: -9px;
	border: 0;
	border-radius: 0;
	background: var(--ab-blue);
}

.ab-player input[type="range"]::-moz-range-thumb {
	width: 10px;
	height: 20px;
	border: 0;
	border-radius: 0;
	background: var(--ab-blue);
}

.ab-move {
	grid-column: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 16px;
	color: var(--ab-dust);
	font-size: 16px;
}

.ab-move label { flex: none; }
.ab-move input[type="range"] { flex: 1 1 180px; min-width: 0; width: auto; max-width: 320px; }

.ab-tracklist {
	grid-column: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.ab-tracklist button {
	min-height: 44px;
	padding: 0;
	border: 0;
	color: var(--ab-blue);
	font: inherit;
	font-style: italic;
	text-align: left;
	text-decoration: underline;
	cursor: pointer;
	background: none;
}

.ab-tracklist button:hover,
.ab-tracklist button[aria-current="true"] { color: var(--ab-bone); }
.ab-tracklist button[aria-current="true"] { text-decoration: none; }

@media (max-width: 600px) {
	.ab-player { grid-template-columns: minmax(0, 1fr); }
	.ab-play { justify-self: start; }
	.ab-move,
	.ab-tracklist { grid-column: 1; }
}

/* The music on the front page is picked up by the player above, so it is only shown if the player cannot start. */
.ab-has-player .ab-home .wp-block-audio { display: none; }

.ab-home { padding: 8px var(--ab-gutter) 56px; }
.ab-home > * + * { margin-block-start: 24px; }

.ab-home .wp-block-columns { gap: 32px 64px; margin: 0; }
.ab-home .wp-block-column > * + * { margin-block-start: 12px; }
.ab-home p.has-large-font-size { margin: 0; max-width: 18em; line-height: 1.35; text-wrap: pretty; }
.ab-home p { margin: 0; }

/* The list of recent work: the year on the left, the work on the right. */
.ab-recent.wp-block-table { margin: 0; }
.ab-recent.wp-block-table table { border-collapse: collapse; width: auto; }

.ab-recent.wp-block-table td {
	padding: 0 0 12px;
	border: 0;
	color: var(--ab-dust);
	font-size: 16px;
	line-height: 1.45;
	vertical-align: top;
}

.ab-recent.wp-block-table td:first-child {
	width: 3em;
	padding-right: 8px;
	font-size: 18px;
	line-height: 1.55;
	font-variant-numeric: oldstyle-nums tabular-nums;
}

.ab-recent.wp-block-table em { color: var(--ab-bone); font-size: 18px; line-height: 1.55; }
.ab-recent.wp-block-table a { color: inherit; text-decoration: none; }
.ab-recent.wp-block-table a:hover em { color: var(--ab-blue); }

/* The audio player in the page editor, on the dark ground. */
.wp-block-audio figcaption { color: var(--ab-dust); }

/* A list that follows one of the tab's words, as on Film music. */
.ab-waiting + .ab-recent.wp-block-table { margin-top: 24px; }

/* A plain list of addresses, as on Links. */
.ab-page .ab-linklist { margin: 24px 0 0; padding: 0; list-style: none; }
.ab-page .ab-linklist li { padding: 4px 0; }
.ab-page .ab-linklist:first-child { margin-top: 0; }