/* ==========================================================================
   Standard Page Layout & Global Overrides
   ========================================================================== */

/* 1. Main Content Wrapper */
#nssc-main {
  margin-top: 10px !important;
  margin-bottom: 60px !important;
}

/* 2. Content Area Separation (60px Gutter) */
#nssc-main .col-md-9 {
  padding-left: 60px !important; 
}

/* 3. Sidebar Container Reset */
.nssc-sidebar {
  padding-right: 0 !important;
  background-color: transparent !important;
  border: none !important;
}

/* 4. Breadcrumbs Bar Styling */
.breadcrumb-section {
  background-color: transparent !important;
  padding: 24px 0 8px 0 !important;
  border: none !important;
}

.breadcrumb__link, .breadcrumb__separator {
  color: #C6C6C6 !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.breadcrumb__text {
  color: #006BB6 !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
}

/* 5. Hero Section */
.nssc-hero {
  background-size: cover;
  background-position: center;
  color: #ffffff;
  padding: 0 !important;
  min-height: 220px;
  display: flex;
  align-items: center;
  position: relative;
}

.page-title {
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  margin: 0;
  max-width: 50%;
  line-height: 1.1;
  color: #ffffff;
}

/* 6. Body Content Typography */
.node__content {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
}

.node__content a {
  color: #006BB6;
  text-decoration: underline;
}

/* 7. HERO SEARCH BAR STYLING */
.hero-search {
  flex: 0 0 500px; 
}

/* The Wrapper (Pill Design) */
.hero-search .form--search-block-form {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  background: #ffffff !important;
  border-radius: 50px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
  margin: 0;
  border: none !important;
  overflow: hidden;
}

/* Style the text input 
   Font Weight: 500 (Reduced for a cleaner look)
*/
.hero-search input[type="search"] {
  flex-grow: 1;
  padding: 8px 24px !important; 
  border: none !important;
  background: transparent !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important; /* Reduced from 600 */
  color: #333 !important;
  box-shadow: none !important;
}

/* Prevent square browser outlines */
.hero-search input[type="search"]:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Placeholder Styling */
.hero-search input[type="search"]::placeholder {
  color: #828294 !important;
  font-weight: 500 !important; /* Matches input weight */
  opacity: 1;
}

/* The Submit Button */
.hero-search .form-submit {
  padding: 8px 35px !important;
  background-color: #42B1FF !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 50px 50px 0 !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important; /* Slightly more weight than text for clarity */
  cursor: pointer;
  margin: 0 !important;
  transition: background-color 0.3s ease, transform 0.2s ease !important;
}

/* Button hover effects */
.hero-search .form-submit:hover {
  background-color: #042969 !important;
}

/* Cleanup Radix Wrappers */
.hero-search .form-group {
  margin-bottom: 0 !important;
  flex-grow: 1;
}

.hero-search .form-actions {
  margin: 0 !important;
  padding: 0 !important;
}

.mt-4 {
  margin-top: 0px !important;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */
@media (max-width: 992px) {
  .nssc-hero .container {
    flex-direction: column;
    padding: 40px 15px;
    text-align: center;
  }
  
  .page-title {
    max-width: 100%;
    margin-bottom: 30px;
    font-size: 2rem !important;
  }

  .hero-search {
    width: 100%;
    flex: none;
  }

  #nssc-main .col-md-9 {
    padding-left: 15px !important;
  }
}