/* ------------------------------------------------------------------
   Policy & Procedures Manual — document (clearing-house) page styling.

   Goal: render each policy/procedure so it reads like the source PDF —
   near-black Arial-family text in a constrained document-width column,
   a bold stacked number/title, ruled metadata with bold-italic labels,
   and a bold "Policy" / "Procedure" section heading before the body.

   Linked from policy-view.php as /ie/policy-manual/style.css
------------------------------------------------------------------ */

.policy-doc {
    max-width: 46rem;                 /* document measure, not full page width */
    color: #1a1a1a;
    font-family: Arial, Helvetica, "Segoe UI", sans-serif;
}

/* Back-to-manual link — a web affordance, not part of the source document */
.policy-back { color: #162447; font-size: .9rem; }

/* Title block: "BP 4.3" over "Grievance Policy – Students", both bold/black,
   closed by a rule (matches the line under the title in the PDF). */
.policy-head    { border-bottom: 1px solid #111; padding-bottom: .5rem; }
.policy-docnum  { font-weight: 700; font-size: 1.15rem; color: #000; margin: 0 0 .15rem; }
.policy-title   { font-weight: 700; font-size: 1.6rem; color: #000; line-height: 1.2; margin: 0 0 .5rem; }

/* Metadata: bold-italic labels + italic values, closed by a rule — the
   ruled label/value band from the PDF (no filled box). */
.policy-meta      { border-bottom: 1px solid #111; padding: .7rem 0 .8rem; margin: 0 0 1.5rem; }
.policy-meta-row  { display: flex; gap: 1rem; margin-bottom: .15rem; }
.policy-meta dt   { flex: 0 0 11rem; font-style: italic; font-weight: 700; color: #000; }
.policy-meta dd   { margin: 0; font-style: italic; }

/* "Policy" / "Procedure" section label, and the document body. */
.policy-section   { font-weight: 700; font-size: 1.25rem; color: #000; margin: 0 0 .9rem; }

.policy-body      { line-height: 1.5; }
.policy-body p    { margin: 0 0 1rem; }
.policy-body h2   { font-weight: 700; font-size: 1.1rem; color: #000; margin: 1.4rem 0 .5rem; }
.policy-body ol,
.policy-body ul   { margin: 0 0 1rem 1.6rem; }
.policy-body li   { margin-bottom: .4rem; }

@media (max-width: 575.98px) {
    .policy-meta-row { flex-direction: column; gap: 0; margin-bottom: .5rem; }
    .policy-meta dt  { flex-basis: auto; }
}

/* ------------------------------------------------------------------
   Related documents — cross-reference block below the body. Ruled
   off from the document like the other sections; a plain linked list,
   no colour beyond the site's link navy. Reciprocal BP->CP for now
   (and, later, a curated "see also" list from a related_docs column).
------------------------------------------------------------------ */
.policy-related      { border-top: 1px solid #111; margin-top: 1.75rem; padding-top: 1rem; }
.policy-related .policy-section { font-size: 1.1rem; margin-bottom: .6rem; }
.policy-related-list { list-style: none; margin: 0; padding: 0; }
.policy-related-list li { margin-bottom: .4rem; }
.policy-related-list a  { color: #162447; text-decoration: none; }
.policy-related-list a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------
   Print / "Save as PDF": strip all site chrome and print just the
   document — number, title, ruled metadata, section heading, body.
   header/nav/footer catch the topbar, main nav and footer; the rest
   are the offcanvas, the desktop sidebar column, and the on-page
   controls (back link + print button) that don't belong on paper.
------------------------------------------------------------------ */
@media print {
    /* Print ONLY the document. Everything on the page except the .content
       wrapper is site chrome (topbar, mobile header, nav, search bar,
       offcanvas, footer) — hide it wholesale rather than guess its markup.
       Then drop the innerheader, the sidebar column, and the on-page
       controls (back link + print button) that don't belong on paper. */
    body > *:not(.content)      { display: none !important; }
    .content > *:not(main)      { display: none !important; }
    .image-column, .director-info,
    .policy-back, .policy-print { display: none !important; }

    /* collapse the Bootstrap layout so the document prints full width */
    .content, main, .container-fluid, .row, .col-lg-8 {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .policy-doc { max-width: none; color: #000; }
    .policy-doc a { color: #000; text-decoration: none; }
    .policy-body { line-height: 1.45; }

    @page { margin: 1.6cm; }
}