/*
 * Article styling. Brand colours are the custom properties below - change
 * those and everything follows. Nothing else in this file is site specific.
 *
 * Scoped to .firm-article. Selectors are doubled where Elementor and Astra
 * would otherwise win on specificity — the article renders inside a Shortcode
 * widget, so theme heading rules apply to it like any other content.
 */

.firm-article {
  --firm-blue: #007bca;
  --firm-rule: #000;
  --firm-cta-bg: #f4c430;
  --firm-cta-bg-hover: #e5b526;
  --firm-cta-ink: #111;
  --firm-border: #ddd;
}

/* ---- Headings ---------------------------------------------------------- */

.firm-article h1,
.firm-article h2,
.firm-article h3,
.firm-article h4,
.firm-article h5,
.firm-article h6 {
  color: var(--firm-blue);
  scroll-margin-top: 6rem;   /* anchor jumps clear a sticky header */
}

.firm-article h1,
.firm-article h2 {
  text-transform: uppercase;
}

.firm-article h2 {
  font-size: 30px;
  margin: 0 0 1rem;
  padding-top: 30px;
  /* The divider above every H2. A border, not an <hr> element: it cannot
     desync from the heading when someone edits the article later. */
  border-top: 1px solid var(--firm-rule);
}

/* No rule floating above the article's very first line. */
.firm-article > h2:first-child {
  border-top: 0;
  padding-top: 0;
}

.firm-article h3 {
  font-size: 25px;   /* title case comes from the writing, not text-transform,
                        which would capitalise "of", "and", "the" */
  margin: 1.5rem 0 0.75rem;
}

/* ---- Body -------------------------------------------------------------- */

.firm-article p { margin: 0 0 1.15em; }

.firm-article a { color: var(--firm-blue); }

.firm-article ul,
.firm-article ol { margin: 0 0 1.15em 1.25em; }

.firm-article li { margin-bottom: 0.4em; }

/* Drop cap. The class is applied on save only to a paragraph that follows an
   H2 and reads as prose, so a short bold label such as
   "Colorado Springs Neighborhoods:" never receives one. */
/* Reset first, so no theme or plugin rule can draw a first letter inside the
   article. The drop-cap rule below is more specific and still wins. */
.firm-article *::first-letter {
  font-size: inherit;
  float: none;
  color: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* Only this plugin's drop cap may render. Anything inherited from a theme,
   Elementor, or the previous plugin is neutralised, so two large letters can
   never appear on one paragraph. */
.firm-article [class*="dropcap"]:not(.firm-dropcap),
.firm-article [class*="drop-cap"]:not(.firm-dropcap) {
  font-size: inherit !important;
  line-height: inherit !important;
  float: none !important;
  color: inherit !important;
  font-weight: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
}

.firm-article p:not(.firm-dropcap)::first-letter {
  font-size: inherit;
  float: none;
  color: inherit;
  font-weight: inherit;
}

.firm-article p.firm-dropcap::first-letter {
  float: left;
  font-size: 50px;
  line-height: 0.85;
  padding-right: 0.08em;
  color: var(--firm-blue);
  font-weight: 600;
}

/* ---- Tables, quotes, media --------------------------------------------- */

.firm-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0 1.6em;
}

.firm-article th,
.firm-article td {
  border: 1px solid var(--firm-border);
  padding: 0.75em;
  vertical-align: top;
  text-align: left;
}

.firm-article blockquote {
  margin: 1.5em 0;
  padding-left: 1em;
  border-left: 4px solid var(--firm-border);
}

.firm-article img { max-width: 100%; height: auto; }

.firm-article figure { margin-left: 0; margin-right: 0; }

.firm-article .firm-lead-image { margin: 0 0 1.2em; }

/* No double gap where the image meets the paragraph below it. */
.firm-article .firm-lead-image + p { margin-top: 0; }

.firm-article .firm-lead-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* A heading immediately followed by the lead image should not leave a gap. */
.firm-article :is(h1, h2) + .firm-lead-image { margin-top: 0.6em; }


.firm-article hr.firm-rule {
  border: 0;
  border-top: 1px solid var(--firm-rule);
  margin: 30px 0 24px;
}

/* ---- Call to action ---------------------------------------------------- */

.firm-article .firm-cta { margin: 28px 0 26px; text-align: center; }

