/* ============================================================================
   arborstone-shell-page — compatibility layer.

   Loaded only on pages listed in ARBOR_SHELL_PAGE_URIS. Everything here restates
   something Divi's stylesheet used to supply and the shell does not, measured on
   live before the swap — nothing here is a new design decision.

   ⚠️ EXTERNAL FILE ON PURPOSE. arborstone-h1-demote.php / arborstone-h2-cleanup.php
   rewrite h1/h2 tokens inside inline <style> blocks, and their selector cloner
   splits on commas — so an inline `:where(h1,h2,h3,h4,h5,h6)` is served with
   unbalanced parentheses and kills the whole stylesheet's parse (5 rules survived
   out of 99 when that happened on 2026-09-15). External sheets are not rewritten.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. .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, so it only applies on the
   104 facet + hub routes that load page.css. Without it the body has no white
   background at all and the page renders on whatever canvas colour the browser
   picks. Copied verbatim from page.css.

   ⚠️ This is now the THIRD copy of this rule (page.css, blog-shell.css, here).
   It belongs in arborstone-shell/assets/shell.css — flagged, not bundled,
   because shell.css is shared by 240 live URLs.
   --------------------------------------------------------------------------- */
.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;
}

/* ---------------------------------------------------------------------------
   2. Divi base rules the page body inherited.
   Scoped to :where(#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.
   :where() keeps these at zero specificity, as weak as Divi's element selectors
   were, so each family's own scoped rules still win.
   --------------------------------------------------------------------------- */
: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}
   The families override weight/size/colour but NOT padding-bottom, so the 10px is
   load-bearing spacing under every heading. Measured on live 3PM 2026-09-15:
   .hero h1 padding-bottom 10px, h2 padding-bottom 10px. */
:where(#main-content) :where(h1, h2, h3, h4, h5, h6) {
  padding-bottom: 10px; font-weight: 500; line-height: 1em; margin: 0;
}

/* Divi's element reset zeroes MARGIN, and that was missing here.
   Divi ships `a,abbr,...,p,ol,ul,li,blockquote,...{padding:0;margin:0;...}`. This
   sheet restated Divi's PADDING rules but never its margin reset, so with Divi
   dequeued the browser's own `p{margin:1em 0}` came back.

   Found on /storage-locations/ 2026-09-15: every child of .ash-main was
   byte-identical between the two states, yet the container was +16px -- because
   getBoundingClientRect() does not include margins. The trailing <p> had
   `margin:16px 0` from the UA with NO author rule matching it; its top margin
   collapses against the preceding section's 46px, but the bottom margin sits
   inside the container's padding and adds 16px.

   Headings already get margin:0 from the heading rule below; ul/ol keep the
   explicit Divi list padding, which outranks this at (0,1,1)/(1,0,1). */
