/*
Theme Name: Gemini Prompt Pro
Theme URI: https://geminipromptpro.com/
Author: Expert Premium WordPress Developer
Author URI: https://geminipromptpro.com/
Description: Premium WordPress Directory Theme for AI Prompts. Ultra Optimized for Core Web Vitals.
Version: 5.0.6
Text Domain: gemini-prompt-pro
*/

/* =====================================================
   🚀 LOCAL GOOGLE FONTS (Optimized with swap)
   ===================================================== */
@font-face {
    font-family: 'Outfit';
    src: url('./assets/fonts/outfit-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('./assets/fonts/outfit-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('./assets/fonts/space-grotesk-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('./assets/fonts/jetbrains-mono-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* =====================================================
   🌐 GLOBAL RESET & VARIABLES
   ===================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    line-height: 1.6;
    overflow-x: hidden;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

:root {
    --bg-color: #f8faff;
    --card-bg: #ffffff;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --accent-blue: #4285F4;
    --accent-purple: #9b72cb;
    --accent-pink: #d96570;
    --gradient-gemini: linear-gradient(135deg, #1a73e8, #8ab4f8, #e8eaed);
    --gradient-gemini-text: linear-gradient(90deg, #4285F4, #9b72cb, #d96570);
    --border-color: #e2e8f0;
    --hover-bg: #f1f5f9;
    --gemini-dark: #131314;
    --brand-chatgpt: #10a37f;
    --brand-midjourney: #5865F2;
    --brand-whisk: #ff5a5f;
}

body.home {
    font-family: 'Outfit', 'Poppins', sans-serif;
    background-image: radial-gradient(circle at top right, rgba(66, 133, 244, 0.05), transparent 400px),
                      radial-gradient(circle at bottom left, rgba(155, 114, 203, 0.05), transparent 400px);
}

body.single {
    font-family: 'Outfit', sans-serif;
    background-color: #f8f9fa;
    color: #000000;
    background-image: none;
    --bg-color: #f8f9fa;
    --text-main: #000000;
    --text-muted: #444746;
}

/* =====================================================
   🔵 MODERN HEADER & MENU STYLES
   ===================================================== */
#gpp-modern-header.site-header,
.site-header#gpp-modern-header {
    height: 80px !important;
    padding: 0 5% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    position: fixed !important;
    width: 100% !important;
    top: 0 !important;
    z-index: 99999 !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    box-shadow: 0 4px 30px rgba(0,0,0,0.08) !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

.gpp-header-logo.logo a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
}
.gpp-header-logo .brand-text {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.4rem !important;
    background: linear-gradient(90deg, #4285F4, #9b72cb, #d96570) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.gpp-header-logo .pro {
    background: #1e293b !important;
    color: #fff !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    -webkit-text-fill-color: white !important;
    margin-left: 5px !important;
    letter-spacing: 1px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* Header Links Underline Fix */
.site-header a, 
.site-header .nav-link,
.gpp-desktop-nav a,
.gpp-mobile-nav a {
    text-decoration: none !important;
    box-shadow: none !important;
}

.gpp-desktop-nav.desktop-nav-container {
    display: flex !important;
    align-items: center !important;
}
.gpp-desktop-menu.desktop-menu-list {
    display: flex !important;
    gap: 25px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    height: auto !important;
}
.gpp-desktop-menu > li {
    position: relative !important;
}

.gpp-desktop-menu > li > a,
.gpp-mobile-menu > li > a {
    color: #000000 !important; 
    font-weight: 600 !important;
}
.gpp-desktop-menu > li > a:hover {
    color: var(--accent-blue, #4285F4) !important;
}

/* Desktop Dropdown Arrow */
.gpp-desktop-menu li.menu-item-has-children > a::after {
    content: "▼" !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    margin-left: 4px !important;
    font-size: 11px !important;
    opacity: 0.7 !important;
    vertical-align: middle !important;
}

/* Desktop Submenu */
.gpp-desktop-menu ul.sub-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: #ffffff !important;
    min-width: 240px !important;
    padding: 10px 0 !important;
    list-style: none !important;
    border-radius: 8px !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) !important;
    transition: all 0.3s ease !important;
    z-index: 100000 !important;
    margin-top: 0 !important;
}

.gpp-desktop-menu ul.sub-menu::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    width: 100%;
    height: 15px;
    background: transparent;
}

.gpp-desktop-menu li:hover > ul.sub-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    animation: gppSlideDown 0.25s ease-out !important;
}
.gpp-desktop-menu ul.sub-menu li a {
    display: block !important;
    padding: 12px 20px !important;
    color: #334155 !important;
    font-size: 0.9rem !important;
    transition: all 0.2s !important;
    border-bottom: 1px solid #f1f5f9 !important;
}
.gpp-desktop-menu ul.sub-menu li:last-child a {
    border-bottom: none !important;
}
.gpp-desktop-menu ul.sub-menu li a:hover {
    background: #f8fafc !important;
    color: var(--accent-blue, #4285F4) !important;
    padding-left: 25px !important;
}

.gpp-desktop-menu ul.sub-menu ul.sub-menu {
    top: 0 !important;
    left: 100% !important;
    margin-top: 0 !important;
    margin-left: 10px !important;
}
.gpp-desktop-menu ul.sub-menu li:hover > ul.sub-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Mobile Toggle */
.gpp-mobile-toggle.mobile-menu-toggle {
    display: none !important;
    background: transparent !important;
    border: 2px solid var(--header-tc, #1a1a2e) !important;
    border-radius: 8px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 100002 !important;
    color: var(--header-tc, #1a1a2e) !important;
    font-size: 1.2rem !important;
    transition: all 0.3s !important;
}
.gpp-mobile-toggle:hover {
    background: var(--header-tc, #1a1a2e) !important;
    color: #fff !important;
}

/* Mobile Menu */
.gpp-mobile-nav.mobile-nav-container {
    display: none !important;
    position: fixed !important;
    top: 80px !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100vh - 80px) !important;
    background: #ffffff !important;
    z-index: 99998 !important;
    overflow-y: auto !important;
    padding: 20px 5% !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    border-top: 1px solid rgba(0,0,0,0.05) !important;
}
.gpp-mobile-nav.active {
    display: block !important;
    animation: gppSlideDown 0.3s ease-out !important;
}

.gpp-mobile-menu.mobile-menu-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.gpp-mobile-menu > li {
    width: 100% !important;
    border-bottom: 1px solid #f1f5f9 !important;
    position: relative !important;
}
.gpp-mobile-menu > li > a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 0 !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #000000 !important;
}

.gpp-submenu-toggle {
    background: #f1f5f9 !important;
    border: none !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: var(--header-tc, #1a1a2e) !important;
    font-size: 12px !important;
    transition: transform 0.3s !important;
}
.gpp-mobile-menu li.menu-item-has-children.active > .gpp-submenu-toggle {
    transform: rotate(180deg) !important;
    background: var(--accent-blue, #4285F4) !important;
    color: #fff !important;
}

.gpp-mobile-menu ul.sub-menu {
    display: none !important;
    list-style: none !important;
    padding: 0 0 10px 15px !important;
    margin: 0 !important;
    background: #f8fafc !important;
    border-left: 3px solid var(--accent-blue, #4285F4) !important;
    border-radius: 0 0 0 8px !important;
}
.gpp-mobile-menu ul.sub-menu.active { display: block !important; }
.gpp-mobile-menu ul.sub-menu li a {
    padding: 12px 0 !important;
    padding-left: 20px !important;
    font-size: 1rem !important;
    color: #475569 !important;
    display: block !important;
    border-bottom: 1px solid rgba(0,0,0,0.03) !important;
}
.gpp-mobile-menu ul.sub-menu ul.sub-menu {
    border-left: 3px solid var(--accent-purple, #9b72cb) !important;
    background: #f1f5f9 !important;
}
.gpp-mobile-menu ul.sub-menu ul.sub-menu li a {
    padding-left: 35px !important;
    font-size: 0.95rem !important;
}
.gpp-mobile-menu ul.sub-menu ul.sub-menu ul.sub-menu {
    border-left: 3px solid var(--accent-pink, #d96570) !important;
    background: #e2e8f0 !important;
}
.gpp-mobile-menu ul.sub-menu ul.sub-menu ul.sub-menu li a {
    padding-left: 50px !important;
    font-size: 0.9rem !important;
}

@keyframes gppSlideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 991px) {
    .gpp-desktop-nav.desktop-nav-container { display: none !important; }
    .gpp-mobile-toggle.mobile-menu-toggle { display: flex !important; }
    #gpp-modern-header.site-header { height: 70px !important; padding: 0 20px !important; }
    .gpp-mobile-nav.mobile-nav-container { top: 70px !important; height: calc(100vh - 70px) !important; }
}
@media (min-width: 992px) {
    .gpp-mobile-toggle.mobile-menu-toggle,
    .gpp-mobile-nav.mobile-nav-container { display: none !important; }
}

body > header:not(#gpp-modern-header) { display: none !important; }

/* =====================================================
   🏠 FRONT PAGE STYLES
   ===================================================== */
body.home .hero { margin-top: 110px; padding: 60px 5%; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
body.home .hero h1 { font-family: 'Space Grotesk', sans-serif; font-size: 3.5rem; font-weight: 700; margin-bottom: 15px; line-height: 1.2; color: var(--text-main); }
body.home .hero h1 span { background: var(--gradient-gemini-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
body.home .hero p { font-size: 1.1rem; color: var(--text-muted); max-width: 650px; margin-bottom: 40px; }
.search-container { width: 100%; max-width: 700px; position: relative; margin: 0 auto; }
.search-bar { width: 100%; padding: 20px 30px; font-size: 1.1rem; border-radius: 50px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-main); outline: none; transition: all 0.3s ease; box-shadow: 0 10px 30px rgba(66, 133, 244, 0.08); }
.search-bar:focus { border-color: var(--accent-blue); box-shadow: 0 0 20px rgba(66, 133, 244, 0.15); }
.search-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: var(--gradient-gemini-text); border: none; color: white; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; transition: transform 0.2s, box-shadow 0.2s; }
.search-btn:hover { transform: translateY(-50%) scale(1.05); }
.trending-tags { margin-top: 25px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.tag { background: var(--card-bg); border: 1px solid var(--border-color); padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; color: var(--text-muted); cursor: pointer; transition: all 0.3s; font-weight: 500; text-decoration: none; }
.tag:hover { background: var(--hover-bg); color: var(--text-main); border-color: var(--accent-blue); }
.tag i { color: var(--accent-pink); margin-right: 5px; }

/* =====================================================
   📄 POST GRIDS & PROMPT CARDS
   ===================================================== */
.vault-section { padding: 50px 5%; max-width: 1400px; margin: 0 auto; }
.section-title { font-family: 'Space Grotesk', sans-serif; font-size: 2rem; margin-bottom: 30px; display: flex; align-items: center; gap: 12px; color: var(--text-main); }
.section-title i { background: var(--gradient-gemini-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; }
.prompt-card { background: var(--card-bg); border-radius: 20px; overflow: hidden; position: relative; border: 1px solid var(--border-color); transition: transform 0.3s, box-shadow 0.3s; display: block; text-decoration: none; }
.prompt-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(66, 133, 244, 0.1); border-color: rgba(66, 133, 244, 0.3); }
.card-img-container { width: 100%; height: 250px; position: relative; overflow: hidden; }
.mock-img { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.5s; }
.prompt-card:hover .mock-img { transform: scale(1.05); filter: brightness(0.7) blur(2px); }
.card-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(4px); display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; padding: 20px; text-align: center; }
.prompt-card:hover .card-overlay { opacity: 1; }
.snippet-text { color: var(--text-main); font-size: 0.95rem; font-weight: 500; margin-bottom: 20px; font-style: italic; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.unlock-btn { background: var(--gradient-gemini-text); color: white; padding: 10px 24px; border-radius: 25px; font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; border: none; cursor: pointer; transition: transform 0.2s; }
.unlock-btn:hover { transform: scale(1.05); }
.card-info { padding: 24px; }
.category-badge { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 10px; display: inline-block; background: #1a73e8 !important; padding: 4px 10px; border-radius: 4px; color: #ffffff !important; }
.card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; line-height: 1.3; color: var(--text-main); }
.card-meta { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 0.85rem; border-top: 1px solid var(--border-color); padding-top: 15px; margin-top: 15px; font-weight: 500; }
.pagination-container { display: flex; justify-content: center; align-items: center; margin-top: 50px; gap: 10px; }
.page-item { display: flex; justify-content: center; align-items: center; min-width: 45px; height: 45px; padding: 0 15px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-main); font-weight: 600; text-decoration: none; transition: all 0.3s; font-family: 'Space Grotesk', sans-serif; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02); }
.page-item:hover { background: var(--hover-bg); border-color: var(--accent-blue); color: var(--accent-blue); transform: translateY(-2px); }
.page-item.active { background: var(--gradient-gemini-text); color: white; border: none; box-shadow: 0 4px 10px rgba(66, 133, 244, 0.3); }

/* =====================================================
   📝 SINGLE POST STYLES
   ===================================================== */
body.single .layout-container { display: flex; gap: 40px; width: 100%; max-width: var(--container-width, 1400px); margin: 120px auto 50px; padding: 0 5%; }
body.single .post-main { flex: 1; min-width: 0; width: 100%; }
body.single .sidebar { width: 340px; flex-shrink: 0; }
.breadcrumbs { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 25px; font-weight: 500; }
.post-title { font-size: 2.8rem; font-weight: 700; line-height: 1.2; margin-bottom: 15px; letter-spacing: -1px; }
.post-meta { display: flex; gap: 20px; color: var(--text-muted); font-size: 0.95rem; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); font-weight: 500; }
.post-meta span { display: flex; align-items: center; gap: 6px; }
.hero-image { width: 100%; border-radius: 24px; margin-bottom: 30px; border: 1px solid var(--border-color); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); }

/* =====================================================
   ✒️ PREMIUM ARTICLE TYPOGRAPHY
   ===================================================== */
.article-content p, body.home .seo-text-block p, .faq-content { color: #334155 !important; margin-bottom: 24px; line-height: 1.9; font-size: 1.1rem; letter-spacing: 0.2px; word-spacing: 1px; }
.article-content ul, .seo-features-list { margin-bottom: 25px; padding-left: 20px; }
.article-content li, .seo-features-list li { margin-bottom: 15px; line-height: 1.8; color: #334155; font-size: 1.1rem; }
.article-content h2, .article-content h3 { margin: 40px 0 20px; color: var(--text-main); letter-spacing: -0.5px; font-weight: 600; }

/* =====================================================
   ✨ PROMPT BOX MAGIC
   ===================================================== */
.action-hub { background: var(--card-bg); border-radius: 24px; padding: 0; margin: 40px 0; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06); border: 1px solid var(--border-color); overflow: hidden; }
.prompt-container { background: var(--gemini-dark); padding: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.prompt-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.prompt-header-title { color: #e3e3e3; font-size: 1.1rem; font-weight: 500; display: flex; align-items: center; gap: 10px; }
.prompt-text { color: #e3e3e3; font-family: 'JetBrains Mono', monospace; font-size: 1.05rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; background: rgba(0, 0, 0, 0.3); padding: 20px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.05); margin-bottom: 25px; }
.copy-btn-wrapper { display: flex; justify-content: center; margin-top: 10px; }
.copy-prompt-btn { background: #ffffff; color: var(--text-main); border: none; padding: 14px 40px; font-size: 1.1rem; font-weight: 600; border-radius: 50px; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1); font-family: 'Outfit', sans-serif; }
.copy-prompt-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15); }
.copy-prompt-btn.copied { background: #e6f4ea; color: #137333; }
.ai-tools-section { padding: 25px 30px; background: var(--card-bg); display: flex; flex-direction: column; align-items: center; gap: 15px; }
.ai-tools-title { font-size: 0.95rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.ai-buttons-row { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; width: 100%; }
.ai-tool-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: 50px; font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: all 0.2s; border: 1px solid var(--border-color); color: var(--text-main); background: var(--bg-color); flex: 1; min-width: 140px; max-width: 200px; }
.ai-tool-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); }

/* =====================================================
   📌 WIDGETS & SIDEBAR
   ===================================================== */
.widget { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 24px; padding: 30px; margin-bottom: 30px; }
.widget-title { font-size: 1.25rem; margin-bottom: 20px; font-weight: 600; color: var(--text-main); display: flex; align-items: center; gap: 8px; letter-spacing: -0.5px; }
.trending-item { display: flex; gap: 15px; margin-bottom: 20px; align-items: center; text-decoration: none; transition: 0.3s; }
.trending-item:last-child { margin-bottom: 0; }
.trending-item:hover .t-title { color: var(--accent-blue); }
.t-img { width: 75px; height: 75px; border-radius: 12px; object-fit: cover; }
.t-info { flex: 1; }
.t-title { font-size: 0.95rem; font-weight: 500; color: var(--text-main); margin-bottom: 4px; line-height: 1.4; transition: 0.2s; }
.t-meta { font-size: 0.8rem; color: var(--text-muted); }
.sticky-widget { position: sticky; top: 100px; }

/* =====================================================
   🚀 FRONT PAGE SEO SECTION & FAQS
   ===================================================== */
.seo-section { background: #ffffff; padding: 80px 5%; margin-top: 60px; border-top: 1px solid var(--border-color); }
.seo-container { max-width: 1200px; margin: 0 auto; }
.seo-heading { font-family: 'Space Grotesk', sans-serif; font-size: 2.2rem; color: var(--text-main); margin-bottom: 20px; text-align: center; }
.seo-subtext { text-align: center; color: var(--text-muted); max-width: 800px; margin: 0 auto 50px; font-size: 1.1rem; }
.seo-content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; margin-bottom: 60px; }
.seo-text-block h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; margin-bottom: 15px; color: var(--text-main); }
.keyword-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 25px; }
.k-pill { background: #1a73e8 !important; color: #ffffff !important; padding: 5px 12px; border-radius: 6px; font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.directory-box { background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 16px; padding: 30px; }
.directory-box h4 { font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; margin-bottom: 20px; border-bottom: 2px solid var(--border-color); padding-bottom: 10px; }
.directory-links { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.directory-links a { color: #1e293b !important; text-decoration: none; font-weight: 500; transition: color 0.3s; display: flex; align-items: center; gap: 8px; font-size: 0.95rem; }
.directory-links a:hover { color: var(--accent-blue) !important; }
.faq-section { max-width: 900px; margin: 0 auto; }
.faq-section h2 { text-align: center; font-family: 'Space Grotesk', sans-serif; font-size: 2rem; margin-bottom: 30px; }
details { background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 12px; margin-bottom: 15px; overflow: hidden; transition: all 0.3s; }
details[open] { border-color: var(--accent-purple); box-shadow: 0 4px 15px rgba(155, 114, 203, 0.1); }
summary { padding: 20px; font-weight: 600; color: var(--text-main); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '\f078'; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--accent-blue); transition: transform 0.3s; }
details[open] summary::after { transform: rotate(180deg); }
.faq-content { padding: 0 20px 20px; border-top: 1px solid rgba(0, 0, 0, 0.05); margin-top: 10px; padding-top: 15px; }

/* =====================================================
   📱 RESPONSIVE FIXES (Fixed Syntax Errors)
   ===================================================== */
@media (max-width: 992px) {
    body.single .layout-container { flex-direction: column; }
    body.single .sidebar { width: 100%; }
    .post-title { font-size: 2.2rem; }
    .ai-buttons-row { flex-wrap: wrap; }
    .ai-tool-btn { flex: 1 1 calc(50% - 15px); min-width: 130px; }
}

@media (max-width: 768px) {
    body.home .hero { margin-top: 90px; }
    .layout-container { padding: 0 20px !important; margin-top: 90px !important; }
    .article-content { padding: 0 10px; }
    .article-content p, body.home .seo-text-block p, .faq-content { font-size: 1.05rem; line-height: 1.8; margin-bottom: 20px; }
    body.home .hero h1 { font-size: 2.5rem; }
    body.home .seo-content-grid { grid-template-columns: 1fr; }
    body.home .directory-links { grid-template-columns: 1fr; }
    body.home .pagination-container { flex-wrap: wrap; }
    
    /* FIX: Corrected broken comments that would break layout */
    body.single .hero-image {
        max-height: 220px;
        object-fit: cover;
        width: 100%;
        border-radius: 16px;
        margin-bottom: 20px;
    }
}

/* ===== 🛡️ SAFE LAYOUT FIX - Category/Archive/Search/404 ===== */
body.category .layout-container, body.archive .layout-container, body.search .layout-container, body.error404 .layout-container, body.single-ai_prompt .layout-container { display: flex; gap: 40px; align-items: flex-start; max-width: 1400px; margin: 120px auto 50px; padding: 0 5%; width: 100%; box-sizing: border-box; }
body.category .layout-container main, body.archive .layout-container main, body.search .layout-container main, body.error404 .layout-container main, body.single-ai_prompt .layout-container main { flex: 1; min-width: 0; width: 100%; }
body.category .layout-container aside, body.archive .layout-container aside, body.search .layout-container aside, body.error404 .layout-container aside, body.single-ai_prompt .layout-container aside { width: 340px; flex-shrink: 0; }
body.category .sticky-widget, body.archive .sticky-widget, body.search .sticky-widget, body.error404 .sticky-widget, body.single-ai_prompt .sticky-widget { position: sticky; top: 100px; }

/* ===== 🛡️ SAFE GRID FIX ===== */
body.category .grid-container, body.archive .grid-container, body.search .grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; }
body.category .prompt-card, body.archive .prompt-card, body.search .prompt-card { height: 100%; display: flex; flex-direction: column; }
body.category .card-info, body.archive .card-info, body.search .card-info { margin-top: auto; }

/* ===== 🛡️ RESPONSIVE - Safe breakpoints ===== */
@media (max-width: 1024px) {
    body.category .layout-container, body.archive .layout-container, body.search .layout-container, body.error404 .layout-container, body.single-ai_prompt .layout-container { flex-direction: column; margin-top: 90px; }
    body.category .layout-container aside, body.archive .layout-container aside, body.search .layout-container aside, body.error404 .layout-container aside, body.single-ai_prompt .layout-container aside { width: 100%; }
    body.category .grid-container, body.archive .grid-container, body.search .grid-container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    body.category .layout-container, body.archive .layout-container, body.search .layout-container, body.error404 .layout-container, body.single-ai_prompt .layout-container { padding: 0 20px !important; margin-top: 90px !important; }
    body.category .grid-container, body.archive .grid-container, body.search .grid-container { grid-template-columns: 1fr; gap: 20px; }
}

/* ===== 🛡️ CATEGORY/ARCHIVE/SEARCH HEADER STYLES ===== */
body.category .category-header, body.archive .archive-header, body.search .search-header { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 24px; padding: 40px 30px; margin: 0 0 40px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
body.category .category-header h1, body.archive .archive-header h1, body.search .search-header h1 { font-family: 'Space Grotesk', sans-serif; font-size: 2rem; color: var(--text-main); margin-bottom: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
body.category .category-header h1 i, body.archive .archive-header h1 i, body.search .search-header h1 i { background: var(--gradient-gemini-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* ===== 🛡️ PAGINATION ===== */
body.category .pagination-container, body.archive .pagination-container, body.search .pagination-container { display: flex; justify-content: center; align-items: center; margin: 40px 0 60px; gap: 10px; flex-wrap: wrap; }

/* ===== 🛡️ 404 PAGE STYLES ===== */
body.error404 .error-404-container { max-width: 800px; margin: 60px auto; text-align: center; padding: 0 20px; }
body.error404 .error-code { font-family: 'Space Grotesk', sans-serif; font-size: 8rem; font-weight: 900; color: var(--accent-blue); line-height: 1; text-shadow: 0 10px 30px rgba(66, 133, 244, 0.2); animation: float 3s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
body.error404 .error-icon { position: relative; font-size: 3rem; color: white; background: var(--accent-blue); width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(66, 133, 244, 0.3); margin: 20px auto; }
body.error404 .error-content h1 { font-family: 'Space Grotesk', sans-serif; font-size: 2rem; color: var(--text-main); margin-bottom: 15px; }
body.error404 .error-search { max-width: 500px; margin: 0 auto 40px; position: relative; }
body.error404 .error-search input[type="search"] { width: 100%; padding: 14px 50px 14px 20px; border: 2px solid var(--border-color); border-radius: 30px; font-size: 1rem; background: var(--card-bg); color: var(--text-main); transition: 0.2s; }
body.error404 .error-search input[type="search"]:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1); }
body.error404 .error-search button { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); background: var(--gradient-gemini-text); border: none; color: white; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
body.error404 .error-links { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
body.error404 .error-link { background: var(--card-bg); border: 1px solid var(--border-color); color: var(--text-muted); padding: 12px 20px; border-radius: 30px; font-size: 0.95rem; text-decoration: none; transition: 0.2s; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
body.error404 .error-link:hover { background: var(--accent-blue); color: white; border-color: var(--accent-blue); transform: translateY(-2px); }

/* ===== 🛡️ ARCHIVE FILTER TABS ===== */
body.archive .archive-filters { display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; }
body.archive .filter-btn { background: var(--card-bg); border: 1px solid var(--border-color); color: var(--text-muted); padding: 10px 20px; border-radius: 30px; font-size: 0.95rem; font-weight: 500; text-decoration: none; transition: 0.2s; display: inline-flex; align-items: center; gap: 6px; }
body.archive .filter-btn:hover, body.archive .filter-btn.active { background: var(--accent-blue); color: white; border-color: var(--accent-blue); }

/* ===== 🛡️ POPULAR PROMPTS - 404 Page ===== */
body.error404 .popular-prompts { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 24px; padding: 30px; margin-top: 40px; text-align: left; }
body.error404 .popular-prompts h3 { font-size: 1.3rem; color: var(--text-main); margin-bottom: 20px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
body.error404 .popular-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
body.error404 .popular-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; text-decoration: none; transition: 0.2s; background: var(--bg-color); }
body.error404 .popular-item:hover { background: var(--accent-blue); transform: translateX(5px); }
body.error404 .popular-item:hover .popular-title { color: white; }
body.error404 .popular-item:hover .popular-icon { color: white; }
body.error404 .popular-thumb { width: 50px; height: 50px; border-radius: 10px; background-size: cover; background-position: center; flex-shrink: 0; }
body.error404 .popular-info { flex: 1; min-width: 0; }
body.error404 .popular-title { font-size: 0.95rem; font-weight: 600; color: var(--text-main); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: 0.2s; }
body.error404 .popular-icon { color: var(--accent-blue); font-size: 0.9rem; transition: 0.2s; }