/* ============================================================================
   EXPRE - blog article component layer
   File: wp-content/themes/expre-child/css/blog-article.css
   Loaded on single posts only (inc/blog-article.php).

   THIS FILE IS ADDITIVE. The base typography for a blog post - h2/h3/h4, p,
   ul, ol, table, blockquote, links, img, figure - is owned by style.css under
   `.xp-blog-single__content` and is NOT restated here. A post that uses only
   core Gutenberg blocks renders correctly with this file absent; everything
   below adds components the theme does not have.

   Naming: every component class is `xp-a-*` (a = article) and every rule is
   scoped under `.xp-blog-single__content`, so nothing here can reach another
   template.

   Deliberate overrides of theme rules are marked OVERRIDE with the reason.
   ============================================================================ */

/* -- Hero standfirst (moved out of single.php inline style, r-dgiwvu) ------ */
.xp-blog-single__standfirst {
  font-size: 1.15rem;
  line-height: 1.55;
  color: #DDDFEA;
  max-width: 62ch;
  margin: 14px 0 0;
  font-weight: 400;
}
@media (max-width: 600px) {
  /* At 1.05rem the standfirst ran to five lines and crowded the hero on a
     phone, so it is stepped down and tightened here. */
  .xp-blog-single__standfirst {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-top: 10px;
  }
}

