/*
╔══════════════════════════════════════════════════════════════════════════════╗
║                     CWZERO COMPONENTS CSS                                  ║
║                                                                              ║
║  Additional styles for the component system.                                 ║
║  This file supplements cwzero.css - import AFTER it.                      ║
╚══════════════════════════════════════════════════════════════════════════════╝
*/


/* 
═══════════════════════════════════════════════════════════════════════════════
ENHANCED CYBER BACKGROUND EFFECTS
- Scanning line (green line sweeping across)
- Floating orb (glowing circle moving around)
- Enhanced grid pulse
═══════════════════════════════════════════════════════════════════════════════
*/

/* Water Drop Ripple Effect - Managed by JavaScript for random positioning */
.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    border: 0.5px solid var(--accent-primary);
    box-shadow: 0 0 4px rgba(110,139,255, 0.3);
    background: transparent;
    transform: scale(0);
    opacity: 0;
    animation: rippleExpand 4.5s ease-out forwards;
}

.ripple-inner {
    animation-delay: 0.5s;
}

.ripple-outer {
    animation-delay: 1s;
}

@keyframes rippleExpand {
    0% {
        transform: scale(0);
        opacity: 0.5;
    }
    20% {
        opacity: 0.35;
    }
    60% {
        opacity: 0.15;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

/* Floating Orb - Glowing circle that moves around */
.floating-orb {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        rgba(110,139,255, 0.15) 0%,
        rgba(110,139,255, 0.05) 40%,
        transparent 70%);
    filter: blur(40px);
    animation: floatOrb 20s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes floatOrb {
    0%, 100% {
        top: 10%;
        left: 10%;
        transform: scale(1);
    }
    25% {
        top: 60%;
        left: 70%;
        transform: scale(1.2);
    }
    50% {
        top: 30%;
        left: 80%;
        transform: scale(0.8);
    }
    75% {
        top: 70%;
        left: 20%;
        transform: scale(1.1);
    }
}

/* Secondary Orb (optional - add second div with class floating-orb-2 in HTML) */
.floating-orb-2 {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        rgba(180,183,189, 0.12) 0%,
        rgba(180,183,189, 0.04) 40%,
        transparent 70%);
    filter: blur(30px);
    animation: floatOrb2 25s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes floatOrb2 {
    0%, 100% {
        top: 70%;
        right: 10%;
        transform: scale(1);
    }
    33% {
        top: 20%;
        right: 60%;
        transform: scale(1.3);
    }
    66% {
        top: 50%;
        right: 30%;
        transform: scale(0.9);
    }
}

/* .cyber-grid::after + @keyframes gridPulse (orbit-sized sweeping light) removed 2026-07-18
   per request — was a soft blue band sweeping across the orbit/logo every 4s.
   backup: deploy/background-backup-2026-07-18/components.css */

/* Vertical scan line variation */
.scan-line-vertical {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, 
        transparent 0%, 
        var(--accent-secondary) 50%, 
        transparent 100%);
    box-shadow: 
        0 0 10px var(--accent-secondary),
        0 0 20px var(--accent-secondary);
    opacity: 0.5;
    animation: scanLineVertical 12s linear infinite;
    z-index: 2;
}

@keyframes scanLineVertical {
    0% {
        left: -2px;
        opacity: 0;
    }
    5% {
        opacity: 0.5;
    }
    95% {
        opacity: 0.5;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

/* 
═══════════════════════════════════════════════════════════════════════════════
MOBILE MENU
═══════════════════════════════════════════════════════════════════════════════
*/

.mobile-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-dark);
    z-index: var(--z-dropdown);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    border-top: 1px solid var(--border-subtle);
}

.mobile-menu.active {
    transform: translateX(0);
}

body.menu-open {
    overflow: hidden;
}

.mobile-nav {
    padding: var(--space-lg);
}

.mobile-nav-link {
    display: block;
    padding: var(--space-md) var(--space-lg);
    color: var(--text-primary);
    font-size: var(--text-lg);
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.mobile-nav-link:hover {
    background: var(--bg-light);
    color: var(--accent-primary);
}

.mobile-nav-section {
    margin-bottom: var(--space-sm);
}

.mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: var(--text-lg);
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.mobile-nav-toggle:hover {
    background: var(--bg-light);
    color: var(--accent-primary);
}

.mobile-nav-toggle .toggle-icon {
    font-size: var(--text-xl);
    color: var(--accent-primary);
    font-weight: 300;
}

.mobile-nav-submenu {
    display: none;
    padding-left: var(--space-lg);
    margin-top: var(--space-xs);
}

.mobile-nav-submenu.active {
    display: block;
}

.mobile-nav-sublink {
    display: block;
    padding: var(--space-sm) var(--space-lg);
    color: var(--text-secondary);
    font-size: var(--text-base);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.mobile-nav-sublink:hover {
    background: var(--bg-hover);
    color: var(--accent-primary);
}

/* Mobile menu toggle animation */
.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}


/* 
═══════════════════════════════════════════════════════════════════════════════
SEARCH MODAL ENHANCEMENTS
═══════════════════════════════════════════════════════════════════════════════
*/

.search-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 10, 15, 0.9);
    backdrop-filter: blur(10px);
    z-index: var(--z-modal);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
}

