/**
 * FANGORIA share rail
 *
 * Two layouts from one DOM tree:
 *   - default (< 1200px): inline horizontal bar at the top of the article body
 *   - desktop (>= 1200px): sticky vertical rail in the left gutter
 *
 * Tunable knobs live on .fang-share as custom properties so the desktop rail
 * can be hardened on staging without touching selectors.
 */

.fang-share {
	--fs-red: var(--global-palette2, #ed1c24);
	--fs-ink: var(--global-palette3, #1a1a1a);
	--fs-border: 1.5px solid var(--fs-ink);
	--fs-label-font: var(--global-primary-nav-font-family, Oswald, sans-serif);

	/* desktop gutter rail geometry */
	--fs-rail-w: 66px;     /* width of a rail tile column */
	--fs-rail-gap: 30px;   /* gap between rail and article body */
	--fs-rail-top: 120px;  /* sticky offset; clears the Kadence sticky header */

	margin: 0 0 1.75em;
	font-family: var(--fs-label-font);
	position: relative;
	/* z-index: auto on mobile is deliberate. Verified in the iOS Simulator: the
	   Kadence MOBILE sticky header does NOT reach the desktop header's z-index
	   (1200) — it sits low (around z-1), so any positive z-index on the rail
	   (we previously used 50) makes the closed bar paint OVER the sticky header
	   on scroll. With z-index: auto the rail is still a positioned element, so
	   its flyout paints above normal (non-positioned) article text, but the bar
	   now loses to the sticky header in every state and tucks behind it. The
	   desktop gutter rail re-introduces a capped elevation in its own media
	   query, where the header IS z-1200 and the rail lives outside the body. */
	z-index: auto;
}

/* Two instances render per post (see the PHP): the byline bar
   (.fang-share--byline, injected next to author/date) and the gutter rail
   (.fang-share--content, injected into the article body). The byline bar shows
   at ALL widths. The gutter rail is hidden by default and only matters on
   desktop (>= 1200px), where it fades in on scroll once the byline scrolls out
   of view (JS toggles .is-gutter-visible). Hidden entirely below 1200px (no
   gutter room). */
.fang-share--content {
	display: none;
}

/* Neutralize the content-area link cascade. The rail is injected inside
   .entry-content, so the theme's .entry-content a rules (brand-red, underlined)
   would otherwise leak onto the anchor-based tiles and flyout options. Scoped
   high enough to beat .entry-content a / a:hover. */
.fang-share a {
	text-decoration: none !important;
	box-shadow: none !important;
}

/* ---- the flex container: horizontal row by default ---- */
/* Right-aligned so the inline bar sits at the trailing edge of the article body
   on phones / mid-width (matches the Apartment Therapy reference). The desktop
   gutter rail overrides justify-content back to flex-start below. */
.fang-share__rail {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
	align-items: stretch;
}

.fang-share__item {
	position: relative;
}

/* ---- top-level tiles ---- */
/* Default (mobile / mid-width): horizontal pill — icon beside label, wider than
   tall. The desktop gutter rail flips these back to a vertical column (icon
   above label) so they fit the narrow 66px gutter. */
.fang-share__btn {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 0;
	padding: 8px 14px;
	background: #fff;
	border: var(--fs-border);
	color: var(--fs-ink);
	cursor: pointer;
	text-decoration: none;
	line-height: 1;
	transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}

/* anchor-qualified so the content-link color cascade can't win */
.fang-share a.fang-share__btn {
	color: var(--fs-ink);
}

.fang-share__btn:hover,
.fang-share__btn:focus-visible,
.fang-share a.fang-share__btn:hover,
.fang-share a.fang-share__btn:focus-visible {
	background: #fff;
	color: var(--fs-red);
	border-color: var(--fs-red);
}

.fang-share__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 20px;
	font-size: 18px;
}

.fang-share__icon--g svg.fang-share__g {
	height: 19px;
	width: 19px;
}

.fang-share__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .5px;
	text-transform: uppercase;
}

