/*
Theme Name: Antirauschen
Theme URI: https://antirauschen.de/
Author: Daniel Berger
Author URI: https://danielberger.net/
Description: A theme for Antirauschen
Tags: blog, one-column
Version: 0.1
License: To Kill
Text Domain: antirauschen
*/

html {
	scroll-behavior: smooth;
	box-sizing: border-box;
}

body {
	background: var(--bg-color);
	color: var(--color-text);
	font-family: var(--sans);
	margin: 0;
}

a {
	color: var(--color-text);
	text-decoration: none;
}

a:hover {
	transition: all .2s;
}

h1, h2, h3, h4 {
	font-weight: normal;
	color: #000;
}

input, button, textarea {
	font-family: var(--sans);
	font-size: .9rem;
	margin: 0;
	padding: 0;
}

textarea {
	resize: vertical;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.site-padding {
	padding: var(--site-padding);
}

/* VARIABLES */

:root {
	--bg-color: #FFF5E7;
	--color-text: #101010;

	--color-1: #FF2149;
	--color-2: #FFC5C5;
	--color-3: #FFF5E7;

	--darkgray: #666;
	--gray: #DDD;
	--lightgray: #EEE;

	--sans: 'Google Sans Flex', sans-serif;
	--serif: 'Newsreader', serif;
	--mono: 'IBM Plex Mono', monospace;

	--font-size: 1.25em;
	--line-height: 1.7em;

	--width-xl: 1000px;
	--width-l: 800px;
	--width: 600px;
	--width-s: 400px;
	--width-xs: 200px;

	--site-padding: 0 4%;
}

/* FONTS */

@font-face {
	font-family: "Newsreader";
	font-style: normal;
	font-weight: 400;
	src: local("Newsreader"),
	url('fonts/newsreader-v26-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
	font-family: "Newsreader";
	font-style: italic;
	font-weight: 400;
	src: local("Newsreader Italic"), 
	local("Newsreader-Italic"),
	url("fonts/newsreader-v26-latin_latin-ext-italic.woff2") format("woff2");
}

@font-face {
	font-family: "Newsreader";
	font-style: bold;
	font-weight: 700;
	src: local("Newsreader Bold"), 
	local("Newsreader-Bold"),
	url("fonts/newsreader-v26-latin_latin-ext-700.woff2") format("woff2");
}

/* DARK MODE */

@media (prefers-color-scheme: dark) {
	:root {
	}
}

/* ERROR */

#error {
	font-size: 2rem;
	line-height: 1.6em;
}

/* HEADER */

#site-header {
	max-width: var(--width-xl);
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 30px auto 80px auto;
}

#site-header a {
	font-family: var(--mono);
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	line-height: 1;
	text-decoration: none;	
}

/* HEADER > LOGO / NAV */

.header-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
}

.header-logo a:hover {
	color: var(--color-1);
}

.header-logo img {
	max-width: 30px;
	height: auto;
	margin: 0 20px 0 0;
}

.header-nav a {
	margin: 0 30px 0 0;
}

.header-nav a:last-child {
	margin: 0;
}

.header-nav a:hover {
	color: var(--color-1);
}

/* BLOG */

#blog {
	max-width: var(--width);
	margin: 0 auto;
	padding: var(--site-padding);
}

.post, 
.page {
	margin: 0 0 60px 0;
	padding: 0 0 40px 0;
}

.post {
	border-bottom: 1px solid var(--color-2);
}

div.post:last-of-type {
	border-bottom: none;
}

.page h1,
.post h1 {
	font-size: 2.4rem;
	line-height: 1.4em;
	margin: 0 0 10px 0;
}

.page h2, 
.post h2 {
	font-family: var(--sans);
	font-size: 1.6rem;
	line-height: 1.4em;
	margin: 0 0 10px 0;
}

.page h2 a, 
.post h2 a {
	color: #000;
}

.page h2 a:hover, 
.post h2 a:hover {
	border-bottom: 2px solid var(--color-2);
}

.page h3, 
.post h3 {
	font-size: 1.5rem;
	line-height: 1.4em;
	margin: 20px 0 0 0;
}

.page h4, 
.post h4 {
	font-size: 1.2rem;
	line-height: 1.4em;
	margin: 40px 0 0 0;
}

.page p, 
.post p {
	font-family: var(--serif);
	font-size: var(--font-size);
	line-height: var(--line-height);
}

