/* asquared · Grid Typography: what WordPress adds (wp.css).

   The prototype's stylesheets (style.css, pages.css and each page's own)
   are used as they are. This file only covers what exists in WordPress and
   not in the prototype: WordPress's own class names in content and markup
   the theme renders differently because it has to work without JS. */

/* WordPress's visually hidden text (core markup, old content): as .vh */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- the blog's filter without JS (inc/templates/grid/blog-list.php) ----------
   The topics are links to their archives and the search box submits a
   WordPress search, so the filter works with JS off and on the archives.
   On the posts page blog.js turns the links into the prototype's toggle
   buttons. A link looks like its button, the current one like a pressed one. */
a.bi-tbtn,
a.bi-reset { display: inline-block; text-decoration: none; }
a.bi-tbtn { color: inherit; }
.bi-tbtn[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.bi-tbtn[aria-current="page"] .num { color: inherit; }

/* ---------- the Contact form, sent through Contact Form 7 (template-contact.php) ----------
   A field no person sees or reaches (a value in it marks spam). Without JS the
   desk line cannot follow the topic, so the note under the button says where
   each topic goes instead. While the message is sent the button waits. */
.ct-hp {
  position: absolute !important;
  left: -10000px;
  width: 1px; height: 1px;
  overflow: hidden;
}
html:not(.js) .ct-form[data-mode="cf7"] .ct-to { display: none; }
.ct-form[aria-busy="true"] .ct-submit { cursor: progress; }

/* ---------- page not found (404.php) ----------
   The blog's head (the title on its field, the note on columns 4-8) and the
   article's rows (article.css .a-more). */
.nf-copy { grid-column: 1 / -1; }
@media (min-width: 640px) { .nf-copy { grid-column: 2 / -1; } }
@media (min-width: 1024px) { .nf-copy { grid-column: 4 / -1; } }

/* ---------- the article's content in WordPress (article.css stays as it is) ----------
   The gallery block prints its own gap for each gallery (core-block-supports,
   .wp-block-gallery.wp-block-gallery-N, 0.5em), which ties with article.css
   and comes later: the gallery keeps the design's one-unit gap. */
.entry-content .wp-block-gallery.has-nested-images { gap: var(--gap); }

/* theme.json's fifth size, xx-large (article.css sets small to x-large):
   the x-large preset's display setting, a step up */
.entry-content .has-xx-large-font-size {
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.034em;
  text-wrap: balance;
}

/* The old posts, drawn as the prototype draws its cleaned copy of them
   (_content/README.md): a heading wrapped whole in <strong> keeps the
   heading's weight, and the old theme's highlight is the design's one
   highlight (mark). */
.entry-content :is(h1, h2, h3, h4, h5, h6) :is(strong, b) { font-weight: inherit; }
.entry-content .asquared-highlight {
  padding: 0 0.16em;
  background: var(--ink);
  color: var(--ground);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}