/* ============================================================================
   Blog single-post parity with the Divi shell.
   Added 2026-09-15 when single posts moved onto arborstone-shell.

   ⚠️ THIS MUST BE AN EXTERNAL FILE, NOT AN INLINE <style>.
   arborstone-h1-demote.php / arborstone-h2-cleanup.php rewrite h1/h2 tokens
   inside inline <style> blocks. A rule written inline as
       :where(...) :where(h1,h2,h3,h4,h5,h6){...}
   was served as unbalanced parentheses, which killed the CSS parse and dropped
   every remaining rule in that stylesheet (16 KB, 5 rules survived). External
   stylesheets are not rewritten.

   Single posts keep Divi's wrapper markup (#main-content > .container >
   #content-area > #left-area + #sidebar) deliberately: arborstone-blog-experience
   already keys the container geometry off those ids. What Divi's stylesheet used
   to supply, and is restated here, is the two-column split plus a surprising
   amount of base typography. All values measured on live before the swap.

   NOTE THE :where() -- it contributes ZERO specificity, on purpose. Divi's
   originals were element selectors (0,0,1); scoping them normally would make
   them (0,2,2) and they would start beating arborstone-blog-experience's own
   class-based rules (e.g. .arbor-post-title's size and line-height).
   ============================================================================ */

@media (min-width: 981px) {
  body.arbor-blog-page #left-area { width: 79.125%; float: left; padding-right: 5.5%; }
  body.arbor-blog-page #sidebar   { width: 20.875%; float: right; }
}
@media (max-width: 980px) {
  body.arbor-blog-page #left-area,
  body.arbor-blog-page #sidebar { width: auto; float: none; padding-right: 0; }
}

body.arbor-blog-page #left-area { padding-bottom: 23px; }
/* #sidebar's 28px is a SINGLE-POST value. Measured on live 2026-09-15, the
   /blog/ index and the archives compute 0 -- so scope it, or every archive
   gains 28px of dead space below the sidebar. */
body.single-post #sidebar       { padding-bottom: 28px; }

/* line-height MUST be 1.7em, not unitless 1.7: the em value computes once here
   and inherits as a fixed px, whereas unitless re-computes per element. */