/* -- Sidebar: Free Website Report card (moved out of single.php) ----------- */
.xp-sidebar-offer { background: #0D0D2B; border-color: #0D0D2B; color: #fff; }
.xp-sidebar-offer .xp-sidebar-heading {
  color: #fff;
  border-bottom: 2px solid var(--xp-accent);
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.xp-sidebar-offer .xp-sidebar-heading span { color: #fff; }
.xp-sidebar-offer__copy { font-size: .95rem; line-height: 1.5; color: #DDDFEA; margin: 0 0 16px; }
.xp-sidebar-offer__btn {
  white-space: nowrap;
  text-align: center;
  padding-left: 8px !important;
  padding-right: 8px !important;
  font-size: .85rem !important;
}
.xp-sidebar-offer__fine { font-size: .8rem; line-height: 1.5; color: #C9CCDB; margin: 12px 0 0; }
.xp-sidebar-offer__fine a { color: #fff; text-decoration: underline; }

/* == ARTICLE COMPONENTS ==================================================== */

/* Anchor offset. The live site has a fixed header; a bare #hash jump would put
   the target underneath it (WCAG 2.4.11). --xp-a-stick is measured from the
   real header, not from a mockup. */
.xp-blog-single__content { --xp-a-stick: 110px; }
.xp-blog-single__content [id] { scroll-margin-top: var(--xp-a-stick); }

/* Core's flow layout gives every group child a margin-block-start (24px by
   default). Our components already carry their own vertical rhythm from the
   theme's p/h2/h3 bottom margins, so the two stack and double the gaps - and
   inside the flex CTA row it knocks the fine print off the button's baseline.
   A two-class selector out-specifies core's :where(.is-layout-flow) rule, so
   this needs no !important. */
.xp-blog-single__content .wp-block-group > * { margin-block-start: 0; }
.xp-blog-single__content .xp-a-row > * { margin-block-start: 0; margin-block-end: 0; }

/* -- Deck: the one-line summary that sits under an h2 --------------------- */
.xp-blog-single__content .xp-a-sub {
  color: var(--xp-text-muted);
  font-size: 1rem;
  line-height: 1.55;
  margin: -0.2em 0 1.3em;
  max-width: 62ch;
}

/* -- Short answer --------------------------------------------------------- */
.xp-blog-single__content .xp-a-answer {
  border-top: 5px solid var(--xp-navy);
  border-bottom: 1px solid var(--xp-border);
  padding: 22px 0 6px;
  margin: 0 0 34px;
}
/* OVERRIDE: the theme gives every h2 a 14px indent + accent left bar. Inside
   the answer panel the h2 is an eyebrow label, not a section head, so the bar
   and indent are reset by name. Resetting border-left explicitly matters:
   setting a different edge leaves the theme left border standing. */
.xp-blog-single__content .xp-a-answer h2 {
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--xp-navy);
  margin: 0 0 12px;
  padding-left: 0;
  border-left: 0;
}
.xp-blog-single__content .xp-a-answer .xp-a-lead {
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--xp-navy);
  margin: 0 0 20px;
  max-width: 58ch;
}
.xp-blog-single__content .xp-a-answer .xp-a-lead strong {
  border-bottom: 3px solid var(--xp-accent);
}

/* -- Price ladder --------------------------------------------------------- */
.xp-blog-single__content .xp-a-ladder { margin: 0 0 20px; border-top: 1px solid var(--xp-border); }
.xp-blog-single__content .xp-a-ladder > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--xp-border);
}
.xp-blog-single__content .xp-a-ladder dt {
  margin: 0;
  font-weight: 700;
  color: var(--xp-navy);
  font-size: 1rem;
}
.xp-blog-single__content .xp-a-ladder dd {
  margin: 0;
  text-align: right;
  font-weight: 700;
  color: var(--xp-navy);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.xp-blog-single__content .xp-a-ladder dd small {
  display: block;
  font-weight: 400;
  font-size: .85rem;
  color: var(--xp-text-muted);
  margin-top: 2px;
}
/* Each row is label-left / price-right, which only holds while both fit on one
   line. On a phone the longer labels wrapped and read as a stack, but a short
   one like "Shared hosting" still fitted beside its price, leaving that row's
   caption hanging off to the right and clipped - so the first row looked
   nothing like the four beneath it. Below 600px every row stacks, so the whole
   ladder reads the same way down the page. */
@media (max-width: 600px) {
  .xp-blog-single__content .xp-a-ladder > div {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .xp-blog-single__content .xp-a-ladder dd { text-align: left; }
  .xp-blog-single__content .xp-a-ladder dd small { margin-top: 3px; }
}

/* -- Provenance stamp ----------------------------------------------------- */
.xp-blog-single__content .xp-a-stamp {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--xp-text-muted);
  margin: 0;
}

/* -- Table of contents ---------------------------------------------------- */
.xp-blog-single__content .xp-a-toc {
  background: var(--xp-bg);
  border: 1px solid var(--xp-border);
  border-radius: var(--xp-radius-lg);
  padding: 22px 26px 10px;
  margin: 0 0 42px;
}
/* OVERRIDE: same eyebrow reasoning as the answer panel. */
.xp-blog-single__content .xp-a-toc h2 {
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--xp-text-muted);
  margin: 0 0 12px;
  padding-left: 0;
  border-left: 0;
}
/* OVERRIDE: the theme numbers every ol with a filled purple counter disc. In a
   two-column contents list that competes with the link text, so the disc is
   replaced with a plain numeral here only. */
.xp-blog-single__content .xp-a-toc ol {
  counter-reset: xp-a-toc;
  columns: 2;
  column-gap: 34px;
  margin: 0;
}
.xp-blog-single__content .xp-a-toc ol li {
  counter-increment: xp-a-toc;
  padding-left: 1.9em;
  margin-bottom: .55em;
  break-inside: avoid;
  line-height: 1.45;
}
.xp-blog-single__content .xp-a-toc ol li::before {
  content: counter(xp-a-toc) ".";
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  color: var(--xp-text-muted);
  font-size: .9rem;
  font-weight: 700;
  display: block;
}
.xp-blog-single__content .xp-a-toc ol li a { text-decoration: none; }
.xp-blog-single__content .xp-a-toc ol li a:hover { text-decoration: underline; }
@media (max-width: 700px) {
  .xp-blog-single__content .xp-a-toc ol { columns: 1; }
}

/* -- Callouts ------------------------------------------------------------- */
/* Callouts are told apart by their background tint alone now - no accent bar
   down the left edge, so the radius is even on all four corners. */
.xp-blog-single__content .xp-a-callout {
  border-left: 0;
  background: var(--xp-bg);
  border-radius: var(--xp-radius);
  padding: 18px 22px;
  margin: 30px 0;
}
.xp-blog-single__content .xp-a-callout p:last-child { margin-bottom: 0; }
.xp-blog-single__content .xp-a-ch {
  display: block;
  font-weight: 700;
  color: var(--xp-navy);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.xp-blog-single__content .xp-a-callout--warn { background: #FFF8F0; }
.xp-blog-single__content .xp-a-callout--note { background: #F0FAF8; }

/* -- Charts --------------------------------------------------------------- */
.xp-blog-single__content .xp-a-chart { margin: 30px 0 34px; }
.xp-blog-single__content .xp-a-chart .xp-a-fh {
  font-weight: 700;
  color: var(--xp-navy);
  font-size: 1.05rem;
  margin: 0 0 2px;
  line-height: 1.35;
}
.xp-blog-single__content .xp-a-chart .xp-a-fs {
  color: var(--xp-text-muted);
  font-size: .88rem;
  margin: 0 0 14px;
}
.xp-blog-single__content .xp-a-chart svg { width: 100%; height: auto; display: block; }
.xp-blog-single__content .xp-a-chart figcaption {
  text-align: left;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--xp-text-muted);
  margin-top: 10px;
}

/* -- Tables --------------------------------------------------------------- */
/* Site-wide safety net, additive: a block table wider than its column scrolls
   inside its own figure instead of widening the document. Fixes the class of
   defect where a 543px table on a 390px viewport pans the whole page. */
.xp-blog-single__content .wp-block-table { overflow-x: auto; margin: 2em 0; }
.xp-blog-single__content .wp-block-table table { margin: 0; min-width: 560px; }
/* Make the horizontal scrollbar permanently visible on the container, so there
   is an affordance telling the reader there are more columns. Deliberately a
   scrollbar rather than a "scroll sideways" hint under a breakpoint: the table
   overflows below ~608px AND again at ~1024px, where the sidebar returns and
   squeezes the content column, so any fixed breakpoint would show the hint when
   there is nothing to scroll or hide it when there is. A scrollbar is drawn
   from the element's real geometry and cannot be wrong. */
.xp-blog-single__content .wp-block-table {
  scrollbar-width: thin;
  scrollbar-color: var(--xp-accent) var(--xp-border);
  overscroll-behavior-x: contain;
}
.xp-blog-single__content .wp-block-table::-webkit-scrollbar { height: 9px; }
.xp-blog-single__content .wp-block-table::-webkit-scrollbar-track {
  background: var(--xp-border);
  border-radius: 9px;
}
.xp-blog-single__content .wp-block-table::-webkit-scrollbar-thumb {
  background: var(--xp-accent);
  border-radius: 9px;
}
.xp-blog-single__content .wp-block-table figcaption, .xp-blog-single__content .wp-element-caption {
  text-align: left;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--xp-text-muted);
  margin-top: 10px;
}
/* OVERRIDE, narrow screens only: the theme sets td:first-child to nowrap, which
   is what forces the overflow once a label gets long. Desktop is untouched. */
@media (max-width: 782px) {
  .xp-blog-single__content table td:first-child { white-space: normal; }
}
/* Row-header cells: core/table emits <th scope="row"> when the first column is
   marked as a header. The theme styles thead th for the navy bar only, so give
   a body th the same treatment as its td:first-child sibling. */
.xp-blog-single__content table tbody th {
  padding: 11px 20px;
  text-align: left;
  font-weight: 700;
  color: var(--xp-navy);
  border-bottom: 1px solid var(--xp-border);
  vertical-align: top;
  line-height: 1.6;
}
.xp-blog-single__content .xp-a-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.xp-blog-single__content .xp-a-up { color: #A03A00; font-weight: 700; }
.xp-blog-single__content .xp-a-flat { color: #0B6E66; font-weight: 700; }

/* -- Decision path -------------------------------------------------------- */
.xp-blog-single__content .xp-a-step {
  border-top: 2px solid var(--xp-border);
  padding: 18px 0 6px;
  margin: 0 0 6px;
}
/* OVERRIDE: an h3 inside a step is a question, not a section head - tighter. */
.xp-blog-single__content .xp-a-step h3 { margin: 0 0 12px; font-size: 1.08rem; }
.xp-blog-single__content .xp-a-n { color: var(--xp-accent); margin-right: .45em; }
/* The indent alone carries the nesting here; the grey rule is gone. */
.xp-blog-single__content .xp-a-opt {
  margin: 0 0 10px;
  padding-left: 16px;
  border-left: 0;
  font-size: .97rem;
  line-height: 1.6;
}
.xp-blog-single__content .xp-a-opt strong { display: block; color: var(--xp-navy); }
.xp-blog-single__content .xp-a-price {
  display: inline-block;
  margin-top: 4px;
  background: #F1E9FD;
  color: var(--xp-purple);
  font-weight: 700;
  font-size: .86rem;
  padding: 2px 9px;
  border-radius: 3px;
  white-space: nowrap;
}
.xp-blog-single__content .xp-a-tnote {
  font-size: .86rem;
  color: var(--xp-text-muted);
  border-top: 2px solid var(--xp-border);
  padding-top: 12px;
}

/* -- FAQ (core/details block) --------------------------------------------- */
.xp-blog-single__content .wp-block-details {
  border-bottom: 1px solid var(--xp-border);
  padding: 0;
  margin: 0;
}
.xp-blog-single__content .wp-block-details:first-of-type { border-top: 1px solid var(--xp-border); }
.xp-blog-single__content .wp-block-details summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 34px 16px 0;
  position: relative;
  font-weight: 700;
  color: var(--xp-navy);
  line-height: 1.45;
}
.xp-blog-single__content .wp-block-details summary::-webkit-details-marker { display: none; }
.xp-blog-single__content .wp-block-details summary::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 22px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--xp-accent);
  border-bottom: 2px solid var(--xp-accent);
  transform: rotate(45deg);
  transition: transform .18s;
}
.xp-blog-single__content .wp-block-details[open] > summary::after { transform: rotate(-135deg); top: 26px; }
.xp-blog-single__content .wp-block-details summary:focus-visible {
  outline: 3px solid var(--xp-purple);
  outline-offset: 2px;
}
.xp-blog-single__content .wp-block-details > p { margin: 0 0 16px; padding-right: 34px; }

/* -- Sources -------------------------------------------------------------- */
.xp-blog-single__content .xp-a-when { color: var(--xp-text-muted); font-size: .88rem; }

/* -- In-article CTA ------------------------------------------------------- */
.xp-blog-single__content .xp-a-cta {
  background: var(--xp-bg);
  border: 1px solid var(--xp-border);
  border-radius: var(--xp-radius-lg);
  padding: 28px 30px;
  margin: 38px 0;
}
/* OVERRIDE: a CTA heading is panel furniture, so it drops the section h2
   indent, accent bar and 2.5em top margin. border-left reset by name. */
.xp-blog-single__content .xp-a-cta h2 {
  font-size: 1.22rem;
  margin: 0 0 10px;
  padding-left: 0;
  border-left: 0;
  line-height: 1.35;
}
.xp-blog-single__content .xp-a-cta p { margin: 0 0 18px; }
.xp-blog-single__content .xp-a-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}
.xp-blog-single__content .xp-a-fine {
  font-size: .85rem;
  color: var(--xp-text-muted);
  margin: 0;
  flex: 1 1 240px;
  line-height: 1.5;
}
.xp-blog-single__content .xp-a-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 26px;
  background: var(--xp-purple);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border-radius: var(--xp-radius);
  text-decoration: none;
  white-space: nowrap;
}
.xp-blog-single__content .xp-a-btn:hover { background: #42009B; color: #fff; text-decoration: none; }
.xp-blog-single__content .xp-a-cta--dark { background: var(--xp-navy); border-color: var(--xp-navy); }
.xp-blog-single__content .xp-a-cta--dark h2 { color: #fff; }
.xp-blog-single__content .xp-a-cta--dark p { color: #DDDFEA; }
.xp-blog-single__content .xp-a-cta--dark .xp-a-fine { color: #C9CCDB; }
.xp-blog-single__content .xp-a-cta--dark .xp-a-fine a { color: #fff; text-decoration-color: rgba(255,255,255,.5); }
.xp-blog-single__content .xp-a-cta--dark .xp-a-fine a:hover { color: #fff; }
.xp-blog-single__content .xp-a-cta--dark .xp-a-btn { background: #fff; color: var(--xp-navy); }
.xp-blog-single__content .xp-a-cta--dark .xp-a-btn:hover { background: #E7E7EE; color: var(--xp-navy); }

/* -- Next up -------------------------------------------------------------- */
.xp-blog-single__content .xp-a-nextup { margin: 40px 0 0; }
.xp-blog-single__content .xp-a-nextup ul { margin: 0; }
.xp-blog-single__content .xp-a-nextup li { padding-left: 0; margin-bottom: 0; }
.xp-blog-single__content .xp-a-nextup li::before { display: none; }
.xp-blog-single__content .xp-a-nextup li a {
  display: block;
  padding: 14px 0;
  border-top: 1px solid var(--xp-border);
  text-decoration: none;
  font-weight: 700;
  color: var(--xp-navy);
}
.xp-blog-single__content .xp-a-nextup li a:hover { color: var(--xp-purple); }
.xp-blog-single__content .xp-a-nextup li a span {
  display: block;
  font-weight: 400;
  font-size: .9rem;
  color: var(--xp-text-muted);
  margin-top: 3px;
}