/*
Theme Name: Thumbnail Downloader
Theme URI: https://thumbnaildownloader.com/
Author: Thumbnail Downloader
Author URI: https://thumbnaildownloader.com/
Description: Free YouTube Thumbnail Downloader theme – Instant HD Max Resolution (1280×720) download tool. Includes Home tool, About, Privacy Policy, Terms, Disclaimer and Contact pages. Dark glassmorphism design, mobile-friendly and SEO ready.
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thumbnail-downloader
Tags: custom-menu, featured-images, one-column, two-columns, custom-colors, theme-options, translation-ready
*/

/* ============================================================
   Thumbnail Downloader Theme Styles
   ============================================================ */

:root {
    --color-primary: #f43f5e;
    --color-primary-dark: #e11d48;
    --color-primary-darker: #be123c;
    --color-primary-deep: #9f1239;
    --color-pink: #ec4899;
    --color-purple: #a855f7;
    --color-violet: #8b5cf6;
    --color-indigo: #6366f1;
    --color-blue: #3b82f6;
    --color-red: #ef4444;
    --bg-body: #030308;
    --bg-gradient-start: #050510;
    --bg-gradient-mid: #0a0618;
    --bg-gradient-end: #0f0a1f;
    --bg-card: linear-gradient(145deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.03) 100%);
    --bg-thumb-card: linear-gradient(165deg, #1a1025 0%, #0d0815 100%);
    --bg-input: rgba(0,0,0,0.45);
    --text-primary: #ffffff;
    --text-secondary: rgba(255,255,255,0.70);
    --text-muted: rgba(255,255,255,0.45);
    --text-faint: rgba(255,255,255,0.35);
    --border-subtle: rgba(255,255,255,0.08);
    --border-light: rgba(255,255,255,0.12);
    --border-accent: rgba(244, 63, 94, 0.5);
    --shadow-card: 0 20px 40px -10px rgba(0,0,0,0.5);
    --shadow-btn: 0 8px 0 var(--color-primary-deep), 0 12px 25px rgba(190, 18, 60, 0.5), inset 0 1px 0 rgba(255,255,255,0.3);
    --glow-primary: 0 0 30px rgba(239, 68, 68, 0.6), 0 0 60px rgba(236, 72, 153, 0.4), 0 0 100px rgba(168, 85, 247, 0.25);
    --glow-card-hover: 0 0 40px rgba(239, 68, 68, 0.35), 0 0 80px rgba(236, 72, 153, 0.2), 0 25px 50px -12px rgba(0,0,0,0.6);
    --font-family: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --radius-sm: 0.75rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-smooth: 0.4s var(--ease-bounce);
    --blur-glass: 20px;
    --blur-glass-mobile: 12px;
}

* { box-sizing: border-box; }

body {
    font-family: var(--font-family);
    background: var(--bg-body);
    color: var(--text-primary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
}

.bg-animated {
    background: 
        radial-gradient(circle at 20% 30%, rgba(239, 68, 68, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.22) 0%, transparent 40%),
        radial-gradient(circle at 40% 80%, rgba(236, 72, 153, 0.18) 0%, transparent 45%),
        radial-gradient(circle at 70% 70%, rgba(59, 130, 246, 0.15) 0%, transparent 40%),
        linear-gradient(180deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 50%, var(--bg-gradient-end) 100%);
    background-size: 200% 200%;
    animation: bgMove 18s ease infinite alternate;
    will-change: background-position;
}
@keyframes bgMove {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    animation: float 10s ease-in-out infinite;
    pointer-events: none;
    will-change: transform;
}
@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -40px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
}

.glass-card {
    background: var(--bg-card);
    backdrop-filter: blur(var(--blur-glass));
    -webkit-backdrop-filter: blur(var(--blur-glass));
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-card);
    transition: all var(--transition-smooth);
    position: relative;
    overflow: hidden;
    contain: layout style;
}
.glass-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--border-accent);
    box-shadow: var(--glow-card-hover);
}

.glow-on-hover { transition: all 0.35s ease; }
.glow-on-hover:hover {
    box-shadow: var(--glow-primary);
    border-color: var(--color-primary) !important;
}

