/* EDU — LinkedIn-style color distribution with EDU navy (#0B1426) as primary accent */

:root {
  --edu-canvas: #f3f2ef;
  --edu-surface: #ffffff;
  --edu-surface-hover: rgba(0, 0, 0, 0.08);
  --brand: #0b1426;
  --brand-2: #152238;
  --brand-dark: #070d18;
  --brand-soft: rgba(11, 20, 38, 0.08);
  --brand-border: rgba(11, 20, 38, 0.16);
  --ink: rgba(0, 0, 0, 0.9);
  --ink-secondary: rgba(0, 0, 0, 0.6);
  --ink-tertiary: rgba(0, 0, 0, 0.45);
  --muted: rgba(0, 0, 0, 0.6);
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.15);
  --soft: #f3f2ef;
  --soft-2: #ebebeb;
  --card: #ffffff;
  --shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-brand: 0 4px 12px rgba(11, 20, 38, 0.18);
  --edu-gradient: linear-gradient(135deg, #0b1426, #152238);
  --edu-web-navy: #0b1426;
  --edu-web-navy-hover: #152238;
  --edu-web-navy-soft: #1a2942;
}

/* Canvas — LinkedIn warm gray background on web */
html.edu-view-web body.edu-view-web-body {
  color: var(--ink);
  background: var(--edu-canvas);
}

html.edu-view-web .edu-web-content {
  background: var(--edu-canvas);
}

/* Header — white bar, no purple gradient strip */
html.edu-view-web .edu-web-header {
  background: #fff;
  border-bottom: 1px solid var(--line-strong);
  box-shadow: none;
}

