/* SecurityTalent unified brand palette 2.10.1
   Exact colors from the Career Command Center mockup. */
:root {
  --st-brand-navy: #073641;
  --st-brand-teal: #0b8f91;
  --st-brand-gold: #f6d47a;
  --st-brand-ink: #17383d;
  --st-brand-muted: #5f7478;
  --st-brand-canvas: #f7faf9;
  --st-brand-surface: #ffffff;
  --st-brand-soft: #eaf6f4;
  --st-brand-line: #cfe2df;
  --st-brand-shadow: 0 12px 30px rgba(7, 54, 65, .10);

  /* Re-map the existing SecurityTalent design tokens. */
  --st-navy-950: var(--st-brand-navy);
  --st-navy-900: var(--st-brand-navy);
  --st-blue-700: var(--st-brand-teal);
  --st-blue-600: var(--st-brand-teal);
  --st-cyan-700: var(--st-brand-teal);
  --st-cyan-500: var(--st-brand-teal);
  --st-orange-500: var(--st-brand-gold);
  --st-gold: var(--st-brand-gold);
  --st-sage: var(--st-brand-soft);
  --st-sand: #eef5f3;
  --st-ivory: var(--st-brand-canvas);
  --st-ink: var(--st-brand-ink);
  --st-muted: var(--st-brand-muted);
  --st-line: var(--st-brand-line);
  --st-surface: var(--st-brand-surface);
  --st-canvas: var(--st-brand-canvas);
  --st-shadow: var(--st-brand-shadow);
  --bs-primary: #0b8f91;
  --bs-primary-rgb: 11, 143, 145;
  --bs-link-color: #0b8f91;
  --bs-link-hover-color: #073641;
}

body,
.body-wrapper,
#sp-main-body {
  color: var(--st-brand-ink) !important;
  background-color: var(--st-brand-canvas) !important;
}

h1, h2, h3, h4, h5, h6,
.page-header,
.contentheading,
.componentheading {
  color: var(--st-brand-navy);
}

a:not(.btn):not([class*="button"]),
.text-primary {
  color: var(--st-brand-teal);
}

a:not(.btn):not([class*="button"]):hover,
a:not(.btn):not([class*="button"]):focus-visible {
  color: var(--st-brand-navy);
}

:focus-visible {
  outline-color: var(--st-brand-gold);
}

#sp-top-bar {
  color: var(--st-brand-ink) !important;
  background: #f8fbfa !important;
  border-bottom-color: var(--st-brand-line) !important;
}

#sp-header {
  background: var(--st-brand-navy) !important;
  border-bottom: 3px solid var(--st-brand-gold) !important;
  box-shadow: 0 8px 24px rgba(7, 54, 65, .16) !important;
}

#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-parent > li > span,
#sp-header .burger-icon > span {
  color: #fff !important;
}

#sp-header .sp-megamenu-parent > li.active > a,
#sp-header .sp-megamenu-parent > li:hover > a,
#sp-header .sp-megamenu-parent > li:focus-within > a {
  color: var(--st-brand-gold) !important;
}

#sp-header .sp-megamenu-parent > li.active > a::before {
  background: var(--st-brand-gold) !important;
}

#sp-header .sp-dropdown .sp-dropdown-inner {
  border-color: var(--st-brand-line) !important;
  background: #fff !important;
  box-shadow: 0 18px 42px rgba(7, 54, 65, .18) !important;
}

#sp-header .sp-dropdown li.sp-menu-item > a {
  color: var(--st-brand-navy) !important;
}

#sp-header .sp-dropdown li.sp-menu-item > a:hover,
#sp-header .sp-dropdown li.sp-menu-item > a:focus-visible {
  color: var(--st-brand-navy) !important;
  background: var(--st-brand-soft) !important;
}

.btn-primary,
.button-primary,
button.btn-primary,
input[type="submit"]:not(.btn-danger),
.es-button--primary,
.o-btn--primary,
.btn-info {
  color: #fff !important;
  background: var(--st-brand-teal) !important;
  border-color: var(--st-brand-teal) !important;
  box-shadow: 0 7px 18px rgba(11, 143, 145, .20) !important;
}

