/**
 * Site Builder header: sticky positioning and the skip link.
 *
 * Positions use logical properties, so the generated RTL file needs no
 * overrides. site-header.js sets the is-sticky and is-fixed classes.
 */
.pp-site-header {
  position: relative;
  z-index: 100;
}

.pp-site-header.is-sticky {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0);
}

.pp-site-header.is-fixed {
  position: fixed;
  top: var(--wp-admin--admin-bar--height, 0);
  inset-inline: 0;
}

html.pp-has-sticky-header {
  scroll-padding-top: calc(var(--pp-header-height, 0px) + var(--wp-admin--admin-bar--height, 0px));
}

/*
 * Off screen until focused, then above everything. Fixed rather than
 * absolute: focused after the page has scrolled, an absolute link would
 * appear at the top of the document, out of sight.
 */
.pp-skip-link {
  position: fixed;
  top: -100px;
  inset-inline-start: 8px;
  z-index: 100000;
  padding: 12px 20px;
  border-radius: 4px;
  background: #1d2327;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.pp-skip-link:focus {
  top: calc(8px + var(--wp-admin--admin-bar--height, 0px));
  color: #fff;
  outline: 2px solid #fff;
  outline-offset: -5px;
}