/*
 * Oxygen compatibility layer for the Fox & Brand design system.
 *
 * site.css was written for the theme's hand-written markup. Oxygen renders the
 * same markup with a few structural additions; this file neutralizes those, and
 * nothing else. Every rule names the Oxygen behavior it answers.
 */

/*
 * A link that holds text plus inline markup (a label and an arrow icon) is built
 * as a Container Link with one untagged Text child: <a><div class="oxy-text">
 * label <span class="fb-arrow-icon">…</span></div></a>. The theme's buttons are
 * flex rows whose items are the label and the icon, and the extra div would
 * collapse them into one item. display: contents removes the div's box so the
 * label and icon are the link's flex items again, exactly as in the theme.
 * Only the untagged, class-less div matches: a real <h2> or <p> inside a linked
 * card is a Text element with its own tag and never a bare div.
 */
.oxy-container-link > div.oxy-text:only-child {
	display: contents;
}

/*
 * The Shortcode element wraps its output in div.oxy-shortcode. The theme printed
 * the menus and forms directly, so the wrapper must not become a box: with
 * display: contents the ul.fb-menu (or a Gravity Forms wrapper) is laid out as
 * the direct child it was in the theme.
 */
.oxy-shortcode {
	display: contents;
}

/*
 * An <svg> becomes an SVG Icon element: div.oxy-svg-icon2 > svg. Oxygen's element
 * defaults make that div a 1em inline-flex box and give the svg
 * `fill: currentColor` when it has no fill attribute. The theme's icons are sized
 * by their span (.fb-arrow-icon is 14px) and its stroke icons need fill: none.
 * Inside the theme's icon spans the wrapper stops being a box, and the theme's
 * fills are restated one step more specific than Oxygen's default. Scoped to the
 * theme's spans so an SVG Icon added later in the builder keeps its own sizing.
 */
:is(.fb-arrow-icon, .fb-play-icon, .fb-spark-icon, .fb-quote-mark) > .oxy-svg-icon2 {
	display: contents;
}
:is(.fb-arrow-icon, .fb-play-icon, .fb-spark-icon) .oxy-svg-icon2 > svg {
	fill: none;
}
.fb-quote-mark .oxy-svg-icon2 > svg {
	fill: currentColor;
}

/*
 * A list item holding only text (<li>Construction progress</li>) is built as a
 * Container li with one untagged Text child. The theme had the text directly in
 * the li; display: contents puts it back. Only a class-less text div that is the
 * li's only child is the synthetic one.
 */
li > div.oxy-text:only-child:not([class*="fb-"]) {
	display: contents;
}

/*
 * Raw HTML (the Web Design page's live-site iframes) is built as an HTML Code
 * element: div.oxy-html-code around the markup. The theme sizes those iframes as
 * percentages of their container (217.4% for the scaled phone preview, 100% for
 * the modal frame), and the wrapper div would become that container with an
 * automatic height. display: contents hands the percentages back to the real box.
 */
.oxy-html-code {
	display: contents;
}