/* The recipe card on a single post: the row of buttons at the top of the
   article, the card with the ingredients and the method, the Instagram
   invitation at its foot, and the print layout. Colours, corners and
   families come from the theme tokens, so the card follows the palette, the
   roundness and the heading font chosen in the panel. */

/* --- Jump row, at the top of the article --- */
.pls-recipe-jump{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 1.6em}
.pls-recipe-jump__btn{
	display:inline-flex;align-items:center;gap:8px;
	min-height:40px;padding:0 18px;
	border:1px solid var(--pls-border);border-radius:999px;
	background:var(--pls-surface);color:var(--pls-ink);
	font:600 14px/1 var(--pls-font);text-decoration:none;cursor:pointer;
	transition:background .15s,border-color .15s,color .15s,transform .15s;
}
.pls-recipe-jump__btn:hover{border-color:var(--pls-brand);color:var(--pls-brand-dark)}
/* Scoped to the article, like its links, so the link colour of the text does
   not win over the white of the button. */
.pls-recipe-jump__btn--primary,.pls-entry-content .pls-recipe-jump__btn--primary{background:var(--pls-brand-dark);border-color:var(--pls-brand-dark);color:#fff}
.pls-recipe-jump__btn--primary:hover,.pls-entry-content .pls-recipe-jump__btn--primary:hover{background:var(--pls-ink);border-color:var(--pls-ink);color:#fff}
.pls-recipe-jump__btn:focus-visible,.pls-recipe__print:focus-visible,.pls-recipe__insta-btn:focus-visible{outline:2px solid var(--pls-brand);outline-offset:3px}
.pls-recipe-jump__btn[hidden],.pls-recipe__print[hidden]{display:none}
.pls-entry-content .pls-recipe-jump a{text-decoration:none}

/* --- The card --- */
.pls-recipe{
	--pls-recipe-pad:clamp(20px,4vw,36px);
	position:relative;
	margin:2.4em 0;
	padding:calc(var(--pls-recipe-pad) + 10px) var(--pls-recipe-pad) var(--pls-recipe-pad);
	background:var(--pls-surface);
	border:1px solid var(--pls-border-soft);
	border-radius:var(--pls-radius-lg);
	box-shadow:var(--pls-shadow-md);
	scroll-margin-top:96px;
	overflow:hidden;
}
/* The scalloped edge along the top, like the paper lace under a cake: a row of
   half circles in the brand tint, cut by a radial gradient. */
.pls-recipe::before{
	content:"";position:absolute;inset:0 0 auto 0;height:14px;
	background:radial-gradient(circle at 10px 0,var(--pls-brand-soft) 9px,transparent 9.5px) 0 0/20px 14px repeat-x;
	pointer-events:none;
}
.pls-recipe__head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 18px;margin:0 0 22px}
.pls-recipe__kicker{
	flex:1 1 auto;display:flex;align-items:center;gap:10px;margin:0;
	font:600 clamp(22px,3vw,28px)/1.15 var(--pls-font-h);color:var(--pls-ink);letter-spacing:-.3px;
}
.pls-recipe__kicker .pls-icon{
	flex:0 0 auto;width:38px;height:38px;padding:9px;border-radius:50%;
	background:var(--pls-brand-soft);color:var(--pls-brand-dark);box-sizing:border-box;
}
.pls-recipe__print{
	display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px;
	border:1px solid var(--pls-border);border-radius:999px;background:transparent;color:var(--pls-ink);
	font:600 13px/1 var(--pls-font);cursor:pointer;
}
.pls-recipe__print:hover{border-color:var(--pls-brand);color:var(--pls-brand-dark)}

/* Facts: preparation, cooking, total, yield, difficulty. */
.pls-recipe__facts{
	flex:1 0 100%;order:3;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
	gap:1px;margin:4px 0 0;padding:0;
	background:var(--pls-border-soft);border:1px solid var(--pls-border-soft);border-radius:var(--pls-radius);overflow:hidden;
}
.pls-recipe__fact{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:12px 14px;background:var(--pls-surface)}
.pls-recipe__fact .pls-icon{grid-row:1 / span 2;color:var(--pls-brand-dark)}
.pls-recipe__fact dt{margin:0;font-size:12px;line-height:1.3;color:var(--pls-mute)}
.pls-recipe__fact dd{margin:0;font:700 15px/1.3 var(--pls-font);color:var(--pls-ink)}

/* Section headings inside the card. */
.pls-entry-content .pls-recipe__heading{
	margin:0 0 14px;font-family:var(--pls-font-h);font-size:clamp(20px,2.4vw,24px);font-weight:600;
	line-height:1.2;letter-spacing:-.2px;color:var(--pls-ink);
}
.pls-recipe__part--method{margin-top:30px}

/* Sub headings: "For the base", "For the cream". */
.pls-entry-content .pls-recipe__group{
	display:flex;align-items:center;gap:12px;margin:22px 0 10px;
	font-family:var(--pls-font-h);font-size:1.02em;font-weight:600;color:var(--pls-brand-dark);
}
.pls-entry-content .pls-recipe__group strong,.pls-entry-content .pls-recipe__group b{font-weight:inherit}
.pls-entry-content .pls-recipe__group::after{content:"";flex:1 1 auto;height:1px;background:var(--pls-border-soft)}
.pls-recipe__part > .pls-recipe__group:first-of-type{margin-top:6px}
.pls-entry-content .pls-recipe__note{margin:0 0 12px;font-size:.92em;color:var(--pls-mute)}

/* Ingredients: a tinted panel, one tick box per line. */
.pls-recipe__part--ingredients{
	padding:22px clamp(16px,3vw,26px) 18px;border-radius:var(--pls-radius);
	background:color-mix(in srgb,var(--pls-brand-soft) 70%,var(--pls-surface));
}
.pls-entry-content .pls-recipe__checklist{list-style:none;margin:0 0 6px;padding:0}
.pls-entry-content .pls-recipe__checklist li{padding:0;margin:0;border-bottom:1px dashed color-mix(in srgb,var(--pls-brand) 28%,transparent)}
.pls-entry-content .pls-recipe__checklist li:last-child{border-bottom:0}
.pls-recipe__check{display:flex;align-items:flex-start;gap:12px;padding:10px 2px;cursor:pointer}
.pls-recipe__box{
	appearance:none;-webkit-appearance:none;flex:0 0 auto;
	width:22px;height:22px;margin:.12em 0 0;border:2px solid color-mix(in srgb,var(--pls-brand-dark) 55%,transparent);
	border-radius:50%;background:var(--pls-surface);cursor:pointer;display:grid;place-content:center;
	transition:background .15s,border-color .15s;
}
.pls-recipe__box::before{
	content:"";width:10px;height:6px;margin-top:-2px;border:solid #fff;border-width:0 0 2px 2px;
	transform:rotate(-45deg) scale(0);transition:transform .15s;
}
.pls-recipe__box:checked{background:var(--pls-brand-dark);border-color:var(--pls-brand-dark)}
.pls-recipe__box:checked::before{transform:rotate(-45deg) scale(1)}
.pls-recipe__box:focus-visible{outline:2px solid var(--pls-brand);outline-offset:2px}
.pls-recipe__item{flex:1 1 auto;line-height:1.5;transition:color .15s}
.pls-recipe__box:checked + .pls-recipe__item{color:var(--pls-mute);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--pls-mute) 60%,transparent)}

