/* HeBi About v1.0 — terminal treatment for the About Us page.
   Scoped to .page-id-51 throughout. */

/* ====================================== */
/* 1. Colour repair                       */
/* ====================================== */

/* The bios carry inline colours: #5a219c (2.0:1 — effectively unreadable
   on the black) and #e41c38 (off-palette). Inline styles need !important
   to override. */
.page-id-51 .entry-content p[style*="#5a219c"],
.page-id-51 .entry-content p[style*="#e41c38"] {
    color: rgba(224, 224, 224, 0.72) !important;
    line-height: 1.8;
}

.page-id-51 .entry-content p[style*="#5a219c"] strong,
.page-id-51 .entry-content p[style*="#e41c38"] strong {
    color: #e0e0e0 !important;
}

/* ====================================== */
/* 2. Headings                            */
/* ====================================== */
.page-id-51 .entry-content h2 {
    font-family: 'Orbitron', 'Geist Mono', monospace !important;
    color: #ff0033 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-shadow: 0 0 14px rgba(255, 0, 51, 0.3);
}

.page-id-51 .entry-content h2 u {
    text-decoration: none;
}

/* ====================================== */
/* 3. Operator cards                      */
/* ====================================== */
.page-id-51 .entry-content {
    counter-reset: hebi-op;
}

.page-id-51 .hebi-op-name {
    counter-increment: hebi-op;
    font-size: clamp(1rem, 2.4vw, 1.35rem) !important;
    margin: 0 0 4px !important;
    text-align: center;
}

.page-id-51 .hebi-op-name::before {
    content: "[ OPERATOR " counter(hebi-op, decimal-leading-zero) " ]";
    display: block;
    margin-bottom: 8px;
    color: #00ff41;
    font-family: 'Geist Mono', 'Courier New', monospace;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-shadow: none;
}

/* The card itself. :has() is well supported now; where it isn't, the rule
   is dropped and the bios simply render without the panel — no breakage. */
.page-id-51 .entry-content .wp-block-column:has(.hebi-op-name) {
    padding: 24px 22px !important;
    background: #0a0a0a;
    border: 1px solid rgba(255, 0, 51, 0.25);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.page-id-51 .entry-content .wp-block-column:has(.hebi-op-name):hover {
    border-color: rgba(255, 0, 51, 0.55);
    box-shadow: 0 0 28px rgba(255, 0, 51, 0.1);
}

/* avatars: sharp corners, red edge */
.page-id-51 .entry-content .wp-block-column:has(.hebi-op-name) img {
    border-radius: 0 !important;
    border: 1px solid rgba(255, 0, 51, 0.3);
}

/* ====================================== */
/* 4. Certification chips                 */
/* ====================================== */
.page-id-51 .hebi-certs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin: 10px 0 16px !important;
    padding: 0;
}

.page-id-51 .hebi-cert {
    display: inline-block;
    padding: 3px 8px;
    border: 1px solid rgba(0, 255, 65, 0.4);
    background: rgba(0, 255, 65, 0.05);
    color: #00ff41;
    font-family: 'Geist Mono', 'Courier New', monospace;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    white-space: nowrap;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-id-51 .hebi-cert:hover {
    border-color: #00ff41;
    box-shadow: 0 0 12px rgba(0, 255, 65, 0.2);
}

/* ====================================== */
/* 5. Glossary block                      */
/* ====================================== */
.page-id-51 .hebi-def {
    max-width: 640px;
    margin: 0 auto 4px !important;
    padding: 10px 14px;
    background: #050505;
    border-left: 3px solid #ff0033;
    color: rgba(224, 224, 224, 0.8) !important;
    font-family: 'Geist Mono', 'Courier New', monospace !important;
    font-size: 0.92rem !important;
    line-height: 1.7;
    text-align: left !important;
}

.page-id-51 .hebi-def::before {
    content: "$ ";
    color: #00ff41;
    font-weight: 700;
}

.page-id-51 .hebi-src {
    max-width: 640px;
    margin: 0 auto 18px !important;
    padding-left: 14px;
    color: rgba(224, 224, 224, 0.35) !important;
    font-family: 'Geist Mono', 'Courier New', monospace !important;
    font-size: 0.79rem !important;
    text-align: left !important;
}

/* ====================================== */
/* 6. Link chips                          */
/* ====================================== */
.page-id-51 .entry-content a.hebi-link {
    display: inline-block;
    padding: 3px 9px;
    margin: 2px 3px;
    border: 1px solid rgba(0, 255, 65, 0.4);
    background: rgba(0, 255, 65, 0.05);
    color: #00ff41 !important;
    font-family: 'Geist Mono', 'Courier New', monospace;
    font-size: 0.79rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none !important;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.page-id-51 .entry-content a.hebi-link::before { content: "[ "; opacity: 0.55; }
.page-id-51 .entry-content a.hebi-link::after  { content: " ]"; opacity: 0.55; }

.page-id-51 .entry-content a.hebi-link:hover,
.page-id-51 .entry-content a.hebi-link:focus-visible {
    color: #ff0033 !important;
    border-color: rgba(255, 0, 51, 0.6);
    background: rgba(255, 0, 51, 0.07);
    box-shadow: 0 0 14px rgba(255, 0, 51, 0.18);
}

/* ====================================== */
/* 7. Responsive                          */
/* ====================================== */
@media (max-width: 600px) {
    .page-id-51 .entry-content .wp-block-column:has(.hebi-op-name) {
        padding: 18px 14px !important;
    }
    .page-id-51 .hebi-def { font-size: 0.87rem !important; }
}

/* ====================================== */
/* 8. Reduced motion                      */
/* ====================================== */
@media (prefers-reduced-motion: reduce) {
    .page-id-51 .entry-content .wp-block-column:has(.hebi-op-name),
    .page-id-51 .hebi-cert,
    .page-id-51 .entry-content a.hebi-link {
        transition: none !important;
    }
}