/*
 * Gen-2 (Atlas) content displayed on a gen-1 (wpParent / Bootstrap 3) site
 *
 * A bridged item arrives as finished markup from its Atlas source, carrying Bootstrap 5,
 * Font Awesome 6 and Atlas block classes that a gen-1 theme defines none of. Rather than
 * rewrite the markup, this gives those class names the behaviour gen-1 already has for its
 * own equivalents.
 *
 * Every rule is scoped to .ico-bridged, so a gen-1 site with no shared Atlas content matches
 * nothing and this file costs it only the request.
 *
 * Icons are NOT handled here — FA6 to gen-1's icon-* is a rename, not a restyle, and reusing
 * gen-1's working icon CSS beats reimplementing 788 glyph codepoints.
 *
 * Values below were read from the consumer's own stylesheets rather than guessed, so the
 * translations match gen-1 exactly.
 */

/* Screen-reader text
 * …BS5 renamed .sr-only to .visually-hidden, which gen-1 has never heard of, so 10 elements
 * …render as ordinary content — 16,019px of it on the demo report, 62% of the page, the
 * …largest of which is a 7,221px table of chart values
 * …declarations copied verbatim from gen-1's own .sr-only
 */
.ico-bridged .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Block containers
 * …gen-1 sets .container to a fixed width per breakpoint (740/960/1160px), where BS5 uses
 * …max-width — so a block's own container cannot shrink to fit the column it lands in and
 * …overflows by 260px on the demo report
 * …container-fluid is the wrong target: gen-1 defines it, but it zeroes the horizontal padding
 * …the goal is not full width, it is no second constraint
 */
.ico-bridged .container {
  width: auto;
  max-width: 100%;
}

/* Images
 * …block images carry no class at all, so nothing constrains them — the demo report's charts
 * …are 800px natively and render at 1160px, upscaled and overflowing
 * …this is what gen-1's .img-responsive does, applied without needing the class added
 */
.ico-bridged img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Bare columns
 * …BS5 allows a bare .col that shares the row evenly; gen-1's grid is float-based and has no
 * …such class, so a .col is an unstyled block
 * …no horizontal padding, deliberately: gen-1 gives .container 10px and cancels it with the
 * …row's -10px margins, leaving the column's own padding as the page-edge gutter. Bridged
 * …content is not at a page edge — the consumer's article already bounds it — so that gutter
 * …inset the content 10px further than the theme's own, which starts flush
 * …harmless while every block is single-column, which is why the demo report looks intact.
 * …a multi-column block would both stack and lose its inter-column gutter; bare .col carries
 * …no width information for a float grid to divide, so that needs solving separately
 */
.ico-bridged .row > .col {
  position: relative;
  min-height: 1px;
  width: 100%;
}

/* Muted text
 * …BS5.3 renamed .text-muted to .text-body-secondary
 * …colour copied from gen-1's .text-muted
 */
.ico-bridged .text-body-secondary {
  color: #666;
}

/* Block footers
 * …Atlas separates a footer from the content above it with margins on the adjacency, and zeroes
 * …the last paragraph's bottom margin inside .block-inner-content so its own value provides the
 * …whole gap
 * …that last-child rule is Atlas's, so on a gen-1 consumer the paragraph keeps its own bottom
 * …margin and the space above a footer is already correct — porting Atlas's adjacency margins on
 * …top of it double-counted, giving 38px where one paragraph's worth was wanted
 * …what is genuinely missing is below a footer button, where an inline-block element in a row
 * …contributes nothing
 * …1em rather than a pixel value: paragraph margins live in the per-brand CDN stylesheets in
 * …iconic_libs, not in this repo, and they differ between brands and between brand iterations —
 * …swmRed is 14px on a 16px body, others are not. A ratio tracks whatever typography the brand
 * …loads; a measured pixel value would encode one brand's sample network-wide
 */
.ico-bridged .block-inner-footer-buttons {
  margin-bottom: 1em;
}

/* Footer text is smaller than body copy
 * …the source renders it at 13.5px against an 18px base — three quarters — applied inside
 * ….block-inner-footer-text rather than on it
 * …expressed as em so a gen-1 consumer's 16px base gives 12px, keeping the relationship
 * …rather than the absolute size
 */
.ico-bridged .block-inner-footer-text .col {
  font-size: 0.75em;
}

/* Dark blocks are deliberately NOT bridged
 * ….has-bg-color (Atlas), .text-bg-dark (BS5.3) and the data-bs-theme attribute together give a
 * …masthead its dark treatment, and gen-1 defines none of them
 * …translating them was possible but the wrong call: the masthead is a source-side presentation
 * …choice that should not follow the content to a consumer, and the only value available to
 * …translate to was read from one brand's stylesheet
 * …a bridged masthead therefore renders undecorated, which reads as a duplicate of the
 * …consumer theme's own post header
 */

/* Drop gen-1's row clearfix from bridged content
 * …gen-1 gives .row a clearfix: ::before and ::after generating a " " box at display:table, plus
 * …clear:both on the ::after. It is there to contain the row's own floated columns
 * …two separate problems follow, and removing the pseudo-elements answers both
 * …1. clear does not discriminate. The consumer's featured image is emitted as
 * ….img-inline.alignright immediately before the_content() by swmWindsor, swmPembroke, swmDover
 * …and swmBedford, so the ::after clears that too and every row after the first sinks below the
 * …image — only the first block could sit beside it, where native prose wraps freely
 * …2. a generated box at display:table blocks margin collapse through the row's edges, so a
 * …child's margins stop collapsing out of the row and start adding space inside it. Measured:
 * …the row stood 101px tall around a 45px column, trapping 56px. Neutralising clear alone still
 * …left 42px trapped; removing the pseudo-elements gives a row exactly its content's height and
 * …an adjacent-sibling gap of 28px rather than 42px, which is what the consumer's own content does
 * …safe because a bridged row has nothing to clear — Atlas is Bootstrap 5 and lays out with
 * …flexbox, so its columns are not floated and bridged markup contains no floats at all
 * …revisit if a bridged block ever floats something internally, which would want the clearfix
 * ….container carries the same clearfix and is deliberately left alone: measured with a block
 * …shortened to a single line, its section was still 799px tall and its container ended 621px
 * …past a 171px float, so its clearfix never reaches a float to sink toward
 * ….col has no clearfix at all, so it needs nothing
 */
.ico-bridged .row::before,
.ico-bridged .row::after {
  content: none;
}