:where(#main-content) :where(p, blockquote, dl, dd, dt, ol, ul, li, pre, address, figure, fieldset, form) { margin: 0; }

/* Divi: p{padding-bottom:1em} AND p:not(.has-background):last-of-type{padding-bottom:0}.
   The second half is not optional — without it every last paragraph in a block
   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's LIST rules, verbatim from Divi/style.min.css (the .et-l--* Theme Builder
   selectors are dropped — this site has no Divi Theme Builder, so they match
   nothing).

   These are load-bearing in two different ways and both were found by the
   fingerprint, one pass apart:
     - line-height:26px cascades into every child, including <strong>. 3PM's own
       #arbor-3pm sets 1.62 (25.92px), so without these the text inside lists
       reflows by fractions of a pixel per line. That was the last 1.2px / 0.95px
       on /remote-hybrid-management/ and /revenue-management/ (ol), after the ul
       version had already fixed ul.ticks.
     - list-style-type and padding are what the families override at higher
       specificity; restating Divi's values changes nothing for them but keeps
       any unstyled list behaving as it does today.

   ⚠️ NOT :where()-wrapped, deliberately. Divi's selectors are (1,0,1)/(0,1,1) and
   have to outrank the families' own class rules exactly as they do now. */
#left-area ul,
.entry-content ul { list-style-type: disc; padding: 0 0 23px 1em; line-height: 26px; }
#left-area ol,
.entry-content ol { list-style-type: decimal; list-style-position: inside; padding: 0 0 23px; line-height: 26px; }
#left-area ul li ul,
.entry-content ul li ol { padding: 2px 0 2px 20px; }
#left-area ol li ul,
.entry-content ol li ol { padding: 2px 0 2px 35px; }

/* Divi: sub,sup{height:0;line-height:1;position:relative;vertical-align:baseline}
          sup{bottom:.8em}  sub{top:.3em}
   plus font-size:100% from Divi's element reset.

   Divi does NOT use the browser's superscript behaviour — it renders <sup> at
   full size, out of the line box (height:0), nudged up with `bottom`. Without
   these rules the UA default takes over (font-size:smaller, vertical-align:super)
   and the marker starts occupying line height. Caught on
   /third-party-management/remote-hybrid-management/ 2026-09-15: the footnote <sup>
   in the last table row measured line-height 15.04px on live vs 20.304px on
   staging, which pushed that one row 124px -> 127px and the page 7272 -> 7276. */
:where(#main-content) :where(sub, sup) {
  font-size: 100%; height: 0; line-height: 1; position: relative;
  vertical-align: baseline; margin: 0; padding: 0;
}
:where(#main-content) :where(sup) { bottom: .8em; }
:where(#main-content) :where(sub) { top: .3em; }

/* Divi's .entry-content TABLE rules, verbatim from Divi/style.min.css.
   Not cosmetic: the comparison table on 3PM pages gets its outer frame from
   Divi's `border:1px solid #eee` and its row rules from `tr td{border-top}`.
   Measured on live /third-party-management/why-arborstone/ 2026-09-15 — without
   these the table loses its frame entirely and shrinks 2px (511.75 -> 509.75),
   which is how the difference was found.

   The families override the PADDING and the th colour/weight at higher
   specificity (3PM serves 13px 16px, not Divi's 9px 24px / 6px 24px), so
   restating Divi's values here changes nothing about those — it only restores
   the borders, margin and text-align the families never set. */
.entry-content table:not(.variations) { border: 1px solid #eee; margin: 0 0 15px; text-align: left; width: 100%; }
.entry-content thead th,
.entry-content tr th { color: #555; font-weight: 700; padding: 9px 24px; }
.entry-content tr td { border-top: 1px solid #eee; padding: 6px 24px; }

/* Divi: button,input,select,textarea{font-family:inherit} — without it form
   controls fall back to the UA font and resize. Matters on the NOI audit page. */
:where(#main-content) :where(button, input, select, textarea) { font-family: inherit; }

/* Divi: .clearfix:after{...}. No family uses floats today, but the class is in
   Divi's markup vocabulary and a missing definition silently collapses any
   float container to height 0 — that is exactly what broke the blog CTA band and
   footer on 2026-09-15. Cheap insurance, copied verbatim from Divi/style.min.css. */
.clearfix:after {
  visibility: hidden; display: block; font-size: 0; content: " ";
  clear: both; height: 0;
}

/* Divi supplied .screen-reader-text; with Divi dequeued the only other source is
   wp-block-library, which is enqueued only when a page actually renders block
   content. Without it, visually-hidden labels render as visible text. Values
   copied from the wp-block-library rule. */
.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;
}

/* ---------------------------------------------------------------------------
   Family-specific: storage-locations inherited line-height must be UNITLESS.

   ⚠️ THE 1.7em TRAP, IN REVERSE. The property template needed `1.7em` (em
   computes once and inherits a fixed px). Here the opposite is true: Divi's
   effective line-height on these pages is the UNITLESS 1.7, which inherits as a
   NUMBER, so each element recomputes it from its own font-size.

   The two are indistinguishable on any 16px element -- both compute 27.2px --
   which is why it survived the whole fingerprint. It only shows where a child
   has a different font-size. `.foot-legal a{font-size:14px}` is such a child:
       Divi           14px x 1.7          = 23.8px
       :where(#main-content){1.7em}  inherits a fixed 27.2px
   +3.4px per legal link, +3.406px on every one of the four footers. Measured on
   staging 2026-09-15 by toggling the chrome and diffing the footer element tree.

   Declared on the hub ROOT so the number inherits through everything inside it,
   exactly as Divi's did. (1,0,0) beats the `:where(#main-content)` restatement,
   and it is scoped to these four pages -- 3PM keeps the shared rule, where it
   fingerprinted 9/9 and where #arbor-3pm sets its own unitless 1.62 anyway. */
#arbor-locations-hub { line-height: 1.7; }

/* ---------------------------------------------------------------------------
   Family-specific: the storage-locations page ground.

   These four pages are designed on a #F5F7FA ground, not white -- the fixed
   .grid-mark watermark (opacity .22, z-index 0) and the sticky .statenav
   (background #F5F7FA) both read against it. The snippet sets it with a bare
   `body{background:var(--arbor-bg)}` at specificity (0,0,1), which beat Divi's
   own `body{background:#fff}` on source order.

   shell.css's `.as-body{background:#fff}` is (0,1,0) and outranks it, so on the
   shell the ground turned white. Measured 2026-09-15: live body
   rgb(245,247,250), staging after the swap rgb(255,255,255).

   Restored at (0,1,1) via the body_class the plugin adds for these four pages.
   Scoped to them deliberately -- every other shell route wants the white body
   that .as-body gives it. The var() keeps the snippet as the source of truth;
   the literal is only a fallback if --arbor-bg ever stops being defined. */
body.arbor-loc-page { background: var(--arbor-bg, #F5F7FA); }

/* ---------------------------------------------------------------------------
   Family-specific: the storage-locations state nav.

   ⚠️ THE ONE DELIBERATE DEVIATION FROM LIVE IN THIS MIGRATION.

   .statenav is position:sticky; top:0 and 71px tall. Divi's fixed header is 52px,
   so on live exactly 19px of it stays visible once you scroll -- measured
   2026-09-15 on /storage-locations/. The shell header is 88px, which would cover
   it completely: a sticky jump-nav that is never visible is worse than either
   state, and it would be a regression introduced by this migration rather than
   something inherited.

   Pinned below the shell header instead, matching what the 3PM sub-nav does
   (--site-header: 88px there). Strict parity would be top:0 and a permanently
   hidden nav -- revert this one rule if that is preferred.

   (1,1,0) beats the snippet's own .statenav at (0,1,0) regardless of order. */
#arbor-locations-hub .statenav { top: 88px; }

/* ---------------------------------------------------------------------------
   3. Family-specific: the 3PM sticky offset.

   arborstone-3pm/styles.css defines --site-header for DIVI's header, which has
   three states (51.5px >=1351, 62px 981-1350, absolute <=980) and it documents
   them at the top of that file. The Arborstone shell header is ONE height at
   every width — measured 2026-09-15 at 390/768/900/980/1000/1100/1280/1351/1400/
   1500px: 88px, position:sticky, top:0 — so the three breakpoints collapse to a
   single value and the <=980px "offset must be 0" case no longer applies (the
   shell header does not scroll away).

   Done as a TOKEN override, not a selector edit, for two reasons: styles.css has
   13 rules whose `#arbor-3pm ` prefix is stranded above a comment and must never
   be touched, and Paul's build pipeline regenerates that file. Reverting the
   chrome swap therefore restores the Divi offsets automatically.

   Specificity matters here: styles.css sets --site-header inside @media blocks at
   (0,1,0). Media queries add no specificity, so an equal-specificity override
   would depend on source order. body.arbor-shell-page #arbor-3pm is (0,2,0) and
   wins regardless of order. --admin-bar logic is left to styles.css, unchanged.
   --------------------------------------------------------------------------- */
body.arbor-shell-page #arbor-3pm { --site-header: 88px; }

/* ---------------------------------------------------------------------------
   Divi's CLASSIC-CHAIN wrapper geometry (.container / #left-area).

   Only reached by pages with 'chain' => 'classic'. Added 2026-09-15 for
   /storage-resources/, the first classic-chain page that does NOT override
   these itself -- the storage-locations hub sets `#main-content .container
   {width:100%;max-width:none;padding-top:0}` in its own sheet at (1,1,0), so it
   never needed them and, being higher specificity, is unaffected by these.

   Measured on live /storage-resources/ 2026-09-15 (cw 1265): .container renders
   1012px wide, centred (margin:auto), 58px top padding. The rules that produce
   it, verbatim from Divi:
       .container{width:80%;max-width:1080px;margin:auto;position:relative}
       .container{text-align:left;position:relative}
       body:not(.et-tb) #main-content .container{padding-top:58px}
   Without them the content goes full-bleed (1265px) and loses the 58px.

   Kept at (0,1,0) via :where() on the id, matching Divi's own `.container`
   specificity, so a family's `#main-content .container` rule still wins.
   Scoped to the direct child of #main-content rather than a bare `.container`
   so it cannot reach an unrelated element that happens to use the class. */
:where(#main-content) > .container {
  width: 80%; max-width: 1080px; margin: auto; position: relative;
  text-align: left; padding-top: 58px;
}

/* ⚠️ #left-area is the trap here, and it is invisible until you look at the
   body classes. Divi ships, inside @media (min-width:981px):
       #left-area{width:79.125%;padding-bottom:23px}
       .et_full_width_page #left-area, .et_no_sidebar #left-area
           {float:none;width:100%!important}
       .et_full_width_page #left-area{padding-bottom:0}
   The 100% override is keyed to et_* BODY CLASSES -- which arborstone-shell.php
   strips on every shell route. So restating Divi's rules faithfully would leave
   the sidebar-less column at 79.125% + 23px, i.e. Divi's TWO-column width on a
   ONE-column page. What is restated here is the computed result measured on
   live (width 1012px = 100% of the container, float none, padding-bottom 0).

   At (1,0,0), matching Divi. /news/ is unaffected twice over: it does not load
   this sheet, and arbor-blog-experience sets `body.arbor-blog-page #left-area`
   at (1,1,1), which outranks this. */
#left-area { width: 100%; float: none; padding-bottom: 0; }
@media (max-width: 980px) { #left-area { width: 100% !important; } }

/* Divi's page title, emitted only where 'entry_title' is set (today:
   /storage-resources/, which has no hero of its own). Divi styles it with the
   generic heading rules plus two of its own; the shared heading rule above does
   NOT carry font-size or colour, because every other family sets its own.

   Measured on live /storage-resources/ 2026-09-15 -- h1 renders 35px/500/#333,
   line-height 35px (1em), padding-bottom 10px, margin-bottom 20px, box height
   45px. The rules that produce it:
       h1,h2,...{color:#333;padding-bottom:10px;line-height:1em;font-weight:500}
       h1{font-size:30px}                                      <- superseded by
       h1,h1.et_pb_contact_main_title,.et_pb_title_container h1{font-size:35px}
       .main_title{margin-bottom:20px}
   At (0,2,0) so a family that later wants its own title styling can override it
   with a single class. */
:where(#main-content) .entry-title.main_title {
  font-size: 35px; color: #333; font-weight: 500; line-height: 1em;
  margin: 0 0 20px; padding-bottom: 10px;
}
