/* Shortcode — plugin output, dressed to match the rest of the site.

   The markup belongs to whichever plugin produced it, so this styles by
   structure (the headings and lists inside the block) rather than by the class
   names of any one plugin. WP Sitemap Page's own hooks are matched too, but
   nothing depends on them: swap the plugin and the block still looks right. */

.shortcode__out{max-width:var(--max)}
.shortcode__out > *:last-child{margin-bottom:0}

/* Section headings inside the output — "Pages", "Posts", a post type name. */
.shortcode__out h2,
.shortcode__out h3,
.shortcode__out .wsp-pages-title,
.shortcode__out .wsp-posts-title{
  font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--asphalt);
  margin:38px 0 14px;padding-bottom:10px;border-bottom:2px solid var(--line)}
.shortcode__out > *:first-child,
.shortcode__out h2:first-child,
.shortcode__out h3:first-child{margin-top:0}

.shortcode__out ul,
.shortcode__out ol{list-style:none;margin:0;padding:0}

.shortcode__out li{padding:0;margin:0}

/* One row per link, with the rule doing the separating rather than a bullet. */
.shortcode__out li a{display:block;padding:9px 0 9px 20px;position:relative;
  border-bottom:1px solid var(--line);
  font-size:16.5px;color:var(--asphalt);transition:color .15s ease,padding .15s ease}
.shortcode__out li a::before{content:"";position:absolute;left:2px;top:50%;
  width:6px;height:6px;margin-top:-3px;background:var(--red);
  transition:transform .15s ease}
.shortcode__out li a:hover,
.shortcode__out li a:focus-visible{color:var(--red);padding-left:26px}
.shortcode__out li a:hover::before{transform:scale(1.4)}

/* Nested children sit in from their parent. */
.shortcode__out li ul{margin-left:20px}

/* Columns for long indexes.

   Nothing here may set break-inside:avoid on the block's direct children:
   most sitemap plugins wrap their whole output in a single container div, and
   a lone unbreakable child cannot flow into a second column — it just sits in
   the first one and leaves the rest of the row empty. The avoid rules go on
   the lists and headings instead, which is where they are actually wanted: a
   group stays whole, and a heading never strands itself at the foot of a
   column away from its list. */
.shortcode__out--cols-2,
.shortcode__out--cols-3{column-gap:clamp(32px,4vw,64px)}
.shortcode__out--cols-2{column-count:2}
.shortcode__out--cols-3{column-count:3}
.shortcode__out--cols-2 ul,.shortcode__out--cols-2 ol,
.shortcode__out--cols-3 ul,.shortcode__out--cols-3 ol{break-inside:avoid}
.shortcode__out--cols-2 h2,.shortcode__out--cols-2 h3,
.shortcode__out--cols-3 h2,.shortcode__out--cols-3 h3{break-after:avoid;break-inside:avoid}

@media(max-width:900px){
  .shortcode__out--cols-3{column-count:2}
}
@media(max-width:620px){
  .shortcode__out--cols-2,
  .shortcode__out--cols-3{column-count:1}
}

/* Shown to editors only, when no plugin claimed the shortcode. */
.shortcode__notice{padding:16px 20px;border-left:3px solid var(--red);
  background:rgba(198,64,44,.07);font-size:15px;color:var(--steel);max-width:70ch}
.shortcode__notice code{font-size:14px;color:var(--asphalt)}