/**
 * Alyssa Stratton Theme - Additional Styles
 *
 * @package Alyssa_Stratton
 * @since 1.0.0
 */

/* ==========================================================================
   Glassmorphism Effect
   ========================================================================== */

.glassmorphism {
    background: hsla(var(--background), 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid hsl(var(--border));
}

/* ==========================================================================
   Focus States
   ========================================================================== */

.btn:focus,
.nav-link:focus,
.scroll-link:focus,
.tab-btn:focus,
.social-link:focus {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 2px;
}

/* ==========================================================================
   Selection
   ========================================================================== */

::selection {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

/* ==========================================================================
   Additional Hero Styles
   ========================================================================== */

@media (max-width: 640px) {
    .hero-decoration {
        display: none;
    }
}

/* ==========================================================================
   Card Hover States
   ========================================================================== */

.sticker-card,
.comic-card {
    will-change: transform, box-shadow;
}

/* ==========================================================================
   Button Icon Spacing
   ========================================================================== */

.btn svg {
    flex-shrink: 0;
}

/* ==========================================================================
   Project Card Improvements
   ========================================================================== */

.project-card {
    cursor: pointer;
}

.project-card:focus {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 4px;
}

/* ==========================================================================
   Modal Scrollbar
   ========================================================================== */

.modal-content {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--primary)) hsl(var(--muted));
}

.modal-content::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-track {
    background: hsl(var(--muted));
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb {
    background: hsl(var(--primary));
    border-radius: 4px;
}

/* ==========================================================================
   Footer Link Underlines
   ========================================================================== */

.footer-credits a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .site-navigation,
    .hero-decoration,
    .modal-overlay {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .btn {
        border-color: black;
        box-shadow: none;
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Keep bounce-hover visible for accessibility feedback (subtle movement) */
    .bounce-hover:hover {
        animation: bounce-btn-reduced 0.4s ease-in-out !important;
    }

    @keyframes bounce-btn-reduced {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-2px); }
    }

    html {
        scroll-behavior: auto;
    }
}

/* ==========================================================================
   High Contrast Mode
   ========================================================================== */

@media (prefers-contrast: high) {
    .btn {
        border-width: 6px;
    }

    .comic-card,
    .sticker-card {
        border-width: 6px;
    }
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .btn {
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }

    .hero-title {
        font-size: 1.75rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .about-card {
        padding: 1.5rem;
    }

    .about-photo img {
        width: 8rem;
        height: 8rem;
    }

    .tabs-list {
        gap: 0.25rem;
    }

    .tab-btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    .tab-btn svg {
        display: none;
    }

    .substack-content {
        padding: 1.5rem;
    }

    .footer-title {
        font-size: 1.5rem;
    }
}

/* ==========================================================================
   Navigation Transition Fixes
   ========================================================================== */

.site-navigation.scrolled {
    box-shadow: 0 2px 10px hsla(var(--foreground), 0.1);
}

/* ==========================================================================
   Loading State
   ========================================================================== */

.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* ==========================================================================
   Badge Variations
   ========================================================================== */

.badge-primary {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.badge-secondary {
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
}

/* ==========================================================================
   Fix for iOS Safari
   ========================================================================== */

@supports (-webkit-touch-callout: none) {
    .hero-section {
        min-height: -webkit-fill-available;
    }
}

/* ==========================================================================
   Dark mode - if needed in future
   ========================================================================== */

/*
body.dark-mode {
    --background: 0 0% 12%;
    --foreground: 12 100% 88%;
    --card: 213 30% 18%;
    --card-foreground: 12 100% 88%;
    --muted: 0 0% 20%;
    --muted-foreground: 0 0% 65%;
    --border: 12 60% 75%;
}
*/