/* Custom CSS for SafeYourWeb - Extracted from templates */

/* Local Font Face Declarations */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    font-optical-sizing: auto;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
    font-optical-sizing: auto;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope/Manrope-VariableFont_wght.ttf') format('truetype');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

/* Base Styles */
html {
    scroll-behavior: smooth;
}

body {
    background: #000000;
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Hero section padding for fixed navbar - removed hero-nav-offset class usage */

/* Section spacing */
section + section {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Fix autofill background color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px rgba(0, 0, 0, 0.3) inset !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
    transition: background-color 5000s ease-in-out 0s;
}

input:-webkit-autofill::first-line,
select:-webkit-autofill::first-line {
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
}

/* Mobile graph scroll styling */
.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(16, 185, 129, 0.3) transparent;
}

.overflow-x-auto::-webkit-scrollbar {
    height: 6px;
}

.overflow-x-auto::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.overflow-x-auto::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.4);
    border-radius: 3px;
}

.overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.6);
}

/* Responsive SVG text sizing */
@media (max-width: 640px) {
    svg text {
        font-size: 7px !important;
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    svg text {
        font-size: 8px !important;
    }
}

/* Enhanced focus management and touch targets */
a:focus, button:focus, input:focus, textarea:focus {
    outline: 2px solid #4CD964;
    outline-offset: 4px;
    border-radius: 4px;
}

button, a, [role="button"] {
    min-height: 44px;
    min-width: 44px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animations */
.animate-fadein-title {
    animation: fadein-title 0.8s 0.1s cubic-bezier(.4, 0, .2, 1) forwards;
    will-change: opacity, transform;
}

.animate-fadein-desc {
    animation: fadein-desc 0.8s 0.3s cubic-bezier(.4, 0, .2, 1) forwards;
    will-change: opacity, transform;
}

.animate-fadein-badge {
    animation: fadein-badge 0.8s cubic-bezier(.4, 0, .2, 1) forwards;
    will-change: opacity, transform;
}

@keyframes fadein-title {
    from { opacity: 0; transform: translateY(2rem); }
    to { opacity: 1; transform: none; }
}

@keyframes fadein-desc {
    from { opacity: 0; transform: translateY(2rem); }
    to { opacity: 1; transform: none; }
}

@keyframes fadein-badge {
    from { opacity: 0; transform: translateY(1rem); }
    to { opacity: 1; transform: none; }
}

/* Glassmorphism Navbar Styles */
.glassmorphism-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.glassmorphism-nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.glassmorphism-nav a {
    text-decoration: none !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.glassmorphism-nav a:hover {
    text-decoration: none !important;
    outline: none !important;
}

.glassmorphism-nav a:focus {
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.glassmorphism-nav button {
    background: none;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
}

.glassmorphism-nav button:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Navbar alignment - Tailwind classes handle flexbox, but keep list reset */
.glassmorphism-nav nav {
    /* Tailwind handles: flex items-center justify-between */
}

.glassmorphism-nav ul {
    /* Tailwind handles: flex items-center gap-8 */
    /* Only reset list styles, don't override flex */
}

.glassmorphism-nav li {
    /* Tailwind handles: flex items-center */
}

/* Mobile responsive improvements for navbar */
@media (max-width: 768px) {
    .glassmorphism-nav .logo-img {
        height: 2rem;
        width: auto;
    }
    
    .glassmorphism-nav #mobile-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        animation: slideDown 0.3s ease-out;
    }
    
    .glassmorphism-nav #mobile-menu ul {
        flex-direction: column;
        gap: 0;
    }
    
    .glassmorphism-nav #mobile-menu li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .glassmorphism-nav #mobile-menu li:last-child {
        border-bottom: none;
    }
    
    .glassmorphism-nav #mobile-menu a {
        display: block;
        padding: 1rem 1.5rem;
        width: 100%;
        text-align: left;
        font-size: 1.1rem;
        transition: all 0.3s ease;
    }
    
    .glassmorphism-nav #mobile-menu a:hover {
        background: rgba(255, 255, 255, 0.1);
        padding-left: 2rem;
    }
    
    .glassmorphism-nav #mobile-menu .cta-mobile {
        margin: 1rem 1.5rem;
        text-align: center;
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        background: rgba(34, 197, 94, 0.2);
        border: 1px solid rgb(34, 197, 94);
        color: rgb(34, 197, 94);
        font-weight: 600;
        transition: all 0.3s ease;
    }
    
    .glassmorphism-nav #mobile-menu .cta-mobile:hover {
        background: rgba(34, 197, 94, 0.3);
        transform: translateY(-2px);
    }
    
    .glassmorphism-nav #mobile-menu-btn {
        padding: 0.5rem;
        border-radius: 0.375rem;
        transition: all 0.3s ease;
    }
    
    .glassmorphism-nav #mobile-menu-btn:hover {
        background: rgba(255, 255, 255, 0.1);
    }
    
    .glassmorphism-nav #mobile-menu-btn:active {
        transform: scale(0.95);
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .glassmorphism-nav .logo-img {
        height: 1.75rem;
    }
    
    .glassmorphism-nav #mobile-menu a {
        padding: 0.875rem 1.25rem;
        font-size: 1rem;
    }
    
    .glassmorphism-nav #mobile-menu .cta-mobile {
        margin: 0.75rem 1.25rem;
        padding: 0.625rem 1.25rem;
    }
}

