/*
Theme Name: Master Design Research Blog
Theme URI: https://codeberg.org/vasilis/research-blog
Description: A minimal but fully functional, focused research blog for students at the Master Design at the Piet Swarte Institute.
Version: 0.1
Author: Vasilis van Gemert
Author URI: http://vasilis.nl/

*/

:root {
	--prefered-font-family: '';
	--fallback-font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif; 
	/* Make left or right white space larger of smaller */
	--page-grid: 1em 1fr 2fr auto 1em auto 1fr 1fr 1em;
	--gap: 1em;
	--lines: silver;
	--block-whitespace: 11.1111;
	--form-border: gray;
	--mandatory: '☞ ';
	
	--background-color: white;
	--font-color: hsl(0 100% 0%);
	--hover-color: hsl(0 100% 40%);
}

body {
	font-family: var(--prefered-font-family), var(--fallback-font-family);
	font-size: 1.2em;
	display: grid;
	grid-template-columns: var(--page-grid);
	margin: 0;
	color: var(--font-color);
}

header,
body > footer {
	grid-column-start: 2;
	grid-column-end: -2;
}
header {
	border-block-end: 1px solid var(--lines);
	margin-block-end: calc( var(--block-whitespace) * 1vh);
}

main {
	grid-column-start: 4;
	grid-column-end: -4;
	max-width: 40em;
}


@supports (grid-template-columns: subgrid) {
	main {
		grid-column-start: 1;
		grid-column-end: -1;
		display: grid;
		grid-template-columns: subgrid;
	}
	main > * {
		max-width: 40em;
		grid-column-start: 4;
		grid-column-end: -4;
	}
	main > figure.size-full {
		grid-column-start: 1;
		grid-column-end: -1;
		max-width: 100vw;
	}
	figure.size-full figcaption {
		margin-inline: 1em;
	}
	main > figure.size-large {
		grid-column-start: 3;
		grid-column-end: -3;
		max-width: 100vw;
	}
	main > figure.wp-block-gallery {
		display: grid;
		max-width: 100vw;
		gap: var(--gap);
	}
	main > figure.wp-block-gallery:has(figure:nth-child(2):last-child){
		grid-column-start: 3;
		grid-column-end: -3;
		grid-template-columns: 1fr 1fr;
	}
	main > figure.wp-block-gallery:has(figure:nth-child(3):last-child){
		grid-column-start: 2;
		grid-column-end: -2;
		grid-template-columns: 1fr 1fr 1fr;
	}
	main > figure.wp-block-gallery:has(figure:nth-child(4):last-child){
		grid-column-start: 1;
		grid-column-end: -1;
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	main > figure.wp-block-gallery:has(figure:nth-child(5):last-child),
	main > figure.wp-block-gallery:has(figure:nth-child(6):last-child){
		grid-column-start: 3;
		grid-column-end: -3;
		grid-template-columns: repeat(6, 1fr);
	}
	main > figure.wp-block-gallery:has(figure:nth-child(5):last-child) figure {
		grid-column: span 2;
	}
	main > figure.wp-block-gallery:has(figure:nth-child(5):last-child) figure:nth-child(1n + 4) {
		grid-column: span 3;
	}
	
	header,
	body > footer {
		grid-column-start: 1;
		grid-column-end: -1;
		display: grid;
		grid-template-columns: subgrid;
	}
	header > * {
		grid-column-start: 2;
		grid-column-end: -2;
	}
	body > footer > nav,
	body > footer > p {
		grid-column-start: 3;
		grid-column-end: 5;
	}
	body > footer > section {
		grid-column-start: -5;
		grid-column-end: -3;
		margin-block-start: 0;
	}
	@media (max-width: 40em) {
		body > footer > section,
		body > footer > nav,
		body > footer > p {
			grid-column-start: 3;
			grid-column-end: -3;
		}
		body > footer > section {
			margin-block-start: 1em;
		}
	}
}


/* Base styles */

a:hover,
a:focus-visible{
	color: var(--hover-color);
}
a:focus-visible{
	color: var(--background-color);
	background-color: var(--hover-color);
	outline: 1px solid var(--hover-border);
}
h1 a, h2 a, header p a {
	color: inherit;
	text-decoration: none;
}

/* Hierarchy */

h1 {
	font-size: 2.82em;
	font-size: clamp(2em, 13vw, 2.82em);
	line-height: 1;
}
h2,
legend {
	font-size: 1.99em;
	font-size: clamp(1.414em, 9vw, 1.99em);
	font-weight: bold;
	line-height: 1.2;
}
h3 {
	font-size: 1.414;
	font-size: clamp(1em, 6vw, 1.414em);
}
h4 {
	font-size: 1em;
	font-weight: bold;
}
h5 {
	font-size: 1em;
	font-weight: bold;
	font-style: italic;
}
h6 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
}
header h1:has( + p) {
	margin-block-end: 0;
}
header h1 + p {
	margin: 0 0 2em;
}
header p + h1 {
	margin-block: 0 1em;
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
}

