/* Ko-fi support button, support panel and partner travel cards.
   Loaded after cake-ui.css; reuses its tokens and macaron colour rotation. */

/* ---------- Candy support button (header + panel) ---------- */
:root #top .support-button{--cake-tint:var(--cake-icing-peach);--cake-rim-c:var(--cake-rim-peach);--cake-led:var(--cake-glow-peach);
 display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:6px 16px 6px 12px;
 border:3px dotted #fff;border-radius:var(--cake-r-m);color:var(--cake-ink);font-weight:750;font-size:14px;line-height:1.15;text-decoration:none;white-space:nowrap;
 background-color:var(--cake-tint);background-image:var(--frost-noise),var(--cake-sheen),linear-gradient(170deg,color-mix(in srgb,var(--cake-tint) 40%,#fff) 0,var(--cake-tint) 72%);
 box-shadow:var(--cake-bevel);isolation:isolate;
 transition:transform var(--cake-t-base) var(--cake-ease),box-shadow var(--cake-t-base) ease}
:root #top .support-icon{flex:none;width:24px;height:24px;filter:drop-shadow(0 1px 0 #fff)}
@media(hover:hover){:root #top .support-button:hover{transform:translateY(-2px);box-shadow:var(--cake-bevel-lift)}}
:root #top .support-button:active{transform:translateY(4px) scale(1.03,.93);box-shadow:var(--cake-bevel-press);transition-duration:var(--cake-t-fast)}
:root #top .header .support-header{padding-block:4px;font-size:13px}

/* ---------- Support panel above the footer ---------- */
:root #top .support-panel{display:flex;align-items:center;justify-content:space-between;gap:18px 28px;flex-wrap:wrap;
 width:calc(100% - 32px);max-width:1680px;margin:20px auto 28px;padding:24px 30px;
 border:3px solid #fff;border-radius:var(--cake-r-l);color:var(--cake-ink);
 background-color:#ffe6f0;background-image:var(--cake-beads),var(--cake-sugar),var(--cake-sheen),linear-gradient(140deg,#ffe3ee,#fff1f7 60%,#ebe3ff);
 background-size:18px 9px,var(--cake-sugar-size),auto,auto,auto;background-repeat:repeat-x,repeat,repeat,no-repeat,no-repeat,no-repeat;
 box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.85),0 6px 0 #eaa2c3,0 9px 0 #fff,0 13px 0 #eaa2c3,0 24px 40px rgba(110,48,96,.14)}
:root #top .support-copy{flex:1 1 280px;min-width:0}
:root #top .support-panel h2{margin:0 0 4px;font-size:24px;font-weight:600;line-height:1.2;letter-spacing:-.02em;color:var(--cake-berry)}
:root #top .support-panel p{margin:0;font-size:15px;line-height:1.5;color:var(--cake-ink-muted)}
:root #top .support-cta{font-size:15px;padding-inline:14px 20px;min-height:48px}

/* ---------- Plan your trip ---------- */
:root #top .plan-trip.section-card{--jar-a:#fff4d9;--jar-b:#fffaf0;--jar-rim:#e3bf6a}
:root #top .plan-trip>h2{font-size:33px;font-weight:580;letter-spacing:-.025em;margin:0 0 10px}
:root #top .plan-trip .section-intro{color:var(--cake-ink-muted)}
:root #top .partner-disclosure{display:inline-flex;align-items:center;margin:2px 0 18px;padding:5px 12px;border:2px solid #fff;border-radius:999px;
 background:rgba(255,255,255,.82);color:var(--cake-ink);font-size:13px;font-weight:700;line-height:1.3;box-shadow:0 3px 0 var(--jar-rim)}
:root #top .partner-preview{margin:0 0 18px;padding:10px 14px;border:2px dashed var(--cake-rim-butter);border-radius:var(--cake-r-s);background:#fffaf0;color:var(--cake-ink);font-size:14px;font-weight:650}
:root #top .partner-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}