.search-modal.active {
    opacity: 1;
    visibility: visible;
}

.search-modal-content {
    width: 100%;
    max-width: 600px;
    background: var(--bg-medium);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
    overflow: hidden;
    transform: translateY(-20px);
    transition: transform var(--transition-base);
}

.search-modal.active .search-modal-content {
    transform: translateY(0);
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-subtle);
}

.search-input-wrapper svg {
    flex-shrink: 0;
    color: var(--text-muted);
}

.search-input {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-bright);
    font-size: var(--text-lg);
    font-family: inherit;
    outline: none;
}

.search-input::placeholder {
    color: var(--text-muted);
}

.search-input-wrapper kbd {
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-light);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
}

.search-results {
    max-height: 400px;
    overflow-y: auto;
    padding: var(--space-md);
}

.search-hint {
    text-align: center;
    padding: var(--space-2xl);
    color: var(--text-muted);
}


/* 
═══════════════════════════════════════════════════════════════════════════════
BREADCRUMB
═══════════════════════════════════════════════════════════════════════════════
*/

.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    margin-bottom: var(--space-lg);
}

.breadcrumb-link {
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}

.breadcrumb-link:hover {
    color: var(--accent-primary);
}

.breadcrumb-separator {
    color: var(--text-muted);
}

.breadcrumb-current {
    color: var(--text-primary);
}


/* 
═══════════════════════════════════════════════════════════════════════════════
RELATED TUTORIALS SIDEBAR
═══════════════════════════════════════════════════════════════════════════════
*/

.related-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.related-tutorial-link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.related-tutorial-link:hover {
    background: var(--bg-hover);
    color: var(--accent-primary);
}

.related-icon {
    flex-shrink: 0;
}


/* 
═══════════════════════════════════════════════════════════════════════════════
FILTER BUTTONS
═══════════════════════════════════════════════════════════════════════════════
*/

.filter-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-3xl);
    flex-wrap: wrap;
}

.filter-btn {
    padding: var(--space-sm) var(--space-lg);
}


/* 
═══════════════════════════════════════════════════════════════════════════════
TUTORIAL CARD ANIMATIONS
═══════════════════════════════════════════════════════════════════════════════
*/

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tutorial-card {
    transition: all var(--transition-base);
}

.tutorial-card[style*="display: none"] {
    animation: none;
}


/* 
═══════════════════════════════════════════════════════════════════════════════
CODE BLOCK COPY BUTTON
═══════════════════════════════════════════════════════════════════════════════
*/

.code-block {
    position: relative;
}

.code-copy-btn {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-light);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    cursor: pointer;
    opacity: 0;
    transition: all var(--transition-fast);
}

.code-block:hover .code-copy-btn {
    opacity: 1;
}

