/* ==========================================================================
   DESW Inner Page Hero Banner & Sub-Navigation Bar Styles
   ========================================================================== */

.inner-page-hero-banner {
  background: linear-gradient(135deg, #162F6A 0%, #0E204A 100%) !important;
  color: #ffffff !important;
  padding: 36px 0 0 0 !important;
  margin-bottom: 35px !important;
  position: relative;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.inner-hero-breadcrumbs {
  margin-bottom: 8px;
}

.inner-breadcrumb-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.inner-breadcrumb-item a {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none;
}

.inner-breadcrumb-item a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

.inner-breadcrumb-separator {
  color: rgba(255, 255, 255, 0.6) !important;
}

.inner-breadcrumb-parent {
  color: #A3BBF3 !important;
  font-weight: 500;
}

.inner-hero-title {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
  margin: 6px 0 26px 0 !important;
}

/* Sub-Navigation Pill Bar */
.inner-subnav-bar {
  position: relative !important;
  background: #0B1938 !important;
  border-radius: 12px 12px 0 0 !important;
  display: inline-flex !important;
  align-items: center;
  padding: 10px 22px !important;
  max-width: 100%;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.16);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.inner-subnav-bar .contextual {
  top: 6px !important;
  right: 8px !important;
  z-index: 100 !important;
}

.inner-subnav-list {
  display: flex !important;
  align-items: center !important;
  gap: 26px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

.inner-subnav-list::-webkit-scrollbar {
  display: none !important;
}

.inner-subnav-item {
  display: inline-flex !important;
  align-items: center !important;
}

.inner-subnav-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  padding: 6px 4px !important;
  transition: all 0.2s ease;
}

.inner-subnav-link:hover {
  color: #ffffff !important;
}

.inner-subnav-item.is-active .inner-subnav-link,
.inner-subnav-link.active {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* 6-Dots Active Indicator */
.subnav-active-dots {
  display: none;
  align-items: center;
  color: #A3BBF3 !important;
  line-height: 1;
}

.inner-subnav-item.is-active .subnav-active-dots,
.inner-subnav-link.active .subnav-active-dots {
  display: inline-flex !important;
}

.subnav-label {
  display: inline-block;
  line-height: 1.3;
}

/* Hide duplicate page title inside content area when hero banner is present */
.inner-page-hero-banner ~ #main-wrapper .page-title,
.inner-page-hero-banner ~ #main-wrapper #block-tara-page-title,
.inner-page-hero-banner ~ #main-wrapper .block-page-title-block {
  display: none !important;
}

/* Responsive */
@media (max-width: 991px) {
  .inner-page-hero-banner {
    padding: 26px 0 0 0 !important;
    margin-bottom: 25px !important;
  }
  .inner-hero-title {
    font-size: 26px !important;
    margin-bottom: 20px !important;
  }
  .inner-subnav-bar {
    width: 100% !important;
    padding: 8px 16px !important;
    border-radius: 10px 10px 0 0 !important;
  }
  .inner-subnav-list {
    gap: 18px !important;
  }
  .inner-subnav-link {
    font-size: 15px !important;
  }
}

@media (max-width: 576px) {
  .inner-hero-title {
    font-size: 22px !important;
  }
  .inner-subnav-list {
    gap: 14px !important;
  }
  .inner-subnav-link {
    font-size: 14px !important;
    padding: 4px 2px !important;
  }
}

/* Universal Reusable Card Links Component
   Use class "card-links" on <div>, <p>, or <ul> anywhere on the site
--------------------------------------------------------------------- */
.card-links,
div.card-links,
p.card-links,
ul.card-links,
ol.card-links,
.card-link-list,
.node-content .field--name-body > p:has(> a:nth-of-type(2)),
.node-content .field--name-body > p.card-link-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin: 16px 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
}

ul.card-links li,
ol.card-links li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
}

.card-links a,
ul.card-links li a,
ol.card-links li a,
.card-link,
a.card-link,
.card-link-list a,
.card-link-item,
.node-content .field--name-body > p:has(> a:nth-of-type(2)) > a,
.node-content .field--name-body > p.card-link-list a {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: 16px 24px !important;
  background-color: #ffffff !important;
  border: 1px solid #dbe2ea !important;
  border-radius: 8px !important;
  color: #1e293b !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s ease-in-out !important;
  box-sizing: border-box !important;
}

.card-links a:hover,
ul.card-links li a:hover,
ol.card-links li a:hover,
.card-link:hover,
a.card-link:hover,
.card-link-list a:hover,
.card-link-item:hover,
.node-content .field--name-body > p:has(> a:nth-of-type(2)) > a:hover,
.node-content .field--name-body > p.card-link-list a:hover {
  background-color: #f8fafc !important;
  border-color: #5279D7 !important;
  color: #162F6A !important;
  box-shadow: 0 4px 12px rgba(22, 47, 106, 0.08) !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
}