html.edu-view-web .edu-web-header__tier--audience {
  background: linear-gradient(180deg, #0b1426 0%, #070d18 100%);
  color: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

html.edu-view-web .edu-web-header__audience-link {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 600;
  border-bottom: 2px solid transparent;
}

html.edu-view-web .edu-web-header__audience-link:hover,
html.edu-view-web .edu-web-header__audience-link:focus-visible {
  color: #ffffff;
  background: #f97316;
  border-bottom-color: #f97316;
}

html.edu-view-web .edu-web-header__audience-link.is-active {
  color: #ffffff;
  border-bottom-color: #f97316;
  background: rgba(255, 255, 255, 0.06);
}

html.edu-view-web .edu-web-header__audience-link.is-active:hover,
html.edu-view-web .edu-web-header__audience-link.is-active:focus-visible {
  background: #f97316;
}

/* Cards — white surface, subtle border (LinkedIn feed cards) */
html.edu-view-web .edu-web-content .community-ui-card,
html.edu-view-web .edu-web-content .community-card,
html.edu-view-web .edu-web-content .social-group-card,
html.edu-view-web .edu-web-content .community-sidebar__block,
html.edu-view-web .edu-web-content .community-compose,
html.edu-view-web .edu-web-content .social-profile-card {
  background: var(--edu-surface);
  border: 1px solid var(--line-strong);
  box-shadow: none;
  border-radius: 8px;
}

html.edu-view-web .edu-web-content .community-ui-card:hover,
html.edu-view-web .edu-web-content .community-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Community page canvas */
html.edu-view-web .edu-web-content .edu-page-community {
  background: transparent;
}

html.edu-view-web .edu-web-content .edu-page-community .community-hero {
  background: var(--edu-surface);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: none;
}

html.edu-view-web .edu-web-content .edu-page-community .community-hero h1 {
  color: var(--ink);
}

/* Community nav — LinkedIn icon bar: active = brand + underline, not gradient pill */
.social-community-header {
  background: var(--edu-surface);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: none;
  padding: 0;
  overflow: hidden;
}

.social-community-nav {
  gap: clamp(10px, 2.8vw, 16px);
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.social-community-nav__link {
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.65rem clamp(12px, 3vw, 18px) 0.55rem;
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-secondary);
  font-size: 0.72rem;
  font-weight: 600;
  min-width: 4.5rem;
  justify-content: center;
}

.social-community-nav__link .edu-inline-icon-svg {
  width: 20px;
  height: 20px;
  stroke: var(--ink-secondary);
}

.social-community-nav__link:hover {
  color: var(--ink);
  background: var(--edu-surface-hover);
  border-color: transparent;
}

.social-community-nav__link.is-active {
  color: var(--brand);
  background: transparent;
  border-bottom-color: var(--brand);
}

.social-community-nav__link.is-active .edu-inline-icon-svg {
  stroke: var(--brand);
}

.social-community-header__filters {
  padding: 0.55rem 0.65rem !important;
  border-top: 1px solid var(--line) !important;
}

/* Filter tabs — LinkedIn pill on gray, active solid brand */
.community-filters--compact .community-filters__btn {
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: var(--edu-surface);
  color: var(--ink-secondary);
  font-weight: 600;
}

.community-filters--compact .community-filters__btn:hover {
  background: var(--edu-surface-hover);
  color: var(--ink);
}

.community-filters--compact .community-filters__btn.is-active,
.community-filters--compact .community-filters__btn--topic.is-active {
  background: transparent;
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: none;
}

/* Primary buttons — solid navy, LinkedIn pill radius */
.edu-btn.primary,
button.edu-btn.primary,
a.edu-btn.primary,
.auth-submit-pro,
.edu-lang-switch-btn.is-active {
  background: var(--brand);
  border-color: var(--brand);
  border-radius: 24px;
  box-shadow: none;
  font-weight: 600;
}

.edu-btn.primary:hover,
button.edu-btn.primary:hover,
a.edu-btn.primary:hover,
.auth-submit-pro:hover {
  background: var(--brand-hover, var(--brand-2));
  border-color: var(--brand-hover, var(--brand-2));
}

/* Links — brand color like LinkedIn */
a:not(.edu-btn):not(.social-community-nav__link):not(.community-filters__btn):hover {
  color: var(--brand);
}

/* Flatten gradient heroes from legacy override */
.hero,
.hero-section,
.main-hero,
.portal-hero,
.student-profile-hero,
.profile-edit-hero,
.pricing-hero,
.auth-hero,
.top-banner,
.app-hero,
.course-hero,
.subscription-hero,
.admin-hero,
.dashboard-hero,
.welcome-card,
.home-premium-hero {
  background: var(--edu-surface) !important;
  background-image: none !important;
  border: 1px solid var(--line-strong) !important;
  box-shadow: none !important;
}

.hero *,
.hero-section *,
.main-hero *,
.portal-hero *,
.home-premium-hero .hero-copy h1 {
  color: var(--ink) !important;
}

.hero p,
.hero-section p,
.main-hero p,
.portal-hero p,
.home-premium-hero .hero-copy p {
  color: var(--ink-secondary) !important;
}

/* Student / parent heroes — navy bar like LinkedIn top banner, not full purple gradient */
.edu-student-mode .student-hero,
.edu-parent-mode .parent-hero,
.edu-trainer-mode .trainer-hero {
  background: var(--brand) !important;
  border: 0 !important;
}

.edu-student-mode .student-hero *,
.edu-parent-mode .parent-hero *,
.edu-trainer-mode .trainer-hero * {
  color: #fff !important;
}

.edu-student-mode .student-hero .edu-btn.primary,
.edu-parent-mode .parent-hero .edu-btn.primary,
.edu-trainer-mode .trainer-hero .edu-btn.primary {
  background: #fff !important;
  color: var(--brand) !important;
  border-color: #fff !important;
}

/* Mobile bottom nav — LinkedIn: white bar, navy active icon */
.edu-bottom-nav {
  background: #fff !important;
  border: 1px solid var(--line-strong) !important;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08) !important;
}

.edu-bottom-nav a {
  color: var(--ink-secondary);
}

.edu-bottom-nav .edu-nav-icon {
  color: var(--ink-secondary);
}

.edu-bottom-nav a.active:not(.is-featured),
.edu-bottom-nav a.active:not(.is-featured) b,
.edu-bottom-nav a.active:not(.is-featured) .edu-nav-icon {
  color: var(--brand) !important;
}

.edu-bottom-nav a.active:not(.is-featured) .edu-nav-icon {
  background: transparent !important;
  box-shadow: none !important;
}

.edu-bottom-nav a:not(.active):not(.is-featured):hover .edu-nav-icon {
  color: var(--brand) !important;
  background: var(--brand-soft) !important;
}

.edu-bottom-nav a.is-featured .edu-nav-icon {
  background: var(--brand) !important;
  box-shadow: 0 4px 12px rgba(11, 20, 38, 0.25), 0 0 0 4px #fff !important;
}

.edu-bottom-nav a.is-featured.active .edu-nav-icon {
  background: var(--brand-dark) !important;
}

/* Legacy mobile nav override */
.mobile-bottom-nav,
.bottom-nav,
.mobile-nav,
.fixed-bottom-nav {
  background: #fff !important;
  border-top: 1px solid var(--line-strong) !important;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08) !important;
}

.mobile-bottom-nav a,
.bottom-nav a,
.mobile-nav a,
.fixed-bottom-nav a {
  color: var(--ink-secondary) !important;
}

.mobile-bottom-nav a.active,
.bottom-nav a.active,
.mobile-nav a.active,
.fixed-bottom-nav a.active {
  color: var(--brand) !important;
  background: transparent !important;
}