.btn-primary:hover,
.button-primary:hover,
button.btn-primary:hover,
input[type="submit"]:not(.btn-danger):hover,
.es-button--primary:hover,
.o-btn--primary:hover,
.btn-info:hover {
  color: #fff !important;
  background: var(--st-brand-navy) !important;
  border-color: var(--st-brand-navy) !important;
}

.btn-outline-primary {
  color: var(--st-brand-teal) !important;
  background: transparent !important;
  border-color: var(--st-brand-teal) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
  color: #fff !important;
  background: var(--st-brand-teal) !important;
}

.btn-warning,
.badge-warning,
.st-header-auth > .mod-es > a:last-child,
.st-responsive-auth > .mod-es > a:last-child {
  color: var(--st-brand-navy) !important;
  background: var(--st-brand-gold) !important;
  border-color: var(--st-brand-gold) !important;
}

.badge-primary,
.bg-primary,
.pagination .active > .page-link,
.nav-pills .nav-link.active,
.progress-bar {
  color: #fff !important;
  background-color: var(--st-brand-teal) !important;
  border-color: var(--st-brand-teal) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--st-brand-teal) !important;
  box-shadow: 0 0 0 3px rgba(11, 143, 145, .18) !important;
}

.card,
.well,
.panel,
.es-card,
.eb-card,
.ed-card,
.o-card,
.t-card,
.st-feature,
.st-fresh-card,
.st-value-card,
.st-tab-panel,
.st-amazon-guide-card {
  border-color: var(--st-brand-line) !important;
  background-color: #fff !important;
  box-shadow: 0 6px 18px rgba(7, 54, 65, .06) !important;
}

.es-toolbar,
.eb-toolbar,
.ed-toolbar,
.st-application-toolbar,
.st-amazon-study-controls,
.st-alert-filters {
  border-color: var(--st-brand-line) !important;
  background: var(--st-brand-soft) !important;
}

.st-eyebrow,
.st-alert-eyebrow,
.st-change-kicker,
.st-amazon-study-eyebrow,
.st-fresh-content__eyebrow {
  color: var(--st-brand-teal) !important;
}

/* Homepage */
.st-home-hero-row {
  background: var(--st-brand-navy) !important;
}

.st-home-carousel,
.st-home-hero-focused {
  background-color: var(--st-brand-teal) !important;
}

.st-home-hero-focused .st-slide-inner h1,
.st-home-hero-focused .st-slide-inner > p,
.st-home-hero-focused .st-hero-proof {
  color: #fff !important;
}

.st-home-hero-focused .st-actions > a:first-child:not(.st-btn-ghost) {
  color: var(--st-brand-navy) !important;
  background: var(--st-brand-gold) !important;
  border-color: var(--st-brand-gold) !important;
  box-shadow: 0 10px 24px rgba(7, 54, 65, .20) !important;
}

.st-home-hero-focused .st-actions > a:first-child:hover {
  color: #fff !important;
  background: var(--st-brand-navy) !important;
  border-color: var(--st-brand-navy) !important;
}

.st-hero-proof li::before,
.st-matrix-evidence,
.st-job-skill-tags span::before {
  color: var(--st-brand-gold) !important;
}

.st-demo-badge,
.st-matrix-value {
  color: var(--st-brand-navy) !important;
  background: rgba(246, 212, 122, .36) !important;
  border-color: rgba(7, 54, 65, .18) !important;
}

.st-organization-slider,
.st-final-cta {
  background: #fffdf7 !important;
  border-color: rgba(246, 212, 122, .70) !important;
}

.st-organization-logo:hover,
.st-organization-logo:focus-visible,
.st-feature:hover,
.st-feature:focus-visible {
  color: var(--st-brand-navy) !important;
  border-color: var(--st-brand-teal) !important;
  box-shadow: 0 10px 25px rgba(11, 143, 145, .12) !important;
}

.st-value-card > span,
.st-feature-icon,
.st-profile-avatar {
  color: #fff !important;
  background: linear-gradient(135deg, var(--st-brand-navy), var(--st-brand-teal)) !important;
}

