/*
 Theme Name:   AI SEO Signal Blog
 Description:  Signal-first SEO blog theme with operator-grade clarity
 Author:       AI SEO Signal
 Template:     logbook-wp
 Version:      2.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ========================================
   IMPORT FONTS FIRST
   ======================================== */

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

/* ========================================
   FORCE TYPOGRAPHY OVERRIDE
   ======================================== */

* {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

body, body * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Metrics and numbers use mono font */
.metric-value,
.post-meta time,
.post-stats,
.numeric,
.posted-on,
.byline {
    font-family: 'JetBrains Mono', 'Courier New', monospace !important;
    font-weight: 500 !important;
}

/* ========================================
   COLOR SYSTEM
   ======================================== */

:root {
    /* Brand colors */
    --color-primary: #3B82F6;
    --color-ai-accent: #6366F1;
    --color-success: #22C55E;
    --color-warning: #F59E0B;
    
    /* Neutrals */
    --color-bg: #FFFFFF;
    --color-surface: #F8FAFC;
    --color-panel: #F1F5F9;
    --color-border: #E5E7EB;
    
    /* Text */
    --color-text: #111827;
    --color-text-secondary: #6B7280;
    --color-text-muted: #9CA3AF;
    
    /* Radius */
    --radius-card: 14px;
    --radius-small: 10px;
    --radius-pill: 999px;
}

/* ========================================
   KILL ALL RED/PURPLE - FORCE OVERRIDE
   ======================================== */

/* Override ANY red/purple color anywhere */
[style*="#c22828"],
[style*="rgb(194, 40, 40)"],
[style*="#a855f7"],
[style*="purple"],
*[class*="purple"],
*[class*="red"],
[style*="#dc2626"],
[style*="#ef4444"],
[style*="#b91c1c"] {
    color: #3B82F6 !important;
    background-color: transparent !important;
    border-color: #3B82F6 !important;
}

/* Nuclear option - catch all background reds */
* {
    background-color: inherit;
}

*[style*="background:#c22828"],
*[style*="background-color:#c22828"],
*[style*="background: #c22828"],
*[style*="background-color: #c22828"],
*[style*="background:rgb(194, 40, 40)"],
*[style*="background-color:rgb(194, 40, 40)"] {
    background-color: #3B82F6 !important;
}

/* Force all primary colors to blue */
.text-primary,
.bg-primary,
.border-primary {
    color: #3B82F6 !important;
    background-color: #3B82F6 !important;
    border-color: #3B82F6 !important;
}

/* Kill any SVG or border decorations */
svg[style*="stroke"],
svg path,
svg circle,
svg rect {
    stroke: #E5E7EB !important;
}

/* Remove any decorative borders/outlines */
.post-readmore::before,
.post-readmore::after,
.read-more::before {
    display: none !important;
    border: none !important;
    background: none !important;
}

/* Blockquotes */
blockquote,
.wp-block-quote {
    border-left: 4px solid #3B82F6 !important;
    background: #F8FAFC !important;
    padding: 16px 24px !important;
}

blockquote:before,
.wp-block-quote:before {
    color: #3B82F6 !important;
}

/* ========================================
   HEADER & LOGO
   ======================================== */

.wp-main-header .logo-area a {
    font-size: 2.5rem !important;
    letter-spacing: -0.02em !important;
    font-weight: 600 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    color: #111827 !important;
    font-family: 'Inter', sans-serif !important;
}

.sticky-nav.gridbook-blog-sticky {
    margin-top: 32px !important;
}

.sticky-nav.gridbook-customize-preview {
    margin-top: 0px !important;
}

.wp-main-header .logo-area p {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    color: #6B7280 !important;
    text-transform: uppercase !important;
    font-family: 'Inter', sans-serif !important;
}

.site-title {
    position: relative;
    padding: 1.5rem 0 !important;
}

.site-title:after {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 100;
    content: "";
    height: 1px;
    margin-top: 0.1rem;
    background-color: #E5E7EB !important;
}

.site-title a {
    display: inline-block;
    position: relative;
    line-height: 1.1;
    z-index: 101;
    background-color: #FFFFFF !important;
    padding: 0 2.5rem;
}

.wp-main-header .logo-area .site-description {
    margin-top: 8px;
    margin-bottom: 8px;
}

/* ========================================
   NAVIGATION - FORCE BLUE
   ======================================== */

.nav-brand {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E5E7EB !important;
}

.logbook-wp-main-navigation .wrapper {
    background: #FFFFFF !important;
    padding: 12px 0 !important;
}

.logbook-wp-main-navigation ul.logbook-wp-nav-menu > li > a {
    color: #6B7280 !important;
    font-weight: 500 !important;
    font-size: 0.9375rem !important;
    transition: color 0.2s ease !important;
    font-family: 'Inter', sans-serif !important;
}

.logbook-wp-main-navigation ul.logbook-wp-nav-menu > li:hover > a,
.logbook-wp-main-navigation ul.logbook-wp-nav-menu > li.focus > a {
    color: #3B82F6 !important;
}

.logbook-wp-main-navigation ul.logbook-wp-nav-menu .current_page_item > a,
.logbook-wp-main-navigation ul.logbook-wp-nav-menu .current-menu-item > a,
.logbook-wp-main-navigation ul.logbook-wp-nav-menu .current_page_ancestor > a,
.logbook-wp-main-navigation ul.logbook-wp-nav-menu .current-menu-ancestor > a {
    color: #3B82F6 !important;
    font-weight: 600 !important;
}

.logbook-wp-main-navigation ul ul li:hover > a,
.logbook-wp-main-navigation ul ul li.focus > a {
    background-color: #3B82F6 !important;
    color: #FFFFFF !important;
}

.logbook-wp-main-navigation .sticky-nav {
    background: #FFFFFF !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #E5E7EB !important;
}

/* ========================================
   BACKGROUND & LAYOUT
   ======================================== */

.bg-color {
    background: #F8FAFC !important;
}

.logbook-wp-wp-blog-section {
    background: #F8FAFC !important;
}

.wp-index-blog-section {
    background: #F8FAFC !important;
    width: 65%;
    padding: 44px 16px;
    column-width: 15vw;
    grid-gap: 32px;
}

/* ========================================
   POST CARDS - FORCE BLUE ACCENTS
   ======================================== */

.post {
    position: relative;
    background: #FFFFFF !important;
    overflow: hidden;
    width: 100%;
    box-shadow: none !important;
    margin: 0 24px 32px 0;
    display: inline-block;
    border-radius: 14px !important;
    border: 1px solid #E5E7EB !important;
    transition: all 0.2s ease !important;
}

.post:hover {
    transform: translateY(-4px) !important;
    border-color: #3B82F6 !important;
}

.post .post-title a {
    color: #111827 !important;
    font-weight: 600 !important;
    transition: color 0.2s ease !important;
    font-family: 'Inter', sans-serif !important;
}

.post .post-title a:hover,
.post .post-title a:focus {
    color: #3B82F6 !important;
    text-decoration: none !important;
}

/* ========================================
   POST META - FORCE BLUE
   ======================================== */

.post-sub-link ul:not(.author-category-meta):not(.post-categories) li:not(.entry-author-avatar):not(.entry-read-time):not(:last-child):after {
    display: inline-block;
    content: "";
    width: 1px;
    background-color: #E5E7EB !important;
    height: 1rem;
    margin: 0 0.5rem;
    position: relative;
    bottom: -0.2rem;
}

.post-sub-link a,
.post-sub-link a:visited {
    color: #6B7280 !important;
    transition: color 0.2s ease !important;
}

.post-sub-link a:hover {
    color: #3B82F6 !important;
}

.byline {
    text-transform: capitalize !important;
    font-style: normal !important;
    font-weight: 500 !important;
    color: #6B7280 !important;
    font-size: 0.8125rem !important;
    font-family: 'JetBrains Mono', monospace !important;
}

.posted-on {
    font-size: 0.8125rem !important;
    font-style: normal !important;
    font-weight: 500 !important;
    color: #6B7280 !important;
    font-family: 'JetBrains Mono', monospace !important;
}

/* ========================================
   CATEGORIES & BADGES - FORCE BLUE
   ======================================== */

.logbook-wp-wp-blog-section .blog-wrap .content-part .category-name a,
.post-categories a,
.cat-links a,
a[rel="category tag"],
.category a,
.entry-meta .cat-links a {
    background-color: #3B82F6 !important;
    border-radius: 10px !important;
    padding: 4px 12px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    color: #FFFFFF !important;
    font-family: 'Inter', sans-serif !important;
    text-decoration: none !important;
}

/* ========================================
   READ MORE LINK - FORCE BLUE & FIX LAYOUT
   ======================================== */

.read-more:before {
    display: none !important;
}

.read-more:after {
    content: '→' !important;
    font-family: 'Inter', sans-serif !important;
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    transform: none !important;
    margin-left: 8px !important;
    color: #3B82F6 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    transition: margin-left 0.2s ease !important;
}

.post-readmore {
    clear: both !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 20px !important;
    margin-top: 20px !important;
    position: relative !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 10px !important;
    color: #111827 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    background: #FFFFFF !important;
    font-family: 'Inter', sans-serif !important;
    white-space: nowrap !important;
    width: auto !important;
    text-align: left !important;
}

.post-readmore:hover {
    border-color: #3B82F6 !important;
    color: #3B82F6 !important;
    background: #F8FAFC !important;
}

.post-readmore:hover .read-more:after {
    margin-left: 12px !important;
}

.read-more,
.read-more:hover,
.read-more:focus,
.read-more:visited {
    color: #111827 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

.post-readmore:hover .read-more {
    color: #3B82F6 !important;
}

/* ========================================
   PAGINATION - FORCE BLUE
   ======================================== */

.logbook-wp-wp-blog-section .pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 10px;
    justify-content: center !important;
    gap: 8px;
}

.logbook-wp-wp-blog-section .pagination span.current {
    background: #3B82F6 !important;
    z-index: 1;
    color: #FFFFFF !important;
    border-color: #3B82F6 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

.logbook-wp-wp-blog-section .pagination .page-numbers {
    border-radius: 10px !important;
    border: 1px solid #E5E7EB !important;
    transition: all 0.2s ease !important;
    font-family: 'Inter', sans-serif !important;
}

.logbook-wp-wp-blog-section .pagination .page-numbers:hover {
    color: #FFFFFF !important;
    background-color: #3B82F6 !important;
    border-color: #3B82F6 !important;
}

/* ========================================
   SCROLL TO TOP - FORCE BLUE
   ======================================== */

#myBtn {
    background-color: #3B82F6 !important;
    border-radius: 10px !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

#myBtn:hover {
    background-color: #2563EB !important;
    transform: translateY(-2px) !important;
}

/* ========================================
   WIDGETS & SIDEBAR - FORCE BLUE
   ======================================== */

/* Search button */
.widget_search .wp-block-search .wp-block-search__button,
.search-submit,
button[type="submit"],
input[type="submit"],
.widget_search button,
.widget_search input[type="submit"] {
    background: #3B82F6 !important;
    color: #FFFFFF !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: background 0.2s ease !important;
    font-family: 'Inter', sans-serif !important;
    border: none !important;
}

.widget_search .wp-block-search .wp-block-search__button:hover,
.search-submit:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background: #2563EB !important;
}

