/**
 * Stylesheet for all print pages.
 *
 * @since		1.0.0
 * @since       5.9.0    Refactor to provide common print page styles.
 * @package     cookbook
 * @copyright   2024 Keith Pfeiffer
 */

/* =============================================================================
# Custom properties
*/

:root {
	--background: rgba(246, 246, 246, 1);
	--primary: rgba(0, 133, 242, 1);
	--surface: rgba(249, 249, 249, 1);
	--on-surface: rgba(18, 18, 18, 1);
	--scrim: rgba(249, 249, 249, 0.87);
	--pnet-dim: 0.87;
	--print-colour: black;
	--print-font-size: 9pt;
	--print-label-width: calc(var(--print-font-size) * 6);
	--print-text-huge: calc(var(--print-font-size) * 1.802);
	--print-text-xxxl: calc(var(--print-font-size) * 1.602);
	--print-text-xxl: calc(var(--print-font-size) * 1.424);
	--print-text-xl: calc(var(--print-font-size) * 1.205);
	--print-text-l: calc(var(--print-font-size) * 1.125);
	--print-text-s: calc(var(--print-font-size) * 0.889);
	--print-text-xs: calc(var(--print-font-size) * 0.790);
	--print-h-space: var(--print-font-size);
	--print-h-double-space: calc(var(--print-h-space) * 2);
	--print-v-space: var(--print-font-size);
	--print-v-half-space: calc(var(--print-v-space) * 0.5);
	--print-v-double-space: calc(var(--print-v-space) * 2);
	--print-border-radius: 4px;
}

/* =============================================================================
# Page size definition
*/

@page {
	margin-bottom: 1.5cm;
	margin-left: 2.5cm;
	margin-right: 2.5cm;
	margin-top: 1.5cm;
	size: A4 portait;
}

/* =============================================================================
# Page styles
*/

.wprm-print {
	background-color: var(--background);
	color: var(--on-surface);
	margin: 0 auto;
}

.wprm-print #wpadminbar {
	display: none;
}

#wprm-print-content .pfic-columns {
	column-count: 2;
	column-gap: var(--print-h-double-space);
	display: flex;
	margin-bottom: var(--print-v-space);
}

.pnet-progress-overlay {
	display: block;
}

/* =============================================================================
# Elements
*/

#wprm-print-content a {
	color: var(--print-colour);
	pointer-events: none;
	text-decoration: none;
}

#wprm-print-content blockquote,
#wprm-print-content figure,
#wprm-print-content img,
#wprm-print-content p,
#wprm-print-content picture {
	break-inside: avoid;
}

#wprm-print-content blockquote {
	border-left: 3px solid grey;
	font-style: italic;
	margin-left: 0;
	padding-left: var(--print-h-double-space);
}

#wprm-print-content blockquote cite {
	font-style: normal;
}

#wprm-print-content figure {
	break-inside: avoid;
	margin: 0 0 var(--print-v-space) 0;
}

#wprm-print-content figcaption {
	font-size: var(--print-text-s);
	text-align: center;
}

#wprm-print-content img {
	width: 100%;
	height: unset;
}

#wprm-print-content ul,
#wprm-print-content ol,
#wprm-print-content dl {
	margin: 0;
	padding: 0;
}

#wprm-print-content li {
	break-inside: avoid;
	margin: 0 0 var(--print-v-half-space) 1.5em;
}

#wprm-print-content li[style*="list-style-type: none"] {
	margin-left: 0;
}

#wprm-print-content h1,
#wprm-print-content h2,
#wprm-print-content h3,
#wprm-print-content h4,
#wprm-print-content h5,
#wprm-print-content h6 {
	break-after: avoid;
	clear: both;
	color: var(--print-colour);
	font-weight: 500;
	margin-bottom: var(--print-v-space);
	margin-top: 0;
}

#wprm-print-content h1 {
	font-size: var(--print-text-huge);
	font-weight: 700;
	margin-top: 0;
}

#wprm-print-content h2 {
	font-size: var(--print-text-xxl);
	border-bottom: 1px solid var(--on-surface);
}

#wprm-print-content h3 {
	font-size: var(--print-text-xl);
}

