@charset "UTF-8";

/*
Theme Name: Thunderblog
Theme URI: https://blog.thunderbird.net
Author: Andreas Müller
Author URI: https://devmount.de
Description: Thunderblog is a simple, responsive, mobile-first Wordpress theme for the blog of the Thunderbird email client.
Requires at least: 5.8
Tested up to: 6.0
Requires PHP: 7.4
Version: 1.0.21
License: MIT
License URI: ./LICENSE
Text Domain: thunderblog
Tags: one-column, accessibility-ready, custom-menu, featured-images, footer-widgets, threaded-comments, translation-ready
*/

/* general */
:root {
	--c:                     #000000;
	--c-background:          #ffffff;
	--c-primary:             #0080ff;
	--c-primary-accent:      #005ce3;
	--c-primary-low:         #1c2f56;
	--c-primary-low-accent:  #233e74;
	--c-primary-low-accent2: #233e74;
	--c-primary-high:        #93abdc;
	--c-primary-high-t01:    transparent;
	--c-love:                #f23d5c;
	--c-love-accent:         #b92f51;
	--c-neutral:             #45454b;
	--c-neutral-accent:      #34343a;
	--c-neutral-accent2:     #34343a;
	--c-neutral-high:        #ececf7;
	--c-neutral-high-accent: #cacad8;
	--c-mail:                #64748b;
	--c-mastodon:            #6364ff;
	--c-bluesky:             #2198ff;
	--c-whatsapp:            #0a4e47;
	--c-telegram:            #1da1de;
	--c-linkedin:            #0a66c2;
	--c-facebook:            #1877f2;
	--c-reddit:              #cc3700;
	--c-featured-link:       #ececf7;  /* Featured posts are on a dark blue bg, this should be bright! */
	--content-width:         1080px;
	--featured-height:       450px;
	--border-radius:         3px;

	--form-background-color:       #ffffff;
	--form-border-color:           #cacad8;
	--form-border-color-focused:   #34343a;
	--form-text-color:             #000000;
}
@media (prefers-color-scheme: dark) {
	:root {
		--c:                     #ffffff;
		--c-background:          #17243e;
		--c-neutral-accent2:     #ececf7;
		--c-primary-low-accent2: #93abdc;
		--c-primary-high-t01:    rgba(147, 171, 220, 0.1);

		--form-background-color:       #0b1222;
		--form-border-color:           #1c2f56;
		--form-border-color-focused:   #93abdc;
		--form-text-color:             #ffffff;
	}
}

html, body:not(.wp-admin) {
	background: var(--c-background);
	color: var(--c);
	font-family: 'Open Sans', X-LocaleSpecific, sans-serif;
	font-size: 15px;
	letter-spacing: 0.025em;
	line-height: 1.5;
	margin: 0;
	padding: 0;
}

/* elements */
h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}
h1 {
	font-size: 3rem;
	font-weight: 200;
	margin: .25rem 0;
}
h2 {
	font-size: 2rem;
	font-weight: 400;
	margin: .5rem 0;
}
h3 {
	font-size: 1.5rem;
	font-weight: 400;
	margin: .5rem 0;
}
h4 {
	font-size: 1rem;
	font-weight: 600;
}

hr {
	height: 1px;
	border: none;
	background: var(--c-neutral-accent);
}
p {
	text-wrap: pretty;
}

a {
	color: var(--c-neutral-accent2);
	transition: all .1s ease-in-out;
}
a:hover {
	color: var(--c-primary-accent);
}

