/* Site-specific overrides for humbleclark.com.
 *
 * Kept separate from styles.css so the purchased theme stays diffable against a
 * clean copy of itself. Loaded last, after rte.css.
 */

/* ---------------------------------------------------------------------------
 * Rich text on the dark block.
 *
 * People, Fees and News moved from .section-block-grey (#f9f9f9) to
 * .section-block (#000033). People and News were fine unaided: their cards
 * (.team-box-2-overlay, .blog-grid-simple) carry their own white background.
 * Fees is the exception -- .legal-content renders the feesDescription rich text
 * straight onto the block with nothing behind it, and its type was coloured for
 * a light ground.
 *
 * Scoped to .section-block on purpose: LegalPage and ServiceDetail use .legal-content
 * too and are still on the grey block, so they must keep dark type. NewsItem used to
 * be in that list; it moved to the dark block and now wants these rules.
 *
 * These selectors are (0,2,1); the bare h3/h4/h5 rules in rte.css are (0,0,1),
 * so specificity settles it and no !important is needed despite rte.css loading
 * after this file would otherwise matter.
 * ------------------------------------------------------------------------- */
.section-block .legal-content {
    color: #ddd;
}

/* Both of these are set by an element-level rule that beats inheritance, so the
 * base rule above cannot reach them: default.css has a bare `p { color: #111 }`,
 * and styles.css sets `.legal-content li { color: #111 }`. */
.section-block .legal-content p,
.section-block .legal-content li {
    color: #ddd;
}

/* rte.css sets these to #4f3d92, which is close to unreadable on navy.
 * h5 is left alone: rte.css's #D83F87 clears AA on this background, and the
 * <strong> inside those call-to-action lines must keep inheriting it. */
.section-block .legal-content h3,
.section-block .legal-content h4 {
    color: #fff;
}

/* Deliberately no rule for links. The feesDescription rich text contains no <a> of
 * its own -- the only anchors inside .legal-content are the quote buttons injected by
 * the Hoowla widget, which brings its own styling and must keep it. */

/* Bootstrap's rgba(0,0,0,.1) rule is invisible against #000033. */
.section-block .legal-content hr {
    border-top-color: rgba(255, 255, 255, 0.2);
}


/* ---------------------------------------------------------------------------
 * News article page on the dark block.
 *
 * NewsItem.cshtml moved from .section-block-grey (#f9f9f9) to .section-block
 * (#000033), so the newsStory rich text now picks up the .legal-content rules
 * above. What follows is the page chrome those rules do not reach: the article
 * title, the Recent News sidebar, and the two hairlines the theme draws in
 * #ececec, which read as hard white rules against navy rather than as dividers.
 *
 * .news-detail is on the wrapper alongside .section-block. It is load-bearing for
 * the paste-residue rules at the bottom of this file -- see the note there -- and
 * the chrome rules use it too so that everything this page needed is findable
 * under one selector.
 *
 * Left alone deliberately:
 *   - .blog-title-box span, the date, at #999. That is 7.0:1 on navy; it was
 *     2.85:1 on the grey block, so the move improves it.
 *   - .blog-title-box span i and .blog-list-left-heading:after, both #9468aa.
 *     Non-text, and 4.6:1 is past the 3:1 that graphical objects need.
 *   - links inside .legal-content, still #9468aa resting and #D83F87 on hover
 *     from default.css: 4.6:1 and 4.75:1, both AA. 22 of them across the
 *     articles, unlike Fees, whose rich text has none.
 * ------------------------------------------------------------------------- */

/* styles.css sets this to #111. That rule is (0,1,1) and this is (0,2,1). */
.news-detail .blog-title-box h2 {
    color: #fff;
}

/* The rule under the article title is a 2px block, not a border. */
.news-detail .blog-title-box:after {
    background: rgba(255, 255, 255, 0.2);
}

/* The divider between sidebar entries is a border. */
.news-detail .latest-posts {
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

/* The Recent News heading and the article links beneath it, both #111. */
.news-detail .blog-list-right h4,
.news-detail .latest-posts-text a {
    color: #fff;
}

/* styles.css hovers those links to #9468aa, which against navy is dimmer than
 * the resting white -- a link that fades when you point at it. #D83F87 is the
 * hover colour default.css already uses site-wide, and clears AA at 4.75:1. */
.news-detail .latest-posts-text a:hover {
    color: #D83F87;
}

/* ---------------------------------------------------------------------------
 * Word paste residue in newsStory.
 *
 * Four of the 62 articles carry inline background colours pasted out of Word:
 * `background: white` on every paragraph of /news/budget-news/, #F9F9F9 through
 * /news/christmas-update/ and /news/christmas-is-fast-approaching/, and #D9F0F2
 * behind the disclaimer on /news/coordinating-buying-and-selling-a-house-.../.
 * All four were invisible against the old grey block. Against navy they are pale
 * bars, with the #ddd body text sitting unreadable on top of them.
 *
 * Two of those also carry inline `color:` -- #9468aa and #d83f87 throughout
 * christmas-is-fast-approaching, #ee0000 on that disclaimer. Stripped as well:
 * once the pasted background is gone, #ee0000 on navy is 4.4:1 and misses AA,
 * and none of the three is deliberate styling. They arrive with the mso-* junk
 * around them. For a coloured lead line, the editor's Heading 5 is the supported
 * route -- rte.css renders it in #D83F87, which is AA on this block.
 *
 * Inline styles beat a stylesheet, so !important is the only lever here. Only
 * background and colour are touched; the pasted font, margin and indent
 * declarations are left to render as they did before.
 *
 * Scoped to .news-detail rather than to .section-block .legal-content because
 * Fees is also .section-block .legal-content, and the Hoowla plugin injects its
 * quote buttons into the .hoowla-quote divs inside it at runtime, with inline
 * styling of its own that must survive.
 * ------------------------------------------------------------------------- */
.news-detail .legal-content [style*="background"],
.news-detail .legal-content [style*="color"] {
    background: transparent !important;
    color: inherit !important;
}