/* Framework CSS. Applied via [data-framework="..."] on the ThemeShell div.
   @layer framework wins over @layer section but loses to @layer theme.
   Two kinds:
     Layout frameworks (sidebar, topnav) — structural two-column / top-bar.
     Color-mode recipes (uniform, alternating, etc.) — --section-bg overrides.
*/

@layer framework {

  /* Base section-bg fallback for layout frameworks (sidebar, topnav).
     Color-mode recipes override per-slot; this ensures slots never
     render with a transparent/missing background on layout-only frameworks. */
  [data-framework="sidebar"] > .slot,
  [data-framework="topnav"] > .slot {
    --section-bg: 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-framework="sidebar"] {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 100dvh;
    align-items: start;
  }
  [data-framework="sidebar"] > .slot[data-section="nav"] {
    grid-column: 1;
    grid-row: 1 / 9999;
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow-y: auto;
  }
  [data-framework="sidebar"] > .slot:not([data-section="nav"]) {
    grid-column: 2;
  }
  @media (max-width: 768px) {
    [data-framework="sidebar"] {
      display: block;
    }
    [data-framework="sidebar"] > .slot[data-section="nav"] {
      position: static;
      height: auto;
      overflow: visible;
    }
  }

  /* ============================================================
     topnav — standard sticky horizontal nav, full-width sections.
     No layout override needed; default block stacking is correct.
     Selector present so the builder can set it as a framework value
     without undefined behavior.
  ============================================================ */
  [data-framework="topnav"] > .slot { /* inherits default block layout */ }

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

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

  /* alternating — odd sections --bg, even sections --bg-mid. */
  [data-framework="alternating"] > .slot:nth-of-type(odd) { --section-bg: 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); }
  [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 gets a subtle drop shadow on its top edge,
     visually floating each section over the prior one. */
  [data-framework="layered"] > .slot { --section-bg: var(--bg); }
  [data-framework="layered"] > .slot + .slot {
    box-shadow: 0 -12px 24px -16px rgba(0, 0, 0, 0.55);
    position: relative;
    z-index: 0;
  }
}