.code-copy-btn:hover {
    background: var(--bg-hover);
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.code-copy-btn.copied {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}


/* 
═══════════════════════════════════════════════════════════════════════════════
TOC SUBLINK STYLING
═══════════════════════════════════════════════════════════════════════════════
*/

.toc-sublink {
    padding-left: var(--space-lg);
    font-size: var(--text-sm);
}


/* 
═══════════════════════════════════════════════════════════════════════════════
RESPONSIVE ADJUSTMENTS
═══════════════════════════════════════════════════════════════════════════════
*/

@media (max-width: 768px) {
    .search-modal {
        padding: var(--space-md);
        padding-top: 10vh;
    }
    
    .search-modal-content {
        max-width: 100%;
    }
    
    .filter-buttons {
        gap: var(--space-sm);
    }
    
    .filter-btn {
        padding: var(--space-xs) var(--space-md);
        font-size: var(--text-sm);
    }
}


/* 
═══════════════════════════════════════════════════════════════════════════════
FUTURE CATEGORY CARD ACCENTS
Add these data-category values when you uncomment the cards in HTML
═══════════════════════════════════════════════════════════════════════════════
*/

/* Website Building / Web Development - Blue gradient accent */
.category-card[data-category="webdev"] .category-icon { 
    background: rgba(0, 150, 255, 0.1); 
}
.category-card[data-category="webdev"] { 
    --card-accent: #0096ff; 
}
.category-card[data-category="webdev"]:hover {
    border-color: rgba(0, 150, 255, 0.5);
    box-shadow: 
        0 0 30px rgba(0, 150, 255, 0.2),
        inset 0 0 30px rgba(0, 150, 255, 0.05);
}
.category-card[data-category="webdev"]:hover .category-link {
    color: #0096ff;
}

/* Trading / MQ5 Indicators - Gold accent */
.category-card[data-category="trading"] .category-icon { 
    background: rgba(255, 200, 0, 0.1); 
}
.category-card[data-category="trading"] { 
    --card-accent: #ffc800; 
}
.category-card[data-category="trading"]:hover {
    border-color: rgba(255, 200, 0, 0.5);
    box-shadow: 
        0 0 30px rgba(255, 200, 0, 0.2),
        inset 0 0 30px rgba(255, 200, 0, 0.05);
}
.category-card[data-category="trading"]:hover .category-link {
    color: #ffc800;
}

/* Products - Silver/White accent */
.category-card[data-category="products"] .category-icon { 
    background: rgba(200, 200, 220, 0.1); 
}
.category-card[data-category="products"] { 
    --card-accent: #c8c8dc; 
}
.category-card[data-category="products"]:hover {
    border-color: rgba(200, 200, 220, 0.5);
    box-shadow: 
        0 0 30px rgba(200, 200, 220, 0.2),
        inset 0 0 30px rgba(200, 200, 220, 0.05);
}
.category-card[data-category="products"]:hover .category-link {
    color: #c8c8dc;
}


/* 
═══════════════════════════════════════════════════════════════════════════════
SERVICES DROPDOWN STYLES
Styles for the Services navigation dropdown (revenue-generating services)
═══════════════════════════════════════════════════════════════════════════════
*/

/* Highlight the Services nav item to make it stand out */
.nav-item.nav-highlight .nav-link.active {
    color: var(--accent-primary);
}

.nav-item.nav-highlight .nav-link:hover {
    color: var(--text-primary);
}

/* Services dropdown container */
.services-dropdown {
    min-width: 320px;
}

/* Service badge (Popular, Custom, New, etc.) */
.service-badge {
    display: inline-block;
    padding: 2px 8px;
    margin-left: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-full);
    background: var(--accent-primary);
    color: var(--bg-dark);
}

/* Dropdown footer with "View All" link */
.dropdown-footer {
    padding: var(--space-sm) var(--space-md);
    margin-top: var(--space-sm);
    border-top: 1px solid var(--border-subtle);
}

.dropdown-footer-link {
    display: block;
    text-align: center;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--accent-primary);
    transition: color var(--transition-fast);
}

.dropdown-footer-link:hover {
    color: var(--accent-secondary);
}

/* Mobile Services section styling */
.mobile-nav-services {
    border-left: 2px solid var(--accent-primary);
    margin-left: var(--space-sm);
    padding-left: var(--space-sm);
}

.mobile-badge {
    display: inline-block;
    padding: 1px 6px;
    margin-left: 8px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: var(--radius-full);
    background: var(--accent-primary);
    color: var(--bg-dark);
}

