/* ITN CMS - Frontend Styles */

:root {
    --itn-primary: var(--bs-primary, #0d6efd);
    --itn-dark: #1a1a2e;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #333;
}

/* Navbar */
.navbar-brand {
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

/* Hero */
.hero-section {
    position: relative;
    overflow: hidden;
}

.hero-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to top, #fff, transparent);
}

/* Product Cards */
.product-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.12) !important;
}

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

/* Section spacing */
section + section {
    border-top: 0;
}

/* Footer links */
footer a:hover {
    color: #fff !important;
}

/* Contact form */
#contactForm .form-control:focus {
    border-color: var(--itn-primary);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

/* Product description */
.product-description p {
    margin-bottom: 1rem;
    line-height: 1.7;
}

/* Breadcrumb */
.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
}

/* Responsive */
@media (max-width: 768px) {
    .hero-section {
        min-height: 400px !important;
    }

    .hero-section h1 {
        font-size: 1.75rem;
    }

    .hero-section .lead {
        font-size: 1rem;
    }
}

/* Animations */
@media (prefers-reduced-motion: no-preference) {
    .product-card,
    .card {
        transition: transform 0.2s ease;
    }
}