/* Gonnella Sample Widget — brand palette from the 2026 Brand Guidelines */
.gsw {
	--gsw-green: #177a3d;   /* De Koven Green */
	--gsw-green-dk: #055724;/* Erie Green */
	--gsw-deep: #033012;    /* Sangamon Green */
	--gsw-cream: #f8f3e1;   /* Fresh Cream */
	--gsw-gold: #e3b03d;    /* Golden Dough (accent only) */
	--gsw-ease: cubic-bezier(.2, .8, .2, 1);

	position: fixed;
	z-index: 9990;
	display: block;
	box-sizing: border-box;
	text-decoration: none !important;
	color: var(--gsw-cream);
	font-family: "Avenir Next", "Metropolis", Avenir, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-tap-highlight-color: transparent;
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s ease, transform .5s var(--gsw-ease), visibility 0s linear .5s;
}
.gsw *, .gsw *::before, .gsw *::after { box-sizing: border-box; }
.gsw.is-visible { opacity: 1; visibility: visible; transition-delay: 0s; }
/* Beat theme/Elementor link colors (e.g. .elementor-kit-N a) */
a.gsw, a.gsw:link, a.gsw:visited, a.gsw:hover, a.gsw:focus, a.gsw:active, a.gsw .gsw__label { color: var(--gsw-cream) !important; }
.gsw:focus { outline: none; }
.gsw:focus-visible { outline: 3px solid var(--gsw-gold); outline-offset: 4px; }

/* Baker mark: line art + cream "sticker" backing so it reads on any background */
.gsw .gsw-baker { display: block; width: 100%; height: auto; overflow: visible; }
.gsw .gsw-baker__fill { fill: var(--gsw-bfill, var(--gsw-cream)); }
.gsw .gsw-baker__line { fill: var(--gsw-bline, var(--gsw-green)); }
.gsw__baker { display: block; transition: transform .35s var(--gsw-ease); }
.gsw:hover .gsw__baker, .gsw:focus-visible .gsw__baker { transform: translateY(-5px); }

.gsw__body { display: block; transition: background-color .25s ease, padding .35s var(--gsw-ease); }
.gsw__label { display: block; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; line-height: 1.2; }
.gsw__l1, .gsw__l2 { display: block; }
.gsw__arrow { display: block; line-height: 0; color: var(--gsw-gold); }
.gsw__arrow svg { display: inline-block; }
.gsw--link .gsw__arrow svg { transform: rotate(-90deg); }

@keyframes gsw-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.gsw.is-visible .gsw__arrow svg { animation: gsw-nudge 1.8s ease-in-out 1s 3; }
.gsw--link.is-visible .gsw__arrow svg { animation: none; }

/* ---------------------------------------------------------------- *
 * 1. BADGE — round button, baker perched on top
 * ---------------------------------------------------------------- */
.gsw--badge {
	top: var(--gsw-top, 60%);
	right: 22px;
	width: 140px;
	transform: translate(30px, -50%);
}
.gsw--badge.is-visible { transform: translate(0, -50%); }
.gsw--badge .gsw__baker {
	position: relative;
	z-index: 2;
	width: 80px;
	margin: 0 auto -46px;
	filter: drop-shadow(0 3px 4px rgba(3, 48, 18, .28));
}
.gsw--badge .gsw__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 5px;
	width: 140px;
	height: 140px;
	padding-bottom: 20px;
	border-radius: 50%;
	text-align: center;
	background: var(--gsw-green);
	box-shadow: 0 0 0 4px var(--gsw-cream), 0 0 0 5px rgba(23, 122, 61, .4), 0 12px 26px rgba(3, 48, 18, .32);
}
.gsw--badge .gsw__label { font-size: 12.5px; }
.gsw--badge:hover .gsw__body, .gsw--badge:focus-visible .gsw__body { background: var(--gsw-green-dk); }

