/*
===============================================
WORDPRESS THEME: deb-nostalgia v1.1
Updated for Prismatic & Gutenberg Code Blocks
===============================================

QUICK FIX FOR PRISMATIC:
1. Go to WordPress Admin > Settings > Prismatic
2. Under "Code Escaping" select "Enable" 
3. Under "Highlight.js" tab, check "Enable"
4. Select your preferred theme (recommend: "Atom One Light" for this theme)
5. Check the languages: C, C++, C#, JavaScript, PHP, Python, etc.
6. Save Changes

USING CODE BLOCKS IN GUTENBERG:
1. Add a "Code" block in Gutenberg editor
2. In the block settings (right sidebar), set the language to "cpp" or "c"
3. Paste your code
4. Publish!

===============================================
FILE 1: style.css (UPDATED)
===============================================
*/

/*
Theme Name: deb-nostalgia
Theme URI: https://yoursite.com
Author: Your Name
Author URI: https://yoursite.com
Description: A nostalgic light-colored WordPress theme for programming blogs, inspired by early 2000s Blogspot aesthetic. Perfect for showcasing code with Prismatic syntax highlighting.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: deb-nostalgia
Tags: blog, programming, code, nostalgic, light, two-columns, custom-colors, custom-menu, featured-images, block-styles
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    font-family: Verdana, Arial, sans-serif;
    background: #e8f4f8 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect fill="%23d4e9f7" width="100" height="100"/><circle cx="50" cy="50" r="30" fill="%23c8e1f5" opacity="0.3"/></svg>');
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    max-width: 100%;
}

.page-wrapper,
body.page-wrapper,
#page {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    background: white;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    overflow-x: hidden;
    position: relative;
}

/* Ensure all direct children respect boundaries */
.page-wrapper > *,
#page > * {
    max-width: 100%;
    box-sizing: border-box;
}

/* Header Styles */
header.site-header {
    background: linear-gradient(180deg, #6ba3d8 0%, #4a8bc2 100%);
    padding: 30px 20px;
    border-bottom: 5px solid #3d7ba8;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.site-title {
    font-family: Georgia, serif;
    color: white;
    font-size: 2.8em;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    margin-bottom: 10px;
    text-decoration: none;
    display: block;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.site-title a {
    color: white;
    text-decoration: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.site-description {
    color: #e6f2ff;
    font-size: 1.1em;
    font-style: italic;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Navigation */
nav.main-navigation {
    background: linear-gradient(180deg, #5c9bd1 0%, #4a8bc2 100%);
    border-bottom: 3px solid #3d7ba8;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.nav-menu {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    max-width: 100%;
}

.nav-menu li {
    margin: 0;
}

.nav-menu a {
    display: block;
    padding: 12px 25px;
    color: white;
    text-decoration: none;
    border-right: 1px solid #6ba3d8;
    transition: all 0.3s;
    font-weight: bold;
    font-size: 0.9em;
}

.nav-menu a:hover,
.nav-menu .current-menu-item a {
    background: #3d7ba8;
}

/* Main Container */
.main-container,
#primary-container,
.site-content {
    display: flex;
    min-height: 600px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

.content-area,
#primary,
main.content-area {
    flex: 1 1 auto;
    padding: 30px;
    background: #fefefe;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Critical: Force content area to shrink when needed */
@media (min-width: 769px) {
    .content-area,
    #primary,
    main.content-area {
        width: calc(100% - 320px); /* 280px sidebar + 40px padding */
        max-width: calc(100% - 320px);
    }
}

/* Sidebar */
.sidebar,
aside.sidebar,
#secondary {
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #f9fcff 0%, #e8f4f8 100%);
    padding: 20px;
    border-left: 2px solid #d0e8f5;
    overflow-x: hidden;
}

.widget,
.sidebar .widget,
#secondary .widget {
    margin-bottom: 25px !important;
    background: white !important;
    padding: 15px !important;
    border-radius: 8px !important;
    border: 1px solid #d0e8f5 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
}

.widget-title,
.sidebar .widget-title,
#secondary .widget-title,
.widgettitle {
    color: #4a8bc2 !important;
    font-size: 1.2em !important;
    margin-bottom: 15px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #6ba3d8 !important;
    font-family: Georgia, serif !important;
    font-weight: normal !important;
}

.widget ul,
.sidebar .widget ul,
#secondary .widget ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.widget ul li,
.sidebar .widget ul li,
#secondary .widget ul li {
    padding: 8px !important;
    margin: 5px 0 !important;
    background: #f0f8ff !important;
    border-left: 3px solid #6ba3d8 !important;
    transition: all 0.3s !important;
    font-size: 0.9em !important;
    list-style: none !important;
}

.widget ul li:hover,
.sidebar .widget ul li:hover,
#secondary .widget ul li:hover {
    background: #e1f1ff !important;
    border-left-color: #4a8bc2 !important;
    transform: translateX(3px);
}

.widget ul li a,
.sidebar .widget ul li a,
#secondary .widget ul li a {
    color: #333 !important;
    text-decoration: none !important;
}

.widget ul li a:hover {
    color: #4a8bc2 !important;
}

/* Search Widget */
.widget_search,
#searchform {
    background: white !important;
}

.widget_search .search-field,
#searchform input[type="text"],
#searchform input[type="search"] {
    width: 100% !important;
    padding: 10px !important;
    border: 2px solid #d0e8f5 !important;
    border-radius: 5px !important;
    font-family: Verdana, Arial, sans-serif !important;
    font-size: 0.9em !important;
    margin-bottom: 10px !important;
}