.mobile-nav-all {
    font-weight: 500;
    color: var(--accent-primary) !important;
    margin-top: var(--space-xs);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOGO IMAGE STYLING
   ═══════════════════════════════════════════════════════════════════════════ */

.logo-image {
    height: 40px;
    width: auto;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.footer-logo .logo-image {
    height: 32px;
}

/* ───────────────────────────────────────────────────────────────────────────
   FOOTER EMBLEM RINGS  (moved from about.html's hero, 2026-08-05)
   ───────────────────────────────────────────────────────────────────────────
   The About page had three pulsing rings around a 300px emblem (inset -20/-40/
   -60px). The owner asked for them in the footer at their smallest size, so the
   insets are scaled to a 32px mark. Built by createFooter() in js/components.js,
   so they render on all 37 pages that mount the shared footer.

   🔴 They ring the IMAGE, not .footer-logo. That element is a flex row holding the
      mark AND the wordmark, so a border-radius:50% on it would draw a wide ellipse.
   🔴 margin-right keeps the outermost ring clear of the wordmark: the rings are
      absolutely positioned and therefore contribute NOTHING to layout width, so
      without it the text sits on top of them.
   ─────────────────────────────────────────────────────────────────────────── */
/* The disc itself — the "circle" half of the hero visual. In the About hero this was
   .avatar-main: a 300px disc in --bg-medium with a --border-subtle edge, holding the
   mark. Reproduced here at 42px so the whole thing moved, not just the rings. */
.footer-emblem {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 42px;
    height: 42px;
    background: var(--bg-medium);
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    margin-right: 12px;
}

/* 🔴 CANCEL THE SHARED .logo-image MARGIN INSIDE THE DISC.
   `.logo-image` (above) carries `margin-right: 0.5rem` to separate the mark from the
   wordmark in the header. Inside .footer-emblem that margin is still part of the flex
   item, and `justify-content: center` centres the item's MARGIN BOX — so the visible
   mark sat 4px (half of 8px) LEFT of the disc's true centre, while the rings, being
   positioned against the disc itself, stayed perfectly concentric. That mismatch is
   exactly what made it look off: everything was centred except the one thing that
   carried a margin. Reported from a screenshot, 2026-08-05.
   Spacing to the wordmark is unaffected — that comes from .footer-logo's `gap` plus
   .footer-emblem's own `margin-right`. */
.footer-emblem .logo-image {
    margin-right: 0;
}

.footer-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--accent-primary);
    opacity: 0.2;
    animation: footer-pulse-ring 3s ease-in-out infinite;
    pointer-events: none;
}

/* 1px border rather than the hero's 2px: at this size 2px reads as a solid disc.
   Insets tightened once the 42px disc was added — they measure from the disc edge
   now, not from the 32px mark, so the outer ring sits at 42+20 = 62px. */
.footer-ring:nth-child(1) { inset: -4px;  animation-delay: 0s;   }
.footer-ring:nth-child(2) { inset: -7px;  animation-delay: 0.5s; }
.footer-ring:nth-child(3) { inset: -10px; animation-delay: 1s;   }

@keyframes footer-pulse-ring {
    0%, 100% { opacity: 0.1; transform: scale(1); }
    50%      { opacity: 0.3; transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
    .footer-ring { animation: none; }
}


/* ───────────────────────────────────────────────────────────────────────────
   SHARED CTA CARD  (moved here from css/tutorials.css, 2026-08-03)
   ───────────────────────────────────────────────────────────────────────────
   Used by: the homepage Web Development band, the tutorial funnel CTA injected
   by js/tutorials-components.js, and tutorials/index.html. Lives in components.css
   because that is the one stylesheet every one of those pages loads.
   Pages with their own inline .cta-* rules (about.html, the four original
   services/*.html) override these — their <style> is parsed after this <link>.
   ─────────────────────────────────────────────────────────────────────────── */

.cta-section {
    margin: 0 0 3rem;
}

.cta-card {
    background: var(--gradient-card);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl) var(--space-xl);
    text-align: center;
}

.cta-card .section-badge {
    margin-bottom: var(--space-md);
}

.cta-title {
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--text-bright);
    line-height: 1.2;
    margin-bottom: var(--space-md);
}

.cta-description {
    font-size: var(--text-base);
    color: var(--text-secondary);
    line-height: 1.75;
    max-width: 620px;
    margin: 0 auto var(--space-xl);
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: center;
}

@media (max-width: 600px) {
    .cta-card {
        padding: var(--space-xl) var(--space-lg);
    }

    .cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .cta-actions .btn {
        justify-content: center;
    }
}