/**
 * FAQ Hub - Professional Theme Enhancements
 *
 * Design System Features:
 * - 8px grid spacing
 * - Major Third typography scale (1.25)
 * - 5-level elevation system
 * - Refined micro-interactions
 * - WCAG 2.1 AA compliant
 */
@media (max-width:768px){.hero-grid{gap:var(--uo-space-4)}.post-card-featured{min-height:280px !important}.post-card-featured .post-overlay{padding:var(--uo-space-5)}.post-card-featured .post-title{font-size:var(--uo-text-xl)}.section-header{flex-direction:column;align-items:flex-start;gap:var(--uo-space-2)}.footer-widgets{gap:var(--uo-space-8)}.header-main .container{gap:var(--uo-space-3)}.header-btn span{display:none}.header-btn{padding:var(--uo-space-3);min-width:44px;justify-content:center}}.post-card::after{display:none}.post-card{position:relative}.post-card .post-thumbnail::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.1),transparent);opacity:0;transition:opacity var(--uo-transition)}.post-card:hover .post-thumbnail::after{opacity:1}.tool-card{position:relative;overflow:hidden;border:1px solid var(--uo-border);transition:border-color var(--uo-transition),box-shadow var(--uo-transition),transform var(--uo-transition)}.tool-card:hover{border-color:var(--uo-primary);box-shadow:var(--uo-shadow-md);transform:translateY(-2px)}.tool-card::before{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.05),transparent);transition:left 0.6s var(--uo-ease-out)}.tool-card:hover::before{left:150%}.newsletter-form input,.search-form .search-field{transition:border-color var(--uo-transition-fast),box-shadow var(--uo-transition-fast)}.newsletter-form input:focus,.search-form .search-field:focus{border-color:var(--uo-primary);box-shadow:0 0 0 3px var(--uo-primary-subtle)}.newsletter-form button,.search-form .search-submit{transition:background var(--uo-transition-fast),transform var(--uo-transition-fast)}.newsletter-form button:hover,.search-form .search-submit:hover{background:var(--uo-primary);transform:translateY(-1px)}.newsletter-form button:active,.search-form .search-submit:active{transform:translateY(0)}.skeleton{background:linear-gradient(90deg,var(--uo-bg-alt) 25%,var(--uo-border) 37%,var(--uo-bg-alt) 63%);background-size:400% 100%;animation:skeleton-loading 1.4s ease infinite}@keyframes skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}@media print{.site-header,.site-footer,.sidebar,.back-to-top,.share-buttons,.post-navigation,.related-posts,.comments-area{display:none !important}.site-content{width:100%;padding:0}.entry-content{max-width:100%}a{color:#000;text-decoration:underline}a[href]::after{content:" (" attr(href) ")";font-size:0.8em;opacity:0.7}body{font-size:12pt;line-height:1.5}}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--uo-primary);outline-offset:2px}a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}.skip-link{position:absolute;top:-100%;left:var(--uo-space-4);z-index:99999;padding:var(--uo-space-4) var(--uo-space-6);background:var(--uo-primary);color:#fff;text-decoration:none;font-weight:600;border-radius:var(--uo-radius-sm);transition:top var(--uo-transition-fast)}.skip-link:focus{top:var(--uo-space-4)}::selection{background:var(--uo-primary);color:#fff}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--uo-text-muted);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--uo-text-tertiary)}[data-theme="dark"]::-webkit-scrollbar-thumb{background:var(--uo-border-strong)}[data-theme="dark"]::-webkit-scrollbar-thumb:hover{background:var(--uo-text-muted)}.search-form{display:flex}.search-form .search-field{flex:1;padding:var(--uo-space-3) var(--uo-space-4);font-size:var(--uo-text-base);border:1.5px solid var(--uo-border);border-right:none;border-radius:var(--uo-radius-sm) 0 0 var(--uo-radius-sm);background:var(--uo-bg);color:var(--uo-text)}.search-form .search-submit{padding:var(--uo-space-3) var(--uo-space-4);background:var(--uo-border-dark);border:1.5px solid var(--uo-border-dark);border-radius:0 var(--uo-radius-sm) var(--uo-radius-sm) 0;color:#fff}.archive-ai_tool .posts-grid{grid-template-columns:repeat(4,1fr);gap:var(--uo-space-6)}@media (max-width:1024px){.archive-ai_tool .posts-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:640px){.archive-ai_tool .posts-grid{grid-template-columns:1fr}}.entry-content a{color:var(--uo-primary);text-decoration:underline;text-underline-offset:2px;transition:color var(--uo-transition-fast)}.entry-content a:hover{color:var(--uo-primary-hover)}.entry-content pre{background:var(--uo-bg-dark);color:#e5e5e5;padding:var(--uo-space-5);overflow-x:auto;margin:var(--uo-space-6) 0;border-radius:var(--uo-radius-sm);font-size:var(--uo-text-sm);line-height:1.6}.entry-content code{background:var(--uo-bg-alt);padding:2px var(--uo-space-2);font-size:0.9em;border-radius:3px;font-family:'SF Mono',Monaco,'Cascadia Code',monospace}.entry-content pre code{background:transparent;padding:0}.entry-content table{width:100%;border-collapse:collapse;margin:var(--uo-space-6) 0;font-size:var(--uo-text-base)}.entry-content th,.entry-content td{padding:var(--uo-space-3) var(--uo-space-4);border:1px solid var(--uo-border);text-align:left}.entry-content th{background:var(--uo-bg-alt);font-weight:600}.entry-content tbody tr:nth-child(even){background:var(--uo-bg-alt)}.entry-content blockquote{margin:var(--uo-space-8) 0;padding:var(--uo-space-6) var(--uo-space-8);background:var(--uo-bg-alt);border-left:4px solid var(--uo-primary);font-family:var(--uo-font-accent);font-size:var(--uo-text-xl);font-style:italic;line-height:var(--uo-leading-relaxed)}.entry-content blockquote p:last-child{margin-bottom:0}.wp-block-gallery{margin:var(--uo-space-8) 0}.wp-block-gallery .wp-block-image{margin:0}.wp-block-embed-youtube,.wp-block-embed-vimeo{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:var(--uo-space-6) 0;border-radius:var(--uo-radius-sm)}.wp-block-embed-youtube iframe,.wp-block-embed-vimeo iframe{position:absolute;top:0;left:0;width:100%;height:100%}.post-thumbnail img,.wp-block-image img{transition:transform var(--uo-duration-slow) var(--uo-ease-out)}.loading{opacity:0.6;pointer-events:none}.loading::after{content:'';position:absolute;top:50%;left:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border:2px solid var(--uo-border);border-top-color:var(--uo-primary);border-radius:50%;animation:spin 0.8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.page-transition-enter{opacity:0;transform:translateY(10px)}.page-transition-enter-active{opacity:1;transform:translateY(0);transition:opacity var(--uo-duration-base) var(--uo-ease-out),transform var(--uo-duration-base) var(--uo-ease-out)}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}html{scroll-behavior:auto}}

/* ============================================
   Social Share Buttons
   ============================================ */
.social-share-buttons{display:flex;align-items:center;flex-wrap:wrap;gap:var(--uo-space-3);margin:var(--uo-space-8) 0;padding:var(--uo-space-5) 0;border-top:1px solid var(--uo-border);border-bottom:1px solid var(--uo-border)}
.social-share-buttons .share-label{font-size:var(--uo-text-sm);font-weight:600;color:var(--uo-text-secondary);margin-right:var(--uo-space-2)}
.social-share-buttons .share-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--uo-radius-sm);background:var(--uo-bg-alt);color:var(--uo-text-secondary);border:1px solid var(--uo-border);transition:all var(--uo-transition-fast)}
.social-share-buttons .share-btn:hover{transform:translateY(-2px);box-shadow:var(--uo-shadow-sm)}
.social-share-buttons .share-facebook:hover{background:#1877F2;border-color:#1877F2;color:#fff}
.social-share-buttons .share-twitter:hover{background:#1DA1F2;border-color:#1DA1F2;color:#fff}
.social-share-buttons .share-linkedin:hover{background:#0A66C2;border-color:#0A66C2;color:#fff}
.social-share-buttons .share-pinterest:hover{background:#E60023;border-color:#E60023;color:#fff}
.social-share-buttons .share-telegram:hover{background:#0088CC;border-color:#0088CC;color:#fff}
.social-share-buttons .share-copy:hover{background:var(--uo-primary);border-color:var(--uo-primary);color:#fff}
.social-share-buttons .share-copy.copied{background:#22C55E;border-color:#22C55E;color:#fff}

/* Floating Share Bar for Desktop */
@media (min-width:1200px){
.single-post-content{position:relative}
.social-share-floating{position:sticky;top:120px;left:-80px;width:50px;display:flex;flex-direction:column;gap:var(--uo-space-2);margin-left:-80px;float:left}
.social-share-floating .share-btn{width:44px;height:44px;border-radius:50%}
}

/* Mobile responsive share buttons */
@media (max-width:640px){
.social-share-buttons{justify-content:center}
.social-share-buttons .share-label{width:100%;text-align:center;margin-bottom:var(--uo-space-2)}
}

/* ============================================
   Mobile UX Improvements
   ============================================ */

/* 1. Touch targets - minimum 44px */
.menu-toggle,
.search-toggle,
.dark-mode-toggle,
.back-to-top,
.search-overlay-close{min-width:44px;min-height:44px}

/* 2. Better section separation */
.posts-section{padding:var(--uo-space-10) 0;border-bottom:1px solid var(--uo-border)}
.posts-section:last-child{border-bottom:none}
.posts-section[style*="background"]{border-bottom:none;margin:var(--uo-space-6) 0;border-radius:var(--uo-radius-md)}


/* 4. Improved Newsletter CTA */
.widget-newsletter{position:relative;overflow:hidden}
.widget-newsletter::before{content:'📧';position:absolute;top:-10px;right:-10px;font-size:80px;opacity:0.1}
.widget-newsletter .widget-title{font-size:var(--uo-text-xl)}

/* 5. Better card readability on mobile */
@media (max-width:640px){
    /* Larger touch targets */
    .post-card .post-title{font-size:var(--uo-text-lg);line-height:1.4}
    .post-card .post-content{padding:var(--uo-space-5)}
    .post-card .post-excerpt{font-size:var(--uo-text-base);-webkit-line-clamp:3}

    /* Better spacing */
    .posts-section{padding:var(--uo-space-8) 0}
    .posts-grid{gap:var(--uo-space-5)}

    /* Sidebar full width with better spacing */
    .sidebar{margin-top:var(--uo-space-8);padding-top:var(--uo-space-8);border-top:1px solid var(--uo-border)}
    .widget{margin-bottom:var(--uo-space-6)}

    /* Footer improvements */
    .footer-widgets{grid-template-columns:1fr !important;text-align:center}
    .footer-contact p{justify-content:center}
    .footer-bottom{flex-direction:column;gap:var(--uo-space-4);text-align:center}

    /* Hero section mobile */
    .hero-grid{grid-template-columns:1fr !important}
    .hero-secondary{display:grid;grid-template-columns:1fr 1fr;gap:var(--uo-space-4)}
    .post-card-featured .post-title{font-size:var(--uo-text-xl) !important}
}

/* 6. Header optimization for mobile */
@media (max-width:768px){
    /* Hide top bar on mobile to save space */
    .header-top{display:none}

    /* Compact main header */
    .header-main{padding:var(--uo-space-3) 0}
    .site-title{font-size:var(--uo-text-2xl) !important}

    /* Better mobile menu */
    .header-nav{padding-top:var(--uo-space-16)}
    .main-navigation a{padding:var(--uo-space-4) 0;font-size:var(--uo-text-base)}
}

/* 7. Accessibility - visible labels */
.newsletter-form label,
.search-form label{display:block;margin-bottom:var(--uo-space-2);font-size:var(--uo-text-sm);font-weight:500}
.newsletter-form .screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* 8. Better focus states for accessibility */
.post-card:focus-within{outline:2px solid var(--uo-primary);outline-offset:2px}
.post-card a:focus{outline:none}

/* 9. Loading states */
.loading-more{text-align:center;padding:var(--uo-space-6)}
.loading-more::after{content:'';display:inline-block;width:24px;height:24px;border:3px solid var(--uo-border);border-top-color:var(--uo-primary);border-radius:50%;animation:spin 0.8s linear infinite}

/* 10. Empty states */
.no-posts{text-align:center;padding:var(--uo-space-12);color:var(--uo-text-secondary)}
.no-posts::before{content:'📭';display:block;font-size:3rem;margin-bottom:var(--uo-space-4)}

/* 11. Better back-to-top visibility */
.back-to-top{bottom:var(--uo-space-6);right:var(--uo-space-6);box-shadow:var(--uo-shadow-lg)}
.back-to-top.visible{opacity:1;transform:translateY(0)}

/* 12. Improved reading experience */
.entry-content{font-size:var(--uo-text-lg);line-height:1.8}
@media (max-width:640px){
    .entry-content{font-size:var(--uo-text-base);line-height:1.7}
    .entry-content h2{font-size:var(--uo-text-xl)}
    .entry-content h3{font-size:var(--uo-text-lg)}
}