/* ==========================================================================
   JOHN COUTO BRAND STYLESHEET (CYBERPUNK SLATE/CYAN/PINK THEME)
   Consolidated & Optimized for SiteOrigin CSS
   ========================================================================== */

/* --- PART 1: LOGO INVERSION --- */
/* Inverts John's solid black logo to crisp white with transition */
.site-header .logo img {
    filter: invert(1) brightness(2);
    transition: filter 0.3s ease;
}

/* Subtle cyan brand hover effect on the header logo */
.site-header .logo img:hover {
    filter: invert(1) sepia(1) saturate(10) hue-rotate(140deg) brightness(1.2);
}


/* --- PART 2: SLEEK DARK HEADER & NAVIGATION MENU --- */
/* Unified deep dark slate background for masthead */
#masthead {
    background: #0d0e12 !important;
    border-bottom: 2px solid #161820;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

/* Rounded, structured inner navigation menu container */
.main-navigation {
    background-color: #11131a !important;
    border-radius: 8px;
}

/* Custom Navigation Menu items (Grey-Cyan default styling) */
.main-navigation ul li a {
    color: #b3b9c9 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

/* Glowing cyber-pink state on hovering over menus */
.main-navigation ul li:hover > a {
    background-color: transparent !important;
    color: #ff2a5f !important;
    text-shadow: 0 0 8px rgba(255, 42, 95, 0.6);
}

/* Cyan accent highlight for active page/anchor menu tags */
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a {
    color: #00f3ff !important;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.6);
}


/* --- PART 3: ZERO-MARGIN LAYOUT TWEAKS --- */
/* Flush-fitting, non-padded top container block setups */
body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#page {
    margin-top: 0 !important;
}

#masthead {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Completely collapse theme sentinel spacing blocks */
.masthead-sentinel {
    display: none !important;
    height: 0 !important;
}

#main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

#main-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}


/* --- PART 4: GLOBAL DARK THEME & TYPOGRAPHY OVERRIDES --- */
/* Master dark mode backdrop for layout areas */
body.layout-full,
body.page-template-default,
#page-wrapper,
#page,
#page-wrapper #page {
    background-color: #0d0e12 !important;
    color: #cbd5e1 !important;
}

#main {
    background: transparent !important;
}

/* Highly readable paragraphs and lists */
#main,
#main p,
#main ul li,
#main ol li,
.entry-content,
.entry-content p,
.siteorigin-panels-flat p {
    color: #e2e8f0 !important;
    font-size: 17px !important;
    line-height: 1.75 !important;
}

/* Page titles (Vantage legacy h1 setup) with pink accent border */
header.page-header h1.page-title,
.page-header h1,
#main h1.page-title {
    color: #ffffff !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 30px !important;
    border-left: 4px solid #ff2a5f !important;
    padding-left: 15px !important;
    text-shadow: 0 0 10px rgba(255, 42, 95, 0.2);
}

/* Standard h1 tags */
#main h1,
.entry-content h1,
article.post h1 {
    color: #ffffff !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    margin-bottom: 24px !important;
    letter-spacing: -0.5px !important;
}

/* Cybernetic Cyan Subtitles (h2) */
#main h2,
.entry-content h2 {
    color: #00f3ff !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    margin-top: 35px !important;
    margin-bottom: 15px !important;
    letter-spacing: -0.3px !important;
}

/* Neon Pink Small Headings (h3) */
#main h3,
.entry-content h3 {
    color: #ff2a5f !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-top: 28px !important;
    margin-bottom: 12px !important;
}

/* Bold tag content colors */
#main strong,
.entry-content strong {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Bold pink styling for image figcaptions and attachments */
.wp-caption-text, 
figcaption, 
.gallery-caption {
    color: #ff2a5f !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-top: 10px !important;
    text-align: center !important;
    text-shadow: 0 0 5px rgba(255, 42, 95, 0.3);
}

/* Dark, sleek footer adjustments */
#colophon {
    background-color: #08090c !important;
    border-top: 1px solid #161820;
    color: #64748b !important;
}


/* --- PART 5: CUSTOM NEON BUTTONS FOR CTAs --- */
/* Custom cyan outlined neon button */
.btn-cyan {
    background: transparent !important;
    color: #00f3ff !important;
    border: 2px solid #00f3ff !important;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
    transition: all 0.3s ease;
}
.btn-cyan:hover {
    background: #00f3ff !important;
    color: #0d0e12 !important;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.6);
}

