/**
 * FollowDock Frontend Stylesheet
 *
 * Theme-proof, accessible CSS for social profile follow links, the floating bar
 * and share buttons. Pro styles live in frontend-pro__premium_only.css.
 *
 * @package FollowDock
 */

/* ==========================================================================
   1. Root Variables & Theme Resets
   ========================================================================== */

:root {
	--fdk-size: 48px;
	--fdk-icon-size: 24px;
	--fdk-gap: 8px;
	--fdk-zindex: 99999;
}

/* Base icon anchor reset: isolate from aggressive theme styling */
.fdk-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--fdk-size, 48px) !important;
	height: var(--fdk-size, 48px) !important;
	min-width: var(--fdk-size, 48px) !important;
	min-height: var(--fdk-size, 48px) !important;
	max-width: var(--fdk-size, 48px) !important;
	max-height: var(--fdk-size, 48px) !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 solid transparent !important;
	outline: none;
	text-decoration: none !important;
	line-height: 1 !important;
	box-sizing: border-box !important;
	cursor: pointer;
	background-color: var(--fdk-force-bg, var(--fdk-bg, #111214));
	color: var(--fdk-force-fg, var(--fdk-fg, #ffffff)) !important;
	border-radius: var(--fdk-radius, 0px);
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
	-webkit-tap-highlight-color: transparent;
	vertical-align: middle;
	position: relative;
	overflow: hidden;
}

/* SVG glyph styling */
.fdk-icon svg.fdk-icon-svg {
	width: var(--fdk-icon-size, 24px) !important;
	height: var(--fdk-icon-size, 24px) !important;
	max-width: var(--fdk-icon-size, 24px) !important;
	max-height: var(--fdk-icon-size, 24px) !important;
	display: block !important;
	fill: currentColor !important;
	pointer-events: none;
	margin: 0 auto !important;
	transform-origin: center center;
}

/* Keyboard accessibility (WCAG 2.2 AA) */
.fdk-icon:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 2px !important;
	z-index: 2;
}

/* ==========================================================================
   2. Container & Layout Wrappers
   ========================================================================== */

.fdk-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--fdk-gap, 8px);
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

/* Drop shadow */
.fdk-wrap.fdk-shadow .fdk-icon {
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22);
}

/* ==========================================================================
   3. Shapes
   ========================================================================== */

/* Square (Free) */
.fdk-shape-square .fdk-icon {
	border-radius: var(--fdk-radius, 0px);
}

/* Round (Free) */
.fdk-shape-round .fdk-icon {
	border-radius: 50% !important;
}

/* ==========================================================================
   4. Color Styles
   ========================================================================== */

/* Custom color preset */
.fdk-color-custom .fdk-icon {
	background-color: var(--fdk-force-bg, #111214);
	color: var(--fdk-force-fg, #ffffff) !important;
}

/* Individual link hover overrides */
@media (hover: hover) {
	.fdk-icon:hover {
		background-color: var(--fdk-force-hbg, var(--fdk-hbg, var(--fdk-force-bg, var(--fdk-bg, #111214))));
		color: var(--fdk-force-hfg, var(--fdk-hfg, var(--fdk-force-fg, var(--fdk-fg, #ffffff)))) !important;
	}
}

/* ==========================================================================
   5. Floating Follow Bar (#fdk-floating-bar)
   ========================================================================== */

#fdk-floating-bar,
.fdk-floating {
	position: fixed;
	z-index: var(--fdk-zindex, 99999);
	display: flex;
	box-sizing: border-box;
	pointer-events: auto;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Container box (Floating tab > Container). Unset vars keep the bar transparent and flush. */
#fdk-floating-bar {
	background: var(--fdk-bar-bg, transparent);
	padding: var(--fdk-bar-padding, 0);
	margin: var(--fdk-bar-margin, 0);
	border-radius: var(--fdk-bar-radius, 0);
}

/* Positions */
#fdk-floating-bar.fdk-pos-left {
	left: 0;
	right: auto;
	flex-direction: column;
}

#fdk-floating-bar.fdk-pos-right {
	right: 0;
	left: auto;
	flex-direction: column;
}

/* Vertical Alignments (Left & Right) */
#fdk-floating-bar.fdk-pos-left.fdk-valign-middle,
#fdk-floating-bar.fdk-pos-right.fdk-valign-middle {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
}

/* RTL Layout docking */
[dir="rtl"] #fdk-floating-bar.fdk-pos-left {
	left: auto;
	right: 0;
}
[dir="rtl"] #fdk-floating-bar.fdk-pos-right {
	right: auto;
	left: 0;
}

/* ==========================================================================
   6. Mobile Styles & Breakpoint (768px)
   ========================================================================== */

@media (max-width: 768px) {
	.fdk-hide-mobile {
		display: none !important;
	}

}

@media (min-width: 769px) {
	.fdk-hide-desktop {
		display: none !important;
	}
}

/* ==========================================================================
   7. Hover Animations (Respects prefers-reduced-motion)
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	/* None */
	.fdk-hover-none .fdk-icon:hover {
		opacity: 0.9;
	}

	/* Rotate (Free) */
	.fdk-hover-rotate .fdk-icon:hover {
		transform: rotate(360deg);
	}

}

/* Reduced motion guarantee (WCAG 2.2 AA) */
@media (prefers-reduced-motion: reduce) {
	.fdk-floating,
	.fdk-wrap,
	.fdk-icon,
	.fdk-icon svg {
		animation: none !important;
		transition: none !important;
		transform: none !important;
	}
}

/* ==========================================================================
   Share Buttons (SPEC §5.4)
   ========================================================================== */

/* <button> share actions (copy link, print, device share) share the icon reset. */
button.fdk-icon {
	-webkit-appearance: none !important;
	appearance: none !important;
	font: inherit !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	box-shadow: none;
}

.fdk-icon[hidden] {
	display: none !important;
}

.fdk-share {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 1em 0;
	padding: 0;
	list-style: none;
}
.fdk-share.fdk-align-center { justify-content: center; }
.fdk-share.fdk-align-right  { justify-content: flex-end; }

.fdk-share .fdk-share-icon svg.fdk-icon-svg {
	width: var(--fdk-icon-size, 17px) !important;
	height: var(--fdk-icon-size, 17px) !important;
	max-width: var(--fdk-icon-size, 17px) !important;
	max-height: var(--fdk-icon-size, 17px) !important;
	flex-shrink: 0;
}

/* Copied confirmation */
.fdk-copy-link.fdk-copied::after {
	content: "\2713";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: inherit;
	font-size: calc(var(--fdk-icon-size, 17px) * 1.1);
}

.fdk-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ==========================================================================
   Inline placements: shortcodes, widget, block (SPEC §5.5–5.7)
   ========================================================================== */

.fdk-inline {
	display: flex;
	margin: 1em 0;
}
.fdk-inline .fdk-wrap {
	flex-direction: row;
	flex-wrap: wrap;
}
.fdk-inline.fdk-align-center { justify-content: center; }
.fdk-inline.fdk-align-right  { justify-content: flex-end; }

.fdk-block .fdk-inline,
.fdk-block .fdk-share { margin: 0; }

.fdk-block-empty {
	padding: 12px 16px;
	border: 1px dashed #c3c4c7;
	color: #50575e;
	font-size: 13px;
}