/* ---------------------------------------------------------------- *
 * 2. BUBBLE — baker with a speech bubble
 * ---------------------------------------------------------------- */
.gsw--bubble {
	top: var(--gsw-top, 60%);
	right: 18px;
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	transform: translate(30px, -50%);
}
.gsw--bubble.is-visible { transform: translate(0, -50%); }
.gsw--bubble .gsw__baker {
	flex: 0 0 auto;
	width: 94px;
	filter: drop-shadow(0 4px 6px rgba(3, 48, 18, .25));
}
.gsw--bubble .gsw__body {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 44px 14px 0 0;
	padding: 13px 18px 13px 20px;
	border-radius: 24px;
	white-space: nowrap;
	background: var(--gsw-green);
	box-shadow: 0 10px 24px rgba(3, 48, 18, .28);
	transform-origin: 100% 60%;
	transform: scale(.6);
	opacity: 0;
	transition: transform .45s var(--gsw-ease) .15s, opacity .3s ease .15s, background-color .25s ease;
}
.gsw--bubble.is-visible .gsw__body { transform: scale(1); opacity: 1; }
.gsw--bubble .gsw__body::after { /* tail pointing at the baker */
	content: "";
	position: absolute;
	right: -11px;
	top: 50%;
	width: 22px;
	height: 18px;
	margin-top: -4px;
	background: inherit;
	clip-path: polygon(0 0, 100% 55%, 0 100%);
}
.gsw--bubble .gsw__label {
	font-family: Lora, Georgia, "Times New Roman", serif;
	font-weight: 400;
	font-size: 19px;
	letter-spacing: 0;
	text-transform: none;
}
.gsw--bubble .gsw__l1, .gsw--bubble .gsw__l2 { display: inline; }
.gsw--bubble .gsw__arrow svg { transform: rotate(-90deg); }
.gsw--bubble.is-visible .gsw__arrow svg { animation: none; }
.gsw--bubble:hover .gsw__body, .gsw--bubble:focus-visible .gsw__body { background: var(--gsw-green-dk); }

/* ---------------------------------------------------------------- *
 * 3. TAB — vertical tab flush to the right edge
 * ---------------------------------------------------------------- */
.gsw--tab {
	top: var(--gsw-top, 60%);
	right: 0;
	width: 116px;
	padding: 18px 14px 16px 16px;
	border-radius: 20px 0 0 20px;
	text-align: center;
	background: var(--gsw-green);
	box-shadow: -6px 10px 26px rgba(3, 48, 18, .3);
	transform: translate(100%, -50%);
	transition: opacity .35s ease, transform .5s var(--gsw-ease), visibility 0s linear .5s, background-color .25s ease;
}
.gsw--tab.is-visible { transform: translate(0, -50%); }
.gsw--tab .gsw__baker { width: 74px; margin: 0 auto 12px; --gsw-bfill: transparent; --gsw-bline: var(--gsw-cream); }
.gsw--tab .gsw__body::before { content: ""; display: block; width: 30px; height: 2px; margin: 0 auto 11px; background: var(--gsw-gold); }
.gsw--tab .gsw__label { font-size: 13px; }
.gsw--tab .gsw__arrow { margin-top: 9px; }
.gsw--tab:hover, .gsw--tab:focus-visible { background: var(--gsw-green-dk); }

/* ---------------------------------------------------------------- *
 * 4. RIBBON — banner hanging vertically from the top of the screen
 * ---------------------------------------------------------------- */
