/* ArticTherm Theme - Shared Styles */
/* This file contains all the common styles, colors, and utilities used across the site */

/* Tailwind CSS Custom Configuration */
/* This should be included in the <script> tag of each page */

/* Color Palette */
:root {
    /* Steel Colors */
    --steel-50: #f8fafc;
    --steel-100: #f1f5f9;
    --steel-200: #e2e8f0;
    --steel-300: #cbd5e1;
    --steel-400: #94a3b8;
    --steel-500: #64748b;
    --steel-600: #475569;
    --steel-700: #334155;
    --steel-800: #1e293b;
    --steel-900: #0f172a;

    /* Crimson Colors */
    --crimson-50: #fef2f2;
    --crimson-100: #fee2e2;
    --crimson-200: #fecaca;
    --crimson-300: #fca5a5;
    --crimson-400: #f87171;
    --crimson-500: #ef4444;
    --crimson-600: #dc2626;
    --crimson-700: #b91c1c;
    --crimson-800: #991b1b;
    --crimson-900: #7f1d1d;

    /* Brass Colors */
    --brass-50: #fffbeb;
    --brass-100: #fef3c7;
    --brass-200: #fde68a;
    --brass-300: #fcd34d;
    --brass-400: #fbbf24;
    --brass-500: #f59e0b;
    --brass-600: #d97706;
    --brass-700: #b45309;
    --brass-800: #92400e;
    --brass-900: #78350f;

    /* Iron Colors (same as steel) */
    --iron-50: #f8fafc;
    --iron-100: #f1f5f9;
    --iron-200: #e2e8f0;
    --iron-300: #cbd5e1;
    --iron-400: #94a3b8;
    --iron-500: #64748b;
    --iron-600: #475569;
    --iron-700: #334155;
    --iron-800: #1e293b;
    --iron-900: #0f172a;

    /* Silver Colors (same as steel) */
    --silver-50: #f8fafc;
    --silver-100: #f1f5f9;
    --silver-200: #e2e8f0;
    --silver-300: #cbd5e1;
    --silver-400: #94a3b8;
    --silver-500: #64748b;
    --silver-600: #475569;
    --silver-700: #334155;
    --silver-800: #1e293b;
    --silver-900: #0f172a;
}

/* Common CSS Classes */
.brutal-pattern {
    background-image:
        linear-gradient(45deg, rgba(220, 38, 38, 0.15) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(220, 38, 38, 0.15) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(220, 38, 38, 0.15) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(220, 38, 38, 0.15) 75%);
    background-size: 40px 40px;
    background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
}