/* A picture between the ingredients and the method. */
.pls-entry-content .pls-recipe__media{margin:24px 0 0;text-align:center}
.pls-recipe__media img{display:inline-block;max-width:100%;height:auto;border-radius:var(--pls-radius)}
.pls-recipe__media img.alignleft,.pls-recipe__media img.alignright{float:none;margin:0}

/* Method: numbered steps, the count carried across sub headings. */
.pls-recipe__part--method{counter-reset:pls-step}
.pls-entry-content .pls-recipe__steps{list-style:none;margin:0 0 8px;padding:0}
.pls-entry-content .pls-recipe__step{
	position:relative;counter-increment:pls-step;
	margin:0;padding:0 0 22px 58px;min-height:40px;
}
.pls-recipe__step::before{
	content:counter(pls-step);position:absolute;left:0;top:0;
	width:40px;height:40px;border-radius:50%;display:grid;place-content:center;
	background:var(--pls-brand-dark);color:#fff;font:600 17px/1 var(--pls-font-h);
}
/* The thread between one number and the next. */
.pls-recipe__step::after{
	content:"";position:absolute;left:19px;top:46px;bottom:6px;width:2px;border-radius:2px;
	background:color-mix(in srgb,var(--pls-brand) 22%,transparent);
}
.pls-recipe__step:last-child::after{display:none}
.pls-entry-content .pls-recipe__step > p{margin:0;padding-top:7px}
.pls-entry-content .pls-recipe__step > p + p{margin-top:.8em;padding-top:0}
.pls-recipe__part--method > figure,.pls-recipe__part--method > p > img{margin:6px 0 24px}