#wprm-print-content h4,
#wprm-print-content h5,
#wprm-print-content h6 {
	font-size: var(--print-text-l);
}

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

/*
## Page header print options. This is NOT printed.
*/

#wprm-print-header {
	background-color: var(--surface);
	font-size: 16px;
	margin-bottom: var(--print-v-space);
	margin-top: var(--print-v-double-space);
	text-align: initial;
}

#wprm-print-header #wprm-print-header-main,
#wprm-print-header-options {
	align-items: center;
	display: flex;
	gap: var(--print-h-space);
	justify-content: flex-start;
	margin-bottom: var(--print-v-space);
}

#wprm-print-header #wprm-print-header-main .wprm-print-button {
	background-color: transparent;
	border-radius: var(--print-border-radius);
	border: 1px solid currentColor;
	color: var(--on-surface);
	font-size: 1em;
	margin: 0;
	min-width: 6em;
	padding: var(--print-v-half-space) var(--print-h-space);
	text-align: center;
	text-transform: lowercase;
}

#wprm-print-header #wprm-print-header-main .wprm-print-button#wprm-print-button-print {
	order: 1;
}

#wprm-print-header #wprm-print-header-main .wprm-print-button#wprm-print-button-pdf {
	order: 3;
}

#wprm-print-header #wprm-print-header-main .wprm-print-button#wprm-print-button-back {
	order: 5;
}

#wprm-print-header #wprm-print-header-options>div {
	margin: 0;
}

#wprm-print-header #wprm-print-header-options .wprm-print-toggle-container {
	align-items: center;
	column-gap: var(--print-h-space);
	display: flex;
	justify-content: center;
	text-transform: lowercase;
}

#wprm-print-header #wprm-print-header-options .wprm-print-toggle-container:has(#wprm-print-toggle-recipe-notes) {
	display: none;
}

#wprm-print-header #wprm-print-header-options .wprm-print-spacer {
	display: none;
}

/*
## Cover page
*/

#pfic-cover-page {
	break-after: right;
	height: 100vh;
}

#pfic-cover-page .pfic-columns {
	height: 100%;
	align-items: center;
	justify-content: center;
}

#pfic-cover-page .pfic-columns .pfic-column-left {
	flex: 8;
}

#pfic-cover-page .pfic-columns .pfic-column-right {
	flex: 17;
}

#pfic-cover-page .pfic-cookbook-name {
	font-size: var(--print-text-xxl);
	font-weight: bold;
	margin-bottom: var(--print-v-space);
	margin-top: 0;
}

#pfic-cover-page .pfic-cookbook-subtitle {
	font-size: var(--print-text-xl);
	font-weight: bold;
	margin-bottom: var(--print-v-space);
	margin-top: 0;
}

#pfic-cover-page .pfic-cookbook-description {
	font-size: var(--print-text-xxl);
	margin-bottom: var(--print-v-space);
}

#pfic-cover-page .pfic-date-printed {
	font-size: var(--print-text-xl);
	margin-bottom: 0;
}

/*
## Print content
*/

#wprm-print-content {
	background-color: white;
	color: var(--print-colour);
	font-family: Verdana, Geneva, Sans-Serif;
	font-size: var(--print-font-size);
}

#wprm-print-content .wprm-spacer {
	height: var(--print-v-space);
}

#wprm-print-content .pfic-summary {
	break-after: avoid;
	break-inside: avoid;
	color: lightgrey;
	font-size: var(--print-text-xl);
	font-style: italic;
	font-weight: 600;
	margin-bottom: var(--print-v-double-space);
}

#wprm-print-content .pfic-print-collection-item,
#wprm-print-content .wprm-print-recipe {
	margin-bottom: var(--print-v-double-space);
}

#wprm-print-content .pfic-print-collection-item .pnet-container-float-left,
#wprm-print-content .pfic-print-collection-item .pnet-container-float-right {
	break-inside: avoid;
	margin-bottom: var(--print-v-space);
}

#wprm-print-content .pfic-print-collection-item .pnet-container-float-left {
	float: left;
	margin-right: var(--print-h-space);
	max-width: 32%;
}

