/* =============================================================================
   Sticky "Why BMR" bug  (inc/why-bmr-bug.php)
   -----------------------------------------------------------------------------
   Client request 2026-08-19. Reference: the "Explore Properties" widget on
   biomedrealty.com — position:fixed, right:0, bottom:10px, z-index 99, radius
   50px 0 0 50px, ALWAYS expanded. The client's own comp ("Why BMR Mockup.pdf")
   keeps the flush-right anchoring but collapses it to a square holding the
   BioMed Realty mark, expanding LEFT on hover to reveal a two-line label.

   Every number below is measured off that comp's vector art (the PDF's page is
   1770x1080pt over a browser screenshot; 1pt = 0.873 CSS px there, calibrated
   against the header pill, whose 84px height and 10px radius we already know):

       bug              165.0 x 65.8   (drawn 45px off the page's right edge,
                                        i.e. only the left corners ever show —
                                        so: flush right, radius on the left)
       radius            7.5           -> 8
       bottom offset    23.3           -> 24
       padding          16.3 top / 16.3 left / 16.4 bottom / 13.6 right
       mark             33.3 tall (37.0 incl. the hanging ®)
       gap mark->label  15.5
       label            17px / 600 / 19.8px line advance (= 1.16), #231F20
                        (600, not 700: the comp's stem-to-cap ratio is 0.168,
                         and Instrument Sans measures 0.118 / 0.149 / 0.170 /
                         0.205 at 400 / 500 / 600 / 700)
       fill             the header pill's cream, sampled identical in-comp

   THE EXPANSION IS A GRID TRACK, NOT A WIDTH. `width` cannot animate to
   content size, and the label's width is set by the type, so the panel is a
   two-column grid whose label track goes 0fr -> 1fr: under an indefinite
   (shrink-to-fit) container an `fr` track resolves to flex-factor x its
   max-content size, so 0->1 walks the box open to exactly the label's natural
   width with nothing hardcoded. Same trick the accordion uses on rows.

   The 15px mark->label gap is the label's own padding-left, NOT a grid
   `column-gap` — a gap is still drawn either side of a 0fr track, so it would
   add 15px of dead cream to the collapsed square.

   LABEL COPY: "Why / BioMed Realty" since 2026-08-20 (client), matching the
   footer nav; the comp and the original build said "Why / BMR". Nothing here
   needed changing for it — the 0fr->1fr track sizes itself to the copy, so the
   chip simply opens wider (120 -> 202px). The COLLAPSED square is unaffected:
   the track is 0 wide either way, and the label is still two lines, so it
   still contributes the same 39.4px row height.
   ============================================================================= */

.whybmr {
	position: fixed;
	right: 0;
	/* The comp says 24px, but AudioEye's launcher (#ae_launcher, Site Settings →
	   Integration → Footer Scripts) is fixed at right:24px / bottom:24px, 44x48,
	   z-index 20000, so it painted over the mark and swallowed clicks. The chip
	   stacks above it instead: 24 + 48 + 16px air. Back to 24px if AudioEye is
	   ever removed or its launcher moved (a preset in BioMed's AudioEye account). */
	bottom: 88px;
	/* over page content, under the header (50) and the mobile nav overlay
	   (core's 100000) — the bug must never sit on top of the open menu. */
	z-index: 45;

	display: grid;
	grid-template-columns: auto 0fr;
	align-items: center;

	/* 13px block, not the comp's 16 — the comp measures its padding to the MARK,
	   and the two-line label's line boxes (2 x 19.7 = 39.4) stand 6.4px taller
	   than the 33px mark, so they, not the mark, set the row height. 13 + 39.4 +
	   13 = 65.4, which lands the mark's ink 16.2px off each edge exactly as
	   drawn — and keeps the collapsed state SQUARE (65.4 x 66.1). Padding the
	   comp's 16 would render a 66 x 71 portrait rectangle. */
	padding: 13px 13px 13px 16px;
	border-radius: 8px 0 0 8px;
	background: rgba(239, 237, 230, .95);
	/* the comp only ever shows the bug over a dark photo, but it scrolls over
	   the site's cream and off-white bands too, where the fill alone is nearly
	   invisible — same shadow as the header pill, for the same reason. */
	box-shadow: 0 2px 28px rgba(0, 0, 0, .15);
	color: #231f20;
	text-decoration: none;

	transition: grid-template-columns .35s ease;
}

.whybmr--mark {
	display: block;
	height: 33px;
	width: auto;
	/* SVG dimensions in the media library are bogus, and even for a theme asset
	   an explicit ratio beats inheriting one from the width/height attributes. */
	aspect-ratio: auto;
}

.whybmr--label {
	overflow: hidden;
	min-width: 0;
	/* the track is clipped mid-glyph while it opens; fading the type in means
	   nobody ever reads half a letterform. */
	opacity: 0;
	transition: opacity .2s ease;
}

.whybmr--label-inner {
	display: block;
	padding-left: 15px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.16;
	white-space: nowrap;
}

.whybmr:hover,
.whybmr:focus-visible {
	grid-template-columns: auto 1fr;
}

.whybmr:hover .whybmr--label,
.whybmr:focus-visible .whybmr--label {
	opacity: 1;
	transition-delay: .12s;
}

/* Focus ring: reset BOTH pseudo-classes, then reinstate on :focus-visible only
   (house rule — a bare :focus fires on mouse and touch too). Black, not the
   site's lime: lime on cream measures ~1.6:1, under WCAG 2.4.11's 3:1 floor
   for a non-text indicator. Inset offset because the bug's right edge is the
   viewport's — an outward ring would be half off-screen. */
.whybmr:focus,
.whybmr:focus-visible {
	outline: none;
}

.whybmr:focus-visible {
	outline: 2px solid #231f20;
	outline-offset: -4px;
}

/* Touch: there is no hover to expand with, and an unlabelled corner mark is a
   poor affordance — so render it open, which is also what the biomedrealty.com
   reference does at every width. */
@media (hover: none) {
	.whybmr {
		grid-template-columns: auto 1fr;
	}

	.whybmr--label {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.whybmr,
	.whybmr--label {
		transition: none;
	}
}

@media print {
	.whybmr {
		display: none;
	}
}