/**
 * BootHack Compatibility — Jetpack sharing buttons and likes.
 *
 * Loaded only when Jetpack's Sharing or Likes module is (enqueue-frontend.php),
 * so a site without Jetpack pays nothing for it and the frontend budget is
 * unaffected.
 *
 * What the sweep found (5.13.x, all seven adapters × light and dark, against
 * Jetpack 16.2's own rendering of the same markup):
 *
 * - Light mode needs almost nothing. Jetpack's sharing selectors are specific
 *   enough that the resets one would expect to bite — Tailwind Preflight,
 *   Pico's link styling, UIkit's and Foundation's button resets — do not
 *   land. Tailwind's `border-style: solid` reaches the buttons but at zero
 *   width, and Pico's `list-style-type: square` reaches the items but they
 *   are inline-block, so no marker is drawn. Box sizing differs (the theme is
 *   border-box, Jetpack assumes content-box) but both give the same 32px disc.
 *
 * - One structural leak, on five adapters (Bulma, Pico, Materialize,
 *   Foundation, UIkit): their bridges set prose list rhythm with
 *   `.bh-singular-content .entry-content li { margin-bottom: .35rem }`, which
 *   out-ranks Jetpack's `.sd-content ul li` and halves the gap between rows
 *   of buttons once they wrap.
 *
 * - Dark mode is where it breaks. Jetpack draws light pills (#fff, text
 *   #2c3338 !important) that glare on the dark canvas; in the icon-only style
 *   its neutral grey discs (#e9e9e9: email, print, custom) glare the same way,
 *   and its black brand discs (X, Threads, the legacy Twitter) disappear
 *   against the near-black canvas — 1.11:1 at the disc edge. The heading
 *   hairline stays light grey, and the "More" drawer stays white.
 *
 * Brand colours are Jetpack's and stay Jetpack's. Dark mode here only changes
 * the neutral surfaces and gives every disc a ring so its edge is visible.
 *
 * Jetpack's likes button is a cross-origin iframe once loaded, so nothing
 * here reaches inside it — but "cannot be styled", which this file used to
 * say, was too strong on two counts (5.20.0). The iframe *element* takes a
 * width, a radius and an edge like anything else; and Jetpack's
 * queuehandler.js reads two empty probe elements with getComputedStyle()
 * and posts their colours into the widget, which is how a theme's
 * typography reaches it. See the dark-mode likes section at the end.
 *
 * @package BootHack
 */

/* --- All schemes --------------------------------------------------------- */

/*
 * Restore Jetpack's row gap. (0,2,2) beats the adapter bridges' (0,2,1)
 * prose rule and Jetpack's own (0,1,2), and restates Jetpack's value, so a
 * block rendered outside the entry content — where the bridge rule does not
 * reach — is unchanged.
 */
.bh-sharing .sd-content ul li {
	margin-bottom: 12px;
}

/*
 * The row's heading looks the same whatever element it is.
 *
 * Jetpack styles the heading as `div.sharedaddy h3.sd-title` — h3 and only
 * h3. That was fine while it hard-coded the element, and stopped being fine
 * in 5.20.0, when the level started following each document's outline: on a
 * page with no h2 the heading became an h2 and inherited the theme's h2
 * size, four or five times the intended one. Reported from production.
 *
 * The level is a document-structure decision and the size is a design one,
 * and they should not be the same decision. Jetpack's own values, restated
 * for every element the block can emit. (0,3,2) clears both Jetpack's
 * (0,2,2) and the theme's own heading rules.
 */
.bh-sharing div.sharedaddy :is(h2, h3, h4, p).sd-title {
	margin: 0 0 1em 0;
	display: inline-block;
	line-height: 1.2;
	font-size: 9pt;
	font-weight: 700;
}

/*
 * Icon-only neutral discs (#e9e9e9) carry no edge of their own: Jetpack
 * assumes a white page, and on this theme's light canvas (#f0f0f3) they sit
 * at 1.1:1 and all but vanish. Give them the ring Jetpack already draws round
 * its pills. (0,5,3) beats Jetpack's `box-shadow: none` and its :hover; the
 * dark rules below out-rank this one.
 */
