﻿/* Styles/eqr-banner.css
   Purpose: centralize all EQR banner typography and layout, ensure consistent font,
   bold text (no italics), and make hyperlink color match surrounding text.
   Scope: applies to either the .eqr-banner class OR the #pnlEqrBanner panel.
*/

/* ===== Banner container (authoritative rules) ===== */
.eqr-banner,
#pnlEqrBanner {
    /* Match the rest of ReportViewer UI */
    font-family: Verdana, Arial, Helvetica, sans-serif;
    /* Normalize text size and rhythm */
    font-size: 0.875rem; /* ≈14px; adjust if needed */
    line-height: 1.4; /* matches your previous ASPX style */
    /* Required style */
    font-weight: 700 !important; /* bold */
    font-style: normal !important; /* not italic */
    /* Color: enforce the same red used previously in ASPX */
    color: #B00000; /* banner text color */
    /* Layout from your ASPX */
    margin: 10px 0 14px 0;
    text-align: left;
}

    /* ===== Ensure everything inside the banner inherits the container’s typography ===== */
    .eqr-banner *,
    #pnlEqrBanner * {
        font-family: inherit !important;
        font-size: inherit !important;
        line-height: inherit !important;
        font-style: inherit !important;
        font-weight: inherit !important;
        color: inherit !important; /* links and spans will follow the container color */
    }

/* Optional helper class (if provider wraps text with this span) */
.eqr-banner__text {
    font: inherit !important;
    color: inherit !important;
}

/* ===== Normalize headings in case provider emits <h1>/<h2>/<h3> ===== */
.eqr-banner h1,
.eqr-banner h2,
.eqr-banner h3,
#pnlEqrBanner h1,
#pnlEqrBanner h2,
#pnlEqrBanner h3 {
    font-size: inherit !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    color: inherit !important;
    margin: 0;
}

/* ===== Links: same color and font as surrounding text in all states ===== */
.eqr-banner a:link,
.eqr-banner a:visited,
.eqr-banner a:hover,
.eqr-banner a:focus,
.eqr-banner a:active,
#pnlEqrBanner a:link,
#pnlEqrBanner a:visited,
#pnlEqrBanner a:hover,
#pnlEqrBanner a:focus,
#pnlEqrBanner a:active {
    color: currentColor !important; /* exact same color as surrounding text */
    font-family: inherit !important; /* same font family */
    font-size: inherit !important;
    line-height: inherit !important;
    font-style: inherit !important; /* keep non-italic */
    font-weight: inherit !important; /* keep bold */
    /* Keep underline for accessibility (tune as desired) */
    text-decoration: underline;
    text-underline-offset: 1px; /* optional polish */
    text-decoration-thickness: auto; /* optional polish */
}

/* ===== Optional variants (uncomment if you prefer) ===== */

/* 1) If the banner color will be set elsewhere (e.g., provider),
      comment out the container 'color' above and rely on inherit.
   .eqr-banner, #pnlEqrBanner { color: inherit; }
*/

/* 2) If you prefer no underline in the banner links:
   .eqr-banner a,
   #pnlEqrBanner a {
     text-decoration: none;
   }
*/

/* 3) If you want a different baseline size, e.g., 13px:
   .eqr-banner, #pnlEqrBanner { font-size: 0.8125rem; }
*/

/* 4) If you want responsive sizing that never gets too big/small:
   .eqr-banner, #pnlEqrBanner { font-size: clamp(13px, 1vw, 15px); }
*/
