/**
 * Style guard — keeps a theme's (or another plugin's) blanket element rules out
 * of a Video Gallery Block block.
 *
 * WHY THIS EXISTS
 * A gallery is a self-contained widget, but it renders inside the page's normal
 * cascade, so every `img { … }`, `button { … }`, `h3 { … }` a theme ships lands
 * on our markup too. Measured on Flatsome 3.20 (with WooCommerce active), on a
 * page holding six blocks at their defaults:
 *
 *   button   min-height 35px, margin 0 14px 14px 0, max-width 100%,
 *            text-transform uppercase, font-weight 700, position relative,
 *            a 0.3s transition on six properties
 *   img      max-width 100%, height auto, transition opacity 1s
 *   h1-h6    margin, width, text-rendering
 *   svg      overflow hidden
 *   spans    text-transform uppercase, letter-spacing 0.47px
 *
 * The `img { max-width: 100% }` one is not cosmetic: a provider embed's cover
 * crop works by overhanging its frame, and a max-width cap collapses it back to
 * the frame, so the video letterboxes inside a full frame. That bug shipped.
 *
 * HOW IT WORKS — the specificity IS the design
 * Every rule here is written as
 *
 *     html body :where([class*="wp-block-vgb"]) :is(<elements>)
 *
 * which weighs (0,0,3): three type selectors, no classes. `:where()` contributes
 * nothing, so the wrapper only SCOPES the rule, and `:is()` over a list of type
 * selectors counts as one type selector however long the list is. That number is
 * chosen to sit in the gap between the two things it has to separate:
 *
 *   - a theme's element rules — `img`, `h3`, `button`, `*` — weigh (0,0,1) or
 *     less, so the guard beats them;
 *   - every rule this plugin writes carries at least one class, (0,1,0) or more,
 *     so the guard loses to our own styling — always, and by specificity rather
 *     than by load order.
 *
 * That last point is the reason for the shape. The obvious version,
 * `[class*="wp-block-vgb"] :where(img)`, weighs (0,1,0) and merely TIES with our
 * own single-class rules, leaving source order to break it — and order is not
 * ours to control: WordPress prints a block's stylesheet from the block's own
 * render, which on a real page came out ahead of anything we enqueue, so the
 * guard would have started overriding the blocks it exists to protect. Written
 * this way it cannot, whichever file the browser reads first.
 *
 * Raising any of this to `!important` would undo the same guarantee.
 *
 * WHAT IT DELIBERATELY DOES NOT DO
 * Inherited typography — font-family, colour, font-size on containers — is left
 * alone. A gallery is supposed to read as part of the site it sits in, and users
 * choose their theme's fonts on purpose. Only the inherited properties that
 * actively rewrite our own chrome (text-transform, letter-spacing) are reset, and
 * only on the elements we draw ourselves.
 *
 * KNOWN LIMIT
 * A theme rule carrying a class of its own — `.entry-content img` (0,1,1), or
 * Flatsome's `svg:not(:root)` (0,1,1), since `:not()` counts its argument —
 * still outranks this. Catching those means either `!important` or Shadow DOM,
 * and both cost more than they are worth: `!important` would take the guard back
 * above our own blocks, which is exactly what the specificity above avoids.
 */

/* ---------------------------------------------------------------------------
 * 1. Box model.
 * Every layout in this plugin is written against border-box. Themes almost
 * always set it globally, so this normally changes nothing — it matters for the
 * theme that does not, where a padded card would otherwise outgrow its column.
 * ------------------------------------------------------------------------- */
html body :where([class*="wp-block-vgb"]),
html body :where([class*="wp-block-vgb"]) *,
html body :where([class*="wp-block-vgb"]) *::before,
html body :where([class*="wp-block-vgb"]) *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
 * 2. Media.
 * These elements are positioned and sized by the block, down to the pixel — a
 * poster pinned to a tile, an embed cropped to a frame. A theme's `max-width`,
 * `height: auto` or fade-in transition all fight that sizing, and the fade is
 * the worst of them: our media is swapped in by script, so a `transition:
 * opacity 1s` written for the theme's own lazy-loader leaves a poster visibly
 * ghosting in every time a card changes.
 * ------------------------------------------------------------------------- */
