/*
Theme Name: Akvart
Theme URI: https://jenga.fi
Description: Akvart-teema käyttää Twenty Twenty One -teemaa pohjana, ja Twenty Twenty One täytyy olla saatavilla sivustolla, jotta tämä teema toimii.
Author: Jenga
Author URI: https://jenga.fi/
Template: twentytwentyone
Version: 1.0
*/

@import url(https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap);

:root {
	--font-base: "Karla";
	--font-headings: "Karla";

	--global--color-background: var(--global--color-white);

	--global--font-size-base: 1.25rem;
	--global--font-size-xs: 1rem;
	--global--font-size-sm: 1.125rem;
	--global--font-size-md: 1.25rem;
	--global--font-size-lg: 1.5rem;
	--global--font-size-xl: 2.25rem;
	--global--font-size-xxl: 4rem;
	--global--font-size-xxxl: 5rem;
	--global--font-size-page-title: var(--global--font-size-xxl);

	--global--letter-spacing: -0.03em;

	--heading--letter-spacing-h6: -0.03em;
	--heading--letter-spacing-h5: -0.03em;
	--heading--letter-spacing-h4: var(--global--letter-spacing);
	--heading--letter-spacing-h3: var(--global--letter-spacing);
	--heading--letter-spacing-h2: -0.06em;
	--heading--letter-spacing-h1: -0.06em;

	--heading--font-weight: 500;
	--heading--font-weight-page-title: 500;
	--heading--font-weight-strong: 700;
	--branding--title--font-weight: 400;
	--primary-nav--font-weight: 400;
	--primary-nav--font-weight-button: 400;
	--pagination--font-weight: 400;
	--pagination--font-weight-strong: 700;
	--quote--font-weight: 300;
	--quote--font-weight-strong: 700;
	--widget--font-weight-title: 700;
	--button--font-weight: 700;
}

@media only screen and (min-width: 652px) {
	:root {
		--global--font-size-xl: 2.5rem;
		--global--font-size-xxl: 6rem;
		--global--font-size-xxxl: 9rem;
		--heading--font-size-h3: 2rem;
		--heading--font-size-h2: 3rem;
	}
}

body {
	letter-spacing: var(--global--letter-spacing);
}

a {
	font-weight: 500;
}

/* Header
----------------------------------------------- */
.site-header {
	row-gap: calc(var(--global--spacing-vertical) / 4);
}
.site-branding {
	margin-top: 0;
}
.site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo {
	position: relative;
	padding-top: 0;
	top: 0;
}
.site-logo {
	margin: 0;
}

.site-logo .custom-logo {
	width: 10rem;
}
@media (min-width: 1000px) {
	.site-logo .custom-logo {
		width: 12rem;
	}
}
.header-details {
	width: 100%;
	display: flex;
	flex-flow: column;
	font-size: 1rem;
	border: solid var(--global--color-primary);
	border-width: 3px 0;
	padding: calc(var(--global--spacing-vertical) / 4) 0;
}
.header-details__content--vasen,
.header-details__content--oikea {
	text-align: center;
}

@media (min-width: 800px) {
	.header-details {
		flex-flow: row wrap;
		justify-content: space-between;
	}
	.header-details__content--vasen {
		text-align: left;
	}
	.header-details__content--oikea {
		text-align: right;
	}
}

/* Tapahtumat
----------------------------------------------- */

.loop-archive-list-element {
	display: grid;
	grid-template-columns: 10rem auto;
	grid-template-rows: auto;
	gap: calc(var(--global--spacing-vertical) / 2)
		var(--global--spacing-horizontal);
	grid-template-areas:
		"Kuva Paivamaara"
		"Kuva Otsikko"
		"Kuva Linkki";
	border-top: 3px solid var(--global--color-primary);
	padding: var(--global--spacing-vertical) 0;
}
.loop-archive-list-element:last-child {
	border-bottom: 3px solid var(--global--color-primary);
}

@media (min-width: 1000px) {
	.loop-archive-list-element {
		display: grid;
		grid-template-columns: 10rem 14rem auto max-content;
		grid-template-rows: 1fr;
		gap: var(--global--spacing-horizontal);
		grid-template-areas: "Kuva Paivamaara Otsikko Linkki";
	}
}
.event-list-element__image {
	grid-area: Kuva;
}
.event-list-element__image img {
	height: auto !important;
}
.event-list-element__time {
	grid-area: Paivamaara;
}
.event-list-element__header {
	grid-area: Otsikko;
}
.event-list-element__link {
	grid-area: Linkki;
}

