/* Increase Main Navbar Text Size */
.t4-megamenu .navbar-nav .nav-link,
.t4-navbar .navbar-nav .nav-link {
    font-size: 18px !important; /* Change 18px to whatever size looks best to you */
    font-weight: 500 !important; /* Optional: Makes it slightly sharper/bolder */
}


/* 1. Base link state - updated to include a hidden border and transition timer */
.navbar-nav .nav-link {
    color: #333333 !important;
    padding-bottom: 12px !important;
    /* Keeps a invisible 4px bar here so the text doesn't jitter when the real bar appears */
    border-bottom: 4px solid transparent !important;
    /* Smoothly fades both the text color and the line color over 0.3 seconds */
    transition: color 0.3s ease-in-out, border-bottom-color 0.3s ease-in-out !important;
}

/* 2. Active & Hover states - updated to smoothly morph the border color */
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item.current .nav-link,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.current,
.navbar-nav .nav-link:hover {
    color: #0c63b0 !important;
    /* Changes just the color of the border, triggering the smooth transition fade */
    border-bottom-color: #0c63b0 !important;
}

/* 1. Base styling for all feature blocks - IDLE STATE */
.feature-block-dark, .feature-block-light {
    position: relative;
    display: block;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 1;
    
    /* Crucial Update: z-index 0s 0.3s means: take 0 seconds to change, 
       but WAIT 0.3 seconds before doing it when mouse leaves. */
    transition: background-color 0.3s ease-in-out, 
                transform 0.3s ease-in-out, 
                box-shadow 0.3s ease-in-out, 
                z-index 0s 0.3s !important;
}

/* Remove the separation line from the very last block */
.col-md-3:last-child .feature-block-light,
.col-md-3:last-child .feature-block-dark {
    border-right: none;
}

/* Darker Blue Blocks Base Color */
.feature-block-dark {
    background-color: #1c456c;
}

/* Lighter Blue Blocks Base Color */
.feature-block-light {
    background-color: #3b668f;
}

/* 2. HOVER STATE */
.feature-block-dark:hover, .feature-block-light:hover {
    transform: scale(1.05);
    z-index: 10; /* Pulls it to the front layer */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    text-decoration: none !important;

    /* On hover, we reset the z-index delay to 0s 0s so it pops 
       to the front layer instantly without waiting. */
    transition: background-color 0.3s ease-in-out, 
                transform 0.3s ease-in-out, 
                box-shadow 0.3s ease-in-out, 
                z-index 0s 0s !important;
}

/* Darker block hover fade tint */
.feature-block-dark:hover {
    background-color: #13314d !important;
}

/* Lighter block hover fade tint */
.feature-block-light:hover {
    background-color: #2b4b6a !important;
}

/* Style for thumbnail selector tab items */
#generator-tabs .nav-link {
    border-radius: 4px;
    opacity: 0.6;
}

/* Hover over a thumbnail */
#generator-tabs .nav-link:hover {
    opacity: 0.9;
    border-color: #3b668f !important;
}

/* Active selected thumbnail highlight style matching image_d0696a.png */
#generator-tabs .nav-link.active {
    opacity: 1 !important;
    border-color: #0c63b0 !important;
    background-color: rgba(12, 99, 176, 0.05) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
}

/* 1. Base State: Explicitly define the starting values so the browser can animate them */
#t4-header, 
.t4-header,
#t4-mainnav,
.t4-section-header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1050 !important;
  
  /* Baseline styles when at the very top */
  background-color: rgba(255, 255, 255, 1) !important; /* Start solid white */
  backdrop-filter: blur(0px) !important;                 /* Start crisp/no blur */
  -webkit-backdrop-filter: blur(0px) !important;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;         /* Start with no shadow */
  
  /* Smooth 0.4-second transition easing for all changing properties */
  transition: background-color 0.4s ease, 
              backdrop-filter 0.4s ease, 
              -webkit-backdrop-filter 0.4s ease, 
              box-shadow 0.4s ease, 
              padding 0.4s ease !important;
}

/* 2. Scrolled State: The target values the navbar will smoothly glide into */
#t4-header.is-following, 
.t4-header.is-following,
#t4-mainnav.is-following,
.t4-section-header.is-following {
  background-color: rgba(255, 255, 255, 0.82) !important; /* Smoothly fades to translucent */
  backdrop-filter: blur(12px) !important;                 /* Smoothly intensifies the frost blur */
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05) !important;  /* Softly rolls in the bottom shadow */
  
  /* Gentle padding contraction on scroll */
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

@media (max-width: 767.98px) {
    /* Stack Data Table Rows */
    .spec-table-row { flex-direction: column; }
    .spec-cell-label, .spec-cell-value { width: 100%; }
    .spec-cell-value { border-left: none; border-top: 1px solid #e2e8f0; padding-top: 8px; background-color: #ffffff !important; }

    /* Vertical Navigation Tabs for Mobile */
    .product-nav-tabs { 
        flex-direction: column !important; 
        flex-wrap: wrap !important; 
        border-bottom: none !important; 
    }
    .product-nav-tabs .nav-item { 
        width: 100% !important; 
    }
    .product-nav-tabs .nav-link { 
        width: 100% !important; 
        border-bottom: 1px solid #edf2f7 !important; 
        border-left: 3px solid transparent !important; 
        border-radius: 0 !important; 
        white-space: normal !important;
    }
    .product-nav-tabs .nav-link.active { 
        border-bottom: 1px solid #edf2f7 !important; 
        border-left: 3px solid #1b75bb !important; 
        background-color: #f7fafc !important; 
    }
}