/* ============================================================
   Quality Paralegal Services: blog bridge stylesheet.

   Goes to blog/themes/qps/assets/css/style.css, loaded AFTER the site's own
   /css/style.css in the Appearance > Stylesheets field. Order matters: the site
   sheet draws the header, footer and buttons, this one draws everything the
   blog templates need that the site never had a reason to generate.

   Why this file has to exist: the site's Bootstrap build only includes the
   modules the site markup uses. A class diff against css/style.css on 19 Oct
   2026 found the grid and a few flex utilities present, and these 30 classes
   absent: card, card-body, card-title, card-text, post-card, pagination,
   page-link, page-item, badge, display-6, lead, text-body-secondary, h-100,
   ms-auto, me-auto, me-1, border, border-0, border-top, bg-white, shadow-sm,
   nav, nav-item, alert-light, alert-link, link-dark, link-secondary, h5,
   fw-bold, small. Without this file the header and footer look perfect and
   every post card renders as unstyled text.

   Tokens are the site's own, lifted from css/sass/_variables.scss.
   ============================================================ */

:root {
  --qps-navy:      #243a5f;  /* primary ground, headings */
  --qps-ink:       #142035;  /* deepest navy, hover and dark surfaces */
  --qps-sky:       #8fb5d9;  /* accent on dark only, fails AA as text on white */
  --qps-link:      #41607d;  /* AA-safe denim, 6.2:1 on paper, for body links */
  --qps-muted:     #5e6166;  /* secondary text, 5.9:1 on paper */
  --qps-paper:     #f7f9f6;  /* page ground */
  --qps-line:      #d9d9d9;  /* hairline borders */
  --qps-fill:      #eeeeee;  /* badge and disabled fills */
  --qps-display:   "Playfair Display", Georgia, "Times New Roman", serif;
  --qps-body:      "Poppins", "Helvetica Neue", Arial, sans-serif;
  --qps-radius:    0;        /* the site is squared off throughout */
}

/* ------------------------------------------------------------
   Clearing the fixed header.

   .site-header is position:fixed and the blog has no banner to sit under it,
   so main pads itself.

   --nav-h is published by the four-line script in the Appearance > Body close
   field, which measures the real header and re-measures on resize. That is the
   value that normally applies, and it stays correct if the header ever changes
   height. The px fallbacks below only cover the first paint before that script
   runs, and they are the settled measurements taken 19 Oct 2026: 199px below
   the 992px breakpoint (topbar 40 + logo 110 + menu button 49) and 185px above
   it (topbar 40 + logo row 145).

   Measure after the fonts load if you ever re-check these. A reading taken
   mid-resize reports 234px on mobile, which is a transient, not the real
   height.

   Do not put a py-* utility on <main> in header.php or it will fight this.
   ------------------------------------------------------------ */
.blog-main {
  padding-top: calc(var(--nav-h, 199px) + 1.5rem);
  padding-bottom: 3rem;
  background: var(--qps-paper);
}

@media (min-width: 992px) {
  .blog-main {
    padding-top: calc(var(--nav-h, 185px) + 2.5rem);
    padding-bottom: 4.5rem;
  }
}

/* ------------------------------------------------------------
   Header background.

   On the main site .site-header is deliberately transparent at rest and only
   turns navy once .is-scrolled lands, because it floats over a dark hero image
   on every page. The blog has no hero. That left near-white nav links
   (#f7f9f6) sitting on the paper background (#f7f9f6) until the visitor
   scrolled, so the nav was invisible on first paint.

   Solid from the start here. The scrolled state already sets the same navy, so
   nothing jumps when .is-scrolled applies; it still slides the topbar up and
   adds its shadow, which stays the scroll affordance.
   ------------------------------------------------------------ */
.site-header { background-color: var(--qps-navy); }

/* ------------------------------------------------------------
   Type
   ------------------------------------------------------------ */
.display-6 {
  font-family: var(--qps-display);
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--qps-navy);
  text-wrap: balance;
}

.h5 { font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); font-weight: 700; line-height: 1.35; }
.lead { font-size: 1rem; line-height: 2.1; }
.fw-bold { font-weight: 700; }
.small { font-size: 0.75rem; }

/* Bootstrap's own value is too light to clear 4.5:1 on white. */
.text-body-secondary { color: var(--qps-muted); }

.link-dark { color: var(--qps-ink); }
.link-dark:hover, .link-dark:focus { color: var(--qps-link); }
.link-secondary { color: var(--qps-muted); }
.link-secondary:hover, .link-secondary:focus { color: var(--qps-link); }

