/* ============================================
   AWeber Knowledge Base - Complete CSS for Scroll Sites
   Includes: Homepage styling + Global styles for all pages
   ============================================ */

/* ============================================
   PART 1: GLOBAL STYLES (All pages including homepage)
   ============================================ */

body { 
    background: #FFF; 
}

a:hover { 
    color: #246be8; 
}

.article-body h1, 
.article-body h2, 
.article-body h3 { 
    margin-block-start: 1rlh; 
    margin-block-end: .5rlh; 
}

hr { 
    margin-block: .75rlh; 
}

.article-body :where(ul,ol) li>* { 
    margin: 0 0 20px; 
}

/* ============================================
   PART 2: STYLES FOR ALL PAGES EXCEPT HOMEPAGE
   ============================================ */

/* Banner subtitle - hide on all pages except homepage */
:not([data-page-template="content-source"]) .banner hgroup p { 
    display: none; 
}

/* Category cards - standard styling for non-homepage pages */
:not([data-page-template="content-source"]) .items li { 
    background: #fff; 
    border: 1px solid #e6e6e6; 
    border-radius: 24px; 
    box-shadow: none; 
    transition: all .2s ease-in-out; 
    padding: 30px 25px 30px 25px; 
}

:not([data-page-template="content-source"]) .items li:hover { 
    box-shadow: 0 4px 14px 0 rgb(0 0 0 / 10%); 
}

:not([data-page-template="content-source"]) .items li h3 { 
    font-size: 22px; 
}

:not([data-page-template="content-source"]) .items li li { 
    border: 0px solid #ccc; 
    padding: 0px; 
}

:not([data-page-template="content-source"]) .items li li:hover { 
    box-shadow: none; 
}

/* ============================================
   PART 3: HOMEPAGE-ONLY STYLES
   ============================================ */

/* Variables */
:root[data-page-template="content-source"] {
    --aweber-blue: #2563eb;
    --aweber-orange: #FF952F;
    --aweber-orange-hover: #e8841a;
    --text-dark: #1e293b;
    --text-medium: #64748b;
    --text-light: #94a3b8;
    --bg-light: #f8f9fa;
    --bg-card: #ffffff;
    --border-light: #e2e8f0;
    --border-medium: #cbd5e1;
}

/* Override body background - ONLY on homepage */
[data-page-template="content-source"] body {
    background: var(--bg-light) !important;
}

/* Header */
[data-page-template="content-source"] .header[data-component="header"] {
    background: white !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

/* Banner */
[data-page-template="content-source"] .banner[data-component="banner"] {
    background: linear-gradient(135deg, #dbeafe 0%, #e0f2fe 50%, #f0f9ff 100%) !important;
    padding: 60px 32px !important;
    position: relative;
    border: none !important;
}

[data-page-template="content-source"] .banner::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -5%;
    width: 400px;
    height: 400px;
    background: url('data:image/svg+xml,<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:rgb(147,197,253);stop-opacity:0.3" /><stop offset="100%" style="stop-color:rgb(96,165,250);stop-opacity:0.1" /></linearGradient></defs><circle cx="100" cy="100" r="60" fill="url(%23grad1)"/><circle cx="250" cy="180" r="40" fill="url(%23grad1)"/><circle cx="180" cy="280" r="50" fill="url(%23grad1)"/></svg>');
    opacity: 0.6;
    pointer-events: none;
}

[data-page-template="content-source"] .banner::after {
    content: '';
    position: absolute;
    bottom: -15%;
    left: -5%;
    width: 350px;
    height: 350px;
    background: url('data:image/svg+xml,<svg width="350" height="350" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:rgb(191,219,254);stop-opacity:0.4" /><stop offset="100%" style="stop-color:rgb(147,197,253);stop-opacity:0.15" /></linearGradient></defs><circle cx="180" cy="180" r="80" fill="url(%23grad2)"/></svg>');
    opacity: 0.5;
    pointer-events: none;
}

[data-page-template="content-source"] .banner h1 {
    font-size: 48px !important;
    margin-bottom: 16px !important;
    color: var(--text-dark) !important;
    font-weight: 700 !important;
    position: relative;
    z-index: 1;
    text-align: center !important;
}

[data-page-template="content-source"] .banner hgroup p {
    display: block !important;
    font-size: 18px !important;
    color: var(--text-medium) !important;
    margin-bottom: 32px !important;
    position: relative;
    z-index: 1;
    text-align: center !important;
}

/* Override the subtitle text */
[data-page-template="content-source"] .banner hgroup p {
    font-size: 0 !important;
    margin-bottom: 0px !important;
    line-height: 0 !important;
}

[data-page-template="content-source"] .banner hgroup p::before {
    content: "Find answers, learn best practices, and get the most out of your email marketing";
    font-size: 18px !important;
    display: block;
    line-height: 1.5;
}

/* Search bar container */
[data-page-template="content-source"] .banner search-bar {
    max-width: 600px;
    margin: 0 auto;
    display: block;
    position: relative;
    z-index: 1;
}

/* Remove custom search input styling - let default handle it */

/* Main Content */
[data-page-template="content-source"] #content.content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 32px;
}