/* The Google G keeps its own colors; only the label reacts to hover. */
.fang-share__btn--addus:hover,
.fang-share__btn--addus:focus-visible {
	border-color: var(--fs-red);
	color: var(--fs-red);
}

/* Share toggle hover: deliberate red-fill state (white text + icon), the same
   treatment as the open state. The toggle is a <button>, so Kadence's generic
   button:hover repaints its background red at a higher specificity than the base
   tile rule; left alone, that red fill sits under the red hover text and the
   "SHARE" label disappears. The element-qualified selector below outranks the
   theme so the fill and the white label always travel together. */
.fang-share button.fang-share__toggle:hover {
	background: var(--fs-red);
	border-color: var(--fs-red);
	color: #fff;
}

/* THE stuck-red culprit: Kadence styles every `button:focus` and
   `button:active` with a red background (--global-palette-btn-bg-hover). The
   toggle keeps :focus after a click, so once you clicked it open then closed and
   moved the pointer away, Kadence kept it red. Reset focus/active back to the
   resting white tile — but ONLY when it's neither hovered nor open, so the
   deliberate red states (hover + [aria-expanded="true"]) still win. The :not()
   guards also out-specify Kadence's button:focus/:active (0,1,1). */
.fang-share button.fang-share__toggle:focus:not(:hover):not([aria-expanded="true"]),
.fang-share button.fang-share__toggle:active:not(:hover):not([aria-expanded="true"]) {
	background: #fff;
	border-color: var(--fs-ink);
	color: var(--fs-ink);
}

/* Keyboard focus still gets a visible (non-fill) outline for accessibility. */
.fang-share button.fang-share__toggle:focus-visible {
	outline: 2px solid var(--fs-red);
	outline-offset: 2px;
}

/* expanded state on the Share toggle */
.fang-share__toggle[aria-expanded="true"] {
	background: var(--fs-red);
	border-color: var(--fs-red);
	color: #fff;
}