.gsw--ribbon {
	top: var(--wp-admin--admin-bar--height, 0px);
	right: 40px;
	width: 112px;
	transform: translateY(-110%);
	filter: drop-shadow(0 8px 14px rgba(3, 48, 18, .3));
}
.gsw--ribbon.is-visible { transform: translateY(0); }
.gsw--ribbon .gsw__inner, .gsw--ribbon > .gsw__baker, .gsw--ribbon > .gsw__body { position: relative; }
.gsw--ribbon::before { /* the banner shape */
	content: "";
	position: absolute;
	inset: 0;
	background: var(--gsw-green);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 26px), 0 100%);
	transition: background-color .25s ease;
}
.gsw--ribbon::after { /* thin cream keyline, like the printed banner */
	content: "";
	position: absolute;
	inset: 0 6px 0 6px;
	border: 1px solid rgba(248, 243, 225, .45);
	border-top: 0;
	border-bottom: 0;
	pointer-events: none;
}
.gsw--ribbon .gsw__baker { width: 70px; margin: 0 auto; padding-top: 22px; --gsw-bfill: transparent; --gsw-bline: var(--gsw-cream); }
.gsw--ribbon .gsw__body { padding: 12px 10px 48px; text-align: center; }
.gsw--ribbon .gsw__body::before { content: ""; display: block; width: 28px; height: 2px; margin: 0 auto 11px; background: var(--gsw-gold); }
.gsw--ribbon .gsw__label { font-size: 12.5px; }
.gsw--ribbon .gsw__arrow { margin-top: 9px; }
.gsw--ribbon:hover .gsw__body, .gsw--ribbon:focus-visible .gsw__body { padding-bottom: 60px; }
.gsw--ribbon:hover::before, .gsw--ribbon:focus-visible::before { background: var(--gsw-green-dk); }
.gsw--ribbon:hover .gsw__baker, .gsw--ribbon:focus-visible .gsw__baker { transform: none; }

/* ---------------------------------------------------------------- *
 * Phones
 * ---------------------------------------------------------------- */
@media (max-width: 767px) {
	.gsw--no-mobile { display: none !important; }

	.gsw--badge { top: auto; bottom: 16px; right: 14px; width: 104px; transform: translateY(30px); }
	.gsw--badge.is-visible { transform: translateY(0); }
	.gsw--badge .gsw__baker { width: 60px; margin-bottom: -36px; }
	.gsw--badge .gsw__body { width: 104px; height: 104px; padding-bottom: 18px; }
	.gsw--badge .gsw__label { font-size: 10px; }
	.gsw--badge .gsw__arrow { display: none; }

	.gsw--bubble { top: auto; bottom: 12px; right: 10px; transform: translateY(30px); }
	.gsw--bubble.is-visible { transform: translateY(0); }
	.gsw--bubble .gsw__baker { width: 66px; }
	.gsw--bubble .gsw__body { margin: 30px 10px 0 0; padding: 10px 14px; gap: 6px; border-radius: 20px; }
	.gsw--bubble .gsw__label { font-size: 15px; }

	.gsw--tab { top: auto; bottom: 18px; width: 88px; padding: 12px 10px 12px 12px; border-radius: 16px 0 0 16px; transform: translateX(100%); }
	.gsw--tab.is-visible { transform: translateX(0); }
	.gsw--tab .gsw__baker { width: 52px; margin-bottom: 8px; }
	.gsw--tab .gsw__label { font-size: 10.5px; }
	.gsw--tab .gsw__arrow { display: none; }

	.gsw--ribbon { right: 16px; width: 86px; }
	.gsw--ribbon .gsw__baker { width: 52px; padding-top: 14px; }
	.gsw--ribbon .gsw__body { padding: 8px 6px 36px; }
	.gsw--ribbon .gsw__label { font-size: 10px; }
	.gsw--ribbon .gsw__arrow { display: none; }
}
/* Admin bar is not fixed on small screens */
@media (max-width: 600px) { .gsw--ribbon { top: 0; } }

@media (prefers-reduced-motion: reduce) {
	.gsw, .gsw__body, .gsw__baker { transition: opacity .2s ease, visibility 0s linear .2s !important; }
	.gsw.is-visible { transition: opacity .2s ease !important; }
	.gsw .gsw__arrow svg { animation: none !important; }
	.gsw:hover .gsw__baker { transform: none; }
}

@media print { .gsw { display: none !important; } }