/* Widget titles and accents */
.logbook-wp-wp-blog-section .content-part .block:before {
    background-color: #3B82F6 !important;
}

.wp-block-latest-comments .wp-block-latest-comments__comment-meta,
.wp-block-latest-comments a {
    color: #3B82F6 !important;
}

.widget-area .widget-title:after,
.wp-block-group .wp-block-group__inner-container h2:after,
.widget-title:after,
h2.widget-title:after,
.sidebar .widget-title:after {
    background-color: #3B82F6 !important;
}

/* Widget list icons */
.widget-area .widget_archive ul li a:before,
.wp-block-group .wp-block-archives li a:before,
.widget_archive li:before,
.widget_archive li a:before {
    color: #3B82F6 !important;
}

.widget-area .widget_categories ul li a:before,
.wp-block-group .wp-block-categories li a:before,
.widget_categories li:before,
.widget_categories li a:before {
    color: #3B82F6 !important;
}

/* Recent posts widget */
.widget_recent_entries a,
.widget_recent_comments a,
.widget ul li a {
    color: #3B82F6 !important;
}

/* Sidebar headings */
.sidebar h2,
.sidebar h3,
.widget-area h2,
.widget-area h3 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
}

/* ========================================
   CONTENT LINKS - FORCE BLUE
   ======================================== */

