/*
 * WebNigerians Global Front Layout Alignment V28
 * ------------------------------------------------
 * Loaded by /inc/layout/header.php across front-facing pages.
 *
 * Goals:
 * 1. Left rail, centre content and right rail begin on one horizontal line.
 * 2. Page-specific top:76/82/84px rules cannot push a rail downward on load.
 * 3. Sticky behaviour is restored only when scrolling reaches the correct point.
 * 4. The actual WebNigerians global header height is used instead of a hard-coded offset.
 *
 * JS adds:
 *   .wnGlobalAlignLayout
 *   .wnGlobalAlignMain
 *   .wnGlobalAlignSide
 *   .wnGlobalStickyActive
 */

/* All managed layouts begin in natural document flow. */
.wnGlobalAlignLayout{
  align-items:start!important;
}

.wnGlobalAlignMain,
.wnGlobalAlignSide{
  align-self:start!important;
  min-height:0;
  margin-top:0;
  padding-top:0;
  transform:none!important;
}

/*
 * This is the key correction.
 * Existing page CSS often sets position:sticky + top:82px directly on a rail.
 * V28 neutralises that on initial render so every first card starts from the
 * same natural grid row as the page's centre content.
 */
.wnGlobalAlignSide{
  position:relative!important;
  top:auto!important;
  bottom:auto!important;
  inset-block-start:auto!important;
}

/* The reusable profile/navigation rail must not create a second sticky layer. */
.wnGlobalAlignSide > .wnflStack,
.wnGlobalAlignSide .wnflStack.wnGlobalNestedRail{
  position:static!important;
  top:auto!important;
  margin-top:0!important;
  transform:none!important;
}

/* Remove accidental first-child top spacing inside managed top-level columns. */
.wnGlobalAlignMain > :first-child,
.wnGlobalAlignSide > :first-child,
.wnGlobalAlignSide > .wnflStack > :first-child{
  margin-top:0!important;
}

/*
 * JS activates this exactly when the natural side-column top reaches the
 * sticky-header boundary. This avoids the visual jump seen on Share Integration,
 * Home, Article and similar three-column/two-column pages.
 */
.wnGlobalAlignSide.wnGlobalStickyActive{
  position:sticky!important;
  top:var(--wn-global-sticky-top,68px)!important;
  inset-block-start:var(--wn-global-sticky-top,68px)!important;
}

/* Explicitly protect common current WebNigerians wrappers from inherited offsets. */
.siLayout.wnGlobalAlignLayout > .siLeft,
.scShell.wnGlobalAlignLayout > .scLeft,
.wxExploreLayout.wnGlobalAlignLayout > .wxExploreRail,
.wnevOuter.wnGlobalAlignLayout > .wnevLeft,
.wnProfileOuter.wnGlobalAlignLayout > .wnProfileLeft,
.wnfrShell.wnGlobalAlignLayout > .wnfrLeft,
.shOuter.wnGlobalAlignLayout > .shLeft,
.pbbOuter.wnGlobalAlignLayout > .pbbLeft,
.waShell.wnGlobalAlignLayout > .waLeft,
.waShell.wnGlobalAlignLayout > .waRight{
  margin-top:var(--wn-global-align-nudge,0px)!important;
}

/*
 * Generic classic liGrid pages already align naturally; keep them that way.
 * This protects older Pages/Bio Pages/Companies forms from future sticky rules.
 */
.liShell > .liGrid{
  align-items:start!important;
}
.liShell > .liGrid > aside:first-child{
  align-self:start!important;
}

/* Future pages can opt in without adding another stylesheet. */
[data-wn-align-layout]{
  align-items:start!important;
}
[data-wn-align-side]{
  align-self:start!important;
}

/* Never force desktop sticky behaviour into collapsed mobile layouts. */
@media(max-width:920px){
  .wnGlobalAlignSide{
    position:relative!important;
    top:auto!important;
    inset-block-start:auto!important;
    margin-top:0!important;
  }
  .wnGlobalAlignSide.wnGlobalStickyActive{
    position:relative!important;
    top:auto!important;
    inset-block-start:auto!important;
  }
}