:where(h1, h2, h3, h4, h5, h6) + p {
	margin-block-start: 0;
}
:where(h1, h2, h3, h4):has( + p) {
	margin-block-end: .5em;
}
:where(h5, h6):has( + p) {
	margin-block-end: 0.25em;
}


h1 a:hover,
h2 a:hover,
h1 a:focus-visible,
h2 a:focus-visible,
header p a:hover,
header p a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: .05em;
}

article {
	position: relative;
}
.blog-list h2 a::after {
	content: '';
	position: absolute;
	left: -.5em;
	right: -.5em;
	top: .5em;
	bottom: 0;
	opacity: 0;
	transition: .3s;
}
.blog-list h2 a:hover::after {
	background: var(--hover-color);
	opacity: .2;
}




figure {
	margin-inline: 0;
}
figure.size-thumbnail {
	max-width: max-content;
}
figure.size-thumbnail + p {
	float: left;
}
figcaption {
	max-width: 40em;
}

figure img {
	width: 100%;
	height: auto;
}

table {
	border: 1px solid var(--lines);
	border-collapse: collapse;
}
td, th {
	border: 1px solid var(--lines);
	padding: .2em;
}
th {
	text-align: start;
}
.has-text-align-right:where(td,th) {
	text-align: end;
}
table + figcaption {
	font-style: italic;
	font-size: .9em;
	padding: .2rem;
}

main > ul,
main > ol {
	margin-inline: 0;
	padding-inline: 0;
}
main > blockquote {
	margin-inline-start: -1em;
	border-left: .2em solid var(--lines);
	padding: .5em 0 .5em .8em;
}
main > blockquote p {
	margin-block-start: 0;
}
blockquote cite::before {
	content: '— ';
}



/* Posts */
.details {
	display: flex;
	flex-direction: column;
	gap: .23em;
	margin-block: calc( var(--block-whitespace) * .5vh);
	border-block-start: 1px solid var(--lines);
	padding-block: 1em;
}
.details::before {
	content: '☞ ';
	position: absolute;
	margin-inline-start: -1.2em;
}
.details p {
	margin: 0;
}
.categories-tags a {
	text-transform: lowercase;
}
.categories-tags a[rel="tag"] {
	text-decoration-style: dotted;
}
.categories-tags a::after {
	content: ',';
}
.categories-tags a:last-of-type::after {
	content: '.'
}


.prevnext {
	margin-block: calc( var(--block-whitespace) * 1vh);
	display: flex;
	flex-direction: column;
}


body > footer {
	margin-block: calc( var(--block-whitespace) * 1vh);
	border-block-start: 1px solid var(--lines);
	padding-block: 1em;
}

[id="tags"] ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: .25em;
}
body > footer h2 {
	font-size: 1.414em;
	margin: 0;
}

/* Categories */
#categories ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#categories li {
	margin: 0;
	padding: 0;
}
#categories p {
	margin-block-start: 0;
	max-width: 20em;
	font-size: .9em;
}
#categories .sub {
	margin-inline-start: 2em;
	margin-block-start: -.5em;
}


/* Comments */
.comments {
	list-style-type: none;
}
.comments footer {
	margin-block-end: 0;
	padding-block-end: 0;
	font-style: italic;
}
.comments footer p {
	margin-block-end: 0;
}

#comments {
	margin-block-start: calc( var(--block-whitespace) * 1vh);
	border-block-start: 1px solid var(--lines);
	padding-block-start: 1em;
}

form {
	margin-block-start: calc( var(--block-whitespace) * 1vh);
	border-block-start: 1px solid var(--lines);
	padding-block-start: 1em;
}
fieldset {
	border: none;
	display: flex;
	flex-direction: column;
	gap: .5em;
}

label:has(input) {
	align-self: start;
}

.mandatory::before {
	content: var(--mandatory);
	position: absolute;
	margin-inline-start: -1.4em;
	margin-block-start: 1.7em;
}
.mandatory:has(:user-valid)::before {
	color: green;
}

input {
	display: block;
	font: inherit;
	border: 1px solid var(--form-border);
	padding: .4em;
}

textarea {
	display: block;
	font: inherit;
	width: 100%;
	max-width: 30em;
	height: 8em;
	padding: .6em;
	border: 1px solid var(--form-border);
}