.btn-3d {
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 50%, var(--color-primary-darker) 100%);
    box-shadow: var(--shadow-btn);
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    min-height: 52px;
    touch-action: manipulation;
    color: #fff;
    font-weight: 700;
    border: none;
    cursor: pointer;
}
.btn-3d::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transition: 0.5s;
}
.btn-3d:hover::after { left: 100%; }
.btn-3d:hover {
    transform: translateY(3px);
    box-shadow: 0 5px 0 var(--color-primary-deep), 0 8px 20px rgba(190, 18, 60, 0.5), inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn-3d:active {
    transform: translateY(7px);
    box-shadow: 0 1px 0 var(--color-primary-deep), 0 3px 10px rgba(190, 18, 60, 0.4);
}

.input-glow {
    background: var(--bg-input);
    border: 2px solid rgba(255,255,255,0.1);
    box-shadow: inset 0 4px 15px rgba(0,0,0,0.5);
    transition: all var(--transition-normal);
    min-height: 56px;
    font-size: 16px;
    touch-action: manipulation;
    color: var(--text-primary);
    outline: none;
}
.input-glow::placeholder { color: rgba(255,255,255,0.3); }
.input-glow:focus {
    border-color: var(--color-primary);
    box-shadow: inset 0 4px 15px rgba(0,0,0,0.5), 0 0 0 4px rgba(244, 63, 94, 0.25), 0 0 30px rgba(244, 63, 94, 0.3);
}

.thumb-card {
    background: var(--bg-thumb-card);
    border: 1px solid var(--border-subtle);
    transition: all var(--transition-smooth);
    contain: layout style;
}
.thumb-card:hover {
    transform: translateY(-12px) scale(1.03);
    border-color: rgba(244, 63, 94, 0.6);
    box-shadow: 0 0 40px rgba(239, 68, 68, 0.45), 0 0 80px rgba(236, 72, 153, 0.25), 0 30px 50px -15px rgba(0,0,0,0.7);
}
.thumb-preview { min-height: 220px; }
@media (min-width: 640px) { .thumb-preview { min-height: 260px; } }
@media (min-width: 1024px) { .thumb-preview { min-height: 280px; } }

.nav-link {
    position: relative;
    transition: color var(--transition-normal);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 0;
    width: 0; height: 2px;
    background: linear-gradient(to right, var(--color-primary), var(--color-pink));
    transition: width var(--transition-normal);
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-link:hover, .nav-link.active { color: var(--color-primary); }

.mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.mobile-menu.open { max-height: 480px; }

.running-color {
    background: linear-gradient(
        90deg,
        var(--color-red) 0%,
        var(--color-primary) 12%,
        var(--color-pink) 25%,
        #d946ef 37%,
        var(--color-purple) 50%,
        var(--color-violet) 62%,
        var(--color-indigo) 75%,
        var(--color-blue) 87%,
        var(--color-red) 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: runningColor 4.5s linear infinite;
}
@keyframes runningColor {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

.pulse-dot { animation: pulse 2s infinite; }
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.4); }
}

@media (max-width: 768px) {
    .orb {
        display: none !important; /* hide heavy blurred orbs for mobile performance */
    }
    .bg-animated {
        animation: none;
        background-size: 100% 100%;
        will-change: auto;
        background: linear-gradient(180deg, #050510 0%, #0a0618 50%, #0f0a1f 100%); /* static simpler bg */
    }
    .glass-card:hover, .thumb-card:hover { transform: none; }
    .btn-3d {
        padding-top: 1.1rem;
        padding-bottom: 1.1rem;
        min-height: 56px;
    }
    body { -webkit-tap-highlight-color: transparent; }
    .input-glow { font-size: 16px; min-height: 56px; }
    .thumb-preview { min-height: 200px; }
    .mobile-menu a {
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    .glass-card {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    /* lighter header blur on mobile */
    header {
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        background: rgba(0,0,0,0.7) !important;
    }
    .running-color {
        animation: none; /* stop continuous color animation on mobile */
        background-position: 50% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bg-animated, .orb, .running-color, .pulse-dot { animation: none !important; }
    .glass-card, .thumb-card, .btn-3d, .glow-on-hover { transition: none !important; }
}

@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* WordPress specific */
.wp-block-image img { max-width: 100%; height: auto; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.screen-reader-text {
    border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
    height: 1px; margin: -1px; overflow: hidden; padding: 0;
    position: absolute; width: 1px; word-wrap: normal !important;
}