/*
Theme Name: GenAuthority
Theme URI: https://genauthority.com
Author: GenAuthority
Description: Matches the genauthority.com marketing site exactly, so /blog does not read as a different company. The shared design system is assets/site.css, copied verbatim from the Astro site's global.css by sync-theme.sh; everything below is only what WordPress needs on top of it.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
License: Proprietary
Text Domain: genauthority
*/

/* ============================================================
   Blog-only styles.
   The header, footer, buttons, typography and colour tokens all
   come from assets/site.css. Nothing in this file may redefine
   them, or the two halves of the site drift apart again.
   ============================================================ */

.blog-hero {
  padding: 3.5rem 0 2rem;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.blog-hero h1 {
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.blog-hero p.lead {
  max-width: 60ch;
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 1.05rem;
}

.blog-wrap {
  padding: 3rem 0 4rem;
}

/* Long-form measure. The marketing container is 1140px, which is far too wide
   to read a paragraph across. */
.container-narrow {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---- Post grid ---- */

.cat-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.cat-pill {
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--fg-2);
}
.cat-pill:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.cat-pill.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}

/* auto-fill rather than a fixed count: two up on a laptop, one on a phone,
   and it never leaves a lone card stretched across the full width. */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.25rem;
}

.post-card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
.post-card > a:hover {
  border-color: var(--brand);
  box-shadow: 0 8px 24px -14px rgba(234, 88, 12, 0.5);
  transform: translateY(-2px);
}
.post-card h2 {
  margin: 0.6rem 0 0.5rem;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.post-card p {
  margin: 0;
  color: var(--fg-2);
  font-size: 0.94rem;
}
.post-more {
  margin-top: 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand);
}

/* The newest post takes the full row and a larger headline. */
.post-card.is-lead {
  grid-column: 1 / -1;
}
.post-card.is-lead > a {
  padding: 2.25rem;
  background: var(--bg-soft);
}
.post-card.is-lead h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -0.025em;
}
.post-card.is-lead p {
  max-width: 62ch;
  font-size: 1.02rem;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
}
.post-tag {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}

.blog-empty {
  max-width: 46ch;
  padding: 3rem 0;
}
.blog-empty h2 {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}
.blog-empty p {
  margin: 0.6rem 0 1.5rem;
  color: var(--muted);
}

.back-link {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}
.back-link:hover {
  color: var(--brand);
}

/* ---- Single post ---- */

.post-header h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin-bottom: 0.6rem;
}

/* WordPress inserts its own wrappers around content; give them the same
   treatment the Astro pages give .prose so an article reads identically. */
.entry-content code {
  padding: 0.12em 0.38em;
  border-radius: 5px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.85em;
}
.entry-content pre {
  margin: 1.2rem 0;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--panel-fg);
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.6;
}
.entry-content pre code {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
}
.entry-content blockquote {
  margin: 1.2rem 0;
  padding: 0.1rem 0 0.1rem 1rem;
  border-left: 3px solid var(--brand);
  color: var(--fg-2);
}
.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* Screenshots in the body. Ours are a light UI on a light page, so without a
   border they float with no edge and read as part of the article rather than
   as a picture of the product. */
.entry-content figure {
  margin: 1.8rem 0;
}
.entry-content figure img {
  display: block;
  width: 100%;
  border: 1px solid var(--border);
}
.entry-content figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}
/* A wide table must scroll inside itself rather than pushing the page sideways. */
.table-scroll {
  overflow-x: auto;
  margin: 1.4rem 0;
}

/* ---- Pagination ---- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 2.5rem;
}
.pagination .page-numbers {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--fg-2);
}
.pagination .page-numbers:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.pagination .page-numbers.current {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}

/* ---- Admin bar ----
   WordPress pins its toolbar with a fixed 32px offset on <html>. Our header is
   also fixed, so without this the two overlap for a logged-in editor. */
html[class*="admin-bar"] .nav {
  top: 32px;
}
@media (max-width: 782px) {
  html[class*="admin-bar"] .nav {
    top: 46px;
  }
}

/* ---- Featured images ---- */

.post-hero-image {
  padding: 2.5rem 0 0;
}
.post-hero-image img {
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* On a card the image sits flush inside the padded link, so it is pulled out to
   the card edges and only the top corners are rounded. */
.post-card-image {
  margin: -1.6rem -1.6rem 1.1rem;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}
.post-card-image img {
  display: block;
  width: 100%;
  height: auto;
}
.post-card.is-lead .post-card-image {
  margin: -2.25rem -2.25rem 1.4rem;
}

/* An in-table call to action. Small enough to sit in a cell without breaking
   the row rhythm, and only used for our own row: linking a competitor's trial
   as a button would read as an endorsement we are not making. */
/* Qualified with .entry-content and the tag, because the shared stylesheet sets
   `.prose a { color: var(--brand) }` at (0,1,1) and a bare `.btn-inline` at
   (0,1,0) loses to it. Unqualified, the label rendered orange on the orange
   pill and the button was invisible on the live page. */
.entry-content a.btn-inline {
  display: inline-block;
  text-decoration: none;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.entry-content a.btn-inline:hover {
  background: var(--brand-2);
  color: #fff;
}
.entry-content .table-note {
  margin-top: -0.7rem;
  font-size: 0.82rem;
  color: var(--muted);
}