/* YALI CAKES: additions on top of the original design.
   Top menu, a soft pink glow behind the sections after the opening video,
   the large Y logo behind a few sections, and the FAQ layout. */

:root{
  --yp-cocoa:#694B3A;
  --yp-ink:#3B2A20;
  --yp-muted:#735A4B;
  --yp-blush:#FAE4EA;
  --yp-pink:#F4C3D1;
  --yp-rose:#E3A9BB;
  --yp-cream:#FFF9FA;
  --yp-pcream:#FCF0F3;
  --yp-line:rgba(105,75,58,.14);
  --yp-ease:cubic-bezier(.2,.7,.2,1);
  --yp-ease-io:cubic-bezier(.76,0,.24,1);
  --yp-gutter:clamp(16px,4vw,48px);
  --yp-head:76px;
}
html{scroll-padding-top:calc(var(--yp-head) + 8px)}

/* ---------- Top menu ---------- */
.topbar{display:none!important}
#top.hero-full>header{display:none!important}

.yp-head{position:fixed;inset:0 0 auto 0;z-index:100;color:var(--yp-ink);font-family:'Heebo',system-ui,sans-serif;transition:transform .6s var(--yp-ease),padding .5s var(--yp-ease)}
.yp-head *{box-sizing:border-box}
.yp-head-in{width:100%;max-width:1320px;margin:0 auto;padding-inline:var(--yp-gutter);height:var(--yp-head);display:flex;align-items:center;justify-content:space-between;gap:24px;border-radius:0;transition:background-color .5s ease,box-shadow .5s ease,max-width .6s var(--yp-ease),height .5s var(--yp-ease),border-radius .5s ease}
.yp-head.is-stuck{padding-top:10px}
.yp-head.is-stuck .yp-head-in{max-width:1180px;height:64px;border-radius:999px;background:rgba(255,249,250,.84);-webkit-backdrop-filter:saturate(1.5) blur(16px);backdrop-filter:saturate(1.5) blur(16px);box-shadow:0 0 0 1px var(--yp-line),0 18px 40px -26px rgba(59,42,32,.35)}
.yp-head.is-hidden{transform:translateY(-130%)}
.yp-brand{display:inline-flex;line-height:0;border-radius:8px}
.yp-brand img{height:42px;width:auto;display:block;transition:transform .6s var(--yp-ease)}
@media (hover:hover){.yp-brand:hover img{transform:rotate(-8deg)}}
.yp-nav{display:flex;align-items:center;gap:6px 34px;font-size:15px;font-weight:500}
.yp-link{position:relative;text-decoration:none;color:inherit;padding:10px 0;min-height:44px;display:inline-flex;align-items:center}
.yp-link::after{content:"";position:absolute;right:0;left:0;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--yp-ease)}
.yp-link.is-current::after{transform:scaleX(1)}
@media (hover:hover){.yp-link:hover::after{transform:scaleX(1)}}
.yp-soc-row{display:inline-flex;gap:4px;margin-inline-start:6px;padding-inline-start:22px;border-inline-start:1px solid var(--yp-line)}
.yp-soc{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:inherit;text-decoration:none;transition:background-color .25s ease,transform .4s var(--yp-ease)}
.yp-soc svg{display:block}
@media (hover:hover){.yp-soc:hover{background:var(--yp-blush);transform:translateY(-2px)}}
.yp-head :focus-visible{outline:2px solid var(--yp-cocoa);outline-offset:3px}

/* Phones and tablets: the section links stay in the bar (no hamburger). The social icons
   move out of the bar on phones; they are also in the footer. */
@media (max-width:900px){
  .yp-head-in{gap:16px}
  .yp-head.is-stuck .yp-head-in{margin-inline:10px;width:auto;padding-inline:16px}
  .yp-brand img{height:38px}
  .yp-nav{gap:0 22px;min-width:0;overflow-x:auto;scrollbar-width:none;white-space:nowrap;padding:6px 4px;margin:-6px -4px}
  .yp-nav::-webkit-scrollbar{display:none}
  .yp-link{flex:none}
}
@media (max-width:600px){
  .yp-nav{gap:0 16px;font-size:15px}
  .yp-soc-row{display:none}
}
@media (max-width:374px){
  .yp-head-in{gap:10px}
  .yp-head.is-stuck .yp-head-in{padding-inline:12px}
  .yp-brand img{height:34px}
  .yp-nav{gap:0 12px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){.yp-head,.yp-head *{transition:none!important}}

/* ---------- Opening section: the original full-width video; only make room for the fixed menu ---------- */
#top.hero-full{padding-top:var(--yp-head)}

/* ---------- Soft pink glow behind the other sections ---------- */
html body section#cakes,html body section#desserts{background:
  radial-gradient(55% 45% at 12% 18%,rgba(244,195,209,.8),rgba(255,249,250,0) 70%),
  radial-gradient(40% 35% at 92% 70%,rgba(244,195,209,.45),rgba(255,249,250,0) 70%),
  #FFF9FA!important}
html body section#workshops,html body section#about{background:
  radial-gradient(55% 50% at 88% 22%,rgba(244,195,209,.85),rgba(252,240,243,0) 70%),
  radial-gradient(45% 40% at 10% 80%,rgba(244,195,209,.5),rgba(252,240,243,0) 70%),
  #FCF0F3!important}
html body section#desserts{background:
  radial-gradient(55% 50% at 85% 25%,rgba(244,195,209,.8),rgba(255,249,250,0) 70%),
  radial-gradient(40% 40% at 15% 85%,rgba(244,195,209,.45),rgba(255,249,250,0) 70%),
  #FFF9FA!important}

/* ---------- The large Y logo behind sections, on alternating sides ---------- */
#cakes,#workshops,#about{isolation:isolate;overflow-x:clip}
#cakes::after,#workshops::after,#about::after{content:"";position:absolute;z-index:-1;top:6%;width:min(560px,60vw);aspect-ratio:399/443;background:url(./assets/943e4356ed84118b907593c91ed4892b.svg) center/contain no-repeat;opacity:.05;pointer-events:none}
#cakes::after{left:-6%}
#workshops::after{right:-6%;top:10%}
#about::after{left:-5%;top:12%}

/* ---------- FAQ ---------- */
#faq.faq{background:
  radial-gradient(50% 55% at 15% 30%,rgba(244,195,209,.8),rgba(252,240,243,0) 70%),
  radial-gradient(40% 40% at 90% 85%,rgba(244,195,209,.5),rgba(252,240,243,0) 70%),
  var(--yp-pcream)!important}