.widget_search .search-submit,
#searchform input[type="submit"] {
    width: 100% !important;
    padding: 10px !important;
    background: linear-gradient(180deg, #6ba3d8 0%, #4a8bc2 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 5px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
}

.widget_search .search-submit:hover,
#searchform input[type="submit"]:hover {
    background: linear-gradient(180deg, #4a8bc2 0%, #3d7ba8 100%) !important;
}

/* Recent Posts Widget */
.widget_recent_entries ul li {
    display: block !important;
}

.widget_recent_entries .post-date {
    display: block;
    font-size: 0.8em;
    color: #888;
    margin-top: 3px;
}

/* Categories Widget */
.widget_categories ul li {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.widget_categories ul li .count {
    background: #6ba3d8;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8em;
}

/* Archives Widget */
.widget_archive ul li {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* Recent Comments Widget */
.widget_recent_comments ul li {
    padding: 10px !important;
}

.widget_recent_comments .comment-author-link {
    font-weight: bold;
    color: #4a8bc2;
}

/* Tag Cloud Widget */
.widget_tag_cloud .tagcloud,
.wp-block-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
}

.widget_tag_cloud .tagcloud a,
.wp-block-tag-cloud a {
    background: #e8f4f8 !important;
    color: #4a8bc2 !important;
    padding: 5px 12px !important;
    border-radius: 15px !important;
    text-decoration: none !important;
    font-size: 0.9em !important;
    border: 1px solid #d0e8f5 !important;
    transition: all 0.3s !important;
    display: inline-block !important;
}

.widget_tag_cloud .tagcloud a:hover,
.wp-block-tag-cloud a:hover {
    background: #6ba3d8 !important;
    color: white !important;
}

/* Calendar Widget */
.widget_calendar table {
    width: 100%;
    border-collapse: collapse;
}

.widget_calendar caption {
    color: #4a8bc2;
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 1.1em;
}

.widget_calendar th {
    background: #e8f4f8;
    padding: 5px;
    font-size: 0.85em;
    color: #4a8bc2;
}

.widget_calendar td {
    padding: 5px;
    text-align: center;
    border: 1px solid #f0f8ff;
}

.widget_calendar td a {
    color: #4a8bc2 !important;
    font-weight: bold !important;
}

.widget_calendar td#today {
    background: #6ba3d8;
    color: white;
    font-weight: bold;
}

/* Blog Post Styles */
article.post,
article {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    max-width: 100%;
    overflow-x: hidden;
    word-wrap: break-word;
}

.post-header {
    border-bottom: 3px solid #6ba3d8;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.entry-title {
    color: #2c5f8d;
    font-size: 2em;
    font-family: Georgia, serif;
    margin-bottom: 10px;
}

.entry-title a {
    color: #2c5f8d;
    text-decoration: none;
}

.entry-title a:hover {
    color: #4a8bc2;
}

