/* AxonBOS Blog Dark Theme — matches axonbos.com static pages */
/* Design: #0B0F1A bg, #2dd4bf accent, Inter font, glassmorphic cards */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ===== ROOT VARIABLES ===== */
:root {
    --bg-primary: #0B0F1A;
    --bg-secondary: #111827;
    --bg-card: rgba(17, 24, 39, 0.7);
    --accent: #2dd4bf;
    --accent-hover: #5eead4;
    --accent-glow: rgba(45, 212, 191, 0.15);
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: rgba(45, 212, 191, 0.12);
    --border-hover: rgba(45, 212, 191, 0.3);
}

/* ===== GLOBAL OVERRIDES ===== */
body,
html {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== SITE HEADER ===== */
.site-header,
#masthead,
header.site-header {
    background: rgba(11, 15, 26, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 16px 0 !important;
}

.site-header .site-title a,
.site-header .site-branding a,
.site-header a {
    color: var(--text-primary) !important;
    text-decoration: none !important;
}

.site-header .site-title a:hover,
.site-header a:hover {
    color: var(--accent) !important;
}

.site-header .site-description {
    color: var(--text-secondary) !important;
}

/* ===== NAVIGATION ===== */
.site-navigation a,
.main-navigation a,
nav a {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: color 0.2s !important;
}

.site-navigation a:hover,
.main-navigation a:hover,
nav a:hover {
    color: var(--accent) !important;
}

/* ===== MAIN CONTENT AREA ===== */
.site-main,
#primary,
.content-area,
main {
    background: var(--bg-primary) !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 40px 24px !important;
}

/* ===== BLOG ARCHIVE / LISTING ===== */
.hentry,
article.post,
article.type-post,
.post {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    padding: 32px !important;
    margin-bottom: 32px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    transition: border-color 0.3s ease, transform 0.2s ease !important;
}

article.post:hover,
article.type-post:hover {
    border-color: var(--border-hover) !important;
    transform: translateY(-2px) !important;
}

/* ===== POST TITLES ===== */
.entry-title,
.entry-title a,
h1.entry-title,
h2.entry-title,
.post-title,
.post-title a {
    color: var(--text-primary) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
}

h1.entry-title,
.single .entry-title {
    font-size: 2.2rem !important;
    margin-bottom: 16px !important;
}

h2.entry-title,
.archive .entry-title,
.blog .entry-title {
    font-size: 1.5rem !important;
}

.entry-title a:hover {
    color: var(--accent) !important;
    text-decoration: none !important;
}

/* ===== POST META ===== */
.entry-meta,
.post-meta,
.entry-meta a,
.post-date,
.byline,
.cat-links,
.tags-links,
.posted-on,
.posted-on a {
    color: var(--text-muted) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

.entry-meta a:hover {
    color: var(--accent) !important;
}

.cat-links a,
.entry-categories a {
    background: var(--accent-glow) !important;
    color: var(--accent) !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin-right: 8px !important;
}

/* ===== POST CONTENT ===== */
.entry-content,
.post-content {
    color: var(--text-secondary) !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
}

.entry-content p {
    margin-bottom: 1.5em !important;
    color: var(--text-secondary) !important;
}

.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    color: var(--text-primary) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    margin-top: 2em !important;
    margin-bottom: 0.75em !important;
}

.entry-content h2 { font-size: 1.6rem !important; }
.entry-content h3 { font-size: 1.3rem !important; }
.entry-content h4 { font-size: 1.1rem !important; }

.entry-content a {
    color: var(--accent) !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(45, 212, 191, 0.3) !important;
    text-underline-offset: 3px !important;
    transition: text-decoration-color 0.2s !important;
}

.entry-content a:hover {
    text-decoration-color: var(--accent) !important;
}

/* ===== BLOCKQUOTES ===== */
.entry-content blockquote,
blockquote {
    border-left: 3px solid var(--accent) !important;
    background: var(--accent-glow) !important;
    padding: 20px 24px !important;
    margin: 24px 0 !important;
    border-radius: 0 12px 12px 0 !important;
    font-style: italic !important;
    color: var(--text-secondary) !important;
}

/* ===== CODE BLOCKS ===== */
.entry-content code,
.entry-content pre {
    font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
    background: var(--bg-secondary) !important;
    color: var(--accent) !important;
    border-radius: 6px !important;
}

.entry-content code {
    padding: 2px 8px !important;
    font-size: 14px !important;
}

.entry-content pre {
    padding: 20px 24px !important;
    overflow-x: auto !important;
    border: 1px solid var(--border-color) !important;
    margin: 24px 0 !important;
}

.entry-content pre code {
    padding: 0 !important;
    background: transparent !important;
}

/* ===== LISTS ===== */
.entry-content ul,
.entry-content ol {
    color: var(--text-secondary) !important;
    padding-left: 24px !important;
}

.entry-content ul li::marker {
    color: var(--accent) !important;
}

.entry-content ol li::marker {
    color: var(--accent) !important;
}

/* ===== IMAGES ===== */
.entry-content img,
.wp-post-image {
    border-radius: 12px !important;
    border: 1px solid var(--border-color) !important;
}

.wp-caption-text {
    color: var(--text-muted) !important;
    font-size: 13px !important;
    text-align: center !important;
    margin-top: 8px !important;
}

/* ===== FEATURED IMAGE ===== */
.post-thumbnail img {
    border-radius: 12px !important;
    width: 100% !important;
    height: auto !important;
}

/* ===== SIDEBAR / WIDGETS ===== */
.widget-area,
.sidebar,
#secondary {
    background: transparent !important;
}

.widget {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

.widget-title,
.widget h2 {
    color: var(--text-primary) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.widget a {
    color: var(--text-secondary) !important;
    text-decoration: none !important;
}

.widget a:hover {
    color: var(--accent) !important;
}

.widget ul {
    list-style: none !important;
    padding: 0 !important;
}

.widget ul li {
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(45, 212, 191, 0.06) !important;
}

.widget ul li:last-child {
    border-bottom: none !important;
}

/* ===== PAGINATION ===== */
.pagination,
.nav-links,
.posts-navigation {
    margin-top: 40px !important;
    text-align: center !important;
}

.pagination .page-numbers,
.nav-links a,
.posts-navigation a {
    background: var(--bg-card) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    margin: 0 4px !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
    display: inline-block !important;
}

.pagination .page-numbers:hover,
.nav-links a:hover,
.posts-navigation a:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

.pagination .page-numbers.current {
    background: var(--accent) !important;
    color: var(--bg-primary) !important;
    border-color: var(--accent) !important;
    font-weight: 700 !important;
}

/* ===== COMMENTS ===== */
.comments-area,
#comments {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    padding: 32px !important;
    margin-top: 40px !important;
}

.comments-title,
.comment-reply-title {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

.comment-body {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
}

.comment-author .fn,
.comment-author .fn a {
    color: var(--accent) !important;
    font-weight: 600 !important;
}

.comment-metadata,
.comment-metadata a {
    color: var(--text-muted) !important;
    font-size: 12px !important;
}

.comment-content p {
    color: var(--text-secondary) !important;
}

/* Comment form */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-family: 'Inter', sans-serif !important;
    width: 100% !important;
    transition: border-color 0.2s !important;
}

.comment-form input:focus,
.comment-form textarea:focus {
    border-color: var(--accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

.comment-form label {
    color: var(--text-secondary) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.comment-form .submit,
.form-submit input[type="submit"] {
    background: var(--accent) !important;
    color: var(--bg-primary) !important;
    border: none !important;
    padding: 12px 32px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.form-submit input[type="submit"]:hover {
    background: var(--accent-hover) !important;
    transform: translateY(-1px) !important;
}

/* ===== FOOTER ===== */
.site-footer,
footer.site-footer,
#colophon {
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-color) !important;
    color: var(--text-muted) !important;
    padding: 40px 0 !important;
}

.site-footer a {
    color: var(--text-secondary) !important;
}

.site-footer a:hover {
    color: var(--accent) !important;
}

/* ===== SEARCH FORM ===== */
.search-form input[type="search"],
.search-field {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-family: 'Inter', sans-serif !important;
}

.search-form input[type="search"]:focus {
    border-color: var(--accent) !important;
    outline: none !important;
}

.search-submit {
    background: var(--accent) !important;
    color: var(--bg-primary) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

/* ===== 404 PAGE ===== */
.error-404 .page-title {
    color: var(--text-primary) !important;
}

.error-404 .page-content p {
    color: var(--text-secondary) !important;
}

/* ===== SELECTION ===== */
::selection {
    background: var(--accent) !important;
    color: var(--bg-primary) !important;
}

::-moz-selection {
    background: var(--accent) !important;
    color: var(--bg-primary) !important;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* ===== BREADCRUMBS (AIOSEO / Yoast) ===== */
.aioseo-breadcrumbs,
.yoast-breadcrumbs,
.breadcrumbs {
    color: var(--text-muted) !important;
    font-size: 13px !important;
    margin-bottom: 24px !important;
}

.aioseo-breadcrumbs a,
.yoast-breadcrumbs a {
    color: var(--text-secondary) !important;
}

.aioseo-breadcrumbs a:hover,
.yoast-breadcrumbs a:hover {
    color: var(--accent) !important;
}

/* ===== READ MORE LINK ===== */
.more-link,
a.more-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--accent) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    margin-top: 16px !important;
    transition: gap 0.2s !important;
}

.more-link:hover {
    gap: 10px !important;
    color: var(--accent-hover) !important;
}

.more-link::after {
    content: '\2192' !important;
}

/* ===== SINGLE POST ===== */
.single .entry-header {
    margin-bottom: 32px !important;
    padding-bottom: 24px !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.single .entry-content {
    max-width: 760px !important;
}

/* Author box */
.author-box,
.entry-author {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin-top: 40px !important;
    display: flex !important;
    gap: 20px !important;
    align-items: center !important;
}

.author-box .author-name,
.author-box .author-name a {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

.author-box .author-description {
    color: var(--text-secondary) !important;
    font-size: 14px !important;
}

/* Post navigation */
.post-navigation,
.nav-previous a,
.nav-next a {
    color: var(--text-secondary) !important;
}

.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover {
    color: var(--accent) !important;
}

/* ===== TABLES ===== */
.entry-content table {
    border-collapse: collapse !important;
    width: 100% !important;
    margin: 24px 0 !important;
}

.entry-content table th {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
    border: 1px solid var(--border-color) !important;
    text-align: left !important;
}

.entry-content table td {
    padding: 12px 16px !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.entry-content table tr:nth-child(even) {
    background: rgba(17, 24, 39, 0.5) !important;
}

/* ===== HR ===== */
.entry-content hr {
    border: none !important;
    border-top: 1px solid var(--border-color) !important;
    margin: 32px 0 !important;
}

/* ===== ELEMENTOR OVERRIDES ===== */
.elementor-page .site-main {
    padding: 0 !important;
}

/* Don't apply dark blog styles to Elementor-edited pages */
.elementor-page article.post {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* ===== PAGE TITLE AREA ===== */
.page-header,
.archive-header {
    text-align: center !important;
    padding: 60px 24px 40px !important;
}

.page-title,
.archive-title {
    color: var(--text-primary) !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

.archive-description,
.taxonomy-description {
    color: var(--text-secondary) !important;
    max-width: 600px !important;
    margin: 16px auto 0 !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    h1.entry-title,
    .single .entry-title {
        font-size: 1.6rem !important;
    }

    h2.entry-title {
        font-size: 1.3rem !important;
    }

    article.post,
    article.type-post {
        padding: 24px 20px !important;
        margin-bottom: 20px !important;
    }

    .site-main,
    #primary,
    main {
        padding: 20px 16px !important;
    }

    .page-title,
    .archive-title {
        font-size: 1.8rem !important;
    }

    .comments-area {
        padding: 20px !important;
    }

    .author-box {
        flex-direction: column !important;
        text-align: center !important;
    }
}

/* ===== SMOOTH TRANSITIONS ===== */
a {
    transition: color 0.2s ease !important;
}

/* ===== TAG CLOUD ===== */
.tagcloud a,
.wp-tag-cloud a {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin: 4px !important;
    transition: all 0.2s !important;
}

.tagcloud a:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    background: var(--accent-glow) !important;
}

/* ===== CTA BUTTON IN NAV ===== */
.menu-cta-button a,
li.menu-cta-button > a {
    background: linear-gradient(135deg, #2dd4bf, #06b6d4) !important;
    color: #0B0F1A !important;
    padding: 10px 24px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.menu-cta-button a:hover,
li.menu-cta-button > a:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
    color: #0B0F1A !important;
}

/* ===== IMPROVED HEADER LAYOUT ===== */
.site-header .site-branding {
    display: flex !important;
    align-items: center !important;
}

.site-header .site-title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    letter-spacing: -0.02em !important;
}

.site-header .site-title a {
    background: linear-gradient(135deg, #2dd4bf, #06b6d4) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.site-header .site-description {
    display: none !important;
}

/* Nav menu layout */
.site-header .site-navigation ul,
.main-navigation ul {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.site-header .site-navigation ul li,
.main-navigation ul li {
    margin: 0 !important;
}

/* Hide language switcher if present */
.trp-language-switcher,
.trp-ls-shortcode-language {
    display: none !important;
}

/* ===== HIDE LANGUAGE SWITCHER ON AXONBOS ===== */
.aruai-lang-theme-inject,
.aruai-lang-wrapper,
li.aruai-lang-theme-inject {
    display: none !important;
}