/*
 * Neutralizers: loaded AFTER Twenty Twenty-Five / core block styles and BEFORE
 * dx.css, so the design never has to fight them.
 *
 * Every rule here exists because core or the parent theme adds something the
 * approved design does not have (design/reference/). Nothing here styles the
 * design — that is dx.css.
 *
 * Specificity policy:
 *   - Rules that only need to beat a browser default or a zero-specificity core
 *     rule are wrapped in :where(), so their specificity is 0 and EVERY design
 *     rule wins over them (e.g. `.ftr h2 { margin: 0 0 14px }` keeps working).
 *   - Rules that must beat a real core/TT5 class selector carry the specificity
 *     they need, and say so.
 */

/* ---------------------------------------------------------------------------
 * 1. text-wrap. TT5 applies `text-wrap: pretty` to every heading and paragraph.
 *    The design only balances `.h1-sm`/`.h2` and prettifies `.lead`/`.p`, so a
 *    blanket `pretty` moves line breaks — and with them the page height.
 *    Element selectors (0,0,1): they beat TT5 on source order and lose to any
 *    design class.
 * ------------------------------------------------------------------------- */
blockquote,
caption,
figcaption,
h1,
h2,
h3,
h4,
h5,
h6,
p {
	text-wrap: wrap;
}

/* TT5 forces `text-decoration-thickness: 1px !important` on every link. The
 * design uses the browser default wherever it underlines at all (for example
 * "Español" in the footer bar). !important needs !important. */
.dx a {
	text-decoration-thickness: auto !important;
	text-underline-offset: auto;
}

/* ---------------------------------------------------------------------------
 * 2. Focus. TT5 draws a 2px outline on plain `:focus`; the design only styles
 *    `:focus-visible`, which dx.css sets later and therefore wins.
 * ------------------------------------------------------------------------- */
.dx :focus {
	outline: 0;
}

/* ---------------------------------------------------------------------------
 * 3. Wrappers core adds around the design's own boxes. They must contribute
 *    no margin of their own; the design provides every gap.
 * ------------------------------------------------------------------------- */
:where(.dx) :where(
	.wp-block-post-content,
	.wp-block-group,
	.wp-block-heading,
	.wp-block-image,
	.wp-block-image figcaption,
	.wp-block-details,
	.wp-block-quote,
	.wp-block-buttons,
	.wp-block-table
) {
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * 4. Buttons are reshaped into the reference markup by the plugin module
 *    DynamixDev\Blocks\Design_Buttons, so core's `.wp-block-button__link`
 *    rules no longer match them and need no neutralizing here.
 *
 *    What does need neutralizing is core's flex layout: `.is-layout-flex` adds
 *    `flex-wrap: wrap` and `align-items: center` to every flex container, while
 *    the reference's rows are plain `<div style="display:flex">` boxes. On a
 *    phone, where `.btn { width: 100% }`, the added wrap breaks a two-button
 *    row onto two lines. Reset to the plain flex defaults; the design classes
 *    that really do wrap (`.btn-row`) re-assert it at the end of dx-wp.css.
 * ------------------------------------------------------------------------- */
:where(.dx) .wp-block-buttons.is-layout-flex {
	flex-wrap: nowrap;
	align-items: normal;
}

/* ---------------------------------------------------------------------------
 * 5. Images. dx_media_img() adds the real width and height so nothing shifts
 *    while they load (SPEC §10). Those attributes are presentational hints, so
 *    `height: 721px` lands on the element — and `aspect-ratio` only applies
 *    while one dimension is auto. The design sizes every image with
 *    `width: 100%` + `aspect-ratio` (`.shot`), so the hint has to go: without
 *    this, a 16/10 screenshot renders at its full intrinsic height.
 *
 *    Specificity 0, placed after the hints (which the cascade treats as
 *    author rules of specificity 0 at the very start), so it wins over them and
 *    loses to every design rule that sets a real height, such as
 *    `.work-card .cover img.shot { height: 100% }` or `.logo-strip img`.
 * ------------------------------------------------------------------------- */
:where(.dx) img {
	height: auto;
}

/* ---------------------------------------------------------------------------
 * 6. core/details gives the FAQ its native <details>/<summary>, but keeps the
 *    default disclosure marker next to the design's own "+" (::after).
 * ------------------------------------------------------------------------- */
:where(.dx) .wp-block-details > summary {
	list-style: none;
}

.dx .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.dx .wp-block-details > summary::marker {
	content: "";
}