/* Reserved flow space keeps the playful note clear of the recipe controls. */
.fitfoodie .ff-food-fact-slot{position:relative;margin:72px 0 0;padding:0 26px;isolation:isolate;break-inside:avoid}
.fitfoodie .ff-food-fact{
 position:relative;isolation:isolate;box-sizing:border-box;width:100%;max-width:360px;margin:0 auto;padding:0;
 border:0;border-radius:0;background:none;color:var(--ff-ink,#1e1660);box-shadow:none;
 text-align:center;overflow-wrap:anywhere;transform:translateX(calc(var(--ff-note-rest-x,14px) * var(--ff-note-offset-scale,1))) rotate(var(--ff-note-angle,-2deg));
 transform-origin:center;
}
/* Original Note-cards shadow artwork and bounds; served locally, tinted neutral black. */
.fitfoodie .ff-food-fact::before{
 content:'';display:block;position:absolute;inset:0 0 -12% -12%;z-index:0;pointer-events:none;
 background:url('assets/note-shadow.png') center bottom / 100% 100% no-repeat;
 filter:brightness(0);opacity:.42;transform-origin:100% 0;
 transition:transform .2s ease,opacity .2s ease;
}
.fitfoodie .ff-food-fact-paper{
 position:relative;z-index:1;box-sizing:border-box;width:100%;aspect-ratio:1;
 display:flex;flex-direction:column;justify-content:center;padding:32px;border-radius:0;
 background:var(--ff-control,#d0b6ff);
 box-shadow:0 2px 2px rgba(0,0,0,.035);
}
.fitfoodie .ff-food-fact .ff-food-fact-heading{margin:0 0 16px;color:inherit;font:400 24px/1.4 var(--ff-display,'Headland One',Georgia,serif);letter-spacing:0}
.fitfoodie .ff-food-fact .ff-food-fact-text{margin:0;font-size:inherit;line-height:1.7}
.fitfoodie .ff-food-fact .ff-food-fact-source{margin:16px 0 0;font-size:12px;line-height:1.6}
.fitfoodie .ff-food-fact-source a{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;touch-action:manipulation;user-select:text;-webkit-user-select:text;-webkit-touch-callout:default}
.fitfoodie .ff-food-fact.is-draggable{cursor:grab;touch-action:auto;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* Moving the same note to the page layer escapes tab/column clipping and stacking. */
/* Keep navigation and the fixed cooking button (90) above the movable note. */
.fitfoodie>.ff-food-fact-layer{position:absolute;top:0;left:0;width:100%;height:0;z-index:80;pointer-events:none}
.fitfoodie>.ff-food-fact-layer[hidden]{display:none!important}
.fitfoodie .ff-food-fact.is-floating{position:absolute;margin:0;max-width:none;pointer-events:auto;transform:rotate(var(--ff-note-angle,-2deg))}
.fitfoodie .ff-food-fact .ff-food-fact-move,
.fitfoodie .ff-food-fact .ff-food-fact-move:is(:hover,:active,:focus){
 display:inline-block;width:auto;min-width:0;min-height:44px;height:auto;margin:-5px 0;padding:5px 0;
 border:0;border-radius:0;background:none;color:inherit;box-shadow:none;transform:none;
 font:inherit;letter-spacing:inherit;text-align:left;text-transform:none;text-decoration:none;cursor:inherit;
}
.fitfoodie .ff-food-fact.is-dragging,.fitfoodie .ff-food-fact.is-dragging .ff-food-fact-move{cursor:grabbing}
.fitfoodie .ff-food-fact.is-dragging::before{transform:translate(-4px,6px) scale(1.035);opacity:.50}
/* Keep the paper and text still. The bottom edge lifts strongly once, settles, then makes one gentle after-wave. */
.fitfoodie .ff-food-fact.is-breezy .ff-food-fact-paper{
 animation:ff-note-breeze-paper 5.2s cubic-bezier(.37,0,.25,1) both;
}
/* A tiny extra shadow below the lifted left corner; the original shadow stays fixed. */
.fitfoodie .ff-food-fact::after{
 content:'';position:absolute;z-index:0;pointer-events:none;
 left:-5px;bottom:-9px;width:52%;height:20px;border-radius:50%;
 background:#000;filter:blur(10px);opacity:0;
}
.fitfoodie .ff-food-fact.is-breezy::after{animation:ff-note-breeze-shadow 5.2s cubic-bezier(.37,0,.25,1) both}
/* A faint change of light follows the curved lower strip, without moving the text. */
.fitfoodie .ff-food-fact-paper::after{
 content:'';position:absolute;inset:auto 0 0;height:15%;pointer-events:none;opacity:0;
 background:linear-gradient(to bottom,transparent,rgba(255,255,255,.07) 65%,rgba(0,0,0,.025));
}
.fitfoodie .ff-food-fact.is-breezy .ff-food-fact-paper::after{animation:ff-note-breeze-light 5.2s cubic-bezier(.37,0,.25,1) both}
@keyframes ff-note-breeze-paper{
 0%,50%,100%{clip-path:polygon(0 0,100% 0,100% 100%,87.5% 100%,75% 100%,62.5% 100%,50% 100%,37.5% 100%,25% 100%,12.5% 100%,0 100%)}
 24%{clip-path:polygon(0 0,100% 0,100% 97.4%,87.5% 98.6%,75% 99.3%,62.5% 99.5%,50% 99%,37.5% 98.1%,25% 96.5%,12.5% 94.1%,0 91%)}
 72%{clip-path:polygon(0 0,100% 0,100% 98.9%,87.5% 99.4%,75% 99.7%,62.5% 99.8%,50% 99.6%,37.5% 99.2%,25% 98.5%,12.5% 97.5%,0 96.2%)}
}
@keyframes ff-note-breeze-shadow{
 0%,50%,100%{opacity:0;transform:translate(0,0) scale(1)}
 24%{opacity:.09;transform:translate(-4px,4px) scale(1.12)}
 72%{opacity:.055;transform:translate(-2px,2px) scale(1)}
}
@keyframes ff-note-breeze-light{0%,50%,100%{opacity:0}24%{opacity:1}72%{opacity:.65}}
/* Let the desktop paper cross the divider, without reserving its full lower area. */
@media(min-width:1025px){
 .fitfoodie .ff-food-fact-slot{margin-bottom:-90px;z-index:2}
 .fitfoodie .ff-food-fact{--ff-note-offset-scale:2}
}
/* Give wider recipe columns a more casually placed note, without shifting mobile. */
@media(min-width:1200px){.fitfoodie .ff-food-fact{--ff-note-offset-scale:3}}
@media(max-width:1024px){.fitfoodie .ff-food-fact-slot{margin-top:var(--ff-recipe-section-space,64px)}}
@media(max-width:767px){
 .fitfoodie .ff-food-fact-slot{padding-inline:22px}
 .fitfoodie .ff-food-fact{--ff-note-offset-scale:.3}
 .fitfoodie .ff-food-fact-paper{padding:28px 24px 30px}
 .fitfoodie .ff-food-fact .ff-food-fact-heading{font-size:22px;margin-bottom:14px}
}
@media(prefers-reduced-motion:reduce){
 .fitfoodie .ff-food-fact::before{transition:none}
 .fitfoodie .ff-food-fact.is-breezy::after,.fitfoodie .ff-food-fact.is-breezy .ff-food-fact-paper,.fitfoodie .ff-food-fact.is-breezy .ff-food-fact-paper::after{animation:none}
}
@media print{
 .fitfoodie .ff-food-fact-slot{padding:0;margin:24px 0 0}
 .fitfoodie .ff-food-fact{max-width:none;transform:none!important}
 .fitfoodie .ff-food-fact::before{display:none}
 .fitfoodie .ff-food-fact-paper{box-shadow:none;aspect-ratio:auto}
}
