/*
Theme Name: AiBrainWorX Observatory
Theme URI: https://aibrainworx.com/
Author: AiBrainWorX
Description: Human-first, app-inspired editorial theme for AiBrainWorX.
Version: 1.0.0
Text Domain: aibrainworx
*/

:root {
  --abx-bg: #05090d;
  --abx-surface: #0a1118;
  --abx-surface-2: #0e1822;
  --abx-line: #203442;
  --abx-line-bright: #2f566b;
  --abx-text: #f4f8fb;
  --abx-muted: #9bb0c0;
  --abx-cyan: #35c8ff;
  --abx-cyan-soft: #8edfff;
  --abx-amber: #ff9e2b;
  --abx-yellow: #ffd23f;
  --abx-violet: #9a7cff;
  --abx-green: #27df91;
  --abx-max: 1240px;
  --abx-reading: 820px;
  --abx-header: 72px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--abx-text);
  background-color: var(--abx-bg);
  background-image:
    linear-gradient(rgba(53, 200, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 200, 255, .04) 1px, transparent 1px),
    radial-gradient(circle at 76% -10%, rgba(53, 200, 255, .13), transparent 34%),
    radial-gradient(circle at 8% 30%, rgba(255, 158, 43, .07), transparent 28%);
  background-size: 28px 28px, 28px 28px, auto, auto;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  min-height: 100vh;
}

a { color: var(--abx-cyan-soft); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #fff; }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px; overflow: hidden; position: absolute !important; width: 1px;
}
.screen-reader-text:focus {
  clip: auto !important; clip-path: none; height: auto; width: auto;
  left: 12px; top: 12px; z-index: 100000; padding: 10px 14px;
  color: #00131c; background: var(--abx-cyan); font-weight: 800;
}