/* Cards: macaron slabs, one flavour each (set from partners.js `accent`). */
:root #top .partner-card{--slab:var(--cake-icing-peach);--slab-rim:var(--cake-rim-peach);
 display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;padding:22px;
 border:2px solid #fff;border-radius:var(--cake-r-l);color:var(--cake-ink);
 background-color:color-mix(in srgb,var(--slab) 60%,#fff);
 background-image:var(--cake-beads),var(--cake-sugar),var(--cake-sheen),linear-gradient(165deg,color-mix(in srgb,var(--slab) 30%,#fff),color-mix(in srgb,var(--slab) 70%,#fff) 70%);
 background-size:18px 9px,var(--cake-sugar-size),auto,auto,auto;background-repeat:repeat-x,repeat,repeat,no-repeat,no-repeat,no-repeat;
 box-shadow:inset 0 2px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.7),inset 0 -5px 10px rgba(255,255,255,.4),0 6px 0 var(--slab-rim),0 14px 24px rgba(110,48,96,.16)}
:root #top .partner-card[data-accent=mint]{--slab:var(--cake-icing-mint);--slab-rim:var(--cake-rim-mint)}
:root #top .partner-card[data-accent=lilac]{--slab:var(--cake-icing-lilac);--slab-rim:var(--cake-rim-lilac)}
:root #top .partner-card[data-accent=butter]{--slab:var(--cake-icing-butter);--slab-rim:var(--cake-rim-butter)}
:root #top .partner-card[data-accent=blue]{--slab:var(--cake-icing-blue);--slab-rim:var(--cake-rim-blue)}
:root #top .partner-card[data-placeholder=true]{outline:2px dashed var(--cake-rim-butter);outline-offset:4px}
:root #top .partner-title{margin:0;font-size:19px;font-weight:650;line-height:1.25;color:var(--cake-ink)}
:root #top .partner-text{margin:0;font-size:15px;line-height:1.5;color:var(--cake-ink)}
:root #top .partner-name{margin:0 0 6px;font-size:13px;color:var(--cake-ink-muted)}
:root #top .partner-brand{font-weight:800;color:var(--cake-ink)}
:root #top .partner-book{--cake-tint:#fff;--cake-rim-c:var(--slab-rim);--cake-led:var(--slab);
 margin-top:auto;display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:96px;justify-content:center;padding:6px 18px;
 border:3px dotted var(--slab-rim);border-radius:var(--cake-r-m);color:var(--cake-ink);font-weight:800;font-size:15px;text-decoration:none;
 background-color:#fff;background-image:var(--cake-sheen);box-shadow:var(--cake-bevel);
 transition:transform var(--cake-t-base) var(--cake-ease),box-shadow var(--cake-t-base) ease}
:root #top .partner-card :is(a,button):focus-visible{outline-color:var(--cake-focus-deep)}
@media(hover:hover){:root #top .partner-book:hover{transform:translateY(-2px);box-shadow:var(--cake-bevel-lift)}}
:root #top .partner-book:active{transform:translateY(4px) scale(1.03,.93);box-shadow:var(--cake-bevel-press);transition-duration:var(--cake-t-fast)}

/* ---------- Breakpoints (site uses 1100 / 767) ---------- */
@media(max-width:1100px){:root #top .partner-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){
 :root #top .plan-trip>h2{font-size:27px}
 :root #top .partner-grid{grid-template-columns:1fr;gap:16px}
 :root #top .partner-card{padding:18px;border-radius:var(--cake-r-m)}
 /* Header: icon-only cup on phones; the label stays for screen readers and the full button lives in the support panel. */
 :root #top .header .support-header{width:44px;height:44px;padding:0;gap:0}
 :root #top .header .support-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
 :root #top .support-panel{padding:20px 18px;margin-top:20px;border-radius:var(--cake-r-m)}
 :root #top .support-panel h2{font-size:21px}
 :root #top .support-cta{width:100%}
}

/* ---------- Motion off ---------- */
@media(prefers-reduced-motion:reduce){
 :root #top :is(.support-button,.partner-book),:root #top :is(.support-button,.partner-book):is(:hover,:active){transform:none!important;transition:none!important;animation:none!important}
}
:root[data-motion=paused] #top :is(.support-button,.partner-book){transition:none}

@media(forced-colors:active){:root #top :is(.support-button,.partner-book,.partner-card,.partner-disclosure){border:2px solid CanvasText}}
@media print{:root #top :is(.support-header,.support-panel,.plan-trip){display:none!important}}