/**
 * DNA Romance Brand Button Fix
 * Created: 2025-09-08
 * Purpose: Apply brand colors to btn-dna buttons and fix desktop-link visibility
 */

/* ========================================================================
   DNA ROMANCE BRAND COLORS
   ======================================================================== */

:root {
    /* Primary Brand Colors */
    --dna-primary: #0F75BD;
    --dna-primary-dark: #0A5A91;
    --dna-primary-light: #2196F3;
    
    /* Secondary Brand Colors */
    --dna-secondary: #F72C93;
    --dna-secondary-dark: #D91872;
    --dna-secondary-light: #FF6BB3;
    
    /* Brand Gradients */
    --dna-gradient-primary: linear-gradient(135deg, #0F75BD 0%, #2196F3 100%);
    --dna-gradient-secondary: linear-gradient(135deg, #F72C93 0%, #FF6BB3 100%);
    --dna-gradient-brand: linear-gradient(135deg, #0F75BD 0%, #F72C93 100%);
}

/* ========================================================================
   BTN-DNA PRIMARY BUTTON - DNA Romance Pink
   ======================================================================== */

.btn-dna--primary,
.btn-dna.btn-dna--primary {
    /* DNA Romance Primary Pink */
    background: linear-gradient(135deg, #f23ead 0%, #d91872 100%) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 600 !important;
    padding: 14px 32px !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 20px rgba(242, 62, 173, 0.3) !important;
    transition: all 0.3s ease !important;
    text-transform: none !important;
    position: relative !important;
    overflow: hidden !important;
}

.btn-dna--primary:hover,
.btn-dna.btn-dna--primary:hover {
    background: linear-gradient(135deg, #d91872 0%, #f23ead 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(242, 62, 173, 0.4) !important;
}

.btn-dna--primary:active {
    transform: scale(0.98) !important;
}

/* Icon styling within primary button */
.btn-dna--primary i,
.btn-dna--primary .fa-arrow-right {
    color: #ffffff !important;
    transition: transform 0.3s ease !important;
}

.btn-dna--primary:hover i,
.btn-dna--primary:hover .fa-arrow-right {
    transform: translateX(3px) !important;
}

/* ========================================================================
   BTN-DNA GLASS BUTTON - Secondary Pink/White
   ======================================================================== */

.btn-dna--glass,
.btn-dna.btn-dna--glass {
    /* Glass effect with brand secondary color */
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    font-weight: 600 !important;
    padding: 14px 32px !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease !important;
    text-transform: none !important;
}

.btn-dna--glass:hover,
.btn-dna.btn-dna--glass:hover {
    background: var(--dna-gradient-secondary) !important;
    color: #ffffff !important;
    border-color: var(--dna-secondary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(247, 44, 147, 0.4) !important;
}

.btn-dna--glass:active {
    transform: scale(0.98) !important;
}

/* Icon styling within glass button */
.btn-dna--glass i,
.btn-dna--glass .fa-sign-in-alt {
    color: #ffffff !important;
}

/* ========================================================================
   DESKTOP-LINK FIX - Ensure White Text
   ======================================================================== */

.desktop-link,
a.desktop-link {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    opacity: 0.9 !important;
}

.desktop-link:hover,
a.desktop-link:hover {
    color: #ffffff !important;
    opacity: 1 !important;
    text-decoration: underline !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
}

/* If desktop-link is inside a dark section, ensure visibility */
.hero-section .desktop-link,
.hero-modern .desktop-link,
.banner3 .desktop-link,
[class*="hero"] .desktop-link {
    color: #ffffff !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================================================
   HOVER EFFECTS AND MICROINTERACTIONS
   ======================================================================== */

/* Subtle hover glow effect */
.btn-hover-glow:hover,
.hover-glow:hover {
    filter: brightness(1.1) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Click effect - subtle scale and shadow */
.btn-dna:active,
.btn-dna--primary:active,
.btn-dna--glass:active,
.btn-ripple:active,
.micro-interaction:active {
    transform: scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.1s ease !important;
}

/* Alternative ripple effect - much smaller and faster */
.btn-ripple {
    position: relative !important;
    overflow: hidden !important;
}

.btn-ripple::before {
    content: "" !important;
    position: absolute !important;
    top: var(--ripple-y, 50%) !important;
    left: var(--ripple-x, 50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.4) !important;
    transform: translate(-50%, -50%) !important;
    transition: width 0.3s ease-out, height 0.3s ease-out, opacity 0.3s ease-out !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

.btn-ripple:active::before {
    width: 80px !important;
    height: 80px !important;
    opacity: 0 !important;
}

/* Slide effect for hover (replaces large expansion) */
.btn-hover-slide {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

.btn-hover-slide::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s ease !important;
    z-index: -1 !important;
}

.btn-hover-slide:hover::after {
    left: 100% !important;
}

/* ========================================================================
   RESPONSIVE ADJUSTMENTS
   ======================================================================== */

@media (max-width: 768px) {
    .btn-dna--primary,
    .btn-dna--glass {
        padding: 12px 24px !important;
        font-size: 1rem !important;
    }
    
    .hero-modern__cta {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100% !important;
    }
    
    .hero-modern__cta .btn-dna {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ========================================================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================================================== */

.btn-dna:focus-visible {
    outline: 3px solid #ffffff !important;
    outline-offset: 3px !important;
}

.desktop-link:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn-dna--primary,
    .btn-dna--glass {
        border-width: 3px !important;
    }
    
    .desktop-link {
        text-decoration: underline !important;
    }
}

/* ========================================================================
   SPECIFIC PLATFORM OVERRIDES
   ======================================================================== */

/* DateMetriX purple theme */
[data-site="datemetrix"] .btn-dna--primary {
    background: linear-gradient(135deg, #6A1B9A 0%, #9C4DCC 100%) !important;
}

[data-site="datemetrix"] .btn-dna--primary:hover {
    background: linear-gradient(135deg, #4A148C 0%, #6A1B9A 100%) !important;
}

/* GenePool teal theme */
[data-site="genepool"] .btn-dna--primary {
    background: linear-gradient(135deg, #00897B 0%, #4DB6AC 100%) !important;
}

[data-site="genepool"] .btn-dna--primary:hover {
    background: linear-gradient(135deg, #00695C 0%, #00897B 100%) !important;
}

/* WellMatched blue theme */
[data-site="wellmatched"] .btn-dna--primary {
    background: linear-gradient(135deg, #1976D2 0%, #42A5F5 100%) !important;
}

[data-site="wellmatched"] .btn-dna--primary:hover {
    background: linear-gradient(135deg, #1565C0 0%, #1976D2 100%) !important;
}