/* Datasouth staging typography review — content and component rules only.
   Existing palettes, layouts, icon fonts and CMS controls remain authoritative. */
#wrapper {
    --ds-reading-font: "Lato", "Helvetica Neue", Arial, sans-serif;
    --ds-heading-font: "Raleway", "Helvetica Neue", Arial, sans-serif;
}

/* Keep the supplied logo's intrinsic aspect ratio, including sticky/mobile
   headers: the legacy 40px height distorted its independently sized width. */
#wrapper header #stickyheader .navbar-header .navbar-brand img {
    height: auto;
}
@media (max-width: 991px) {
    #wrapper header #stickyheader .navbar-header { position: relative; }
    #wrapper header #stickyheader .navbar-header .navbar-toggle {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* Use real, locally available regular/bold faces instead of Raleway 300
   (the old font bundle only supplies 200, 400, 600 and 700). Do not set
   weight/size/colour on the wrapper or on *: controls and overlays differ. */
#wrapper p {
    font-family: var(--ds-reading-font);
    font-weight: 400;
}
#wrapper #body .ds-accessible-content :is(p, li, dt, dd),
#wrapper #body .ds-infographic-transcript :is(p, li, dt, dd) {
    font-family: var(--ds-reading-font);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.65;
    color: #2d2d2d;
}
#wrapper #body .ds-accessible-content p,
#wrapper #body .ds-infographic-transcript p {
    margin: 0 0 1.1em;
    padding: 0;
}
#wrapper #body .ds-accessible-content :is(ul, ol),
#wrapper #body .ds-infographic-transcript :is(ul, ol) {
    margin-block: .65em 1.1em;
    padding-inline-start: 1.5em;
}
#wrapper #body .ds-accessible-content li + li,
#wrapper #body .ds-infographic-transcript li + li {
    margin-top: .4em;
}
#wrapper #body .ds-accessible-content li > p,
#wrapper #body .ds-infographic-transcript li > p {
    margin-bottom: .4em;
}
#wrapper #body .ds-accessible-content :is(strong, b),
#wrapper #body .ds-infographic-transcript :is(strong, b) {
    font-weight: 700;
}

/* Heading ranks within prose have a predictable scale; cards, banners and
   footer headings retain their separate presentation classes. */
#wrapper #body .ds-accessible-content :is(h1, h2, h3, h4, h5, h6),
#wrapper #body .ds-infographic-transcript :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--ds-heading-font);
    font-weight: 600;
    line-height: 1.25;
    margin: 1.35em 0 .55em;
    color: #292929;
}
#wrapper #body .ds-accessible-content h1 { font-size: 36px; }
#wrapper #body .ds-accessible-content h2,
#wrapper #body .ds-infographic-transcript h2 { font-size: 30px; }
#wrapper #body .ds-accessible-content h3,
#wrapper #body .ds-infographic-transcript h3 { font-size: 25px; }
#wrapper #body .ds-accessible-content h4,
#wrapper #body .ds-infographic-transcript h4 { font-size: 22px; }
#wrapper #body .ds-accessible-content h5 { font-size: 20px; }
#wrapper #body .ds-accessible-content h6 { font-size: 18px; }
#wrapper #body .ccm-block-page-title.page-title {
    font-family: var(--ds-heading-font);
    font-weight: 700;
    line-height: 1.22;
    overflow-wrap: break-word;
}
#wrapper #body .ds-section-heading { line-height: 1.25; }
#wrapper .ds-feature .ds-feature-title,
#wrapper .ds-four-column-list .ds-article-title {
    font-weight: 600;
    line-height: 1.4;
}
/* The legacy semantic-heading patch used !important with unavailable weight
   500; retain its component sizing while selecting the supplied 600 face. */
#wrapper .ds-four-column-list .ds-article-title { font-weight: 600 !important; }
#wrapper #body .ds-main-list-wrapper .article-content-head .title h5 {
    font-family: var(--ds-heading-font);
    font-weight: 600;
    line-height: 1.4;
    text-transform: none;
}
#wrapper #body .ds-main-list-wrapper .article-content-head .title h5 a {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-transform: inherit;
}

/* Keep prose links recognisable on hover AND keyboard focus. The important
   underline narrowly defeats the old theme's !important removal rule. */
#wrapper #body :is(.ds-accessible-content, .ds-infographic-transcript) :is(p, li, dd) a:not(.btn):not(.item-preview):not(.mega-link-overlay) {
    color: #994500;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .17em;
    text-decoration-skip-ink: auto;
}
#wrapper #body :is(.ds-accessible-content, .ds-infographic-transcript) :is(p, li, dd) a:not(.btn):not(.item-preview):not(.mega-link-overlay):is(:hover, :focus) {
    color: #713300;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: .17em;
}

/* Supporting components: firmer navigation, readable sidebar links, labels
   and footer copy without imposing prose sizing on compact UI or overlays. */
#wrapper #navbar a { font-weight: 600; }
#wrapper .sidebar-area .ds-sidebar-list :is(h5, h6),
#wrapper .sidebar-area .ds-sidebar-list a,
#wrapper .sidebar-area .ds-sidebar-list-wrapper a {
    font-family: var(--ds-reading-font);
    font-weight: 400;
    line-height: 1.5;
}
#wrapper #body .ds-form :is(label, input, textarea, select),
#wrapper #body .form-stacked :is(label, input, textarea, select) {
    font-family: var(--ds-reading-font);
}
#wrapper #body :is(.ds-form, .form-stacked) .control-label {
    font-size: 16px;
    line-height: 1.5;
}
#wrapper #body :is(.ds-form, .form-stacked) .form-control {
    font-size: 16px;
    line-height: 1.5;
    min-height: 44px;
}
#wrapper #prefoot p {
    font-family: var(--ds-reading-font);
    font-weight: 400;
    line-height: 1.6;
}
#wrapper footer p {
    font-family: var(--ds-reading-font);
    font-weight: 400;
}
@media (max-width: 767px) {
    #wrapper #body .ccm-block-page-title.page-title { font-size: 30px; }
    #wrapper #body .ds-accessible-content h1 { font-size: 30px; }
    #wrapper #body .ds-accessible-content h2,
    #wrapper #body .ds-infographic-transcript h2 { font-size: 26px; }
    #wrapper #body .ds-accessible-content h3,
    #wrapper #body .ds-infographic-transcript h3 { font-size: 23px; }
}