/**
 * Reading typography for the Resume Place branded blog reader (single.html).
 *
 * Ported from the platform's RP Article template (src/components/system/screens/
 * rp/rp-article.css) so the WordPress single-post reader matches the app's
 * federal-broadsheet reading experience: a serif body on a warm 44rem measure.
 *
 * Scoped to .rp-article so it only dresses the post body (post-content). Values
 * resolve from the theme's --rph-* brand tokens (defined in rp-home.css), with
 * literal fallbacks so the reader degrades gracefully.
 */

.rp-article {
  --a-ink: var(--rph-ink, #16243a);
  --a-ink2: var(--rph-ink2, #48515a);
  --a-ink3: var(--rph-ink3, #727a82);
  --a-line: var(--rph-line, #e7e6e0);
  --a-blue: var(--rph-blue, #2f62c4);
  --a-deep: var(--rph-deep, #1c3664);
  --a-tangelo: var(--rph-tangelo, #f94d00);
  --a-tangelo-tint: var(--rph-tangelo50, #fff3ed);

  font-family: var(--rph-serif, Georgia, "Times New Roman", serif);
  color: var(--a-ink2);
  font-size: 1.235rem;
  line-height: 1.72;
  letter-spacing: -0.003em;
  max-width: 44rem;
  margin-inline: auto;
}

/* Rhythm */
.rp-article > * + * {
  margin-top: 1.35em;
}

.rp-article p {
  margin: 0;
  text-wrap: pretty;
}

/* Opening paragraph — a quiet drop-lead sets the broadsheet tone. */
.rp-article > p:first-of-type {
  font-size: 1.34rem;
  line-height: 1.62;
  color: var(--a-ink);
}
.rp-article > p:first-of-type::first-letter {
  initial-letter: 3 3;
  -webkit-initial-letter: 3 3;
  font-weight: 600;
  color: var(--a-deep);
  margin-right: 0.08em;
}

/* Headings — the section stamps inside the essay. */
.rp-article h1,
.rp-article h2,
.rp-article h3,
.rp-article h4 {
  font-family: var(--rph-serif, Georgia, serif);
  color: var(--a-ink);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.014em;
  margin-top: 2.1em;
}
.rp-article h2 {
  font-size: 1.72rem;
  padding-top: 0.7em;
  border-top: 1px solid var(--a-line);
}
.rp-article h3 {
  font-size: 1.4rem;
}
.rp-article h4 {
  font-size: 1.16rem;
  font-family: var(--rph-sans, system-ui, sans-serif);
  letter-spacing: 0.005em;
}

/* Emphasis + inline links */
.rp-article strong,
.rp-article b {
  color: var(--a-ink);
  font-weight: 600;
}
.rp-article a {
  color: var(--a-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: color-mix(in srgb, var(--a-blue) 40%, transparent);
  transition: text-decoration-color 0.15s ease;
}
.rp-article a:hover {
  text-decoration-color: var(--a-blue);
}

/* Pull quotes / CCAR callouts — a tangelo flag tick on the left margin. */
.rp-article blockquote {
  margin: 2em 0;
  padding: 0.2em 0 0.2em 1.5rem;
  border-left: 3px solid var(--a-tangelo);
  font-size: 1.4rem;
  line-height: 1.5;
  font-style: normal;
  color: var(--a-deep);
}
.rp-article blockquote p {
  margin-top: 0.6em;
}
.rp-article blockquote cite {
  display: block;
  margin-top: 0.8em;
  font-family: var(--rph-mono, ui-monospace, monospace);
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--a-ink3);
}

/* Lists */
.rp-article ul,
.rp-article ol {
  margin: 1.2em 0;
  padding-left: 1.4rem;
}
.rp-article li {
  margin-top: 0.5em;
  padding-left: 0.3rem;
}
.rp-article ul li::marker {
  color: var(--a-tangelo);
}
.rp-article ol li::marker {
  color: var(--a-blue);
  font-family: var(--rph-mono, monospace);
  font-size: 0.85em;
}

/* Media */
.rp-article img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}
.rp-article figure {
  margin: 2em 0;
}
.rp-article figcaption {
  margin-top: 0.7em;
  font-family: var(--rph-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--a-ink3);
  text-align: center;
}

.rp-article hr {
  border: 0;
  height: 1px;
  background: var(--a-line);
  margin: 2.4em 0;
}

/* Tables */
.rp-article table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--rph-sans, system-ui, sans-serif);
  font-size: 0.95rem;
  margin: 1.6em 0;
}
.rp-article th,
.rp-article td {
  border: 1px solid var(--a-line);
  padding: 0.6em 0.8em;
  text-align: left;
}
.rp-article th {
  background: var(--a-tangelo-tint);
  color: var(--a-deep);
  font-weight: 600;
}

@media (max-width: 640px) {
  .rp-article {
    font-size: 1.12rem;
  }
  .rp-article > p:first-of-type {
    font-size: 1.2rem;
  }
  .rp-article h2 {
    font-size: 1.45rem;
  }
}

/* ===========================================================================
   Single-post chrome around the .rp-article body (masthead, colophon, CTA).
   These dress the core blocks in single.html, not the sanitized body.
   ======================================================================== */
.rp-single-banner {
  position: relative;
  background: linear-gradient(180deg, var(--rph-deep, #1c3664), var(--rph-night, #0b1d3a));
  padding-block: clamp(26px, 4vw, 48px);
}
.rp-single-banner .wp-block-post-featured-image {
  max-width: 960px;
  margin-inline: auto;
}
.rp-single-banner .wp-block-post-featured-image img {
  border-radius: 12px;
  box-shadow: 0 40px 80px -44px rgba(0, 0, 0, 0.75);
}
.rp-single-back {
  font-family: var(--rph-mono, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rph-blue-lift, #5b8ae0);
  text-decoration: none;
}
.rp-single-back:hover {
  color: #fff;
}
.rp-single-colophon {
  max-width: 44rem;
  margin: 56px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--rph-line, #e7e6e0);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--rph-mono, monospace);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rph-ink3, #727a82);
}
.rp-single-cta {
  max-width: 44rem;
  margin: 40px auto 0;
  padding: 32px 34px;
  border-radius: 16px;
  background: var(--rph-surface, #fff);
  border: 1px solid var(--rph-line, #e7e6e0);
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.rp-single-cta__body {
  flex: 1 1 280px;
}
.rp-single-cta__kicker {
  font-family: var(--rph-mono, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rph-tangelo700, #c04000);
}
.rp-single-cta__lede {
  font-family: var(--rph-serif, Georgia, serif);
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--rph-ink, #16243a);
  margin: 10px 0 0;
}
.rp-single-cta__btn {
  display: inline-flex;
  align-items: center;
  background: var(--rph-tangelo, #f94d00);
  color: #fff;
  font-family: var(--rph-sans, system-ui, sans-serif);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.7rem 1.4rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.rp-single-cta__btn:hover {
  background: #dd4400;
}

/* Masthead category chip + RP byline avatar. */
.rp-cat-chip a,
.rp-cat-chip {
  display: inline-flex;
  font-family: var(--rph-cond, var(--rph-sans, sans-serif));
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.4em 0.8em;
  border-radius: 6px;
  background: var(--rph-surface, #fff);
  border: 1px solid var(--rph-line, #e7e6e0);
  color: var(--rph-tangelo700, #c04000);
  text-decoration: none;
}
.rp-byline-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: var(--rph-tangelo, #f94d00);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rph-serif, serif);
  font-size: 15px;
  color: #fff;
}

/* ===========================================================================
   Imported child pages (.rp-article--page): real de-builderized production
   content. Tame leftover builder chrome and size document scans sanely.
   ======================================================================== */
/* Imported pages sit under a left-aligned brand header (the child-page intro
   band), not centered like the single-post reader. WP's constrained layout
   centers this block inside the full-width group, so its 48rem measure floats
   mid-band and misaligns with the title above. Pin the measure to the LEFT of
   the content band (the header's left edge) so the body reads as one column
   beneath the heading. The left margin resolves the band inset responsively:
   (viewport-band)/2 on wide screens, 0 once the band fills the group. */
.rp-article--page {
  max-width: 48rem;
  margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 1280px)) / 2)) !important;
  margin-right: auto !important;
}
.rp-article--page svg {
  display: none;
}
.rp-article--page img {
  display: block;
  max-width: min(100%, 480px);
  height: auto;
  /* !important beats legacy inline margins (e.g. margin-left:255px) that
     otherwise push images off-screen and force horizontal scroll on mobile. */
  margin: 1.5em auto !important;
  border: 1px solid var(--rph-line, #e7e6e0);
  border-radius: 8px;
}
/* Belt-and-braces: no imported element may exceed the column and force a
   horizontal scrollbar on small screens. */
@media (max-width: 640px) {
  .rp-article--page [style*="margin-left"],
  .rp-article--page [style*="margin-right"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .rp-article--page * {
    max-width: 100%;
  }
}
/* Elementor image carousels are Swiper-driven: without JS the slides lazy-load
   nothing and render as tall empty gaps. They duplicate the inline sample
   scans, so hide the carousels entirely rather than stack empty slides. */
.rp-article--page .elementor-widget-image-carousel,
.rp-article--page .elementor-image-carousel-wrapper,
.rp-article--page .swiper,
.rp-article--page .swiper-container {
  display: none !important;
}
/* Download-PDF / sample links read as buttons, not naked text. */
.rp-article--page .elementor-button,
.rp-article--page a.elementor-button-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: var(--rph-tangelo, #f94d00);
  color: #fff;
  font-family: var(--rph-sans, sans-serif);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  text-decoration: none;
  margin: 0.4em 0;
}
/* Hide Elementor tab/nav pills that need JS to work. */
.rp-article--page .elementor-swiper-button,
.rp-article--page .swiper-pagination {
  display: none !important;
}

/*═══════════════════════════════════════════════════════════════════════════
 * Legacy imported-content utilities
 *
 * Posts imported from the WPBakery/The7 resume-place.com carried per-post
 * <style> blocks that defined these helper classes AND overrode theme
 * typography (p,ul{font-size:22px}) + referenced dead The7 selectors
 * (.fancy-date). Those <style> blocks are now stripped at render
 * (velocity_clean_imported_body); the load-bearing helpers below are ported
 * once, scoped to .rp-article, and re-grounded in RP brand tokens.
 *═════════════════════════════════════════════════════════════════════════*/

.rp-article .topic,
.rp-article .topic-blue {
  color: var(--a-blue, #2f62c4);
  font-weight: 700;
  margin-top: 0.6em;
  margin-bottom: 0.35em;
}
.rp-article .rp-blue { color: var(--a-deep, #1c3664); }
.rp-article .rp-red { color: #d11b2d; }
.rp-article .rp-orange { color: var(--a-tangelo, #f94d00); }
.rp-article .footnote { color: #d11b2d; font-weight: 700; font-size: 1.05rem; }

.rp-article .georgia { font-family: Georgia, "Times New Roman", serif; }
.rp-article .courier { font-family: var(--rph-mono, ui-monospace, monospace); }
.rp-article .nobreak { white-space: nowrap; }

.rp-article .intro-size { font-size: 1.235rem; line-height: 1.6; }
.rp-article .title-caption { font-size: 0.95rem; line-height: 1.3; }
.rp-article .pix-caption { font-size: 0.8rem; color: var(--a-ink3, #727a82); }

.rp-article .indent { margin-left: 1.75rem; }
.rp-article .unindent { margin-left: -1.75rem; }
.rp-article .div-ul { margin: 0 0 0.75rem 1.75rem; }

.rp-article .session-live,
.rp-article .session-virtual { font-size: 1.1em; font-weight: 700; white-space: nowrap; }

/* Navy call-out band (big-blue) with its white header text (headertext). */
.rp-article .big-blue {
  margin: 1.25rem 0;
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: var(--a-deep, #193d80);
  display: block;
  border-top: 3px solid #d11b2d;
  border-bottom: 3px solid #d11b2d;
}
.rp-article .headertext { color: #fff; font-weight: 700; font-size: 1.2rem; }

/*═══════════════════════════════════════════════════════════════════════════
 * Legacy WPBakery step / callout boxes
 *
 * Imported pages hardcode navy (#1E3D7B) inline-block bordered divs for the
 * "Ten Steps"-style numbered lists and Case Study callouts. Inline styles beat
 * the stylesheet, so these overrides (!important) neutralize the builder chrome
 * and re-cast the boxes as clean brand components: numbered headers, tidy
 * detail, and warm case-study callouts. Scoped to imported pages only.
 *═════════════════════════════════════════════════════════════════════════*/
.rp-article--page .standard-number-list { margin: 1.6em 0; counter-reset: rpstep; }

/* Every navy builder box → a clean, full-width neutral card by default. */
.rp-article--page [style*="#1E3D7B"],
.rp-article--page [style*="#1e3d7b"] {
  display: block !important;
  width: auto !important;
  border: 1px solid var(--a-line) !important;
  border-radius: 14px !important;
  padding: 1rem 1.25rem !important;
  margin: 0.9rem 0 !important;
  background: var(--rph-surface, #fff);
}

/* The box that holds the step's number+title is a header, not a card. */
.rp-article--page [style*="#1E3D7B"]:has(ol),
.rp-article--page [style*="#1e3d7b"]:has(ol) {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 0 0.5rem !important;
  margin: 1.8rem 0 0.4rem !important;
  background: none;
  border-bottom: 1px solid var(--a-line) !important;
  counter-increment: rpstep;
}
/* Source <ol>s all restart at 1, so drive numbering from a counter instead. */
.rp-article--page .standard-number-list ol { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.rp-article--page .standard-number-list ol li {
  font-family: var(--rph-serif, Georgia, serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--a-ink);
  margin: 0;
  list-style: none;
}
.rp-article--page [style*="#1E3D7B"]:has(ol) li::before,
.rp-article--page [style*="#1e3d7b"]:has(ol) li::before {
  content: counter(rpstep) ". ";
  color: var(--a-tangelo);
  font-family: var(--rph-mono, monospace);
  font-size: 0.82em;
  font-weight: 600;
}

/* Step detail block: drop the builder's deep left indent, lighten the bullets. */
.rp-article--page [style*="margin-left: 55px"],
.rp-article--page [style*="margin-left:55px"],
.rp-article--page [style*="margin-left: 10px"] { margin-left: 0 !important; }

/* Nested box = a Case Study → a warm tangelo callout that stands apart. */
.rp-article--page [style*="#1E3D7B"] [style*="#1E3D7B"],
.rp-article--page [style*="#1e3d7b"] [style*="#1e3d7b"] {
  background: var(--a-tangelo-tint) !important;
  border-color: color-mix(in srgb, var(--a-tangelo) 26%, var(--a-line)) !important;
  margin-top: 0.9rem !important;
}

/*═══════════════════════════════════════════════════════════════════════════
 * Elementor page dumps (e.g. Federal Resume Samples)
 *
 * Some imported pages are full Elementor exports: hundreds of nested section/
 * column/widget wrappers, spacer widgets, and dead image-carousels that render
 * as a sparse, gap-ridden stack. Collapse the builder scaffolding into a single
 * readable column and remove the vertical gaps, so sample scans + View-PDF
 * buttons read as a clean sequence. Scoped to imported pages only.
 *═════════════════════════════════════════════════════════════════════════*/
.rp-article--page .elementor-section,
.rp-article--page .elementor-container,
.rp-article--page .elementor-row,
.rp-article--page .elementor-column,
.rp-article--page .elementor-column-wrap,
.rp-article--page .elementor-widget-wrap,
.rp-article--page .elementor-element {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
}
.rp-article--page .elementor-widget { margin: 0 !important; }
.rp-article--page .elementor-widget-spacer,
.rp-article--page .elementor-spacer,
.rp-article--page .elementor-divider { display: none !important; }

/* Sample scans: a tidy centered figure with a hairline frame, sane rhythm. */
.rp-article--page .elementor-widget-image { margin: 1.4em auto !important; text-align: center; }
.rp-article--page .elementor-widget-image img {
  margin: 0 auto !important;
  max-width: min(100%, 460px) !important;
  box-shadow: 0 20px 44px -28px rgba(19, 35, 63, 0.35);
}
/* Heading/text widgets keep the article rhythm rather than builder zero-margins. */
.rp-article--page .elementor-widget-heading,
.rp-article--page .elementor-widget-text-editor { margin: 1.1em 0 !important; }
.rp-article--page .elementor-widget-button { margin: 0.4em 0 1.6em !important; }

/* ---- Legacy-page title band (velocity_dress_legacy_page) -------------------
   Quiet designed opener for imported pages that never got a bespoke pattern:
   eyebrow names the parent section, serif title carries the page. Slim variant
   when the body brings its own H1. */
.rp-pagehero {
  border-bottom: 1px solid var(--rph-line, #e7e6e0);
  margin-bottom: 2.75rem;
}
.rp-pagehero__inner {
  max-width: 48rem;
  margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 1280px)) / 2));
  margin-right: auto;
  padding: 3.25rem 0 2.25rem;
}
.rp-pagehero--slim .rp-pagehero__inner { padding: 2.25rem 0 1.25rem; }
.rp-pagehero__eyebrow {
  margin: 0 0 0.9rem;
  font-family: var(--rph-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rph-tangelo, #f94d00);
}
.rp-pagehero__title {
  margin: 0;
  font-family: var(--rph-serif, Georgia, serif);
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--rph-ink, #16243a);
  text-wrap: balance;
  max-width: 22ch;
}