.bh-sharing .sd-social-icon .sd-content ul li:is(.share-email, .share-print, .share-custom, .share-press-this) a.sd-button {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/*
 * The like widget is a control, not a banner. Jetpack gives its wrapper
 * `width: 100%` and its iframe a `width="100%"` attribute, so a button that
 * needs about twenty characters' worth of room spans the whole content
 * column — which on a dark canvas reads as a hole in the page, and on a
 * light one as a band nobody asked for. An attribute loses to any rule, so
 * this is enough. --bh-likes-width tunes it without touching the theme.
 */
.bh-sharing .jetpack-likes-widget-wrapper {
	width: var(--bh-likes-width, min(22rem, 100%));
	max-width: 100%;
}

/* --- Dark ---------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {

	/*
	 * Heading hairline (Jetpack Likes: div.sharedaddy h3.sd-title::before).
	 * Any element, not just h3 — the level follows the outline since 5.20.0.
	 */
	html:not([data-theme=light]) .bh-sharing div.sharedaddy .sd-title::before {
		border-top-color: var(--bh-dark-border);
	}

	/* Icon-and-text and text-only pills. Jetpack's colour is !important. */
	html:not([data-theme=light]) .bh-sharing :is(.sd-social-icon-text, .sd-social-text) .sd-content ul li a.sd-button {
		background: var(--bh-dark-surface-raised);
		color: var(--bh-dark-text) !important;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--bh-dark-border);
	}

	html:not([data-theme=light]) .bh-sharing :is(.sd-social-icon-text, .sd-social-text) .sd-content ul li a.sd-button:hover {
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--bh-dark-border-strong);
	}

	html:not([data-theme=light]) .bh-sharing :is(.sd-social-icon-text, .sd-social-text) .sd-content ul li a.sd-button:active {
		box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.5);
	}

	/*
	 * Icon-only discs: a ring on every disc, so black brand discs keep an
	 * edge. (0,6,4) beats Jetpack's `box-shadow: none` including its :hover.
	 */
	html:not([data-theme=light]) .bh-sharing .sd-social-icon .sd-content ul li[class*="share-"] a.sd-button,
	html:not([data-theme=light]) .bh-sharing .sd-social-icon .sd-content ul li a.share-more {
		box-shadow: 0 0 0 1px var(--bh-dark-border-strong);
	}

	/*
	 * Neutral discs only — named, so the brand discs keep Jetpack's colours
	 * (a selector covering every disc would out-rank the brand rules).
	 */
	html:not([data-theme=light]) .bh-sharing .sd-social-icon .sd-content ul li:is(.share-email, .share-print, .share-custom, .share-press-this) a.sd-button,
	html:not([data-theme=light]) .bh-sharing .sd-content ul li a.share-more {
		background: var(--bh-dark-surface-raised);
		color: var(--bh-dark-text) !important;
	}

	/* The "More" drawer and its arrow. */
	html:not([data-theme=light]) .bh-sharing .sharing-hidden .inner {
		background: var(--bh-dark-surface-raised);
		border-color: var(--bh-dark-border-strong);
		box-shadow: var(--bh-dark-shadow);
	}

	html:not([data-theme=light]) .bh-sharing .sharing-hidden .inner::before {
		border-bottom-color: var(--bh-dark-border-strong);
	}

	html:not([data-theme=light]) .bh-sharing .sharing-hidden .inner::after {
		border-bottom-color: var(--bh-dark-surface-raised);
	}
}

html[data-theme=dark] .bh-sharing div.sharedaddy .sd-title::before {
	border-top-color: var(--bh-dark-border);
}

html[data-theme=dark] .bh-sharing :is(.sd-social-icon-text, .sd-social-text) .sd-content ul li a.sd-button {
	background: var(--bh-dark-surface-raised);
	color: var(--bh-dark-text) !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--bh-dark-border);
}

