/*
 * Utility classes replacing the theme's inline style="" attributes.
 * Added 2026-08-05 for the CSP 'unsafe-inline' removal (Phase B step 3).
 *
 * WHY !important IS USED HERE, DELIBERATELY
 * An inline style beats every normal author rule; a class does not. Converting
 * style="" to a class demotes each declaration to specificity (0,0,1,0), so any
 * theme rule of equal or higher specificity touching the same property would now
 * win where the inline style previously did. !important reproduces the old
 * precedence. This is not decoration - remove it and the layout shifts.
 *
 * THE TWO EXCEPTIONS, AND WHY THEY DIFFER
 *   .u-hidden       has NO !important on purpose. jQuery .show()/.fadeIn()/
 *                   .toggle() reveal an element by writing a NON-important inline
 *                   display, which an !important class would defeat. Verified
 *                   against this site's jQuery 3.7.1 in a real browser: .show(),
 *                   .fadeIn() and .toggle() all correctly reveal a .u-hidden
 *                   element. Used for the JS-toggled ones (#quiz_loader,
 *                   #height_in_cm, #weight_in_lbs, .quizListing, and others).
 *   .u-hidden-hard  DOES use !important, for elements that are never revealed by
 *                   JS but DO have a competing CSS rule. Currently only .srcpop,
 *                   which the theme tries to reveal with
 *                   "a:hover .srcpop{display:inline-block}". The old inline style
 *                   beat that rule, so the element is permanently hidden today
 *                   and the hover effect is dead. !important preserves exactly
 *                   that. If you WANT the hover to work, that is a deliberate
 *                   design change - make it knowingly, not by dropping this.
 */

/* colour */
.u-color-black    { color: #000000 !important; }
.u-color-ccc      { color: #ccc !important; }
.u-color-717171   { color: #717171 !important; }
.u-color-cb0606   { color: #cb0606 !important; }

/* type */
.u-fs-14          { font-size: 14px !important; }
.u-fs-18          { font-size: 18px !important; }
.u-fs-20          { font-size: 20px !important; }
.u-fs-46          { font-size: 46px !important; }
.u-text-center    { text-align: center !important; }
.u-text-left      { text-align: left !important; }

/* spacing */
.u-mt-20          { margin-top: 20px !important; }
.u-mt-25          { margin-top: 25px !important; }
.u-mt-30          { margin-top: 30px !important; }
.u-mr-10          { margin-right: 10px !important; }
.u-mr-20          { margin-right: 20px !important; }
.u-mb-30          { margin-bottom: 30px !important; }

/* sizing / layout */
.u-w-100          { width: 100% !important; }
.u-mw-800-auto    { max-width: 800px !important; margin: auto !important; }
.u-mw-600-auto    { max-width: 600px !important; margin: auto !important; }
.u-rel-top-8      { position: relative !important; top: 8px !important; }
.u-rel-top-12     { position: relative !important; top: 12px !important; }
.u-icon-1em       { width: 1em !important; height: 1em !important;
                    vertical-align: -0.125em !important; fill: currentColor !important; }

/*
 * .u-w80-center is the FAITHFUL port of a malformed attribute:
 *   style=" width: 80px; inline-block;  text-align: center!important"
 * "inline-block" has no property, so the browser discards it and those 3 elements
 * get NO display today. Reproduced exactly rather than fixed, because fixing it
 * would change rendering and that is outside a CSP migration. The correctly
 * written siblings use .u-w80-ib-center. Worth fixing deliberately later.
 */
.u-w80-center     { width: 80px !important; text-align: center !important; }
.u-w80-ib-center  { width: 80px !important; display: inline-block !important;
                    text-align: center !important; }

/* visibility - see the long note above before touching these two */
.u-hidden         { display: none; }
.u-hidden-hard    { display: none !important; }

/*
 * Added in the same pass, from SINGLE-quoted style attributes. These were missed
 * by the first sweep because every count and conversion used style="..." with
 * double quotes only - so they were never in the "121" and never converted. The
 * oracle caught them: they were exactly the 5 residual style-src-attr violations
 * on /health-videos, /reviews and /location-contact-information. Any future audit
 * of inline styles must match BOTH quote styles.
 */
.u-jc-end         { justify-content: end !important; }
.u-mb-0           { margin-bottom: 0px !important; }
.u-h-600          { height: 600px !important; }