.entry-meta {
    color: #888;
    font-size: 0.85em;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.meta-item::before {
    content: "📅";
}

.meta-item.author::before {
    content: "✍️";
}

.meta-item.category::before {
    content: "📂";
}

/* Post Content */
.entry-content,
.post-content {
    color: #444;
    font-size: 1em;
    margin-bottom: 20px;
    line-height: 1.8;
    overflow-x: hidden;
    max-width: 100%;
    word-wrap: break-word;
}

.entry-content p {
    margin-bottom: 15px;
    max-width: 100%;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    color: #4a8bc2;
    margin: 25px 0 15px 0;
    font-family: Georgia, serif;
    word-wrap: break-word;
}

.entry-content img,
img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 5px;
    margin: 15px 0;
}

.entry-content ul,
.entry-content ol {
    margin-left: 30px;
    margin-bottom: 15px;
    max-width: 100%;
}

.entry-content li {
    margin-bottom: 8px;
}

/* ============================================
   PRISMATIC & GUTENBERG CODE BLOCK STYLES
   ============================================ */

/* Gutenberg Code Block Wrapper */
.wp-block-code {
    background: #f5f5f5 !important;
    border: 2px solid #d0d0d0 !important;
    border-radius: 8px !important;
    margin: 25px 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    line-height: 1.8 !important;
    border-left: 2px solid #d0d0d0 !important;
}

/* Remove any blue left border artifacts */
.wp-block-code::before,
.wp-block-code::after,
.wp-block-code code::before,
.wp-block-code code::after {
    display: none !important;
    content: none !important;
}

/* Code element inside Gutenberg block */
.wp-block-code code {
    display: block !important;
    padding: 20px !important;
    background: white !important;
    color: #333 !important;
    font-family: 'Courier New', Consolas, Monaco, monospace !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: pre !important;
    border: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    word-wrap: normal !important;
    box-sizing: border-box !important;
}

/* Prismatic pre wrapper */
pre[class*="language-"],
pre {
    background: white !important;
    border: 2px solid #d0d0d0 !important;
    border-radius: 8px !important;
    margin: 25px 0 !important;
    padding: 20px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    line-height: 1.8 !important;
    font-size: 16px !important;
    border-left: 2px solid #d0d0d0 !important;
}

/* Remove blue border artifacts from pre elements */
pre::before,
pre::after,
pre[class*="language-"]::before,
pre[class*="language-"]::after {
    display: none !important;
    content: none !important;
}

/* Prismatic code element */
code[class*="language-"],
pre code {
    font-family: 'Courier New', Consolas, Monaco, monospace !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    text-shadow: none !important;
    background: transparent !important;
    display: block !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    word-wrap: normal !important;
    white-space: pre !important;
    box-sizing: border-box !important;
    border: none !important;
    border-left: none !important;
}

/* Remove any pseudo-elements from code elements */
code::before,
code::after,
code[class*="language-"]::before,
code[class*="language-"]::after {
    display: none !important;
    content: none !important;
}

/* Ensure code doesn't break layout on smaller content areas */
@media (min-width: 769px) {
    .entry-content .wp-block-code,
    .entry-content pre {
        max-width: calc(100vw - 420px) !important; /* Account for sidebar + padding */
    }
}

@media (max-width: 768px) {
    .entry-content .wp-block-code,
    .entry-content pre {
        max-width: calc(100vw - 80px) !important; /* Account for padding on mobile */
    }
}

/* Override Prismatic's default dark styles for light theme */
.hljs {
    background: white !important;
    color: #333 !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    border: none !important;
    border-left: none !important;
}

.hljs::before,
.hljs::after {
    display: none !important;
    content: none !important;
}

/* Light Theme Syntax Colors for Prismatic/Highlight.js */
.hljs-comment,
.hljs-quote {
    color: #888888 !important;
    font-style: italic !important;
    line-height: 1.8 !important;
    border-left: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    background: transparent !important;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
    color: #0066cc !important;
    font-weight: bold !important;
    line-height: inherit !important;
}

.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
    color: #cc6600 !important;
    line-height: inherit !important;
}

.hljs-string,
.hljs-doctag {
    color: #008800 !important;
    line-height: inherit !important;
}

.hljs-title,
.hljs-section,
.hljs-selector-id {
    color: #cc6600 !important;
    font-weight: bold !important;
    line-height: inherit !important;
}

.hljs-type,
.hljs-class .hljs-title {
    color: #006666 !important;
    font-weight: bold !important;
    line-height: inherit !important;
}