.steel-texture {
    background: linear-gradient(45deg, #0f172a 0%, #1e293b 25%, #334155 50%, #1e293b 75%, #0f172a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.crimson-texture {
    background: linear-gradient(45deg, #dc2626 0%, #ef4444 25%, #f87171 50%, #ef4444 75%, #dc2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.silver-texture {
    background: linear-gradient(45deg, #64748b 0%, #94a3b8 25%, #cbd5e1 50%, #94a3b8 75%, #64748b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.brutal-shadow {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(242, 140, 15, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.steel-border {
    border-image: none !important;
    -webkit-border-image: none !important;
    border: 2px solid #64748b !important;
    border-radius: inherit !important;
    -webkit-border-radius: inherit !important;
    -moz-border-radius: inherit !important;
}

.brutal-button {
    background: linear-gradient(45deg, #dc2626 0%, #ef4444 25%, #f87171 50%, #ef4444 75%, #dc2626 100%);
    border: 2px solid #b91c1c;
    box-shadow: 0 8px 16px rgba(220, 38, 38, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.brutal-button:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 12px 24px rgba(220, 38, 38, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.steel-button {
    background: linear-gradient(45deg, #1e293b 0%, #334155 25%, #475569 50%, #334155 75%, #1e293b 100%);
    border: 2px solid #64748b;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.steel-button:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.brutal-text {
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.brutal-heading {
    font-family: 'Orbitron', monospace;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.industrial-heading {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.body-text {
    font-family: 'Exo 2', sans-serif;
    font-weight: 500;
}

.nav-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.nav-hover:hover {
    transform: translateY(-3px) scale(1.05);
    text-shadow: 0 4px 8px rgba(242, 140, 15, 0.4);
}

.hover-lift {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(220, 38, 38, 0.3);
}

.text-glow {
    text-shadow: 0 0 10px rgba(220, 38, 38, 0.5), 0 0 20px rgba(220, 38, 38, 0.3);
}

.border-glow {
    border: 2px solid;
    border-image: linear-gradient(45deg, #dc2626, #ef4444, #f87171, #ef4444, #dc2626) 1;
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.3);
}

/* Animations */
@keyframes fade-in-up {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* Status Colors */
.status-available {
    color: #10b981;
}

.status-rented {
    color: #f59e0b;
}

.status-maintenance {
    color: #ef4444;
}

.status-published {
    color: #10b981;
}

/* Star Rating */
.star-rating {
    color: #fbbf24;
}

/* Gallery and Masonry Layout Styles */
.masonry-gallery {
    column-gap: 1.5rem;
}

.gallery-item {
    break-inside: avoid;
    margin-bottom: 1.5rem;
}

.aspect-w-4 {
    position: relative;
    padding-bottom: 75%;
    /* 4:3 aspect ratio */
}

.aspect-h-3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.aspect-w-16 {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
}

.aspect-h-9 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Lightbox Styles */
#lightbox-modal {
    backdrop-filter: blur(4px);
}

#lightbox-modal img {
    border-radius: 0.5rem;
}

/* Gallery Hover Effects */
.gallery-item:hover .brutal-shadow {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
}

/* Global Card Styles - Rounded Corners for ALL Cards - NO EXCEPTIONS */
/* Target any element that could be a card */
[class*="card"],
.spec-card,
.safety-card,
.contact-card,
.quote-category-card,
.testimonial-card,
.card-hover,
div.brutal-shadow,
div[class*="brutal-shadow"],
div.steel-border,
div[class*="steel-border"],
div.brutal-shadow[class*="bg-steel"],
div[class*="brutal-shadow"][class*="bg-steel"],
div[class*="bg-steel"][class*="brutal-shadow"],
div[class*="bg-steel-800"],
div[class*="bg-steel-900"] {
    border-radius: 1rem !important;
}

/* Ensure overflow hidden doesn't break shadows */
div.brutal-shadow,
div[class*="brutal-shadow"] {
    overflow: visible !important;
}

/* Steel border must follow parent's border radius */
.steel-border {
    border-radius: inherit !important;
}

/* Force rounded corners on all divs with backdrop-blur (common card pattern) */
div[class*="backdrop-blur"] {
    border-radius: 1rem !important;
}

/* Ultra-specific targeting for common card patterns - highest priority */
div.brutal-shadow.bg-steel-800\/50,
div.brutal-shadow.bg-steel-800\/60,
div.brutal-shadow.bg-steel-800\/90,
div.brutal-shadow.bg-steel-900\/60,
div.brutal-shadow.bg-steel-900\/90,
div[class*="brutal-shadow"][class*="bg-steel-800"],
div[class*="brutal-shadow"][class*="bg-steel-900"] {
    border-radius: 1rem !important;
    -webkit-border-radius: 1rem !important;
    -moz-border-radius: 1rem !important;
}

/* Force all elements with rounded-2xl to actually have rounded corners */
.rounded-2xl,
[class*="rounded-2xl"] {
    border-radius: 1rem !important;
    -webkit-border-radius: 1rem !important;
    -moz-border-radius: 1rem !important;
}

/* Responsive Utilities */
@media (max-width: 768px) {
    .brutal-heading {
        font-size: 1.5rem;
    }

    .industrial-heading {
        font-size: 1.25rem;
    }
}