#faq .faq-in{max-width:1320px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:clamp(32px,6vw,96px);align-items:start;padding-top:clamp(64px,8vw,120px);padding-bottom:clamp(88px,10vw,150px);padding-inline:var(--yp-gutter)}
#faq .faq-in>h2{grid-column:1;grid-row:1 / span 20;position:sticky;top:calc(var(--yp-head) + 40px);margin:0;font-size:clamp(34px,5vw,72px);line-height:1.02;letter-spacing:-.035em}
#faq .faq-in>details{grid-column:2;border:0;border-bottom:1px solid var(--yp-line);box-shadow:none!important;overflow:hidden}
#faq .faq-in>h2+details{border-top:1px solid var(--yp-line)}
#faq .faq-in>details:last-child{border-bottom:1px solid var(--yp-line)}
#faq summary{justify-content:space-between;gap:24px;min-height:44px;padding:28px 0;font-size:clamp(17px,1.7vw,22px);font-weight:600;letter-spacing:-.01em;transition:color .3s ease}
@media (hover:hover){#faq summary:hover{color:var(--yp-cocoa)}}
#faq summary::after,html.fx #faq summary::after{content:"";flex:none;margin-inline-start:0;width:44px;height:44px;border-radius:50%;background:linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat,#FFFFFF;box-shadow:0 0 0 1px var(--yp-line);color:var(--yp-ink);transform:none;transition:transform .5s var(--yp-ease)}
#faq details[open] summary::after,html.fx #faq details[open] summary::after{content:"";transform:rotate(45deg)}
#faq details p{margin:0;padding:0 0 30px;max-width:40em;color:var(--yp-muted);font-size:17px}
@media (max-width:900px){
  #faq .faq-in{grid-template-columns:1fr}
  #faq .faq-in>h2{grid-column:1;grid-row:auto;position:static;margin-bottom:28px}
  #faq .faq-in>details{grid-column:1}
}

/* ---------- Design review fixes ---------- */

/* Reduced motion: the design export's scroll-linked animations (hero zoom, heading unmask,
   card lift, progress bar) run unless the motion layer is active, so switch them off here. */
@media (prefers-reduced-motion:reduce){
  h1,h2,.typecard,#order-panel,#quote,#dessert-quote,#workshops ul,#workshops [style*="grid-template-columns"]>div,#contact ul>li,
  .ph,#desserts svg[role="img"],.marq-track,.hero-full .banner-video,.hero-full>div,.progress,
  #cakes>div,#workshops>div,#desserts>div,#about>div,#faq>div{animation:none!important}
  .progress{display:none}
}

/* The small Y above each section goes; the space it held stays. */
#cakes::before,#workshops::before,#desserts::before,#about::before,#faq::before{background:none!important}

/* Quote forms: a narrower card, centred, instead of a full-width card with an empty half. */
#quote,#dessert-quote{width:100%;max-width:760px;margin-inline:auto;box-sizing:border-box}

/* Gallery arrows (hidden by yali-plus.js when everything already fits): on phones they sit in a row under the
   gallery instead of on top of the cards and photos. */
@media (max-width:600px){
  .gal{padding-bottom:56px}
  .gal .gal-btn{top:auto;bottom:0;transform:none}
  .gal .gal-prev{right:auto;left:calc(50% + 6px)}
  .gal .gal-next{left:auto;right:calc(50% + 6px)}
}

/* Footer copyright: #5E4637 on #F4C3D1 is 5.6:1 (was 4.1:1). */
footer span[style*="735A4B"]{color:#5E4637!important}

/* Footer terms, privacy and accessibility: the same round + as the FAQ. */
#legal details{overflow:hidden}
#legal summary{list-style:none;justify-content:space-between;gap:24px;padding:10px 0;transition:color .3s ease}
@media (hover:hover){#legal summary:hover{color:var(--yp-cocoa)}}
#legal summary::after,#legal details[open]>summary::after{content:"";font-size:0;flex:none;margin-inline-start:0;width:44px;height:44px;border-radius:50%;background:linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat,#FFFFFF;box-shadow:0 0 0 1px var(--yp-line);color:var(--yp-ink);transition:transform .5s var(--yp-ease)}
#legal details[open]>summary::after{transform:rotate(45deg)}

/* Phone: keep the summary's WhatsApp button on one line. */
@media (max-width:520px){#order-panel aside .cta{white-space:nowrap;padding-inline-start:18px!important;font-size:17px}}