:root {
    --navy:       #0a1628;
    --navy-mid:   #112240;
    --navy-light: #1e3a5f;
    --teal:       #00c4a7;
    --teal-dim:   #00a38a;
    --amber:      #f5a623;
    --white:      #f0f4ff;
    --gray:       #8899aa;
    --card-bg:    #0d1f3c;
    --mono:       'Space Mono', monospace;
    --sans:       'DM Sans', sans-serif;
}

/* ── Global page background ── */
body:not(.elementor-editor-active) {
    background-color: var(--navy) !important;
    color: var(--white) !important;
    font-family: var(--sans) !important;
}

/* Push content below fixed nav */
body:not(.elementor-editor-active) {
    padding-top: 64px !important;
}
body.admin-bar:not(.elementor-editor-active) {
    padding-top: 96px !important;
}

/* ── Site nav (matches front-page exactly) ── */
.ccc-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2.5rem;
    background: rgba(10,22,40,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,196,167,0.15);
    font-family: 'Space Mono', monospace;
}
body.admin-bar .ccc-nav { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar .ccc-nav { top: 46px; }
}
.ccc-nav-logo {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
}
.ccc-nav-logo-img {
    height: 36px;
    width: 36px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}
.ccc-nav-logo-text {
    font-size: 1rem;
    color: #00c4a7;
    letter-spacing: .05em;
    font-weight: 700;
    font-family: 'Space Mono', monospace;
}
.ccc-nav-logo-accent { color: #f5a623; }
.ccc-nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0; padding: 0;
}
.ccc-nav-links a {
    color: #8899aa;
    text-decoration: none;
    font-size: .85rem;
    letter-spacing: .08em;
    transition: color .2s;
}
.ccc-nav-links a:hover,
.ccc-nav-links a[aria-current] { color: #00c4a7; }
.ccc-hamburger {
    display: none;
    background: 0;
    border: 0;
    cursor: pointer;
    font-size: 1.5rem;
    color: #00c4a7;
    padding: 0;
    margin-left: auto;
    z-index: 1000;
}
@media (max-width: 600px) {
    .ccc-hamburger { display: block; }
    .ccc-nav-links {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        gap: 0;
        background: rgba(10,22,40,.98);
        padding: 1rem 2.5rem;
        border-bottom: 1px solid rgba(0,196,167,.15);
        width: 100%;
        z-index: 999;
    }
    .ccc-nav-links.active { display: flex; }
    .ccc-nav-links a { padding: .75rem 0; border-bottom: 1px solid rgba(0,196,167,.1); }
    .ccc-nav-logo { font-size: .85rem; }
}

/* Hide hello-elementor's default site-header on inner pages — we have our own nav */
.site-header { display: none !important; }

/* ── Page title bar ── */
.page-header {
    background: linear-gradient(135deg, var(--navy-mid) 0%, var(--navy-light) 100%) !important;
    border-bottom: 2px solid var(--teal) !important;
    padding: 36px 40px 30px !important;
    margin-bottom: 0 !important;
}
.page-header .entry-title,
h1.entry-title,
h1.wp-block-post-title,
.wp-block-post-title {
    color: var(--white) !important;
    font-family: var(--mono) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.35 !important;
    margin: 0 auto !important;
    max-width: 820px !important;
    --wp--preset--font-size--xx-large: 1.1rem;
}

/* ── Main content container ── */
.site-main {
    background-color: var(--navy) !important;
}
.page-content {
    max-width: 820px;
    margin: 0 auto;
    padding: 44px 40px 80px;
    color: var(--white) !important;
    font-family: var(--sans) !important;
    font-size: 0.9rem;
    line-height: 1.78;
}

/* ── Typography ── */
.page-content h2 {
    color: var(--teal) !important;
    font-family: var(--mono) !important;
    font-size: 1rem;
    font-weight: 700;
    margin-top: 2.4em;
    margin-bottom: 0.6em;
    letter-spacing: -0.02em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid rgba(0,196,167,0.2);
}
.page-content h3 {
    color: var(--white) !important;
    font-family: var(--mono) !important;
    font-size: 0.9rem;
    font-weight: 700;
    margin-top: 1.8em;
    margin-bottom: 0.5em;
}
.page-content h4, .page-content h5, .page-content h6 {
    color: var(--amber) !important;
    font-family: var(--sans) !important;
    font-weight: 600;
    margin-top: 1.4em;
}
.page-content p {
    color: rgba(240,244,255,0.88) !important;
    margin-bottom: 1.3em;
}
.page-content strong, .page-content b {
    color: var(--white) !important;
    font-weight: 600;
}
.page-content em, .page-content i {
    color: var(--gray) !important;
}

/* ── Links ── */
.page-content a {
    color: var(--teal) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(0,196,167,0.35);
    transition: color 0.2s, border-color 0.2s;
}
.page-content a:hover {
    color: var(--white) !important;
    border-bottom-color: var(--white);
}

/* ── Lists ── */
.page-content ul,
.page-content ol {
    color: rgba(240,244,255,0.88) !important;
    padding-left: 1.6em;
    margin-bottom: 1.3em;
}
.page-content li {
    margin-bottom: 0.55em;
    line-height: 1.7;
}
.page-content ul li::marker { color: var(--teal); }

/* ── Blockquotes ── */
.page-content blockquote {
    border-left: 3px solid var(--teal) !important;
    background: var(--card-bg) !important;
    padding: 1.2em 1.6em !important;
    margin: 2em 0 !important;
    border-radius: 0 6px 6px 0;
    color: var(--gray) !important;
    font-style: italic;
}
.page-content blockquote p {
    color: var(--gray) !important;
    margin: 0 !important;
}

/* ── Code ── */
.page-content code,
.page-content pre {
    font-family: var(--mono) !important;
    background: var(--card-bg) !important;
    color: var(--teal) !important;
    border-radius: 4px;
    font-size: 0.88em;
}
.page-content code { padding: 0.15em 0.45em; }
.page-content pre {
    padding: 1.2em 1.6em;
    overflow-x: auto;
    border-left: 3px solid var(--teal);
}

/* ── Images ── */
.page-content img {
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.45);
    max-width: 100%;
    height: auto;
    margin: 0.5em 0;
}
.page-content figure { margin: 2em 0; text-align: center; }
.page-content figcaption {
    color: var(--gray) !important;
    font-size: 0.85rem;
    margin-top: 0.5em;
    font-style: italic;
}

