/* ============================================================================
   inline-utilities.css

   Every rule in this file replaces an inline style="" attribute that used to
   live in the view templates. It exists so the Content-Security-Policy can be
   served WITHOUT style-src 'unsafe-inline'.

   Declarations are copied verbatim from the attributes they replace, so the
   rendered result is unchanged. The class name is recorded next to each rule.
   ============================================================================ */

/* --- layout / sizing ----------------------------------------------------- */

.u-h-100        { height: 100px; }
.u-h-150        { height: 150px; }
.u-h-220        { height: 220px; }
.u-w-16         { width: 16%; }
.u-w-80         { width: 80%; }
.u-w-80px       { width: 80px; }
.u-w-120        { width: 120px; }
.u-w-fit        { width: fit-content; }
.u-mw-150       { max-width: 150px; }
.u-mw-300       { max-width: 300px; }
.u-maxh-80      { max-height: 80px; }
.u-maxh-130     { max-height: 130px !important; }
.u-maxh-150     { max-height: 150px !important; }
.u-sq-15        { width: 1.5rem; height: 1.5rem; }
.u-mr-10        { margin-right: 10px; }
.u-mt-15        { margin-top: 15px; }
.u-p-20         { padding: 20px 20px 20px 20px !important; }
.u-minh-40      { min-height: 40px; margin: 0; }
.u-flex-gap-10  { display: flex; align-items: center; gap: 10px; }

/* Hidden by default; toggled from JavaScript with add/removeClass('u-hidden').
   Replaces inline style="display:none". */
.u-hidden       { display: none; }

/* --- typography ---------------------------------------------------------- */

.u-fs-1              { font-size: 1rem; }
.u-fs-4              { font-size: 4rem; }
.u-fs-12-900         { font-size: 1.2rem; font-weight: 900; }
.u-fs-12-900-black   { font-size: 1.2rem; font-weight: 900; color: black; }
.u-fs-13-700         { font-size: 1.3rem; font-weight: 700; }
.u-fs-1-white        { font-size: 1rem; color: white; }
.u-fw-600            { font-weight: 600; }
.u-fw-600-upper      { font-weight: 600; text-transform: uppercase; }
.u-fw-700-333        { font-weight: 700; color: #333; }
.u-modal-title       { font-size: 1.5rem; color: black; font-weight: 900; }

/* --- colours ------------------------------------------------------------- */

.u-text-white       { color: white; }
.u-text-white-hex   { color: #ffffff; }
.u-text-amber       { color: #ffb325; }
.u-text-navy        { color: #54668e; }
.u-text-brand-blue  { color: #0249bc; }

.u-bg-navy          { background-color: #54668e; }
.u-bg-navy-rel      { background-color: #54668e; position: relative; }
.u-bg-steel         { background-color: #cfd8dd; }
.u-bg-amber         { background: rgb(214, 148, 4); color: white; }
.u-bg-amber-upper   { background-color: rgb(214, 148, 4); color: white; text-transform: uppercase; }
.u-bg-amber-solid   { background-color: #ffb325; }
.u-bg-light2        { background-color: #f8f9fa; }
.u-card-white-pad   { background-color: #ffffff; padding: 1% 2%; }
.u-placeholder-280  { background: #e9ecef; height: 280px; }
.u-hero-blue        { background: linear-gradient(135deg, #0249bc 0%, #54668e 100%); padding: 20px; color: white; }
.u-hero-amber       { background: linear-gradient(135deg, #ffb325 0%, #ffc552 100%); padding: 20px; color: black; }

/* --- borders / rules ----------------------------------------------------- */

.u-border-1-black    { border: 1px solid black; }
.u-border-2-black    { border: 2px solid black; }
.u-border-amber      { border: 1px solid #ffb325; }
.u-border-1-blue     { border: 1px solid #0249bc; }
.u-border-l-blue     { border-left: 3px solid #0249bc; }
.u-border-l-blue-35  { border-left: 3px solid #0249bc; width: 35%; }
.u-border-x-amber    { border-left: 2px solid #ffb325; border-right: 2px solid #ffb325; border-radius: 10px; }
.u-divider-amber     { height: 4px; background-color: #ffb325; opacity: 100; border: none; width: 10%; }
.u-rule-amber        { border-top: 3px solid #ffb325; width: 150px; }
.u-rule-blue         { border-top: 3px solid #0249bc; width: 150px; }

/* --- buttons ------------------------------------------------------------- */

.u-btn-readmore        { background-color: #54668e; font-size: 0.9rem; border-radius: 5px; border: none; width: 120px; height: 40px; }
.u-btn-amber-black     { background-color: #ffb325; border: 1px solid black; color: black; }
.u-btn-amber-bordered  { background-color: #ffb325; border: 1px solid black; }
.u-btn-amber-block     { background-color: #ffb325; border: 1px solid black; width: 100%; margin-top: 5px; }
.u-btn-outline-blue    { border: 1px solid #0249bc; background: transparent; color: #0249bc; }

/* --- media / icons ------------------------------------------------------- */

.u-video-frame      { width: 100%; height: 150px; }
.u-modal-image      { width: 100%; height: 500px; border-radius: 5px; }
.u-thumb-250        { width: 100%; height: 250px; object-fit: cover; border-radius: 6px; }
.u-img-cover-8      { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.u-icon-15-pointer  { font-size: 1.5rem; cursor: pointer; }

.u-modal-close-red   { color: rgb(206, 0, 0); cursor: pointer; font-size: 1.2rem; }
.u-modal-close-white { color: rgb(255, 255, 255); cursor: pointer; font-size: 1.2rem; position: absolute; right: 5px; top: 0; }

/* --- tables -------------------------------------------------------------- */

.u-table-bg-none { --bs-table-bg: none !important; }

/* --- misc ---------------------------------------------------------------- */

.u-loader       { text-align: center; margin-top: 15px; }
.u-pointer      { cursor: pointer; }

/* --- innovation cards rendered by api/filter_innovations.php ------------- */
/* These fragments are injected into the technology listing pages, so their
   inline styles were subject to the page CSP too. */

.u-msg-error        { color: red; text-align: center; }
.u-tech-card        { border: 3px solid #54668e; border-radius: 15px; height: 280px; }
.u-tech-card-logo   { max-height: 40px; max-width: 30%; }
.u-tech-card-title  { min-height: 40px; overflow: hidden; }
.u-minh-40-only     { min-height: 40px; }
.u-minh-30          { min-height: 30px; }
.u-mw-70p           { max-width: 70%; }
.u-divider-navy     { height: 4px; background-color: #54668e; opacity: 1; border: none; width: 50%; }