.page p.intro, 
.post p.intro {
	width: 90%;
	font-style: italic;
	text-align: center;
	margin: 60px auto 30px auto;
}

.page p.info, 
.post p.info {
	color: var(--color-1);
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.7em;
}

.format-aside p {
	font-size: 1.6rem;
	line-height: 1.6em;
}

.page p a, 
.post p a {
	color: var(--color-1);
	text-decoration: underline;
	text-decoration-color: var(--color-2);
	text-decoration-skip-ink: auto;
	text-underline-offset: .3em;
}

.page p a:hover, 
.post p a:hover {
	color: var(--color-1);
	text-decoration: underline;
	transition: all .4s;
}

.page p strong,
.post p strong {
	font-weight: bold;
}

.page figure, 
.post figure {
	margin: 60px 0;
}

.page figure figcaption, 
.post figure figcaption {
	color: var(--color-1);
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.5em;
	margin: 20px 0 0 0;
}

hr.wp-block-separator {
	color: var(--color-text);
	margin: 40px 0;
	border: none;
}

hr.wp-block-separator:after {
	content: "\00b7\00a0\00a0\00b7\00a0\00a0\00b7\00a0\00a0\00b7";
	width: 100%;
	display: inline-block;
	text-align: center;
	font-weight: bold;
	font-size: 1.8rem;
	line-height: normal;
}

blockquote.wp-block-quote {
	max-width: 80%;
	margin: 0;
	padding: 30px 0 30px 30px;
	border-left: 2px solid var(--color-1);
}

blockquote.wp-block-quote p {
	background: -webkit-linear-gradient(25deg, var(--color-1), var(--color-2) 75%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--color-1);
	font-family: var(--sans);
	margin: 0;
}

.page sup, 
.post sup {
    position: relative;
    bottom: 1ex;
	font-family: var(--mono);
	font-family: 75%;
    vertical-align: baseline;
    padding: 0 0 0 2px;
}

.page ol, 
.post ol {
	margin: 30px 0;
	padding: 0 0 0 0;
}

.page ol li, 
.post ol li {
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.6em;
	margin: 0 15% 15px 15px;
}

.page ul, 
.post ul {
	list-style-type: square;
	margin: 20px 0;
}

.page ul li, 
.post ul li {
	font-family: var(--sans);
	font-size: var(--font-size);
	line-height: var(--line-height);
}

.blog-date {
	color: var(--color-1);
	font-family: var(--mono);
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	margin: 0 0 45px 0;
}

.blog-date a {
	color: var(--color-1);
}

a.more-link {
	color: var(--color-1);
	display: inline-block;
	font-family: var(--mono);
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	margin: 15px 0 30px 0;
}

a.more-link::after {
	content: " →";
}

a.more-link:hover {
	color: var(--color-text);
	transition: .2s;
}

/* BLOG > ENTRY > TAGS */

#nav-tags {
	padding: 40px 0 0 0;
}

#nav-tags a {
	color: var(--color-1);
	font-size: .7rem;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: .1em;
	padding: 7px 14px;
	border: 1px solid var(--color-1);
	border-radius: 15px;
}

#nav-tags a:hover {
	background: var(--color-1);
	color: #FFF;
	transition: all .4s;
}

/* KOMMENTARE */

ol.comments-list {
	margin: 30px 0 60px 0;
	padding: 0;
	list-style-type: none;
}

ol.children {
	margin: 30px 0;
	padding: 0;
	list-style-type: none;
}

ol.comments-list li {
	margin: 0 0 30px 0;
}

ol.children li {
	border-left: 1px solid var(--color-3);
	margin: 30px 0 30px 0;
	padding: 0 0 0 30px;
}

.comment-author {
	color: var(--color-1);
	font-size: 1.1rem;
	margin: 0 0 5px 0;
}

.comment-author img {
	display: none;
}

.comment-author cite {
	font-style: normal;
}

.comment-meta {
	color: var(--color-3);
	font-size: .9rem;
}

.comment-meta a {
	color: var(--color-3);
}

div.reply {
	font-size: .8rem;;
}

form#commentform textarea {
	max-width: 100%;
}

/* FORM */

p.comment-notes, 
p.logged-in-as {
	color: var(--color-3);
	font-size: .9rem;
	line-height: 1.6em;
	margin: 0 0 30px 0;
}

