/*==========================================================================
              UK Compliance Manual Styles (Mobile-First)
==========================================================================*/
.manual-container nav,
.manual-container ul { all: revert; }
p { padding: 0; margin: 5px; }
/*==========================================================================
                UK Compliance Manual Styles (Mobile-First)
==========================================================================*/
.compliance-blog-main-content { padding: 40px 20px; }
.article-feature-image { margin: 2rem auto; }
.article-feature-image img { display: block; width: 100%; height: auto; border-radius: var(--border-radius); }
.contents {list-style-type: none;}
.manual-container, .chapter { line-height: 1.7; background-color: #fafafa; padding: 10px; margin: 0 auto; }
.manual-container > section:not(:first-child) { margin-top: 2.5em; }
.manual-container .critical-update { color: #c82333; font-weight: 700; }
.manual-container .action-point { background-color: #fff3cd; border-left: 5px solid #ffc107; padding: 15px 20px; margin: 25px 0; border-radius: 0 4px 4px 0; }
.manual-container .action-point strong { color: #1a3a63; }
.manual-container h1, .manual-container h2, .manual-container h3, .manual-container h4 { color: #001430; line-height: 1.3; font-weight: 700; }
.manual-container h1 { font-size: 2em; margin-bottom: 0.5em; }
.manual-container h2, .chapter h2 { font-size: 1.5em; margin-top: 0; border-bottom: 2px solid #b2c4d3; padding: 0.5em; }
.manual-container h3, .chapter h3 { font-size: 1.3em; margin-top: 2em; }
.manual-container h4, .chapter h4 { font-size: 1.1em; font-weight: 600; text-transform: uppercase; color: #001430; margin-top: 1.5em; }
.manual-container p, .chapter p  { font-size: 1rem; color: #001430; font-weight: 500; }
.manual-container a, .chapter a { color: #0056b3; font-weight: 600; text-decoration: none; transition: color 0.2s ease-in-out; }
.manual-container a:hover, .chapter a:hover { color: #003d82; text-decoration: underline; }
.manual-container a :active, .chapter a:active { text-decoration: underline; color: #003d82; }
.manual-container li, .chapter li { font-size: 1rem; font-weight: 600; }
.manual-container ul, .chapter ul { padding-left: 30px; }
.manual-container ol, .chapter ol { padding-left: 22px; }
.section[aria-labelledby="contents-heading"] { background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 1.5em; }
.section[aria-labelledby="contents-heading"] > h2 { border-bottom: none; padding-bottom: 0; margin: 0.5em; }
.section[aria-labelledby="contents-heading"] nav ul { list-style: none; padding-left: 0; margin: 0; }
.section[aria-labelledby="contents-heading"] nav li { margin-top: 0.5em; }
.reference-source, .reference-description { display: block; }
.reference-description { margin: 0.5rem 0; }
.disclaimer {font-style: italic; padding-top: 20px; }
/*==========================================================================
                               Mobile Table Styles
==========================================================================*/
.manual-container table, .chapter table { width: 100%; border-collapse: collapse; margin: 25px 0; font-size: 0.95rem; font-weight: 500; box-shadow: 0 4px 8px rgba(0,0,0,0.05); border-radius: 8px; overflow: hidden; }
.manual-container thead, .chapter thead { display: none; }
.manual-container tbody tr, .chapter tbody tr { display: block; margin-bottom: 15px; border: 1px solid #dee2e6; border-radius: 4px; background-color: #f8f9fa; }
.manual-container td, .chapter td { display: grid; grid-template-columns: 1fr; /* label | content */ gap: 0.5em; padding: 12px; text-align: left; border-bottom: 1px solid #e9ecef; }
.manual-container tr td:last-child, .chapter tr td:last-child { border-bottom: none; font-weight: 500; }
.manual-container td::before, .chapter td::before { content: attr(data-label); font-weight: 600; color: #001430; }
.manual-container td span, .chapter td span { display: block; text-align: left; font-weight: 500;}
.author-signature { margin-top: 40px; padding-top: 20px; border-top: 1px solid #e0e0e0; text-align: right; }
.author-signature p { font-style: italic; font-size: 1rem; color: #001430; margin-bottom: 0; }
/*==========================================================================
              Tablet and Larger Screens (min-width: 768px)
==========================================================================*/
@media (min-width: 768px) {
    .manual-container thead, .chapter thead { display: table-header-group; }
    .manual-container tbody tr, .chapter tbody tr { display: table-row; margin-bottom: 0; border: none; }
    .manual-container td, .chapter td { display: grid; grid-template-columns: 2fr 2fr; /* label | content */ gap: 0.5em; padding: 12px; text-align: left; border-bottom: 1px solid #e9ecef; }
    .manual-container td, .chapter td { display: table-cell; vertical-align: top; border: 1px solid #dee2e6; padding: 12px; grid-template-columns: none; }
    .manual-container td::before, .chapter td::before { display: none; }
    .author-signature p { font-size: 1rem; } }
/*==========================================================================
    Desktop Screens (min-width: 1024px)
==========================================================================*/
@media (min-width: 1024px) {
    .manual-container, .chapter { max-width: 1200px; padding: 40px; }
    .manual-container h1 { font-size: 3em; }
    .manual-container p, .manual-container li, .chapter p, .chapter li { font-size: 1rem; }
    .author-signature p { font-size: 1rem; } }
