/* Import Google Font - Inter */
/* No longer using @import here as it's linked directly in HTML */

/* Base styles and custom font */
body {
    font-family: 'Inter', sans-serif;
    background-color: #1a202c; /* Equivalent to bg-gray-900 */
    color: #e2e8f0; /* Equivalent to text-gray-100 */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
}

/* Universal box-sizing for consistent layout calculations */
*, *::before, *::after {
    box-sizing: border-box;
}

main {
    flex-grow: 1;
}

/* Header styles */
header {
    background-color: #2d3748; /* Equivalent to bg-gray-800 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Equivalent to shadow-lg */
    padding: 1rem 0; /* Adjusted vertical padding for a more compact header */
    width: 100%; /* Ensure full width */
}

header nav {
    display: flex;
    flex-direction: column; /* Stack vertically on small screens */
    justify-content: space-between;
    align-items: center; /* Center items horizontally when stacked */
    max-width: 1280px; /* Equivalent to container mx-auto */
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem; /* Equivalent to px-4, override Simple.css default nav padding */
}

@media (min-width: 768px) { /* Equivalent to md breakpoint */
    header nav {
        flex-direction: row; /* Arrange horizontally on medium screens and up */
        gap: 2rem; /* Add some space between the logo and the nav menu */
    }
}

header nav a:first-child { /* Targeting the logo link "LinuxCore.cloud" */
    font-size: 2rem !important; /* Force font size for logo */
    font-weight: 700; /* Equivalent to font-bold */
    color: #38bdf8 !important; /* Force color */
    margin-bottom: 0.75rem; /* Adjusted vertical spacing below logo on mobile */
    transition: color 300ms ease;
    text-decoration: none !important; /* Remove underline from Simple.css default link style */
    white-space: nowrap; /* Prevent logo from wrapping */
    padding: 0 !important; /* Ensure no extra padding from Simple.css */
}

@media (min-width: 768px) {
    header nav a:first-child {
        font-size: 2.25rem !important; /* Revert to original size on desktop */
        margin-bottom: 0 !important; /* No bottom margin when in a row */
        margin-right: auto !important; /* Push the nav menu to the right */
    }
}

header nav ul {
    display: flex;
    flex-wrap: wrap; /* Allow links to wrap to the next line if needed */
    list-style: none !important; /* Remove default list bullets */
    margin: 0 !important; /* Force reset default margin from ul from Simple.css */
    padding: 0 !important; /* Force reset default padding from ul from Simple.css */
    gap: 0.5rem !important; /* Force reduced gap for compactness */
    justify-content: center; /* Center the list items if they wrap or are fewer */
    align-items: center; /* Ensure vertical alignment of list items */
}

header nav ul li {
    margin: 0 !important; /* Force reset margin on list items from Simple.css */
    padding: 0 !important; /* Force reset padding on list items from Simple.css */
}

header nav ul li a {
    font-size: 0.9rem !important; /* Force smaller, more refined font-size for navigation links */
    color: #cbd5e0 !important; /* Force color */
    font-weight: 500; /* Equivalent to font-medium */
    transition: color 300ms ease, background-color 300ms ease;
    padding: 0.35rem 0.6rem !important; /* Force adjusted padding for a more compact "box" size */
    border-radius: 0.375rem !important; /* Force slightly rounded corners */
    text-decoration: none !important; /* Remove underline from Simple.css default link style */
    display: block !important; /* Ensure padding applies correctly and occupies full space */
    white-space: nowrap; /* Prevent individual nav links from wrapping */
    line-height: 1.2 !important; /* Force line-height for better vertical centering within the box */
}

header nav ul li a:hover {
    color: #38bdf8 !important; /* Force hover color */
    background-color: rgba(56, 189, 248, 0.1) !important; /* Force subtle background for hover state */
}

/* Hero Section styles */
#hero-section {
    background: linear-gradient(to right, #2d3748, #0e1217); /* Equivalent to bg-gradient-to-r from-gray-800 to-gray-950 */
    text-align: center;
    padding: 5rem 0; /* Equivalent to py-20 */
    border-bottom-left-radius: 2rem; /* Equivalent to rounded-b-3xl */
    border-bottom-right-radius: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Equivalent to shadow-xl */
}

#hero-section > div { /* Targeting the inner container */
    max-width: 1024px; /* Equivalent to container mx-auto */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* Equivalent to px-4 */
    padding-right: 1rem;
}

@media (min-width: 768px) {
    #hero-section {
        padding: 8rem 0; /* Equivalent to md:py-32 */
    }
}

