/*
 * Cytonn Learning Hub — Custom CSS
 * Upload under Admin > Theme Editor > "Upload CSS" (applies site-wide via
 * include_account_css). Brand *colors* come from the Theme Editor variables
 * (see brand_variables.json); this file is the polish the variables can't reach.
 * Keep it conservative — it loads on every Canvas page.
 */

:root {
  --clh-blue: #0B5FA5;
  --clh-navy: #16324F;
  --clh-gold: #E8A33D;
  --clh-ink: #2D3B45;
  --clh-radius: 10px;
}

/* Rounder, softer cards and buttons for a friendlier portal feel. */
.ic-DashboardCard,
.ic-Login,
.Button--primary,
.btn-primary {
  border-radius: var(--clh-radius) !important;
}

/* Dashboard course cards: lift on hover, brand the header bar. */
.ic-DashboardCard {
  box-shadow: 0 1px 4px rgba(22, 50, 79, .10);
  transition: box-shadow .15s ease, transform .15s ease;
}
.ic-DashboardCard:hover {
  box-shadow: 0 6px 18px rgba(22, 50, 79, .16);
  transform: translateY(-2px);
}

/* Global nav: a subtle brand hairline under the active item. */
.ic-app-header__menu-list-item--active {
  box-shadow: inset 3px 0 0 0 var(--clh-gold);
}

/* Global nav logo: give the mark breathing room and a consistent height so the
   round icon doesn't crowd the top of the nav. (!important to beat the framework
   defaults on these classes.) */
.ic-app-header__logomark-container {
  padding: 20px 0 !important;
}
body.primary-nav-expanded .ic-app-header__logomark {
  height: 40px !important;
}

/* Reinforce link + primary button color even where a component hard-codes it. */
a:not(.btn):not(.Button) { color: var(--clh-blue); }
.Button--primary, .btn-primary {
  background-color: var(--clh-blue);
  border-color: var(--clh-blue);
}

/* Course navigation: the default active item blends into the background once our
   brand link color applies, so the selected page is unreadable. Give it a clear,
   branded state — tinted background, navy text, gold left accent. */
#section-tabs a.active,
.section-tabs a.active {
  background-color: rgba(11, 95, 165, .10) !important;
  color: var(--clh-navy) !important;
  font-weight: 700;
  box-shadow: inset 4px 0 0 0 var(--clh-gold);
}

/* Course "mandatory" affordance: pair this class with the mandatory flag in
   any custom list rendering, or use it from the portal pages. */
.clh-badge-mandatory {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--clh-gold);
  border-radius: 999px;
  padding: 2px 10px;
}

/* Kill the flash of the stock Canvas dashboard at "/" before custom.js redirects
   to the portal Dashboard. #dashboard.ic-dashboard-app is the server-rendered
   dashboard wrapper (present at first paint) and exists only on that page — which
   we always redirect away from — so hiding it globally is safe. This loads in
   <head> via include_account_css, so it applies before the content paints. */
#dashboard.ic-dashboard-app { visibility: hidden !important; }

/* Slightly tighter, more modern typography for headings. */
.ic-app-main-content h1,
h1.ic-Action-header__Heading {
  letter-spacing: -0.01em;
}

/* Cytonn SSO login button label. The core login partial
   (app/views/shared/_auth_type_icon.html.erb) renders the raw auth_type
   ("cytonn_passport") as the visible button text, and auth_type must stay
   "cytonn_passport" (STI/route key). The provider class's display_name covers
   the admin UI, provider dropdown and screen-reader text; this relabels the
   visible single-provider button to "Cytonn SSO". */
.ic-Login__sso-button__title--cytonn_passport,
.ic-Login__sso-button__title--cytonn_passport .ic-Login__sso-button__title-caps {
  font-size: 0 !important;
}
.ic-Login__sso-button__title--cytonn_passport::after {
  content: "Login with Cytonn SSO";
  font-size: 14px !important;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}