/* ------------------------------------------------------------
   Post cards

   article.post-card, not .post-card: the template also sets .border-0 and
   .shadow-sm, and at equal specificity whichever is written later would win.
   The element selector settles it regardless of order.
   ------------------------------------------------------------ */
.card { display: flex; flex-direction: column; min-width: 0; }

article.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #ffffff;
  border: 1px solid var(--qps-line);
  border-radius: var(--qps-radius);
  box-shadow: none;
  transition: border-color 0.2s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  article.post-card { transition: none; }
}

article.post-card:hover,
article.post-card:focus-within { border-color: var(--qps-navy); }

.post-card__image,
.post-card__placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--qps-radius);
}

/* The initial shown when a post has no featured image. */
.post-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--qps-ink);
}

.post-card__placeholder span {
  font-family: var(--qps-display);
  font-size: 3rem;
  font-weight: 400;
  color: var(--qps-sky);
}

.card-body { padding: 1.25rem 1.25rem 1.5rem; }

.card-title {
  margin-bottom: 0.625rem;
  font-family: var(--qps-display);
  font-weight: 400;
  line-height: 1.3;
  color: var(--qps-navy);
}

.card-title a { color: inherit; text-decoration: none; }
.card-title a:hover,
.card-title a:focus { color: var(--qps-ink); text-decoration: underline; text-underline-offset: 0.25em; }

.card-text { margin-bottom: 0.75rem; line-height: 2.1; }

/* ------------------------------------------------------------
   Category badges, drawn like the site's eyebrow label.
   ------------------------------------------------------------ */
.badge,
.badge.text-bg-light {
  display: inline-block;
  padding: 0.375rem 0.625rem;
  font-family: var(--qps-body);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  color: var(--qps-ink);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background-color: var(--qps-fill);
  border: 0;
  border-radius: var(--qps-radius);
}

a.badge:hover, a.badge:focus { color: #ffffff; background-color: var(--qps-navy); }

/* ------------------------------------------------------------
   Pagination. 2.75rem minimum keeps the WCAG tap target.
   ------------------------------------------------------------ */
.pagination { display: flex; flex-wrap: wrap; gap: 0.375rem; padding-left: 0; margin-bottom: 0; list-style: none; }
.page-item { display: block; }

.page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  font-family: var(--qps-body);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--qps-ink);
  text-decoration: none;
  background-color: #ffffff;
  border: 1px solid var(--qps-line);
  border-radius: var(--qps-radius);
}

.page-link:hover,
.page-link:focus { color: #ffffff; background-color: var(--qps-navy); border-color: var(--qps-navy); }

.page-item.active .page-link { color: #ffffff; background-color: var(--qps-navy); border-color: var(--qps-navy); }
.page-item.disabled .page-link { color: var(--qps-muted); pointer-events: none; background-color: var(--qps-fill); border-color: var(--qps-line); }

/* ------------------------------------------------------------
   Alerts
   ------------------------------------------------------------ */
.alert-light {
  padding: 1.25rem;
  color: var(--qps-ink);
  background-color: #ffffff;
  border: 1px solid var(--qps-line);
  border-radius: var(--qps-radius);
}

.alert-link { font-weight: 700; color: var(--qps-link); text-decoration: underline; }

/* ------------------------------------------------------------
   Single post body

   The site sets long form copy through .prose. Post content comes out of the
   editor as bare tags, so the same treatment goes on the article wrapper.
   Left aligned rather than justified: the site justifies marketing copy, which
   is wrong for a long article someone actually reads.
   ------------------------------------------------------------ */
.post { font-size: 0.875rem; line-height: 2.2; color: #000; }

.post h2,
.post h3 {
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
  font-family: var(--qps-display);
  font-weight: 400;
  line-height: 1.3;
  color: var(--qps-navy);
  text-wrap: balance;
}

.post h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem); }
.post h3 { font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); }
.post p, .post li { margin-bottom: 1rem; }
.post ul, .post ol { padding-left: 1.25rem; }
.post a { color: var(--qps-link); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
.post a:hover, .post a:focus { color: var(--qps-ink); text-decoration: none; }
.post img { max-width: 100%; height: auto; margin-block: 1.5rem; }

.post blockquote {
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-left: 4px solid var(--qps-sky);
  background-color: #ffffff;
}

.post blockquote p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   The footer call to action that replaces the site's quote form.
   Sits on the navy ground the form used, so it reads as the same block.
   ------------------------------------------------------------ */
.blog-cta {
  flex: 1 1 auto;
  width: 100%;
  padding: 3rem 1.25rem;
  background: var(--qps-navy);
  text-align: center;
  color: var(--qps-paper);
}

@media (min-width: 1200px) {
  .blog-cta { position: relative; z-index: 2; margin-top: -55px; padding: 117px 34px 70px; }
}

.blog-cta__title {
  margin-bottom: 1rem;
  font-family: var(--qps-display);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--qps-sky);
}