/* ---- Add Us tooltip ---- */
.fang-share__pop {
	position: absolute;
	z-index: 70;
	top: calc(100% + 8px);
	right: 0;
	left: auto;
	width: 210px;
	padding: 8px 10px;
	background: var(--fs-ink);
	color: #fff;
	font-family: var(--global-body-font-family, sans-serif);
	font-size: 12.5px;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	border-radius: 3px;
	box-shadow: 0 6px 20px rgba(0,0,0,.25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .14s ease, transform .14s ease, visibility .14s;
	pointer-events: none;
}

.fang-share__addus:hover .fang-share__pop,
.fang-share__addus:focus-within .fang-share__pop {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* ---- Share flyout menu ---- */
.fang-share__menu {
	position: absolute;
	z-index: 60;
	top: calc(100% + 8px);
	right: 0;
	left: auto;
	min-width: 168px;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: var(--fs-border);
	box-shadow: 0 8px 26px rgba(0,0,0,.18);
}

.fang-share__menu[hidden] {
	display: none;
}

.fang-share__opt {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 6px 12px;
	background: none;
	border: 0;
	border-bottom: 1px solid rgba(0,0,0,.08);
	color: var(--fs-ink);
	font-family: var(--fs-label-font);
	font-size: 13px;
	/* the theme's body line-height (~24px) was inflating each row to ~37px; pin
	   it so the row height tracks the icon/text, not the article body cadence */
	line-height: 1.05;
	font-weight: 600;
	letter-spacing: .4px;
	text-transform: uppercase;
	text-decoration: none;
	text-align: left;
	cursor: pointer;
	transition: color .12s ease, background-color .12s ease;
}

.fang-share__opt:last-child {
	border-bottom: 0;
}

/* anchor-qualified to beat .entry-content a */
.fang-share a.fang-share__opt {
	color: var(--fs-ink);
}

.fang-share__opt:hover,
.fang-share__opt:focus-visible,
.fang-share a.fang-share__opt:hover,
.fang-share a.fang-share__opt:focus-visible {
	background: var(--fs-red);
	color: #fff;
}

.fang-share__opt-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	font-size: 16px;
}

.fang-share__opt-icon--svg svg {
	height: 15px;
	width: auto;
}

.fang-share__opt--copy.is-copied {
	color: #fff;
	background: #2e7d32;
}

/* =========================================================================
   Desktop: sticky vertical rail in the left gutter (>= 1200px)
   ========================================================================= */
@media (min-width: 1200px) {

	/* The byline share bar shows at ALL widths now (next to author/date). On
	   desktop a sticky LEFT-GUTTER rail also exists, but it stays HIDDEN until
	   the byline (and its share bar) scrolls out of view — JS adds
	   .is-gutter-visible to the content rail via an IntersectionObserver on the
	   byline. Every gutter-specific rule below is scoped to .fang-share--content
	   so it never touches the byline bar, which keeps its horizontal-pill layout
	   up in the meta. */

	/* positioning context for the absolute gutter rail */
	.single-entry .entry-content {
		position: relative;
	}

	.fang-share--content {
		display: block;
		position: absolute;
		top: 0;
		left: calc(-1 * (var(--fs-rail-w) + var(--fs-rail-gap)));
		width: var(--fs-rail-w);
		height: 100%;
		margin: 0;
		/* revealed by JS once the byline scrolls off the top, then auto-fades when
		   idle (see initGutterReveal). Slightly longer fade since it's a
		   timer-driven disappear, not a click. */
		opacity: 0;
		pointer-events: none;
		transition: opacity .3s ease;
	}
	.fang-share--content.is-gutter-visible {
		opacity: 1;
		pointer-events: auto;
	}

	/* When the gutter flyout/tooltip is showing, lift the rail above in-content
	   elements (blockquotes, ad iframes, recirc widgets). Capped at 1100 —
	   below the Kadence sticky header (z-index 1200) so it never floats over it. */
	.fang-share--content:hover,
	.fang-share--content:focus-within,
	.fang-share--content.is-menu-open {
		z-index: 1100;
	}

	.fang-share--content .fang-share__rail {
		position: sticky;
		top: var(--fs-rail-top);
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 8px;
		align-items: stretch;
	}

	/* gutter tiles flip to vertical (icon above label) to fit the 66px column.
	   Generous vertical padding makes each tile a tall, prominent block in the
	   gutter (taller than the compact default). Tune the 30px to taste. */
	.fang-share--content .fang-share__btn {
		flex-direction: column;
		gap: 6px;
		width: 100%;
		min-width: 0;
		padding: 30px 10px;
	}

	/* gutter flyout + tooltip open to the right of the rail */
	.fang-share--content .fang-share__menu,
	.fang-share--content .fang-share__pop {
		top: 0;
		left: calc(100% + 12px);
		right: auto;
	}

	/* On desktop the byline has room, so keep its tiles HORIZONTAL (icon beside
	   label) to fill the whitespace. The stacked icon-over-label layout is the
	   default below 1200px, where the header needs the narrower footprint. */
	.fang-share--byline .fang-share__btn {
		flex-direction: row;
		gap: 8px;
		padding: 8px 14px;
	}
}

/* =========================================================================
   Byline share bar (ALL widths): share sits next to author/date
   =========================================================================
   The 'byline' rail is injected as a sibling of .posted-by / .posted-on inside
   the single-post hero .entry-meta (via kadence_after_entry_meta). It shows at
   EVERY width now — on desktop the left-gutter rail simply fades in on scroll
   once this byline scrolls away (see the >=1200px block above + the JS
   IntersectionObserver). Scoped to the single-post hero so archive cards and the
   in-content meta are untouched. NOT wrapped in a media query: the grid byline
   is the layout at all widths. */

	/* Byline reflow with GRID (not flex): the author and date stack as a tight
	   block in the left column, and the share bar occupies the right column,
	   spanning BOTH text rows so it centers cleanly against the whole block.
	   Flex couldn't do this — the bar lived in the author's row and pushed the
	   wrapped date line down, so the bar only aligned to the author, not the
	   author+date pair. Separate grid columns also mean the date can never run
	   under the bar. */
	.single-post .entry-hero .entry-meta {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"author share"
			"date   share";
		align-items: center;
		column-gap: 1em;
		row-gap: 0;
		/* tighten the whitespace above/below the author+share row (Kadence's
		   default ~12px each felt too airy) */
		margin-top: 4px;
		margin-bottom: 4px;
	}

	.single-post .entry-hero .entry-meta .posted-by {
		grid-area: author;
		align-self: end;
		/* Shrink to content width so it doesn't fill the whole 1fr column. The
		   author hovercard (#fang-byline-card) triggers on hovering .posted-by;
		   when this stretched across the column, hovering the empty white space
		   popped the card. The card is position:absolute, so it doesn't widen
		   this — the hover zone is now just the avatar + "By [name]". */
		justify-self: start;
	}

	.single-post .entry-hero .entry-meta .posted-on {
		grid-area: date;
		align-self: start;
	}

	/* bar in the right column, vertically centered against author + date */
	.single-post .entry-hero .entry-meta .fang-share--byline {
		grid-area: share;
		justify-self: end;
		align-self: center;
		margin: 0;
	}

	/* drop Kadence's dot divider between meta items in this reflowed row */
	.single-post .entry-hero .entry-meta > *::after {
		display: none !important;
	}

/* Keep the byline share tiles on a SINGLE line and tighten them, so ADD US +
   SHARE sit side by side next to the author instead of stacking on narrow
   widths. */
.fang-share--byline .fang-share__rail {
	flex-wrap: nowrap;
	gap: 6px;
}
/* MOBILE only (< 768px): stack the byline tiles (icon ABOVE label) so each tile
   is only as wide as its label, where phone-width space is tight. Tablet and up
   (>= 768px) use the base horizontal pills (icon beside label) to fill the
   whitespace — the header has the room there. Scoped to a media query (not source
   order) so the states never fight. */
@media (max-width: 767.98px) {
	.fang-share--byline .fang-share__btn {
		flex-direction: column;
		gap: 4px;
		padding: 7px 10px;
	}
}

/* Kadence forces the byline date <time> to white-space:nowrap, which pins the
   text column wide and squeezes the share column until the tiles wrap to two
   rows. Let the date wrap as a safety valve so the share keeps its one-line
   width on narrow phones (wider phones still keep the date on one line). */
.single-post .entry-hero .entry-meta .posted-on time {
	white-space: normal;
}

/* Some authors have a profile avatar in the byline (FANGORIA's custom
   img.fang-byline-avatar, ~42px, rendered at the START of .posted-by before
   "By" + name). It pushes the author text right, but the date row still starts
   at the column edge, so the date lands flush under the avatar, ~49px left of
   the byline text above it. When an avatar is present, indent the date (avatar
   42px + ~7px gap) so it lines up with the "By"/name text. :has() scopes this to
   avatar bylines only — authors without one are unaffected. (.author-avatar is
   included as a fallback for any Kadence-native avatar bylines.) */
.single-post .entry-hero .entry-meta:has(.posted-by .fang-byline-avatar) .posted-on,
.single-post .entry-hero .entry-meta:has(.posted-by .author-avatar) .posted-on {
	/* indent the date to clear the 48px avatar and align with the "By"/name text */
	padding-left: 55px;
	/* The avatar makes the author row tall and the 17px name centers in it,
	   leaving a big gap below the name before the date — much looser than the
	   no-avatar byline (~4px). Pull the date up so the two lines hug like the
	   no-avatar case. The date sits to the right of the avatar, so it never
	   overlaps it. */
	margin-top: -11px;
}

/* Enlarge the byline author avatar and vertically center it against the whole
   name+date block. The avatar is inline at the top of .posted-by (row one), so
   it naturally centers on the NAME line and reads too high relative to the
   two-line block. A translateY nudge re-centers it WITHOUT changing layout
   (keeps .posted-by's height intact, so the absolute author hovercard isn't
   disturbed). The date sits to its right, so the shifted avatar never overlaps. */
.single-post .entry-hero .entry-meta .posted-by .fang-byline-avatar {
	width: 48px;
	height: 48px;
	transform: translateY(9px);
}

/* The avatar transform + date offset shift the left block's VISUAL center down,
   but the share tile (centered on the grid rows) doesn't follow, so it sits ~7px
   high. Nudge the share down by the same amount so the image/author/date block
   and the Add Us/Share tiles share a vertical center. Layout-neutral (transform),
   and the share centers on the grid area regardless of its own height, so this
   holds for both the desktop horizontal and mobile stacked tile layouts. Scoped
   to avatar bylines — no-avatar bylines are already centered. */
.single-post .entry-hero .entry-meta:has(.posted-by .fang-byline-avatar) .fang-share--byline,
.single-post .entry-hero .entry-meta:has(.posted-by .author-avatar) .fang-share--byline {
	transform: translateY(7px);
	/* The transform above creates a stacking context, which would otherwise trap
	   the Add Us tooltip and the Share flyout inside this rail's layer — and that
	   layer paints below the later content section, hiding them behind the
	   featured image. Lift the rail above the content (still below the Kadence
	   sticky header at 1200) so the popovers render on top. */
	z-index: 100;
}

/* The single-post byline paints its links brand-red via
   `.single-post .entry-meta a { color: var(--color-primary) }` (0,2,1), which
   beats the rail's own ink color on the anchor-based ADD US tile and makes its
   label harsh red at rest. Re-assert ink with higher specificity (0,3,1); the
   red hover state still applies. The SHARE tile is a <button>, unaffected.
   Not media-scoped: the byline shows at all widths now, and keeping it unscoped
   lets the override win everywhere. Covers BOTH the top-level tiles
   (.fang-share__btn) and the flyout option links (.fang-share__opt) — both are
   anchors in .entry-meta and both otherwise inherit the byline's red link
   color. */
.entry-meta .fang-share a.fang-share__btn,
.entry-meta .fang-share a.fang-share__opt {
	color: var(--fs-ink);
}
.entry-meta .fang-share a.fang-share__btn--addus:hover,
.entry-meta .fang-share a.fang-share__btn--addus:focus-visible {
	color: var(--fs-red);
}
.entry-meta .fang-share a.fang-share__opt:hover,
.entry-meta .fang-share a.fang-share__opt:focus-visible {
	color: #fff;
}

/* When a right sidebar sits BESIDE the content, the hero byline spans the full
   container width, but the article well directly below is only the 1fr of
   Kadence's `1fr 300px` content grid (a fixed 300px sidebar + a 3.5rem / 56px
   gap). Left unconstrained, the right-aligned byline share overshoots that well
   and floats over the sidebar column. Cap the byline to the main-column width so
   the share's right edge lines up with the well below it.

   GATED to >= 1025px: that's where Kadence keeps the sidebar beside the content
   on this site. At <= 1024px the sidebar stacks UNDER the content, the well
   becomes full width, and the cap must NOT apply — otherwise it narrows the
   byline and the share floats to the middle (the tablet bug). Scoped to a right
   sidebar only; .has-sidebar + .single-post are both <body> classes so they're
   compounded (no space). */
@media (min-width: 1025px) {
	.has-sidebar:not(.has-left-sidebar).single-post .entry-hero .entry-meta {
		max-width: calc(100% - 300px - 3.5rem);
	}
}