/*
Theme Name: ClyCode
Theme URI: https://clycode.com
Author: ClyCode
Author URI: https://clycode.com
Description: ClyCode emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clycode
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');


body {
    font-family: 'Inter', sans-serif;
    background: #ffffff;
}

/* Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, #9333ea 0%, #3b82f6 50%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Gradient Background */
.gradient-bg {
    background: linear-gradient(135deg, #9333ea 0%, #3b82f6 50%, #06b6d4 100%);
}

/* Soft Gradient Background */
.soft-gradient {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.05) 0%, rgba(59, 130, 246, 0.05) 50%, rgba(6, 182, 212, 0.03) 100%);
}

/* Card Hover Effect */
.card-hover {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(147, 51, 234, 0.15);
}

/* Fade In Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Fade In/Out for filtering */
.project-card {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.project-card.hidden {
    display: none;
}

/* Floating Animation */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

.float {
    animation: float 6s ease-in-out infinite;
}

/* Gradient Border */
.gradient-border {
    position: relative;
    background: white;
    border-radius: 24px;
}

.gradient-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 24px;
    padding: 2px;
    background: linear-gradient(135deg, #9333ea, #3b82f6, #06b6d4);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}

/* Number Badge */
.number-badge {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 900;
    background: linear-gradient(135deg, #9333ea 0%, #3b82f6 50%, #06b6d4 100%);
    color: white;
    margin-bottom: 1.5rem;
}

/* Scroll Reveal */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.scroll-reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.filter-btn {
    transition: all 0.3s ease;
    position: relative;
}

.filter-btn.active {
    background: linear-gradient(135deg, #9333ea 0%, #3b82f6 50%, #06b6d4 100%);
    color: white;
    transform: translateY(-2px);
}

.filter-btn:hover {
    transform: translateY(-2px);
}

/* Project Card */
.project-card {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 60px rgba(147, 51, 234, 0.2);
}

.project-image {
    transition: all 0.5s ease;
}

.project-card:hover .project-image {
    transform: scale(1.05);
}

.project-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 60%);
    opacity: 1;
    transition: opacity 0.5s ease;
}

.project-card:hover .project-overlay {
    opacity: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 50%);
}

/* Strong Gradients */
.gradient-purple {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
}

.gradient-blue {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}

.gradient-cyan {
    background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
}

.gradient-multi {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 50%, #ec4899 100%);
}

@keyframes pulse-glow {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

.pulse-glow {
    animation: pulse-glow 8s ease-in-out infinite;
}

/* Portfolio Image Hover */
.portfolio-item {
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
}

.portfolio-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.9), rgba(6, 182, 212, 0.9));
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
}

.portfolio-item:hover::before {
    opacity: 1;
}

.portfolio-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 2;
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}

/* Job Accordion */
.job-accordion {
    transition: all 0.3s ease;
}

.job-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.job-accordion.active .job-accordion-content {
    max-height: 1000px;
}

.job-accordion.active .arrow {
    transform: rotate(180deg);
}

.arrow {
    transition: transform 0.3s ease;
}

/* Timeline */
.timeline-item {
    position: relative;
    padding-left: 3rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 0.75rem;
    top: 3rem;
    bottom: -1.5rem;
    width: 2px;
    background: linear-gradient(to bottom, #9333ea, #3b82f6);
}

.timeline-item:last-child::before {
    display: none;
}

.timeline-dot {
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, #9333ea, #3b82f6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
}

/* Category Specific Gradients */
.category-wordpress {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.1) 0%, rgba(147, 51, 234, 0.05) 100%);
}

/* Blog Card Hover */
.blog-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(147, 51, 234, 0.12);
}

.blog-card:hover .blog-image {
    transform: scale(1.05);
}

