/* The non-Tailwind rules that belong to ProductHeader / ProductFooter themselves.

   Loaded by every layout that renders that chrome, so it cannot lose its styling because a
   layout does not happen to load some page-specific stylesheet. That is exactly how the footer
   lost its curve on blog pages: .footer-shell lived in page-custom.css, which BlogLayout does
   not load. */

/* Menu-ProductFooter.liquid - the rounded left edge of the footer block. */
.footer-shell {
  border-radius: 300px 0 0 300px;
}

.footer-logo {
  width: 200px;
}

/* The tagline carries Tailwind's `absolute` but no inset utilities, so these ARE its position. */
.footer-tagline {
  left: 77px;
  top: 47px;
}

.footer-column-heading {
  border-bottom: 1px solid white;
}

/* Menu-ProductHeader.liquid - every pill label is sized for its BOLD text, always. menu.js adds
   font-bold to the active tab after load, and without this the label would grow at that moment and
   shove every pill to its right sideways. The hidden copy sets the width; the visible text is
   centred in it so a non-bold label still sits evenly inside its px-4. */
.nav-label {
  text-align: center;
}

.nav-label::after {
  content: attr(data-label);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 700;
}

/* ProductHeader.liquid - the EN/DE + Login group, centred against the header's height. */
.vertically-align-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}