/* 
 * Novagent Lab Systems — Global Styles (style.css)
 * CFML SCOPE SAFETY: All overrides under .pl-page or .pl-* prefix
 */

/* =========================================
   CSS CUSTOM PROPERTIES
   ========================================= */
:root {
    --pl-primary: #F58220;
    --pl-primary-hover: #D66E15;
    --pl-secondary: #f1f3f4;
    --pl-dark: #202124;
    --pl-light: #F8F9FA;
    --pl-border: #EAEAEA;
    --pl-text: #5f6368;
    --pl-font-family: 'Inter', sans-serif;
    --pl-radius: 12px;
    --pl-radius-lg: 24px;

    /* FIX #2: Override Bootstrap 5 CSS variables so orange buttons don't get blue borders */
    --bs-btn-border-color: transparent;
    --bs-link-color: var(--pl-primary);
    --bs-link-hover-color: var(--pl-primary-hover);
}

/* =========================================
   PAGE WRAPPER — CFML scope root
   ========================================= */
.pl-page {
    font-family: var(--pl-font-family);
    color: var(--pl-text);
    background-color: #FAFAFB;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
    /* FIX #3: Prevent horizontal page overflow on all devices */
    overflow-x: hidden;
}

/* Scoped typography */
.pl-page p {
    line-height: 1.7;
    color: var(--pl-text);
}

.pl-page h1,
.pl-page h2,
.pl-page h3,
.pl-page h4,
.pl-page h5,
.pl-page h6 {
    color: var(--pl-dark);
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Scoped form inputs inside CTA forms */
.pl-expert-cta input.form-control,
.pl-expert-cta textarea.form-control,
.pl-expert-cta select.form-select,
.pl-page .pl-form-area input.form-control,
.pl-page .pl-form-area textarea.form-control {
    border-radius: var(--pl-radius) !important;
    padding: 0.75rem 1.2rem;
    background-color: var(--pl-secondary) !important;
    border: 2px solid transparent !important;
    transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.pl-expert-cta input.form-control:focus,
.pl-expert-cta textarea.form-control:focus,
.pl-expert-cta select.form-select:focus,
.pl-page .pl-form-area input.form-control:focus,
.pl-page .pl-form-area textarea.form-control:focus {
    background-color: #ffffff !important;
    border-color: var(--pl-primary) !important;
    box-shadow: 0 0 0 4px rgba(245, 130, 32, 0.15) !important;
}

/* =========================================
   FIX #2: BUTTON BORDERS
   Bootstrap 5 uses CSS custom properties for
   border-color which override specificity.
   We must override the Bootstrap variables
   on the element itself via .pl-page scope.
   ========================================= */
.pl-page .btn {
    --bs-btn-border-color: transparent;
    --bs-btn-focus-shadow-rgb: 245, 130, 32;
    border: none !important;
    border-radius: 100px !important;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
}

/* Primary = orange, never blue */
.pl-page .btn-primary {
    --bs-btn-bg: var(--pl-primary);
    --bs-btn-border-color: var(--pl-primary);
    --bs-btn-hover-bg: var(--pl-primary-hover);
    --bs-btn-hover-border-color: var(--pl-primary-hover);
    --bs-btn-active-bg: var(--pl-primary-hover);
    --bs-btn-active-border-color: var(--pl-primary-hover);
    --bs-btn-focus-shadow-rgb: 245, 130, 32;
    background-color: var(--pl-primary) !important;
    border-color: var(--pl-primary) !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(245, 130, 32, 0.30);
}
.pl-page .btn-primary:hover,
.pl-page .btn-primary:focus,
.pl-page .btn-primary:active {
    background-color: var(--pl-primary-hover) !important;
    border-color: var(--pl-primary-hover) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(245, 130, 32, 0.40);
    transform: translateY(-2px);
    outline: none !important;
}

/* Secondary = light gray */
.pl-page .btn-secondary {
    --bs-btn-bg: var(--pl-secondary);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    background-color: var(--pl-secondary) !important;
    border-color: transparent !important;
    color: var(--pl-dark) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.pl-page .btn-secondary:hover,
.pl-page .btn-secondary:focus {
    background-color: #e8eaed !important;
    border-color: transparent !important;
    color: var(--pl-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    outline: none !important;
}

/* Remove focus outline ring that appears as blue */
.pl-page .btn:focus,
.pl-page .btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.35) !important;
}

/* =========================================
   COLOR & UTILITY OVERRIDES (scoped)
   ========================================= */
.pl-page .text-primary      { color: var(--pl-primary) !important; }
.pl-page .bg-primary        { background-color: var(--pl-primary) !important; }
.pl-page .border-primary    { border-color: var(--pl-primary) !important; }

/* Softer shadows */
.pl-page .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.02) !important; }
.pl-page .shadow    { box-shadow: 0 4px 12px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.03) !important; }
.pl-page .shadow-lg { box-shadow: 0 10px 30px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04) !important; }

/* Softer borders */
.pl-page .border,
.pl-page .border-bottom,
.pl-page .border-top,
.pl-page .border-start,
.pl-page .border-end {
    border-color: var(--pl-border) !important;
}

/* Rounded */
.pl-page .rounded-4 { border-radius: 20px !important; }

/* =========================================
   HEADER COMPONENT
   ========================================= */
.pl-header.sticky-top {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1030 !important;
}

.pl-header {
    background-color: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    transition: background-color 0.3s ease;
}

.pl-main-nav a {
    transition: color 0.2s ease;
    white-space: nowrap;
}
.pl-main-nav a:hover,
.pl-main-nav a:focus {
    color: var(--pl-primary) !important;
}

/* FIX #1: Mega Menu — responsive, no page overflow */
.pl-mega-menu {
    /* Let content wrap rather than overflow the screen */
    max-width: 100vw;
    overflow-x: hidden;
}
.pl-mega-menu a,
.pl-mega-menu h6 {
    white-space: nowrap;
}

/* =========================================
   UTILITY CLASSES (pl- prefixed)
   ========================================= */
.pl-transition-color { transition: color 0.2s ease-in-out; }
.pl-transition-color:hover { color: var(--pl-primary) !important; }

.pl-page .transition-color { transition: color 0.2s ease-in-out; }
.pl-page .transition-color:hover { color: var(--pl-primary) !important; }

.pl-hover-scale { transition: transform 0.3s ease; }
.pl-hover-scale:hover { transform: scale(1.03); }

.pl-page .hover-scale { transition: transform 0.3s ease; }
.pl-page .hover-scale:hover { transform: scale(1.03); }

/* =========================================
   CARD HOVER ANIMATIONS
   ========================================= */
.pl-widget-cat-card,
.pl-widget-blog-card {
    transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1),
                box-shadow 0.3s cubic-bezier(0.2, 0, 0, 1);
}
.pl-widget-cat-card:hover,
.pl-widget-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.06) !important;
}

/* =========================================
   FIX #3: RESPONSIVE GLOBAL HELPERS
   ========================================= */

/* Prevent horizontal scroll on mobile */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Ensure images never exceed their container */
.pl-page img {
    max-width: 100%;
    height: auto;
}

.pl-category-hero {
    background: linear-gradient(135deg, rgba(32,33,36,0.95) 0%, rgba(32,33,36,0.8) 100%),
                url('https://picsum.photos/1920/400?laboratory') center/cover;
    padding: 5rem 0;
    border-radius: 20px;
    margin-bottom: 3rem;
}
.sub-cat-badge {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: capitalize;
}
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -25px !important;
    margin-left: -25px !important;
}
.container_type3 {
    width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-right: auto !important;
    margin-left: auto !important;
}