/*
* LittleLink Button Styles
* https://littlelink.io
* Free to use under the MIT license
* http://www.opensource.org/licenses/mit-license.php
*/

/* Brand Button Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Only include brand-specific button styling here */
.button,button {
  color:var(--button-text,#000000);
  background-color:var(--button-background,transparent);
	border:var(--button-border,none);
	transition:filter 200ms ease, transform 200ms ease, box-shadow 200ms ease;
	will-change: filter, transform, box-shadow;
	/* prepare for animated overlay/gloss */
	position:relative;
	overflow:hidden;
}

/* Global Button Hover Effect
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button:hover, .button:focus-visible, button:hover, button:focus-visible {
	/* Slightly brighter and lift on hover/focus for better affordance */
	filter: brightness(1.08);
	transform: translateY(-3px) scale(1.02);
	/* Subtle shadow to give depth; uses a neutral shadow so it works on most brand colors */
	box-shadow: 0 8px 20px rgba(11,35,70,0.12);
}

/* Focus-visible for keyboard users: clear focus ring that works on all backgrounds */
.button:focus-visible, button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(72,153,247,0.18), 0 8px 20px rgba(11,35,70,0.12);
}

/* Subtle gloss/halo overlay that brightens buttons on hover (works with most brand colors) */
.button::after {
	content: "";
	position: absolute;
	left: -30%;
	top: -50%;
	width: 160%;
	height: 200%;
	pointer-events: none;
	mix-blend-mode: overlay;
	background: radial-gradient(40% 30% at 10% 20%, rgba(255,255,255,0.14), rgba(255,255,255,0.06) 20%, transparent 40%);
	opacity: 0;
	transform: translateY(8%) scale(0.98);
	transition: opacity 220ms ease, transform 300ms cubic-bezier(.2,.9,.3,1);
}

.button:hover::after, .button:focus-visible::after {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.button:active {
	transform: translateY(-1px) scale(0.995);
}

/* Button Icons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.icon {
	filter:var(--icon-filter,none);
}

/* Brand-Specific Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Default */
.button.button-default {
  --button-text:#fff;
  --button-background:#2457F5;
  --button-border:1px solid #ffffff;
}

/* About Us */
.button-about-us {
  --button-text:#000;
  --button-background:#e5d3b6;
  --button-border:1px solid #fff;
}

/* Bandcamp */
.button-bandcamp {
  --button-text:#ffffff;
  --button-background:#1d9fc3;
}

/* Events */
.button-events {
  --button-text:#ffffff;
  --button-background:#c065f4;
  --button-border:1px solid #ffffff;
}

/* Facebook */
.button-faceb {
  --button-text:#ffffff;
  --button-background:#0866FF;
}

/* Instagram */
.button-instagram {
  --button-text:#ffffff;
  background-image:linear-gradient(-135deg,#1400c8,#b900b4,#f50000);
}

/* Life Groups */
.button-life-groups {
  --button-text:#ffffff;
  --button-background:#048261;
  --button-border:1px solid #ffffff;
}

/* Giving */
.button-giving {
  --button-text:#000000;
  --button-background:#a9b391;
  --button-border:1px solid #fff;
}

/* Web */
.button-web {
  --button-text:#fff;
  --button-background:#b53424;
  --button-border:1px solid #fff;
}

/* YouTube */
.button-yt {
  --button-text:#ffffff;
  --button-background:#282828;
  --button-border:1px solid #FFFFFF;
}

/* Web */
.button-web {
	--button-text:#fff;
	--button-background:#b53424;
	--button-border:1px solid #fff;
}

/* WhatsApp */
.button-whatsapp {
	--button-text:#ffffff;
	--button-background:#455a64;
}

/* WordPress */
.button-wordpress {
	--button-text:#ffffff;
	--button-background:#3858E9;
}

/* X */
.button-x {
	--button-text:#FFFFFF;
	--button-background:#000000;
	--button-border:1px solid #FFFFFF;
}

/* YouTube */
.button-yt {
	--button-text:#ffffff;
	--button-background:#282828;
	--button-border:1px solid #FFFFFF;
}

/* YouTube Alt */
.button-yt-alt {
	--button-text:#ffffff;
	--button-background:#FF0000;
}

/* Zoom */
.button-zoom {
	--button-text:#ffffff;
	--button-background:#0B5CFF;
  --button-border:1px solid #FFFFFF;
}