:where(body.arbor-blog-page #left-area, body.arbor-blog-page #sidebar) {
  font-weight: 500; line-height: 1.7em; color: #666;
}
:where(body.arbor-blog-page #left-area, body.arbor-blog-page #sidebar)
  :where(h1, h2, h3, h4, h5, h6) { padding-bottom: 10px; font-weight: 500; line-height: 1em; margin: 0; }
:where(body.arbor-blog-page #left-area) :where(p) { padding-bottom: 1em; }
:where(body.arbor-blog-page #left-area) :where(h1, h2, h3, h4, h5, h6) { color: #333; }
:where(body.arbor-blog-page #left-area) :where(article.arbor-post) { padding-bottom: 25px; }

/* ============================================================================
   DIVI BASE RULES THE WHOLE BLOG DOCUMENT USED TO INHERIT  (added 2026-09-15)

   The block above restates Divi's base typography for #left-area and #sidebar,
   which was enough while only single posts were on the shell. The archive
   templates put content OUTSIDE those two wrappers -- the navy hero sits
   directly in #main-content -- so it was inheriting browser defaults instead
   (font-weight 700 on the H1, line-height normal) once Divi was dequeued.

   Scoped to #main-content, NOT to body: the shell's header, CTA band and footer
   live outside #main-content and must keep shell.css's own typography. This is
   the same trap as the property template, where a block scoped to what turned
   out to be a BODY class restyled the shell chrome.

   Each rule below is Divi's, verbatim, read off live /blog/ on 2026-09-15 with
   an el.matches() walk of document.styleSheets -- not reconstructed from memory.
   :where() keeps them at zero specificity, as weak as Divi's element selectors
   were, so our own class rules still win.
   ============================================================================ */

/* ⚠️ .as-body — the shell's own body rule, which shell.css does not carry.
   ---------------------------------------------------------------------------
   arbor_shell_head() puts `as-body` on <body>, but the rule that styles it
   lives in arborstone-programmatic-landing/assets/page.css, NOT in
   arborstone-shell/assets/shell.css. extract_shell_css.py classified it as a
   facet style because its CHROME pattern lists `\.as-logo` and not `\.as-body`.

   So it applies on the 104 facet + hub routes (which load page.css) and is
   MISSING on every other shell route. Measured 2026-09-15, staging /blog/ vs
   the /self-storage/oklahoma/tulsa/10x10/ facet, both on the shell:
       chrome font-family   ...Helvetica,Arial,Lucida,sans-serif   vs  ...Arial,sans-serif
       chrome line-height   normal                                 vs  25.6px
       body background      transparent                            vs  #fff
   The transparent body is why a shell blog page renders on whatever canvas
   colour the browser picks rather than white.

   Copied VERBATIM from page.css, quirks included -- `color:var(--text-body)`
   resolves to a font shorthand and is therefore dropped as an invalid colour.
   That is what the facet pages do today, and parity is the point here.

   ⚠️ This copy fixes BLOG routes only. The real fix is to move .as-body into
   shell.css, which also covers the 63 property pages. That touches chrome
   shared by 240 live URLs, so it is deliberately NOT bundled here. */
.as-body {
  margin: 0; font-family: var(--font-sans); color: var(--text-body);
  background: #fff; font-size: var(--fs-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* ⚠️ .clearfix — THE ONE THAT ACTUALLY BROKE SOMETHING.
   ---------------------------------------------------------------------------
   #content-area carries class="clearfix" and contains two floats (#left-area
   left, #sidebar right). .clearfix is a DIVI class; with Divi dequeued it had
   no definition at all, so nothing cleared the floats.

   Measured on LIVE blog posts 2026-09-15, i.e. this was shipped broken in the
   2026-09-15 blog deploy and went unnoticed:
       #left-area   offsetHeight  3975
       #content-area offsetHeight    0
       .container    offsetHeight    0
       #main-content offsetHeight    0
       <main>        offsetHeight    0
   The whole article column overflowed a zero-height <main>, so .cta-band and
   .site-footer were laid out at y=88 -- the top of the document -- beside the
   escaped floats. The CTA band's <h2> measured 1107px tall (two 49px line boxes
   pushed below a 1009px float) instead of ~49px.

   The article still LOOKED right because the floats paint over that region,
   which is exactly why a computed-style fingerprint of #left-area content
   passed 13/13 and missed it. Check container HEIGHTS, not just typography.

   Copied verbatim from Divi/style.min.css. */
.clearfix:after {
  visibility: hidden; display: block; font-size: 0; content: " ";
  clear: both; height: 0;
}

/* Divi: body{font-weight:500;line-height:1.7em;color:#666} */
:where(#main-content) { font-weight: 500; line-height: 1.7em; color: #666; }

/* Divi: h1,h2,h3,h4,h5,h6{font-weight:500;line-height:1em;color:#333;padding-bottom:10px} */
:where(#main-content) :where(h1, h2, h3, h4, h5, h6) {
  padding-bottom: 10px; font-weight: 500; line-height: 1em; margin: 0;
}
:where(#main-content) :where(#left-area) :where(h1, h2, h3, h4, h5, h6) { color: #333; }

/* Divi: #left-area ul,.entry-content ul{line-height:26px;padding:0 0 23px 1em}
   Load-bearing twice over: the 1em left padding is the card grid's inset, and
   the 26px line-height is what every card inherits.

   ⚠️ NOT wrapped in :where() -- unlike every other rule in this block. Divi's
   selector is ID-based (1,0,1) and it deliberately OUTRANKS the inline sheet's
   own `.arbor-blog-grid{padding:0}` (0,1,0). At zero specificity the class rule
   wins instead, the 1em inset disappears and every card grows ~5px wider.
   Measured on live /blog/ 2026-09-15: padding-left 16px, padding-bottom 23px. */
#left-area ul,
.entry-content ul { line-height: 26px; padding: 0 0 23px 1em; }

/* Divi: p{padding-bottom:1em} AND p:not(.has-background):last-of-type{padding-bottom:0}.
   The second half is not optional -- a card excerpt is the last <p> in its card
   body, so without it every card grows by 1em. */
:where(#main-content) :where(p) { padding-bottom: 1em; }
:where(#main-content) :where(p:not(.has-background):last-of-type) { padding-bottom: 0; }

/* Divi: button,input,select,textarea{font-family:inherit}. */
:where(#main-content) :where(button, input, select, textarea) { font-family: inherit; }

/* Divi: body:not(.et-tb) #main-content .container{padding-top:58px} -- the gap
   between the navy hero and the first row of cards. Without it the grid rides
   58px higher than it does today. */
:where(#main-content) :where(.container) { padding-top: 58px; }

/* .screen-reader-text had NO definition on shell blog routes.
   ---------------------------------------------------------------------------
   Divi's stylesheet used to supply it. With Divi dequeued the only other source
   is WordPress's wp-block-library sheet, which is enqueued only when something
   on the page actually renders block content -- true on the term archives (the
   loop's excerpts pull it in), FALSE on /blog/, whose page content is Divi
   shortcode. Measured on staging 2026-09-15: /blog/ served 0 matching rules and
   the sidebar's "City or ZIP" label rendered as visible 49x54px text, squeezing
   the search input from 254px to 205px.

   Defining it here makes it deterministic rather than a side effect of what the
   loop happened to enqueue. Values copied from the wp-block-library rule.

   ⚠️ The same gap exists on EVERY shell route, not just the blog -- shell.css
   has no .screen-reader-text either. The shell's own skip link survives only
   because it carries the styles inline. Fixing it properly belongs in
   arborstone-shell/assets/shell.css; this is the blog-scoped copy. */
.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; margin: -1px;
  overflow: hidden; padding: 0; position: absolute; width: 1px;
  word-wrap: normal !important; word-break: normal !important;
}
.screen-reader-text:focus {
  background-color: #ddd; clip-path: none; color: #444; display: block;
  font-size: 1em; height: auto; left: 5px; line-height: normal;
  padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto;
  z-index: 100000;
}

/* ============================================================================
   ARCHIVE ROUTES — category / tag / date / author  (added 2026-09-15)

   These moved off Divi's index.php onto archive-blog.php, which renders the
   same card grid /blog/ uses. Everything the cards need already comes from
   arborstone-blog-experience.php's inline sheet (its wp_head guard has always
   covered is_category/is_tag/is_archive). The only genuinely new element is the
   breadcrumb kicker above the hero H1, styled here.

   Kept in THIS file, not inline, for the reason in the header above.
   ============================================================================ */

.arbor-arch-kicker {
  margin: 0 0 10px; padding: 0;
  font-size: 12px; font-weight: 700; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.arbor-arch-kicker a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.arbor-arch-kicker a:hover,
.arbor-arch-kicker a:focus-visible { color: #fff; text-decoration: underline; }

/* Archive titles are term names, not the single word "Blog", so they wrap on
   narrow screens at the hero's 56px. Step it down without touching /blog/. */
body.category .arbor-blog-hero h1,
body.tag      .arbor-blog-hero h1,
body.archive  .arbor-blog-hero h1,
body.author   .arbor-blog-hero h1 { font-size: 44px; }

@media (max-width: 980px) {
  body.category .arbor-blog-hero h1,
  body.tag      .arbor-blog-hero h1,
  body.archive  .arbor-blog-hero h1,
  body.author   .arbor-blog-hero h1 { font-size: 32px; }
}

/* The empty-archive line: an <a> inside a bare <p>, with no card around it. */
.arbor-blog-archive > p a { color: var(--arbor-navy, #003A60); font-weight: 700; }