/* header */
/* Container Base with Moving Gradient and Pulse */
  .nnqaa-header-v2 {
    position: relative;
    /* Updated background: combines color, image grid, and gradients */
    background-color: #121212;
    background-image: 
        linear-gradient(rgba(217, 167, 38, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(217, 167, 38, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center;
    padding: 60px 0 50px 0;
    overflow: hidden;
    color: #ffffff;
    border-bottom: 1px solid rgba(217, 167, 38, 0.25);
    z-index: 1;
    /* Animates the grid pattern and ambient colors */
    animation: backgroundShift 25s ease-in-out infinite alternate, gridPulse 8s ease-in-out infinite alternate;
  }

  /* Left Architectural Pillar Accent - Solid & Vibrant */
  .nnqaa-header-v2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #D9A726;
    box-shadow: 0 0 20px rgba(217, 167, 38, 0.6);
    z-index: 3; /* Stays above ambient effects */
  }

  /* Right Side Ambient Gradient Overlay (Adds Depth) */
  .nnqaa-ambient-depth {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background: radial-gradient(circle at 70% 30%, rgba(217, 167, 38, 0.08) 0%, rgba(0, 0, 0, 0) 60%);
    z-index: 2;
    pointer-events: none;
    animation: radialPulse 15s ease-in-out infinite alternate;
  }

  /* Enhanced Geometric Slant with Trace Particle */
  .nnqaa-header-v2-slant {
    position: absolute;
    right: -10%;
    top: -20%;
    width: 40%;
    height: 140%;
    background: linear-gradient(135deg, rgba(217, 167, 38, 0.1) 0%, rgba(0, 0, 0, 0) 80%);
    transform: rotate(-12deg);
    border-left: 2px dashed rgba(217, 167, 38, 0.4);
    pointer-events: none;
    z-index: 2;
  }

  /* Trace Particle along the dashed line */
  .nnqaa-header-v2-slant::after {
    content: '';
    position: absolute;
    top: -100px;
    left: -4px;
    width: 6px;
    height: 80px;
    background: linear-gradient(to bottom, rgba(217, 167, 38, 0), rgba(217, 167, 38, 1) 50%, rgba(217, 167, 38, 0));
    border-radius: 4px;
    filter: blur(1px);
    animation: traceLine 6s linear infinite;
  }

  /* --- Keyframe Animations --- */

  /* Shifts the grid pattern slightly to create a slow drift effect */
  @keyframes backgroundShift {
    0% { background-position: 0% center; }
    100% { background-position: 100% center; }
  }

  /* Slowly pulses the opacity of the blueprint grid lines */
  @keyframes gridPulse {
    0% { opacity: 0.7; }
    100% { opacity: 1; }
  }

  /* Drifts the ambient radial glow on the right */
  @keyframes radialPulse {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(5%, 5%) scale(1.1); }
  }

  /* Traces the dashed line with a high-speed light particle */
  @keyframes traceLine {
    0% { top: -10%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 110%; opacity: 0; }
  }

  /* --- Standard Header CSS (Retained from previous) --- */
  .nnqaa-meta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    margin-bottom: 25px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 4;
  }

  .nnqaa-v2-breadcrumb { background: transparent; padding: 0; margin: 0; font-size: 0.82rem; letter-spacing: 1px; text-transform: uppercase; }
  .nnqaa-v2-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #D9A726; padding: 0 10px; }
  .nnqaa-v2-breadcrumb .breadcrumb-item a { color: #aaaaaa; text-decoration: none; transition: color 0.3s ease; }
  .nnqaa-v2-breadcrumb .breadcrumb-item a:hover { color: #D9A726; text-decoration: none;}
  .nnqaa-v2-breadcrumb .breadcrumb-item.active { color: #ffffff; font-weight: 700; }

  .nnqaa-badge-counter { background: rgba(217, 167, 38, 0.15); border: 1px solid #D9A726; color: #D9A726; font-size: 0.78rem; font-weight: 700; padding: 4px 14px; border-radius: 4px; letter-spacing: 1px; text-transform: uppercase; }

  .nnqaa-v2-title { position: relative; z-index: 4; font-size: 2.8rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; line-height: 1.1; color: #ffffff; margin-bottom: 10px; }
  .nnqaa-v2-title span { color: #D9A726; }
  .nnqaa-v2-lead { position: relative; z-index: 4; color: #aaaaaa; font-size: 1rem; max-width: 650px; margin: 0; }

  .pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #D9A726; margin-right: 6px; box-shadow: 0 0 0 0 rgba(217, 167, 38, 0.7); animation: pulseGlow 2s infinite; }
  @keyframes pulseGlow { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(217, 167, 38, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(217, 167, 38, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(217, 167, 38, 0); } }

  /* Responsive Adjustments */
  @media (max-width: 768px) {
    .nnqaa-meta-bar { flex-direction: column; align-items: flex-start; gap: 12px; }
    .nnqaa-v2-title { font-size: 2rem; }
    .nnqaa-header-v2-slant { display: none; }
  }

  /* Accessibility: Respect Reduced Motion Settings */
  @media (prefers-reduced-motion: reduce) {
    .nnqaa-header-v2,
    .nnqaa-ambient-depth,
    .nnqaa-header-v2-slant::after {
      animation: none !important;
      background-position: center !important;
      opacity: 1 !important;
    }
  }
  
  /* Breadcrumb Nav Wrapper */
  .nnqaa-breadcrumb-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Glassmorphic Pill Badge Container */
  .nnqaa-breadcrumb-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(18, 18, 18, 0.85);
    border: 1px solid rgba(217, 167, 38, 0.35);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25), 0 0 12px rgba(217, 167, 38, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 8px 22px;
    border-radius: 50px;
    margin: 0;
    list-style: none;
  }

  /* Breadcrumb Item Styling */
  .nnqaa-breadcrumb-pill .breadcrumb-item {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
  }

  /* Custom Angled Chevron Separator */
  .nnqaa-breadcrumb-pill .breadcrumb-item + .breadcrumb-item::before {
    content: "\f105"; /* FontAwesome Right Angle Icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #D9A726;
    padding: 0 14px;
    font-size: 0.85rem;
    opacity: 0.8;
  }

  /* Inactive Link (Home / Parent pages) */
  .nnqaa-breadcrumb-pill .breadcrumb-item a {
    color: #cccccc;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
  }

  .nnqaa-breadcrumb-pill .breadcrumb-item a i {
    color: #D9A726;
    margin-right: 6px;
    transition: transform 0.25s ease;
  }

  /* Hover Animations */
  .nnqaa-breadcrumb-pill .breadcrumb-item a:hover {
    color: #D9A726;
    transform: translateY(-1px);
    text-shadow: 0 0 8px rgba(217, 167, 38, 0.4);
  }

  .nnqaa-breadcrumb-pill .breadcrumb-item a:hover i {
    transform: scale(1.15);
  }

  /* Active Current Page Badge */
  .nnqaa-breadcrumb-pill .breadcrumb-item.active {
    color: #121212;
    background: #D9A726;
    padding: 3px 12px;
    border-radius: 20px;
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(217, 167, 38, 0.3);
  }

  /* Responsive Fix for Mobile Viewports */
  @media (max-width: 576px) {
    .nnqaa-breadcrumb-pill {
      padding: 6px 14px;
      flex-wrap: wrap;
      justify-content: center;
      border-radius: 12px;
    }
    .nnqaa-breadcrumb-pill .breadcrumb-item {
      font-size: 0.72rem;
    }
    .nnqaa-breadcrumb-pill .breadcrumb-item + .breadcrumb-item::before {
      padding: 0 8px;
    }
  }

  /* Controls & Meta Bar */
  .nnqaa-directory-toolbar {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    margin-bottom: 25px;
  }

  .nnqaa-count-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(217, 167, 38, 0.12);
    color: #121212;
    font-weight: 700;
    font-size: 0.88rem;
    padding: 6px 16px;
    border-radius: 50px;
    border: 1px solid rgba(217, 167, 38, 0.3);
  }

  .nnqaa-count-pill .pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D9A726;
    display: inline-block;
    margin-right: 8px;
    box-shadow: 0 0 8px rgba(217, 167, 38, 0.8);
  }

  /* Live Search Input Styling */
  .nnqaa-search-input {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 16px 8px 38px;
    font-size: 0.9rem;
    transition: all 0.25s ease;
    width: 100%;
  }

  .nnqaa-search-input:focus {
    border-color: #D9A726;
    box-shadow: 0 0 0 3px rgba(217, 167, 38, 0.2);
    outline: none;
  }

  .nnqaa-search-wrapper {
    position: relative;
    max-width: 320px;
    width: 100%;
  }

  .nnqaa-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #a0aec0;
    font-size: 0.88rem;
  }

  /* Modern Institutional Card Base */
  .nnqaa-suc-card {
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 12px;
    padding: 20px;
    height: 100%;
    position: relative;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    overflow: hidden;
  }

  /* Top Gold Edge Highlight on Hover */
  .nnqaa-suc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #D9A726;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .nnqaa-suc-card:hover {
    transform: translateY(-4px);
    border-color: rgba(217, 167, 38, 0.4);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08), 0 0 15px rgba(217, 167, 38, 0.1);
  }

  .nnqaa-suc-card:hover::before {
    opacity: 1;
  }

  /* Logo Frame Container */
  .nnqaa-suc-card__logo {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #edf2f7;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    margin-right: 16px;
    transition: transform 0.3s ease;
  }

  .nnqaa-suc-card:hover .nnqaa-suc-card__logo {
    transform: scale(1.05);
    border-color: rgba(217, 167, 38, 0.3);
  }

  .nnqaa-suc-card__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  /* Info & Typography */
  .nnqaa-suc-card__info {
    flex-grow: 1;
  }

  .nnqaa-suc-card__title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0;
  }

  .nnqaa-suc-card__title a {
    color: #1a202c;
    text-decoration: none;
    transition: color 0.25s ease;
  }

  .nnqaa-suc-card:hover .nnqaa-suc-card__title a {
    color: #D9A726;
  }

  /* External Action Chevron Icon */
  .nnqaa-suc-card__action {
    color: #cbd5e0;
    font-size: 0.85rem;
    margin-left: 10px;
    transition: all 0.3s ease;
  }

  .nnqaa-suc-card:hover .nnqaa-suc-card__action {
    color: #D9A726;
    transform: translateX(3px);
  }

  /* Empty State Modern Styling */
  .nnqaa-empty-sucs {
    background: #ffffff;
    border: 2px dashed #e2e8f0;
    border-radius: 16px;
    padding: 60px 20px;
    margin: 30px 0;
  }

  .nnqaa-empty-icon-wrapper {
    width: 80px;
    height: 80px;
    background: rgba(217, 167, 38, 0.1);
    color: #D9A726;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }

  /* ============================================================================
   NNQAA — State Universities & Colleges list card
   Replaces inline style="" + onmouseover/onmouseout JS on every card with a
   single reusable class. Same visual result, but now: (1) hover runs on the
   browser's CSS transition pipeline instead of a JS handler firing on every
   mousemove-adjacent event, (2) the color only needs to change in one place,
   (3) keyboard focus gets the same treatment hover does, which the old
   version had no way to do at all.
   ============================================================================ */

.nnqaa-suc-count {
  color: #555;
  font-size: .9rem;
  font-weight: 600;
}

.nnqaa-suc-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px 18px;
  gap: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .07);
  border-left: 3px solid transparent;
  transition: transform .3s ease, box-shadow .3s ease, border-left-color .3s ease;
}

/* :focus-within covers keyboard navigation — tabbing to the link inside now
   gets the exact same lift/shadow/accent treatment a mouse hover gets, which
   the onmouseover/onmouseout version had no equivalent for at all. */
.nnqaa-suc-card:hover,
.nnqaa-suc-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
  border-left-color: #FFB600;
}

.nnqaa-suc-card__logo {
  width: 68px;
  height: 68px;
  border-radius: 6px;
  background: #f8f8f8;
  border: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.nnqaa-suc-card__logo img {
  max-width: 62px;
  max-height: 62px;
  object-fit: contain;
}

.nnqaa-suc-card__info {
  flex: 1;
  min-width: 0;
}

.nnqaa-suc-card__title {
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}
.nnqaa-suc-card__title a {
  color: #1a1a1a;
  text-decoration: none;
  transition: color .2s ease;
}
.nnqaa-suc-card__title a:hover,
.nnqaa-suc-card__title a:focus-visible {
  color: #FFB600;
}

.nnqaa-empty-sucs {
  padding: 56px 20px;
  border: 1px dashed rgba(0, 0, 0, .15);
  border-radius: 10px;
  color: #8a8f98;
}
.nnqaa-empty-sucs svg { margin-bottom: 12px; opacity: .6; }