/**
 * Stylesheet for all WPRM template display pages.
 *
 * - Used by recipe and howto display templates.
 *
 * @since		1.0.0
 * @since       6.3.0    Refactor for new UI and tabbed display templates.
 * @since       6.8.0    Refactor for accordion display templates.
 * @package     cookbook
 * @copyright   2024 Keith Pfeiffer
 */

/* temporary - update wprm.php and templates to explicitly define heading title, or none.  */
.pnet-accordion__content-inner h3 {
	display: none;
}

/* can these be improved? */
.gb-accordion__item-open .pnet-accordion__toggle {
	margin-bottom: var(--pnet-v-space)
}

/* the following are global styles from newUI and must be added to the global stylesheet */

.pnet-accordion {
	display: flex;
	row-gap: var(--pnet-v-space);
	flex-direction: column;
}

.pnet-accordion__toggle {
	align-items: center;
	display: flex;
	justify-content: space-between;
	line-height: 1
}

.pnet-accordion__toggle:is(.gb-block-is-current, .gb-block-is-current:hover, .gb-block-is-current:focus) {
	font-weight: 600
}

.pnet-accordion__toggle:is(:hover, :focus) {
	color: currentColor
}

.pnet-accordion__toggle svg {
	height: var(--pnet-text-xl);
	width: var(--pnet-text-xl)
}

/*
.pnet-accordion__content-inner {
	margin-top: var(--pnet-v-space)
}
*/

.pnet-accordion__content-inner>:last-child {
	margin-bottom: 0px
}

.pnet-accordion__toggle-title {
	margin-bottom: 0px
}

/* the following are new global styles and must be added to the global stylesheet */

.pnet-button__group {
	align-items: flex-start;
	column-gap: var(--pnet-h-half-space);
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

/* =============================================================================
# Layout
*/

.wprm-recipe-container {
	--wprm-list-checkbox-background: var(--input);
	--wprm-list-checkbox-check-color: var(--on-surface);
	--wprm-list-checkbox-size: var(--pnet-text);
	--wprm-list-checkbox-top-position: 4px;
}

.wprm-recipe-container .wprm-recipe h2 {
	margin-bottom: var(--pnet-v-space);
}

/*
.wprm-recipe-container .wprm-recipe h3,
.wprm-recipe-container .wprm-recipe h4,
.wprm-recipe-container .wprm-recipe h5,
.wprm-recipe-container .wprm-recipe h6 {
	margin-bottom: var(--pnet-v-half-space);
}
*/

.wprm-recipe-container .wprm-recipe li {
	margin: 0 0 0 var(--pnet-h-double-space);
	padding: 0;
}

/* =============================================================================
# Content
*/

/*
## Recipe options.
*/

.pfic-recipe-options {
	align-content: flex-start;
	column-gap: var(--pnet-h-space);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	row-gap: var(--pnet-v-space);

	@media (max-width: 767px) {
		flex-direction: column;
	}
}

.wprm-recipe-container .pfic-recipe-options__button {
	a {
		margin: 0;
	}
}

.wprm-recipe-container .pfic-recipe-options__toggle {
	align-items: center;
	column-gap: var(--pnet-h-half-space);
	display: flex;
	justify-content: flex-start;
	margin: 0;

	&:not(:has(.wprm-toggle-switch)) {
		display: none;
	}
}

.wprm-recipe-container .wprm-toggle-switch-slider {
	border: 1px solid var(--on-surface);
	min-width: 3rem;
}

.wprm-recipe-container .wprm-toggle-switch-inside .wprm-toggle-switch-text {
	display: none;
}

/*
## Recipe metadata
*/

.pfic-recipe-metadata {
	h4 {
		margin-bottom: var(--pnet-v-half-space);
	}
}

.pfic-recipe-metadata__items:not(:last-child) {
	margin-bottom: var(--pnet-v-space);
}

.pfic-recipe-metadata__items .wprm-recipe-block-container {
	align-content: center;
	align-items: flex-start;
	column-gap: var(--pnet-h-half-space);
	display: flex;
	justify-content: flex-start;
}

.pfic-recipe-metadata__items .wprm-recipe-details-label {
	flex: 5em 0 0;
}

.pfic-recipe-metadata__items .wprm-recipe-servings-container {
	margin-bottom: var(--pnet-v-half-space);
}

.pfic-recipe-metadata__items input[type=number].wprm-recipe-servings {
	background-color: var(--input);
	border: none;
	border-bottom-color: var(--on-surface);
	border-bottom-style: solid;
	border-bottom-width: 2px;
	border-radius: var(--pnet-border-radius) var(--pnet-border-radius) 0 0;
	color: var(--on-surface);
	line-height: var(--pnet-v-space);
	padding: 0 0 0 var(--pnet-h-half-space);
	width: 3rem;
}

.pfic-recipe-metadata__items input[type=number].wprm-recipe-servings:is(:hover, :focus) {
	border-bottom-color: var(--primary);
	outline: none;
}

/*
### Ratings
*/

.wprm-recipe-container .wprm-recipe-rating-container {
	@media (max-width: 1024px) {
		order: 3;
	}
}

.wprm-recipe-container .wprm-recipe-rating-container .wprm-recipe-rating-inline {
	flex-wrap: wrap;
}

.wprm-recipe-container .wprm-recipe-rating-container .wprm-recipe-rating-inline .wprm-recipe-rating-details {
	flex: 1 0 100%;
	margin-left: 0;
	font-size: var(--pnet-text);
}

.wprm-recipe-container .wprm-recipe-rating svg {
	height: var(--pnet-text-l);
	padding-right: 4px;
	width: var(--pnet-text-l);
}


.wprm-recipe-container .wprm-comment-rating .wprm-rating-star svg path,
#pnet-comment-form svg .wprm-star-full {
	fill: currentColor;
}