/* --- Instagram, at the foot of the card --- */
.pls-recipe__insta{
	display:flex;align-items:center;flex-wrap:wrap;gap:14px 18px;margin:26px 0 0;padding:18px 20px;
	border-radius:var(--pls-radius);
	background:linear-gradient(var(--pls-surface),var(--pls-surface)) padding-box,
		linear-gradient(120deg,#feda75,#fa7e1e 30%,#d62976 60%,#962fbf 85%,#4f5bd5) border-box;
	border:2px solid transparent;
}
.pls-recipe__insta-icon{
	flex:0 0 auto;width:46px;height:46px;border-radius:14px;display:grid;place-content:center;color:#fff;
	background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%);
}
.pls-recipe__insta-body{flex:1 1 240px;min-width:0}
.pls-entry-content .pls-recipe__insta-title{margin:0;font:600 18px/1.25 var(--pls-font-h);color:var(--pls-ink)}
.pls-entry-content .pls-recipe__insta-text{margin:3px 0 0;font-size:14px;line-height:1.5;color:var(--pls-mute)}
.pls-entry-content .pls-recipe__insta-text strong{color:var(--pls-ink)}
.pls-entry-content .pls-recipe__insta-btn{
	flex:0 0 auto;display:inline-flex;align-items:center;min-height:42px;padding:0 20px;border-radius:999px;
	background:var(--pls-ink);color:var(--pls-surface);font:600 14px/1 var(--pls-font);text-decoration:none;
	transition:transform .15s,opacity .15s;
}
.pls-entry-content .pls-recipe__insta-btn:hover{opacity:.9;transform:translateY(-1px)}

@media (max-width:600px){
	.pls-entry-content .pls-recipe__step{padding-left:48px}
	.pls-recipe__step::before{width:34px;height:34px;font-size:15px}
	.pls-recipe__step::after{left:16px;top:40px}
	.pls-entry-content .pls-recipe__step > p{padding-top:4px}
	.pls-recipe__insta-btn{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
	.pls-recipe-jump__btn,.pls-recipe__box,.pls-recipe__box::before,.pls-recipe__insta-btn{transition:none}
}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* --- Print: the recipe alone, with the title of the post on top --- */
@media print{
	html.pls-print-recipe body *{visibility:hidden}
	html.pls-print-recipe .pls-recipe,html.pls-print-recipe .pls-recipe *{visibility:visible}
	html.pls-print-recipe .pls-recipe{position:absolute;left:0;top:0;width:100%;margin:0;box-shadow:none;border:0;padding:0}
	html.pls-print-recipe .pls-recipe::before{
		content:attr(data-title);position:static;display:block;height:auto;background:none;
		margin:0 0 14pt;font:700 20pt/1.2 var(--pls-font-h);color:#000;
	}
	.pls-recipe-jump,.pls-recipe__print,.pls-recipe__insta,.pls-recipe__box{display:none!important}
	.pls-recipe__part--ingredients{background:none;padding:0}
	.pls-recipe__step::before{background:none;color:#000;border:1.5pt solid #000}
	.pls-recipe__step::after{display:none}
	.pls-recipe a[href^="http"]::after{content:none}
}