.content-part a,
.content-part a:visited,
.entry-content a,
.entry-content a:visited,
.post-content a,
article a,
.comment-content a {
    color: #3B82F6 !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(59, 130, 246, 0.3) !important;
    transition: all 0.2s ease !important;
}

.content-part a:hover,
.entry-content a:hover,
article a:hover {
    border-bottom-color: #3B82F6 !important;
}

.page_link a {
    color: #3B82F6 !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.comments-area .comment-content a {
    color: #3B82F6 !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(59, 130, 246, 0.3) !important;
}

/* Edit links */
.post-edit-link,
.comment-edit-link,
a.comment-edit-link,
a.post-edit-link {
    color: #3B82F6 !important;
    background: transparent !important;
    border: 1px solid #3B82F6 !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.post-edit-link:hover,
.comment-edit-link:hover {
    background: #3B82F6 !important;
    color: #FFFFFF !important;
}

/* ========================================
   FORMS - FORCE BLUE
   ======================================== */

.form-submit .submit {
    background: #3B82F6 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    transition: all 0.2s ease !important;
    font-family: 'Inter', sans-serif !important;
}

.form-submit .submit:hover,
.form-submit .submit:focus {
    background-color: #2563EB !important;
    transform: translateY(-1px) !important;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

@media screen and (max-width: 2560px) {
    .wp-index-blog-section {
        column-width: 20vw !important;
        width: 70% !important;
    }
}

@media screen and (max-width: 1600px) {
    .wp-index-blog-section {
        column-width: 20vw !important;
        width: 80% !important;
    }
}

@media screen and (max-width: 1440px) {
    .wp-index-blog-section {
        width: 80% !important;
        column-width: 20vw !important;
    }
}

@media screen and (max-width: 1024px) {
    .wp-index-blog-section {
        width: 90% !important;
        column-width: 20vw !important;
    }
}

@media screen and (max-width: 1023px) {
    .logbook-wp-main-navigation .wrapper {
        background: #111827 !important;
        padding: 12px 0 !important;
    }
    
    .logbook-wp-main-navigation ul.logbook-wp-nav-menu > li > a {
        color: #FFFFFF !important;
    }
    
    .wp-index-blog-section {
        background: #F8FAFC !important;
        width: 100% !important;
    }
}