/*
 * Back 9 Spine Education Articles - front-end styles.
 * Matches the Site Installer: black / red #E32626 / white, system font stack, no external requests.
 */
body.b9e-post,
body.b9e-post #page,
body.b9e-post .site,
body.b9e-post .site-content,
body.b9e-post #content {
  background: #0b0b0b !important;
  color: #fff;
}
body.b9e-post .entry-header,
body.b9e-post .post-thumbnail,
body.b9e-post .entry-footer,
body.b9e-post .post-navigation,
body.b9e-post #comments,
body.b9e-post .comments-area,
body.b9e-post .widget-area,
body.b9e-post #secondary,
body.b9e-post .entry-meta,
body.b9e-post .page-header { display: none !important; }
body.b9e-post .site-main,
body.b9e-post main,
body.b9e-post article.post,
body.b9e-post .entry-content,
body.b9e-post .hentry {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.b9e, .b9e *, .b9e *::before, .b9e *::after { box-sizing: border-box; }
.b9e {
  --b9-red: #e32626;
  --b9-red-h: #ff3b3b;
  --b9-red-t: #ff5252;
  --b9-card: #1a1a1a;
  --b9-border: #2a2a2a;
  --b9-muted: #c4c4c4;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #fff;
  background: #0b0b0b;
  line-height: 1.65;
  padding: 2.5rem 1rem 3rem;
  -webkit-font-smoothing: antialiased;
}
.b9e .b9e-article, .b9e.b9e-related > *, .b9e.b9e-hub > * { width: min(100%, 760px); margin-inline: auto; }
.b9e.b9e-hub { padding-bottom: 4rem; }
.b9e.b9e-hub > .b9e-eyebrow, .b9e.b9e-hub > h2, .b9e.b9e-hub > p, .b9e.b9e-hub > section { width: min(100%, 1060px); }

.b9e h1, .b9e h2, .b9e h3, .b9e h4 { color: #fff; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.b9e h1.b9e-title { font-size: clamp(1.9rem, 6vw, 3rem); text-transform: uppercase; margin: 0 0 0.5rem; }
.b9e h2 { font-size: clamp(1.3rem, 3.6vw, 1.75rem); margin: 2.25rem 0 0.75rem; }
.b9e h3 { font-size: 1.3rem; margin: 2rem 0 0.4rem; }
.b9e h4 { font-size: 1.05rem; margin: 0 0 0.5rem; text-transform: none; }
.b9e p { color: var(--b9-muted); margin: 0 0 1.05em; font-size: 1.04rem; }
.b9e ul, .b9e ol { margin: 0 0 1.2em; padding: 0; list-style: none; }
.b9e .b9e-body ul li {
  position: relative; padding-left: 1.4rem; margin-bottom: 0.55rem; color: var(--b9-muted);
}
.b9e .b9e-body ul li::before {
  content: ""; position: absolute; left: 0; top: 0.7em; width: 0.5rem; height: 0.5rem;
  background: var(--b9-red); border-radius: 50%;
}
.b9e strong { color: #fff; }
.b9e a, .b9e a:visited { color: #fff; text-decoration: underline; text-decoration-color: var(--b9-red); text-underline-offset: 3px; }
.b9e a:hover { color: var(--b9-red-h); }
.b9e a:focus-visible, .b9e summary:focus-visible { outline: 2px solid var(--b9-red); outline-offset: 3px; }

.b9e .b9e-crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.85rem; margin-bottom: 1.2rem; color: #9a9a9a; }
.b9e .b9e-crumbs a { color: #c4c4c4; text-decoration: none; }
.b9e .b9e-crumbs a:hover { text-decoration: underline; }
.b9e .b9e-eyebrow {
  display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--b9-red-t); margin: 0 0 0.75rem;
}
.b9e .b9e-meta { font-size: 0.88rem; color: #9a9a9a; margin-bottom: 1.6rem; }

.b9e .b9e-quick {
  background: linear-gradient(145deg, #1a1a1a, #101010);
  border: 1px solid rgba(227, 38, 38, 0.5);
  border-left: 5px solid var(--b9-red);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  margin: 0 0 1.25rem;
  box-shadow: 0 6px 28px rgba(227, 38, 38, 0.12);
}
.b9e .b9e-quick p { margin: 0; color: #f0f0f0; font-size: 1.1rem; }
.b9e .b9e-quick p.b9e-quick__label, .b9e .b9e-redflag p.b9e-redflag__label {
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--b9-red-t); margin: 0 0 0.45rem;
}
.b9e .b9e-redflag {
  background: rgba(227, 38, 38, 0.07);
  border: 1px solid rgba(227, 38, 38, 0.4);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin: 0 0 2rem;
}
.b9e .b9e-redflag p { margin: 0; font-size: 0.95rem; color: #e2e2e2; }

.b9e .b9e-faq details {
  background: var(--b9-card); border: 1px solid var(--b9-border); border-radius: 8px; margin-bottom: 0.7rem;
}
.b9e .b9e-faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.05rem 1.2rem; font-weight: 700; color: #fff;
}
.b9e .b9e-faq summary::-webkit-details-marker { display: none; }
.b9e .b9e-faq summary::after { content: "+"; color: var(--b9-red); font-size: 1.5rem; font-weight: 400; line-height: 1; }
.b9e .b9e-faq details[open] summary::after { content: "\2212"; }
.b9e .b9e-faq details[open] { border-color: rgba(227, 38, 38, 0.45); }
.b9e .b9e-faq details p { padding: 0 1.2rem 1.2rem; margin: 0; }

.b9e .b9e-sources {
  border-top: 1px solid var(--b9-border); margin-top: 2.5rem; padding-top: 0.5rem;
}
.b9e .b9e-sources ol { counter-reset: src; }
.b9e .b9e-sources li {
  counter-increment: src; position: relative; padding: 0.6rem 0 0.6rem 2.2rem; border-bottom: 1px solid #1f1f1f;
  color: var(--b9-muted); font-size: 0.95rem; overflow-wrap: anywhere;
}
.b9e .b9e-sources li::before {
  content: counter(src); position: absolute; left: 0; top: 0.6rem; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; background: var(--b9-red); color: #fff; font-size: 0.78rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.b9e .b9e-src-pub { color: #fff; font-weight: 700; }
.b9e .b9e-small { font-size: 0.88rem !important; color: #9a9a9a !important; }

.b9e .b9e-cta {
  margin-top: 2.5rem; padding: 1.5rem; border-radius: 14px; background: #141414; border: 1px solid var(--b9-border);
}
.b9e .b9e-cta h2 { margin-top: 0; }
.b9e .b9e-cta__row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.b9e a.b9e-btn, .b9e a.b9e-btn:visited {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none;
  padding: 0.9rem 1.4rem; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.03em; text-transform: uppercase;
  border-radius: 999px; border: 2px solid transparent; color: #fff;
}
.b9e a.b9e-btn em { font-style: normal; opacity: 0.8; margin-left: 0.35em; text-transform: none; font-weight: 600; }
.b9e a.b9e-btn--p { background: var(--b9-red); box-shadow: 0 4px 22px rgba(227, 38, 38, 0.28); }
.b9e a.b9e-btn--p:hover { background: var(--b9-red-h); color: #fff; }
.b9e a.b9e-btn--s { background: transparent; border-color: #444; }
.b9e a.b9e-btn--s:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.05); }
@media (max-width: 520px) { .b9e .b9e-cta__row a { width: 100%; } }

.b9e .b9e-disclaimer { margin-top: 1.5rem; font-size: 0.88rem !important; color: #9a9a9a !important; border-left: 3px solid var(--b9-red); padding-left: 0.9rem; }

/* Related articles */
.b9e.b9e-related { padding-top: 0; padding-bottom: 3rem; }
.b9e.b9e-related h2 { margin-top: 0; }
.b9e.b9e-related ul li { padding: 0.75rem 1rem; margin-bottom: 0.5rem; background: var(--b9-card); border: 1px solid var(--b9-border); border-radius: 8px; }
.b9e .b9e-draft-tag { display: inline-block; margin-left: 0.4rem; font-size: 0.75rem; color: var(--b9-red-t); }

/* Hub */
.b9e-hub__cluster { margin-top: 2.25rem; }
.b9e-hub__grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; margin-top: 1rem; }
@media (min-width: 700px) { .b9e-hub__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .b9e-hub__grid { grid-template-columns: repeat(3, 1fr); } }
.b9e .b9e-card {
  display: flex; flex-direction: column; background: var(--b9-card); border: 1px solid var(--b9-border);
  border-top: 3px solid var(--b9-red); border-radius: 14px; padding: 1.2rem;
}
.b9e .b9e-card h4 a { text-decoration: none; }
.b9e .b9e-card h4 a:hover { text-decoration: underline; }
.b9e .b9e-card p { font-size: 0.95rem; }
.b9e .b9e-card .b9e-card__more { margin: auto 0 0; padding-top: 0.5rem; font-weight: 700; font-size: 0.88rem; }
.b9e .b9e-card .b9e-card__more a { color: var(--b9-red-h); text-decoration: none; }
.b9e.b9e-hub--empty { text-align: center; padding: 3rem 1rem; }
.b9e.b9e-hub--empty > * { margin-inline: auto; }

/* ---------- 1.1.6: readability - bright white body text, brand-red links ---------- */
/* Scoped to .b9e (education articles, related list, hub, category archive only). Buttons untouched. */
.b9e { --b9-text: #f5f5f5; --b9-link: #ff5252; --b9-link-h: #ff7a7a; }
.b9e,
.b9e p,
.b9e li,
.b9e .b9e-body ul li,
.b9e .b9e-body ol li,
.b9e .b9e-sources li,
.b9e dd, .b9e dt,
.b9e td, .b9e th, .b9e caption,
.b9e figcaption, .b9e .wp-caption-text,
.b9e blockquote,
.b9e .b9e-quick p,
.b9e .b9e-redflag p,
.b9e .b9e-faq details p,
.b9e .b9e-faq summary,
.b9e .b9e-card p,
.b9e .b9e-meta,
.b9e .b9e-crumbs { color: var(--b9-text); }
.b9e .b9e-small,
.b9e .b9e-disclaimer { color: var(--b9-text) !important; }
.b9e h1, .b9e h2, .b9e h3, .b9e h4, .b9e h5, .b9e h6, .b9e strong, .b9e b { color: #fff; }
.b9e table { border-collapse: collapse; width: 100%; margin: 0 0 1.2em; }
.b9e th, .b9e td { border: 1px solid var(--b9-border); padding: 0.55rem 0.7rem; text-align: left; }
.b9e th { background: var(--b9-card); }

/* In-content text links: brand red tuned for AA on #0b0b0b (6.17:1), always underlined. */
.b9e a:not(.b9e-btn),
.b9e a:not(.b9e-btn):visited {
  color: var(--b9-link);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.b9e a:not(.b9e-btn):hover,
.b9e a:not(.b9e-btn):focus-visible { color: var(--b9-link-h); text-decoration-thickness: 2px; }
/* Navigation-style and heading links stay white (underline on hover). */
.b9e .b9e-crumbs a, .b9e .b9e-crumbs a:visited,
.b9e .b9e-card h4 a, .b9e .b9e-card h4 a:visited { color: #fff; text-decoration: none; }
.b9e .b9e-crumbs a:hover, .b9e .b9e-card h4 a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--b9-link); }
.b9e .b9e-card .b9e-card__more a { color: var(--b9-link); text-decoration: none; }
.b9e .b9e-card .b9e-card__more a:hover { color: var(--b9-link-h); text-decoration: underline; }

/* 1.1.7: force readable white body text over theme paragraph colors */
.b9e p, .b9e li, .b9e dd, .b9e dt, .b9e td, .b9e th, .b9e blockquote,
.b9e figcaption, .b9e .b9e-meta, .b9e .b9e-faq summary { color: #f5f5f5 !important; }
.b9e p a:not(.b9e-btn), .b9e li a:not(.b9e-btn), .b9e td a:not(.b9e-btn) { color: #ff5252 !important; }
.b9e p a:not(.b9e-btn):hover, .b9e li a:not(.b9e-btn):hover { color: #ff7a7a !important; }