.blog-cta__intro { max-width: 470px; margin: 0 auto 2.25rem; font-size: 0.875rem; line-height: 2.1; }
.blog-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

/* ------------------------------------------------------------
   Utilities the site's trimmed Bootstrap build never generated.
   ------------------------------------------------------------ */
.h-100 { height: 100%; }
.ms-auto { margin-left: auto; }
.me-auto { margin-right: auto; }
.me-1 { margin-right: 0.25rem; }
.border { border: 1px solid var(--qps-line); }
.border-0 { border: 0; }
.border-top { border-top: 1px solid var(--qps-line); }
.bg-white { background-color: #ffffff; }
.shadow-sm { box-shadow: none; }
.nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; }
.nav-item { display: block; }

/* ============================================================
   Classes the live blog templates actually use.

   The first version of this file was drawn from a generic list and missed
   these. They come from a class diff of the real /blog/ and post pages against
   the site sheet on 20 Oct 2026, which is the only reliable source.
   Bootstrap's spacer scale: 4 = 1.5rem, 5 = 3rem. Breakpoints md 768, lg 992.
   ============================================================ */

/* ---------- The card grid -------------------------------------------------
   .blog-list carries row-cols-1 row-cols-md-2 row-cols-lg-3. None of those
   existed, so every card was full width at every size and the grid never
   formed. .row and the g-4 gutters do come from the site sheet.
   -------------------------------------------------------------------------- */
.row-cols-1 > * { flex: 0 0 auto; width: 100%; }
@media (min-width: 768px) { .row-cols-md-2 > * { flex: 0 0 auto; width: 50%; } }
@media (min-width: 992px) { .row-cols-lg-3 > * { flex: 0 0 auto; width: 33.33333333%; } }

/* ---------- Whole card clickable ------------------------------------------
   The template already ships Bootstrap's .stretched-link on the title anchor.
   The class was simply never drawn, so only the title text was a target. The
   ::after covers the nearest positioned ancestor, which is article.post-card
   (it is already position:relative above). The card holds exactly one link, so
   nothing else gets buried under the overlay.
   -------------------------------------------------------------------------- */
.stretched-link::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
}

.text-decoration-none { text-decoration: none; }
.card-img-top { width: 100%; }
.d-inline-flex { display: inline-flex !important; }

/* ---------- Share row ------------------------------------------------------
   Each share link carries .btn, and the site's .btn is a 250px wide, 60px tall
   uppercase block button built for heroes. Three of those in a row is what
   threw the alignment out. Reset to a small chip; .post-share__link.btn is a
   two class selector so it beats .btn without !important.
   -------------------------------------------------------------------------- */
.post-share { row-gap: 0.5rem; }

.post-share__link.btn {
  width: auto;
  max-width: none;
  min-height: 2.25rem;
  padding: 0.4375rem 0.75rem;
  gap: 0.5rem;
  font-family: var(--qps-body);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
  color: var(--qps-ink);
  background-color: #ffffff;
  border: 1px solid var(--qps-line);
  border-radius: var(--qps-radius);
}

.post-share__link.btn:hover,
.post-share__link.btn:focus-visible {
  color: #ffffff;
  background-color: var(--qps-navy);
  border-color: var(--qps-navy);
}

.post-share__link svg { flex: none; }

/* Only ever used by the share links on this site. */
.btn-outline-secondary { color: var(--qps-ink); border-color: var(--qps-line); }

/* ---------- Post and index wrappers --------------------------------------- */
.blog-hero__inner { max-width: 48rem; }
.post-meta { font-size: 0.75rem; }
.post-body { font-size: inherit; }
.post-hero img { width: 100%; height: auto; }

/* ---------- Spacing utilities the trimmed Bootstrap build left out --------- */
.pt-4 { padding-top: 1.5rem; }
.pb-4 { padding-bottom: 1.5rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
@media (min-width: 992px) {
  .pb-lg-5 { padding-bottom: 3rem; }
  .py-lg-5 { padding-top: 3rem; padding-bottom: 3rem; }
  .mb-lg-5 { margin-bottom: 3rem; }
}