/*
Theme Name: Twenty Twenty-Five Studio
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Template: twentytwentyfive
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five Studio is a child theme of Twenty Twenty-Five that 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.8
Requires PHP: 7.2
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive-studio
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 parent theme styles
 */
@import url("../twentytwentyfive/style.css");

/*
 * Add your custom styles below
 */

/* Global text opacity - only for actual text content */
p, h1, h2, h3, h4, h5, h6, a, li, td, th, label, input, textarea, select, button {
    opacity: 0.75 !important;
}

/* Custom styles for Twenty Twenty-Five Studio */

/* Projects Slideshow Styles */
.projects-slideshow-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wp--preset--color--base);
}

.projects-slideshow-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.projects-slideshow {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    background: var(--wp--preset--color--contrast);
}

.slides-container {
    position: relative;
    width: 100%;
    height: 600px;
}

.project-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-slide.active {
    opacity: 1;
    transform: translateX(0);
}

.project-slide.prev {
    transform: translateX(-100%);
}

.slide-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-cover {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--wp--preset--color--accent-1), var(--wp--preset--color--accent-2));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.project-inner {
    width: 100%;
    max-width: 800px;
    padding: 2rem;
    text-align: center;
    color: var(--wp--preset--color--base);
    z-index: 2;
    position: relative;
}

.project-title-container {
    margin-bottom: 2rem;
    transform: translateY(0);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-slide.transitioning .project-title-container {
    transform: translateY(-20px);
    opacity: 0;
}

.project-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    color: inherit;
}

.project-image-container {
    margin-bottom: 2rem;
    transform: translateX(0);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}

.project-slide.transitioning .project-image-container {
    transform: translateX(50px);
    opacity: 0;
}

.project-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

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

