/**
 * ToDo Or Else - Additional Styles
 * Mobile menu, animations, and enhancements
 *
 * @package ToDo_Or_Else
 * @since 1.0.0
 */

/* ================================
   MOBILE MENU
   ================================ */
@media (max-width: 768px) {
    .td-nav {
        position: fixed;
        top: 4.5rem;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--td-bg-primary);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .td-nav--open {
        display: flex;
        opacity: 1;
        visibility: visible;
    }
    
    .td-nav__link {
        font-size: 1.5rem;
    }
    
    .td-menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .td-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    
    .td-menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }
    
    body.td-menu-open {
        overflow: hidden;
    }
}

/* ================================
   HEADER SCROLL STATE
   ================================ */
.td-header--scrolled {
    box-shadow: var(--td-shadow-sm);
}

/* ================================
   CARD ANIMATIONS
   ================================ */
.td-card,
.td-category-card {
    opacity: 0;
    transform: translateY(20px);
}

.td-card.td-animate,
.td-category-card.td-animate {
    animation: fadeInUp 0.5s ease forwards;
}

.td-grid .td-card:nth-child(1).td-animate,
.td-grid .td-category-card:nth-child(1).td-animate { animation-delay: 0.05s; }
.td-grid .td-card:nth-child(2).td-animate,
.td-grid .td-category-card:nth-child(2).td-animate { animation-delay: 0.1s; }
.td-grid .td-card:nth-child(3).td-animate,
.td-grid .td-category-card:nth-child(3).td-animate { animation-delay: 0.15s; }
.td-grid .td-card:nth-child(4).td-animate,
.td-grid .td-category-card:nth-child(4).td-animate { animation-delay: 0.2s; }
.td-grid .td-card:nth-child(5).td-animate { animation-delay: 0.25s; }
.td-grid .td-card:nth-child(6).td-animate { animation-delay: 0.3s; }

/* ================================
   LINK HOVER EFFECTS
   ================================ */
.td-card__title a {
    background-image: linear-gradient(var(--td-secondary), var(--td-secondary));
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size 0.3s ease;
}

.td-card__title a:hover {
    background-size: 100% 1px;
}

/* ================================
   BUTTON HOVER EFFECTS
   ================================ */
.td-btn {
    position: relative;
    overflow: hidden;
}

.td-btn--primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.td-btn--primary:hover::before {
    left: 100%;
}

/* ================================
   CATEGORY CARD ENHANCEMENTS
   ================================ */
.td-category-card {
    position: relative;
    overflow: hidden;
}

.td-category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--td-secondary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.td-category-card:hover::before {
    transform: scaleX(1);
}

/* ================================
   IMAGE HOVER EFFECTS
   ================================ */
.td-card__image {
    transition: transform 0.4s ease;
}

.td-card:hover .td-card__image {
    transform: scale(1.03);
}

/* ================================
   FORM ENHANCEMENTS
   ================================ */
.td-newsletter__input:focus {
    box-shadow: 0 0 0 3px rgba(196, 93, 44, 0.1);
}

/* ================================
   SCROLLBAR STYLING
   ================================ */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--td-bg-tertiary);
}

::-webkit-scrollbar-thumb {
    background: var(--td-border);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--td-text-light);
}

/* ================================
   SELECTION STYLING
   ================================ */
::selection {
    background: var(--td-secondary);
    color: #fff;
}

/* ================================
   FOCUS STATES (Accessibility)
   ================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--td-secondary);
    outline-offset: 2px;
}

/* ================================
   PRINT STYLES
   ================================ */
@media print {
    .td-header,
    .td-footer,
    .td-newsletter,
    .td-menu-toggle {
        display: none !important;
    }
    
    .td-article {
        padding-top: 0;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
}