/**
 * @file
 * Base styles for the Paragraphs Menu Anchor block.
 *
 * Only structural/behavioral CSS is provided here. Visual styles
 * (colors, typography, responsive show/hide) belong in the theme.
 */

html {
  --block-paragraphs-menu-anchor: 60px;

  @media (max-width: 768px) {
    --block-paragraphs-menu-anchor: 38px;
  }
}

.region:has(> .block-paragraphs-menu-anchor) {
  position: sticky;
  top: var(--header-height, 20px);
  z-index: 100;
}

/* Sticky positioning for the anchor navigation bar. */
.block-paragraphs-menu-anchor {
  position: sticky;
  top: var(--header-height, 20px);
  z-index: 100;
  display: flex !important;
  align-items: center;
  height: var(--block-paragraphs-menu-anchor, 60px);
}

.pma-link-list {
  display: flex;
  justify-content: center;
}

/**
 * Active link state — applied by pma-scroll-spy.js.
 * Override in your theme with higher specificity.
 */
.pma-link-list a.is-active {
  font-weight: 700;
}

.pma--mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .pma--desktop-only {
    display: none;
  }

  .pma--mobile-only {
    display: block;
  }
}



.block-paragraphs-menu-anchor .container a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 1rem;
  height: 28px;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  border-radius: 0.375rem;
  /* transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); */
  white-space: nowrap;
  /* color: hsl(var(--foreground)); */
}

.block-paragraphs-menu-anchor .container a.is-active {
  background-color: hsl(var(--accent));
  /*
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.25rem;
    text-decoration-thickness: 2px;
    */
}

.pma-select {
  width: 100%;
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 0.375rem;
}

.pma-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--accent));
}