.st-infosec-story,
.st-profile-story,
.st-home-trust-row {
  background: linear-gradient(135deg, rgba(11, 143, 145, .10), rgba(246, 212, 122, .14)), #f7faf9 !important;
  border-color: var(--st-brand-line) !important;
}

.st-home-capabilities-row,
.st-badge-demo__share {
  background: var(--st-brand-soft) !important;
}

.st-practice-promo__cta {
  color: var(--st-brand-navy) !important;
  background: var(--st-brand-gold) !important;
  border-color: var(--st-brand-gold) !important;
}

.st-fresh-feed--jobs {
  border-color: var(--st-brand-teal) !important;
}

/* Member career shell */
.st-member-experience,
.st-floating-progress > button {
  background: var(--st-brand-navy) !important;
}

.st-member-nav__item > a:hover,
.st-member-nav__item:focus-within > a {
  color: var(--st-brand-gold) !important;
}

.st-member-nav__menu,
.st-search-results,
.st-floating-progress {
  border-color: var(--st-brand-line) !important;
}

.st-member-nav__menu a:hover,
.st-search-results a:hover,
.st-floating-progress__body > a {
  color: var(--st-brand-navy) !important;
  background: var(--st-brand-soft) !important;
}

.st-floating-progress__body i b {
  background: var(--st-brand-teal) !important;
}

#sp-bottom,
#sp-footer,
.st-footer,
.st-footer-nav {
  color: #fff !important;
  background: var(--st-brand-navy) !important;
}

#sp-bottom a,
#sp-footer a,
.st-footer a,
.st-footer-nav a {
  color: #dff8f5 !important;
}

#sp-bottom a:hover,
#sp-footer a:hover,
.st-footer a:hover,
.st-footer-nav a:hover {
  color: var(--st-brand-gold) !important;
}

@media (max-width: 1199.98px) {
  .offcanvas-menu,
  .offcanvas-inner,
  .st-offcanvas-inner,
  .st-offcanvas-toolbar {
    color: var(--st-brand-ink) !important;
    background: #fffdf8 !important;
  }

  .offcanvas-menu .menu > li.active > a,
  .offcanvas-menu .menu > li > a:hover,
  .offcanvas-menu .menu > li > a:focus-visible,
  .st-offcanvas-submenu-toggle {
    color: var(--st-brand-teal) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
  }
}

/* The production Helix template carries high-specificity legacy palette
   declarations. Keep these final rules explicit so the three core brand
   surfaces always resolve to the exact approved colors. */
html body.site {
  color: var(--st-brand-ink) !important;
  background: var(--st-brand-canvas) !important;
}

html body.site .body-wrapper,
html body.site #sp-main-body {
  background-color: var(--st-brand-canvas) !important;
}

html body.site #sp-header {
  background: var(--st-brand-navy) !important;
  border-bottom-color: var(--st-brand-gold) !important;
}

html body.site #sp-bottom,
html body.site #sp-footer,
html body.site .st-footer,
html body.site .st-footer-nav {
  color: #fff !important;
  background: var(--st-brand-navy) !important;
}

html body.site h1,
html body.site h2,
html body.site h3,
html body.site h4,
html body.site h5,
html body.site h6 {
  color: var(--st-brand-navy) !important;
}

html body.site a:not(.btn):not([class*="button"]) {
  color: var(--st-brand-teal) !important;
}

html body.site a:not(.btn):not([class*="button"]):hover,
html body.site a:not(.btn):not([class*="button"]):focus-visible {
  color: var(--st-brand-navy) !important;
}

html body.site .btn.btn-primary,
html body.site button.btn-primary,
html body.site .st-primary-submit,
html body.site .button-primary,
html body.site input[type="submit"]:not(.btn-danger),
html body.site .es-button--primary,
html body.site .o-btn--primary {
  color: #fff !important;
  background: var(--st-brand-teal) !important;
  border-color: var(--st-brand-teal) !important;
}

html body.site .btn.btn-primary:hover,
html body.site button.btn-primary:hover,
html body.site .st-primary-submit:hover,
html body.site .button-primary:hover,
html body.site input[type="submit"]:not(.btn-danger):hover,
html body.site .es-button--primary:hover,
html body.site .o-btn--primary:hover {
  color: #fff !important;
  background: var(--st-brand-navy) !important;
  border-color: var(--st-brand-navy) !important;
}

