/* The button look lives in theme.json styles.elements.button. These two
   rules are here only because theme.json can't express transitions or
   :focus-visible. */
.wp-element-button {
  transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear;
}

.wp-element-button:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 1px;
}

/* Default separator = Valencia hairline. Not a picker style: the theme
   has exactly one kind of rule, so every separator gets it. The :not()
   chain mirrors core's own width rule
   (.wp-block-separator:not(.is-style-wide):not(.is-style-dots), 0,3,0)
   so this wins on specificity — core prints after the theme stylesheet,
   so a bare hr.wp-block-separator loses. */
hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
  border: none;
  border-top: 1px solid var(--wp--custom--hairline);
  background: none;
  height: auto;
  width: 100%;
  max-width: 100%;
}

/* Mobile gutter for wide-aligned blocks.

   alignwide resolves to max-width:1120px (the shell), and the theme sets
   useRootPaddingAwareAlignments:false with no root padding — so nothing
   supplies a horizontal gutter. Above 900px that is invisible, because
   the constrained parent centres the block with room to spare. On a
   phone the block tries to be 900px wide inside a 390px viewport and
   runs flush to both screen edges.

   Capping max-width alone is not enough: with no padding anywhere on
   the wide container the content still touches the edges, so the gutter
   is set here.

   Applies to every alignwide block, deliberately. A pattern that padded
   only its own wrapper would inset itself while its heading — usually
   alignwide too — stayed flush, which reads worse than the original
   problem. pattern-press-page.css caps its own list at 600px for a
   different reason (long titles overflowing a flex row); that rule is
   about overflow, this one is about the gutter, and they coexist. */
@media (max-width: 600px) {
  .alignwide {
    max-width: 100%;
    padding-left: var(--wp--preset--spacing--md);
    padding-right: var(--wp--preset--spacing--md);
  }
}

/* Print. An editorial blog gets printed; the chrome does not. The
   masthead and its overlay nav, the reveal footer (sticky, with a cover
   layer that would otherwise print as a blank page), and the sky hero
   go; the article stays, black on white, with external link targets
   spelled out after the link text. */
@media print {
  .valencia-masthead,
  .valencia-nav-overlay,
  .wp-site-blocks > footer,
  .valencia-reveal-footer,
  .valencia-sky-hero {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
  }
  a {
    color: inherit;
    text-decoration: underline;
  }
  .valencia-entry-content a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: .85em;
  }
}