/* ──────────────────────────────────────────────────────────────────────
   WordPress-specific additions.
   Kept out of style.css on purpose: that file is ordered base rules first,
   then media queries, and appending to the end of it would put new base
   rules after the queries where they can silently override them.
   ────────────────────────────────────────────────────────────────── */

/* pagination on the blog and search results */
.pager{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 12px;border-radius:12px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);
  color:var(--muted);font:500 .9rem/1 var(--body);text-decoration:none;
  transition:border-color .2s,color .2s}
.pager .page-numbers:hover{border-color:rgba(255,255,255,.22);color:var(--paper)}
.pager .page-numbers.current{border-color:transparent;background:var(--flow);color:#fff}

/* accessibility helper WordPress expects to exist */
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.screen-reader-text:focus{position:static;width:auto;height:auto;margin:0;
  clip:auto;white-space:normal;padding:10px 16px;background:#0a0a1c;color:#f3f2f9}

/* the admin bar must not sit on top of the fixed header */
body.admin-bar .nav{top:32px}
@media screen and (max-width:782px){body.admin-bar .nav{top:46px}}

/* block-editor content inside a rich-text section */
.prose img,.prose iframe{max-width:100%;height:auto;border-radius:14px;margin-top:22px}
.prose figure{margin:26px 0 0}
.prose figcaption{color:var(--dim);font-size:.85rem;margin-top:10px}
.prose blockquote{margin:26px 0 0;padding-left:20px;border-left:2px solid rgba(255,255,255,.14);color:var(--muted)}
/* a table typed into the editor. The comparison section builds its own
   table and styles it in style.css, so it is excluded here. */
.prose:not(.compare) table{width:100%;border-collapse:collapse;margin-top:24px;font-size:.92rem}
.prose:not(.compare) th,.prose:not(.compare) td{text-align:left;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);color:var(--muted)}
.prose:not(.compare) th{color:var(--paper);font-weight:600}
.alignleft{float:left;margin:0 24px 18px 0}
.alignright{float:right;margin:0 0 18px 24px}
.aligncenter{display:block;margin-left:auto;margin-right:auto}

/* the confirmation the inquiry form writes when it has sent */
.form-sent{margin-top:14px;color:var(--cyan);font-size:.92rem;line-height:1.55}
.form-sent.bad{color:#ff9a9a}

/* ──────────────────────────────────────────────────────────────────────
   Touch targets.
   Measured on a phone, three controls came in under the 36px a finger
   needs: the footer's cookie-settings button, the "what this involves"
   expander on the service pages, and the Services button in the header.
   Padding only — nothing moves on a mouse-driven screen.
   ────────────────────────────────────────────────────────────────── */
@media (pointer:coarse){
  .foot-col .as-link{display:inline-flex;align-items:center;min-height:38px}
  .detail summary{min-height:40px;padding:8px 0}
  .drop-top{min-height:40px}
  /* the one inside a sentence in the cookie policy: padding grows the hit
     area without changing the line it sits on */
  .legal-body .as-link{padding:9px 0}
}