.project-image-placeholder {
    width: 100%;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.project-excerpt-container {
    transform: translateY(0);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

.project-slide.transitioning .project-excerpt-container {
    transform: translateY(20px);
    opacity: 0;
}

.project-excerpt {
    font-size: 1.1rem;
    line-height: 1.6;
    color: inherit;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

/* Pagination Styles */
.projects-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1rem;
}

.pagination-btn {
    background: var(--wp--preset--color--contrast);
    border: 2px solid var(--wp--preset--color--accent-3);
    color: var(--wp--preset--color--accent-3);
    padding: 0.75rem;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
}

.pagination-btn:hover:not(:disabled) {
    background: var(--wp--preset--color--accent-3);
    color: var(--wp--preset--color--contrast);
    transform: scale(1.1);
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Block editor button styles */
.projects-pagination .wp-block-button .wp-block-button__link {
    background: var(--wp--preset--color--contrast);
    border: 2px solid var(--wp--preset--color--accent-3);
    color: var(--wp--preset--color--accent-3);
    padding: 0.75rem;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    text-decoration: none;
}

.projects-pagination .wp-block-button .wp-block-button__link:hover:not(:disabled) {
    background: var(--wp--preset--color--accent-3);
    color: var(--wp--preset--color--contrast);
    transform: scale(1.1);
}

.projects-pagination .wp-block-button .wp-block-button__link:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.pagination-numbers {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.pagination-number {
    background: var(--wp--preset--color--contrast);
    border: 2px solid var(--wp--preset--color--accent-3);
    color: var(--wp--preset--color--accent-3);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    min-width: 40px;
    text-align: center;
}

.pagination-number:hover {
    background: var(--wp--preset--color--accent-3);
    color: var(--wp--preset--color--contrast);
    transform: scale(1.05);
}

.pagination-number.active {
    background: var(--wp--preset--color--accent-3);
    color: var(--wp--preset--color--contrast);
    font-weight: 700;
}

/* Responsive Design */
@media (max-width: 768px) {
    .slides-container {
        height: 500px;
    }
    
    .project-title {
        font-size: 2rem;
    }
    
    .project-inner {
        padding: 1.5rem;
    }
    
    .projects-pagination {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .pagination-numbers {
        order: 3;
        width: 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }
}

@media (max-width: 480px) {
    .slides-container {
        height: 400px;
    }
    
    .project-title {
        font-size: 1.5rem;
    }
    
    .project-excerpt {
        font-size: 1rem;
    }
    
    .project-inner {
        padding: 1rem;
    }
}

/* Smooth transitions for all interactive elements */
* {
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* Focus styles for accessibility */
.pagination-btn:focus,
.pagination-number:focus,
.projects-pagination .wp-block-button .wp-block-button__link:focus {
    outline: 2px solid var(--wp--preset--color--accent-4);
    outline-offset: 2px;
}

/* Loading state */
.projects-slideshow.loading {
    pointer-events: none;
}

.projects-slideshow.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Slide Animation Classes */

/* 1. Top to Bottom Fade Animation */
.top-to-bottom {
    opacity: 0;
    transform: translateY(-30px);
    animation: fadeInTop 2.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.top-to-bottom.animate {
    opacity: 1;
    transform: translateY(0);
}

@keyframes fadeInTop {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 2. Left to Right Fade Animation */
.slide-left-to-right {
    opacity: 0;
    transform: translateX(-90px);
    animation: fadeInLeftToRight 2.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.slide-left-to-right.animate {
    opacity: 1;
    transform: translateX(0);
}

@keyframes fadeInLeftToRight {
    0% {
        opacity: 0;
        transform: translateX(-90px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 2.5. Right to Left Fade Animation */
.slide-right-to-left {
    opacity: 0;
    transform: translateX(90px);
    animation: fadeInRightToLeft 2.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.slide-right-to-left.animate {
    opacity: 1;
    transform: translateX(0);
}

@keyframes fadeInRightToLeft {
    0% {
        opacity: 0;
        transform: translateX(90px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 3. Bottom to Top Fade Animation */
.bottom-to-top {
    opacity: 0;
    transform: translateY(30px);
    transition: all 2.5s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInBottom 2.5s ease-in-out;
}

.bottom-to-top.animate {
    opacity: 1;
    transform: translateY(0);
}

@keyframes fadeInBottom {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Optional: Add stagger delay for multiple elements */
.top-to-bottom:nth-child(2) { transition-delay: 0.1s; }
.top-to-bottom:nth-child(3) { transition-delay: 0.2s; }
.top-to-bottom:nth-child(4) { transition-delay: 0.3s; }

.slide-left-to-right:nth-child(2) { transition-delay: 0.1s; }
.slide-left-to-right:nth-child(3) { transition-delay: 0.2s; }
.slide-left-to-right:nth-child(4) { transition-delay: 0.3s; }

.bottom-to-top:nth-child(2) { transition-delay: 0.1s; }
.bottom-to-top:nth-child(3) { transition-delay: 0.2s; }
.bottom-to-top:nth-child(4) { transition-delay: 0.3s; }

/* Custom Pagination Block Styles */
/* 1. Add spacing between page numbers */
.browser-pagination-numbers .page-numbers {
    margin: 0 !important;
}

/* 2. Add square border around previous and next buttons */
.browser-pagination-previous,
.browser-pagination-next {
    border: 3px solid currentColor !important;
    border-radius: 0 !important;
    padding: 8px 16px !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    opacity: 0.8 !important;
}

.browser-pagination-previous:hover,
.browser-pagination-next:hover {
    background-color: currentColor !important;
    color: var(--wp--preset--color--base) !important;
    background-color: rgba(255, 255, 255, 0.7) !important;
}

/* 3. Ensure previous and next buttons are always visible */
.wp-block-query-pagination .browser-pagination-previous,
.wp-block-query-pagination .browser-pagination-next {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 0.8 !important;
}

/* Hide default WordPress pagination when using custom classes */
.wp-block-query-pagination .browser-pagination-previous:not([href]),
.wp-block-query-pagination .browser-pagination-next:not([href]) {
    opacity: 0.5 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/* Additional styles for better integration with WordPress blocks */
.wp-block-query-pagination .browser-pagination-numbers {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

.wp-block-query-pagination .browser-pagination-numbers .page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    height: 32px !important;
    text-decoration: none !important;
    border: 1px solid currentColor !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    opacity: 0.8 !important;
}

.wp-block-query-pagination .browser-pagination-numbers .page-numbers:hover {
    background-color: currentColor !important;
    color: var(--wp--preset--color--base) !important;
    background-color: rgba(255, 255, 255, 0.7) !important;
}

.wp-block-query-pagination .browser-pagination-numbers .page-numbers.current {
    background-color: currentColor !important;
    color: var(--wp--preset--color--base) !important;
    font-weight: bold !important;
    background-color: rgba(255, 255, 255, 0.7) !important;
}

/* Block editor specific styles */
.editor-styles-wrapper .browser-pagination-numbers .page-numbers {
    margin: 0 !important;
}

.editor-styles-wrapper .browser-pagination-previous,
.editor-styles-wrapper .browser-pagination-next {
    border: 3px solid currentColor !important;
    border-radius: 0 !important;
    padding: 8px 16px !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

/* Ensure proper spacing in the pagination container */
.wp-block-query-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
}

/* Custom Navigation Styles - Text opacity effects */
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus,
.wp-block-navigation .wp-block-navigation-item__content:active {
    opacity: 0.7 !important;
    text-decoration: none !important;
}

/* Active/current page navigation link */
.wp-block-navigation .wp-block-navigation-item__content.current-menu-item,
.wp-block-navigation .wp-block-navigation-item__content.current_page_item {
    opacity: 0.7 !important;
    font-weight: bold !important;
}

/* Ensure navigation links don't have underlines or focus borders */
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__content:visited,
.wp-block-navigation .wp-block-navigation-item__content:active,
.wp-block-navigation .wp-block-navigation-item__content:focus {
    text-decoration: none !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Add smooth transitions for navigation hover effects */
.wp-block-navigation .wp-block-navigation-item__content {
    transition: background-color 0.3s ease !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
}

/* Block editor specific navigation styles */
.editor-styles-wrapper .wp-block-navigation .wp-block-navigation-item__content:hover,
.editor-styles-wrapper .wp-block-navigation .wp-block-navigation-item__content:focus {
    opacity: 0.90!important;
}