/* =========================================================
   NEXTGEN VIRTUAL ACADEMY — BRAND, BUTTON & ICON POLISH
   Replace: css/logo-alignment-fix.css
   This changes appearance only. It does not alter any links,
   lesson progress, reset behaviour, labs, or downloads.
   ========================================================= */

:root {
  --nva-blue: #2563eb;
  --nva-blue-dark: #1d4ed8;
  --nva-blue-pale: #eff6ff;
  --nva-navy: #111b35;
  --nva-line: #cbdcf6;
  --nva-muted: #64748b;
}

/* =========================================================
   LARGER CORPORATE LOGO + CENTRED TAGLINE
   High-specificity selectors also safely override older pages.
   ========================================================= */
html body .academy-shell .academy-header .academy-brand,
html body .selenium-shell .selenium-header .selenium-brand,
html body .app-shell .app-header .header-brand,
html body .academy-header .academy-brand,
html body .selenium-header .selenium-brand,
html body .app-header .header-brand {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  min-width: 0;
  text-decoration: none;
}

html body .academy-shell .academy-header .academy-brand > img.nextgen-logo,
html body .selenium-shell .selenium-header .selenium-brand > img.nextgen-logo,
html body .app-shell .app-header .header-brand > img.nextgen-logo,
html body .academy-header .academy-brand > img.nextgen-logo,
html body .selenium-header .selenium-brand > img.nextgen-logo,
html body .app-header .header-brand > img.nextgen-logo {
  display: block !important;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  height: 64px !important;
  max-height: 64px !important;
  flex: 0 0 64px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 14px !important;
  object-fit: contain !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgb(37 99 235 / 16%) !important;
}

html body .academy-shell .academy-header .academy-brand > .academy-brand-copy,
html body .selenium-shell .selenium-header .selenium-brand > .academy-brand-copy,
html body .app-shell .app-header .header-brand > .hrms-brand-copy,
html body .academy-header .academy-brand > .academy-brand-copy,
html body .selenium-header .selenium-brand > .academy-brand-copy,
html body .app-header .header-brand > .hrms-brand-copy {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 3px !important;
  min-width: 0 !important;
  width: max-content !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 1.1 !important;
}

html body .academy-shell .academy-header .academy-brand-copy > span,
html body .selenium-shell .selenium-header .academy-brand-copy > span,
html body .app-shell .app-header .hrms-brand-copy > span,
html body .academy-header .academy-brand-copy > span,
html body .selenium-header .academy-brand-copy > span,
html body .app-header .hrms-brand-copy > span {
  display: block !important;
  width: max-content !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--nva-navy) !important;
  font-size: 25px !important;
  font-weight: 800 !important;
  letter-spacing: -0.7px !important;
  text-align: left !important;
  white-space: nowrap !important;
}

html body .academy-shell .academy-header .academy-brand-copy > span strong,
html body .selenium-shell .selenium-header .academy-brand-copy > span strong,
html body .app-shell .app-header .hrms-brand-copy > span strong,
html body .academy-header .academy-brand-copy > span strong,
html body .selenium-header .academy-brand-copy > span strong,
html body .app-header .hrms-brand-copy > span strong {
  color: var(--nva-blue) !important;
}