/* Categories */
[data-page-template="content-source"] .pages h2 {
    display: none !important;
}

[data-page-template="content-source"] ul.items.list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
    gap: 24px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

[data-page-template="content-source"] .items li {
    background: var(--bg-card) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid #f1f5f9 !important;
    list-style: none !important;
}

[data-page-template="content-source"] .items li:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
    transform: translateY(-4px) !important;
    border-color: var(--border-light) !important;
}

[data-page-template="content-source"] .items li > h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
    color: var(--text-dark) !important;
    margin-top: 0 !important;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

[data-page-template="content-source"] .items li > h3 > a {
    color: var(--text-dark) !important;
    text-decoration: none !important;
}

[data-page-template="content-source"] .items li > h3 > a:hover {
    color: var(--aweber-blue) !important;
}

/* Category Icons */
[data-page-template="content-source"] .items li > h3::before {
    content: "📚";
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 12px;
    flex-shrink: 0;
    margin: 0;
}

[data-page-template="content-source"] .items li:nth-child(1) > h3::before { content: "🚀"; }
[data-page-template="content-source"] .items li:nth-child(2) > h3::before { content: "👥"; }
[data-page-template="content-source"] .items li:nth-child(3) > h3::before { content: "✉️"; }
[data-page-template="content-source"] .items li:nth-child(4) > h3::before { content: "⚙️"; }
[data-page-template="content-source"] .items li:nth-child(5) > h3::before { content: "📢"; }
[data-page-template="content-source"] .items li:nth-child(6) > h3::before { content: "📝"; }
[data-page-template="content-source"] .items li:nth-child(7) > h3::before { content: "✍️"; }
[data-page-template="content-source"] .items li:nth-child(8) > h3::before { content: "📬"; }
[data-page-template="content-source"] .items li:nth-child(9) > h3::before { content: "📊"; }
[data-page-template="content-source"] .items li:nth-child(10) > h3::before { content: "🔗"; }
[data-page-template="content-source"] .items li:nth-child(11) > h3::before { content: "🔌"; }
[data-page-template="content-source"] .items li:nth-child(12) > h3::before { content: "🔔"; }
[data-page-template="content-source"] .items li:nth-child(13) > h3::before { content: "🔐"; }
[data-page-template="content-source"] .items li:nth-child(14) > h3::before { content: "🤝"; }

/* Change category titles */
[data-page-template="content-source"] .items li:nth-child(1) > h3 > a {
    font-size: 0 !important;
}

[data-page-template="content-source"] .items li:nth-child(1) > h3 > a::after {
    content: "Getting Started";
    font-size: 20px !important;
    font-weight: 700;
}

[data-page-template="content-source"] .items li:nth-child(8) > h3 > a {
    font-size: 0 !important;
}

[data-page-template="content-source"] .items li:nth-child(8) > h3 > a::after {
    content: "Best Practices";
    font-size: 20px !important;
    font-weight: 700;
}

[data-page-template="content-source"] .items li > ul {
    display: none !important;
}

