/*doc
---
title: Ananda Share
name: ananda-x-share
category: Ananda Widgets
---

*/

/* Start the widget below anything floated before it, rather than beside it. */
.ananda-x-share {
	clear: both;
}

/* Hide on smaller screens, which would be tablets or mobile and have their own share features */

@media ( max-width: 979px ) {

	.x-sidebar .ananda-x-share {
		display: none;
	}

}

.ananda-x-share.ananda-x-widget-reveal:before {
	content: "\f045";
}

/* The base .ananda-x-widget-reveal rules (main.css) size the resting-state glyph
   at 168px to nearly fill a 220px-tall box. That reads as an oversized share icon
   in the sidebar, so scale it down to a tasteful size (a touch smaller than the
   author photo) and tighten the widget height to match. Scoped to this widget;
   the contact widget carries the matching adjustment in its own style.css. */

@media ( min-width: 979px ) {

	.ananda-x-share.ananda-x-widget-reveal:before {
		font-size: 60px;
	}

	.ananda-x-share.ananda-x-widget-reveal {
		min-height: 120px;
	}

}

/* renew.css gives every sidebar widget a 3em top margin; tighten the gap above
   the share widget. Scoped to this widget (with an extra class for specificity)
   so the global sidebar-widget spacing is unchanged. */
.x-sidebar .ananda-x-share.widget {
	margin-top: 1em;
}

.ananda-x-share-icons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
}

.ananda-x-share-icons > a:hover {
	text-decoration: none;
}

/* The X logo is an inline SVG (Font Awesome 5 has none); it takes the same box
   as the icon-font glyphs so all four line up. */
.ananda-x-share-icons > a > .ananda-x-share-icon {
	font-size: 26px;
	padding: 4px 7px;
	display: inline-block;
	color: rgba(0,107,232,0.8);
	border-radius: 4px;
}

.ananda-x-share-icons > a > .ananda-x-share-icon-svg {
	box-sizing: content-box;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
}

.ananda-x-share-icons > a:hover > .ananda-x-share-icon,
.ananda-x-share-icons > a:focus-visible > .ananda-x-share-icon {
	color: white;
	background: rgba(0,107,232,0.8);
}

/* Share section at the bottom of single posts (inc/share.php). Shown at every
   width: on phones and tablets it is the only share option, since the sidebar
   widget is hidden below 979px. */

.ananda-x-share-section {
	margin-block: 2em;
	padding-block: 1.25em;
	border-block: 1px solid rgba(0, 0, 0, 0.1);
	text-align: start;
}

.ananda-x-share-section .ananda-x-share-section-title {
	margin-block: 0 0.75em;
	font-size: 1.25em;
	line-height: 1.3;
}

.ananda-x-share-section-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
}

/* The heading colour rather than --dark-color alone: on ananda.org the dark
   highlight is gold, which reads poorly as text on the cream page. Sites that
   set no heading colour fall back to their dark highlight. */
.ananda-x-share-section-links {
	--share-button-color: var(--headings-color, var(--dark-color, #5e07b4));
}

.ananda-x-share-section-links > .ananda-x-share-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding-block: 0.5em;
	padding-inline: 1em;
	border: 1px solid var(--share-button-color);
	border-radius: 2em;
	color: var(--share-button-color);
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* The "More" / "Copy link" button: undo button styling, including any a child
   theme adds, so it matches the links beside it. */
.ananda-x-share-section-links > .ananda-x-share-more {
	margin: 0;
	background: transparent;
	box-shadow: none;
	text-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	font-family: inherit;
	font-weight: inherit;
	cursor: pointer;
}

/* Revealed by assets/js/main.js; display: inline-flex above would otherwise
   override the hidden attribute. */
.ananda-x-share-section-links > .ananda-x-share-more[hidden] {
	display: none;
}

.ananda-x-share-section-links > .ananda-x-share-link:hover,
.ananda-x-share-section-links > .ananda-x-share-link:focus-visible {
	background-color: var(--share-button-color);
	color: #fff;
	text-decoration: none;
}

.ananda-x-share-section-links .ananda-x-share-icon {
	font-size: 1.15em;
	width: 1em;
	text-align: center;
	flex-shrink: 0;
}

/* Icons only on narrow phones, so all five buttons fit on one row. The labels
   are hidden visually but not from screen readers: the links are named by
   aria-label anyway, and the "More" button is named by its label, which also
   announces "Copied!". */
@media ( max-width: 600px ) {

	.ananda-x-share-section-links {
		flex-wrap: nowrap;
		gap: 0.5em;
	}

	.ananda-x-share-section-links > .ananda-x-share-link {
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
		padding-block: 0.6em;
		padding-inline: 0;
	}

	.ananda-x-share-section-links .ananda-x-share-icon {
		font-size: 1.35em;
	}

	.ananda-x-share-section-links .ananda-x-share-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	/* Once the link is copied, the "Copied!" label shows as a bubble above the
	   button, since it has no visible label here. */
	.ananda-x-share-section-links > .ananda-x-share-more {
		position: relative;
	}

	.ananda-x-share-section-links > .ananda-x-share-more.is-copied .ananda-x-share-label {
		inset-block-end: calc(100% + 0.5em);
		inset-inline-end: 0;
		width: auto;
		height: auto;
		margin: 0;
		padding-block: 0.3em;
		padding-inline: 0.7em;
		clip: auto;
		border-radius: 1em;
		background-color: var(--share-button-color);
		color: #fff;
		font-size: 13px;
		line-height: 1.2;
	}

}

@media print {

	.ananda-x-share-section {
		display: none;
	}

}