/*
Theme Name: Fazmie Blog
Theme URI: https://fazmie.com/blog
Author: Fazmie
Description: Tema do blog do Fazmie. Mesmas cores, fonte (Nunito), logo (Pacifico) e cards do app, com modo escuro automático. Tema de blocos (Editor do Site).
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: Proprietary
Text Domain: fazmie-blog
*/

/* The same values as the app (app/src/lib/design/tokens.ts and app/src/app/globals.css). The app is the source: change it there first. */
:root {
	--fz-bg: #ffffff;
	--fz-card: #ffffff;
	--fz-fg: #292b2d;
	--fz-muted: #5c5c6a;
	--fz-line: #f1f1fa;
	--fz-primary: #d12d63;
	--fz-primary-ink: #d12d63;
	--fz-on-primary: #faf9ff;
	--fz-tonal: color-mix(in srgb, #d12d63 10%, #ffffff);
	--fz-card-border: rgb(0 0 0 / 0.06);
	--fz-shadow: 0 1px 3px rgb(0 0 0 / 0.04), 0 4px 12px rgb(0 0 0 / 0.03);
	--fz-radius-card: 18px;
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--fz-bg: #0e0e12;
		--fz-card: #1b1b21;
		--fz-fg: #f4f4f7;
		--fz-muted: #9a9aa8;
		--fz-line: #2a2a33;
		--fz-primary-ink: #df7095;
		--fz-tonal: color-mix(in srgb, #d12d63 18%, #1b1b21);
		--fz-card-border: rgb(255 255 255 / 0.08);
	}
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* Logo: "Fazmie" in Pacifico, as in the app. */
.fz-brand,
.fz-brand a {
	font-family: var(--wp--preset--font-family--pacifico);
	font-size: 1.75rem;
	line-height: 1;
	color: var(--fz-primary-ink);
	text-decoration: none;
}

.fz-header {
	border-bottom: 1px solid var(--fz-line);
	position: sticky;
	top: 0;
	z-index: 10;
	background: color-mix(in srgb, var(--fz-bg) 92%, transparent);
	backdrop-filter: blur(8px);
}
.fz-header a { text-decoration: none; }
.fz-header .wp-block-navigation a { font-weight: 700; color: var(--fz-fg); }

/* Post card (blog home, categories, search). */
.fz-card {
	background: var(--fz-card);
	border: 1px solid var(--fz-card-border);
	border-radius: var(--fz-radius-card);
	box-shadow: var(--fz-shadow);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.fz-card .wp-block-post-featured-image { margin: 0; border-radius: 0; }
.fz-card .wp-block-post-featured-image img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.fz-card__body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.fz-card .wp-block-post-title { font-size: 1.25rem; line-height: 1.3; margin: 0; }
.fz-card .wp-block-post-title a { color: var(--fz-fg); text-decoration: none; }
.fz-card .wp-block-post-title a:hover { color: var(--fz-primary-ink); }
.fz-card .wp-block-post-excerpt { color: var(--fz-muted); font-size: 0.95rem; margin: 0; }

/* Category: a small pill, like the app's badges. */
.fz-pill,
.fz-pill a {
	display: inline-block;
	background: var(--fz-tonal);
	color: var(--fz-primary-ink);
	border-radius: 999px;
	padding: 0.15rem 0.7rem;
	font-size: 0.8rem;
	font-weight: 700;
	text-decoration: none;
}
.fz-meta { color: var(--fz-muted); font-size: 0.875rem; }
.fz-meta a { color: var(--fz-muted); }

/* End-of-post call to action. */
.fz-cta {
	background: var(--fz-tonal);
	border-radius: var(--fz-radius-card);
}

.fz-footer { border-top: 1px solid var(--fz-line); color: var(--fz-muted); font-size: 0.9rem; }
.fz-footer a { color: var(--fz-muted); text-decoration: none; }
.fz-footer a:hover { color: var(--fz-primary-ink); text-decoration: underline; }

.wp-block-search__input { border-radius: 999px; border: 1px solid var(--fz-card-border); background: var(--fz-card); color: var(--fz-fg); padding: 0.6rem 1rem; }
.wp-block-query-pagination { gap: 1rem; font-weight: 700; }

:focus-visible { outline: 3px solid color-mix(in srgb, var(--fz-primary) 55%, transparent); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Blog home: eyebrow pill, big title with the pink accent. */
.fz-eyebrow {
	display: inline-block;
	background: var(--fz-tonal);
	color: var(--fz-primary-ink);
	border-radius: 999px;
	padding: 0.25rem 0.85rem;
	font-size: 0.85rem;
	font-weight: 800;
	margin-bottom: 1rem;
}
.fz-hero h1 { letter-spacing: -0.02em; text-wrap: balance; margin-top: 0; }
.fz-hero p { text-wrap: pretty; }
.fz-accent { color: var(--fz-primary-ink); }

/* Footer links: a row that wraps, no separators to misalign. */
.fz-footer__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.fz-footer .fz-brand a { color: var(--fz-primary-ink); }