.blog-card:hover .blog-title {
    background: linear-gradient(135deg, #9333ea 0%, #3b82f6 50%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Blog Image Container */
.blog-image-container {
    overflow: hidden;
    background: #f3f4f6;
}

.blog-image {
    transition: transform 0.5s ease;
}

/* Category Badge Hover */
.category-badge {
    transition: all 0.3s ease;
}

.category-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
}

/* Pagination */
.pagination-btn {
    transition: all 0.3s ease;
}

.pagination-btn:hover {
    background: linear-gradient(135deg, #9333ea 0%, #3b82f6 50%, #06b6d4 100%);
    color: white;
}

.pagination-btn.active {
    background: linear-gradient(135deg, #9333ea 0%, #3b82f6 50%, #06b6d4 100%);
    color: white;
}

/* Category Icon */
.category-icon {
    font-family: 'Dashicons' !important;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #9333ea 0%, #3b82f6 100%);
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 40px rgba(147, 51, 234, 0.3);
}

/* Breadcrumb */
.breadcrumb a {
    color: #6b7280;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb a:hover {
    color: #9333ea;
}

/* Form Input Focus */
.form-input:focus {
    outline: none;
    border-color: #9333ea;
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}

/* Radio/Checkbox Custom */
.custom-radio:checked+label {
    background: linear-gradient(135deg, #9333ea 0%, #3b82f6 50%, #06b6d4 100%);
    color: white;
    border-color: transparent;
}

/* Submit Button Hover */
.submit-btn {
    position: relative;
    overflow: hidden;
}

.submit-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.submit-btn:hover::before {
    width: 300px;
    height: 300px;
}

/* Success Message */
.success-message {
    display: none;
}

.success-message.show {
    display: block;
    animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Progress Steps */
.step-number {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, #9333ea, #3b82f6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
}

/* Smooth Transitions */
.smooth-transition {
    transition: all 0.3s ease;
}

/* Scroll Reveal */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.scroll-reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Category Card Hover */
.category-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(147, 51, 234, 0.2);
}

.category-card:hover .category-icon {
    transform: scale(1.1) rotate(5deg);
}

.category-icon {
    transition: all 0.4s ease;
}

/* Small Category Card */
.small-category-card {
    transition: all 0.3s ease;
}

.small-category-card:hover {
    border-color: #9333ea;
    box-shadow: 0 4px 12px rgba(147, 51, 234, 0.1);
}

/* Search Input Focus */
.search-input:focus {
    outline: none;
    border-color: #9333ea;
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}

/* Result Card Hover */
.result-card {
    transition: all 0.3s ease;
}

.result-card:hover {
    transform: translateX(8px);
    box-shadow: 0 8px 24px rgba(147, 51, 234, 0.1);
}

.result-card:hover .result-title {
    color: #9333ea;
}

/* Highlight Search Term */
.highlight {
    background: rgba(147, 51, 234, 0.1);
    color: #9333ea;
    font-weight: 600;
    padding: 0 2px;
    border-radius: 2px;
}


/* 404 Number Animation */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

.float {
    animation: float 4s ease-in-out infinite;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.bounce {
    animation: bounce 2s ease-in-out infinite;
}

/* Large 404 Text */
.error-404 {
    font-size: 12rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, #9333ea 0%, #3b82f6 50%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 10px 40px rgba(147, 51, 234, 0.3);
}

/* Card Hover */
.quick-link-card {
    transition: all 0.3s ease;
}

.quick-link-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(147, 51, 234, 0.15);
}

/* Search Input */
.search-input:focus {
    outline: none;
    border-color: #9333ea;
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}

/* Illustration Elements */
.illustration-circle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.1), rgba(59, 130, 246, 0.1));
}

@media (max-width: 768px) {
    .error-404 {
        font-size: 6rem;
    }

    .prose {
        max-width: 75ch;
        color: #374151;
        line-height: 1.8;
    }
}

.prose h2 {
    color: #111827;
    font-size: 1.875rem;
    font-weight: 800;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.prose h3 {
    color: #111827;
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.prose p {
    margin-bottom: 1.5rem;
}

.prose ul,
.prose ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.prose li {
    margin-bottom: 0.75rem;
}

.prose a {
    color: #9333ea;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.prose a:hover {
    color: #7c3aed;
}

.prose strong {
    color: #111827;
    font-weight: 600;
}

.prose code {
    background: #f3f4f6;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
    color: #9333ea;
}

/* Last Updated */
.last-updated {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: #f3f4f6;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 2rem;
}

/* Table of Contents */
.toc {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 3rem;
}

.toc a {
    color: #6b7280;
    text-decoration: none;
    transition: color 0.2s ease;
}

.toc a:hover {
    color: #9333ea;
}

/* Article Content Styling */
.article-content {
    max-width: 70ch;
    color: #374151;
    line-height: 1.8;
    font-size: 1.125rem;
}

.article-content h2 {
    color: #111827;
    font-size: 2rem;
    font-weight: 800;
    margin-top: 3rem;
    margin-bottom: 1.25rem;
    line-height: 1.3;
    scroll-margin-top: 100px;
}

.article-content h3 {
    color: #111827;
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.4;
    scroll-margin-top: 100px;
}

.article-content h4 {
    color: #111827;
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    line-height: 1.5;
    scroll-margin-top: 100px;
}

.article-content p {
    margin-bottom: 1.75rem;
}

.article-content ul,
.article-content ol {
    margin-bottom: 1.75rem;
    padding-left: 1.75rem;
}

.article-content li {
    margin-bottom: 0.75rem;
}

.article-content a {
    color: #9333ea;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.article-content a:hover {
    color: #7c3aed;
}

.article-content strong {
    color: #111827;
    font-weight: 600;
}

.article-content code {
    background: #f3f4f6;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.95em;
    color: #9333ea;
    font-family: 'Courier New', monospace;
}

.article-content pre {
    background: #1f2937;
    color: #e5e7eb;
    padding: 1.5rem;
    border-radius: 0.75rem;
    overflow-x: auto;
    margin-bottom: 1.75rem;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
}

.article-content pre code {
    background: transparent;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

.article-content blockquote {
    border-left: 4px solid #9333ea;
    padding-left: 1.5rem;
    margin: 2rem 0;
    color: #4b5563;
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.7;
}

.article-content img {
    border-radius: 0.75rem;
    margin: 2rem 0;
}

/* Table of Contents */
.toc {
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.toc a {
    color: #6b7280;
    text-decoration: none;
    transition: all 0.2s ease;
    display: block;
    padding: 0.5rem 0;
    border-left: 2px solid transparent;
    padding-left: 1rem;
    margin-left: -1rem;
}

.toc a:hover {
    color: #9333ea;
    border-left-color: #9333ea;
}

.toc a.active {
    color: #9333ea;
    font-weight: 600;
    border-left-color: #9333ea;
}

/* Related Post Card Hover */
.related-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(147, 51, 234, 0.12);
}

.related-card:hover .related-image {
    transform: scale(1.05);
}

.related-image {
    transition: transform 0.5s ease;
}

/* Category Badge */
.category-badge {
    transition: all 0.3s ease;
}

.category-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
}

/* Scroll Progress Bar */
.progress-bar {
    position: fixed;
    top: 80px;
    left: 0;
    height: 4px;
    background: linear-gradient(135deg, #9333ea 0%, #3b82f6 50%, #06b6d4 100%);
    width: 0%;
    z-index: 50;
    transition: width 0.1s ease;
}

/* Share Button */
.share-btn {
    transition: all 0.3s ease;
}

.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
}


.lwptoc {
    margin: 0 0 !important;
}

.lwptoc_i {
    padding: 0 !important;
}

.team-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.team-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(147, 51, 234, 0.2);
}


@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-item {
    animation: countUp 0.8s ease-out forwards;
}

/* Quote Mark */
.quote-mark {
    font-size: 6rem;
    line-height: 1;
    color: rgba(147, 51, 234, 0.1);
    font-family: Georgia, serif;
    position: absolute;
    top: -20px;
    left: 0;
}

/* Timeline Dot */
.timeline-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #9333ea, #3b82f6);
    position: absolute;
    left: -30px;
    top: 8px;
    box-shadow: 0 0 0 4px rgba(147, 51, 234, 0.2);
}

.section-number {
    font-size: 8rem;
    font-weight: 900;
    line-height: 1;
    color: rgba(147, 51, 234, 0.05);
    position: absolute;
    top: -40px;
    left: 0;
}

/* FAQ Accordion */
.faq-item {
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 4px 12px rgba(147, 51, 234, 0.1);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-item.active .faq-answer {
    max-height: 1000px;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
    color: #9333ea;
}

.faq-icon {
    transition: all 0.3s ease;
    color: #6b7280;
}

/* Category Filter */
.category-btn {
    transition: all 0.3s ease;
}

.category-btn:hover {
    transform: translateY(-2px);
}

.category-btn.active {
    background: linear-gradient(135deg, #9333ea 0%, #3b82f6 50%, #06b6d4 100%);
    color: white;
}

/* Search Box */
.search-box:focus {
    outline: none;
    border-color: #9333ea;
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}