p.comment-form-comment label {
	display: block;
	margin: 0 0 15px 0;
}

p.comment-form-comment textarea {
	width: 100%;
	min-height: 200px;
	border: 1px solid var(--color-3);
	border-radius: 5px;
}

p.comment-form-author label, 
p.comment-form-email label, 
p.comment-form-url label {
	display: block;
	margin: 15px 0 15px 0;
}

p.comment-form-author input, 
p.comment-form-email input, 
p.comment-form-url input {
	border: 1px solid var(--color-3);
	border-radius: 5px;
	padding: 5px;
}

p.comment-form-cookies-consent {
	color: var(--color-3);
	margin: 60px 0 30px 0;
	font-size: .9rem;
	line-height: 1.5em;
}

p.form-submit input {
	background: var(--color-1);
	color: #FFF;
	border: none;
	border-radius: 10px;
	padding: 10px 15px;
}

.required {
	color: var(--color-1);
}

#reply-title a {
	color: var(--color-2);
}

#cancel-comment-reply-link {
	display: block;
}

/* BLOG > ENTRY > NAV */

#nav-entries {
	color: var(--color-1);
	display: flex;
	justify-content: space-between;
	border-top: 1px solid var(--color-1);
	padding: 20px 0 0 0;
}

#nav-entries a {
	color: var(--color-1);
	font-size: .8rem;
}

#nav-entries a:hover {
	text-decoration: underline;
}

/* ARCHIV */

.archive-search {
	display: flex;
	gap: 0.5rem;
	margin: 0 0 60px 0;
	padding: 0 0 40px 0;
	border-bottom: 1px solid var(--color-2);
}

.archive-search input[type="search"] {
	width: 260px;
	padding: 0.5rem;
	border: 1px solid var(--color-2);
	border-radius: 5px;
}

.archive-search button {
	padding: 0.5rem 1rem;
	border: 1px solid var(--color-1);
	background: var(--color-1);
	color: #FFF;
	border-radius: 5px;
	cursor: pointer;
}

/* ARCHIVE > TAGS */

.archive-tags {
	font-size: .9rem;
	line-height: 1.9em;
	margin: 0 0 60px 0;
	padding: 0 0 60px 0;
	border-bottom: 1px solid var(--color-2);
}

.archive-tags a {
	color: var(--color-1);
}

.archive-tags a:after {
	color: var(--color-2);
	content: ' • ';
}

.archive-tags a:hover {
	color: var(--color-2);
}

/* ARCHIVE > ENTRIES */

ul.page-archive {
	list-style-type: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--color-2);
}

ul.page-archive li a {
	color: var(--color-1);
	font-size: .9rem;
	display: block;
	padding: 20px 0;
	text-decoration: none;
	border-bottom: 1px solid var(--color-2);
}

ul.page-archive li a:hover {
	color: var(--color-2);
	transition: all .4s;
}

.archive-date {
	font-family: var(--mono);
	font-size: 90%;
	margin: 0 30px 0 0;
}

/* PAGINATION */

nav#blog-bottom {
	display: flex;
	justify-content: space-between;
	font-family: var(--mono);
	font-size: .9rem;
	line-height: 2em;
	text-transform: uppercase;
	letter-spacing: .1em;
}

nav#blog-bottom a {
	display: inline-block;
	padding: 0 0 2px 0;
}

nav#blog-bottom a:hover {
	color: var(--color-2);
}

/* FOOTER */

#site-footer {
	background: var(--color-2);
	background: linear-gradient(180deg, var(--color-2) 10%, var(--bg-color) 60%);
	color: var(--color-1);
	margin: 90px 0 0 0;
	padding: 90px 0;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	column-gap: 60px;
	row-gap: 30px;
	
	max-width: var(--width-xl);
	margin: 0 auto;
	padding: var(--site-padding);
	
	font-family: var(--mono);
	font-size: .7rem;
	text-transform: uppercase;
	line-height: 2.4em;
	letter-spacing: .1em;
}

.footer-grid div h2 {
	color: var(--color-1);
	font-size: .7rem;
	font-weight: bold;
	margin: 0;
}

.footer-grid div a {
	color: var(--color-1);
	display: block;
}

.footer-grid div a:hover {
	color: var(--color-text);
}

@media (max-width: 430px) {
	.footer-grid {
		grid-template-columns: 1fr;
	}
}