.mobile-bottom-nav i,
.bottom-nav i,
.mobile-nav i,
.fixed-bottom-nav i {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Forms — LinkedIn focus ring */
input:focus,
select:focus,
textarea:focus,
.edu-input:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 1px var(--brand) !important;
}

/* GX home promo — dark theme */
.gx-home-promo,
html.edu-view-web .edu-web-content .gx-home-promo {
  background: linear-gradient(135deg, #070d18 0%, #0b1426 52%, #152238 100%) !important;
  background-image: linear-gradient(135deg, #070d18 0%, #0b1426 52%, #152238 100%) !important;
  color: #fff !important;
}

.gx-home-promo__shade {
  display: none !important;
}

.inst-b2b-banner.edu-ov-banner--photo .inst-b2b-banner__shade,
.edu-home-hero--corp .edu-home-hero__shade {
  background: linear-gradient(
    to left,
    rgba(11, 20, 38, 0.88) 0%,
    rgba(11, 20, 38, 0.5) 40%,
    transparent 65%
  ) !important;
}

html[dir="ltr"] .inst-b2b-banner.edu-ov-banner--photo .inst-b2b-banner__shade,
html[dir="ltr"] .edu-home-hero--corp .edu-home-hero__shade {
  background: linear-gradient(
    to right,
    rgba(11, 20, 38, 0.88) 0%,
    rgba(11, 20, 38, 0.5) 40%,
    transparent 65%
  ) !important;
}

.inst-b2b-banner .inst-hero__orb--2 {
  background: rgba(11, 20, 38, 0.12) !important;
}

.edu-mkt-banner,
.edu-home-hero--corp:not(.edu-ov-banner--photo) {
  background: #0B1426 !important;
  background-image: none !important;
}

/* —— Post actions (LinkedIn): no dark button backgrounds —— */
.social-post__action,
.social-post__action:hover,
.social-post__action:focus,
.social-post__action:active,
.social-post__menu-btn,
.social-post__menu-btn:hover,
.social-post__reactions-line,
.social-reaction-picker__item,
.social-compose__cancel,
.social-compose__cancel:hover {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--ink-secondary) !important;
}

.social-post__action {
  border-radius: 4px !important;
  font-weight: 600 !important;
  min-height: 40px !important;
}

.social-post__action:hover,
.social-post__menu-btn:hover {
  background: var(--edu-surface-hover) !important;
  color: var(--ink) !important;
}

.social-post__action .social-action-icon .edu-inline-icon-svg,
.social-post__action:not(.is-active):not(.is-reacted) .edu-inline-icon-svg {
  stroke: var(--ink-secondary) !important;
}

.social-post__action:hover .social-action-icon .edu-inline-icon-svg {
  stroke: var(--ink) !important;
}

.social-post__actions {
  border-top: 1px solid var(--line) !important;
  padding-top: 0.25rem !important;
  gap: 0 !important;
}

.social-post,
.social-compose,
.community-ui-card {
  background: var(--edu-surface) !important;
  border: 1px solid var(--line-strong) !important;
  box-shadow: none !important;
}

.social-post__type,
.social-post__type--achievement,
.social-sidebar-card__role,
.social-post--achievement .social-post__type {
  background: var(--soft) !important;
  color: var(--brand) !important;
  border: 0 !important;
}

.social-comment__avatar {
  background: var(--soft) !important;
  color: var(--brand) !important;
}

.social-comment__body {
  background: var(--soft) !important;
}

/* —— Explore mega menu: clean, no dark fills —— */
.edu-web-header__explore-tab,
.edu-web-header__explore-tab:hover,
.edu-web-header__explore-tab.is-active {
  background: transparent !important;
  color: var(--ink-secondary) !important;
  border-radius: 4px !important;
}

.edu-web-header__explore-tab:hover,
.edu-web-header__explore-tab.is-active {
  color: var(--brand) !important;
  background: var(--edu-surface-hover) !important;
}

.edu-web-header__mega-cats a {
  background: transparent !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--ink-secondary) !important;
  box-shadow: none !important;
}

.edu-web-header__mega-cats a:hover {
  background: var(--edu-surface-hover) !important;
  border-color: var(--line-strong) !important;
  color: var(--brand) !important;
}

.edu-web-header__mega-card {
  background: transparent !important;
  box-shadow: none !important;
}

.edu-web-header__mega-card:hover {
  background: var(--edu-surface-hover) !important;
  box-shadow: none !important;
}

.edu-web-header__mega-side {
  background: var(--soft) !important;
}

