/* ============================================================
   Audiomaxx — WordPress-specific layer
   Matches the brand look for content that WordPress generates
   (blog post body, pagination, comments). Uses the same --c-* vars
   defined in site.css so it tracks light/dark mode automatically.
   ============================================================ */

/* ---- Blog post body (the_content) — mirrors the static article styling ---- */
.am-prose{ color: rgb(var(--c-paper) / 0.80); font-size: 1.125rem; line-height: 1.75; }
.am-prose > *{ margin-bottom: 1.25rem; }
.am-prose h2{ color: rgb(var(--c-paper)); font-weight: 900; font-size: 1.5rem; line-height: 1.2; margin-top: 2.5rem; margin-bottom: 1rem; }
@media (min-width:768px){ .am-prose h2{ font-size: 1.875rem; } }
.am-prose h3{ color: rgb(var(--c-paper)); font-weight: 800; font-size: 1.25rem; margin-top: 2rem; margin-bottom: .75rem; }
.am-prose strong{ color: rgb(var(--c-paper)); }
.am-prose a{ color: rgb(var(--c-green)); text-decoration: underline; text-underline-offset: 3px; }
.am-prose a:hover{ color: rgb(var(--c-green-dim)); }
.am-prose ul,.am-prose ol{ padding-left: 1.4rem; }
.am-prose li{ margin-bottom: .5rem; }
.am-prose blockquote{ border-left: 3px solid rgb(var(--c-green)); padding-left: 1.25rem; color: rgb(var(--c-paper) / 0.65); font-style: italic; }
.am-prose img{ border-radius: 1rem; }
.am-prose figcaption{ color: rgb(var(--c-paper) / 0.5); font-size: .85rem; text-align: center; margin-top: .5rem; }

/* ---- Pagination ---- */
.am-pagination{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:3.5rem; }
.am-pagination .page-numbers{ font-weight:600; font-size:.9rem; padding:.55rem 1rem; border-radius:999px; border:1px solid rgb(var(--c-paper) / 0.15); color: rgb(var(--c-paper) / 0.7); transition: all .2s; }
.am-pagination .page-numbers:hover,.am-pagination .current{ background: rgb(var(--c-green)); color: rgb(var(--c-ink)); border-color: rgb(var(--c-green)); }

/* ---- Comments ---- */
.am-comments{ margin-top: 3rem; }
.am-comments ol{ list-style:none; padding:0; }
.am-comments .comment-body{ background: rgb(var(--c-surface)); border:1px solid rgb(var(--c-paper) / 0.06); border-radius: 1rem; padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.am-comments .comment-author{ font-weight: 700; }
.am-comments .comment-meta{ font-size:.8rem; color: rgb(var(--c-paper) / 0.5); margin-bottom:.5rem; }
.am-comments input[type=text],.am-comments input[type=email],.am-comments input[type=url],.am-comments textarea{
  width:100%; background: rgb(var(--c-surface)); border:1px solid rgb(var(--c-paper) / 0.15);
  color: rgb(var(--c-paper)); border-radius:.75rem; padding:.8rem 1rem; margin-bottom:1rem; font:inherit;
}
.am-comments .submit{ background: rgb(var(--c-green)); color: rgb(var(--c-ink)); font-weight:700; border:0; padding:.8rem 1.75rem; border-radius:999px; cursor:pointer; }

/* WordPress alignment helpers inside prose */
.am-prose .aligncenter{ margin-left:auto; margin-right:auto; }
.am-prose .alignleft{ float:left; margin:0 1.5rem 1rem 0; }
.am-prose .alignright{ float:right; margin:0 0 1rem 1.5rem; }
.am-prose .wp-caption{ max-width:100%; }

/* Editor canvas: match the site's base background + text color while editing */
.editor-styles-wrapper{ background-color: rgb(var(--c-ink)); color: rgb(var(--c-paper)); }