/* ── Tables ── */
.page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.8em 0;
    font-size: 0.95rem;
}
.page-content th {
    background: var(--navy-light) !important;
    color: var(--teal) !important;
    font-family: var(--mono) !important;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 16px;
    text-align: left;
    border-bottom: 2px solid var(--teal);
}
.page-content td {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    color: rgba(240,244,255,0.85) !important;
    vertical-align: top;
}
.page-content tr:nth-child(even) td { background: rgba(255,255,255,0.03); }

/* ── CTA / callout box ── */
.page-content .wp-block-group {
    background: var(--card-bg) !important;
    border: 1px solid rgba(0,196,167,0.2) !important;
    border-radius: 8px !important;
    padding: 2em !important;
}

/* ── Comments section ── */
.comments-area {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 40px 60px;
    color: var(--white) !important;
}
.comments-area h2,
.comments-area .comment-reply-title {
    color: var(--teal) !important;
    font-family: var(--mono) !important;
    font-size: 1rem;
    font-weight: 700;
}
.comment-form label,
.comment-form input,
.comment-form textarea {
    color: var(--white) !important;
    background: var(--card-bg) !important;
    border: 1px solid rgba(0,196,167,0.25) !important;
    border-radius: 4px;
    font-family: var(--sans) !important;
}
.comment-form input[type="submit"] {
    background: var(--teal) !important;
    color: var(--navy) !important;
    font-family: var(--mono) !important;
    font-weight: 700;
    border: none !important;
    padding: 10px 28px !important;
    border-radius: 4px !important;
    cursor: pointer;
    transition: background 0.2s;
}
.comment-form input[type="submit"]:hover { background: var(--white) !important; }

/* ── Site footer ── */
.site-footer {
    background: rgba(10,22,40,0.97) !important;
    color: var(--gray) !important;
    border-top: 1px solid rgba(0,196,167,0.15) !important;
    padding: 28px 40px !important;
    text-align: center;
    font-size: 0.85rem;
    font-family: var(--sans) !important;
}
.site-footer a { color: var(--teal) !important; text-decoration: none !important; }
.site-footer a:hover { color: var(--white) !important; }

/* ── Block editor content font sizes ── */
.entry-content,
.wp-block-post-content {
    font-size: 0.9rem !important;
    --wp--preset--font-size--medium: 0.9rem !important;
    --wp--preset--font-size--large: 1rem !important;
    --wp--preset--font-size--x-large: 1.1rem !important;
    --wp--preset--font-size--xx-large: 1.2rem !important;
}

.entry-content p,
.wp-block-post-content p {
    font-size: 0.9rem !important;
    line-height: 1.78 !important;
    color: rgba(240,244,255,0.88) !important;
}

.entry-content h2,
.wp-block-post-content h2 {
    font-size: 1rem !important;
    color: var(--teal) !important;
    font-family: var(--mono) !important;
    font-weight: 700 !important;
}

.entry-content h3,
.wp-block-post-content h3 {
    font-size: 0.9rem !important;
    color: var(--white) !important;
    font-family: var(--mono) !important;
    font-weight: 700 !important;
}

.entry-content h4,
.entry-content h5,
.entry-content h6,
.wp-block-post-content h4,
.wp-block-post-content h5,
.wp-block-post-content h6 {
    font-size: 0.85rem !important;
    color: var(--amber) !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .page-header { padding: 28px 20px 22px !important; }
    .page-content { padding: 32px 20px 60px; font-size: 0.88rem; }
    .comments-area { padding: 0 20px 48px; }
    body:not(.elementor-editor-active) { padding-top: 58px !important; }
}