/*
Theme Name: SieBike Sunlit
Theme URI: https://siebikeblog.com/
Author: SieBikeBlog
Description: A sunny, magazine-style block theme for SieBikeBlog — e-bike guides on batteries, range, motors and maintenance. Fast, self-hosted fonts, one H1 per page, clean markup for Google.
Version: 1.2.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: siebike-sunlit
Tags: blog, news, block-patterns, full-site-editing, custom-logo, featured-images, wide-blocks
*/

/* Small touches theme.json cannot express. */

.sb-card {
	transition: transform .25s ease, box-shadow .25s ease;
}
.sb-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 44px -24px rgba(20, 32, 43, .45);
}
.sb-card .wp-block-post-featured-image img {
	transition: transform .5s ease;
}
.sb-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}
.sb-card .wp-block-post-featured-image {
	overflow: hidden;
}

.sb-kicker {
	letter-spacing: .14em;
	text-transform: uppercase;
}

.sb-terms a {
	text-decoration: none;
}

/* Hero pill hugs its text */
.sb-hero p.sb-kicker {
	width: fit-content;
}

/* Footer link lists */
.sb-footer ul {
	list-style: none;
}

/* Topic tiles */
.sb-topic {
	transition: background-color .2s ease, transform .2s ease;
}
.sb-topic:hover {
	background-color: var(--wp--preset--color--sun-light) !important;
	transform: translateY(-2px);
}
.sb-topic a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.sb-topic {
	position: relative;
}

/* Header stays on top while scrolling */
.sb-header {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .sb-header {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar .sb-header {
		top: 46px;
	}
}
@media (max-width: 600px) {
	.admin-bar .sb-header {
		top: 0;
	}
}

/* Readable article body */
.sb-article-body > p,
.sb-article-body > ul,
.sb-article-body > ol {
	font-size: 1.125rem;
	line-height: 1.75;
}
.sb-article-body img {
	border-radius: 14px;
}

/* Focus that is visible on every background */
a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 3px solid var(--wp--preset--color--sun);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.sb-card,
	.sb-card .wp-block-post-featured-image img,
	.sb-topic {
		transition: none;
	}
	.sb-card:hover,
	.sb-card:hover .wp-block-post-featured-image img,
	.sb-topic:hover {
		transform: none;
	}
}

/* ---------- v1.1 polish ---------- */

/* Frosted glass chips and cards on photos */
.sb-glass {
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .28);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
}
.sb-hero p.sb-glass {
	width: fit-content;
}
.sb-hero h1 em {
	font-style: italic;
	font-weight: 600;
	color: var(--wp--preset--color--sun-light);
}
.sb-hero-card {
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);
	transition: transform .3s ease;
}
.sb-hero-card:hover {
	transform: translateY(-4px);
}
.sb-stats strong {
	font-weight: 800;
	color: var(--wp--preset--color--sun-light);
}

/* Bento: first story big on the left, two stacked on the right */
.sb-bento .wp-block-post-template {
	grid-template-columns: 1.55fr 1fr !important;
}
.sb-bento .wp-block-post-template > li:first-child {
	grid-row: span 2;
}
.sb-bento .wp-block-post-template > li:first-child .sb-photo-card {
	min-height: 560px !important;
}
.sb-bento .wp-block-post-template > li:first-child .wp-block-post-title {
	font-size: var(--wp--preset--font-size--xxl) !important;
}
.sb-bento .wp-block-post-template > li > .sb-photo-card {
	height: 100%;
}
@media (max-width: 781px) {
	.sb-bento .wp-block-post-template {
		grid-template-columns: 1fr !important;
	}
	.sb-bento .wp-block-post-template > li:first-child {
		grid-row: auto;
	}
	.sb-bento .wp-block-post-template > li:first-child .sb-photo-card {
		min-height: 420px !important;
	}
}
.sb-photo-card {
	overflow: hidden;
	transition: transform .3s ease, box-shadow .3s ease;
}
.sb-photo-card .wp-block-cover__image-background {
	transition: transform .7s ease;
}
.sb-photo-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 30px 60px -28px rgba(20, 32, 43, .55);
}
.sb-photo-card:hover .wp-block-cover__image-background {
	transform: scale(1.05);
}
.sb-photo-card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.sb-photo-card .sb-pill a {
	position: relative;
	z-index: 2;
}

/* Category pill */
.sb-pill a {
	display: inline-block;
	background: var(--wp--preset--color--sun);
	color: var(--wp--preset--color--ink);
	padding: .3rem .75rem;
	border-radius: 999px;
	margin: 0 .25rem .25rem 0;
}
.sb-pill .wp-block-post-terms__separator {
	display: none;
}

/* Topic icons */
.sb-topic-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
}
.sb-topic h3 a {
	text-decoration: none;
}

/* Quieter search button in the header */
.sb-header .wp-block-search__button {
	background: transparent !important;
	color: var(--wp--preset--color--ink) !important;
	border: 1px solid var(--wp--preset--color--mist) !important;
	border-radius: 999px;
	padding: .55rem !important;
}
.sb-header .wp-block-search__button:hover {
	background: var(--wp--preset--color--sun-light) !important;
}

/* Sun-glow line at the top of the footer */
.sb-footer {
	border-top: 4px solid var(--wp--preset--color--sun);
}

@media (prefers-reduced-motion: reduce) {
	.sb-hero-card,
	.sb-photo-card,
	.sb-photo-card .wp-block-cover__image-background {
		transition: none;
	}
	.sb-hero-card:hover,
	.sb-photo-card:hover,
	.sb-photo-card:hover .wp-block-cover__image-background {
		transform: none;
	}
}

/* No sand strip between the last section and the footer */
.wp-site-blocks > footer,
.wp-site-blocks > main + * {
	margin-block-start: 0;
}

/* v1.2: featured images are shown whole, never covered by text */
.sb-card .wp-block-post-featured-image img {
	object-fit: cover;
	object-position: center;
}
.sb-lead .wp-block-post-featured-image {
	margin: 0;
	height: 100%;
}
@media (max-width: 781px) {
	.sb-lead .wp-block-column {
		flex-basis: 100% !important;
	}
}