/* primecode interior — the shared foundation for every content route.
   Loaded directly on /about/ /products/ /services/ /privacy-policy/ and the
   password-protected download page, and as a declared dependency of
   `primecode-support` and `primecode-contact` (see inc/assets.php). The home
   routes have no band and no content column; they do not load this file.

   Everything a content route SHARES lives here: the title band, the content
   column, .pc-prose, chip and heading typography, paragraph / list / link
   typography, the .pc-h2/.pc-h3/.pc-h4 size classes, dividers, images and the
   two-column rows. A route stylesheet carries only what is unique to it.

   Every number was measured from migration/capture/source/<route>/
   {1440,768,390}/ — computed.json and parity.json for type and geometry,
   pixel scans of screenshot.png for rules, chip boxes and vertical rhythm.
   Sources are named at each block. Type is not responsive: the only
   breakpoint stacks columns at 767px. */


/* ---- title band -----------------------------------------------------------
   Identical on all six content routes at all three viewports (verified in
   computed.json for each): section x=0, full viewport width, height 150.
   Background is #F9D419 — the RENDERED colour sampled from the screenshot at
   y=120, not the #F9D921 the source section declares (it carries an overlay).
   H1 is 43.2px / 700 / line-height 1 / #333, vertically centred (H1 centre
   160.99 against band centre 161 at 1440 and 768; 154.99 / 155 at 390) and
   spanning the column: x=160 w=1120 at 1440, x=10 w=748 at 768,
   x=10 w=370 at 390. Type is not responsive. */
.pc-band { background: var(--pc-band); }
.pc-band__inner {
  display: flex;
  align-items: center;
  min-height: 150px;
  padding-block: var(--wp--preset--spacing--sm);
}
.pc-band__title {
  width: 100%;
  margin: 0;
  color: var(--pc-ink);
  font-size: var(--pc-fs-hero);
  font-weight: var(--pc-fw-hero);
  line-height: var(--pc-lh-tight);
  /* "Protected: DL42asdasdf2ASDDjKl" is one long token at 43.2px; without
     this it overflows 370px of content width on a phone. */
  overflow-wrap: break-word;
}


/* ---- content column -------------------------------------------------------
   `.pc-shell` (base.css) supplies the 1140/10px geometry. The 50px block
   padding is the source section's own: band bottom 236 -> first chip box 286
   at 1440 and 768, 230 -> 280 at 390. /contact/ measures 60px instead and
   sets its own.

   Normal block flow, NOT flex. The source is a stack of Elementor widgets
   whose margins collapse, and reproducing that is what gives the measured
   14.4px between sibling paragraphs. Each transition below therefore states
   the total it needs rather than relying on a uniform gap. */
.entry-content { padding-block: var(--pc-section-y); }


/* ---- headings -------------------------------------------------------------
   Heading widgets are 500 weight on a line-height of 1, with the source's
   20px widget gap below and nothing above (the gap above comes from the
   preceding block). Sizes: h2 32px, h3 28px, h4 24px — confirmed by the chip
   fills scanned out of the screenshots, which measure 52px tall for an h2
   chip (32 + 2x10 padding) and 44px for an h4 chip (24 + 2x10). */
.entry-content :is(h2, h3, h4) {
  margin-block: 0 var(--pc-chip-gap);
  color: var(--pc-ink);
  font-weight: var(--pc-fw-heading);
  line-height: var(--pc-lh-tight);
}
.entry-content h2 { font-size: var(--pc-fs-h2); }
.entry-content h3 { font-size: var(--pc-fs-h3); }
.entry-content h4 { font-size: var(--pc-fs-h4); }

/* Level and size are decoupled on purpose. /products/ and /privacy-policy/
   both skip h1 -> h3, which the brief lets us fix invisibly — but only if the
   heading keeps the size it renders at today. B7 promotes the tag and pins
   the size with one of these. */
.entry-content .pc-h2 { font-size: var(--pc-fs-h2); }
.entry-content .pc-h3 { font-size: var(--pc-fs-h3); }
.entry-content .pc-h4 { font-size: var(--pc-fs-h4); }

/* base.css .pc-chip already carries the 10px padding, the #F9D921 fill, the
   20px below and the 500/line-height-1 type. Nothing is redefined here. */


