/* public/frontend/css/theme.css */
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #f8fafc; /* Default body background (slate-50) */
    color: #1e293b; /* Default text color (slate-800) */
    line-height: 1.6; /* Default line height */
}

:root {
    --color-primary: #0D609B;
    --color-primary-hover: #0A4C7D;
    --color-secondary: #B08D57;
    --color-secondary-hover: #93703c;
    --color-text-primary: #1e293b;   /* slate-800 */
    --color-text-secondary: #475569; /* slate-600 */
    --color-text-light: #f8fafc;     /* slate-50 */
    --color-background-light: #ffffff;
    --color-background-muted: #f1f5f9; /* slate-100 */
    --color-background-dark: #0f172a;  /* slate-900 */
}

/* Common Navigation Link Styling */
.nav-link-alt { 
    position: relative; 
    padding-bottom: 0.3rem; 
    color: var(--color-text-secondary); 
    transition: color 0.3s ease; 
}
.nav-link-alt:hover { 
    color: var(--color-primary); 
}
.nav-link-alt::after { 
    content: ''; 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    bottom: 0; 
    width: 0; 
    height: 2px; 
    background-color: var(--color-primary); 
    transition: width 0.3s ease; 
}
.nav-link-alt:hover::after, 
.nav-link-alt.nav-link-alt-active::after { /* Added .nav-link-alt-active for Blade @if logic */
    width: 60%; 
}



    /* Rotates the chevron icon when the parent has the 'open' class */
    .nav-item-dropdown.open .dropdown-toggle i,
    .mobile-nav-item-dropdown.open .dropdown-toggle i {
        transform: rotate(180deg);
    }


   .nav-item-dropdown .dropdown-menu {
        opacity: 0;
        transform: translateY(10px);
        visibility: hidden;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    }
    .nav-item-dropdown.open .dropdown-menu {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
    }
    .nav-item-dropdown.open .dropdown-toggle i {
        transform: rotate(180deg);
    }

    .mobile-nav-link {
        display: block; padding: 0.75rem 1.25rem; /* py-3 px-5 */
        border-bottom: 1px solid #f1f5f9; /* slate-100 */
        font-weight: 500;
    }
    .mobile-nav-link:hover { background-color: #f8fafc; /* slate-50 */ }
    .mobile-nav-item-dropdown.open .dropdown-toggle i {
        transform: rotate(180deg);
    }

/* Common Section Titles */
.section-title { 
    color: var(--color-primary); 
    font-weight: 700; /* bold */
}
.section-subtitle { 
    color: var(--color-text-secondary); 
}

/* Common Button Styles (if you extract from Tailwind patterns) */
.cta-button-primary { 
    background-color: var(--color-secondary); 
    color: white; 
    transition: background-color 0.3s ease, transform 0.2s ease; 
    /* Add padding, border-radius etc. from Tailwind: 
       e.g., padding: 0.75rem 1.5rem; border-radius: 0.5rem; */
}
.cta-button-primary:hover { 
    background-color: var(--color-secondary-hover); 
    transform: translateY(-2px); 
}

.cta-button-outline { 
    border-color: var(--color-secondary); 
    color: var(--color-secondary); 
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease; 
    /* Add padding, border-radius etc. from Tailwind:
       e.g., padding: 0.75rem 1.5rem; border-radius: 0.5rem; border-width: 2px; */
}
.cta-button-outline:hover { 
    background-color: var(--color-secondary); 
    color: white; 
    transform: translateY(-2px); 
}


/* Example: Hero Section specific CTA outline */

.hero-section {
    background-color: var(--color-primary); /* Fallback */
    /* Suggestion: Use a high-quality, relevant background image */
    background-image: linear-gradient(rgba(13, 96, 155, 0.7), rgba(13, 96, 155, 0.7)), url('https://via.placeholder.com/1920x1080/cccccc/969696?text=Modern+Lab+or+Manufacturing+Facility');
    background-size: cover;
    background-position: center;
}


.hero-section .cta-button-outline { 
    border-color: white; 
    color: white; 
}
.hero-section .cta-button-outline:hover { 
    background-color: white; 
    color: var(--color-primary); 
}

/* Scroll Animations */
.animate-on-scroll { 
    opacity: 0; 
    transform: translateY(30px); 
    transition: opacity 0.7s ease-out, transform 0.7s ease-out; 
}
.animate-on-scroll.is-visible { 
    opacity: 1; 
    transform: translateY(0); 
}

/* Breadcrumbs (if you want a global style) */
.breadcrumb-link { 
    color: var(--color-text-secondary); 
    transition: color 0.3s ease; 
}
.breadcrumb-link:hover { 
    color: var(--color-primary); 
}
.breadcrumb-current { 
    color: var(--color-text-primary); 
    font-weight: 500; 
}

/* Add any other globally used custom component styles here */
/* For example, if you had specific card styles used on multiple pages: */
/*
.custom-card {
    background-color: var(--color-background-light);
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
}
*/

/* Specific styles from Home page that could be global or components */
.service-card-home { /* If used elsewhere, make it global */
    background-color: var(--color-background-light);
    border-left: 4px solid var(--color-secondary);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card-home:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.service-card-home .icon { color: var(--color-primary); }

.quality-logo img {
    height: 40px;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.quality-logo img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.testimonial-card { /* If used elsewhere */
    background-color: var(--color-background-light);
    border: 1px solid #e2e8f0; /* slate-200 */
}
.testimonial-card .quote-icon {
    color: var(--color-secondary);
}


/* In theme.css or layout styles */
.icon-feature { 
    /* background-color: rgba(13, 96, 155, 0.08); */ /* Example if cards themselves have this bg, or keep it white and rely on section bg */
    /* color: var(--color-primary); */ /* Icon color is handled inline now by style attribute on <i> */
    transition: all 0.3s ease;
}
.icon-feature:hover {
    /* background-color: var(--color-primary); */ /* Could make the whole card change bg */
    /* color: white; */
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.icon-feature .text-4xl i { /* Target the icon specifically if needed */
    color: var(--color-primary);
}
.icon-feature:hover .text-4xl i {
    /* color: white; */ /* If you want icon color to change with card bg on hover */
}