.abx-shell { width: min(calc(100% - 40px), var(--abx-max)); margin-inline: auto; }
.abx-site-header {
  position: sticky; top: 0; z-index: 1000;
  min-height: var(--abx-header);
  border-bottom: 1px solid var(--abx-line);
  background: rgba(4, 8, 12, .94);
  backdrop-filter: blur(16px);
}
.admin-bar .abx-site-header { top: 32px; }
.abx-header-inner { min-height: var(--abx-header); display: flex; align-items: center; gap: 28px; }
.abx-brand { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; flex: 0 0 auto; }
.abx-mark { width: 39px; height: 39px; color: var(--abx-cyan); filter: drop-shadow(0 0 12px rgba(53,200,255,.22)); }
.abx-wordmark { display: flex; align-items: baseline; letter-spacing: -.035em; font-size: 1.25rem; font-weight: 850; line-height: 1; }
.abx-wordmark span { color: var(--abx-amber); }
.abx-wordmark em { margin-left: 6px; color: var(--abx-cyan-soft); font: 700 .54rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .18em; text-transform: uppercase; }
.abx-nav { margin-left: auto; display: flex; align-items: center; }
.abx-nav ul { display: flex; align-items: center; gap: 5px; margin: 0; padding: 0; list-style: none; }
.abx-nav a {
  display: block; padding: 11px 13px; border: 1px solid transparent;
  color: #bfd0dc; font: 800 .77rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-decoration: none; text-transform: uppercase; letter-spacing: .08em;
}
.abx-nav a:hover, .abx-nav .current-menu-item > a, .abx-nav .current_page_item > a {
  color: #fff; border-color: var(--abx-line-bright); background: rgba(53,200,255,.07);
}
.abx-header-status { display: flex; align-items: center; gap: 8px; color: #a9becd; font: 700 .64rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; letter-spacing: .08em; }
.abx-header-status::before { content: ""; width: 8px; height: 8px; background: var(--abx-green); box-shadow: 0 0 12px rgba(39,223,145,.75); }
.abx-menu-button { display: none; margin-left: auto; width: 44px; height: 40px; border: 1px solid var(--abx-line-bright); color: #fff; background: var(--abx-surface); cursor: pointer; }
.abx-menu-button span { display: block; width: 20px; height: 2px; margin: 4px auto; background: currentColor; }

.abx-main { min-height: calc(100vh - 190px); }
.abx-kicker { margin: 0 0 12px; color: var(--abx-cyan-soft); font: 800 .71rem/1.25 ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; letter-spacing: .18em; }
.abx-kicker::before { content: "// "; color: var(--abx-amber); }
.abx-hero { padding: clamp(58px, 8vw, 112px) 0 42px; overflow: hidden; }
.abx-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: clamp(34px, 6vw, 88px); align-items: center; }
.abx-hero h1 { max-width: 900px; margin: 0; font-size: clamp(3.1rem, 7vw, 6.7rem); line-height: .93; letter-spacing: -.065em; }
.abx-hero h1 span { color: var(--abx-cyan); text-shadow: 0 0 35px rgba(53,200,255,.2); }
.abx-hero-copy { max-width: 720px; margin: 27px 0 0; color: #b7c8d4; font-size: clamp(1.05rem, 1.8vw, 1.3rem); }
.abx-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 31px; }
.abx-button, .wp-block-button__link, input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; min-height: 47px; padding: 0 19px;
  border: 1px solid var(--abx-cyan); border-radius: 0;
  color: #00131c; background: var(--abx-cyan);
  font: 850 .77rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  box-shadow: 5px 5px 0 rgba(53,200,255,.12);
}
.abx-button:hover, .wp-block-button__link:hover, input[type="submit"]:hover { color: #fff; background: transparent; }
.abx-button--ghost { color: #eaf6fb; background: rgba(10,17,24,.75); border-color: var(--abx-line-bright); box-shadow: none; }
.abx-button--ghost:hover { border-color: var(--abx-amber); }
.abx-brain-panel { position: relative; min-height: 390px; display: grid; place-items: center; border: 1px solid var(--abx-line); background: linear-gradient(145deg, rgba(15,27,37,.94), rgba(5,10,14,.88)); box-shadow: 14px 14px 0 rgba(0,0,0,.28); overflow: hidden; }
.abx-brain-panel::before, .abx-brain-panel::after { content: ""; position: absolute; width: 140%; height: 1px; background: linear-gradient(90deg, transparent, var(--abx-cyan), transparent); opacity: .35; transform: rotate(-26deg); }
.abx-brain-panel::after { transform: rotate(29deg); }
.abx-orbit { width: 235px; aspect-ratio: 1; position: relative; border: 1px solid rgba(53,200,255,.35); border-radius: 50%; animation: abx-spin 28s linear infinite; }
.abx-orbit::before, .abx-orbit::after { content: ""; position: absolute; inset: 27px; border: 1px dashed rgba(255,158,43,.65); border-radius: 50%; }
.abx-orbit::after { inset: 72px; border-style: solid; border-color: rgba(154,124,255,.65); }
.abx-node { position: absolute; width: 18px; height: 18px; background: var(--abx-cyan); box-shadow: 0 0 20px rgba(53,200,255,.55); }
.abx-node:nth-child(1) { left: 6px; top: 105px; }
.abx-node:nth-child(2) { right: 22px; top: 38px; background: var(--abx-amber); }
.abx-node:nth-child(3) { right: 39px; bottom: 25px; background: var(--abx-violet); }
.abx-node:nth-child(4) { left: 72px; bottom: -7px; background: var(--abx-yellow); }
.abx-core { position: absolute; inset: 50%; width: 68px; height: 68px; transform: translate(-50%,-50%); display: grid; place-items: center; background: #08121a; border: 2px solid var(--abx-cyan); box-shadow: 0 0 40px rgba(53,200,255,.3); font: 900 .62rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; }
.abx-panel-label { position: absolute; left: 18px; bottom: 16px; color: #7f9caf; font: 700 .62rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
@keyframes abx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .abx-orbit { animation: none; } }

.abx-signal-strip { border-block: 1px solid var(--abx-line); background: rgba(7,13,18,.88); }
.abx-signal-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.abx-signal { padding: 21px 24px; border-right: 1px solid var(--abx-line); }
.abx-signal:first-child { border-left: 1px solid var(--abx-line); }
.abx-signal strong { display: block; margin-bottom: 4px; color: #fff; font-size: 1rem; }
.abx-signal span { color: var(--abx-muted); font: 650 .68rem/1.35 ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; letter-spacing: .08em; }
.abx-signal i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; background: var(--abx-green); box-shadow: 0 0 8px rgba(39,223,145,.6); }

.abx-section { padding: clamp(58px, 7vw, 92px) 0; }
.abx-section-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 27px; }
.abx-section-head h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1; letter-spacing: -.045em; }
.abx-section-head p { max-width: 560px; margin: 0; color: var(--abx-muted); }
.abx-app-card { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); border: 1px solid var(--abx-line-bright); background: rgba(8,15,21,.92); overflow: hidden; }
.abx-app-visual { min-height: 430px; background: #05090d; border-right: 1px solid var(--abx-line); }
.abx-app-visual img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.abx-app-copy { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; }
.abx-app-copy h3 { margin: 0 0 17px; font-size: clamp(2rem, 4vw, 3.3rem); line-height: .98; letter-spacing: -.045em; }
.abx-app-copy p { color: #b5c6d2; }
.abx-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 8px; }
.abx-tag { padding: 7px 9px; color: var(--abx-cyan-soft); border: 1px solid var(--abx-line-bright); background: #09131a; font: 800 .62rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; letter-spacing: .08em; }

.abx-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.abx-post-card { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--abx-line); background: linear-gradient(150deg, rgba(13,23,31,.97), rgba(6,11,16,.97)); transition: border-color .18s ease, transform .18s ease; }
.abx-post-card:hover { border-color: var(--abx-cyan); transform: translateY(-3px); }
.abx-post-card__image { display: block; aspect-ratio: 16/9; overflow: hidden; border-bottom: 1px solid var(--abx-line); background: #0b151d; }
.abx-post-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.abx-post-card:hover .abx-post-card__image img { transform: scale(1.025); }
.abx-post-card__placeholder { width: 100%; height: 100%; display: grid; place-items: center; background-image: linear-gradient(135deg, rgba(53,200,255,.09), transparent 40%), repeating-linear-gradient(90deg, transparent 0 30px, rgba(53,200,255,.04) 30px 31px); color: var(--abx-cyan); font: 900 2.3rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.abx-post-card__body { display: flex; flex: 1; flex-direction: column; padding: 23px; }
.abx-post-card__meta, .abx-entry-meta { color: var(--abx-cyan-soft); font: 750 .64rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.abx-post-card h3 { margin: 13px 0 12px; font-size: 1.35rem; line-height: 1.18; letter-spacing: -.025em; }
.abx-post-card h3 a { color: #fff; text-decoration: none; }
.abx-post-card p { margin: 0 0 20px; color: var(--abx-muted); font-size: .92rem; }
.abx-read-link { margin-top: auto; color: var(--abx-amber); font: 850 .68rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; text-decoration: none; text-transform: uppercase; letter-spacing: .09em; }

.abx-manifesto { border-block: 1px solid var(--abx-line); background: linear-gradient(90deg, rgba(53,200,255,.07), rgba(255,158,43,.05)); }
.abx-manifesto-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(30px, 7vw, 100px); align-items: center; padding-block: clamp(55px, 7vw, 88px); }
.abx-manifesto h2 { margin: 0; font-size: clamp(2.4rem, 5vw, 4.8rem); line-height: .95; letter-spacing: -.055em; }
.abx-manifesto h2 span { color: var(--abx-amber); }
.abx-manifesto-copy { color: #c4d2dc; font-size: clamp(1.05rem, 1.8vw, 1.25rem); }
.abx-values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 26px; }
.abx-value { padding: 14px 15px; border-left: 3px solid var(--abx-cyan); background: rgba(4,9,13,.55); }
.abx-value:nth-child(2), .abx-value:nth-child(4) { border-color: var(--abx-amber); }
.abx-value strong { display: block; color: #fff; }
.abx-value span { color: var(--abx-muted); font-size: .82rem; }

.abx-page-head { padding: clamp(50px, 7vw, 86px) 0 32px; border-bottom: 1px solid var(--abx-line); }
.abx-page-head h1 { max-width: 1050px; margin: 0; font-size: clamp(2.8rem, 6.5vw, 5.8rem); line-height: .98; letter-spacing: -.055em; overflow-wrap: anywhere; }
.abx-page-head .abx-entry-meta { margin-top: 21px; }
.abx-feature-image { width: min(calc(100% - 40px), var(--abx-max)); margin: 32px auto 0; border: 1px solid var(--abx-line-bright); background: #091119; }
.abx-feature-image img { width: 100%; max-height: 720px; object-fit: cover; }
.abx-article { width: min(calc(100% - 40px), var(--abx-reading)); margin: 0 auto; padding: clamp(40px, 6vw, 74px) 0 88px; }
.abx-article > *:first-child { margin-top: 0; }
.abx-article p { margin: 0 0 1.45em; color: #c7d4dd; }
.abx-article > p:first-of-type { color: #e5edf2; font-size: 1.18rem; line-height: 1.7; }
.abx-article > p:first-of-type::first-letter { float: left; margin: .11em .11em 0 0; color: var(--abx-cyan); font-size: 4.1rem; font-weight: 900; line-height: .72; }
.abx-article h2 { margin: 2.2em 0 .65em; color: #fff; font-size: clamp(1.75rem, 4vw, 2.6rem); line-height: 1.1; letter-spacing: -.035em; }
.abx-article h3 { margin: 1.8em 0 .6em; color: #fff; font-size: 1.35rem; line-height: 1.25; }
.abx-article blockquote { margin: 2.3em 0; padding: 22px 26px; border-left: 4px solid var(--abx-amber); background: var(--abx-surface); color: #f0f5f8; font-size: 1.15rem; }
.abx-article ul, .abx-article ol { padding-left: 1.35em; color: #c7d4dd; }
.abx-article li { margin-bottom: .65em; }
.abx-article img { margin: 2em auto; border: 1px solid var(--abx-line); }
.abx-article hr { margin: 3em 0; border: 0; border-top: 1px solid var(--abx-line); }
.abx-article table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; }
.abx-article th, .abx-article td { padding: 12px; border: 1px solid var(--abx-line); text-align: left; }
.abx-article th { color: var(--abx-cyan-soft); background: var(--abx-surface); }
.abx-article code { color: var(--abx-yellow); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.abx-article-nav { width: min(calc(100% - 40px), var(--abx-reading)); margin: -38px auto 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.abx-article-nav a { padding: 17px; border: 1px solid var(--abx-line); background: var(--abx-surface); color: #fff; text-decoration: none; }
.abx-article-nav a:last-child { text-align: right; }

.abx-pagination { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 30px; }
.abx-pagination .page-numbers { display: grid; place-items: center; min-width: 42px; min-height: 42px; padding: 8px; border: 1px solid var(--abx-line); background: var(--abx-surface); color: #fff; text-decoration: none; font: 800 .75rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.abx-pagination .current, .abx-pagination a:hover { color: #00131c; border-color: var(--abx-cyan); background: var(--abx-cyan); }
.abx-empty { padding: 65px 0 100px; }

.abx-site-footer { border-top: 1px solid var(--abx-line); background: rgba(3,7,10,.96); }
.abx-footer-grid { display: grid; grid-template-columns: 1.1fr .6fr .8fr; gap: 44px; padding: 50px 0 42px; }
.abx-footer-brand p { max-width: 480px; margin: 16px 0 0; color: var(--abx-muted); font-size: .88rem; }
.abx-footer-title { margin: 0 0 14px; color: var(--abx-cyan-soft); font: 800 .66rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; letter-spacing: .14em; }
.abx-footer-links { margin: 0; padding: 0; list-style: none; }
.abx-footer-links li { margin: 7px 0; }
.abx-footer-links a { color: #bdccd6; text-decoration: none; font-size: .85rem; }
.abx-footer-links a:hover { color: var(--abx-cyan); }
.abx-footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding: 17px 0; border-top: 1px solid var(--abx-line); color: #7890a0; font: 650 .62rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; letter-spacing: .06em; }

input[type="text"], input[type="email"], input[type="search"], textarea, select {
  width: 100%; padding: 13px 14px; border: 1px solid var(--abx-line-bright); border-radius: 0; color: #fff; background: var(--abx-surface); outline: 0;
}
input:focus, textarea:focus, select:focus { border-color: var(--abx-cyan); box-shadow: 0 0 0 3px rgba(53,200,255,.1); }

@media (max-width: 980px) {
  .abx-header-status { display: none; }
  .abx-hero-grid, .abx-app-card, .abx-manifesto-grid { grid-template-columns: 1fr; }
  .abx-brain-panel { min-height: 310px; }
  .abx-app-visual { min-height: 0; aspect-ratio: 16/9; border-right: 0; border-bottom: 1px solid var(--abx-line); }
  .abx-post-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .abx-footer-grid { grid-template-columns: 1fr 1fr; }
  .abx-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  :root { --abx-header: 60px; }
  body { font-size: 16px; }
  .admin-bar .abx-site-header { top: 46px; }
  .abx-shell { width: min(calc(100% - 24px), var(--abx-max)); }
  .abx-header-inner { position: relative; gap: 12px; }
  .abx-mark { width: 31px; height: 31px; }
  .abx-wordmark { font-size: 1.05rem; }
  .abx-wordmark em { display: none; }
  .abx-menu-button { display: block; }
  .abx-nav { display: none; position: absolute; left: -12px; right: -12px; top: var(--abx-header); margin: 0; padding: 9px 12px 13px; border-bottom: 1px solid var(--abx-line-bright); background: #050b10; box-shadow: 0 14px 28px rgba(0,0,0,.42); }
  .abx-nav.is-open { display: block; }
  .abx-nav ul { display: grid; gap: 4px; }
  .abx-nav a { padding: 14px; border-color: var(--abx-line); }
  .abx-hero { padding: 46px 0 34px; }
  .abx-hero h1 { font-size: clamp(3rem, 16vw, 4.55rem); }
  .abx-hero-copy { margin-top: 20px; }
  .abx-brain-panel { min-height: 255px; }
  .abx-orbit { width: 175px; }
  .abx-orbit::after { inset: 55px; }
  .abx-core { width: 56px; height: 56px; }
  .abx-signal-grid { grid-template-columns: repeat(2, 1fr); }
  .abx-signal { padding: 15px; border-bottom: 1px solid var(--abx-line); }
  .abx-section { padding: 52px 0; }
  .abx-section-head { display: block; }
  .abx-section-head p { margin-top: 12px; }
  .abx-post-grid { grid-template-columns: 1fr; }
  .abx-app-copy { padding: 26px 22px 30px; }
  .abx-values { grid-template-columns: 1fr; }
  .abx-page-head { padding: 44px 0 25px; }
  .abx-page-head h1 { font-size: clamp(2.45rem, 13vw, 4rem); }
  .abx-feature-image { width: calc(100% - 24px); margin-top: 18px; }
  .abx-article { width: calc(100% - 32px); padding: 35px 0 65px; }
  .abx-article > p:first-of-type { font-size: 1.06rem; }
  .abx-article-nav { width: calc(100% - 24px); grid-template-columns: 1fr; }
  .abx-article-nav a:last-child { text-align: left; }
  .abx-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .abx-footer-brand { grid-column: auto; }
  .abx-footer-bottom { display: block; }
  .abx-footer-bottom span { display: block; margin: 5px 0; }
}