input,
textarea {
	background-color: var(--form-background-color);
	border: 2px solid var(--form-border-color);
	border-radius: 3px;
	color: var(--form-text-color);
	padding: .25rem 1rem;
	font-size: 1rem;
	transition: background .2s, border .2s, box-shadow .2s, color .2s, -webkit-box-shadow .2s;
}
input[type=text] {
	min-height: 2rem;
}
input:hover,
textarea:hover {
	box-shadow: 0 0 0 2px var(--form-border-color-focused);
}
input:focus,
textarea:focus {
	box-shadow: 0 0 0 2px var(--form-border-color-focused);
	outline: none;
}
.btn,
.wp-block-button>a {
	border-radius: var(--border-radius);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.1);
	font-weight: 600;
	padding: .75rem 1.25rem !important;
	text-decoration: none;
	text-transform: uppercase;
	display: inline-block;
	border: none;
	cursor: pointer;
}
.btn.btn-primary,
.wp-block-button.primary>a {
	background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-accent) 100%);
	color: white;
}
.btn.btn-love,
.wp-block-button.love>a {
	background: linear-gradient(135deg, #f23d5c 0%, #b92f51 100%);
	color: white;
}
.btn.btn-neutral,
.wp-block-button.neutral>a {
	background: linear-gradient(135deg, var(--c-neutral) 0%, var(--c-neutral-accent) 100%);
	color: white;
}
.btn.btn-neutral-light,
.wp-block-button.neutral-light>a {
	color: black;
	background: linear-gradient(135deg, var(--c-neutral-high) 0%, var(--c-neutral-high-accent) 100%);
}
.btn.btn-link {
	padding: .25rem 0 !important;
	color: var(--c-neutral-accent2);
	text-transform: initial;
	box-shadow: none;
	text-decoration: underline;
}
.btn.btn-icon {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.btn.btn-flat {
	box-shadow: none;
}
.post-categories {
	margin: 0;
	padding: 0;
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
}
.category,
.tag,
.post-categories > li {
	border-radius: var(--border-radius);
	display: inline-flex;
	align-items: center;
	font-size: .85rem;
	font-weight: 600;
	padding: 0 .25rem;
	text-transform: uppercase;
}
.icon {
	stroke: white;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	width: 24px;
	height: 24px;
	transition: stroke .1s ease-in-out;
}
.icon.icon-s {
	width: 16px;
	height: 16px;
}
.icon.icon-m {
	width: 32px;
	height: 32px;
}
.emoji {
	display: inline;
	height: 1em !important;
	width: 1em !important;
	margin: 0 0.07em;
	vertical-align: -0.1em;
	background: none;
}
.wp-block-table.is-style-stripes table tbody tr:nth-child(odd) {
	background-color: rgba(147, 171, 220, 0.1);
}

/* global page elements */
header {
	align-items: center;
	background: var(--c-primary-low);
	box-shadow: 0 10px 15px 0 rgba(0,0,0,0.3);
	color: white;
	display: flex;
	gap: 2rem;
	height: 72px;
	padding: 0 1rem;
	position: sticky;
	top: 0;
	z-index: 50;
}
header .logo,
header .custom-logo-link {
	display: flex;
	margin-right: 1rem;
}
header .logo img,
header .custom-logo-link img {
	flex-grow: 0;
	height: 48px;
	width: auto;
}
header .custom-logo-link {
	display: inline-flex;
}
header nav ul {
	display: flex;
	gap: 1.5rem;
	list-style-type: none;
	margin: 0;
	padding: 0;
	align-items: center;
}
header nav ul li a {
	color: inherit;
	text-decoration: none;
}
header .actions {
	display: flex;
	gap: .5rem;
}
header .mobile-menu {
	display: flex;
	cursor: pointer;
}
header .mobile-menu .icon {
	width: 36px;
	height: 36px;
}
header .mobile-menu .icon.open,
header .mobile-menu.active .icon.close {
	display: initial;
}
header .mobile-menu.active .icon.open,
header .mobile-menu .icon.close {
	display: none;
}
main {
	min-height: 40vh;
}
footer {
	background: black;
	color: white;
	margin-top: 5rem;
	padding: 3rem 2rem 5rem 2rem;
	display: flex;
  flex-direction: column;
  gap: 2rem;
}
footer .logo,
footer .custom-logo-link {
	align-self: center;
}
footer .logo img,
footer .custom-logo-link img {
	height: 64px;
	width: auto;
}
footer hr {
	max-width: var(--content-width);
	width: 100%;
	margin: 3rem auto;
}
footer .columns {
	display: flex;
	flex-wrap: wrap;
	max-width: var(--content-width);
	margin: 0 auto;
	gap: 1rem;
	justify-content: space-between;
}
footer .columns section {
	min-width: 180px;
}
footer .columns section ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
footer .columns section ul.inline {
	display: flex;
	gap: 2rem;
}
footer .columns section ul li {
	font-size: .9rem;
	margin-bottom: .75rem;
}
footer .columns section ul li a {
	text-decoration: none;
	color: white;
}
footer .columns section ul li a:hover {
	text-decoration: underline;
}

/* search form */
form.search-form {
	padding: 1rem;
	display: flex;
	justify-content: center;
	gap: .5rem;
	margin-top: -80px;
	height: 80px;
	box-sizing: border-box;
	transition: margin .2s ease-in-out;
	position: relative;
	z-index: 40;
}
form.search-form.active {
	margin-top: 0;
}
form.search-form input {
	width: 100%;
	max-width: 500px;
}

/* mobile navigation */
nav.mobile-nav {
	display: none;
	position: fixed;
	top: 72px;
	left: 0;
	width: 100vw;
	height: calc(100vh - 72px);
	background: var(--c-background);
	overflow: hidden;
	color: var(--c);
	z-index: 30;
}
nav.mobile-nav.active {
	display: block;
}
nav.mobile-nav ul {
	display: flex;
	gap: .5rem;
	list-style-type: none;
	margin: 0;
	padding: 4rem 3rem;
	flex-direction: column;
	justify-content: right;
	align-items: flex-end;
}
nav.mobile-nav ul li {
	min-width: 50%;
	text-align: right;
}
nav.mobile-nav ul li a {
	display: block;
	font-size: 1.25em;
	text-decoration: none;
	padding: .75rem;
}
nav.mobile-nav .actions {
	display: flex;
	flex-direction: column;
	justify-content: right;
	align-items: flex-end;
	gap: .5rem;
	padding: 0 3rem;
}

/* featured content */
main > .featured {
	background: linear-gradient(135deg, var(--c-primary-low-accent) 0%, var(--c-primary-low) 100%);
	display: flex;
	min-height: var(--featured-height);
	justify-content: center;
	padding: 0 1rem;
}
main > .featured article {
	color: white;
	margin: 2rem 0 3rem 0;
	max-width: var(--content-width);
}
main > .featured img {
	max-height: calc(var(--featured-height) - 6rem);
	width: 100%;
	object-fit: contain;
}
main > .featured article .category {
	background: white;
	color: var(--c-primary-low-accent);
}
main > .featured article a.title {
	color: white;
	text-decoration: none;
}
main > .featured article a.title:hover {
	text-decoration: underline;
}
main > .featured article .content {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 2rem;
}
main > .featured article .meta {
	color: var(--c-primary-high);
	display: flex;
	gap: .25rem 1.5rem;
	flex-wrap: wrap;
}
main > .featured article .meta a {
	color: var(--c-featured-link);
}
main > .featured article .meta > * {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}
main > .featured article .meta .icon {
	stroke: var(--c-primary-high);
}
main > .featured article .description {
	margin: 2rem 0 3rem 0;
}
main > h2 {
	margin-top: 3rem;
}
main > .articles {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	max-width: var(--content-width);
	margin: 2rem auto;
	padding: 0 1rem;
}
main > .articles article {
	background: var(--c-primary-high-t01);
	box-shadow: 0 5px 15px -10px rgba(0, 0, 0, 0.6), 0 0 3px rgba(0, 0, 0, 0.1);
	padding: 1rem;
}
main > .articles article .thumb {
	height: 12rem;
	margin: -1rem -1rem 1rem -1rem;
	background-size: cover;
	background-position: center;
}
main > .articles article > a:not(.btn) {
	color: var(--c);
	display: inline-block;
	text-decoration: none;
}
main > .articles article > a:not(.btn):hover {
	text-decoration: underline;
}
main > .articles article .post-categories > li {
	background:  var(--c-primary-low-accent);
}
main > .articles article .post-categories > li a {
	text-decoration: none;
	color: white;
}
main > .articles article .summary {
	margin: .25rem 0;
}

/* single article / page content */
main.post,
main.page {
	max-width: var(--content-width);
	margin: 0 auto 2rem auto;
	padding: 0 1rem;
}
main.post .title-image {
	width: auto;
	max-width: 100%;
	max-height: 600px;
	display: block;
	margin: 2rem auto 0 auto;
}
main.page > h1 {
	margin-top: 3rem;
}
main.post .content,
main.page .content,
main.post .comments {
	max-width: 768px;
	margin: 3rem auto;
}
main.post .content .post-categories > li {
	background:  var(--c-primary-low-accent);
}
main.post .content .post-categories > li a {
	text-decoration: none;
	color: white;
}
main.post .content .meta {
	color: var(--c-primary-low-accent2);
	margin-bottom: 3rem;
	display: flex;
	gap: .25rem 1.5rem;
	flex-wrap: wrap;
}
main.post .content .meta > * {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
}
main.post .content .meta .icon {
	stroke: var(--c-primary-low-accent2);
}
main.post .content h2 {
	margin-top: 3rem;
}
main.post .content figure {
	margin: 1rem 0;
	text-align: center;
}
main.post .content figure img {
	max-width: 100%;
}
main.post .content figure figcaption {
	text-align: center;
}
main.post .content figure.alignright,
main.post .content figure.alignleft {
	margin-top: 0;
	margin-bottom: .5rem;
}
main.post .content figure.alignleft {
	margin-right: 1rem;
}
main.post .content figure.alignright {
	margin-left: 1rem;
}
main.post .content figure.alignwide,
main.post .content figure.alignfull {
	width: 100%;
}
main.post .content figure.alignwide.wp-block-embed.wp-embed-aspect-16-9 iframe,
main.post .content figure.alignfull.wp-block-embed.wp-embed-aspect-16-9 iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
}
main.post .tags {
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
	margin-top: 3rem;
}
main.post .tags .tag {
	background: var(--c-neutral-high);
	color: black;
	text-decoration: none;
}
main.post .social {
	margin: 4rem 0 0 0;
	border-top: 1px solid var(--c-neutral-high-accent);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
	font-size: 2rem;
	padding-top: 1.5rem;
}
main.post .social a {
	cursor: pointer;
}
main.post .social a .icon {
	stroke: var(--c-neutral-accent2);
}
main.post .social a:hover .icon {
	transform: scale(1.1);
}
@media (prefers-reduced-motion) {
	main.post .social a:hover .icon {
		transform: none;
	}
}
main.post .social a.social-mail:hover .icon {
	stroke: var(--c-mail);
}
main.post .social a.social-mastodon:hover .icon {
	stroke: var(--c-mastodon);
}
main.post .social a.social-bluesky:hover .icon {
	stroke: var(--c-bluesky);
}
main.post .social a.social-whatsapp:hover .icon {
	stroke: var(--c-whatsapp);
}
main.post .social a.social-telegram:hover .icon {
	stroke: var(--c-telegram);
}
main.post .social a.social-linkedin:hover .icon {
	stroke: var(--c-linkedin);
}
main.post .social a.social-facebook:hover .icon {
	stroke: var(--c-facebook);
}
main.post .social a.social-reddit:hover .icon {
	stroke: var(--c-reddit);
}
main.post .comments h2 {
	margin: 2rem 0;
}
main.post .comments .comment {
	position: relative;
	margin-left: 74px;
}
main.post .comments .comment > .avatar {
	position: absolute;
	left: -74px;
}
main.post .comments .comment > h3 {
	font-size: 1rem;
	margin: 0 0 1rem 0;
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
}
main.post .comments .comment > blockquote {
	margin: 0;
}
main.post .comments .comment > blockquote p {
	margin: 0 0 .5rem 0;
}
main.post .comments .comment > .comment {
	margin: 1.5rem 0 0 2.5rem;
}
main.post .comments .comment > .comment > .comment .comment {
	margin-left: 0;
}
main.post .comments > .comment ~ .comment {
	margin-top: 3rem;
}
main.post .comments .comment-respond {
	margin-top: 3rem;
}
main.post .comments .comment-form > p:not(:first-child):not(:last-child):not(.comment-form-cookies-consent):not(.form-submit) {
	display: flex;
	flex-direction: column;
	gap: .25rem;
}

/* pagination */
nav.pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: .5rem;
}
nav.pagination .nav-links > a {
	padding: 2px;
}
nav.pagination .nav-links > span.current {
	padding: 2px;
	opacity: .7;
}
/* responsivness */
.d-init-m, .d-init-l, .d-init-xl, .d-init-xxl, .d-flex-m, .d-flex-l, .d-flex-xl { display: none !important; }