html body :where([class*="wp-block-vgb"]) :is(img, video, iframe, embed, object, canvas) {
	max-width: none;
	max-height: none;
	min-width: 0;
	min-height: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	filter: none;
	transition: none;
	animation: none;
	vertical-align: middle;
	background: none;
	float: none;
}

/* Icons. `svg:not(:root) { overflow: hidden }` is boilerplate (Flatsome ships
   it) and clips any icon that paints outside its viewBox — a stroked play
   triangle, a ring drawn on the edge. Note that that particular selector weighs
   (0,1,1) and so still wins; this covers the plainer `svg { … }` themes write. */
html body :where([class*="wp-block-vgb"]) :is(svg) {
	overflow: visible;
	max-width: none;
	vertical-align: middle;
}

/* ---------------------------------------------------------------------------
 * 3. Text blocks.
 * Card titles, captions and lists are laid out by the block's own spacing, so a
 * theme's heading margins (and the `width` Flatsome puts on h1-h6) push that
 * spacing around. Zeroing them makes the block's own margins the only ones in
 * play; where a block wants space it says so, and its rule outranks this one.
 * ------------------------------------------------------------------------- */
html body :where([class*="wp-block-vgb"]) :is(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, pre) {
	margin: 0;
	padding: 0;
	width: auto;
	float: none;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	text-indent: 0;
}

html body :where([class*="wp-block-vgb"]) :is(ul, ol, li) {
	margin: 0;
	padding: 0;
	list-style: none;
}

html body :where([class*="wp-block-vgb"]) :is(li)::before,
html body :where([class*="wp-block-vgb"]) :is(li)::after {
	content: none;
}

/* ---------------------------------------------------------------------------
 * 4. Controls.
 * The heaviest interference by far, because a theme styles `button` for its own
 * buttons and ours are icons: a play triangle inside a 64px circle came out
 * uppercase, bold, 35px tall with a 14px margin and a border. `font: inherit`
 * and `color: inherit` keep it reading as part of the surrounding text rather
 * than as a theme button.
 * ------------------------------------------------------------------------- */
html body :where([class*="wp-block-vgb"]) :is(button, input, select, textarea) {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	outline-offset: 0;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	max-width: none;
	font: inherit;
	color: inherit;
	line-height: normal;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	vertical-align: middle;
	position: static;
	transition: none;
	animation: none;
	float: none;
}

html body :where([class*="wp-block-vgb"]) :is(button) {
	cursor: pointer;
}

html body :where([class*="wp-block-vgb"]) :is(button, input, select, textarea)::before,
html body :where([class*="wp-block-vgb"]) :is(button, input, select, textarea)::after {
	content: none;
}

/* Links. Themes underline (often with a box-shadow so it clears descenders) and
   colour every `a`; inside a gallery the links ARE the cards and the chapter
   rows, so the underline lands across a thumbnail. Colour is left to the block,
   which is why `inherit` rather than a fixed value. */
html body :where([class*="wp-block-vgb"]) :is(a) {
	text-decoration: none;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	background: none;
	border: 0;
}

html body :where([class*="wp-block-vgb"]) :is(a):hover,
html body :where([class*="wp-block-vgb"]) :is(a):focus {
	text-decoration: none;
	box-shadow: none;
}

html body :where([class*="wp-block-vgb"]) :is(a)::before,
html body :where([class*="wp-block-vgb"]) :is(a)::after {
	content: none;
}

/* ---------------------------------------------------------------------------
 * 5. Tables.
 * Only the blocks that print one use these, but a theme's table borders and
 * row striping are unconditional.
 * ------------------------------------------------------------------------- */
html body :where([class*="wp-block-vgb"]) :is(table) {
	width: auto;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: none;
	table-layout: auto;
}

html body :where([class*="wp-block-vgb"]) :is(th, td, tr) {
	padding: 0;
	border: 0;
	background: none;
	text-align: inherit;
	font-weight: inherit;
}