/*
Theme Name: Blog
Theme URI: https://github.com/quirinojess/blog
Author: Jessica Quirino
Author URI: https://github.com/quirinojess
Description: A modern block-based blog theme with Full Site Editing, theme.json, and HTML templates.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blog
Tags: blog, full-site-editing, block-styles, block-patterns, wide-blocks, style-variations
*/

/*
 * Complementary global styles.
 * Prefer theme.json for design tokens; use this file only for rules
 * that theme.json does not cover well (advanced selectors, animations, etc.).
 */

:root {
	--blog-transition: 220ms ease;
	--blog-corner-left: url("assets/images/backgrounds/corner-left.png");
	--blog-corner-right: url("assets/images/backgrounds/corner-right.png");
	--blog-logo-dark: url("assets/images/brand/logo-full-on-dark.png");
}

html {
	background-color: #000;
}

body {
	background-color: #000;
	min-height: 100vh;
}

/* Corner line-art: flower top-left, city/sunflower bottom-right */
.wp-site-blocks {
	position: relative;
	isolation: isolate;
	min-height: 100vh;
}

.wp-site-blocks::before,
.wp-site-blocks::after {
	content: "";
	position: fixed;
	z-index: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	opacity: 0.92;
}

.wp-site-blocks::before {
	top: 0;
	left: 0;
	width: min(34vw, 320px);
	height: min(56vw, 520px);
	background-image: var(--blog-corner-left);
	background-position: top left;
	background-size: contain;
}

.wp-site-blocks::after {
	right: 0;
	bottom: 0;
	width: min(42vw, 420px);
	height: min(72vw, 720px);
	background-image: var(--blog-corner-right);
	background-position: bottom right;
	background-size: contain;
}

.wp-site-blocks > * {
	position: relative;
	z-index: 1;
}

@media (max-width: 781px) {
	:root {
		--blog-corner-left: url("assets/images/backgrounds/corner-left-mobile.png");
		--blog-corner-right: url("assets/images/backgrounds/corner-right-mobile.png");
	}

	.wp-site-blocks::before {
		width: min(48vw, 170px);
		height: min(68vw, 240px);
		opacity: 0.75;
	}

	.wp-site-blocks::after {
		width: min(58vw, 240px);
		height: min(68vw, 280px);
		opacity: 0.75;
	}
}

a {
	transition: color var(--blog-transition), opacity var(--blog-transition), background-color var(--blog-transition), border-color var(--blog-transition);
}

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Brand logo: custom logo wins; otherwise paint the site title as the wordmark */
.blog-brand-logo:has(.custom-logo-link) .wp-block-site-title {
	display: none;
}

.blog-brand-logo .wp-block-site-title a {
	display: inline-block;
	width: min(200px, 55vw);
	height: 64px;
	padding: 0;
	overflow: hidden;
	color: transparent !important;
	background-image: var(--blog-logo-dark);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}

.blog-brand-logo .wp-block-site-title a:focus {
	outline: 1px solid var(--wp--preset--color--contrast);
	outline-offset: 4px;
}

.blog-brand-logo .custom-logo-link img {
	height: auto;
	width: min(200px, 55vw);
}

/* Double-line divider (brand motif) */
.blog-divider {
	display: block;
	width: 100%;
	max-width: none !important;
	height: 5px;
	margin-block: var(--wp--preset--spacing--50);
	border: 0 !important;
	background:
		linear-gradient(currentColor, currentColor) 0 0 / 100% 1px no-repeat,
		linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
	color: var(--wp--preset--color--ink);
	opacity: 0.85;
}

.blog-divider.is-style-on-surface,
.is-style-on-surface.blog-divider {
	color: #4d4d4d;
}

/* Footer credit mark */
.blog-footer-credit {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}

.blog-footer-credit__bee {
	width: 48px;
	height: auto;
	opacity: 0.9;
}

.blog-post-list .wp-block-post {
	padding-bottom: var(--wp--preset--spacing--60);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
}

.blog-post-list .wp-block-post:last-child {
	border-bottom: 0;
}

/* Soft fade-in for page content over the art */
@keyframes blog-fade-up {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.blog-main {
	animation: blog-fade-up 700ms ease both;
}

@media (prefers-reduced-motion: reduce) {
	.blog-main {
		animation: none;
	}
}