/*
Theme Name: Cooking with Lidia
Description: Child theme of Frost for Cooking with Lidia. Holds all site-specific design, templates, patterns, ACF blocks and field definitions so Frost can be updated independently.
Author: Radu Dragomir
Template: frost
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 8.3
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: lidia
*/


/* Recipe cards
---------------------------------------- */

.recipe-card-image {
	overflow: hidden;
}

.recipe-card-image img {
	transition: transform 0.3s ease-out;
}

.recipe-card-image:hover img {
	transform: scale(1.15) rotate(-5deg);
}

@media (prefers-reduced-motion: reduce) {
	.recipe-card-image img {
		transition: none;
	}
}


/* Pagination
---------------------------------------- */

/* Previous/next links as pills, like the outline "Browse all" button. */
.wp-block-query-pagination {
	gap: 12px;
	margin-top: var(--wp--preset--spacing--small);
}

.wp-block-query-pagination > .wp-block-query-pagination-previous,
.wp-block-query-pagination > .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 13px 24px;
	border: 1px solid var(--wp--preset--color--border-soft);
	border-radius: 999px;
	background-color: var(--wp--preset--color--card);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: var(--wp--custom--font-weight--semi-bold);
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.wp-block-query-pagination > .wp-block-query-pagination-previous:hover,
.wp-block-query-pagination > .wp-block-query-pagination-previous:focus-visible,
.wp-block-query-pagination > .wp-block-query-pagination-next:hover,
.wp-block-query-pagination > .wp-block-query-pagination-next:focus-visible {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--tint-tomato);
	color: #A2311B;
}

/* Specific enough to beat core's arrow margin and transform rules whatever the load order. */
.wp-block-query-pagination > a .wp-block-query-pagination-previous-arrow,
.wp-block-query-pagination > a .wp-block-query-pagination-next-arrow {
	margin: 0;
	transition: transform 0.2s ease-out;
}

.wp-block-query-pagination > .wp-block-query-pagination-previous:hover .wp-block-query-pagination-previous-arrow {
	transform: translateX(-3px);
}

.wp-block-query-pagination > .wp-block-query-pagination-next:hover .wp-block-query-pagination-next-arrow {
	transform: translateX(3px);
}

/* Page numbers between the pills: round, as tall as the pills, current page filled. */
.wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	margin: 0;
}

.wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 8px;
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: var(--wp--custom--font-weight--semi-bold);
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}

.wp-block-query-pagination-numbers a.page-numbers:hover,
.wp-block-query-pagination-numbers a.page-numbers:focus-visible {
	background-color: var(--wp--preset--color--tint-tomato);
	color: #A2311B;
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--card);
}

/* On phones the numbers get a row of their own, with the pills together below. */
@media (max-width: 600px) {
	.wp-block-query-pagination > .wp-block-query-pagination-numbers {
		flex-basis: 100%;
		order: -1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-query-pagination > a,
	.wp-block-query-pagination [class*="-arrow"],
	.wp-block-query-pagination-numbers .page-numbers {
		transition: none;
	}
}


/* Coming soon template
---------------------------------------- */

/* Fill the screen: footer at the bottom, page content centered between it and the header. */
.page-template-coming-soon .wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.page-template-coming-soon .wp-site-blocks > main {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	justify-content: center;
}


/* Recipe print card
---------------------------------------- */

/* A printed recipe is the logo, the title, the ingredients and the steps. */
@media print {
	/* No page tint even when "Background graphics" is ticked in the print dialog. */
	body.single-recipe {
		background: none;
	}

	.single-recipe .site-header .alignwide > :not(.wp-block-site-logo),
	.single-recipe .entry-header > :not(.wp-block-post-title),
	.single-recipe .wp-block-group:has(> .frost-recipe-times),
	.single-recipe .wp-block-post-content,
	.single-recipe .frost-recipe-section,
	.single-recipe .site-footer {
		display: none;
	}

	/* Ingredients above the steps instead of beside them. */
	.single-recipe .wp-block-columns:has(.frost-recipe-ingredients) {
		flex-direction: column;
	}

	.single-recipe .wp-block-columns:has(.frost-recipe-ingredients) > .wp-block-column {
		flex-basis: auto !important;
	}

	.single-recipe main::after {
		border-top: 1px solid var(--wp--preset--color--border-soft);
		color: var(--wp--preset--color--muted);
		content: "Printed from cookingwithlidia.com";
		display: block;
		font-size: var(--wp--preset--font-size--x-small);
		margin: var(--wp--preset--spacing--small) var(--wp--style--root--padding-right) 0 var(--wp--style--root--padding-left);
		padding-top: 12px;
		text-align: center;
	}
}