/* Share & Meta Bar — v1.0.0
   All tunables live in the :root vars below so you can restyle without
   touching markup. */
.smb-bar{
	--smb-gap:2ch;          /* horizontal space between items ("2 word-spacing") */
	--smb-icon-gap:.45em;   /* gap between an icon and its adjacent icon/text   */
	--smb-icon-size:16px;
	--smb-icon-color:#fa7d05;

	display:flex;               /* full-width flex row; alignment via justify-content */
	flex-wrap:wrap;
	align-items:center;
	justify-content:flex-start; /* default; overridden by Divi alignment or `align` */
	gap:.6em var(--smb-gap);    /* row-gap when wrapped / column-gap between items */
	font-size:12px;             /* font size 12; family + color inherit the theme */
	line-height:1.4;
}

/* Honour the module's alignment at EVERY screen size. inline-flex + text-align
   only aligns while the bar is narrower than its column; once it wraps on
   mobile it fills the width, so we map alignment to justify-content instead.
   Works with Divi's module Text Alignment (left / center / right). */
.et_pb_text_align_left   .smb-bar{ justify-content:flex-start; }
.et_pb_text_align_center .smb-bar{ justify-content:center; }
.et_pb_text_align_right  .smb-bar{ justify-content:flex-end; }

/* Explicit override via the shortcode `align` attribute (wins over the above). */
.smb-bar.smb-align-left{ justify-content:flex-start; }
.smb-bar.smb-align-center{ justify-content:center; }
.smb-bar.smb-align-right{ justify-content:flex-end; }

/* Each display item sits on one line, icon + text together. */
.smb-bar .smb-item{
	display:inline-flex;
	align-items:center;
	gap:var(--smb-icon-gap);
	white-space:nowrap;
	text-decoration:none;
	color:inherit;              /* default (theme) font colour */
}

/* Icon groups (share / summary) keep their icons tight together. */
.smb-bar .smb-icons{
	display:inline-flex;
	align-items:center;
	gap:.5em;
}

/* Icons: 24x24, outlined/line look, brand colour. */
.smb-bar .smb-icon{
	width:var(--smb-icon-size);
	height:var(--smb-icon-size);
	color:var(--smb-icon-color);   /* drives currentColor in the SVGs */
	flex:0 0 auto;
	display:block;
}
.smb-bar .smb-icon--line{ fill:none; stroke:currentColor; }
.smb-bar .smb-icon--solid{ fill:currentColor; stroke:none; }

/* Icon links: no underline, gentle hover feedback. */
.smb-bar .smb-iconlink{
	display:inline-flex;
	line-height:0;
	text-decoration:none;
	transition:opacity .15s ease, transform .15s ease;
}
.smb-bar .smb-iconlink:hover,
.smb-bar .smb-iconlink:focus-visible{
	opacity:.7;
	transform:translateY(-1px);
}

/* Author name: a link that keeps the normal text colour (not the theme's
   link colour). Underlines only on hover to signal it's clickable. */
.smb-bar .smb-author-link{
	color:inherit;
	text-decoration:none;
}
.smb-bar .smb-author-link:hover,
.smb-bar .smb-author-link:focus-visible{
	text-decoration:underline;
}

/* Bookmark item behaves like a link but keeps the default text colour. */
.smb-bar .smb-bookmark{ cursor:pointer; }
.smb-bar .smb-bookmark:hover .smb-icon{ opacity:.75; }

/* The little "Press Ctrl+D" hint injected by the JS. */
.smb-bar .smb-bm-hint{
	margin-left:.5em;
	padding:.15em .5em;
	border-radius:4px;
	background:var(--smb-icon-color);
	color:#fff;
	font-size:.85em;
	white-space:nowrap;
}

/* ---- Mobile ---- */
@media (max-width:768px){
	.smb-bar{
		--smb-gap:1.4ch;
	}
}
@media (max-width:420px){
	.smb-bar{ --smb-gap:1ch; font-size:11px; }
}