/* Framework CSS. Applied via TWO attributes on the ThemeShell div since the
   layout/recipe split (docs/BACKGROUND-SYSTEM.md §1d):
     [data-layout="topnav|sidebar"]        — structural two-column / top-bar.
     [data-framework="uniform|alternating|accent-bands|layered"]
                                           — colour recipe, --section-bg only.
   Layer order (globals.css, first-appearance): theme < framework < section —
   so these rules LOSE to @layer section on equal footing; the recipes work
   because they set --section-bg on the slot ELEMENT while sections.css only
   defaults it at :root. Per-section operator overrides are emitted UNLAYERED
   by ThemeShell and beat everything here by design.

   HISTORY: both concepts used to share the one data-framework attribute, so
   a tenant on a layout value lost their recipe (every slot pinned to --bg by
   the base fallback below). That base fallback now keys off data-layout,
   which is ALWAYS present alongside the recipe attribute, so it is a true
   fallback rather than a recipe-suppressor. */

@layer framework {

  /* Base section-bg fallback — data-layout is present on every shell, so
     slots never render with a missing background. The recipe rules further
     down the file re-set the property at equal specificity and later order,
     so any recipe value wins over this. */
  [data-layout] > .slot {
    --section-bg: var(--bg-page, var(--bg));
  }

  /* ============================================================
     sidebar — fixed 280px left rail + content right column.
     Nav slot (data-section="nav") occupies column 1, sticky.
     Everything else stacks in column 2.
     Mobile (≤768px) collapses to single column; nav variant
     switches to top-bar + hamburger via its own media queries.
  ============================================================ */
  [data-layout="sidebar"] {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 100dvh;
    align-items: start;
  }
  [data-layout="sidebar"] > .slot[data-section="nav"] {
    grid-column: 1;
    grid-row: 1 / 9999;
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow-y: auto;
  }
  [data-layout="sidebar"] > .slot:not([data-section="nav"]) {
    grid-column: 2;
  }
  @media (max-width: 768px) {
    [data-layout="sidebar"] {
      display: block;
    }
    [data-layout="sidebar"] > .slot[data-section="nav"] {
      position: static;
      height: auto;
      overflow: visible;
    }
  }

  /* topnav — standard sticky horizontal nav, full-width sections.
     Default block stacking is correct; no rules needed. */

  /* ============================================================
     Color-mode recipes (advanced mode / theme defaultFramework)

     🚨 EVERY rule below that paints the BASE page colour reads
     `var(--bg-page, var(--bg))`, never `var(--bg)` directly. --bg-page is
     normally unset, so the fallback makes this identical to what it replaced.
     ThemeShell sets it to `transparent` when the tenant's brand backdrop is
     switched on, which is what makes the image show THROUGH every base
     section (operator, 2026-08-30: "it should show anywhere the background
     color is"). Card/raised (`--bg-mid`) and accent bands deliberately keep
     painting their own colour, so they still read as panels ON the image.

     Before this, a backdrop only showed where a section was individually set
     to 'backdrop' — and measured across both tiers, 32 tenants had uploaded
     an image and NOT ONE had ever made it visible. The feature was unusable
     as designed.
  ============================================================ */

  /* uniform — every section uses --bg. No-op. */
  [data-framework="uniform"] > .slot { --section-bg: var(--bg-page, var(--bg)); }

  /* alternating — odd sections --bg, even sections --bg-mid. */
  [data-framework="alternating"] > .slot:nth-of-type(odd) { --section-bg: var(--bg-page, var(--bg)); }
  [data-framework="alternating"] > .slot:nth-of-type(even) { --section-bg: var(--bg-mid); }

  /* accent-bands — most sections --bg; trust + pricing + consult get accent. */
  [data-framework="accent-bands"] > .slot { --section-bg: var(--bg-page, var(--bg)); }
  [data-framework="accent-bands"] > .slot[data-section="trust"],
  [data-framework="accent-bands"] > .slot[data-section="pricing"],
  [data-framework="accent-bands"] > .slot[data-section="consult"] {
    --section-bg: var(--bg-mid);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }

  /* layered — every section AFTER THE FIRST gets a subtle drop shadow on
     its top edge, visually floating each section over the prior one.

     🚨 `~` (general sibling), not `+` (adjacent). SectionRouter emits a
     `.section-anchor` span between every pair of sections (and, since
     2026-09-02, a hidden animation marker before an animated one), so
     `.slot + .slot` never matched anything — measured in Chromium against
     the exact DOM a prod page serves, no layered tenant had ever rendered
     the shadow. `.slot ~ .slot` is "every slot with any slot before it",
     which is the rule's actual intent: first section bare, the rest float. */
  [data-framework="layered"] > .slot { --section-bg: var(--bg-page, var(--bg)); }
  [data-framework="layered"] > .slot ~ .slot {
    /* Softened 2026-07-25 (flaw 3): the heavier 0.55/-12px shadow read as
       sections bleeding/overlapping on loud palettes (playground). Subtler
       float keeps the layered effect without the overlap look. */
    box-shadow: 0 -6px 16px -14px rgba(0, 0, 0, 0.32);
    position: relative;
    z-index: 0;
  }
}