/* ------------------------------------------------------------------
   modal-from-main.css
   Verbatim copy of the modal-related rules from assets/css/main.css,
   which the Features page loads but the sub pages do not.

   Source: ~/hermes-web/cncbi/sme/business-inmotion/assets/css/main.css

       .close:hover      { color: #ff5800; }
       .modal-backdrop   { background-color: rgba(0, 0, 0, 0.4); }
       .modal-dialog     { width: 100%; margin: 0; }

   The last one is the important one: it makes .modal-dialog full width,
   so the official "#modal_dl .modal-content { width: 60% }" rule in
   inmo-style.css resolves to 864px at 1440px wide — exactly like the
   Features page. Without it the BS3 default 600px dialog wins and the
   modal comes out 360px wide.

   Nothing here is invented; all three declarations are copied as-is.
   ------------------------------------------------------------------ */

.close:hover {
    color: #ff5800;
}
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.4);
}
.modal-dialog {
    width: 100%;
    margin: 0;
}

/* ------------------------------------------------------------------
   Base font-size, copied from the same file.

   The Features page's css/bootstrap.css has been customised:
       body { font-size: 18px; line-height: 1.42857143; color: #333; }
   whereas the sub pages use stock Bootstrap 3.4.1:
       body { font-size: 14px; line-height: 1.42857143; color: #333; }

   That matters because the modal's <h1> carries an inline
   style="font-size: 3em !important" — 3em is 54px on the Features page
   but only 42px on the sub pages, so the heading comes out the wrong size.

   Setting it on #modal_dl (not body) reproduces the Features page's
   heading without touching anything else on the sub pages.
   ------------------------------------------------------------------ */
#modal_dl {
    font-size: 18px;
    color: #333;
}

/* Heading line-height, same value as Bootstrap's own heading rule
       h1,h2,h3,h4,h5,h6 { line-height: 1.1 }

   !important is required here: the sub pages carry their own inline rule
       h1 { font-size: 24px !important; line-height: 1.4 !important; }
   which wins on importance alone. #modal_dl h1 has higher specificity, so
   with !important on both sides the modal heading keeps the Features page's
   1.1 (59px) instead of 1.4 (76px). */
#modal_dl h1 {
    line-height: 1.1 !important;
}

/* ------------------------------------------------------------------
   <small> size, copied from assets/bower_components/normalize-css/normalize.css

   The Features page loads that file LAST, and it ends with
       small { font-size: 80%; }
   which is the declaration that actually wins there — Bootstrap's own
   `.small, small { font-size: 85%; }` comes earlier and loses.

   The sub pages don't load normalize.css, so 85% wins and the modal's
   small print renders 13.6px instead of the Features page's 12.8px.

   Scoped to #modal_dl so other <small> elements on the sub pages are
   untouched.
   ------------------------------------------------------------------ */
#modal_dl small {
    font-size: 80%;
}