/* =============================================================================
   Legacy-theme styling for the SHARED page-content classes (.ovp-*).

   The prototype sheet (page-prototype.css, loaded only on the overlay-menu layout)
   styles these same classes the prototype way; this file gives the identical markup
   a legacy _Layout look. Scoped to `#page-content .page-html` so it can't leak.

   One authored-content markup, two stylesheets — see Views/StyleGuide/Content.cshtml
   (legacy) and PrototypeContent.cshtml (prototype). Keep this in lockstep with the
   legacy content rules those pages demonstrate.

   Loaded by:
     - Views/StyleGuide/Content.cshtml (the legacy style-guide demo)
     - the AI Polish before/after preview (legacy-mode pane), which wraps content in
       <div id="page-content"><div class="page-html">…</div></div>
   This file lives under wwwroot/css/prototype/** so it is EXCLUDED from the global
   site.min.css bundle — reference it explicitly with a <link>.
   ============================================================================= */

/* Section headings — underline BELOW each h2 (mirrors the prototype's h2 treatment:
   a 2px rule with a short brand-orange accent at the start), in legacy gray. */
#page-content .page-html h2 {
    margin: 2.2em 0 0.6em;
    padding-bottom: 0.3em;
    border-bottom: 2px solid #ddd;
    clear: both;
    position: relative;
}
#page-content .page-html h2::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 56px; height: 2px;
    background: #FF5F05;
}
#page-content .page-html h2:first-child { margin-top: 0; }

/* Lead paragraph */
#page-content .page-html .ovp-lead { font-size: 18px; line-height: 1.6; color: #555; margin-bottom: 18px; }

/* Inline elements */
#page-content .page-html kbd { background: #333; border-radius: 3px; padding: 2px 6px; font-size: 12px; }
#page-content .page-html mark { background: #fff3b0; padding: 0 3px; }

/* Callouts — legacy alert-flavored boxes (icon + body) */
#page-content .page-html .ovp-callout {
    display: flex; gap: 12px; align-items: flex-start;
    margin: 14px 0; padding: 12px 16px;
    border: 1px solid transparent; border-radius: 4px; line-height: 1.5;
}
/* Authored markup uses <i>; Kendo rewrites empty <i> to <em> on save — match both. */
#page-content .page-html .ovp-callout > i,
#page-content .page-html .ovp-callout > em { margin-top: 2px; font-size: 16px; }
#page-content .page-html .ovp-callout--info { background: #d9edf7; border-color: #bce8f1; color: #31708f; }
#page-content .page-html .ovp-callout--note { background: #dff0d8; border-color: #d6e9c6; color: #3c763d; }
#page-content .page-html .ovp-callout--warning { background: #fcf8e3; border-color: #faebcc; color: #8a6d3b; }
#page-content .page-html .ovp-callout--danger { background: #f2dede; border-color: #ebccd1; color: #a94442; }

/* Definition list */
#page-content .page-html .ovp-dl dt { font-weight: 700; color: #13294b; }
#page-content .page-html .ovp-dl dd { margin: 0 0 10px; }

/* Tables — legacy striped / bordered / hover look */
#page-content .page-html .ovp-table { width: 100%; margin: 14px 0 20px; border-collapse: collapse; }
#page-content .page-html .ovp-table th,
#page-content .page-html .ovp-table td { border: 1px solid #ddd; padding: 8px 10px; }
#page-content .page-html .ovp-table thead th { background: #f5f5f5; border-bottom: 2px solid #ddd; text-align: left; }
#page-content .page-html .ovp-table tbody tr:nth-child(odd) { background: #f9f9f9; }
#page-content .page-html .ovp-table tbody tr:hover { background: #f1f1f1; }

/* Quotes */
#page-content .page-html blockquote { border-left: 4px solid #13294b; }
#page-content .page-html blockquote cite { display: block; margin-top: 6px; color: #777; font-style: italic; }

/* Code block */
#page-content .page-html pre {
    background: #1f2937; color: #e6edf3; border: 0; border-radius: 6px;
    padding: 14px 16px; overflow: auto;
}