html[data-theme=dark] .bh-sharing :is(.sd-social-icon-text, .sd-social-text) .sd-content ul li a.sd-button:hover {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--bh-dark-border-strong);
}

html[data-theme=dark] .bh-sharing :is(.sd-social-icon-text, .sd-social-text) .sd-content ul li a.sd-button:active {
	box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.5);
}

html[data-theme=dark] .bh-sharing .sd-social-icon .sd-content ul li[class*="share-"] a.sd-button,
html[data-theme=dark] .bh-sharing .sd-social-icon .sd-content ul li a.share-more {
	box-shadow: 0 0 0 1px var(--bh-dark-border-strong);
}

html[data-theme=dark] .bh-sharing .sd-social-icon .sd-content ul li:is(.share-email, .share-print, .share-custom, .share-press-this) a.sd-button,
html[data-theme=dark] .bh-sharing .sd-content ul li a.share-more {
	background: var(--bh-dark-surface-raised);
	color: var(--bh-dark-text) !important;
}

html[data-theme=dark] .bh-sharing .sharing-hidden .inner {
	background: var(--bh-dark-surface-raised);
	border-color: var(--bh-dark-border-strong);
	box-shadow: var(--bh-dark-shadow);
}

html[data-theme=dark] .bh-sharing .sharing-hidden .inner::before {
	border-bottom-color: var(--bh-dark-border-strong);
}

html[data-theme=dark] .bh-sharing .sharing-hidden .inner::after {
	border-bottom-color: var(--bh-dark-surface-raised);
}

/*
 * The like button, in dark mode.
 *
 * It is a cross-origin iframe from widgets.wp.com, and that document sets
 * `color-scheme: normal` with black text — checked, in a browser, with
 * prefers-color-scheme: dark active. So it does NOT follow the reader into
 * dark mode: the canvas stays light and the text stays black, whatever the
 * page around it does. Nothing here can reach inside it.
 *
 * Two things can be done from outside, and both are done below.
 *
 * 1. Make the light panel look deliberate. It is going to be light, so give
 *    it an edge and a radius and let it read as a control sitting on the
 *    page rather than a hole punched through it. The heading is left alone:
 *    it lives inside Jetpack's wrapper but outside the iframe, so it keeps
 *    the page's own dark-mode text colour.
 *
 * 2. Send colours that suit it. Jetpack's queuehandler.js reads
 *    getComputedStyle() from two empty probe elements — `.sd-text-color` and
 *    `.sd-link-color` — and posts the result into the iframe, which is how
 *    the widget picks up a theme's typography. It sends no background, so
 *    the colours have to be legible on the widget's own light canvas. In
 *    dark mode the page's text colour is near-white, and inherited
 *    unchanged it would send near-white text to a white background. Hence
 *    dark values here, which looks backwards and is not.
 */
@media (prefers-color-scheme: dark) {

	html:not([data-theme=light]) .bh-sharing :is(iframe.post-likes-widget, .post-likes-widget-placeholder) {
		background: #fff;
		border-radius: 0.5rem;
		box-shadow: 0 0 0 1px var(--bh-dark-border-strong);
	}

	html:not([data-theme=light]) .bh-sharing .jetpack-likes-widget-wrapper .sd-text-color {
		color: #2c3338;
	}

	html:not([data-theme=light]) .bh-sharing .jetpack-likes-widget-wrapper .sd-link-color {
		color: var(--bh-primary, #0d6efd);
	}
}

html[data-theme=dark] .bh-sharing :is(iframe.post-likes-widget, .post-likes-widget-placeholder) {
	background: #fff;
	border-radius: 0.5rem;
	box-shadow: 0 0 0 1px var(--bh-dark-border-strong);
}

html[data-theme=dark] .bh-sharing .jetpack-likes-widget-wrapper .sd-text-color {
	color: #2c3338;
}

html[data-theme=dark] .bh-sharing .jetpack-likes-widget-wrapper .sd-link-color {
	color: var(--bh-primary, #0d6efd);
}