/*
Theme Name:   InterConnecta Child
Theme URI:    https://interconnecta.com
Description:  Minimal WordPress child theme for blog posts that uses the new static site's header/footer components
Author:       InterConnecta
Version:      1.0.0
License:      GPL v2 or later
Text Domain:  interconnecta-child
*/

/* 
 * This theme is designed to be minimal - it only handles blog post display.
 * Header and footer are loaded via JavaScript components from the main site.
 * All CSS and JS assets are served from /assets/ which points to the static site.
 */

/* Post content styling */
.blog-post-content {
    background: #fff;
    padding: 8px 0 32px; /* Tight gap under the sticky header */
}

/* Remove duplicate images from Elementor content */
.post-content .elementor-section:first-child .elementor-widget-image:first-of-type {
    display: none;
}

/* Elementor content styling overrides */
.post-content .elementor-section {
    padding: 0 !important;
    margin: 0 !important;
}

.post-content .elementor-container {
    max-width: 100% !important;
    padding: 0 !important;
}

.post-content .elementor-column-gap-default > .elementor-column > .elementor-element-populated {
    padding: 0 !important;
}

/* Figure and image styling in content */
.post-content figure {
    margin: 24px 0; /* Reduced by 20% */
    max-width: 100%;
}

.post-content figure img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.post-content figcaption {
    text-align: center;
    color: #666;
    font-size: 0.9rem;
    margin-top: 10px;
}

/* Post header spacing */
article .post-header,
.blog-post-content .post-header {
    margin-bottom: 32px !important; /* Reduced by 20% */
    padding-top: 12px !important; /* Tight gap under the sticky header */
    text-align: center !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Post title - balanced size */
article .post-title,
.blog-post-content .post-title,
.post-header .post-title,
h1.post-title,
.entry-title.post-title {
    font-size: 2rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 16px !important; /* Reduced by 20% */
    color: #1a1a1a !important;
    letter-spacing: -0.02em !important;
}

@media (min-width: 768px) {
    article .post-title,
    .blog-post-content .post-title,
    .post-header .post-title,
    h1.post-title {
        font-size: 2.25rem !important; /* Middle ground between 1.75 and 3 */
    }
}

@media (min-width: 1024px) {
    article .post-title,
    .blog-post-content .post-title,
    .post-header .post-title,
    h1.post-title {
        font-size: 2.75rem !important; /* Powerful but not overwhelming */
    }
}

/* Post meta styling */
.post-meta {
    color: #666 !important;
    font-size: 0.9rem !important;
    margin-bottom: 24px !important; /* Reduced by 20% */
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Add a separator line after header */
.post-header::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--tj-color-theme-primary, #0093ff); /* Fallback to blue if var not set */
    margin: 24px auto 0; /* Reduced by 20% */
}

.post-meta {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 24px; /* Reduced by 20% */
    font-weight: 400;
}

.post-date {
    margin-right: 10px;
}

.post-categories a {
    color: var(--tj-color-theme-primary, #0066cc);
    text-decoration: none;
}

.post-categories a:hover {
    text-decoration: underline;
}

.post-featured-image {
    margin-bottom: 32px; /* Reduced by 20% */
    border-radius: 10px;
    overflow: hidden;
}

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

/* Post content area */
.post-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
}

.post-content p {
    margin-bottom: 1.2rem; /* Reduced by 20% */
}

.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    margin-top: 1.6rem; /* Reduced by 20% */
    margin-bottom: 0.8rem; /* Reduced by 20% */
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a1a;
}

.post-content h2 {
    font-size: 2rem;
}

.post-content h3 {
    font-size: 1.5rem;
}

.post-content h4 {
    font-size: 1.25rem;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.2rem 0; /* Reduced by 20% */
}

.post-content ul,
.post-content ol {
    margin-bottom: 1.2rem; /* Reduced by 20% */
    padding-left: 2rem;
}

.post-content li {
    margin-bottom: 0.5rem;
}

.post-content blockquote {
    border-left: 4px solid var(--tj-color-theme-primary, #0066cc);
    padding-left: 20px;
    margin: 1.6rem 0; /* Reduced by 20% */
    font-style: italic;
    color: #555;
}

.post-content a {
    color: var(--tj-color-theme-primary, #0066cc);
    text-decoration: none;
}

.post-content a:hover {
    text-decoration: underline;
}

.post-content code {
    background: #f5f5f5;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.post-content pre {
    background: #f5f5f5;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    margin: 1.2rem 0; /* Reduced by 20% */
}

.post-content pre code {
    background: none;
    padding: 0;
}

/* Post footer */
.post-footer {
    padding: 32px 0; /* Reduced by 20% */
    border-top: 1px solid #eee;
    margin-top: 32px; /* Reduced by 20% */
}

.post-tags {
    color: #666;
}

.post-tags a {
    display: inline-block;
    background: #f5f5f5;
    padding: 5px 12px;
    border-radius: 3px;
    margin-right: 8px;
    margin-bottom: 8px;
    color: #333;
    text-decoration: none;
    font-size: 0.9rem;
}

.post-tags a:hover {
    background: #e5e5e5;
}

/* Archive/Blog listing styles */
.blog-listing {
    padding: 8px 0 32px; /* Tight gap under the sticky header */
}

.blog-item {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 24px; /* Reduced by 20% */
}

.blog-thumb img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.blog-content {
    padding: 16px; /* Reduced by 20% */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-content .title {
    font-size: 18px;
    margin-bottom: 12px; /* Reduced by 20% */
    line-height: 1.4;
}

.blog-content .title a {
    color: #333;
    text-decoration: none;
}

.blog-content .title a:hover {
    color: var(--tj-color-theme-primary, #0066cc);
}

.blog-excerpt {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* Spacing for fixed header */
.space-for-header {
    height: 20px !important; /* Significantly reduced from 100px */
}

/* Fix layout stacking issues with components */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* TT Norms has standard OpenType ligatures (including the "st" joined glyph)
   that activate on the blog once the font is registered globally. Disable all
   ligatures on blog content to match the main Astro site rendering. */
.site-main,
.wp-main-wrapper,
#wp-main-wrapper,
.blog-listing,
.blog-post-content,
.blog-listing *,
.blog-post-content *,
.site-main * {
    font-variant-ligatures: none !important;
    -webkit-font-feature-settings: "liga" 0, "dlig" 0, "clig" 0 !important;
    font-feature-settings: "liga" 0, "dlig" 0, "clig" 0 !important;
}

/* Main content wrapper for WordPress pages */
.wp-main-wrapper,
#wp-main-wrapper {
    position: relative;
    z-index: 1;
    flex: 1;
    background: #fff;
    display: block;
}

.site-main {
    position: relative;
    z-index: 1;
    min-height: 50vh;
    background: #fff;
    padding-bottom: 48px; /* Reduced by 20% */
}

/* Ensure blog listing has proper background and spacing */
.blog-listing {
    background: #fff;
    position: relative;
    z-index: 2;
}

/* Override any fixed positioning from main site footer */
componente-footer {
    position: relative !important;
    z-index: 10;
}

componente-header {
    position: relative;
    z-index: 100;
}

/* Page header styling */
.page-header {
    background: #fff;
    position: relative;
    z-index: 2;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .post-title {
        font-size: 2rem;
    }
    
    .post-content {
        font-size: 1rem;
    }
}

/* Cache bust: 1767647838 */