/*
 * DFS Motion — the custom icon library.
 *
 * WHY A MASK AND NOT AN <img> OR A BACKGROUND IMAGE.
 *
 * Elementor renders a picked icon as `<i class="dfsi dfs-icon-…">`
 * (Icons_Manager::render_icon, elementor/includes/managers/icons.php:354), so
 * the glyph has to be painted by CSS on an empty element. A background-image
 * would paint the SVG's own colour and ignore every colour control around it —
 * which is exactly the failure the DFS Core Menu social icons already avoid by
 * inheriting currentColor.
 *
 * A mask paints `background-color`, and that is set to currentColor, so the
 * glyph takes the ink of whatever it sits in: the menu's contact colour, the
 * adaptive over-dark / over-light ink, a hover colour, or Elementor's own
 * Social Icons colour controls. One file, correct in all of them.
 *
 * Sized in `em` so it follows font-size the way a font icon does. Elementor's
 * Social Icons widget sizes its icons with font-size, and an icon that ignored
 * that would be the one item in the row that would not scale.
 */

/*
 * THE CLASS IS DOUBLED ON PURPOSE — it is not a typo.
 *
 * Elementor ships `.elementor-icon i, .elementor-icon svg { display:block;
 * width:1em; height:1em }`, which is (0,1,1) and loads after this file. A single
 * `.dfsi` is (0,1,0) and loses, so every glyph rendered as a 1em square on the
 * front end however this file was written. Repeating the class makes it (0,2,0):
 * specificity weighs the class column before the element column, so two classes
 * beat one class plus one element, and no !important is needed.
 */
.dfsi.dfsi {
	display: inline-block;
	/*
	 * NEVER SHRINK. Elementor's social-icon anchor is a fixed-size flex
	 * container, and a flex item shrinks below its stated width by default.
	 * MEASURED: the Actors Access wordmark, which is wider than the button,
	 * rendered 42px wide instead of 65 while its height stayed correct — the
	 * round glyphs are narrower than the button, so they never revealed it.
	 */
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/*
 * Actors Access — Brad's own wordmark, traced to a single path.
 *
 * IT KEEPS ITS OWN WIDTH. The base .dfsi box is 1em square, and a 696x362
 * wordmark inside a square renders 1em wide by 0.52em tall — half height, for
 * no reason other than the box. Given its true 1.92:1 ratio it fills the full
 * 1em height instead, so it sits at the same optical size as the round brand
 * glyphs beside it rather than looking shrunken next to them.
 *
 * A monogram was tried here and removed: two letters alone read as something
 * else entirely, and it was not the artwork that was supplied.
 */
/*
 * IMDb — the official badge, rebuilt monochrome with the letters knocked
 * out so it takes currentColor. Font Awesome does carry fa-imdb; this is
 * here because Brad rejected the look of it, not because it was missing.
 *
 * 768x373, so 2.06em wide keeps it at full icon height instead of being
 * squashed to less than half by a square box.
 */
/*
 * The mask URL is NOT here — it is emitted by DFS_Motion_Icons with the
 * plugin version appended, because a mask URL in a static file cannot be
 * cache-busted and a replaced glyph goes on showing the old one for an hour.
 * MEASURED: these are served with Cache-Control max-age=3600.
 */

/*
 * BOTH SIZES COME FROM clairerice.com, which places these two beside a plain
 * Font Awesome glyph. MEASURED there, in a 42x42 link at font-size 26px:
 *
 *   Instagram (round)   ink 23x23    area 1.00x
 *   Actors Access       ink 65x34    area 4.18x
 *   IMDb                ink 34x14    area 0.90x
 *
 * Solving for that ink area at each glyph's own aspect gives the values below.
 * A wordmark and a round badge cannot share a box and look the same size: the
 * badge fills its square, the wordmark spends most of its box on the gaps
 * between letters, so an equal box makes the wordmark read as smaller.
 *
 * vertical-align is NOT -0.125em here, because these boxes are not 1em tall.
 * A 1em box at -0.125em centres on 0.375em, so a box of height h holds that
 * same centre at 0.375 - h/2 — which is what keeps them on the line wherever
 * .dfsi is inline rather than flex-centred, as on the roster profile screen.
 */
/*
 * THE SCALES ARE CLAIRE'S, AND SO IS THE MECHANISM.
 *
 * READ OFF claire-rice.com with CDP getMatchedStylesForNode — she puts every
 * social icon in the same 1em square box and then scales the two wordmarks
 * with custom CSS:
 *
 *   .elementor-icon i, .elementor-icon svg { width: 1em; height: 1em }
 *   svg#Camada_2 { transform: scale(1.3) }   <- actors access
 *   svg#Camada_1 { transform: scale(1.5) }   <- IMDb
 *
 * Ink measured off her rendered pixels at font-size 26px:
 *   Instagram      23.0 x 23.0   0.885em
 *   actors access  34.0 x 18.0   1.308 x 0.692em
 *   IMDb           34.5 x 14.5   1.327 x 0.558em
 *
 * ACTORS ACCESS IS TWO LINES OF TYPE, and that is the whole reason a derived
 * size got this backwards: its 18px of ink is two ~8px lines against IMDb's
 * single 14.5px line, so matching total ink makes AA's letters as large as
 * IMDb's and the block twice the mass. On the page IMDb must read as the
 * BIGGER of the two. It does here only because these numbers were copied
 * rather than computed.
 *
 * transform does not affect layout, so a scaled glyph overflows its 1em box
 * without moving its neighbours — which is why the row stays evenly spaced.
 * Sizing the BOX instead, as an earlier version did, both distorts the row and
 * cannot reproduce what she renders.
 */
.dfsi.dfs-icon-imdb {
	transform: scale(1.5);
}

.dfsi.dfs-icon-actors-access {
	/*
	 * Claire's own value is 1.3. This is 1.393 because the target is the size
	 * she RENDERS, and her SVG is not quite our trace: at 1.3 this measured
	 * 0.646em of ink height against her 0.692em, a 6.6% shortfall well outside
	 * the 1.6% the ink measurement itself can introduce. IMDb needed no such
	 * correction and keeps her 1.5.
	 */
	transform: scale(1.393);
}