/* —— Community / explore filters: outline active, no dark fill —— */
.community-filters__btn,
.community-filters--compact .community-filters__btn,
html.edu-view-web .edu-web-content .edu-page-community .community-filters__btn--topic.is-active,
.community-filters--compact .community-filters__btn.is-active,
.community-filters--compact .community-filters__btn--topic.is-active,
html.edu-view-web .edu-web-content .edu-page-community .community-filters__btn--opp.is-active {
  background: transparent !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--ink-secondary) !important;
  box-shadow: none !important;
}

.community-filters__btn:hover,
.community-filters--compact .community-filters__btn:hover {
  background: var(--edu-surface-hover) !important;
  color: var(--ink) !important;
}

.community-filters__btn.is-active,
.community-filters--compact .community-filters__btn.is-active,
.community-filters--compact .community-filters__btn--topic.is-active,
html.edu-view-web .edu-web-content .edu-page-community .community-filters__btn--topic.is-active,
html.edu-view-web .edu-web-content .edu-page-community .community-filters__btn--opp.is-active {
  background: transparent !important;
  border-color: var(--brand) !important;
  color: var(--brand) !important;
  box-shadow: none !important;
}

.community-filters__btn.is-active .edu-inline-icon-svg,
.community-filters--compact .community-filters__btn.is-active .edu-inline-icon-svg {
  stroke: var(--brand) !important;
}

.community-filters--compact {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0.35rem 0 !important;
}

/* Sidebar — flat navy cover, no purple gradient */
.social-sidebar-card__cover,
.social-sidebar-card--rail .social-sidebar-card__cover {
  background: var(--brand) !important;
  background-image: none !important;
}

.social-sidebar-card__avatar--initial {
  background: var(--brand) !important;
  background-image: none !important;
}

.social-sidebar-card__cta,
.social-sidebar-card--rail .social-sidebar-card__cta {
  background: transparent !important;
  border: 1px solid var(--brand) !important;
  color: var(--brand) !important;
  box-shadow: none !important;
}

.social-sidebar-card__cta:hover,
.social-sidebar-card--rail .social-sidebar-card__cta:hover {
  background: var(--brand-soft) !important;
}

/* Reaction colors — no purple */
.social-post__action--react-support.is-active { color: #057642 !important; }
.social-post__action--react-like.is-active,
.social-post__action--react.is-reacted .social-reaction-icon { color: #0a66c2 !important; }

/* —— Cart, wishlist & course cards — no purple tints —— */
.shop-app {
  --shop-purple: #0B1426 !important;
  --shop-purple-hover: #152238 !important;
  --shop-purple-soft: #F3F2EF !important;
  --shop-purple-line: #D8DEE8 !important;
}

.edu-app-icon--menu {
  background: #F3F2EF !important;
  color: #0B1426 !important;
}

.edu-web-header__icon.edu-shop-icon em {
  background: #0B1426 !important;
  box-shadow: 0 2px 8px rgba(11, 20, 38, 0.25) !important;
}

.edu-programs-app--v3 .pro-hero-v3 {
  background:
    radial-gradient(ellipse 80% 120% at 12% 50%, rgba(11, 20, 38, 0.55), transparent 58%),
    radial-gradient(circle at 88% 18%, rgba(249, 115, 22, 0.16), transparent 42%),
    linear-gradient(128deg, #070D18 0%, #152238 38%, #0B1426 62%, #152238 100%) !important;
}

.edu-programs-app--v3 .pro-program-card,
.edu-courses-page--v3 .pro-program-card,
.edu-courses-page--v3 .pro-course-card {
  border-color: #E8E8E8 !important;
  background: #fff !important;
}

.edu-programs-app--v3 .pro-program-card--featured,
.edu-courses-page--v3 .pro-program-card--featured {
  border-color: #D8DEE8 !important;
  box-shadow: 0 16px 40px rgba(11, 20, 38, 0.12) !important;
}

.edu-programs-app--v3 .pro-program-body p,
.edu-courses-page--v3 .pro-program-body p {
  color: #666666 !important;
}

.pro-footer-cta-v3 {
  background: linear-gradient(135deg, #F3F2EF, #fff) !important;
  border-color: #E8E8E8 !important;
}

.pro-footer-cta-v3 p {
  color: #666666 !important;
}

.edu-udemy-card {
  border-color: #E8E8E8 !important;
}

.marquee-category-pill {
  background: linear-gradient(180deg, #fff 0%, #F3F2EF 100%) !important;
  border-color: #E8E8E8 !important;
}

.marquee-category-pill span,
.edu-home-app .edu-category-marquee .marquee-category-pill__icon .edu-app-icon {
  background: #F3F2EF !important;
}

.edu-courses-pro-banner {
  background: linear-gradient(135deg, #F3F2EF, #fff) !important;
  border-color: #E8E8E8 !important;
}

.edu-courses-pro-banner p {
  color: #666666 !important;
}