/* The theme's Tailwind config strips every default font family except its
   brand font, so font-mono has nothing to resolve to — declared directly
   instead of relying on a compiled utility. */
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* WordPress blog content styles */
.blog-content h1, .blog-content h2, .blog-content h3, .blog-content h4, .blog-content h5, .blog-content h6 {
  color: #ffffff;
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}
/* font-size was missing above, so every level rendered at whatever size
   it happened to inherit from the surrounding prose — all identical.
   Reusing the theme's own text-* scale (rather than inventing new sizes)
   keeps this consistent with the rest of the theme; --text-heading-*
   is intentionally NOT used here since those are the large hero/section
   sizes, too big for a heading sitting inside body copy. */
.blog-content h1 { font-size: var(--text-4xl); line-height: var(--text-4xl--line-height); }
.blog-content h2 { font-size: var(--text-3xl); line-height: var(--text-3xl--line-height); }
.blog-content h3 { font-size: var(--text-2xl); line-height: var(--text-2xl--line-height); }
.blog-content h4 { font-size: var(--text-xl); line-height: var(--text-xl--line-height); }
.blog-content h5 { font-size: var(--text-lg); line-height: var(--text-lg--line-height); }
.blog-content h6 { font-size: var(--text-base); line-height: var(--text-base--line-height); }
.blog-content p { margin-bottom: 1em; }
.blog-content a { color: #c084fc; text-decoration: underline; }
.blog-content a:hover { color: #ffffff; }
.blog-content ul, .blog-content ol { padding-left: 1.5em; margin-bottom: 1em; }
.blog-content li { margin-bottom: 0.25em; }
.blog-content blockquote { border-left: 4px solid rgba(255,255,255,0.2); padding-left: 1em; margin: 1.5em 0; font-style: italic; }
.blog-content img { max-width: 100%; height: auto; border-radius: 0.5rem; }
.blog-content pre { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 0.5rem; padding: 1rem; overflow-x: auto; }
.blog-content code { background: rgba(255,255,255,0.05); padding: 0.2em 0.4em; border-radius: 0.25rem; font-size: 0.875em; }

/* Pagination */
.page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.8); margin: 0 0.25rem; transition: all 0.2s; }
.page-numbers:hover, .page-numbers.current { background: rgba(255,255,255,0.1); color: #ffffff; }

/* Navbar always on top */
header { z-index: 99999 !important; }

/* Alpine.js: hide elements until Alpine has initialized, avoiding a flash
   of visible content before x-show/x-if get a chance to evaluate. */
[x-cloak] { display: none !important; }

/* Cookie consent banner — above regular content, below the header/mobile menu. */
.jennie-cookie-consent { z-index: 9998; }

/* WordPress admin bar adjustment */
body.admin-bar header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar header { top: 46px; } }

/* Alignments for WP content */
.aligncenter { display: block; margin: 0 auto; }
.alignleft { float: left; margin-right: 1rem; }
.alignright { float: right; margin-left: 1rem; }

/* Breadcrumb banner glow (template-parts/breadcrumb.php) — a CSS radial
   gradient instead of the theme's usual fixed-width blur-*.svg images,
   because this section spans the full page width with plain dark on
   either side: a fixed-width image shows its own rectangular edge once
   the viewport is wider than the image, which reads as a hard-edged box.
   A gradient always fades to fully transparent before it can show an edge,
   at any viewport width. */
.breadcrumb-glow {
  background: radial-gradient(60% 480px at 50% 0%, rgba(134, 70, 244, 0.20) 0%, rgba(134, 70, 244, 0.08) 45%, transparent 75%);
}