/* Enhanced CSS for Pioneer Woman style with Canadian flag colors */

/* Global styles */
body {
    font-family: 'Georgia', serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
}

a {
    color: #0e8a83;
    transition: color 0.3s;
    text-decoration: none;
}

a:hover {
    color: #06615c;
    text-decoration: none;
}

.container {
    max-width: 1200px;
    padding: 0 15px;
}

/* Header styles - Updated for Canadian flag colors */
header {
    background-color: #FF0000; /* Canadian flag red */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 0;
    border-bottom: none;
}

header .site-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 2.5rem;
    color: #FFFFFF; /* White text */
    margin: 0;
    padding: 15px 0;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
}

header .site-title a {
    color: #FFFFFF; /* White text */
    text-decoration: none;
}

/* Horizontal navigation */
header .nav-links {
    display: flex;
    justify-content: flex-start;
    padding: 0;
    margin: 0 0 10px 0;
    list-style: none;
}

header .nav-links li {
    margin: 0 20px 0 0;
}

header .nav-links a {
    display: block;
    padding: 5px 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    color: #FFFFFF; /* White text */
    position: relative;
}

header .nav-links a:hover {
    color: #FFFFFF;
    background-color: rgba(255,255,255,0.2);
    border-radius: 3px;
}

header .nav-links a:after {
    display: none; /* Remove the underline effect */
}

/* Login/Register buttons */
.auth-buttons {
    display: flex;
    justify-content: flex-end;
}

.auth-button {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    margin-left: 0.5rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    border-radius: 50px;
    text-align: center;
}

.login-button {
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
}

.login-button:hover {
    background-color: #fff;
    color: #FF0000; /* Canadian flag red */
}

.register-button {
    background-color: #fff;
    border: 2px solid #fff;
    color: #FF0000; /* Canadian flag red */
}

.register-button:hover {
    background-color: rgba(255,255,255,0.8);
    border-color: #fff;
}

/* Replace the decorative border styling */
.decorative-border {
    height: 15px;
    background-color: #0e8a83; /* Teal color instead of the image */
    margin: 0;
    padding: 0;
    border: none;
    text-indent: -9999px; /* Hide any text */
    overflow: hidden;
    position: relative;
}

/* Ensure no text is visible */
.decorative-border::before,
.decorative-border::after,
.decorative-border * {
    display: none !important;
}
}

/* Main content area */
.main-content {
    background-color: #fff;
    border-radius: 0;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.05);
    padding: 30px;
    margin-bottom: 30px;
}

.page-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    color: #0e8a83;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.section-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    color: #0e8a83;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #f0f0f0;
}

/* Featured post styling */
.featured-post {
    margin-bottom: 40px;
}

.featured-post .card {
    border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden;
}

.featured-post .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.featured-post .card-img-top {
    height: 400px;
    object-fit: cover;
}

.featured-post .card-body {
    padding: 2rem;
}

.featured-post .card-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #0e8a83;
}

.featured-post .card-text {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 1.5rem;
}

/* Post grid styling */
.post-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 30px;
    margin-bottom: 40px;
}

.post-grid .card {
    border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
}

.post-grid .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.post-grid .card-img-top {
    height: 240px;
    object-fit: cover;
}

.post-grid .card-body {
    padding: 1.5rem;
}

.post-grid .card-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
    color: #0e8a83;
}

.post-grid .card-text {
    font-size: 1rem;
    color: #555;
}

/* Province thumbnails */
.province-sidebar {
    background-color: #fff;
    padding: 30px;
    border-radius: 0.25rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.05);
}

.province-sidebar h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    color: #0e8a83;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #f0f0f0;
    text-align: center;
}

.province-card {
    border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden;
}

.province-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.province-thumbnail {
    height: 180px;
    object-fit: cover;
}

.province-card .card-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
    color: #0e8a83;
    text-align: center;
}

.province-card .btn {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    padding: 0.5rem 1rem;
    background-color: #0e8a83;
    border-color: #0e8a83;
    color: #fff;
    text-align: center;
    display: block;
    width: 100%;
    white-space: normal;
}

.province-card .btn:hover {
    background-color: #06615c;
    border-color: #06615c;
}

/* Province page */
.province-banner {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 0.25rem;
    margin-bottom: 1.5rem;
}

.province-header h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    color: #0e8a83;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Comments section */
.comments-section {
    border-top: 2px solid #f0f0f0;
    padding-top: 2rem;
    margin-top: 3rem;
}

.comments-section h3,
.comments-section h4 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    color: #0e8a83;
    margin-bottom: 1.5rem;
}

.comment, .reply {
    transition: background-color 0.3s;
    border: none;
    border-left: 3px solid #0e8a83;
    margin-bottom: 1.5rem;
}

.comment:hover, .reply:hover {
    background-color: #f8f9fa;
}

.comment .card-title,
.reply .card-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: #333;
}

.replies {
    border-left: 2px solid #0e8a83;
    padding-left: 1.5rem;
    margin-left: 1.5rem;
    margin-top: 1rem;
}

.reply-btn {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.3rem 0.8rem;
    background-color: transparent;
    border-color: #0e8a83;
    color: #0e8a83;
}

