/* Custom Styles for ScopedX Static Clone */

/* =====================================================
   Balanced text wrapping for headings
   When a heading wraps to multiple lines, this makes
   each line as close to equal length as possible.
   Supported: Chrome 114+, Edge 114+, Safari 17.5+
   Falls back gracefully in older browsers.
   ===================================================== */
h1, h2, h3 {
    text-wrap: balance;
}

/* Fix for text descenders being cut off with bg-clip-text gradient text */
/* This affects letters like g, q, p, y that extend below the baseline */
.bg-clip-text {
    padding-bottom: 0.1em;
    margin-bottom: -0.1em;
}

/* Fixed header stability */
header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    transform: none !important;
    /* Removed transition: none to allow smart header animation */
}

/* Prevent header from being affected by transforms or animations */
/* Exception: allow transforms on dropdown menus and arrow icons for proper positioning/animations */
header *:not(.services-dropdown-menu):not(.services-arrow) {
    transform: none !important;
}

/* Explicitly allow arrow rotation on hover */
header .services-dropdown:hover .services-arrow {
    transform: rotate(180deg) !important;
}

/* Ensure body has proper top padding to account for fixed header */
body {
    padding-top: 0 !important;
}

/* Mobile defaults: tap highlight, prevent overflow from negative margins */
@media (max-width: 767px) {
    body {
        min-width: 0;
        overflow-x: hidden;
    }
    a, button {
        -webkit-tap-highlight-color: rgba(59, 130, 246, 0.2);
        tap-highlight-color: rgba(59, 130, 246, 0.2);
    }
}

/* Font Configuration */
.font-inter {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Custom animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Hover effects for feature cards */
.feature-card {
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
}

/* Custom gradient backgrounds */
.bg-medical-gradient {
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
}

/* Custom shadows */
.shadow-medical {
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1), 0 10px 10px -5px rgba(59, 130, 246, 0.04);
}

/* Button hover effects */
.btn-primary {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.25);
}

/* Mobile menu animation */
.mobile-menu-enter {
    opacity: 0;
    transform: translateY(-10px);
}

.mobile-menu-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease;
}

/* Loading states */
.loading {
    position: relative;
    overflow: hidden;
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Responsive typography */
@media (max-width: 640px) {
    .text-responsive-xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    
    .text-responsive-lg {
        font-size: 1.5rem;
        line-height: 2rem;
    }
}

/* Custom focus states for accessibility */
.focus-ring:focus {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    h1, h2, h3 {
        page-break-after: avoid;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .text-gray-600 {
        color: #000000;
    }
    
    .text-gray-400 {
        color: #333333;
    }
    
    .border-gray-100 {
        border-color: #000000;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* Dark mode support (future enhancement) */
@media (prefers-color-scheme: dark) {
    .dark-mode-ready {
        /* Dark mode styles can be added here */
    }
}

/* =====================================================
   Two-toned blue underline animation (global)
   Used on text links/buttons site-wide. Apply the
   .nav-underline-link class to a <span> wrapping the
   text inside any clickable element, or directly on
   the element if it has no extra padding.
   ===================================================== */
.nav-underline-link {
    position: relative;
    display: inline-block;
    text-decoration: none;
}

.nav-underline-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(to right, #1DB4E7 50%, #0055A4 50%);
    transition: width 0.35s ease;
    pointer-events: none;
}

/* Trigger when class is on the element itself */
.nav-underline-link:hover::after {
    width: calc(100% + 8px);
}

/* Trigger when class is on a <span> inside a link/button */
a:hover .nav-underline-link::after,
button:hover .nav-underline-link::after {
    width: calc(100% + 8px);
}

/* =====================================================
   Scope signature two-toned line (light #1DB4E7, dark #0055A4)
   Use for decorative underlines, section dividers, and accents.
   ===================================================== */
.scope-signature-line {
    display: flex;
    height: 4px;
}
.scope-signature-line--bar {
    height: inherit;
}
.scope-signature-line--light { background-color: #1DB4E7; }
.scope-signature-line--dark { background-color: #0055A4; }
/* Gradient variant (e.g. under headings) */
.scope-signature-line-gradient {
    height: 4px;
    background: linear-gradient(to right, #1DB4E7 50%, #0055A4 50%);
    border-radius: 2px;
}

/* Hide all signature lines – remove or comment out to restore */
.scope-signature-line-gradient,
.scope-signature-line-hero {
    display: none !important;
}