html body .academy-shell .academy-header .academy-brand-copy > small,
html body .selenium-shell .selenium-header .academy-brand-copy > small,
html body .app-shell .app-header .hrms-brand-copy > small,
html body .academy-header .academy-brand-copy > small,
html body .selenium-header .academy-brand-copy > small,
html body .app-header .hrms-brand-copy > small {
  display: block !important;
  width: max-content !important;
  height: auto !important;
  margin: 3px auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  align-self: center !important;
  color: var(--nva-muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.85px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* =========================================================
   PROFESSIONAL, READABLE BUTTON SYSTEM
   ========================================================= */
html body .academy-shell .academy-btn,
html body .academy-shell .selenium-btn,
html body .academy-shell .primary-btn,
html body .academy-shell .secondary-btn,
html body .academy-shell .reset-btn,
html body .academy-shell .sql-primary,
html body .academy-shell .sql-secondary,
html body .academy-shell .api-outline,
html body .app-shell .btn,
html body .academy-btn,
html body .selenium-btn,
html body .primary-btn,
html body .secondary-btn,
html body .reset-btn,
html body .sql-primary,
html body .sql-secondary,
html body .api-outline,
html body .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 10px 16px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: transform 180ms ease, background-color 180ms ease,
    border-color 180ms ease, color 180ms ease, box-shadow 180ms ease !important;
}

/* Blue means the next important action. */
html body .academy-shell .academy-btn-primary,
html body .academy-shell .selenium-btn-primary,
html body .academy-shell .primary-btn,
html body .academy-shell .sql-primary,
html body .academy-shell .api-complete,
html body .academy-shell .selenium-complete,
html body .app-shell .btn-primary,
html body .academy-btn-primary,
html body .selenium-btn-primary,
html body .primary-btn,
html body .sql-primary,
html body .api-complete,
html body .selenium-complete,
html body .btn-primary {
  border-color: var(--nva-blue) !important;
  background: var(--nva-blue) !important;
  color: #fff !important;
  box-shadow: 0 7px 16px rgb(37 99 235 / 18%) !important;
}

/* White means a secondary, safe action. */
html body .academy-shell .academy-btn-secondary,
html body .academy-shell .selenium-btn-secondary,
html body .academy-shell .secondary-btn,
html body .academy-shell .sql-secondary,
html body .academy-shell .api-outline,
html body .app-shell .btn-secondary,
html body .academy-btn-secondary,
html body .selenium-btn-secondary,
html body .secondary-btn,
html body .sql-secondary,
html body .api-outline,
html body .btn-secondary {
  border-color: var(--nva-line) !important;
  background: #fff !important;
  color: #1e3a8a !important;
  box-shadow: none !important;
}

html body .academy-btn:hover,
html body .selenium-btn:hover,
html body .primary-btn:hover,
html body .secondary-btn:hover,
html body .sql-primary:hover,
html body .sql-secondary:hover,
html body .api-outline:hover,
html body .btn:hover {
  transform: translateY(-1px) !important;
}

html body .academy-btn-primary:hover,
html body .selenium-btn-primary:hover,
html body .primary-btn:hover,
html body .sql-primary:hover,
html body .api-complete:hover,
html body .selenium-complete:hover,
html body .btn-primary:hover {
  border-color: var(--nva-blue-dark) !important;
  background: var(--nva-blue-dark) !important;
  color: #fff !important;
}

html body .academy-btn-secondary:hover,
html body .selenium-btn-secondary:hover,
html body .secondary-btn:hover,
html body .sql-secondary:hover,
html body .api-outline:hover,
html body .btn-secondary:hover {
  border-color: var(--nva-blue) !important;
  background: var(--nva-blue-pale) !important;
  color: var(--nva-blue-dark) !important;
}

/* Reset stays less visually dominant. */
html body .reset-btn,
html body .selenium-reset-btn,
html body .java-reset-hero {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
  color: #475569 !important;
  box-shadow: none !important;
}

html body .reset-btn:hover,
html body .selenium-reset-btn:hover,
html body .java-reset-hero:hover {
  border-color: #94a3b8 !important;
  background: #eef2f7 !important;
  color: #1e293b !important;
}

/* =========================================================
   POLISHED ICON CONTAINERS + ACTIVE TABS
   ========================================================= */
html body .module-icon,
html body .selenium-module-icon,
html body .api-icon,
html body .path-icon,
html body .pillar-icon,
html body .quick-action-icon {
  border: 1px solid rgb(37 99 235 / 10%);
  box-shadow: 0 4px 10px rgb(15 23 42 / 6%);
}

html body .mt-tab,
html body .java-tab,
html body .sql-tab,
html body .pw-tab,
html body .api-tab,
html body .selenium-tab {
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  font-weight: 800 !important;
  transition: background-color 180ms ease, color 180ms ease,
    border-color 180ms ease !important;
}

html body .mt-tab:hover,
html body .java-tab:hover,
html body .sql-tab:hover,
html body .pw-tab:hover,
html body .api-tab:hover,
html body .selenium-tab:hover {
  background: var(--nva-blue-pale) !important;
  color: var(--nva-blue) !important;
}

html body .mt-tab.active,
html body .java-tab.active,
html body .sql-tab.active,
html body .pw-tab.active,
html body .api-tab.active,
html body .selenium-tab.active {
  background: var(--nva-blue) !important;
  color: #fff !important;
}

@media (max-width: 700px) {
  html body .academy-header .academy-brand > img.nextgen-logo,
  html body .selenium-header .selenium-brand > img.nextgen-logo,
  html body .app-header .header-brand > img.nextgen-logo {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    flex-basis: 48px !important;
    border-radius: 12px !important;
  }

  html body .academy-header .academy-brand-copy > span,
  html body .selenium-header .academy-brand-copy > span,
  html body .app-header .hrms-brand-copy > span {
    font-size: 18px !important;
  }

  html body .academy-header .academy-brand-copy > small,
  html body .selenium-header .academy-brand-copy > small,
  html body .app-header .hrms-brand-copy > small {
    font-size: 8px !important;
  }
}