#hero-section h1 {
    font-size: 3rem; /* Equivalent to text-5xl */
    font-weight: 800; /* Equivalent to font-extrabold */
    color: #fff; /* Equivalent to text-white */
    line-height: 1.25; /* Equivalent to leading-tight */
    margin-bottom: 1.5rem; /* Equivalent to mb-6 */
    animation: pulseFade 3s infinite ease-in-out;
}

@media (min-width: 768px) {
    #hero-section h1 {
        font-size: 4.5rem; /* Equivalent to md:text-7xl */
    }
}

#hero-section p {
    font-size: 1.25rem; /* Equivalent to text-xl */
    color: #cbd5e0; /* Equivalent to text-gray-300 */
    margin-bottom: 2.5rem; /* Equivalent to mb-10 */
    max-width: 48rem; /* Equivalent to max-w-3xl */
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    #hero-section p {
        font-size: 1.5rem; /* Equivalent to md:text-2xl */
    }
}

#hero-section a { /* Targeting the button link */
    background-color: #0d9488; /* Equivalent to bg-sky-600 */
    color: #fff; /* Equivalent to text-white */
    font-weight: 700; /* Equivalent to font-bold */
    padding: 1rem 2rem; /* Equivalent to py-4 px-8 */
    border-radius: 9999px; /* Equivalent to rounded-full */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Equivalent to shadow-lg */
    transition: all 300ms ease;
    display: inline-block; /* Ensure padding works correctly */
    text-decoration: none; /* Remove underline from Simple.css */
}

#hero-section a:hover {
    background-color: #0f766e; /* Equivalent to hover:bg-sky-700 */
    transform: scale(1.05); /* Equivalent to hover:scale-105 */
}

/* Post-Quantum Cryptography Section */
#pqc {
    padding: 4rem 0; /* Equivalent to py-16 */
    background-color: #1a202c; /* Equivalent to bg-gray-900 */
}

@media (min-width: 768px) {
    #pqc {
        padding: 6rem 0; /* Equivalent to md:py-24 */
    }
}

#pqc h2 {
    font-size: 2.25rem; /* Equivalent to text-4xl */
    font-weight: 700; /* Equivalent to font-bold */
    color: #38bdf8; /* Equivalent to text-sky-400 */
    margin-bottom: 3rem; /* Equivalent to mb-12 */
    text-align: center;
}

@media (min-width: 768px) {
    #pqc h2 {
        font-size: 3rem; /* Equivalent to md:text-5xl */
    }
}

#pqc .pqc-grid { /* Custom class for grid layout */
    display: grid;
    grid-template-columns: 1fr; /* Single column by default */
    gap: 2.5rem; /* Equivalent to gap-10 */
    max-width: 1024px; /* Equivalent to max-w-5xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* Equivalent to px-4 */
    padding-right: 1rem;
}

@media (min-width: 768px) {
    #pqc .pqc-grid {
        grid-template-columns: repeat(2, 1fr); /* Two columns on medium screens and up */
    }
}

#pqc .pqc-grid > div { /* Targeting the individual cards */
    background-color: #2d3748; /* Equivalent to bg-gray-800 */
    padding: 2rem; /* Equivalent to p-8 */
    border-radius: 1rem; /* Equivalent to rounded-2xl */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Equivalent to shadow-xl */
    border: 1px solid #4a5568; /* Equivalent to border border-gray-700 */
    transition: all 300ms ease;
}

#pqc .pqc-grid > div:hover {
    border-color: #0ea5e9; /* Equivalent to hover:border-sky-500 */
    transform: scale(1.02); /* Custom scale for hover */
}

#pqc .pqc-grid h3 {
    font-size: 1.5rem; /* Equivalent to text-2xl */
    font-weight: 600; /* Equivalent to font-semibold */
    color: #fff; /* Equivalent to text-white */
    margin-bottom: 1rem; /* Equivalent to mb-4 */
}

#pqc .pqc-grid p {
    color: #cbd5e0; /* Equivalent to text-gray-300 */
    line-height: 1.625; /* Equivalent to leading-relaxed */
    text-align: left; /* Adjust from Simple.css default */
}

/* Unrivaled Cybersecurity Section */
#security {
    padding: 4rem 0; /* Equivalent to py-16 */
    background-color: #242a38; /* Slightly different gray from bg-gray-850 */
}

@media (min-width: 768px) {
    #security {
        padding: 6rem 0; /* Equivalent to md:py-24 */
    }
}

#security h2 {
    font-size: 2.25rem; /* Equivalent to text-4xl */
    font-weight: 700; /* Equivalent to font-bold */
    color: #38bdf8; /* Equivalent to text-sky-400 */
    margin-bottom: 3rem; /* Equivalent to mb-12 */
    text-align: center;
}

@media (min-width: 768px) {
    #security h2 {
        font-size: 3rem; /* Equivalent to md:text-5xl */
    }
}