/* ---- paragraphs -----------------------------------------------------------
   16px / 400 / 1.5 on #333, 14.4px below. Measured directly off the
   screenshots: on /about/ the glyph rows of one paragraph end at y=449 and
   the next starts at y=473 — a 38.4px line-to-line pitch, i.e. a 24px line
   box plus 14.4px. The same 38.4px pitch is scanned on /support/. */
.entry-content p {
  margin-block: 0 14.4px;
  color: var(--pc-ink);
  font-size: var(--pc-fs-body);
  font-weight: var(--pc-fw-body);
  line-height: var(--pc-lh-body);
}

/* The last block keeps its 14.4px. The source's trailing gap from the last
   paragraph to the footer is 64.4px = 14.4 + the 50px column padding, and the
   screenshots agree: on /about/ the last paragraph ends at y=997 and the
   footer's yellow block starts at 1062 (65px); on /support/, 5642 -> 5706
   (64px). Do not reset it. */


/* ---- block transitions ----------------------------------------------------
   Margins collapse here, so each transition states its total. All four were
   checked against the 1440 captures.

   A .pc-chip is inline-block, so its margins never collapse with a sibling's
   and the preceding paragraph's own 14.4px still sits above it: chip gets the
   20px widget gap and the rendered total is 34.4px. On /about/ that puts the
   second chip's box at 550.8 and the third at 878.0 — the screenshot scan
   finds their yellow fills at 551 and 878. A plain heading is block-level and
   does collapse, so it states the full 34.4 itself. */
.entry-content > p + :is(h2, h3, h4) { margin-block-start: 34.4px; }
.entry-content > p + .pc-chip { margin-block-start: var(--pc-chip-gap); }
/*  paragraph -> divider = 14.4 + 20 + 15      list -> divider = 20 + 15  */
.entry-content > p + hr { margin-block-start: 49.4px; }
.entry-content > :is(ol, ul) + hr { margin-block-start: 35px; }


/* ---- prose groups ---------------------------------------------------------
   An optional wrapper for content that came from a source text-editor widget
   rather than a heading widget: inside one, headings are the browser's own
   400 weight on a 1.2 line-height with 8/16px margins, not the 500/1 of a
   heading widget. /privacy-policy/ is the route built this way, and the
   wrapper is why its first h3 sits at y=294 — 8px below the 286 column top.

   flow-root so those margins stay inside the group, exactly as they do in the
   source widget, and 20px below it for the widget gap. Content that is not
   grouped needs nothing: the rules above already produce the source's spacing
   on their own. */
.pc-prose {
  display: flow-root;
  margin-block: 0 var(--pc-chip-gap);
}
.pc-prose > * { margin-block: 0 14.4px; }
.pc-prose > :is(h2, h3, h4) {
  margin-block: 8px 16px;
  font-weight: var(--pc-fw-body);
  line-height: 1.2;
}


/* ---- in-content links -----------------------------------------------------
   Navy (#233093), 600, no underline — as /support/ and /contact/ render them.
   The underline on hover/focus is an addition; the source has none.
   .pc-btn keeps its own treatment. */
.entry-content a:not(.pc-btn) {
  color: var(--pc-primary);
  font-weight: var(--pc-fw-nav);
  text-decoration: none;
}
.entry-content a:not(.pc-btn):hover,
.entry-content a:not(.pc-btn):focus-visible { text-decoration: underline; }


/* ---- lists ----------------------------------------------------------------
   Unordered (/products/, 7 of them): items are 24px tall with no gap (the
   10-item list runs 753 -> 993 = 10 x 24), inset 10px from the column, marker
   at the item's left edge and text at +22px. The source marker is Font
   Awesome's fa-chevron-right; PLAN.md drops the icon font, so it is drawn
   with two borders instead.
   Ordered (/support/, 1): the source keeps its decimal markers on a 24px
   indent, and the measured line pitch inside it is a flat 24px. */
.entry-content :is(ol, ul) {
  margin-block: 0 14.4px;
  font-size: var(--pc-fs-body);
  line-height: var(--pc-lh-body);
}
.entry-content ol { padding-inline-start: 24px; }
.entry-content ul { padding-inline-start: 10px; list-style: none; }
.entry-content li {
  margin-block-end: 0;
  color: var(--pc-ink);
  font-size: var(--pc-fs-body);
  line-height: var(--pc-lh-body);
}
.entry-content ul > li {
  position: relative;
  padding-inline-start: 22px;
}
.entry-content ul > li::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 6px;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}


