/* wwwroot/css/premium.css */

:root {
    --brand-primary: #960000; /* Elite Red */
    --brand-primary-hover: #7a0000; /* Darker Red for hover */
    --brand-secondary: #808080; /* Professional Grey */
    --brand-light: #f8f9fa; /* Off-white background */
    --brand-dark: #212529; /* Dark text */
    /* Layout Dimensions for Fixed Positioning */
    --header-height: 106px; /* Combined height of TopBar (40px) + Navbar (66px) */
    --footer-height: 60px;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: var(--brand-light);
    color: var(--brand-dark);
    /* Critical padding to prevent content from hiding behind fixed elements */
    padding-top: var(--header-height);
    padding-bottom: var(--footer-height);
    min-height: 100vh;
}

/* =========================================
   1. FIXED HEADER & NAVIGATION
   ========================================= */

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: all 0.3s ease-in-out;
}

/* --- Top Utility Bar --- */
.top-bar {
    background-color: var(--brand-dark);
    color: #fff;
    font-size: 0.85rem;
    height: 40px;
    display: flex;
    align-items: center;
    transition: height 0.3s ease, opacity 0.3s ease;
}

    .top-bar a {
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        transition: color 0.2s;
        margin-left: 1rem;
        font-weight: 500;
    }

        .top-bar a:hover {
            color: #fff;
            text-decoration: underline;
        }

.top-bar-contact i {
    color: var(--brand-primary);
    margin-right: 5px;
}

/* --- Main Navbar --- */
.navbar {
    background-color: #fff !important;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* Navbar Brand Animation */
.navbar-brand {
    font-weight: 700;
    color: var(--brand-primary) !important;
    font-size: 1.5rem;
    letter-spacing: -0.5px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Animation Properties */
    max-width: 300px;
    opacity: 1;
    overflow: hidden;
    white-space: nowrap;
}

/* SCROLLED STATE: Hide Brand */
header.scrolled .navbar-brand {
    max-width: 0;
    padding: 0;
    margin: 0;
    opacity: 0;
}

/* Navigation Links */
.navbar-nav .nav-link {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-dark) !important;
    margin-right: 1.5rem;
    transition: color 0.2s;
}

    .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
        color: var(--brand-primary) !important;
    }

/* =========================================
   2. FIXED FOOTER
   ========================================= */

footer.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--footer-height);
    background-color: #fff;
    border-top: 1px solid #eaeaea;
    color: var(--brand-secondary);
    z-index: 1030;
    display: flex;
    align-items: center;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.03);
}

footer a {
    color: var(--brand-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

    footer a:hover {
        color: var(--brand-primary);
        text-decoration: underline;
    }

/* =========================================
   3. COMPONENTS (Buttons, Cards, Utils)
   ========================================= */

/* Primary Button (Red) */
.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    transition: all 0.3s ease;
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
        background-color: var(--brand-primary-hover) !important;
        border-color: var(--brand-primary-hover) !important;
        box-shadow: 0 4px 12px rgba(150, 0, 0, 0.25);
    }

/* Outline Secondary Button (Grey) */
.btn-outline-secondary {
    color: var(--brand-secondary);
    border-color: var(--brand-secondary);
}

    .btn-outline-secondary:hover {
        background-color: var(--brand-secondary);
        color: white;
    }

/* Utilities */
.text-primary {
    color: var(--brand-primary) !important;
}

.bg-primary {
    background-color: var(--brand-primary) !important;
}

    .bg-primary.bg-gradient {
        background: linear-gradient(135deg, var(--brand-primary) 0%, #c41e1e 100%) !important;
    }

/* Cards */
.card {
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
    background-color: #fff;
}

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
    }