/* Scroll Guide for Wedding Photography v1.3 */

.sgw-btn {
	--sgw-ink: #fffaf3;
	--sgw-ts: 0 1px 6px rgba(0, 0, 0, 0.35);
	--sgw-fs: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35));
	all: unset;
	box-sizing: border-box;
	position: fixed;
	bottom: calc(var(--sgw-bottom, 32px) + env(safe-area-inset-bottom, 0px));
	z-index: 2147483000;
	padding: 12px 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: var(--sgw-ink);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	touch-action: manipulation;
	transition: opacity 1s ease, visibility 0s linear 1s, color 0.5s ease;
	-webkit-tap-highlight-color: transparent;
}

/* Fixed styles */
.sgw-theme-noir { --sgw-ink: #2b2623; --sgw-ts: none; --sgw-fs: none; }

/* Adaptive: light ink on dark areas, dark ink on light areas */
.sgw-theme-auto[data-tone="light"] { --sgw-ink: #26211e; --sgw-ts: none; --sgw-fs: none; }
/* If the background cannot be read (e.g. cross-site images), invert against whatever is behind */
.sgw-theme-auto[data-tone="auto"] { --sgw-ink: #fff; --sgw-ts: none; --sgw-fs: none; mix-blend-mode: difference; }

.sgw-pos-center { left: 0; right: 0; margin-inline: auto; width: max-content; }
.sgw-pos-left   { left: clamp(10px, 3vw, 30px); }
.sgw-pos-right  { right: clamp(10px, 3vw, 30px); }

.sgw-btn.sgw-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.sgw-label {
	font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 500;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.12em;
	white-space: nowrap;
	text-shadow: var(--sgw-ts);
}

.sgw-chevron {
	display: block;
	width: 38px;
	height: 9px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1;
	stroke-linecap: butt;
	stroke-linejoin: miter;
	filter: var(--sgw-fs);
	animation: sgw-breathe 3s ease-in-out infinite;
}

@keyframes sgw-breathe {
	0%, 100% { opacity: 0.35; }
	50%      { opacity: 1; }
}

/* No hover or tap fill: the button keeps its colour. Keyboard focus gets a hairline ring only. */
.sgw-btn:focus { outline: none; }
.sgw-btn:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }

@media (max-width: 600px) {
	.sgw-label { font-size: 13px; }
	.sgw-chevron { width: 34px; }
}

@media (prefers-reduced-motion: reduce) {
	.sgw-btn { transition: opacity 0.2s linear, visibility 0s linear 0.2s; }
	.sgw-btn.sgw-visible { transition-delay: 0s; }
	.sgw-chevron { animation: none; }
}

/* Some themes and page builders paint every <button> on hover, focus and tap
   (that was the tan box). These rules are more specific than theirs, so the
   button always stays transparent. */
button.sgw-btn,
button.sgw-btn:hover,
button.sgw-btn:focus,
button.sgw-btn:active,
button.sgw-btn:focus-visible {
	-webkit-appearance: none;
	appearance: none;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--sgw-ink) !important;
	text-decoration: none !important;
	text-transform: none !important;
}