/*
Theme Name: benj.io
Theme URI: https://benj.io/
Author: Benj Roberts
Description: Custom editorial WordPress theme for benj.io, built around the b/ identity.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: benj-io
*/

@import url("assets/css/site.css");

.wp-site-blocks { min-height: 100vh; }
.admin-bar .site-header { top: 32px; }
.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 { width: auto; height: auto; margin: 0; clip: auto; padding: 10px 14px; z-index: 100000; background: var(--yellow); color: var(--ink); }

.wp-nav-menu { display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; list-style: none; }
.wp-nav-menu a { position: relative; color: var(--graphite); text-decoration: none; font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.wp-nav-menu a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 3px; background: var(--ultramarine); transition: right 160ms ease; }
.wp-nav-menu a:hover::after, .wp-nav-menu .current-menu-item a::after { right: 0; }

.post-card-image { aspect-ratio: 16 / 9; margin: -28px -28px 22px; overflow: hidden; border-radius: 21px 21px 0 0; }
.post-card-image img { width: 100%; height: 100%; object-fit: cover; }
.content-badge { display: inline-flex; }
.category-links { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.category-links a { color: inherit; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.category-filter a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 15px; border: 1px solid var(--line); border-radius: 999px; background-color: var(--white); background-image: var(--plaster-texture); color: var(--graphite); text-decoration: none; font-size: .72rem; font-weight: 760; letter-spacing: .055em; text-transform: uppercase; }
.category-filter a:hover { border-color: var(--ultramarine); color: var(--ultramarine); }
.pagination { margin-top: 40px; display: flex; justify-content: space-between; gap: 20px; }
.pagination a { font-weight: 800; }

.article-body > * { max-width: 100%; }
.article-body img { border-radius: 18px; }
.article-body h2, .article-body h3 { font-family: "Onest", sans-serif; line-height: 1.08; letter-spacing: -.035em; }
.article-body h2 { margin-top: 2em; font-size: 2.1rem; }
.article-body h3 { margin-top: 1.8em; font-size: 1.5rem; }
.article-body a { text-decoration-color: var(--crimson); text-underline-offset: 4px; }
.article-body .wp-block-image { margin: 2.2em 0; }
.article-body .wp-block-pullquote { border: 0; padding: 0; }

.paid-gate { margin: 34px 0 80px; padding: 30px; border-radius: 20px; background: var(--ultramarine); color: var(--chalk); }
.paid-gate h2 { margin: 0 0 12px; font: 650 2rem/1.05 "Onest", sans-serif; letter-spacing: -.04em; }
.paid-gate p { color: #e1e3e9; }
.paid-gate .button { margin-top: 10px; }

.footer-links .menu { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 18px; margin: 0; padding: 0; list-style: none; }
.footer-links .menu a { color: #c7c9d1; text-decoration: none; }

@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 680px) {
  .wp-nav-menu { position: absolute; top: 78px; left: 0; right: 0; display: none; padding: 24px 20px 30px; flex-direction: column; align-items: flex-start; background: var(--chalk); border-bottom: 1px solid var(--line); }
  .wp-nav-menu.open { display: flex; }
  .footer-links .menu { justify-content: flex-start; }
}