/* THE PORTAL'S FOOTER LINE AND TERMS & CONDITIONS (2026-10-09; Shared.Ui/PortalText) - one look for the portal and the
   CRM's previews of them (Virtual HRM → Footer), and for the CRM's rich text editors' content, so the editor shows
   roughly what the page will. */

/* ---- the footer line (it was Bootstrap's text-center text-muted small mt-5 pb-3) ---- */
.pt-footer {
    text-align: center; color: #6c757d; font-size: .875em;
    margin-top: 3rem; padding-bottom: 1rem; line-height: 1.7;
}
.pt-footer .pt-sep { margin: 0 .5em; }
.pt-footer .pt-item { white-space: nowrap; }
.pt-footer a { color: inherit; text-decoration: underline; }
.pt-footer a.pt-tel { text-decoration: none; }
.pt-footer a.pt-tel:hover, .pt-footer a.pt-tel:focus-visible { text-decoration: underline; }
.pt-inert a { pointer-events: none; cursor: default; }

/* ---- the Terms & Conditions page ---- */
.pt-terms { color: #2b2f38; line-height: 1.6; max-width: 60rem; }
.pt-none { color: #6c757d; }

/* Key points: a box at the top - a tinted panel with a rule and its own heading, never colour alone. */
.pt-keypoints {
    border: 1px solid #c9d3e6; border-left: .25rem solid #191F45; background: #f4f7fc;
    border-radius: .5rem; padding: .875rem 1.25rem .375rem; margin: 0 0 1.75rem;
}
.pt-keypoints-h { font-size: 1.1rem; font-weight: 700; color: #191F45; margin: 0 0 .5rem; }

/* The rich text itself - the terms, the key points, and the CRM's editors (.pt-editor). */
.pt-rich h1, .pt-editor h1 { font-size: 1.35rem; font-weight: 700; color: #191F45; margin: 1.4em 0 .5em; }
.pt-rich h2, .pt-editor h2 { font-size: 1.15rem; font-weight: 700; color: #191F45; margin: 1.4em 0 .5em; }
.pt-rich h3, .pt-editor h3 { font-size: 1rem; font-weight: 700; color: #191F45; margin: 1.1em 0 .4em; }
.pt-rich h4, .pt-rich h5, .pt-rich h6 { font-size: .95rem; font-weight: 700; margin: 1em 0 .4em; }
.pt-rich > :first-child { margin-top: 0; }
.pt-rich p { margin: 0 0 .75em; }
.pt-rich ul, .pt-rich ol { margin: 0 0 .75em; padding-left: 1.6em; }
.pt-rich li { margin: 0 0 .35em; }
.pt-rich a { color: #1f4e9c; }
.pt-rich table { border-collapse: collapse; margin: 0 0 1em; max-width: 100%; }
.pt-rich th, .pt-rich td { border: 1px solid #d5dbe6; padding: .375rem .625rem; vertical-align: top; text-align: left; }
.pt-rich th { background: #f1f4f9; font-weight: 700; }

/* THE HIGHLIGHT BOX (the old portal's coloured AI disclaimer): a quote. The editor writes a quote of several paragraphs
   as one quote per paragraph, so consecutive ones join into one box - padding at its top and bottom only. */
.pt-rich blockquote, .pt-editor blockquote, .pt-editor .dx-htmleditor-content blockquote {
    margin: 0; padding: 2px 1.125rem; background: #fff7e3; border-left: .25rem solid #d9921a; color: #3b3222;
}
.pt-rich :not(blockquote) + blockquote, .pt-rich blockquote:first-child,
.pt-editor :not(blockquote) + blockquote, .pt-editor blockquote:first-child { margin-top: .9em; padding-top: .625rem; }
.pt-rich blockquote:has(+ :not(blockquote)), .pt-rich blockquote:last-child,
.pt-editor blockquote:has(+ :not(blockquote)), .pt-editor blockquote:last-child { margin-bottom: .9em; padding-bottom: .625rem; }
.pt-rich blockquote p { margin: 0 0 .5em; }
.pt-rich blockquote p:last-child { margin-bottom: 0; }

/* ---- the page around it (the portal's /terms) ---- */
.pt-page-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin: 0 0 1.125rem; }
.pt-page-title { font-size: 1.6rem; font-weight: 700; color: #191F45; margin: 0; }
/* The terms scroll in their own box, so the portal's banner and the title and Back above stay put (2026-10-09). The
   portal sizes it to the window (App.razor, fitTermsScroll); without that it is simply as tall as the terms. */
.pt-scroll { overflow-y: auto; padding-right: .625rem; border-top: 1px solid #e6e9ef; padding-top: 1rem; }
.pt-scroll:focus-visible { outline: 2px solid #191F45; outline-offset: 2px; }
.pt-back { display: inline-flex; align-items: center; gap: .375rem; color: #1f4e9c; text-decoration: none; font-weight: 600; }
.pt-back:hover, .pt-back:focus-visible { text-decoration: underline; }