/**
 * Dutchies — UI enhancements (styles)
 * Back-to-top button + per-flavor social share.
 * Uses the brand tokens from the Style Guide (§06, §09, §12, §14).
 */

:root {
	--du-orange:      #FF7A00;
	--du-orange-dk:   #E25C00;
	--du-ink:         #1B1B1B;
	--du-lemon-dk:    #E0A800;
	--du-buffalo:     #FF4D1A;
	--du-pork:        #9E2A3B;
	--du-beef:        #6E4329;
	--du-ease:        cubic-bezier( 0.4, 0, 0.2, 1 );
}

/* ============================================================
 * 1 · BACK TO TOP
 * ============================================================ */
.dutchies-totop {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 999;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0;
	padding: 0;
	color: #fff;
	background: var(--du-orange);
	border: 0;
	border-radius: 50%;              /* true circle — brand round system */
	box-shadow: 0 6px 20px rgba( 0, 0, 0, .22 );
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY( 12px ) scale( .9 );
	transition: opacity .22s var(--du-ease),
		transform .22s var(--du-ease),
		visibility .22s var(--du-ease),
		background-color .15s var(--du-ease);
}
.dutchies-totop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 ) scale( 1 );
}
.dutchies-totop:hover {
	background: var(--du-orange-dk);
	transform: translateY( -3px );
}
.dutchies-totop:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}
.dutchies-totop svg { display: block; }
.dutchies-totop:hover svg { animation: du-nudge .5s var(--du-ease); }

@keyframes du-nudge {
	0%, 100% { transform: translateY( 0 ); }
	40%      { transform: translateY( -3px ); }
}

@media ( max-width: 600px ) {
	.dutchies-totop { right: 16px; bottom: 16px; width: 48px; height: 48px; }
}
@media print { .dutchies-totop { display: none; } }
@media ( prefers-reduced-motion: reduce ) {
	.dutchies-totop { transition: opacity .001s, visibility .001s; transform: none; }
	.dutchies-totop.is-visible { transform: none; }
	.dutchies-totop:hover { transform: none; }
	.dutchies-totop:hover svg { animation: none; }
}

/* ============================================================
 * 2 · SOCIAL SHARE
 * ============================================================ */
.dutchies-share {
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: 1rem;
}
.dutchies-share--inline { justify-content: flex-start; margin-top: 1.25rem; }

/* Trigger — "white on flavor" pill button (Style Guide §12). */
.dutchies-share__btn {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: 9px 18px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--du-ink);
	background: #fff;
	border: 0;
	border-radius: 100px;            /* pill */
	box-shadow: 0 2px 8px rgba( 0, 0, 0, .12 );
	cursor: pointer;
	transition: transform .15s var(--du-ease), box-shadow .15s var(--du-ease),
		background-color .15s var(--du-ease);
}
.dutchies-share__btn svg { width: 16px; height: 16px; }
.dutchies-share__btn:hover {
	transform: translateY( -2px );
	box-shadow: 0 6px 16px rgba( 0, 0, 0, .18 );
	background: #FFF6E9;
}
.dutchies-share__btn:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }

/* Tint the trigger text to the active flavor color. */
.dutchies-share.is-flavor-lemon   .dutchies-share__btn { color: var(--du-lemon-dk); }
.dutchies-share.is-flavor-buffalo .dutchies-share__btn { color: var(--du-buffalo); }
.dutchies-share.is-flavor-pork    .dutchies-share__btn { color: var(--du-pork); }
.dutchies-share.is-flavor-beef    .dutchies-share__btn { color: var(--du-beef); }

/* Fallback menu (desktop / browsers without the native share sheet). */
.dutchies-share__menu {
	position: absolute;
	bottom: calc( 100% + 10px );
	left: 50%;
	transform: translateX( -50% ) translateY( 6px );
	display: flex;
	gap: 8px;
	padding: 10px;
	background: #fff;
	border-radius: 16px;             /* --radius-md */
	box-shadow: 0 10px 30px rgba( 0, 0, 0, .22 );
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .18s var(--du-ease), transform .18s var(--du-ease),
		visibility .18s var(--du-ease);
	z-index: 5;
}
.dutchies-share--inline .dutchies-share__menu { left: 0; transform: translateY( 6px ); }
.dutchies-share.is-open .dutchies-share__menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX( -50% ) translateY( 0 );
}
.dutchies-share--inline.is-open .dutchies-share__menu { transform: translateY( 0 ); }
/* Little pointer under the menu. */
.dutchies-share__menu::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX( -50% );
	border: 7px solid transparent;
	border-top-color: #fff;
}
.dutchies-share--inline .dutchies-share__menu::after { left: 26px; }

/* Round network buttons. */
.dutchies-share__net {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: #fff;
	background: var(--du-ink);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	text-decoration: none;
	transition: transform .15s var(--du-ease), filter .15s var(--du-ease);
}
.dutchies-share__net:hover { transform: translateY( -2px ); filter: brightness( 1.08 ); }
.dutchies-share__net:focus-visible { outline: 3px solid var(--du-orange); outline-offset: 2px; }
.dutchies-share__net--x        { background: #000; }
.dutchies-share__net--facebook { background: #1877F2; }
.dutchies-share__net--whatsapp { background: #25D366; }
.dutchies-share__net--link     { background: var(--du-orange); }
.dutchies-share__net.is-copied { background: #2EA84F; }

@media ( prefers-reduced-motion: reduce ) {
	.dutchies-share__btn,
	.dutchies-share__net,
	.dutchies-share__menu { transition: opacity .001s, visibility .001s; }
	.dutchies-share__btn:hover,
	.dutchies-share__net:hover { transform: none; }
}


/* === VF tweak (temp): share button into text-column flow, under attributes. Remove at go-live; replace with reusable share block === */
.dutchies-share{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;margin-top:1.25rem!important;transform:none!important;align-self:flex-start!important;clear:both!important;}


/* === VF tweak: Fluent Forms submit button → Dutchies brand (was default blue) === */
.fluentform .ff-btn-submit, .fluentform button[type="submit"], .ff-el-group .ff-btn-submit, .ff_btn_style{background-color:#FF8000 !important;border-color:#FF8000 !important;color:#161208 !important;border-radius:999px !important;font-weight:800 !important;text-transform:uppercase !important;letter-spacing:.03em !important;box-shadow:none !important;}
.fluentform .ff-btn-submit:hover, .fluentform button[type="submit"]:hover, .ff_btn_style:hover{background-color:#D96800 !important;border-color:#D96800 !important;color:#ffffff !important;}


/* === VF tweak: mobile flavor-wall fits 2x2 (all 4 visible, no overflow) === */
@media (max-width:760px){
  .dw-wall .dw-row{ grid-template-columns:repeat(2,1fr) !important; }
  .dw-wall .dw-tile{ min-width:0 !important; }
}