/* Category Descriptions */
[data-page-template="content-source"] .items li > h3::after {
    content: "";
    display: block;
    font-size: 15px;
    color: var(--text-medium);
    line-height: 1.5;
    font-weight: 400;
    margin-top: 6px;
    width: 100%;
    order: 3;
}

[data-page-template="content-source"] .items li:nth-child(1) > h3::after { 
    content: "Learn the basics of AWeber and set up your account for success with our comprehensive getting started guides."; 
}
[data-page-template="content-source"] .items li:nth-child(2) > h3::after { 
    content: "Import, organize, and manage your email lists effectively to maintain healthy subscriber relationships."; 
}
[data-page-template="content-source"] .items li:nth-child(3) > h3::after { 
    content: "Create beautiful, professional emails with our drag-and-drop editor and customization options."; 
}
[data-page-template="content-source"] .items li:nth-child(4) > h3::after { 
    content: "Set up automated email sequences to engage subscribers at the right time with personalized content."; 
}
[data-page-template="content-source"] .items li:nth-child(5) > h3::after { 
    content: "Send one-time email messages to your subscribers with scheduling, segmentation, and analytics features."; 
}
[data-page-template="content-source"] .items li:nth-child(6) > h3::after { 
    content: "Build custom landing pages to capture leads and grow your audience with easy-to-use templates."; 
}
[data-page-template="content-source"] .items li:nth-child(7) > h3::after { 
    content: "Design and publish custom sign-up forms to grow your email list across your website and social channels."; 
}
[data-page-template="content-source"] .items li:nth-child(8) > h3::after { 
    content: "Learn proven strategies for permission-based marketing, engagement, and deliverability best practices."; 
}
[data-page-template="content-source"] .items li:nth-child(9) > h3::after { 
    content: "Track your email performance with detailed analytics and insights to optimize your campaigns."; 
}
[data-page-template="content-source"] .items li:nth-child(10) > h3::after { 
    content: "Connect AWeber with your favorite tools and platforms to streamline your marketing workflow."; 
}
[data-page-template="content-source"] .items li:nth-child(11) > h3::after { 
    content: "Integrate AWeber's powerful email marketing features into your applications using our developer API."; 
}
[data-page-template="content-source"] .items li:nth-child(12) > h3::after { 
    content: "Engage your audience with timely browser notifications to complement your email marketing strategy."; 
}
[data-page-template="content-source"] .items li:nth-child(13) > h3::after { 
    content: "Manage your account settings, billing information, and subscription details all in one place."; 
}
[data-page-template="content-source"] .items li:nth-child(14) > h3::after { 
    content: "Join our referral program to earn rewards by sharing AWeber with your network and community."; 
}

/* Responsive Design */
@media (max-width: 768px) {
    [data-page-template="content-source"] .banner {
        padding: 60px 24px !important;
    }
    
    [data-page-template="content-source"] .banner h1 {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }
    
    [data-page-template="content-source"] .banner hgroup p::before {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }
    
    [data-page-template="content-source"] ul.items.list {
        grid-template-columns: 1fr !important;
    }
    
    [data-page-template="content-source"] .items li {
        padding: 24px !important;
    }
    
    [data-page-template="content-source"] .items li > h3 {
        font-size: 18px !important;
    }
    
    [data-page-template="content-source"] .items li > h3::before {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    
    [data-page-template="content-source"] .items li:nth-child(1) > h3 > a::after {
        font-size: 18px !important;
    }
}

/* Utility - only on homepage */
[data-page-template="content-source"] a:hover {
    color: var(--aweber-blue) !important;
}

/* ============================================
   PART 4: GLOBAL FOOTER STYLES (All Pages)
   ============================================ */

/* Footer layout - logo left, text right */
.footer[data-component="footer"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: nowrap !important;
}

/* Make footer logo bigger */
.footer .footer-logo,
.footer img[alt*="logo" i],
.footer img[alt*="AWeber" i] {
    max-width: 100px !important;
    width: 100px !important;
    height: auto !important;
    margin-right: 20px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}

/* Make footer text stay inline */
.footer .footer-content,
.footer p {
    flex: 1 !important;
    display: inline-block !important;
    margin: 0 !important;
}