/*
Theme Name: FSBO Tools v2.6
Theme URI: https://fsbo.tools
Author: FSBO Tools Team
Author URI: https://fsbo.tools
Description: A modern, clean WordPress theme for FSBO (For Sale By Owner) real estate websites. Features a HomeLight-inspired design with hero section, article grids, and powerful customization options. Version 2.6 with dynamic header image support, customizable hero title fonts, adjustable overlay darkness, enhanced page displays, independent hero section and homepage content background color customization that works alongside hero images.
Version: 2.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fsbo-tools-v2
Tags: real-estate, blog, custom-header, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ===========================
   CSS Reset & Base Styles
   =========================== */

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

a {
    color: #2563eb;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #1d4ed8;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===========================
   Header Styles
   =========================== */

.site-header {
    background-color: rgba(30, 58, 95, 0.95);
    padding: 1rem 0;
    position: relative;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

body.home .site-header {
    background-color: transparent;
    padding: 2rem 0;
    position: absolute;
    top: 2rem;
    left: 0;
    right: 0;
    box-shadow: none;
    transition: background-color 0.3s ease, top 0.3s ease, padding 0.3s ease;
}

body.home .site-header.scrolled {
    background-color: rgba(30, 58, 95, 0.95);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    top: 0;
    padding: 1rem 0;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-branding {
    display: flex;
    align-items: center;
}

.site-logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

.site-logo:hover {
    color: #fff;
}

.main-navigation {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.main-navigation ul {
    list-style: none;
    display: flex;
    gap: 2rem;
    margin: 0;
}

.main-navigation ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: rgba(30, 58, 95, 0.98);
    min-width: 200px;
    padding: 0.5rem 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    border-radius: 4px;
    margin-top: 0;
    padding-top: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 9999;
    pointer-events: none;
}

.main-navigation ul ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1rem;
    background: transparent;
}

.main-navigation li {
    position: relative;
}

.main-navigation li:hover > ul,
.main-navigation li:focus-within > ul {
    display: block;
    opacity: 1;
    visibility: visible;
    transition-delay: 0.15s;
    pointer-events: auto;
}

.main-navigation ul ul:hover {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.main-navigation li {
    z-index: auto;
}

.main-navigation li:hover,
.main-navigation li:focus-within {
    z-index: 10000;
}

.main-navigation ul ul li {
    width: 100%;
}

.main-navigation ul ul a {
    padding: 0.75rem 1.5rem;
    display: block;
    white-space: nowrap;
}

.main-navigation ul ul ul {
    left: 100%;
    top: 0;
    margin-top: 0;
    margin-left: 0.5rem;
}

.main-navigation a {
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.main-navigation a:hover {
    opacity: 0.8;
    color: #fff;
}

.header-cta {
    display: none;
}

.btn-primary {
    background-color: #ff8c00;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #e67e00;
    color: #fff;
}

.btn-secondary {
    background-color: transparent;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border: 2px solid #fff;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: #fff;
    color: #1e3a5f;
}

/* ===========================
   Hero Section
   =========================== */

.hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-image: url('images/home14.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    min-height: 100vh;
    padding: 12rem 4rem 4rem;
    color: #fff;
    display: flex;
    align-items: center;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(30, 58, 95, 0.3);
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}

.hero-content {
    max-width: 700px;
}

.hero-title {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.hero-description {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.95;
}

.hero-search {
    display: none;
}

.hero-search input[type="search"] {
    flex: 1;
    border: none;
    padding: 1rem;
    font-size: 1rem;
    outline: none;
}

.cta-box button,
.cta-box .cta-button {
    background-color: #ff8c00;
    color: #fff;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    width: 100%;
    transition: background-color 0.3s ease;
    text-align: center;
    display: inline-block;
    text-decoration: none;
}

.cta-box button:hover,
.cta-box .cta-button:hover {
    background-color: #e67e00;
}

.hero-categories {
    display: none;
}

.category-pill {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
}

.category-pill:hover {
    background-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* ===========================
   Main Content Area
   =========================== */

.site-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

.content-section {
    margin-bottom: 4rem;
}

.section-number {
    display: inline-block;
    background-color: #2563eb;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    margin-bottom: 1rem;
}

.section-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #1e3a5f;
}

.section-description {
    color: #666;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.section-description a {
    color: #ff8c00;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.section-description a:hover {
    color: #e67e00;
    text-decoration: underline;
}

.section-description strong,
.section-description b {
    font-weight: 600;
    color: #333;
}

.section-description em,
.section-description i {
    font-style: italic;
}

.section-description ul,
.section-description ol {
    margin: 1rem 0;
    padding-left: 2rem;
}

.section-description li {
    margin-bottom: 0.5rem;
}

.hero-description a {
    color: #fff;
    text-decoration: underline;
    font-weight: 500;
}

.hero-description a:hover {
    color: #ff8c00;
}/* ===========================
   Article Grid
   =========================== */

.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.article-card {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.article-image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-category {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background-color: #ff8c00;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.article-content {
    padding: 1.5rem;
}

.article-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #1e3a5f;
}

.article-excerpt {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
}

.article-meta,
.entry-meta {
    display: none;
}

/* ===========================
   Sidebar & CTA Boxes
   =========================== */

.content-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 3rem;
}

.cta-box {
    background-color: #1e3a5f;
    color: #fff;
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.cta-box h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.cta-box p {
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.cta-form input[type="text"],
.cta-form input[type="email"] {
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.cta-form button {
    width: 100%;
    background-color: #ff8c00;
    color: #fff;
    padding: 1rem;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.cta-form button:hover {
    background-color: #e67e00;
}

/* ===========================
   Tabs Navigation
   =========================== */

.tabs-container {
    margin-bottom: 2rem;
}

.tabs-nav {
    display: flex;
    gap: 1rem;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 2rem;
}

.tab-button {
    background: none;
    border: none;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.tab-button:hover {
    color: #1e3a5f;
}

.tab-button.active {
    color: #1e3a5f;
    border-bottom-color: #ff8c00;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ===========================
   Footer
   =========================== */

/* Footer removed - using Code Snippet for custom footer */

/* ===========================
   Page Template
   =========================== */

.page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
}

.site-main {
    padding-top: 2rem;
}

body.home .site-main {
    padding-top: 0;
}

.page-container .entry-header {
    margin-bottom: 2rem;
}

.page-container .entry-title {
    font-size: 2.5rem;
    color: #1e3a5f;
    margin-bottom: 1rem;
}

.page-container .post-thumbnail {
    margin-bottom: 2rem;
}

.page-container .post-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.page-container .entry-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
}

.page-container .entry-content h2 {
    font-size: 2rem;
    color: #1e3a5f;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.page-container .entry-content h3 {
    font-size: 1.5rem;
    color: #1e3a5f;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.page-container .entry-content p {
    margin-bottom: 1.5rem;
}

.page-container .entry-content ul,
.page-container .entry-content ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.page-container .entry-content li {
    margin-bottom: 0.5rem;
}

.page-container .entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 1rem 0;
}

.page-container .entry-content blockquote {
    border-left: 4px solid #ff8c00;
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: #666;
}

.page-container .entry-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.page-container .edit-link a {
    color: #ff8c00;
    text-decoration: none;
}

.page-container .edit-link a:hover {
    text-decoration: underline;
}

.page-links {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

/* ===========================
   Mobile Menu Toggle
   =========================== */

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
}

.mobile-menu-toggle .hamburger {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 5px 0;
    transition: 0.3s;
}

.mobile-menu-toggle.active .hamburger:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.mobile-menu-toggle.active .hamburger:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .hamburger:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* ===========================
   Responsive Design
   =========================== */

@media (max-width: 968px) {
    .content-with-sidebar {
        grid-template-columns: 1fr;
    }
    
    .mobile-menu-toggle {
        display: block;
    }

    .main-navigation {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background-color: rgba(30, 58, 95, 0.98);
        padding: 5rem 2rem 2rem;
        transition: right 0.3s ease;
        overflow-y: auto;
        z-index: 999;
    }

    .main-navigation.active {
        right: 0;
    }

    .main-navigation ul {
        flex-direction: column;
        gap: 0;
    }

    .main-navigation li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .main-navigation a {
        display: block;
        padding: 1rem 0;
    }

    .main-navigation ul ul {
        position: static;
        display: none;
        background-color: transparent;
        box-shadow: none;
        padding-left: 1rem;
        margin-top: 0;
    }

    .main-navigation li.menu-item-has-children > a::after {
        content: ' ▼';
        font-size: 0.7em;
    }

    .main-navigation li.active > ul {
        display: block;
    }

    .main-navigation ul ul a {
        padding: 0.75rem 0;
    }
    
    .hero-title {
        font-size: 2rem;
    }

    .hero-section {
        padding: 10rem 2rem 3rem;
    }
    
    .articles-grid {
        grid-template-columns: 1fr;
    }

    .site-header,
    body.home .site-header {
        padding: 1rem 0;
        position: relative;
        top: 0;
        background-color: rgba(30, 58, 95, 0.95);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .site-header.scrolled,
    body.home .site-header.scrolled {
        padding: 1rem 0;
    }
}

@media (max-width: 640px) {
    .hero-title {
        font-size: 1.75rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    .header-container {
        gap: 1rem;
    }
    
    .hero-search {
        flex-direction: column;
    }

    .page-container {
        padding: 1rem 1rem 2rem;
    }

    .page-container .entry-title {
        font-size: 1.75rem;
    }

    .page-container .entry-content {
        font-size: 1rem;
    }

    .page-container .entry-content h2 {
        font-size: 1.5rem;
    }

    .page-container .entry-content h3 {
        font-size: 1.25rem;
    }
}