/* Bordeaux Piles — base + component styles (loaded alongside Tailwind CDN) */

html { font-family: 'Inter', system-ui, sans-serif; }
.font-display { font-family: 'Space Grotesk', system-ui, sans-serif; letter-spacing: -0.02em; }
.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #F59E0B;
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.link-underline {
  background-image: linear-gradient(#F59E0B, #F59E0B);
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .25s ease;
}
.link-underline:hover { background-size: 100% 2px; }

/* Prose styles for single posts */
.prose h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.75rem; letter-spacing: -.02em; margin: 2.25rem 0 .75rem; scroll-margin-top: 6rem; }
.prose h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.25rem; margin: 1.75rem 0 .5rem; scroll-margin-top: 6rem; }
.prose p { line-height: 1.75; color: #334155; margin: .75rem 0; }
.prose ul { list-style: disc; padding-left: 1.25rem; color: #334155; line-height: 1.75; }
.prose ol { list-style: decimal; padding-left: 1.25rem; color: #334155; line-height: 1.75; }
.prose li { margin: .25rem 0; }
.prose a { color: #B45309; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: #92400E; }
.prose strong { color: #0B1220; }
.prose em { font-style: italic; }
.prose blockquote { border-left: 3px solid #F59E0B; padding: .25rem 0 .25rem 1.25rem; font-style: italic; color: #475569; margin: 1.5rem 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .9375rem; }
.prose th { text-align: left; background: #FAFAF9; padding: .75rem 1rem; border-bottom: 1px solid #E7E5E4; font-weight: 600; color: #0B1220; }
.prose td { padding: .75rem 1rem; border-bottom: 1px solid #E7E5E4; color: #334155; }
.prose tr:hover td { background: #FAFAF9; }
.prose figure { margin: 1.5rem 0; }
.prose figcaption { font-size: .875rem; color: #64748B; margin-top: .5rem; text-align: center; }
.prose img { border-radius: .75rem; margin: 1.5rem 0; }

/* Compat badges for equivalence table */
.compat-yes     { color: #047857; background: #D1FAE5; }
.compat-partial { color: #B45309; background: #FEF3C7; }
.compat-no      { color: #991B1B; background: #FEE2E2; }

/* WordPress core alignment classes */
.alignwide  { max-width: 1120px; margin-left: auto; margin-right: auto; }
.alignfull  { width: 100vw; position: relative; left: 50%; margin-left: -50vw; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft  { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }

/* Admin bar top spacing */
body.admin-bar header.fixed { top: calc(1rem + 32px); }
@media (max-width: 782px) { body.admin-bar header.fixed { top: calc(1rem + 46px); } }

/* Screen reader only */
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; }
.screen-reader-text:focus { background: #0B1220; color: #fff; padding: .5rem .75rem; border-radius: 6px; clip: auto !important; height: auto; width: auto; z-index: 100000; }