.no-posts {
	border: solid var(--global--color-primary);
	border-width: 3px 0;
	padding: var(--global--spacing-vertical) 0;
	text-align: center;
	font-style: italic;
}

.widget-area {
	margin-top: calc(2 * var(--global--spacing-vertical));
}
.single .site-main > article > .entry-footer,
.site-main > article > .entry-footer {
	margin-bottom: 0;
	padding-bottom: 0;
}
.page-id-298 .entry-header,
.tax-tapahtumakategoria .page-header {
	padding-bottom: 0;
	border-bottom: none;
}

.tax-tapahtumakategoria .page-header {
	margin-bottom: 0;
}

/* Columns
----------------------------------------------- */

.wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-group {
	position: relative;
	z-index: 3;
}

/* Text sizes
----------------------------------------------- */

:root .is-huge-text,
:root .has-huge-font-size {
	letter-spacing: -0.05em;
}

:root .is-gigantic-text,
:root .has-gigantic-font-size {
	letter-spacing: -0.05em;
}

/* HR
----------------------------------------------- */
hr.wp-block-separator:not(.is-style-dots).alignwide {
	width: 100%;
	max-width: var(--responsive--alignwide-width);
}

/* Gallery
----------------------------------------------- */

.blocks-gallery-grid .blocks-gallery-image figure,
.blocks-gallery-grid .blocks-gallery-item figure,
.wp-block-gallery .blocks-gallery-image figure,
.wp-block-gallery .blocks-gallery-item figure,
.wp-block-gallery.has-nested-images figure.wp-block-image {
	flex-flow: column;
}
.wp-block-gallery .blocks-gallery-image figcaption,
.wp-block-gallery .blocks-gallery-item figcaption,
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	margin: 0;
	color: var(--global--color-black);
	font-size: var(--global--font-size-xs);
}
.blocks-gallery-grid .blocks-gallery-image figcaption,
.blocks-gallery-grid .blocks-gallery-item figcaption,
.wp-block-gallery .blocks-gallery-image figcaption,
.wp-block-gallery .blocks-gallery-item figcaption,
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: relative;
	bottom: auto;
	width: 100%;
	max-height: auto;
	overflow: visible;
	padding: 0.5em 0;
	color: var(--global--color-primary);
	text-align: left;
	font-size: 0.8em;
	background: transparent;
	box-sizing: border-box;
	margin: 0;
}

.wp-block-gallery .blocks-gallery-image figcaption a,
.wp-block-gallery .blocks-gallery-item figcaption a,
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption a {
	color: var(--global--color-primary);
}

.more-link,
.wp-block-post-excerpt__more-text {
	display: block;
	margin-top: var(--global--spacing-vertical);
}

/* Näyttelyarkisto
----------------------------------------------- */

.archive-event-date {
	margin-top: calc(var(--global--spacing-vertical) * 2);
	border-bottom: 3px solid var(--global--color-primary);
	margin-bottom: calc(var(--global--spacing-vertical) / 2);
}
.e-a__element {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-rows: auto auto;
	grid-template-areas: "date title" "date artist";
	grid-column-gap: 1em;
	margin-bottom: calc(var(--global--spacing-vertical) / 2);
}
.e-a__date {
	grid-area: date;
}
.e-a__title {
	grid-area: title;
}
.e-a__artist {
	grid-area: artist;
}

@media (min-width: 1000px) {
	.e-a__element {
		display: grid;
		grid-template-columns: 1fr 2fr 1fr;
		grid-template-rows: auto;
		grid-template-areas: "date title artist";
	}
}

/* Upcoming Exhibition
----------------------------------------------- */
.upcoming-exhibition .e-a__artist {
	font-size: var(--heading--font-size-h4);
	margin-bottom: 0;
}
.upcoming-exhibition h2 {
	margin: 0 !important;
}

.taiteilija-nimi {
	font-size: var(--heading--font-size-h4);
}
.single .taiteilija-nimi {
	margin-bottom: 0;
}

.taiteilija-nimi + .entry-title {
	margin-top: 0 !important;
}