@charset "UTF-8";

/**
 * Theme Name:   c2021
 * Template:     twentytwentyone
 * Author:       Caspar Hübinger
 * Author URI:   https://caspar.blog/
 * Description:  Custom child theme for Twenty Twentyone
 * Requires PHP: 7.1
 * Version:      1.3.0
 * License:      GNU General Public License v2 or later
 * License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
 * Twenty Twenty-One is distributed under the terms of the GNU GPL.
 */

:root {
	--branding--logo--max-height: 48px;
	--branding--logo--max-width: 48px;
	--global--border-radius: 3px;
}

/* Reset parent theme styles */
.site .custom-logo-link:focus,
.site article .Title__label_link:focus {
    background: inherit !important;
    color: inherit !important;
}

/* Body */
body.custom-background {
	background-color: #fff;
	background-image: linear-gradient(0deg,rgba(0,0,0,.1) 0%,rgba(255,255,255,0) 2em),linear-gradient(-12deg, var(--global--color-purple) 0%, var(--global--color-green) 33%, var(--global--color-yellow) 66%);
	background-repeat: no-repeat;
	background-size: 100% 4em;
}
@media only screen and (min-width: 782px) {
	body.custom-background {
		background-size: 100% 11em;
	}
}

/* Logo */
.site-logo .custom-logo {
	background: #fff;
	border: 2px solid #fff;
	border-radius: 200em;
	box-shadow: 0 0 var(--global--spacing-unit) rgba(0,0,0,.1);
}
.custom-logo {
	-webkit-transition: transform .3s linear;
	   -moz-transition: transform .3s linear;
			transition: transform .3s linear;
}
.custom-logo-link:hover .custom-logo,
.custom-logo-link:focus .custom-logo {
	-webkit-transform: rotate(180deg);
	   -moz-transform: rotate(180deg);
	        transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.custom-logo-link:hover .custom-logo,
	.custom-logo-link:focus .custom-logo {
		-webkit-transform: none !important;
		   -moz-transform: none !important;
		        transform: none !important;
	}
}

/* Navigation */
.primary-navigation .primary-menu-container {
	background: #fff;
	border-radius: var(--global--border-radius);
	box-shadow: 0 0 var(--global--spacing-unit) rgba(0,0,0,.1);
}

/* Title label */
article .Title__label_link {
	display: block;
}
article .Title__label {
	display: block;
	font-size: 1rem;
	line-height: 1.5;
	margin-bottom: .5em;
}
article .Title__icon {
	margin-right: .5em;
}
article .Title__prefix {
	background: var(--button--color-background);
	border-radius: var(--global--border-radius);
	color: var(--global--color-background);
	display: inline-block;
	padding: 0 .5em .1em;
}
/* article .Title_text {} */

/* Comments */
.comment-list [class*="depth-"] {
	padding-left: 0;
}
.comment > .comment-body {
	background: var(--global--color-light-gray);
	border-radius: var(--global--border-radius) 0 var(--global--border-radius) var(--global--border-radius);
	margin-right: var(--global--spacing-horizontal);
	padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
}
.comment > .comment-body:before {
	border-style: solid;
	border-width: var(--global--spacing-horizontal) var(--global--spacing-horizontal) 0 0;
	border-color: var(--global--color-light-gray) transparent transparent transparent;
	content: '';
	height: 0;
	left: auto;
	position: absolute;
	right: calc(var(--global--spacing-horizontal) *-1);
	top: 0;
	width: 0;
}
.comment > .comment-body > .comment-meta {
	margin-top: calc(-0.5 * var(--global--spacing-unit));
}
.comment.bypostauthor > .comment-body {
	background: var(--button--color-background);
	border-radius: 0 var(--global--border-radius) var(--global--border-radius) var(--global--border-radius);
	color: var(--global--color-background);
	margin-left: var(--global--spacing-horizontal);
	margin-right: auto;
}
.comment.bypostauthor > .comment-body:before {
	border-width: 0 var(--global--spacing-horizontal) var(--global--spacing-horizontal) 0;
	border-color: transparent var(--button--color-background) transparent transparent;
	left: calc(var(--global--spacing-horizontal) *-1);
	right: auto;
}
.comment.bypostauthor > .comment-body * {
	color: var(--global--color-background);
}
.comment.bypostauthor > .comment-body > .comment-meta {
	margin-top: 0;
}
.comment.bypostauthor > .comment-body > .comment-meta .comment-author {
	margin-top: calc(var(--global--spacing-vertical) *-0.5);
}
.comment-author .fn span[aria-hidden="true"] {
	text-shadow: 0 0 1rem rgba(0,0,0,.6);
}
@media only screen and (min-width: 782px) {
	.comment:not(.bypostauthor) > .comment-body {
		margin-right: calc(4 * var(--global--spacing-horizontal));
	}
	.comment.bypostauthor > .comment-body {
		margin-left: calc(4 * var(--global--spacing-horizontal));
	}
}

/* Media cards */
.wp-block-image img,
.post-thumbnail img,
.wp-block-video video,
.wp-block-embed.is-type-video {
	box-shadow: 0 0 var(--global--spacing-unit) rgba(0,0,0,.1);
}
figcaption,
.wp-caption,
.wp-caption-text,
.wp-block-embed figcaption {
	padding-bottom: var(--global--spacing-unit);
}
/* Hack: WP Rocket is set to fetch a 16:9 preview image from YouTube, so we need to nudge .wp-embed-aspect-4-3 into place. */
.wp-embed-responsive .is-provider-youtube.wp-embed-aspect-4-3 .wp-block-embed__wrapper:before {
    padding-top: 56%;
}