/**
 * PCK Theme - Custom Styles
 *
 * Additional styles for PCK Theme
 *
 * @package PCK_Theme
 * @since 1.0.0
 */

/* =====================================================
   Animations
   ===================================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* =====================================================
   Entry Animation
   ===================================================== */
.wp-block-post {
    animation: fadeInUp 0.5s ease-out both;
}

.wp-block-post:nth-child(1) { animation-delay: 0s; }
.wp-block-post:nth-child(2) { animation-delay: 0.1s; }
.wp-block-post:nth-child(3) { animation-delay: 0.2s; }
.wp-block-post:nth-child(4) { animation-delay: 0.3s; }
.wp-block-post:nth-child(5) { animation-delay: 0.4s; }
.wp-block-post:nth-child(6) { animation-delay: 0.5s; }

/* =====================================================
   WooCommerce Product Animations
   ===================================================== */
.wc-block-grid__product {
    animation: fadeInUp 0.4s ease-out both;
}

.wc-block-grid__product:nth-child(1) { animation-delay: 0s; }
.wc-block-grid__product:nth-child(2) { animation-delay: 0.05s; }
.wc-block-grid__product:nth-child(3) { animation-delay: 0.1s; }
.wc-block-grid__product:nth-child(4) { animation-delay: 0.15s; }

/* =====================================================
   Header Enhancements
   ===================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95) !important;
}

.admin-bar .site-header {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

/* =====================================================
   Navigation Enhancements
   ===================================================== */
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
    width: 24px;
    height: 24px;
}

.wp-block-navigation__responsive-container.is-menu-open {
    animation: fadeIn 0.2s ease-out;
}

/* Active navigation link */
.wp-block-navigation-item.current-menu-item > a {
    color: var(--pck-primary);
}

/* =====================================================
   Card Hover Effects
   ===================================================== */
.is-style-pck-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.is-style-pck-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* =====================================================
   Image Enhancements
   ===================================================== */
.is-style-pck-shadow img {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
}

/* Featured image hover */
.wp-block-post-featured-image a {
    display: block;
    overflow: hidden;
    border-radius: 8px;
}

.wp-block-post-featured-image img {
    transition: transform 0.3s ease;
}

.wp-block-post-featured-image a:hover img {
    transform: scale(1.05);
}

/* =====================================================
   Button Gradient Style
   ===================================================== */
.is-style-pck-gradient .wp-block-button__link {
    background: linear-gradient(135deg, #0073aa 0%, #00a0d2 100%);
    border: none;
    position: relative;
    overflow: hidden;
}

.is-style-pck-gradient .wp-block-button__link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #005177 0%, #0073aa 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.is-style-pck-gradient .wp-block-button__link:hover::before {
    opacity: 1;
}

.is-style-pck-gradient .wp-block-button__link span {
    position: relative;
    z-index: 1;
}

/* =====================================================
   WooCommerce Mini Cart
   ===================================================== */
.wc-block-mini-cart__button {
    padding: 8px 12px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.wc-block-mini-cart__button:hover {
    background-color: var(--pck-bg-alt, #f3f4f6);
}

.wc-block-mini-cart__badge {
    background-color: var(--pck-primary, #0073aa);
    color: #fff;
}

/* =====================================================
   WooCommerce Notice Styling
   ===================================================== */
.woocommerce-message,
.woocommerce-info {
    background-color: var(--pck-info-light, #e0f2fe);
    border-color: var(--pck-info, #0284c7);
    border-radius: 8px;
}

.woocommerce-error {
    background-color: var(--pck-error-light, #fee2e2);
    border-color: var(--pck-error, #dc2626);
    border-radius: 8px;
}

/* =====================================================
   Search Block Enhancements
   ===================================================== */
.wp-block-search__inside-wrapper {
    border: 1px solid var(--pck-border, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-search__inside-wrapper:focus-within {
    border-color: var(--pck-primary, #0073aa);
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.15);
}

.wp-block-search__input {
    border: none !important;
    box-shadow: none !important;
}

.wp-block-search__button {
    background-color: var(--pck-primary, #0073aa) !important;
    border: none !important;
    margin: 4px;
    border-radius: 6px !important;
}

.wp-block-search__button:hover {
    background-color: var(--pck-primary-hover, #005177) !important;
}

/* =====================================================
   Separator Styles
   ===================================================== */
.wp-block-separator:not(.is-style-dots) {
    border-top: none;
    border-bottom-style: solid;
}

/* =====================================================
   Quote Block Enhancements
   ===================================================== */
.wp-block-quote {
    font-style: italic;
    position: relative;
}

.wp-block-quote::before {
    content: '"';
    font-size: 4rem;
    line-height: 1;
    color: var(--pck-primary, #0073aa);
    opacity: 0.2;
    position: absolute;
    left: -10px;
    top: -20px;
}

/* =====================================================
   Table Styles
   ===================================================== */
.wp-block-table table {
    border-collapse: collapse;
    width: 100%;
}

.wp-block-table th,
.wp-block-table td {
    padding: 12px 16px;
    border: 1px solid var(--pck-border, #e5e7eb);
}

.wp-block-table th {
    background-color: var(--pck-bg-alt, #f9fafb);
    font-weight: 600;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: var(--pck-bg-alt, #f9fafb);
}

/* =====================================================
   Footer Link Styles
   ===================================================== */
.site-footer a {
    transition: opacity 0.2s ease;
}

.site-footer a:hover {
    opacity: 0.8;
}

/* =====================================================
   Loading States
   ===================================================== */
.is-loading {
    animation: pulse 1.5s infinite;
}

/* =====================================================
   Scroll to Top (Optional - Add via JS)
   ===================================================== */
.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: var(--pck-primary, #0073aa);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-to-top:hover {
    background: var(--pck-primary-hover, #005177);
    transform: translateY(-2px);
}

/* =====================================================
   Responsive Adjustments
   ===================================================== */
@media (max-width: 600px) {
    .wp-block-columns {
        flex-wrap: wrap !important;
    }
    
    .wp-block-column {
        flex-basis: 100% !important;
    }
    
    .site-header .wp-block-search {
        display: none;
    }
}

/* =====================================================
   Print Optimizations
   ===================================================== */
@media print {
    .site-header,
    .site-footer,
    .wp-block-navigation,
    .wc-block-mini-cart,
    .scroll-to-top {
        display: none !important;
    }
    
    .wp-block-post-content {
        max-width: 100% !important;
    }
    
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}