/* ============================================
   RAGA TEX INDIA - MAIN STYLESHEET
   ============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES (Variables)
   Based on RagaTex Brand Identity
   ============================================ */
:root {
    /* RagaTex Maroon/Burgundy Primary Palette */
    --maroon-50: #fdf2f2;
    --maroon-100: #fce4e4;
    --maroon-200: #f9c9c9;
    --maroon-300: #f3a1a1;
    --maroon-400: #e86b6b;
    --maroon-500: #d94545;
    --maroon-600: #b82828;
    --maroon-700: #8B1A1A;  /* Primary brand maroon */
    --maroon-800: #751818;
    --maroon-900: #631717;
    --maroon-950: #360909;

    /* RagaTex Gold Accent Palette */
    --gold-300: #e6c84d;
    --gold-400: #C9A227;  /* Primary brand gold */
    --gold-500: #b08d1f;
    --gold-600: #977818;
    --gold-700: #7a5f13;

    /* Neutral/Charcoal Palette (for text) */
    --charcoal-50: #f9f9f9;
    --charcoal-100: #f3f3f3;
    --charcoal-200: #e5e5e5;
    --charcoal-300: #d4d4d4;
    --charcoal-400: #a3a3a3;
    --charcoal-500: #737373;
    --charcoal-600: #525252;
    --charcoal-700: #404040;
    --charcoal-800: #333333;  /* Primary text color */
    --charcoal-900: #1a1a1a;

    /* Warm Neutrals (from handout imagery) */
    --warm-50: #fefcf9;
    --warm-100: #fdf8f0;
    --warm-200: #f5ebe0;
    --warm-300: #e8dcc8;

    /* Legacy support - map old navy vars to new palette */
    --navy-50: var(--charcoal-50);
    --navy-100: var(--charcoal-100);
    --navy-200: var(--charcoal-200);
    --navy-300: var(--charcoal-300);
    --navy-400: var(--charcoal-400);
    --navy-500: var(--charcoal-500);
    --navy-600: var(--charcoal-600);
    --navy-700: var(--charcoal-700);
    --navy-800: var(--charcoal-800);
    --navy-900: var(--charcoal-900);

    /* Typography */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;

    /* Spacing */
    --header-height: 80px;
}

/* ============================================
   BASE STYLES
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--navy-900);
    background-color: #ffffff;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   ANIMATIONS
   ============================================ */

/* Fade In from Bottom */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade In from Left */
.fade-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Fade In from Right */
.fade-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ============================================
   TEXTURES & PATTERNS
   ============================================ */

/* Subtle texture overlay */
.texture-overlay {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Weave pattern for textile sections */
.weave-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23C9A227' fill-opacity='0.05' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}

/* ============================================
   HEADER STYLES
   ============================================ */
.header-scrolled {
    background-color: rgba(51, 51, 51, 0.98) !important;  /* RagaTex Charcoal */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Mobile menu animation */
.mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.mobile-menu.open {
    max-height: 500px;
}

/* ============================================
   CARD STYLES
   ============================================ */

/* Capability cards hover effect */
.capability-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.capability-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

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

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
}

.product-card.hidden {
    display: none;
}

/* Spec cards */
.spec-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.spec-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.15);
}

/* Certification cards */
.cert-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cert-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.15);
}

/* ============================================
   SLIDER STYLES
   ============================================ */
.slider-container {
    overflow: hidden;
}

.slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

/* ============================================
   FILTER BUTTONS
   ============================================ */
.filter-btn.active {
    background-color: var(--gold-400);
    color: var(--charcoal-900);
    border-color: var(--gold-400);
}

/* ============================================
   MODAL STYLES
   ============================================ */
.modal {
    display: none;
}

.modal.open {
    display: flex;
}

/* ============================================
   GRADIENT UTILITIES
   ============================================ */
.gold-gradient {
    background: linear-gradient(135deg, #C9A227 0%, #e6c84d 50%, #C9A227 100%);
}

.maroon-gradient {
    background: linear-gradient(135deg, #8B1A1A 0%, #b82828 50%, #8B1A1A 100%);
}

/* ============================================
   FORM STYLES
   ============================================ */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--gold-400);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.15);
}

/* ============================================
   BUTTON STYLES
   ============================================ */
.btn-primary {
    background-color: var(--gold-400);
    color: var(--charcoal-900);
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-family: var(--font-heading);
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--gold-500);
    box-shadow: 0 10px 20px -5px rgba(201, 162, 39, 0.3);
}

.btn-gold {
    background-color: var(--gold-400);
    color: var(--charcoal-900);
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-family: var(--font-heading);
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-gold:hover {
    background-color: var(--gold-500);
    box-shadow: 0 10px 20px -5px rgba(201, 162, 39, 0.3);
}

.btn-secondary {
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-family: var(--font-heading);
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    border-color: var(--gold-400);
    color: var(--gold-400);
}

/* ============================================
   FAQ ACCORDION
   ============================================ */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.faq-content.open {
    max-height: 500px;
}

.faq-icon {
    transition: transform 0.3s ease;
}

.faq-icon.rotate-180 {
    transform: rotate(180deg);
}

/* ============================================
   SCROLL INDICATOR ANIMATION
   ============================================ */
@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

.animate-bounce {
    animation: bounce 1s infinite;
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */
@media (max-width: 768px) {
    .mobile-only {
        display: block;
    }

    .desktop-only {
        display: none;
    }
}

@media (min-width: 769px) {
    .mobile-only {
        display: none;
    }

    .desktop-only {
        display: block;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .no-print {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }
}