/* WordPress additions to the prototype stylesheet (main.css is used unchanged). */

/* Admin bar: keep the sticky header, the mobile drawer and the in-page sub-navigation below it. */
.admin-bar .site-header { top: 32px; }
.admin-bar .nav { inset: calc(var(--header-h) + 32px) 0 0 0; }
.admin-bar .subnav { top: calc(var(--header-h) + 32px); }
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
  .admin-bar .nav { inset: calc(var(--header-h) + 46px) 0 0 0; }
  .admin-bar .subnav { top: calc(var(--header-h) + 46px); }
}
@media (max-width: 600px) { /* the admin bar scrolls away on phones */
  .admin-bar .site-header { top: 0; }
  .admin-bar .nav { inset: var(--header-h) 0 0 0; }
  .admin-bar .subnav { top: var(--header-h); }
}
@media (min-width: 1100px) { .admin-bar .nav { inset: auto; } }

/* Spam trap on forms: off-screen, still in the form. */
.rfl-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Screen-reader text used by WordPress itself. */
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.screen-reader-text:focus { clip: auto !important; clip-path: none; height: auto; width: auto; z-index: 100000; background: #fff; color: #000; padding: .8rem 1rem; }

/* Contact Form 7 inside the prototype's form styles. */
.wpcf7 .wpcf7-form-control-wrap { display: block; }
.wpcf7 .form-grid .field > .wpcf7-form-control-wrap { margin: 0; }
.wpcf7 .wpcf7-not-valid { border-color: #c0392b !important; }
.wpcf7 .wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: .84rem; color: #a12a1e; }
.wpcf7 .wpcf7-list-item { margin: 0; }
.wpcf7 .check .wpcf7-list-item label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.wpcf7 .check input[type=checkbox] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blue); flex: none; }
.wpcf7 .wpcf7-spinner { margin: 0 8px; }
.wpcf7 form .wpcf7-response-output { margin: 18px 0 0; padding: 14px 16px; border-radius: 12px; border: 0; font-weight: 600; }
.wpcf7 form.sent .wpcf7-response-output { background: #e7f8ef; color: #14663f; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { background: #fff4e5; color: #7a4a00; }
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output { background: #fdecea; color: #a12a1e; }
.wpcf7 form.sent .form-grid, .wpcf7 form.sent .check, .wpcf7 form.sent .form-actions { display: none; }

/* Built-in forms: the server's answer. */
.form-msg.is-ok:not(:empty), .form-msg.is-err:not(:empty) { display: block; }
.nl-band .form-msg.is-ok { background: rgba(61, 220, 151, .15); color: #c8f5df; }
.nl-band .form-msg.is-err { color: #ffb4a8; }

/* Content written in the editor (posts, extra pages, the Newsletter plugin's page). */
.prose .aligncenter, .prose .wp-block-image.aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.prose .alignleft { float: left; margin: .3rem 1.4rem 1rem 0; max-width: 50%; }
.prose .alignright { float: right; margin: .3rem 0 1rem 1.4rem; max-width: 50%; }
.prose img { height: auto; border-radius: var(--r); }
.prose figure { margin: 1.6rem 0; }
.prose figcaption, .prose .wp-element-caption { font-size: .875rem; color: var(--muted); margin-top: .5rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .92rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: .55rem .7rem; text-align: left; }
.prose pre { overflow: auto; padding: 1rem; border-radius: var(--r); background: #071230; color: #e3ecfb; }
.prose::after { content: ""; display: table; clear: both; }
.prose .tnp input[type=email], .prose .tnp input[type=text] { width: 100%; }
.prose .tnp input[type=submit], .prose .tnp .tnp-submit { display: inline-flex; min-height: 46px; padding: .7em 1.25em; border: 0; border-radius: 999px; background: var(--blue); color: #fff; font: 600 .95rem var(--f-body); cursor: pointer; }

/* Archive paging. */
.navigation.pagination { margin-top: 32px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.nav-links .page-numbers { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 600; }
.nav-links .page-numbers.current { background: var(--navy); border-color: var(--navy); color: #fff; }