.hljs-tag,
.hljs-name,
.hljs-attribute {
    color: #0066cc !important;
    line-height: inherit !important;
}

.hljs-regexp,
.hljs-link {
    color: #008800 !important;
    line-height: inherit !important;
}

.hljs-symbol,
.hljs-bullet {
    color: #cc00cc !important;
    line-height: inherit !important;
}

.hljs-built_in,
.hljs-builtin-name {
    color: #006666 !important;
    line-height: inherit !important;
}

.hljs-meta {
    color: #cc00cc !important;
    line-height: inherit !important;
}

.hljs-meta-string {
    color: #008800 !important;
    line-height: inherit !important;
}

.hljs-deletion {
    background: #fdd !important;
    line-height: inherit !important;
}

.hljs-addition {
    background: #dfd !important;
    line-height: inherit !important;
}

.hljs-emphasis {
    font-style: italic !important;
    line-height: inherit !important;
}

.hljs-strong {
    font-weight: bold !important;
    line-height: inherit !important;
}

/* Ensure all code-related elements have consistent spacing */
pre span,
code span,
.hljs span,
[class*="language-"] span,
.token {
    line-height: inherit !important;
}

/* Remove ALL potential blue border artifacts from code blocks */
.entry-content pre,
.entry-content code,
.entry-content .wp-block-code,
.post-content pre,
.post-content code,
.post-content .wp-block-code {
    border-left: none !important;
}