#pnet-comment-form svg .wprm-star-empty {
	stroke: currentColor;
}

/*
## Instructions
*/

.wprm-recipe-container .wprm-recipe .wprm-recipe-instruction {
	margin-bottom: var(--pnet-v-space);
}

.wprm-recipe-container .wprm-recipe .wprm-recipe-instructions-container .wprm-recipe-instruction-media {
	margin: var(--pnet-v-half-space) 0 0 0;
}

.wprm-recipe-container .wprm-recipe .wprm-recipe-instructions-container .wprm-recipe-instruction-media>a {
	display: block;
}

.wprm-recipe-container .wprm-recipe .wprm-recipe-instructions-container .wprm-recipe-instruction-media>a>img {
	border-radius: var(--pnet-border-radius);
}

.wprm-recipe-container .wprm-recipe .wprm-temperature-container {
	white-space: nowrap;
}

/*
### Instruction tips
*/

.wprm-recipe-container .wprm-recipe .wprm-recipe-instructions .wprm-recipe-instruction-tip,
.wprm-recipe-tip {
	margin-left: var(--pnet-h-double-space);
	margin-bottom: var(--pnet-v-space);
}

/*
### Instruction timer
*/
#wprm-timer-container {
	background-color: var(--primary-800);
	color: var(--on-primary);
	font-size: var(--pnet-text);
}

#wprm-timer-container .wprm-timer-icon svg {
	height: var(--pnet-text-l);
	width: var(--pnet-text-l);
}

/*
## Notes
*/

.wprm-recipe-container .wprm-recipe .wprm-recipe-notes-container {
	margin-bottom: var(--pnet-v-space);
}

.wprm-recipe-container .wprm-recipe .wprm-recipe-notes ul {
	list-style-type: none;
}

.wprm-recipe-container .wprm-recipe .wprm-recipe-notes ul li {
	margin-bottom: var(--pnet-v-half-space);
	margin-left: 0;
}

