/* ===========================================================================
   ke-overrides.css  -  small site-wide style overrides owned by us
   ---------------------------------------------------------------------------
   This file is intentionally NOT part of the gulp bundle (which the lead dev
   owns and rev-hashes into /dist/). It is a plain static stylesheet under
   public/css/, linked once in templates/partials/page-head-contents.tpl AFTER
   the bundle so its rules win. Bump the ?v= query when you change it, since it
   is not cache-busted by the build.

   ---------------------------------------------------------------------------
   1) Soften inline bold emphasis, site-wide.
   The body copy is Poppins Light (weight 300). The bundle forces <strong> and
   <b> to 700 !important, so bold words inside a sentence jump Light -> Bold and
   read as harsh in this typeface. Step inline emphasis down to a 500 medium.
   Scope is inline emphasis only: <strong> and <b>. Headings and the .bold
   utility class are deliberately left at their original weight.
   =========================================================================== */
strong,
b {
    font-weight: 500 !important;   /* bundle sets these to 700 !important */
}

/* A touch darker than muted body text so emphasis still stands out, but applied
   ONLY in light body contexts (muted paragraphs and tables). This keeps the
   darker ink off colored/dark sections, where it could wash out. */
.text-muted strong,
.text-muted b,
.table strong,
.table b {
    color: #343a40;
}

/* Never recolor bold text that sits inside a link: keep the link's own color.
   !important so this wins even inside a .text-muted paragraph. */
a strong,
a b {
    color: inherit !important;
}

/* Call-out links inside an alert box. Bootstrap renders .alert-link at 700,
   which is the same harsh bold we step <strong>/<b> down from. Bring them to the
   same 500 medium so the alert's emphasis matches the rest of the soft-bold copy.
   Colour is left untouched so the link still stands out inside the alert. */
.alert-link {
    font-weight: 500 !important;   /* Bootstrap sets .alert-link to 700 */
}

/* ===========================================================================
   2) Comparison tables on mobile  ->  add class="... ke-compare-table"
   ---------------------------------------------------------------------------
   The bundle's responsive-table style hides the <thead> on small screens and
   turns each <td> into a flex row, reading its label from a data-title
   attribute. That works for single-value cells, but it splits any cell that
   contains inline markup (e.g. a <strong> lead-in) into separate flex columns,
   which looks broken. For 2-column "before / after" comparison tables, opt in
   with .ke-compare-table and give each <td> a data-title: the cell then stacks
   as a simple block, with the data-title shown as a bold label above the
   full-width value. Desktop is untouched (this is mobile-only).
   =========================================================================== */
@media (max-width: 767.98px) {
    table.ke-compare-table tbody td {
        display: block !important;
        width: 100% !important;
    }
    table.ke-compare-table tbody td::before {
        display: block !important;
        font-weight: 600 !important;
        color: #343a40 !important;
        margin-bottom: .15rem !important;
    }
}

/* ===========================================================================
   3) Entity-page hero H1 size on desktop
   ---------------------------------------------------------------------------
   The bundle renders the hero H1 (entityName) at 40px, which forces titles to
   be very short to stay on one line beside the logo (only ~38 chars fit at the
   992px lg width). Step it down to 34px on desktop so a fuller heading (up to
   ~45 chars) fits on a single line across all desktop widths. Mobile H1 sizes
   are set separately in common.tpl and are unaffected (this is min-width 768).
   =========================================================================== */
@media (min-width: 768px) {
    .header.gradient-accent h1 {
        font-size: 2.125rem;
    }
}