.entry-content pre::before,
.entry-content pre::after,
.entry-content code::before,
.entry-content code::after,
.entry-content .wp-block-code::before,
.entry-content .wp-block-code::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* Remove WordPress default code block styling that might add blue borders */
.wp-block-code,
.wp-block-code code {
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Ensure Prismatic doesn't add any decorative elements */
pre.wp-block-code,
.wp-block-code > code,
pre[class*="language-"] {
    position: relative !important;
}

pre.wp-block-code::before,
.wp-block-code > code::before,
pre[class*="language-"]::before {
    display: none !important;
}

/* Alternative: If using Prism.js instead of Highlight.js */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: #888888 !important;
    font-style: italic !important;
    line-height: inherit !important;
    border-left: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.token.punctuation {
    color: #333333 !important;
    line-height: inherit !important;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
    color: #cc6600 !important;
    line-height: inherit !important;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
    color: #008800 !important;
    line-height: inherit !important;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
    color: #333333 !important;
    line-height: inherit !important;
}

.token.atrule,
.token.attr-value,
.token.keyword {
    color: #0066cc !important;
    font-weight: bold !important;
    line-height: inherit !important;
}

.token.function,
.token.class-name {
    color: #cc6600 !important;
    line-height: inherit !important;
}

.token.regex,
.token.important,
.token.variable {
    color: #cc00cc !important;
    line-height: inherit !important;
}

/* Custom code block with header */
.code-block {
    background: #f5f5f5;
    border: 2px solid #d0d0d0;
    border-radius: 8px;
    margin: 25px 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.code-title-bar {
    background: linear-gradient(180deg, #e0e0e0 0%, #c8c8c8 100%);
    padding: 10px 15px;
    border-bottom: 2px solid #b0b0b0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Courier New', monospace;
    font-weight: bold;
}

.code-filename {
    color: #333;
}

.code-lang {
    background: #4a8bc2;
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.8em;
}

/* Inline code */
code {
    font-family: 'Courier New', Consolas, Monaco, monospace;
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 1em;
    color: #c7254e;
    border: 1px solid #e0e0e0;
    line-height: 1.6;
}

/* But not for code blocks */
pre code {
    background: transparent;
    padding: 0;
    border: none;
    color: inherit;
    font-size: 16px;
    line-height: 1.8;
}

/* Info Box */
.info-box {
    background: linear-gradient(135deg, #e8f4f8 0%, #d4e9f7 100%);
    border: 2px solid #6ba3d8;
    border-radius: 8px;
    padding: 15px;
    margin: 20px 0;
}

.info-box h4 {
    color: #2c5f8d;
    margin-bottom: 10px;
    font-size: 1.1em;
}

/* Read More Link */
.read-more {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(180deg, #6ba3d8 0%, #4a8bc2 100%);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 15px;
    transition: all 0.3s;
    font-weight: bold;
}

.read-more:hover {
    background: linear-gradient(180deg, #4a8bc2 0%, #3d7ba8 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Comments */
.comments-area {
    background: #f9fcff;
    border: 2px solid #d0e8f5;
    border-radius: 8px;
    padding: 20px;
    margin-top: 30px;
}

.comments-title {
    color: #4a8bc2;
    font-size: 1.3em;
    margin-bottom: 15px;
    font-family: Georgia, serif;
}

.comment-list {
    list-style: none;
    padding: 0;
}

.comment {
    background: white;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    border-left: 3px solid #6ba3d8;
}

.comment-author {
    font-weight: bold;
    color: #4a8bc2;
    margin-bottom: 5px;
}

.comment-meta {
    font-size: 0.85em;
    color: #888;
    margin-bottom: 10px;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 30px 0;
}

.pagination a,
.pagination span {
    padding: 8px 15px;
    background: #f0f8ff;
    border: 2px solid #6ba3d8;
    border-radius: 5px;
    text-decoration: none;
    color: #4a8bc2;
    font-weight: bold;
}

.pagination a:hover {
    background: #6ba3d8;
    color: white;
}

.pagination .current {
    background: #4a8bc2;
    color: white;
}

/* Footer */
footer.site-footer {
    background: linear-gradient(180deg, #4a8bc2 0%, #3d7ba8 100%);
    color: white;
    text-align: center;
    padding: 25px;
    border-top: 5px solid #2c5f8d;
}

footer.site-footer p {
    margin: 5px 0;
}

footer.site-footer a {
    color: #e6f2ff;
    text-decoration: none;
}

footer.site-footer a:hover {
    text-decoration: underline;
}

/* Gutenberg Block Editor Styles */
.wp-block {
    max-width: 100%;
}

.wp-block-image img {
    border-radius: 8px;
}

.wp-block-quote {
    border-left: 4px solid #6ba3d8;
    padding-left: 20px;
    margin: 20px 0;
    font-style: italic;
    color: #666;
}

.wp-block-pullquote {
    border-top: 4px solid #6ba3d8;
    border-bottom: 4px solid #6ba3d8;
    padding: 20px 0;
    text-align: center;
}

/* Additional Sidebar Styling for Default WP Widgets */
.sidebar h2,
.sidebar h3,
#secondary h2,
#secondary h3 {
    color: #4a8bc2 !important;
    font-size: 1.2em !important;
    margin-bottom: 15px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #6ba3d8 !important;
    font-family: Georgia, serif !important;
}

.sidebar select,
#secondary select {
    width: 100% !important;
    padding: 8px !important;
    border: 2px solid #d0e8f5 !important;
    border-radius: 5px !important;
    background: white !important;
    font-family: Verdana, Arial, sans-serif !important;
}

/* Fix for plain text in sidebar */
.sidebar p,
#secondary p {
    color: #666 !important;
    font-size: 0.9em !important;
    line-height: 1.6 !important;
}

/* RSS Links */
.sidebar .rsswidget,
#secondary .rsswidget {
    color: #4a8bc2 !important;
    text-decoration: none !important;
}

.sidebar .rss-date,
#secondary .rss-date {
    display: block;
    font-size: 0.8em;
    color: #888;
    margin-top: 3px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .main-container {
        flex-direction: column;
    }
    
    .sidebar,
    aside.sidebar,
    #secondary {
        width: 100% !important;
        border-left: none;
        border-top: 2px solid #d0e8f5;
    }
    
    .nav-menu {
        flex-direction: column;
    }
    
    .nav-menu a {
        border-right: none;
        border-bottom: 1px solid #6ba3d8;
    }
    
    .site-title {
        font-size: 2em;
    }

    .entry-content pre,
    .wp-block-code {
        font-size: 12px !important;
    }
}

/* WordPress Specific */
.alignleft {
    float: left;
    margin: 0 20px 10px 0;
    max-width: 50%;
}

.alignright {
    float: right;
    margin: 0 0 10px 20px;
    max-width: 50%;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

.wp-caption {
    max-width: 100%;
}

.wp-caption-text {
    text-align: center;
    padding: 5px;
    font-size: 0.9em;
    color: #666;
}

.sticky {
    border-left: 5px solid #4a8bc2;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
    max-width: 100%;
}

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

/* Prevent all potential overflow issues */
.entry-content *,
.post-content *,
article * {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* But allow code blocks to scroll horizontally */
.entry-content pre,
.entry-content pre *,
.entry-content code,
.wp-block-code,
.wp-block-code * {
    word-wrap: normal;
    overflow-wrap: normal;
}


/*
===============================================
FILE 2: functions.php (UPDATED)
===============================================
*/


/* Optional: Homepage-specific styling */
.home .entry-title {
    font-size: 2.5em;
    text-align: center;
    margin-bottom: 20px;
}

.home .entry-content {
    font-size: 1.1em;
}

/* Optional: Welcome box styling for fallback homepage */
.welcome-message {
    background: linear-gradient(135deg, #e8f4f8 0%, #d4e9f7 100%);
    border: 2px solid #6ba3d8;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    margin: 30px 0;
}

.welcome-message h1 {
    color: #2c5f8d;
    margin-bottom: 20px;
}

/* Optional: Setup instructions box */
.setup-instructions {
    background: white;
    border-left: 4px solid #6ba3d8;
    padding: 20px;
    margin: 20px 0;
}

.setup-instructions ol {
    margin-left: 30px;
    line-height: 2;
}

/* Post Title with Icon/Emoji */
.entry-title {
    color: #2c5f8d;
    font-size: 2.2em;
    font-family: Georgia, serif;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.entry-title .title-icon {
    background: #4a8bc2;
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.7em;
    font-family: Arial, sans-serif;
}

/* Metadata Bar - Enhanced */
.entry-meta {
    color: #888;
    font-size: 0.9em;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding: 15px 0;
    border-bottom: 3px solid #e0e0e0;
    margin-bottom: 25px;
}

.entry-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f0f8ff;
    padding: 8px 15px;
    border-radius: 20px;
    border: 1px solid #d0e8f5;
}

.entry-meta .meta-item::before {
    font-size: 1.2em;
}

/* Introduction Paragraph */
.entry-content > p:first-of-type {
    font-size: 1.1em;
    line-height: 1.9;
    color: #444;
    margin-bottom: 30px;
}

/* Screenshots Section */
.screenshots-section {
    margin: 40px 0;
}

.screenshots-section h3 {
    color: #4a8bc2;
    font-size: 1.5em;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.screenshots-section h3::before {
    content: "📸";
    font-size: 1.2em;
}

.screenshots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.screenshot-placeholder {
    background: #fafafa;
    border: 3px dashed #b0d4f1;
    border-radius: 12px;
    padding: 60px 20px;
    text-align: center;
    color: #6ba3d8;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.screenshot-placeholder:hover {
    background: #f0f8ff;
    border-color: #6ba3d8;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(107, 163, 216, 0.2);
}

.screenshot-placeholder .icon {
    font-size: 4em;
    margin-bottom: 15px;
}

.screenshot-placeholder .title {
    font-size: 1.1em;
    font-weight: bold;
    color: #4a8bc2;
    margin-bottom: 8px;
}

.screenshot-placeholder .subtitle {
    font-size: 0.9em;
    color: #888;
}

/* Actual Screenshot Images */
.screenshot-image {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.3s;
}

.screenshot-image:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.screenshot-image img {
    width: 100%;
    height: auto;
    display: block;
}

.screenshot-image .caption {
    background: #f0f8ff;
    padding: 12px;
    text-align: center;
    color: #4a8bc2;
    font-size: 0.95em;
    border-top: 2px solid #d0e8f5;
}

/* Source Code Section */
.source-code-section {
    margin: 40px 0;
}

.source-code-section h3 {
    color: #4a8bc2;
    font-size: 1.5em;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.source-code-section h3::before {
    content: "💻";
    font-size: 1.2em;
}

/* Enhanced Code Block with File Tab */
.code-file-wrapper {
    background: #f5f5f5;
    border: 2px solid #d0d0d0;
    border-radius: 10px;
    margin: 25px 0;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.code-file-header {
    background: linear-gradient(180deg, #e8e8e8 0%, #d0d0d0 100%);
    padding: 12px 20px;
    border-bottom: 2px solid #b8b8b8;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.code-filename {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    color: #333;
    font-size: 1em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.code-language-badge {
    background: #4a8bc2;
    color: white;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 0.85em;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

.code-file-content {
    background: white;
    padding: 0;
}

.code-file-content pre {
    margin: 0;
    border: none;
    border-radius: 0;
}

/* Line Numbers Enhancement */
.code-with-lines {
    display: flex;
    background: white;
}

.line-numbers-column {
    background: #f8f8f8;
    padding: 20px 15px;
    border-right: 2px solid #e0e0e0;
    color: #999;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    line-height: 1.8;
    user-select: none;
    text-align: right;
    min-width: 50px;
}

.code-content-column {
    flex: 1;
    padding: 20px;
    overflow-x: auto;
}

/* Sidebar Enhancement for Beautiful Layout */
.sidebar .widget {
    margin-bottom: 25px;
    background: white;
    padding: 20px;
    border-radius: 10px;
    border: 2px solid #d0e8f5;
    box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}

.sidebar .widget-title {
    color: #4a8bc2;
    font-size: 1.3em;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 3px solid #6ba3d8;
    font-family: Georgia, serif;
}

.sidebar .widget ul li {
    padding: 12px;
    margin: 8px 0;
    background: #f0f8ff;
    border-left: 4px solid #6ba3d8;
    transition: all 0.3s;
    font-size: 0.95em;
    border-radius: 5px;
}

.sidebar .widget ul li:hover {
    background: #e1f1ff;
    border-left-color: #4a8bc2;
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(107, 163, 216, 0.2);
}

/* Table of Contents Widget (if you want to add one) */
.toc-widget {
    background: linear-gradient(135deg, #e8f4f8 0%, #d4e9f7 100%);
    border: 2px solid #6ba3d8;
}

.toc-widget .widget-title::before {
    content: "📑 ";
}

/* Related Posts Widget */
.related-posts-widget {
    background: #fefefe;
}

.related-posts-widget .widget-title::before {
    content: "🔗 ";
}

/* Tags Widget Enhancement */
.tagcloud a {
    background: #e8f4f8;
    color: #4a8bc2;
    padding: 8px 16px;
    margin: 5px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.9em;
    border: 1px solid #d0e8f5;
    display: inline-block;
    transition: all 0.3s;
}

.tagcloud a:hover {
    background: #6ba3d8;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(107, 163, 216, 0.3);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .entry-title {
        font-size: 1.8em;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .screenshots-grid {
        grid-template-columns: 1fr;
    }
    
    .code-file-header {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
    
    .entry-meta {
        flex-direction: column;
        gap: 10px;
    }
}
/* Remove the duplicate border line */
.post-header {
    border-bottom: 3px solid #6ba3d8;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

/* Remove border from entry-meta if it has one */
.entry-meta {
    color: #888;
    font-size: 0.9em;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding: 15px 0;
    border-bottom: none !important; /* This removes the second line */
    margin-bottom: 0;
}
/* Hide page title on homepage only */
.home .entry-title,
.page-id-1 .entry-title,
body.home article .entry-title {
    display: none !important;
}

/* Also hide the border under it */
.home .post-header {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

/*
===============================================
PRISMATIC CONFIGURATION GUIDE
===============================================

After installing the theme, configure Prismatic:

1. Go to: Settings > Prismatic

2. LIBRARY SETTINGS:
   - Choose: "Highlight.js" (recommended) or "Prism.js"
   
3. HIGHLIGHT.JS TAB:
   - Check "Enable Highlight.js"
   - Theme: Select "Atom One Light" or "Github" for light theme
   - Languages: Check C, C++, C#, Java, JavaScript, PHP, Python, etc.
   
4. CODE ESCAPING:
   - Enable code escaping
   
5. SAVE CHANGES

USING CODE IN GUTENBERG:

Method 1 - Simple Code Block:
1. Add a "Code" block
2. Paste your C++ code
3. In block settings (right sidebar), under "Additional CSS class(es)" 
   add: language-cpp
4. Publish

Method 2 - With Language Attribute (if supported):
1. Add a "Code" block  
2. In block toolbar, click the settings
3. Set language to "cpp" or "c"
4. Paste code
5. Publish

Example C++ Code to Test:
```cpp
#include <iostream>
using namespace std;

int main() {
    cout << "Hello World!" << endl;
    return 0;
}
```

If syntax highlighting still doesn't work:
1. Clear WordPress cache
2. Clear browser cache
3. Check Prismatic is activated
4. Ensure you selected a language in Prismatic settings
5. Make sure Highlight.js/Prism.js is enabled in Prismatic

*/