/* 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);
  }

  /* ============================================================
     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)
  ============================================================ */

  /* 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 {
    /* 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;
  }
}