/* Custom YouTube solid-to-outline button */
.btn-youtube {
    background: #ff0000 !important;
    color: #ffffff !important;
    border: 2px solid #ff0000 !important;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
    transition: all 0.3s ease;
}
.btn-youtube:hover {
    background: transparent !important;
    color: #ff0000 !important;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
}


/* --- PART 6: DYNAMIC CYBERPUNK POST CARD GRID --- */
/* Forces standard vertical blog posts to align inside a responsive grid */
.siteorigin-panels-flat,
.post-loop-grid,
.sow-loop-posts,
#main .sow-loop-posts {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 30px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Styles post nodes as beautiful dark gray cards */
#main article.post,
#main article.type-post,
.sow-loop-posts article,
.post-loop-grid article {
    background-color: #161820 !important;
    border: 1px solid #222530 !important;
    border-radius: 16px !important;
    padding: 30px !important;
    margin-bottom: 0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Lift cards and glow cyan on hover */
#main article.post:hover,
#main article.type-post:hover,
.sow-loop-posts article:hover,
.post-loop-grid article:hover {
    transform: translateY(-5px) !important;
    border-color: #00f3ff !important;
    box-shadow: 0 8px 30px rgba(0, 243, 255, 0.2) !important;
}

/* Bright white titles inside post grid blocks */
#main article.post h1.entry-title a,
.sow-loop-posts article h1.entry-title a {
    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

#main article.post h1.entry-title a:hover,
.sow-loop-posts article h1.entry-title a:hover {
    color: #00f3ff !important;
}

/* Force page title "John's Insights" left neon border accent */
#main h1.page-title {
    border-left: 4px solid #ff2a5f !important;
    padding-left: 15px !important;
    color: #ffffff !important;
}


/* Style the standard 3-column circle icon widgets into sleek cyber-cards */
#main .widget_circleicon-widget,
.circle-icon-box {
    background-color: #161820 !important;
    border: 1px solid #222530 !important;
    border-radius: 16px !important;
    padding: 35px 25px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    text-align: center !important;
}

/* Cyber Pink hover glow effect on these blocks */
#main .widget_circleicon-widget:hover,
.circle-icon-box:hover {
    transform: translateY(-4px) !important;
    border-color: #ff2a5f !important;
    box-shadow: 0 8px 25px rgba(255, 42, 95, 0.2) !important;
}

/* Style the circle icons container backgrounds and text shadow */
.circle-icon-box .circle-icon-wrapper .circle-icon {
    background: #11131a !important;
    border: 1px solid #222530 !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2) !important;
}

/* Colorize the vector FontAwesome icons Cyan */
.circle-icon-box .circle-icon-wrapper .circle-icon [class*="fa-"] {
    color: #00f3ff !important;
    text-shadow: 0 0 5px rgba(0, 243, 255, 0.5) !important;
}

/* Fix the overlap: push the h4 titles down cleanly below the icon wrapper */
.circle-icon-box h4,
#main .circle-icon-box h4 {
    margin-top: 35px !important; /* Forces vertical separation */
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Adjust the spacing of the icon wrapper container itself */
.circle-icon-box .circle-icon-wrapper {
    margin-bottom: 25px !important; /* Creates vertical breathing room */
    display: block !important;
}

/* Gray description copies */
.circle-icon-box p.text {
    color: #b3b9c9 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

/* Style the custom interactive page bottom links */
.circle-icon-box a.more-button {
    color: #ff2a5f !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
    margin-top: 15px !important;
}

.circle-icon-box a.more-button:hover {
    color: #00f3ff !important;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.5) !important;
}


/* Cyber Pink hover glow effect on these blocks */
#main .widget_circleicon-widget:hover,
.circle-icon-box:hover {
    transform: translateY(-4px) !important;
    border-color: #ff2a5f !important;
    box-shadow: 0 8px 25px rgba(255, 42, 95, 0.2) !important;
}

/* Style the circle icons container backgrounds and text shadow */
.circle-icon-box .circle-icon-wrapper .circle-icon {
    background: #11131a !important;
    border: 1px solid #222530 !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2) !important;
}

/* Colorize the vector FontAwesome icons Cyan */
.circle-icon-box .circle-icon-wrapper .circle-icon [class*="fa-"] {
    color: #00f3ff !important;
    text-shadow: 0 0 5px rgba(0, 243, 255, 0.5) !important;
}

/* Make block headers readable white */
.circle-icon-box h4 {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-top: 15px !important;
    margin-bottom: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Gray description copies */
.circle-icon-box p.text {
    color: #b3b9c9 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

/* Style the custom interactive page bottom links */
.circle-icon-box a.more-button {
    color: #ff2a5f !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
    margin-top: 15px !important;
}

.circle-icon-box a.more-button:hover {
    color: #00f3ff !important;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.5) !important;
}


/* --- PART 8: SITEORIGIN HEADLINE WIDGET & ROW STYLES --- */
/* Clean away legacy light gray background stylers on home */
#main .wide-grey,
#main .panel-row-style-for-14-1,
#main .panel-row-style {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Style the siteorigin headline blocks */
.widget_headline-widget {
    border: none !important;
    padding: 30px 0 !important;
    text-align: center !important;
    background: transparent !important;
}

/* Glowing Neon Cyan Title for Section Headlines */
.widget_headline-widget h1,
#main .widget_headline-widget h1 {
    color: #00f3ff !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.2) !important;
    border: none !important;
    margin-bottom: 10px !important;
}

/* Glowing pink gradient separator lines */
.widget_headline-widget .decoration,
.widget_headline-widget .decoration-inside {
    border: none !important;
    background: none !important;
}

.widget_headline-widget .decoration {
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #ff2a5f, transparent) !important;
    max-width: 250px !important;
    margin: 15px auto !important;
}

/* Glowing Pink subtitle styles */
.widget_headline-widget h3,
#main .widget_headline-widget h3 {
    color: #ff2a5f !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
}


/* --- PART 9: VANTAGE RECENT POSTS CAROUSEL & SIDEBAR --- */
/* Title styling (Latest Posts) with glowing cyan and pink bar */
#main .widget_siteorigin-panels-postloop h3.so-carousel-title,
#main .widget_siteorigin-panels-postloop h3.widget-title,
#main h3.widget-title {
    background: transparent !important;
    border: none !important;
    margin-bottom: 25px !important;
    padding: 0 !important;
}

#main h3.widget-title .vantage-carousel-title-text,
#main h3.widget-title span {
    color: #00f3ff !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-left: 3px solid #ff2a5f !important;
    padding-left: 10px !important;
    display: inline-block !important;
}