/* Figures — full-width + newspaper-style floats (image/text comingling) */
#page-content .page-html .ovp-figure { margin: 18px 0; }
#page-content .page-html .ovp-figure img { display: block; max-width: 100%; border: 1px solid #ddd; border-radius: 4px; padding: 4px; background: #fff; }
#page-content .page-html .ovp-figure figcaption { color: #777; font-size: 13px; margin-top: 6px; font-style: italic; }
#page-content .page-html .ovp-figure--left { float: left; margin: 6px 22px 14px 0; }
#page-content .page-html .ovp-figure--right { float: right; margin: 6px 0 14px 22px; }
#page-content .page-html .ovp-figure--25 { width: 25%; }
#page-content .page-html .ovp-figure--50 { width: 50%; }
#page-content .page-html .ovp-figure--75 { width: 75%; }
@media (max-width: 767px) {
    #page-content .page-html .ovp-figure--left,
    #page-content .page-html .ovp-figure--right { float: none; width: auto; margin: 18px 0; }
}

/* Buttons & links */
#page-content .page-html .ovp-button-row { margin: 14px 0; }
#page-content .page-html .ovp-btn {
    display: inline-block; padding: 6px 14px; margin: 0 6px 6px 0;
    border-radius: 4px; font-weight: 600; text-decoration: none;
    border: 1px solid transparent; cursor: pointer;
}
#page-content .page-html .ovp-btn i { margin: 0 2px; }
#page-content .page-html .ovp-btn--primary { background: #13294b; border-color: #13294b; color: #fff; }
#page-content .page-html .ovp-btn--primary:hover { background: #0d1c34; color: #fff; }
#page-content .page-html .ovp-btn--secondary { background: #e9eef3; border-color: #c7d2dd; color: #13294b; }
#page-content .page-html .ovp-btn--secondary:hover { background: #dde5ee; color: #13294b; }
#page-content .page-html .ovp-btn--outline-orange { background: transparent; border-color: #FF5F05; color: #A72F10; }
#page-content .page-html .ovp-btn--outline-orange:hover { background: rgba(255,95,5,0.08); color: #A72F10; }
#page-content .page-html .ovp-btn--outline-blue { background: transparent; border-color: #13294b; color: #13294b; }
#page-content .page-html .ovp-btn--outline-blue:hover { background: rgba(19,41,75,0.06); color: #13294b; }

/* Page tags — small rounded-square swatch + label; button look + active/Back */
#page-content .page-html .ovp-page-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 16px; line-height: 1.5; }
#page-content .page-html .ovp-page-tag-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; border: 1px solid rgba(0,0,0,0.15); vertical-align: middle; }
#page-content .page-html button.ovp-page-tag--btn {
    display: inline-flex; align-items: center; white-space: nowrap;
    border: 0; background: transparent; font: inherit; color: inherit;
    cursor: pointer; padding: 2px 9px 2px 5px; border-radius: 999px;
    transition: background .14s ease, color .14s ease;
}
#page-content .page-html button.ovp-page-tag--btn:hover,
#page-content .page-html button.ovp-page-tag--btn:focus { background: rgba(19,41,75,0.07); }
#page-content .page-html button.ovp-page-tag--btn.is-active { background: rgba(255,95,5,0.12); color: #13294b; font-weight: 600; }
#page-content .page-html .ovp-tag-back {
    display: inline-flex; align-items: center; gap: 6px; border: 0;
    background: #13294b; color: #fff; cursor: pointer; font: inherit;
    font-weight: 600; font-size: 13px; padding: 2px 13px; border-radius: 999px; margin-right: 6px;
}
#page-content .page-html .ovp-tag-back:hover,
#page-content .page-html .ovp-tag-back:focus { background: #1f3d7b; color: #fff; }
#page-content .page-html .ovp-tag-back i { font-size: 0.8em; }

/* Article footer chip */
#page-content .page-html .ovp-article-footer { margin-top: 26px; padding-top: 14px; border-top: 1px dashed #ccc; }
#page-content .page-html .ovp-updated-chip { color: #777; font-size: 13px; }
#page-content .page-html .ovp-updated-chip i { margin-right: 5px; }