/*
## Nutrition
*/
.wprm-recipe-container .wprm-recipe .wprm-nutrition-label-text-nutrition-container {
	white-space: nowrap;
}

.wprm-recipe-container .wprm-recipe .wprm-nutrition-label-text-nutrition-container-serving_size {
	font-weight: 800;
}

/*
## cook mode modal
*/

.wprm-popup-modal-cook-mode {
	--wprm-cook-mode-primary-hover: var(--primary);
	--wprm-cook-mode-shadow: var(--pnet-shadow-elevation-8);
	--wprm-popup-accent: var(--primary);
	--wprm-popup-background: var(--surface-8);
	--wprm-popup-content: var(--on-surface);
	--wprm-popup-font-size: var(--pnet-text);
	--wprm-popup-title: var(--on-surface);
	transition: var(--pnet-transition);
}

.wprm-popup-modal-cook-mode[aria-hidden=false] .wprm-popup-modal__overlay {
	animation: none;
}

.wprm-popup-modal[aria-hidden=true] .wprm-popup-modal__overlay {
	animation: none;
}

.wprm-popup-modal-cook-mode .wprm-popup-modal__overlay {
	backdrop-filter: blur(var(--pnet-overlay-blur));
	background-color: var(--scrim);
}

.wprm-popup-modal-cook-mode[aria-hidden=false] .wprm-popup-modal__container {
	animation: none;
}

.wprm-popup-modal-cook-mode[aria-hidden=true] .wprm-popup-modal__container {
	animation: .5s wprmPopupModalFadeOut ease;
}

.wprm-popup-modal-cook-mode .wprm-popup-modal__container {
	border-radius: var(--pnet-border-radius);
	box-shadow: var(--pnet-shadow-elevation-8);
	max-width: 75ch;
}

@media(min-width:768px) {
	.wprm-popup-modal-cook-mode .wprm-popup-modal__container {
		border-radius: var(--pnet-border-radius);
	}
}

.wprm-popup-modal-cook-mode .wprm-cook-mode-control .wprm-cook-mode-control-label {
	color: var(--wprm-cook-mode-text-primary);
}

.wprm-popup-modal-cook-mode .wprm-cook-mode-servings-input-container .wprm-cook-mode-servings-input {
	background: var(--input);
	color: var(--on-surface);
}

.wprm-cook-mode .wprm-cook-mode-units-buttons .wprm-cook-mode-unit-button.active {
	color: var(--on-primary);
}

.wprm-popup-modal-cook-mode .wprm-popup-modal__footer .wprm-cook-mode-start-button {
	background-color: transparent;
	border-radius: var(--pnet-border-radius);
	border: 1px solid var(--on-surface);
	box-shadow: var(--pnet-shadow-elevation-2);
	color: var(--on-surface);
	font-weight: 400;
	margin-left: auto;
	margin-right: auto;
	text-transform: lowercase;
	width: fit-content;
}

.wprm-popup-modal-cook-mode .wprm-popup-modal__footer .wprm-cook-mode-start-button:hover:not(:disabled) {
	background-color: transparent;
	box-shadow: var(--pnet-shadow-elevation-8);
	transform: none;
}

.wprm-popup-modal-cook-mode .wprm-cook-mode-screen-cooking .wprm-cook-mode-instruction-step .wprm-cook-mode-step-tips {
	margin-left: calc(30px + 16px);
}

.wprm-popup-modal-cook-mode a.wprm-timer-link {
	white-space: nowrap;
}

.wprm-popup-modal-cook-mode a.wprm-timer-link::before {
	content: "\1f55c\202f";
}

.wprm-popup-modal-cook-mode .wprm-popup-modal__footer .wprm-cook-mode-timers {
	gap: var(--pnet-v-half-space);
	margin-bottom: var(--pnet-v-space);
	overflow: auto;
}