#wprm-print-content .pfic-print-collection-item .pnet-container-float-right {
	float: right;
	margin-left: var(--print-h-space);
	max-width: 32%;
}

#wprm-print-content .pfic-print-collection-item .pfic-columns .pnet-container-float-left,
#wprm-print-content .pfic-print-collection-item .pfic-columns .pnet-container-float-right {
	float: none;
	margin-left: 0;
	margin-right: 0;
	max-width: 100%
}

#wprm-print-content .pfic-recipe-metadata__items:not(:last-child) {
	margin-bottom: var(--print-v-space);
}

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

#wprm-print-content .pfic-recipe-metadata__items .wprm-recipe-details-label {
	flex: 0 0 var(--print-label-width);
	min-width: var(--print-label-width);
}

#wprm-print-content .pfic-nutrition-container,
#wprm-print-content .wprm-private-notes-container,
#wprm-print-content .wprm-recipe-equipment-container,
#wprm-print-content .wprm-recipe-ingredient-group,
#wprm-print-content .wprm-recipe-instruction,
#wprm-print-content .wprm-recipe-notes-container {
	break-inside: avoid;
	margin-bottom: var(--print-v-space);
}

#wprm-print-content .wprm-recipe-instruction {
	align-items: flex-start;
	column-gap: var(--print-h-space);
	display: flex;
	flex-wrap: wrap;
	margin-bottom: var(--print-v-space);
}

#wprm-print-content .wprm-recipe-instruction-text {
	margin-bottom: var(--print-v-half-space);
}

#wprm-print-content .wprm-recipe-instruction-ingredients {
	display: none;
}

#wprm-print-content .wprm-recipe-instruction-tip {
	background-color: rgba(18, 18, 18, 0.1);
	padding: var(--print-v-space) var(--print-h-space);
}

#wprm-print-content .wprm-recipe-instruction-tip-icon {
	flex: 0;
}

#wprm-print-content .wprm-recipe-instruction-tip-text {
	color: var(--print-colour);
	flex: 1;
}

#wprm-print-content .wprm-recipe-tip .wprm-recipe-instruction-tip-icon {
	padding-top: 4px;
}

#wprm-print-content .wprm-recipe-notes ul {
	list-style-type: none;
}

#wprm-print-content .wprm-recipe-notes ul li {
	margin-left: 0;
}

#wprm-print-content .wprm-nutrition-label-text-nutrition-container {
	white-space: nowrap;
}

/*
# Print page footer
*/

#wprm-print-footer {
	break-inside: avoid;
	font-size: var(--print-text-xs);
	margin-top: 0;
	text-align: unset;
}

#wprm-print-footer .pfic-print-footer-container {
	align-items: flex-end;
	column-gap: var(--print-h-space);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

#wprm-print-footer .pfic-print-footer-id {
	align-items: center;
	column-gap: var(--print-h-space);
	display: flex;
	flex-direction: row;
	margin-bottom: var(--print-v-space);
}

#wprm-print-footer .pfic-print-footer-id>* {
	margin: 0;
}

#wprm-print-footer .pfic-print-footer-icon {
	width: 3rem;
}

#wprm-print-footer .pfic-print-footer-site-name {
	display: block;
	font-size: var(--print-text-l);
	font-weight: 500;
}

#wprm-print-footer .pfic-print-item-url {
	white-space: nowrap;
}

#wprm-print-footer .pfic-qr-code {
	max-width: 25mm;
}

/* =============================================================================
# Media queries
*/

/*
## Screen only - this will not affect print output
*/

@media screen {
	.wprm-print {
		max-width: 210mm;
	}

	#wprm-print-content {
		border: 1px solid var(--on-surface);
		opacity: var(--pnet-dim);
		padding: 1cm;
	}
}

/*
## Dark mode - this will not affect print output
*/

@media screen and (prefers-color-scheme: dark) {
	:root {
		--background: rgba(18, 18, 18, 1);
		--on-surface: rgba(242, 242, 242, 0.87);
		--surface: rgba(17, 24, 29, 1);
	}
}

/*
## Print only
*/

@media print {

	.pnet-progress-overlay,
	#wprm-print-header {
		display: none;
	}
}