html body.site .card,
html body.site .well,
html body.site .panel,
html body.site .es-card,
html body.site .eb-card,
html body.site .ed-card,
html body.site .o-card,
html body.site .t-card {
  color: var(--st-brand-ink) !important;
  background-color: #fff !important;
  border-color: var(--st-brand-line) !important;
  box-shadow: 0 6px 18px rgba(7, 54, 65, .06) !important;
}

html body.site input:focus,
html body.site select:focus,
html body.site textarea:focus,
html body.site .form-control:focus,
html body.site .form-select:focus {
  border-color: var(--st-brand-teal) !important;
  box-shadow: 0 0 0 3px rgba(11, 143, 145, .18) !important;
}

html body.site #sp-header a:not(.btn),
html body.site #sp-header .sp-megamenu-parent > li > a {
  color: #fff !important;
}

html body.site #sp-header .sp-megamenu-parent > li.active > a,
html body.site #sp-header .sp-megamenu-parent > li:hover > a,
html body.site #sp-header .sp-megamenu-parent > li:focus-within > a {
  color: var(--st-brand-gold) !important;
}

html body.site #sp-bottom a,
html body.site #sp-footer a,
html body.site .st-footer a,
html body.site .st-footer-nav a {
  color: #dff8f5 !important;
}

html body.site #sp-bottom a:hover,
html body.site #sp-footer a:hover,
html body.site .st-footer a:hover,
html body.site .st-footer-nav a:hover {
  color: var(--st-brand-gold) !important;
}

/* Desktop megamenu clarity. Header-level links stay white, while dropdown
   links use navy on white with a teal-tinted hover surface. */
html body.site #sp-header .sp-dropdown {
  z-index: 1200 !important;
}

html body.site #sp-header .sp-dropdown .sp-dropdown-inner {
  padding: 12px !important;
  color: var(--st-brand-ink) !important;
  background: #fff !important;
  border: 1px solid var(--st-brand-line) !important;
  border-top: 3px solid var(--st-brand-gold) !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: 0 18px 42px rgba(7, 54, 65, .20) !important;
}

html body.site #sp-header .sp-dropdown .sp-dropdown-items {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body.site #sp-header .sp-dropdown li.sp-menu-item {
  margin: 0 !important;
  padding: 0 !important;
}

html body.site #sp-header .sp-dropdown li.sp-menu-item > a:not(.btn),
html body.site #sp-header .sp-dropdown li.sp-menu-item > span {
  display: flex !important;
  min-height: 42px !important;
  align-items: center !important;
  padding: 9px 12px !important;
  color: var(--st-brand-navy) !important;
  background: transparent !important;
  border-radius: 8px !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  text-decoration: none !important;
}

html body.site #sp-header .sp-dropdown li.sp-menu-item:hover > a:not(.btn),
html body.site #sp-header .sp-dropdown li.sp-menu-item:focus-within > a:not(.btn),
html body.site #sp-header .sp-dropdown li.sp-menu-item.active > a:not(.btn) {
  color: var(--st-brand-navy) !important;
  background: var(--st-brand-soft) !important;
}

html body.site #sp-header .sp-dropdown li.sp-has-child > a::after,
html body.site #sp-header .sp-dropdown li.sp-has-child > span::after {
  color: var(--st-brand-teal) !important;
}

@media (min-width: 900px) {
  html body.site #sp-header .sp-megamenu-parent > li:has(> a[href*="/community"]) > .sp-dropdown-main,
  html body.site #sp-header .sp-megamenu-parent > li:has(> a[href*="/knowledge"]) > .sp-dropdown-main {
    width: 560px !important;
    max-width: calc(100vw - 32px) !important;
  }

  html body.site #sp-header .sp-megamenu-parent > li:has(> a[href*="/community"]) > .sp-dropdown-main > .sp-dropdown-inner > .sp-dropdown-items,
  html body.site #sp-header .sp-megamenu-parent > li:has(> a[href*="/knowledge"]) > .sp-dropdown-main > .sp-dropdown-inner > .sp-dropdown-items {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px 8px !important;
  }
}