/* ---- dividers -------------------------------------------------------------
   15 on /products/, 6 on /support/: a 1px #F0F0F0 rule across the full column
   with 15px clear above the line and 35px below it (15px of widget padding
   plus the 20px widget gap). The transitions above supply what sits on top.
   Scanned on /support/ at 1440 the first two land at y=980 and y=1848. */
.entry-content hr {
  height: 0;
  margin-block: 15px 35px;
  border: 0;
  border-block-start: 1px solid var(--pc-divider);
}


/* ---- images ---------------------------------------------------------------
   base.css already gives every img max-width:100%; height:auto, which is the
   whole story: each of the four /products/ diagrams is capped by its column
   (540px at 1440, 354px at 768, 350px at 390) except Picture1, whose 40%
   column caps it at 428/279/350. Width and height attributes come from B7. */
.entry-content figure { margin: 0; }


/* ---- two-column rows ------------------------------------------------------
   Elementor inner sections. At 1440 the content column is 1120, each column is
   560 with 10px inside padding -> 540 of content, which is why chips in a
   column measure x=180 and x=740 (carriers 170 / 730). Same at 768 (374 ->
   354). Stacked below 767, Elementor's mobile breakpoint. */
.entry-content .wp-block-columns { display: flex; gap: 0; }
.entry-content .wp-block-column {
  flex: 0 0 50%;
  min-width: 0;
  padding-inline: var(--pc-gutter);
}
/* The Picture1 row is 40/60, not 50/50: 1120 x 0.4 - 20 = 428, the measured
   displayed width at 1440 (279 at 768 = 748 x 0.4 - 20). */
.entry-content .pc-cols--40-60 > .wp-block-column:first-child { flex-basis: 40%; }
.entry-content .pc-cols--40-60 > .wp-block-column:last-child { flex-basis: 60%; }


/* ---- password form --------------------------------------------------------
   The one route Nick approved as "a bit nicer". The words are WordPress'
   own; the box is built from tokens already in base.css. */
.pc-passform {
  width: 100%;
  max-width: 460px;
  padding: var(--wp--preset--spacing--md);
  border: 1px solid var(--pc-rule);
  border-radius: var(--pc-radius);
  background: var(--pc-surface-odd);
}
.pc-passform__intro {
  margin: 0 0 var(--wp--preset--spacing--sm);
  font-size: var(--pc-fs-body);
  line-height: var(--pc-lh-body);
}
.pc-passform__label {
  display: block;
  margin-bottom: var(--wp--preset--spacing--xs);
  font-weight: var(--pc-fw-nav);
  line-height: var(--pc-lh-nav);
}
.pc-passform__input {
  display: block;
  width: 100%;
  margin-bottom: var(--wp--preset--spacing--sm);
  padding: 12px var(--pc-chip-pad);
  border: 1px solid var(--pc-rule);
  border-radius: var(--pc-radius);
  background: var(--pc-paper);
  color: var(--pc-ink);
  font-size: var(--pc-fs-field);
  line-height: var(--pc-lh-nav);
}
.pc-passform__input:focus-visible { border-color: var(--pc-primary); }


/* ---- anchor targets -------------------------------------------------------
   Keep a jumped-to block clear of the viewport edge. The source has no
   offset; this is an addition and is invisible otherwise. */
.entry-content [id] { scroll-margin-block-start: 20px; }


@media (max-width: 767px) {
  .entry-content .wp-block-columns { flex-direction: column; }
  .entry-content .pc-cols--reverse-mobile { flex-direction: column-reverse; }
  .entry-content .wp-block-column,
  .entry-content .pc-cols--40-60 > .wp-block-column { flex-basis: auto; }
}

/* /products/: five two-column rows (image | text, text | image, list | list),
   the source's Elementor col-50 pairs. Core's columns block supplies the
   flex layout; this only pins the gutter and keeps the rows top-aligned. */
.entry-content .pc-columns { gap: calc(var(--pc-gutter) * 2); align-items: flex-start; }
.entry-content .pc-columns .wp-block-column > :first-child { margin-block-start: 0; }