/*
Theme Name: Star Fires
Description: Block theme for Star Fires Malta – fireplaces, stoves, BBQs & ovens.
Version: 1.0.0
Requires at least: 7.0
Requires PHP: 8.1
Text Domain: starfires
*/

/* Product cards: lift on hover. */
.sf-card {
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.sf-card:hover {
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
	transform: translateY(-2px);
}
.sf-card .wp-block-post-featured-image img {
	object-fit: contain;
	background: #fff;
}

/* Header: keep it pinned like the old site. */
.sf-header {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .sf-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Category list on the Products page: two-level, with counts. */
.sf-category-list.wp-block-categories {
	list-style: none;
	padding: 0;
	columns: 3 220px;
	column-gap: 2rem;
}
.sf-category-list > li {
	break-inside: avoid;
	margin-bottom: 1.5rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
}
.sf-category-list .children {
	list-style: none;
	padding: 0.5rem 0 0;
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
}
.sf-category-list .children li {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: 0.35rem 0;
}

/* Footer tag cloud as pills. */
.sf-footer .wp-block-tag-cloud a {
	display: inline-block;
	border: 1px solid rgb(255 255 255 / 0.25);
	padding: 0.2em 0.8em;
	margin: 0 0.3em 0.4em 0;
	color: inherit;
	font-size: 0.8125rem !important;
}
.sf-footer .wp-block-tag-cloud a:hover {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* Generic pill links (filters on the Products page). */
.sf-pills a {
	display: inline-block;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 0.3em 1em;
	margin: 0 0.4em 0.5em 0;
	color: var(--wp--preset--color--contrast);
}
.sf-pills a:hover {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: #fff;
	text-decoration: none;
}

/* Text on dark covers inherits the cover's white text. */
.wp-block-cover:not(.is-light) :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}
.wp-block-button.sf-on-dark .wp-block-button__link {
	border-color: #fff;
	color: #fff;
}
.wp-block-button.sf-on-dark .wp-block-button__link:hover {
	background: #fff;
	color: var(--wp--preset--color--contrast);
}

/* Category tiles: whole tile clickable, gentle zoom. */
.sf-tile {
	overflow: hidden;
}
.sf-tile .wp-block-cover__image-background {
	transition: transform 0.6s ease;
}
.sf-tile:hover .wp-block-cover__image-background {
	transform: scale(1.06);
}
.sf-tile h3 {
	margin: 0;
}
.sf-tile h3 a {
	color: #fff;
}
.sf-tile h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Brand logo strip. */
.wp-block-gallery.columns-6 img {
	filter: grayscale(1);
	opacity: 0.8;
	transition: filter 0.2s, opacity 0.2s;
}
.wp-block-gallery.columns-6 a:hover img {
	filter: none;
	opacity: 1;
}

/* Contact Form 7 fields. */
.wpcf7-form label {
	display: block;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
}
.wpcf7-form input:not([type="submit"]),
.wpcf7-form textarea {
	width: 100%;
	margin-top: 0.35rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border);
	background: #fff;
	font: inherit;
	font-weight: 400;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -1px;
}
.wpcf7-form input[type="submit"] {
	background: var(--wp--preset--color--accent);
	color: #fff;
	border: 0;
	padding: 0.85em 2em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
}
.wpcf7-form input[type="submit"]:hover {
	background: var(--wp--preset--color--contrast);
}

/* Typography refinements. */
:where(h1, h2, h3, .wp-block-post-title) {
	text-wrap: balance;
}
:where(p, li) {
	text-wrap: pretty;
}
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-optical-sizing: auto;
}
.sf-card .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
}
.sf-card:hover .wp-block-post-title a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}
.sf-footer h4 {
	color: #fff;
	margin-bottom: 1rem;
}
.sf-footer p {
	line-height: 1.75;
}