/* Remove default carousel item list styling & padding */
#main .vantage-carousel-wrapper,
#main .vantage-carousel {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Transform each carousel item block into a sleek card */
#main .vantage-carousel li.carousel-entry {
    background-color: #161820 !important;
    border: 1px solid #222530 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.3s ease !important;
    list-style: none !important;
}

#main .vantage-carousel li.carousel-entry:hover {
    transform: translateY(-4px) !important;
    border-color: #00f3ff !important;
    box-shadow: 0 8px 25px rgba(0, 243, 255, 0.15) !important;
}

/* Carousel entry titles */
#main .vantage-carousel li.carousel-entry h3,
#main .vantage-carousel li.carousel-entry h3 a {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    margin-top: 15px !important;
}

#main .vantage-carousel li.carousel-entry h3 a:hover {
    color: #ff2a5f !important;
}


/* --- PART 10: CAROUSEL THUMBNAILS & DARK PLACEHOLDERS --- */
/* Format image containers for latest posts */
#main .vantage-carousel li.carousel-entry .thumbnail,
#main .vantage-carousel li.carousel-entry .thumbnail a {
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid #222530 !important;
    background-color: #11131a !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
    height: 150px !important; /* Set standard height for carousel thumbnails */
    display: block !important;
    position: relative !important;
}

/* Force standard images inside thumbnails to cover properly */
#main .vantage-carousel li.carousel-entry .thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
}

/* High-tech cyberpunk fallback grid for posts without featured images */
#main .vantage-carousel li.carousel-entry .thumbnail .default-thumbnail {
    background-image: 
        linear-gradient(rgba(0, 243, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 243, 255, 0.05) 1px, transparent 1px) !important;
    background-size: 10px 10px !important;
    border: 1px solid rgba(0, 243, 255, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

/* Custom glow text placeholder "AI" inside fallback boxes */
#main .vantage-carousel li.carousel-entry .thumbnail .default-thumbnail::after {
    content: "AI" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: rgba(0, 243, 255, 0.4) !important;
    letter-spacing: 2px !important;
    text-shadow: 0 0 5px rgba(0, 243, 255, 0.6) !important;
}