.reply-btn:hover {
    background-color: #0e8a83;
    color: #fff;
}

.form-control:focus {
    border-color: #0e8a83;
    box-shadow: 0 0 0 0.2rem rgba(14, 138, 131, 0.25);
}

.btn-primary {
    background-color: #0e8a83;
    border-color: #0e8a83;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.btn-primary:hover {
    background-color: #06615c;
    border-color: #06615c;
}

/* Footer */
footer {
    background-color: #333;
    color: #fff;
    padding: 50px 0 20px;
    margin-top: 50px;
}

footer h5 {
    color: #fff;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
}

footer p {
    color: #ccc;
}

footer a {
    color: #fff;
    transition: color 0.3s;
}

footer a:hover {
    color: #0e8a83;
    text-decoration: none;
}

footer .list-unstyled li {
    margin-bottom: 0.8rem;
}

footer .social-links a {
    font-size: 1.5rem;
    margin-right: 1rem;
    display: inline-block;
}

footer .copyright {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 1.5rem;
    margin-top: 3rem;
    text-align: center;
    color: #aaa;
    font-size: 0.9rem;
}

/* Pros and cons boxes */
.pros-box, .cons-box {
    border-radius: 0.25rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.pros-box {
    border-left: 4px solid #28a745;
}

.pros-box h4 {
    color: #28a745;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    margin-bottom: 1rem;
}

.cons-box {
    border-left: 4px solid #dc3545;
}

.cons-box h4 {
    color: #dc3545;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .post-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    
    .featured-post .card-img-top {
        height: 300px;
    }
}

@media (max-width: 767.98px) {
    .featured-post .card-img-top {
        height: 220px;
    }
    
    .post-grid .card-img-top {
        height: 200px;
    }
    
    .province-thumbnail {
        height: 150px;
    }
    
    .province-banner {
        height: 180px;
    }
    
    .page-title, .featured-post .card-title {
        font-size: 1.8rem;
    }
    
    .section-title {
        font-size: 1.6rem;
    }
}

@media (max-width: 575.98px) {
    header .site-title {
        font-size: 2rem;
    }
    
    .featured-post .card-body,
    .post-grid .card-body {
        padding: 1rem;
    }
    
    .featured-post .card-title {
        font-size: 1.5rem;
    }
    
    .post-grid .card-title {
        font-size: 1.2rem;
    }
/* Hide any text/error messages that appear under the header */
.container.my-4 {
    position: relative;
}

.container.my-4::before {
    content: "";
    position: absolute;
    top: -20px; /* Adjust as needed */
    left: 0;
    right: 0;
    height: 20px; /* Adjust based on the height of the error message */
    background-color: white;
    z-index: 100;
}

/* Alternative approach - target the specific text */
body > *:not(header):not(.decorative-border):not(.container) {
    display: none !important;
}
}
header + * {
    display: none !important;
}

/* Alternative approach - eliminate any black background elements */
body > *:not(header):not(.decorative-border):not(.container) {
    background-color: transparent !important;
    color: transparent !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Target any elements with black background at the bottom of the page */
body > *:last-child:not(.container):not(footer) {
    display: none !important;
}

/* Hide any black background elements throughout the page */
.image-error-text,
*[class*="img-error"],
*[class*="image-error"],
*:not(header):not(.decorative-border):not(.container):not(footer) + .image-text,
body > .image-text {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

/* Clean up the bottom of the page */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container.my-4 {
    flex: 1;
}

footer {
    margin-top: auto;
}
// Wait for the DOM to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
    // Handle reply button clicks
    const replyButtons = document.querySelectorAll('.reply-btn');
    
    replyButtons.forEach(function(button) {
        button.addEventListener('click', function() {
            const commentId = this.getAttribute('data-comment-id');
            const replyForm = document.getElementById('reply-form-' + commentId);
            
            // Toggle the reply form
            if (replyForm.style.display === 'none' || replyForm.style.display === '') {
                replyForm.style.display = 'block';
                this.textContent = 'Cancel Reply';
            } else {
                replyForm.style.display = 'none';
                this.textContent = 'Reply';
            }
        });
    });
    
    // Fade in elements with the fade-in class
    const fadeElements = document.querySelectorAll('.fade-in');
    fadeElements.forEach(function(element) {
        element.style.opacity = '0';
        let opacity = 0;
        const fadeIn = setInterval(function() {
            if (opacity >= 1) {
                clearInterval(fadeIn);
            }
            element.style.opacity = opacity;
            opacity += 0.1;
        }, 50);
    });
    
    // Smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            
            const targetId = this.getAttribute('href');
            if (targetId === '#') return;
            
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                window.scrollTo({
                    top: targetElement.offsetTop - 70,
                    behavior: 'smooth'
                });
            }
        });
    });
    
    // Form validation
    const forms = document.querySelectorAll('form');
    forms.forEach(function(form) {
        form.addEventListener('submit', function(event) {
            const requiredInputs = form.querySelectorAll('[required]');
            let valid = true;
            
            requiredInputs.forEach(function(input) {
                if (!input.value.trim()) {
                    valid = false;
                    input.classList.add('is-invalid');
                } else {
                    input.classList.remove('is-invalid');
                }
            });
            
            if (!valid) {
                event.preventDefault();
                alert('Please fill out all required fields.');
            }
        });
    });
    
    // Password match validation for registration
    const passwordInput = document.getElementById('password');
    const confirmPasswordInput = document.getElementById('confirm_password');
    
    if (passwordInput && confirmPasswordInput) {
        confirmPasswordInput.addEventListener('input', function() {
            if (this.value !== passwordInput.value) {
                this.setCustomValidity('Passwords do not match');
            } else {
                this.setCustomValidity('');
            }
        });
    }
    
    // Responsive navigation for mobile
    const navToggle = document.querySelector('.navbar-toggler');
    if (navToggle) {
        navToggle.addEventListener('click', function() {
            const navContent = document.querySelector('.navbar-collapse');
            navContent.classList.toggle('show');
        });
    }
    
    // Show/hide alerts after timeout - IMPORTANT CHANGE HERE
    const alerts = document.querySelectorAll('.alert');
    if (alerts.length > 0) {
        alerts.forEach(function(alert) {
            // Don't auto-hide login/register alerts
            if (alert.classList.contains('alert-info') && 
                (alert.textContent.includes('login') || alert.textContent.includes('register'))) {
                return; // Skip this alert - don't auto-hide it
            }
            
            // Auto-hide other alerts
            setTimeout(function() {
                // Create fade out effect
                let opacity = 1;
                const fadeOut = setInterval(function() {
                    if (opacity <= 0) {
                        clearInterval(fadeOut);
                        alert.style.display = 'none';
                    }
                    alert.style.opacity = opacity;
                    opacity -= 0.1;
                }, 50);
            }, 5000); // Hide after 5 seconds
        });
    }
    
    // Comment character counter
    const commentTextareas = document.querySelectorAll('textarea[name="content"]');
    commentTextareas.forEach(function(textarea) {
        // Create character counter element
        const counter = document.createElement('small');
        counter.className = 'text-muted char-counter';
        counter.textContent = '0 / 1000 characters';
        
        // Insert counter after textarea
        textarea.parentNode.insertBefore(counter, textarea.nextSibling);
        
        // Update counter on input
        textarea.addEventListener('input', function() {
            const count = this.value.length;
            const maxLength = 1000;
            counter.textContent = count + ' / ' + maxLength + ' characters';
            
            // Apply warning style if approaching limit
            if (count > maxLength * 0.8) {
                counter.classList.add('text-warning');
            } else {
                counter.classList.remove('text-warning');
            }
            
            // Apply danger style if over limit
            if (count > maxLength) {
                counter.classList.add('text-danger');
                this.classList.add('is-invalid');
            } else {
                counter.classList.remove('text-danger');
                this.classList.remove('is-invalid');
            }
        });
    });
    
    // Function to remove the black strips with "The image you are" text
    setTimeout(function() {
        // First attempt: Remove by text content
        const allElements = document.querySelectorAll('*');
        allElements.forEach(function(el) {
            if (el.textContent && 
                el.textContent.includes("The image you are") && 
                el.textContent.trim().length < 50) {
                // Direct removal if it's a text node
                if (el.nodeType === Node.TEXT_NODE) {
                    el.parentNode.removeChild(el);
                } 
                // Otherwise hide the element
                else {
                    el.style.display = 'none';
                    el.style.height = '0';
                    el.style.margin = '0';
                    el.style.padding = '0';
                    el.style.overflow = 'hidden';
                }
            }
        });
        
        // Second attempt: Remove direct children of body with dark background
        const bodyChildren = document.body.children;
        for (let i = 0; i < bodyChildren.length; i++) {
            const child = bodyChildren[i];
            // Skip important elements
            if (child.tagName === 'HEADER' || 
                child.className.includes('container') || 
                child.className.includes('decorative-border') ||
                child.tagName === 'FOOTER') {
                continue;
            }
            
            // Get background color
            const style = window.getComputedStyle(child);
            const bgColor = style.backgroundColor;
            
            // Check if it's a dark color
            if (bgColor.includes('rgb(0, 0, 0') || 
                bgColor.includes('rgb(17, 17, 17') || 
                bgColor.includes('rgba(0, 0, 0') ||
                bgColor.includes('rgb(34, 34, 34')) {
                child.style.display = 'none';
                child.style.height = '0';
                child.style.margin = '0';
                child.style.padding = '0';
                child.style.overflow = 'hidden';
            }
        }
        
        // Third attempt: handle text nodes directly
        const walk = document.createTreeWalker(
            document.body, 
            NodeFilter.SHOW_TEXT, 
            null, 
            false
        );
        
        const nodesToRemove = [];
        let node;
        while(node = walk.nextNode()) {
            if (node.textContent.includes("The image you are")) {
                nodesToRemove.push(node);
            }
        }
        
        nodesToRemove.forEach(function(node) {
            if (node.parentNode) {
                node.parentNode.removeChild(node);
            }
        });
    }, 500);
});

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Playfair+Display:wght@400;700&display=swap');