@media screen and (min-width: 640px) {
	/* break: S -> M */
	main > .articles {
		grid-template-columns: 1fr 1fr;
	}
	.d-none-m { display: none !important; }
	.d-init-m { display: initial !important; }
	.d-flex-m { display: flex !important; }
}
@media screen and (min-width: 720px) {
	/* break: M -> L */
	.d-none-l { display: none !important; }
	.d-init-l { display: initial !important; }
	.d-flex-l { display: flex !important; }
}
@media screen and (min-width: 1000px) {
	/* break: L -> XL */
	main > .articles {
		grid-template-columns: 1fr 1fr 1fr;
	}
	main > .featured article .content {
		grid-template-columns: 1fr 1fr;
	}
	.d-none-xl,
	nav.mobile-nav.active { display: none !important; }
	.d-init-xl { display: initial !important; }
	.d-flex-xl { display: flex !important; }
}
@media screen and (min-width: 1200px) {
	/* break: XL -> XXL */
	.d-init-xxl { display: initial !important; }
}

/* utilities */
.text-center {
	text-align: center;
}
.d-flex {
	display: flex;
}
.ml-auto {
	margin-left: auto;
}
.gap-05 {
	gap: .5rem;
}
.bg-transparent {
	background: transparent;
}

/* Newsletter button/text */
.newsletter-signup {
	border: 2px solid var(--c-neutral-high-accent);
	border-radius: var(--border-radius);
	background-color: var(--c);
	padding: 0.25rem;
	max-width: 65%;
	display: flex;
}
.input-newsletter {
	border: none;
	float: left;
	width: 100%;
}
.btn-newsletter {
	float: right;
}

@media screen and (max-width: 640px) {
	/* Un-squish our signup form */
	.newsletter-signup {
		max-width: 100%;
	}
}