.firm-article .firm-cta-button {
  display: inline-block;
  background: var(--firm-cta-bg);
  color: var(--firm-cta-ink) !important;
  border: 2px solid var(--firm-cta-bg);
  border-radius: 3px;
  padding: 13px 24px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.firm-article .firm-cta-button:hover,
.firm-article .firm-cta-button:focus-visible {
  background: var(--firm-cta-bg-hover);
  border-color: var(--firm-cta-bg-hover);
}

.firm-article .firm-cta-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ---- Author bio -------------------------------------------------------- */
/* Values ported verbatim from the previous plugin so pages built either way
   render identically. The !important flags are carried over deliberately —
   they are what beats Astra's paragraph margins. */

.firm-article .firm-author-bio {
  border: 1px solid #000;
  padding: 22px 24px;
  margin: 32px 0 30px;
  background: #fff;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.firm-article .firm-author-bio-image { flex: 0 0 84px; }

.firm-article .firm-author-bio-image img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.firm-article .firm-author-bio-content { flex: 1; min-width: 0; }

.firm-article .firm-author-bio-label {
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin: 0 0 6px;
  color: #000;
}

.firm-article .firm-author-bio-name {
  margin: 0 0 4px !important;
  color: var(--firm-blue);
  font-weight: 700;
  font-size: 1.15em;
}

.firm-article .firm-author-bio-title { margin: 0 0 6px !important; font-weight: 600; color: #000; }
.firm-article .firm-author-bio-bar { margin: 0 0 10px !important; font-weight: 600; color: #000; }
.firm-article .firm-author-bio-text { margin: 0 0 8px !important; }
.firm-article .firm-author-bio-reviewed { margin: 8px 0 0 !important; font-size: 0.92em; color: #333; }

@media (max-width: 767px) {
  .firm-article h2 { font-size: 25px; }
  .firm-article h3 { font-size: 20px; }
  .firm-article .firm-author-bio { display: block; }
  .firm-article .firm-author-bio-image { margin: 0 0 12px; }
}

/* ---------------------------------------------------------------------------
 * 1.7.3  Media spacing
 *
 * article.css previously set only max-width and height on images, so an image
 * sat flush against the paragraph beneath it. The gap is a custom property so
 * it can be retuned without editing this file:
 *
 *   .firm-article { --firm-media-gap: 3rem; }
 *
 * Scoped with the child combinator so the author bio portrait, which is inside
 * .firm-author-bio-image, keeps its own sizing rules.
 * ------------------------------------------------------------------------- */

.firm-article {
    --firm-media-gap: 2.5rem;
}

.firm-article > img,
.firm-article > p > img,
.firm-article > figure {
    display: block;
    margin: 1.25rem 0 var(--firm-media-gap);
}

.firm-article > figure > img {
    margin: 0;
}

.firm-article > p > img:only-child {
    margin-bottom: 0;
}

.firm-article > p:has(> img:only-child) {
    margin-bottom: var(--firm-media-gap);
}

/* ---------------------------------------------------------------------------
 * 1.7.3  Table of contents
 * ------------------------------------------------------------------------- */

.firm-article .firm-toc a,
.firm-article .firm-toc-list a {
    color: var(--firm-blue);
    text-decoration: none;
}

.firm-article .firm-toc a:hover,
.firm-article .firm-toc a:focus,
.firm-article .firm-toc-list a:hover,
.firm-article .firm-toc-list a:focus {
    text-decoration: underline;
}

/* Keep an anchored heading clear of the sticky site header after a TOC jump. */
.firm-article h2[id],
.firm-article h3[id],
.firm-article h4[id] {
    scroll-margin-top: 6rem;
}


/* Author bio snippets: the wrapper became a div in cscd.6 so a bullet list is
   valid inside it. These keep the box reading as one tight block. */
.firm-article .firm-author-bio-text > p { margin: 0 0 .75em; }
.firm-article .firm-author-bio-text > p:last-child { margin-bottom: 0; }
.firm-article .firm-author-bio-text ul { margin: 0 0 .75em; padding-left: 1.25em; }
.firm-article .firm-author-bio-text ul:last-child { margin-bottom: 0; }
.firm-article .firm-author-bio-text li { margin: 0 0 .3em; }