/* Animation for mobile menu */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ensure mobile menu is properly hidden */
.glassmorphism-nav #mobile-menu.hidden,
.glassmorphism-nav #mobile-menu.tw-hidden {
    display: none !important;
}

/* Force hide desktop elements on mobile */
@media (max-width: 767px) {
    .glassmorphism-nav .desktop-nav {
        display: none !important;
    }
    
    .glassmorphism-nav .desktop-cta {
        display: none !important;
    }
    
    .glassmorphism-nav .mobile-menu-btn {
        display: block !important;
    }
}

@media (min-width: 768px) {
    .glassmorphism-nav .desktop-nav {
        display: flex !important;
    }
    
    .glassmorphism-nav .desktop-cta {
        display: block !important;
    }
    
    .glassmorphism-nav .mobile-menu-btn {
        display: none !important;
    }
}

/* Sticky navigation */
.sticky-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(10px);
    background: rgba(13, 13, 13, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Responsive container improvements */
.max-w-7xl, .max-w-screen-lg {
    box-sizing: border-box;
}

/* Responsive images with lazy loading */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Responsive table improvements */
table {
    width: 100%;
    border-collapse: collapse;
    overflow-x: auto;
    display: block;
}

th, td {
    word-break: break-word;
    padding: 0.75rem;
}

/* Hide scrollbars but maintain functionality */
::-webkit-scrollbar {
    width: 8px;
    background: #18181B;
}

::-webkit-scrollbar-thumb {
    background: #23272F;
    border-radius: 4px;
}

/* Mobile-first responsive design */
@media (max-width: 640px) {
    
    .text-4xl, .sm\:text-5xl, .md\:text-6xl {
        font-size: 2rem !important;
    }
    
    .text-2xl, .sm\:text-3xl, .md\:text-5xl {
        font-size: 1.5rem !important;
    }
    
    
    .grid-cols-1, .sm\:grid-cols-2, .lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    
    .flex-row, .md\:flex-row {
        flex-direction: column !important;
    }
    
    .gap-8, .sm:gap-10, .md:gap-12, .md:gap-16 {
        gap: 1.5rem !important;
    }
    
    .mb-12, .sm:mb-16 {
        margin-bottom: 2rem !important;
    }
    
    button, a, [role="button"] {
        min-height: 48px;
        min-width: 48px;
    }
    
    .px-4, .sm\:px-6, .md\:px-8, .md\:px-12 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .text-lg {
        font-size: 1rem !important;
    }
    
    .text-xl {
        font-size: 1.125rem !important;
    }
}

@media (max-width: 1024px) {
    .lg\:grid-cols-2, .lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    
    .md\:flex-row {
        flex-direction: column !important;
    }
    
    .md\:px-12 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Ensure nav and tables are scrollable on mobile */
nav[aria-label="Breadcrumb"] {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

/* Accessibility: high contrast for important text */
.text-white, .font-bold, .font-semibold {
    text-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* SEO: visually hidden headings for screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* Soften decorative background glow circles */
.pointer-events-none .rounded-full.blur-3xl,
.rounded-full.blur-3xl {
    opacity: 0.08 !important;
    filter: blur(90px) saturate(115%);
    mix-blend-mode: screen;
    transition: opacity 400ms ease, filter 400ms ease;
}

.pointer-events-none .rounded-full.blur-3xl.bg-gradient-to-r {
    opacity: 0.06 !important;
    filter: blur(110px) saturate(115%);
}

.pointer-events-none .rounded-full.blur-3xl.animate-pulse {
    animation: subtle-pulse 8s ease-in-out infinite !important;
}

@keyframes subtle-pulse {
    0%, 100% { opacity: 0.06; }
    50% { opacity: 0.10; }
}

/* Compact vertical spacing between sections */
/* #main-content {

    padding-top: 3rem !important;
    padding-bottom: 1rem !important;
} */

/* Section padding for service pages only */
/* Only applies to sections that come AFTER #main-content (service pages pattern) */
/* This ensures landing/contact pages without #main-content are not affected */
#main-content ~ section {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

@media (min-width: 640px) {
    #main-content ~ section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

@media (min-width: 1024px) {
    #main-content ~ section {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
}

/* Responsive padding for sections and articles - only on service pages */
/* Only applies when #main-content exists (service pages have this) */
body:has(#main-content) section,
body:has(#main-content) article {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (max-width: 640px) {
    body:has(#main-content) section,
    body:has(#main-content) article {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Fallback for browsers without :has() support (Safari < 15.4, older browsers) */
/* Only apply section padding if #main-content exists as a sibling */
@supports not selector(:has(*)) {
    /* More conservative: only apply to sections after #main-content */
    #main-content ~ section,
    #main-content ~ article {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    @media (max-width: 640px) {
        #main-content ~ section,
        #main-content ~ article {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }
    }
}

/* Reduce large gaps created by horizontal rules */
hr {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

/* CSS Custom Properties */
:root {
    --brand-from: #00B341;
    --brand-to: #4CD964;
    --bg-primary: #0D0D0D;
    --bg-secondary: #0A0A0A;
    --text-primary: #ffffff;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --border-color: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(76, 217, 100, 0.25);
    --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Loading states */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--brand-to);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Improved color contrast for accessibility */
.text-gray-300 {
    color: #d1d5db;
}

.text-gray-400 {
    color: #9ca3af;
}

.text-gray-500 {
    color: #6b7280;
}

/* Accessibility: focus outlines */
a:focus,
button:focus,
input:focus,
textarea:focus {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Footer bottom spacing fix */
footer {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Footer icon alignment fix */
footer .bi-heart-fill {
    vertical-align: baseline !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* Page-specific styles for service pages */

/* FAQ Accordion styles (for Penetration Testing page) */
.faq-answer {
    transition: max-height 0.4s cubic-bezier(.4, 0, .2, 1), opacity 0.3s;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
}

.faq-answer.open {
    opacity: 1;
    max-height: 300px;
}

.faq-toggle svg {
    transition: transform 0.3s cubic-bezier(.4, 0, .2, 1);
}

.faq-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Card glass effect */
.card-glass {
    background: rgba(30, 32, 36, 0.20);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

/* Section title letter spacing */
.section-title {
    letter-spacing: -0.02em;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #3b82f6;
    color: white;
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 1000;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 6px;
}

/* Additional mobile font size adjustments for some pages */
@media (max-width: 640px) {
    .text-5xl, .lg\:text-6xl {
        font-size: 2rem !important;
    }
}

/* Slow pulse animation for background elements */
.animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}