/**
 * @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 {
  scroll-padding-top: calc(var(--header-height, 80px) + var(--block-paragraphs-menu-anchor, 60px));
  --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: 10;
}

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