#security .security-grid { /* Custom class for grid layout */
    display: grid;
    grid-template-columns: 1fr; /* Single column by default */
    gap: 2rem; /* Equivalent to gap-8 */
    max-width: 1024px; /* Equivalent to max-w-5xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* Equivalent to px-4 */
    padding-right: 1rem;
}

@media (min-width: 768px) {
    #security .security-grid {
        grid-template-columns: repeat(3, 1fr); /* Three columns on medium screens and up */
    }
}

#security .security-grid > div { /* Targeting the individual cards */
    background-color: #1a202c; /* Equivalent to bg-gray-900 */
    padding: 1.5rem; /* Equivalent to p-6 */
    border-radius: 1rem; /* Equivalent to rounded-2xl */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Equivalent to shadow-lg */
    border: 1px solid #4a5568; /* Equivalent to border border-gray-700 */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    text-align: center;
}

#security .security-grid > div svg {
    display: block; /* Ensures width/height behave predictably */
    width: 4rem; /* Explicitly set width */
    height: 4rem; /* Explicitly set height */
    color: #38bdf8; /* Equivalent to text-sky-400 */
    margin-bottom: 1rem; /* Equivalent to mb-4 */
    margin-left: auto; /* Center SVG if parent is text-align: center */
    margin-right: auto; /* Center SVG if parent is text-align: center */
}

#security .security-grid > div h3 {
    font-size: 1.25rem; /* Equivalent to text-xl */
    font-weight: 600; /* Equivalent to font-semibold */
    color: #fff; /* Equivalent to text-white */
    margin-bottom: 0.5rem; /* Equivalent to mb-2 */
}

#security .security-grid > div p {
    color: #a0aec0; /* Equivalent to text-gray-400 */
    text-align: center; /* Ensure paragraphs are centered within cards */
}

/* Call to Action / Contact Section */
#contact {
    padding: 4rem 0; /* Equivalent to py-16 */
    background: linear-gradient(to right, #0e1217, #2d3748); /* Equivalent to bg-gradient-to-r from-gray-950 to-gray-800 */
    text-align: center;
    border-top-left-radius: 2rem; /* Equivalent to rounded-t-3xl */
    border-top-right-radius: 2rem;
    box-shadow: 0 -10px 15px -3px rgba(0, 0, 0, 0.1), 0 -4px 6px -2px rgba(0, 0, 0, 0.05); /* Equivalent to shadow-xl */
}

@media (min-width: 768px) {
    #contact {
        padding: 6rem 0; /* Equivalent to md:py-24 */
    }
}

#contact h2 {
    font-size: 2.25rem; /* Equivalent to text-4xl */
    font-weight: 700; /* Equivalent to font-bold */
    color: #fff; /* Equivalent to text-white */
    margin-bottom: 2rem; /* Equivalent to mb-8 */
}

@media (min-width: 768px) {
    #contact h2 {
        font-size: 3rem; /* Equivalent to md:text-5xl */
    }
}

#contact p {
    font-size: 1.25rem; /* Equivalent to text-xl */
    color: #cbd5e0; /* Equivalent to text-gray-300 */
    margin-bottom: 2.5rem; /* Equivalent to mb-10 */
    max-width: 42rem; /* Equivalent to max-w-2xl */
    margin-left: auto;
    margin-right: auto;
}

#contact a { /* Targeting the button link */
    background-color: #0ea5e9; /* Equivalent to bg-sky-500 */
    color: #fff; /* Equivalent to text-white */
    font-weight: 700; /* Equivalent to font-bold */
    padding: 1rem 2.5rem; /* Equivalent to py-4 px-10 */
    border-radius: 9999px; /* Equivalent to rounded-full */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Equivalent to shadow-lg */
    transition: all 300ms ease;
    display: inline-block; /* Ensure padding works correctly */
    text-decoration: none; /* Remove underline from Simple.css */
}

#contact a:hover {
    background-color: #0284c7; /* Equivalent to hover:bg-sky-600 */
    transform: scale(1.05); /* Equivalent to hover:scale-105 */
}


/* Footer Section */
footer {
    background-color: #0e1217; /* Equivalent to bg-gray-950 */
    padding: 1.5rem; /* Equivalent to p-6 */
    text-align: center;
    color: #a0aec0; /* Equivalent to text-gray-400 */
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); /* Equivalent to shadow-inner */
}

footer p {
    margin: 0; /* Remove default paragraph margin */
}

/* Animations */
@keyframes pulseFade {
    0% {
        opacity: 0.7;
        transform: scale(0.98);
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
    }
    100% {
        opacity: 0.7;
        transform: scale(0.98);
    }
}

#hero-section h1 {
    animation: pulseFade 3s infinite ease-in-out;
}
