/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* CSS Custom Properties for ExxonMobil Brand Colors */
:root {
    --exxon-blue: hsl(224, 76%, 36%);
    --exxon-blue-hover: hsl(224, 76%, 31%);
    --exxon-light-blue: hsl(217, 91%, 60%);
    --gray-50: hsl(210, 40%, 98%);
    --gray-100: hsl(210, 40%, 96%);
    --gray-200: hsl(214, 32%, 91%);
    --gray-500: hsl(220, 9%, 46%);
    --gray-600: hsl(220, 14%, 36%);
    --gray-900: hsl(220, 39%, 11%);
    --card-shadow: hsla(0, 0%, 0%, 0.1);
    --featured-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

/* Global Styles */
body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, var(--gray-50) 0%, #f8fafc 100%);
    color: var(--gray-900);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Mobile-First Responsive Typography */
html {
    font-size: clamp(14px, 2.5vw, 16px);
}

/* Typography scales */
.dashboard-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.2;
}

.dashboard-subtitle {
    font-size: clamp(0.875rem, 2vw, 1rem);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
h4 { font-size: clamp(1.125rem, 2.5vw, 1.5rem); }
h5 { font-size: clamp(1rem, 2vw, 1.25rem); }
h6 { font-size: clamp(0.875rem, 1.5vw, 1rem); }

/* Body text */
body {
    font-size: clamp(0.875rem, 2vw, 1rem);
    line-height: 1.6;
}

p, .text-base {
    font-size: clamp(0.875rem, 2vw, 1rem);
}

.text-sm { font-size: clamp(0.75rem, 1.5vw, 0.875rem); }
.text-lg { font-size: clamp(1rem, 2.5vw, 1.125rem); }
.text-xl { font-size: clamp(1.125rem, 3vw, 1.25rem); }

.text-exxon-blue {
    color: var(--exxon-blue) !important;
}

/* Mobile-First Touch-Friendly Button Styles */
.btn-exxon-blue {
    background-color: var(--exxon-blue);
    border-color: var(--exxon-blue);
    color: white;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    border-radius: 0.5rem;
    padding: 0.875rem 1.5rem; /* Minimum 44px touch target */
    min-height: 44px;
    min-width: 44px;
    font-size: clamp(0.875rem, 2vw, 1rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-exxon-blue:hover {
    background-color: var(--exxon-blue-hover);
    border-color: var(--exxon-blue-hover);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.btn-exxon-blue:focus {
    background-color: var(--exxon-blue-hover);
    border-color: var(--exxon-blue-hover);
    color: white;
    box-shadow: 0 0 0 0.25rem rgba(30, 64, 175, 0.25);
}

.btn-exxon-blue:active {
    background-color: var(--exxon-blue-hover);
    border-color: var(--exxon-blue-hover);
    color: white;
}

/* Mobile-First Delivery Cards */
.delivery-card {
    transition: all 0.3s ease-in-out;
    border: none;
    border-radius: 1rem;
    background: white;
    overflow: hidden;
    width: 100%;
    min-height: 44px; /* Touch target */
}

.delivery-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.delivery-card .card-body {
    background: white;
    position: relative;
}

/* Responsive Card Image Styling */
.card-img-container {
    height: clamp(180px, 25vw, 220px);
    overflow: hidden;
    position: relative;
    width: 100%;
}

.delivery-card-image {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.delivery-card:hover .delivery-card-image {
    transform: scale(1.05);
}

.card-img-overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.05) 100%);
    pointer-events: none;
}

/* Featured Card Styles */
.featured-card {
    background: var(--featured-gradient);
    border: 2px solid var(--exxon-blue) !important;
    position: relative;
}

.featured-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 32px 64px -12px rgba(0, 0, 0, 0.2), 0 16px 32px -8px rgba(0, 0, 0, 0.15);
}

.card-img-container-featured {
    height: 280px;
    overflow: hidden;
    position: relative;
}

.badge-container {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 10;
}

.featured-badge {
    background-color: var(--exxon-blue) !important;
    color: white;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.bg-exxon-blue {
    background-color: var(--exxon-blue) !important;
}

/* Modern Header Styles */
header {
    background: linear-gradient(135deg, white 0%, #fafbfc 100%);
    border-bottom: 1px solid var(--gray-200);
    backdrop-filter: blur(10px);
}

/* Responsive Exxon Logo Styling */
.exxon-logo {
    height: 125px !important;
    width: auto !important;
    max-width: 200px !important;
    min-height: 125px !important;
    object-fit: contain;
    transition: transform 0.2s ease-in-out;
    display: block !important;
}

.exxon-logo:hover {
    transform: scale(1.05);
}

.exxon-logo-small {
    height: 40px;
    width: auto;
    max-width: 60px;
    object-fit: contain;
}

/* Footer Styles */
footer {
    background: white;
    border-top: 1px solid var(--gray-200);
    margin-top: auto;
}


/* Mobile-First Responsive Grid System */
/* Single column by default (mobile) */
.responsive-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
}

/* Two columns on small tablets (576px+) */
@media (min-width: 576px) {
    .responsive-grid-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

/* Three columns on tablets (768px+) */
@media (min-width: 768px) {
    .responsive-grid-3 {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
    
    .header-content {
        flex: 1;
    }
    
    .header-logo {
        margin-left: 2rem;
    }
}

/* Four columns on desktop (1024px+) */
@media (min-width: 1024px) {
    .responsive-grid-4 {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
}

/* Mobile styles (320px and up) */
@media (min-width: 320px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .delivery-card .card-body {
        padding: 1rem;
    }
    
    /* Stack header elements on very small screens */
    .header-content {
        margin-bottom: 1rem;
    }
    
    .header-logo {
        align-self: flex-end;
    }
}

/* Small mobile (375px and up) */
@media (min-width: 375px) {
    .delivery-card .card-body {
        padding: 1.25rem;
    }
}

/* Large mobile/small tablet (576px and up) */
@media (min-width: 576px) {
    .header-content {
        margin-bottom: 0;
    }
}

/* Tablet (768px and up) */
@media (min-width: 768px) {
    .delivery-card .card-body {
        padding: 1.5rem;
    }
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    .delivery-card .card-body {
        padding: 2rem;
    }
}

/* Large desktop (1440px and up) */
@media (min-width: 1440px) {
    .container {
        max-width: 1320px;
    }
}

@media (min-width: 1200px) {
    .card-img-container {
        height: 220px;
    }
    
    .exxon-logo {
        height: 80px;
        max-width: 125px;
    }
}

/* Accessibility Enhancements */
.delivery-card:focus-within,
.delivery-card.focused,
.dashboard-card.focused {
    outline: 3px solid var(--exxon-blue);
    outline-offset: 2px;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -5px rgba(30, 64, 175, 0.15);
}

/* Skip link styling */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .delivery-card {
        border: 2px solid var(--gray-900);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .delivery-card,
    .btn-exxon-blue {
        transition: none;
    }
    
    .delivery-card:hover {
        transform: none;
    }
    
    .btn-exxon-blue:hover {
        transform: none;
    }
}

/* Custom Bootstrap overrides */
.bg-light {
    background-color: var(--gray-50) !important;
}

.text-muted {
    color: var(--gray-600) !important;
}

.border-bottom {
    border-bottom: 1px solid var(--gray-200) !important;
}

.border-top {
    border-top: 1px solid var(--gray-200) !important;
}

.shadow-sm {
    box-shadow: 0 1px 2px 0 var(--card-shadow) !important;
}