/*! iTools Blog Main CSS - Loaded asynchronously */

/* Tailwind CDN replacement - critical styles only */
*,*:before,*:after{box-sizing:border-box;border:0 solid #e5e5e5}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{background:linear-gradient(135deg,#fafafa 0%,#fff 50%,#f5f5f5 100%)}
@media (prefers-color-scheme:dark){body{background:linear-gradient(135deg,#171717 0%,#262626 50%,#171717 100%);color:#d4d4d4}}

/* Scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:#e5e5e5}
::-webkit-scrollbar-thumb{background:#a3a3a3;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#525252}
@media (prefers-color-scheme:dark){::-webkit-scrollbar-track{background:#262626}::-webkit-scrollbar-thumb{background:#525252}}

/* Header */
.main-header{transition:box-shadow .3s ease,background-color .3s ease}
.main-header.scrolled{box-shadow:0 4px 6px -1px rgba(0,0,0,.1);background-color:rgba(255,255,255,.95);backdrop-filter:blur(8px)}
@media (prefers-color-scheme:dark){.main-header.scrolled{background-color:rgba(23,23,23,.95)}}

/* Container */
.container-custom{max-width:1280px;width:100%;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}
@media (min-width:640px){.container-custom{padding-left:1.5rem;padding-right:1.5rem}}
@media (min-width:1024px){.container-custom{padding-left:2rem;padding-right:2rem}}

/* Navigation */
.primary-menu{display:flex;gap:2rem;align-items:center;list-style:none;margin:0;padding:0}
.primary-menu .sub-menu{position:absolute;left:0;margin-top:.5rem;width:12rem;background-color:#fff;border-radius:.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);padding:.5rem 0;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;z-index:50}
.primary-menu li:hover>.sub-menu{opacity:1;visibility:visible}
.primary-menu .sub-menu li a{display:block;padding:.5rem 1rem;color:#404040;transition:all .2s ease}
.primary-menu .sub-menu li a:hover{background-color:#f5f5f5;color:#525252}
@media (prefers-color-scheme:dark){.primary-menu .sub-menu{background-color:#262626}.primary-menu .sub-menu li a{color:#d4d4d4}.primary-menu .sub-menu li a:hover{background-color:#404040;color:#a3a3a3}}

/* Mobile Menu */
.mobile-menu-container{transition:all .3s ease;overflow:hidden}
.mobile-menu-container.max-h-0{max-height:0;opacity:0;visibility:hidden}
.mobile-menu-container.max-h-96{max-height:24rem;opacity:1;visibility:visible}

/* Search Overlay */
.search-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.95);z-index:1000;backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;display:flex;align-items:center;justify-content:center}
.search-overlay.active{opacity:1;visibility:visible}
.search-overlay-content{width:100%;max-width:650px;margin:0 auto;padding:0 20px}
.search-overlay input{transition:all .3s ease;width:100%}
.search-overlay input:focus{transform:scale(1.02);background-color:rgba(255,255,255,.25)}
.search-close{position:absolute;top:18px;right:20px;background:rgba(255,255,255,.75);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .3s ease,background .3s ease;z-index:10}
.search-close:hover{transform:rotate(90deg);background:rgba(255,255,255,.95)}

/* Carousel */
.carousel-track{transition:transform .5s cubic-bezier(.4,0,.2,1)}
.carousel-slide{min-width:100%}
.carousel-dots{display:flex;gap:16px;padding:8px 16px;background:rgba(0,0,0,.3);border-radius:40px;backdrop-filter:blur(4px)}
.carousel-dot{min-width:44px;min-height:44px;width:44px;height:44px;margin:0;padding:12px;border-radius:50%;background-clip:content-box;background-color:transparent;position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center}
.carousel-dot::before{content:'';display:block;width:8px;height:8px;border-radius:50%;background-color:currentColor;transition:transform .2s ease,width .2s ease,height .2s ease}
.carousel-dot[aria-current="true"]::before{background-color:#fff;width:12px;height:12px;transform:scale(1.3)}
.carousel-dot:not([aria-current="true"])::before{background-color:rgba(255,255,255,.6)}
.carousel-dot:hover::before{transform:scale(1.2);background-color:#fff}
@media (max-width:768px){.carousel-slide{min-height:400px}}

/* Text truncation */
.line-clamp-2{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:2;line-clamp:2}
.line-clamp-3{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:3;line-clamp:3}

/* Animations */
@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}100%{opacity:1;transform:translateY(0)}}
.animate-fadeIn{animation:fadeIn .3s ease-out}
@keyframes highlight{0%,100%{background-color:transparent}50%{background-color:rgba(163,163,163,.15)}}
.highlight-heading{animation:highlight 1.5s ease}
@keyframes spin{100%{transform:rotate(360deg)}}
.spinner{width:40px;height:40px;border:4px solid #e5e5e5;border-top-color:#525252;border-radius:50%;animation:spin .8s linear infinite}

/* Utility classes */
.transition-all{transition:all .3s ease}
.rotate-180{transform:rotate(180deg)}
.loading{opacity:.6;cursor:wait;pointer-events:none}

/* Pagination */
.pagination{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border-radius:10px;background-color:#e5e5e5;color:#262626;font-weight:500;transition:all .2s ease;text-decoration:none}
.pagination .page-numbers.current{background-color:#525252;color:#fff;box-shadow:0 2px 8px rgba(82,82,82,.3)}
.pagination .page-numbers:hover:not(.current){background-color:#525252;color:#fff;transform:translateY(-2px)}
@media (max-width:768px){.pagination .page-numbers{min-width:35px;height:35px;font-size:.8125rem}}
@media (prefers-color-scheme:dark){.pagination .page-numbers{background-color:#404040;color:#d4d4d4}}

/* Category and Tag links */
.category-link,.tag-link{transition:all .2s ease}
.category-link.active{background-color:#525252!important;color:#fff!important;box-shadow:0 4px 12px rgba(82,82,82,.3)}
.category-link:not(.active):hover,.tag-link:hover{transform:translateY(-2px)}
@media (max-width:768px){.category-link,.tag-link{font-size:.75rem;padding:6px 14px}}

/* Button styles */
input#submit,.comment-form input[type="submit"],.wp-block-button__link{background-color:#525252!important;color:#fff!important;font-weight:600!important;border:none!important;cursor:pointer}
input#submit:hover,.comment-form input[type="submit"]:hover{background-color:#404040!important}

/* Scroll to top */
.scroll-to-top{position:fixed;bottom:15px;right:15px;z-index:1;width:40px;height:40px;border-radius:50%;background-color:#E65C00;color:#fff;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;border:none;opacity:0;visibility:hidden}
.scroll-to-top:hover{background-color:#525252;transform:translateY(-2px)}

/* TOC links */
.toc-link.active{color:#525252!important;font-weight:600!important}
@media (prefers-color-scheme:dark){.toc-link.active{color:#a3a3a3!important}}

/* Article Content */
.article-content{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}
.article-content h2{font-size:1.5rem;font-weight:700;margin-top:2rem;margin-bottom:1rem;scroll-margin-top:80px}
@media (min-width:768px){.article-content h2{font-size:1.875rem}}
.article-content h3{font-size:1.25rem;font-weight:600;margin-top:1.5rem;margin-bottom:.75rem;scroll-margin-top:80px}
@media (min-width:768px){.article-content h3{font-size:1.5rem}}
.article-content p{margin-bottom:1rem;line-height:1.625}
.article-content a{color:#171717;text-decoration:none;border-bottom:1px solid #171717}
.article-content a:hover{color:#171717;border-bottom:1px solid transparent}
.article-content ul,.article-content ol{margin:1.5rem 0;padding-left:2rem}
.article-content ul{list-style-type:disc}
.article-content ol{list-style-type:decimal}
.article-content li{margin:.5rem 0;line-height:1.6}
.article-content blockquote{margin:1.5rem 0;padding:1rem 1.5rem;border-left:4px solid #525252;background-color:#fafafa;font-style:italic;color:#404040}
.article-content blockquote p{margin:0}
.article-content pre{background-color:#262626;color:#d4d4d4;padding:1rem;border-radius:8px;overflow-x:auto;margin:1.5rem 0;white-space:pre-wrap;word-break:break-all;max-width:100%}
.article-content code{background-color:#e5e5e5;padding:.2rem .4rem;border-radius:4px;font-size:.875em;color:#b91c1c}
.article-content img,.article-content video,.article-content iframe,.article-content figure{max-width:100%;height:auto;display:block;border-radius:10px}
.article-content .wp-caption{margin-bottom:1rem;max-width:100%}
.article-content .wp-caption-text{font-size:.875rem;color:#262626;text-align:center;margin-top:.5rem}
@media (prefers-color-scheme:dark){.article-content blockquote{background-color:#262626;color:#d4d4d4}.article-content code{background-color:#404040;color:#f87171}.article-content .wp-caption-text{color:#a3a3a3}}

/* Footer */
footer.bg-slate-900,footer .bg-slate-900{background-color:#171717!important}
footer .text-slate-300,footer .text-slate-400{color:#d4d4d4!important}
footer a{color:#a3a3a3!important}
footer a:hover{color:#f5f5f5!important}
footer p,footer span:not([class*="text-white"]),footer div:not([class*="text-white"]){color:#d4d4d4!important}
footer .text-white.font-bold{color:#fff!important;font-weight:700}

/* Toast */
.custom-toast{position:fixed;bottom:1rem;right:1rem;z-index:9999;padding:.75rem 1.5rem;border-radius:.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);animation:fadeIn .3s ease;background-color:#262626;color:#fff}

/* RTL Support */
[dir="rtl"] .text-left{text-align:right}
[dir="rtl"] .text-right{text-align:left}
[dir="rtl"] .ml-2{margin-left:0;margin-right:.5rem}
[dir="rtl"] .mr-2{margin-right:0;margin-left:.5rem}
[dir="rtl"] .pl-4{padding-left:0;padding-right:1rem}
[dir="rtl"] .pr-4{padding-right:0;padding-left:1rem}

/* Responsive embeds */
embed,iframe,img,video{max-width:100%;height:auto}

/* Breadcrumb */
.breadcrumb a,[aria-label="breadcrumb"] a{color:#a3a3a3!important}
.breadcrumb [aria-current="page"]{color:#f5f5f5!important}
@media (prefers-color-scheme:dark){.breadcrumb [aria-current="page"]{color:#d4d4d4}}

/* Comments */
.comment-metadata a,.comment-edit-link{color:#262626!important}
@media (prefers-color-scheme:dark){.comment-metadata a,.comment-edit-link{color:#a3a3a3!important}}

/* Search overlay placeholder */
.search-overlay input::placeholder{color:#d4d4d4!important;opacity:.8}