/* v4.15.16 Layered illustrated Lunchadoo environment */
html{background:#268653}
#app{position:relative;isolation:isolate;overflow-x:clip;overflow-y:visible}
#app:before,#app:after{content:"";position:absolute;z-index:0;pointer-events:none;background:url('brand/lunchadoo-cloud.svg?rev=1') center/contain no-repeat;opacity:.72;filter:drop-shadow(0 8px 14px rgba(82,158,188,.08))}
#app:before{width:150px;height:78px;left:max(3vw,calc((100vw - 1440px)/2 - 110px));top:145px}
#app:after{width:125px;height:66px;right:max(4vw,calc((100vw - 1440px)/2 - 90px));top:275px;opacity:.58}
.app-shell{min-height:100vh;display:flex;flex-direction:column;position:relative;z-index:1;padding-bottom:0!important}

/* Every working screen stays above the raised footer art. */
.app-shell > *:not(footer){position:relative;z-index:3}

footer.lunchadoo-footer{width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;margin-top:auto!important;padding:0!important;overflow:visible!important;border-radius:0!important;min-height:clamp(285px,34vh,430px)!important;background:transparent!important;color:var(--lunchadoo-navy);position:relative;z-index:1}
.lunchadoo-footer-scene{height:100%;min-height:clamp(285px,34vh,430px);position:relative;overflow:visible;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 50%,rgba(230,247,233,.14) 62%,rgba(222,244,217,.34) 76%,rgba(214,240,198,.56) 88%,rgba(111,186,111,.72) 96%,#5aa56d 100%)}
/* Extend a solid ground fill well below the nominal footer box so any overflow/viewport area beneath the art stays the same green. */
.lunchadoo-footer-scene:after{content:"";position:absolute;z-index:0;left:0;right:0;bottom:-120px;height:220px;background:linear-gradient(180deg,rgba(90,165,109,0) 0%,rgba(73,151,95,.58) 34%,#268653 72%,#268653 100%);pointer-events:none}

.lunchadoo-footer-clouds,
.lunchadoo-footer-hills,
.lunchadoo-footer-foreground{position:absolute;left:0;width:100%;height:auto;max-width:none;pointer-events:none;user-select:none}
.lunchadoo-footer-clouds{z-index:1;top:-112px;opacity:.9}
.lunchadoo-footer-hills{z-index:2;right:0;bottom:-58px;filter:drop-shadow(0 -4px 16px rgba(65,139,75,.04))}
.lunchadoo-footer-foreground{z-index:7;right:0;bottom:-84px;filter:drop-shadow(0 -4px 10px rgba(62,126,55,.08))}

.lunchadoo-footer-sun{position:absolute;z-index:3;right:max(5.5%,calc((100vw - 1440px)/2 + 4.5%));top:18px;width:92px;height:92px;pointer-events:none}

/* Storybook plaque */
.lunchadoo-footer-hill{position:absolute!important;z-index:5!important;left:50%!important;bottom:-58px!important;transform:translateX(-50%)!important;width:min(780px,69vw)!important;height:194px!important;border-radius:52% 52% 8px 8px!important;border:3px solid rgba(126,193,96,.78)!important;background:linear-gradient(180deg,#fffef9 0%,#fffaf0 100%)!important;box-shadow:inset 0 0 0 3px rgba(255,255,255,.82),0 -6px 0 rgba(194,226,157,.38),0 -11px 28px rgba(53,123,68,.13),0 15px 34px rgba(66,126,54,.12)!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;padding:31px 34px 24px!important;text-align:center!important;overflow:visible!important}
.lunchadoo-footer-hill:before,.lunchadoo-footer-hill:after{position:absolute;z-index:7;bottom:-8px;font-size:37px;line-height:1;letter-spacing:-10px;filter:drop-shadow(0 4px 3px rgba(45,106,48,.12));pointer-events:none;white-space:nowrap}
.lunchadoo-footer-hill:before{content:"🌿🌼🌱";left:-20px;transform:rotate(-4deg)}
.lunchadoo-footer-hill:after{content:"🌱🌼🌿";right:-20px;transform:rotate(4deg)}
.lunchadoo-footer-hill b{font-size:23px;letter-spacing:-.25px;text-shadow:0 1px 0 rgba(255,255,255,.8)}
.lunchadoo-footer-hill em{font-style:normal;color:var(--lunchadoo-coral)}
.lunchadoo-footer-hill small{margin-top:5px;color:#658098;font-weight:750}
.lunchadoo-footer-meta{position:static!important;z-index:auto!important;margin-top:15px!important;padding:0!important;background:transparent!important;backdrop-filter:none!important;font-size:12px!important;color:#5f788e!important;text-align:center!important}
.lunchadoo-footer-mascot{position:absolute!important;z-index:8!important;right:max(7%,calc((100vw - 1440px)/2 + 5%))!important;bottom:14px!important;width:158px!important;height:140px!important;object-fit:contain!important;filter:drop-shadow(0 11px 10px rgba(7,59,103,.15))!important}

/* Very wide layouts leave more of the PNG overflow visible below the scene, so carry the ground farther down and lift the cloud layer slightly. */
@media(min-width:1301px){
  .lunchadoo-footer-scene:after{bottom:-190px;height:290px}
  .lunchadoo-footer-clouds{top:-136px}
}
@media(max-width:1200px){
  #app:before{left:2%;width:120px}#app:after{right:2%;width:105px}
  footer.lunchadoo-footer,.lunchadoo-footer-scene{min-height:315px!important}
  .lunchadoo-footer-clouds{top:-88px}
  .lunchadoo-footer-hills{bottom:-48px}
  .lunchadoo-footer-foreground{bottom:-68px}
  .lunchadoo-footer-hill{width:min(710px,75vw)!important;bottom:-50px!important;padding-top:27px!important}
  .lunchadoo-footer-hill:before,.lunchadoo-footer-hill:after{font-size:30px}
  .lunchadoo-footer-mascot{width:134px!important;height:118px!important;right:4%!important;bottom:10px!important}
  .lunchadoo-footer-sun{right:4%!important;width:78px;height:78px}
}
@media(max-width:760px){
  #app:before{width:82px;height:48px;left:1%;top:178px;opacity:.42}
  #app:after{display:none}
  .app-shell{min-height:100vh;padding-bottom:0!important}
  .lunchadoo-footer{border-radius:0!important}
  .lunchadoo-footer-scene{min-height:235px!important;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 44%,rgba(230,247,233,.12) 58%,rgba(222,244,217,.3) 74%,rgba(214,240,198,.5) 88%,rgba(111,186,111,.68) 96%,#5aa56d 100%)}
  .lunchadoo-footer-scene:after{bottom:-170px;height:250px;background:linear-gradient(180deg,rgba(90,165,109,0) 0%,rgba(73,151,95,.55) 34%,#268653 70%,#268653 100%)}
  .lunchadoo-footer-clouds{width:760px;left:50%;transform:translateX(-50%);top:-58px;opacity:.8}
  .lunchadoo-footer-hills{width:900px;left:50%;right:auto;transform:translateX(-50%);bottom:-65px}
  .lunchadoo-footer-foreground{width:900px;left:50%;right:auto;transform:translateX(-50%);bottom:-72px}
  .lunchadoo-footer-sun{width:55px;height:55px;top:17px!important;right:3%!important}
  .lunchadoo-footer-hill{width:86vw!important;height:150px!important;bottom:-44px!important;padding:22px 20px 14px!important;border-width:2px!important}
  .lunchadoo-footer-hill:before,.lunchadoo-footer-hill:after{font-size:21px;letter-spacing:-7px;bottom:-5px}
  .lunchadoo-footer-hill:before{left:-10px}.lunchadoo-footer-hill:after{right:-10px}
  .lunchadoo-footer-hill b{font-size:16px}.lunchadoo-footer-hill small{font-size:10px}
  .lunchadoo-footer-meta{font-size:9px!important;margin-top:9px!important;line-height:1.3}
  .lunchadoo-footer-mascot{width:94px!important;height:84px!important;right:1%!important;bottom:10px!important}
}