/*
 * KAC corporate branding — Reign CSS variable overrides.
 *
 * Remaps all --reign-* custom properties to KAC brand tokens so the
 * entire Reign surface (header, footer, buttons, sidebar, menus,
 * LearnDash, forms) renders in KAC corporate colors without touching
 * any PHP templates.
 *
 * Loaded AFTER Reign's main.css and tokens.css — specificity wins via
 * the cascade, no !important needed.
 *
 * Token source: tokens.css (--kac-*) mirroring frontend/tailwind.config.ts.
 */

:root {
  /* ──────────────────────────────────────────────────────────────
   * Global accent / theme color
   * ────────────────────────────────────────────────────────────── */
  --reign-accent-color:                  var(--kac-brand);          /* #2952A3 */
  --reign-accent-hover-color:            var(--kac-navy);           /* #1B2A5E */
  --reign-colors-theme:                  var(--kac-brand);
  --reign-colors-theme-rgb:              41, 82, 163;

  /* ──────────────────────────────────────────────────────────────
   * Header — top bar
   * ────────────────────────────────────────────────────────────── */
  --reign-header-topbar-bg-color:        var(--kac-navy-dark);      /* #0F1A3D */
  --reign-header-topbar-text-color:      #ffffff;
  --reign-header-topbar-text-hover-color: var(--kac-gold);          /* #C9A84C */

  /* ──────────────────────────────────────────────────────────────
   * Header — main bar
   * ────────────────────────────────────────────────────────────── */
  --reign-header-bg-color:               #ffffff;
  --reign-header-nav-bg-color:           var(--kac-page);           /* #F5F7FA */
  --reign-title-tagline-typography:       var(--kac-navy-dark);
  --reign-header-icon-color:             var(--kac-navy);
  --reign-header-icon-hover-color:       var(--kac-brand);

  /* ──────────────────────────────────────────────────────────────
   * Header — main menu
   * ────────────────────────────────────────────────────────────── */
  --reign-header-main-menu-font:         var(--kac-navy-dark);
  --reign-header-main-menu-text-hover-color:   var(--kac-brand);
  --reign-header-main-menu-text-active-color:  var(--kac-brand);
  --reign-header-main-menu-bg-hover-color:     var(--kac-brand);
  --reign-header-main-menu-bg-active-color:    var(--kac-brand);

  /* ──────────────────────────────────────────────────────────────
   * Header — sub menus (dropdowns)
   * ────────────────────────────────────────────────────────────── */
  --reign-header-sub-menu-bg-color:      #ffffff;
  --reign-header-sub-menu-font:          var(--kac-navy-dark);
  --reign-header-sub-menu-text-hover-color:    #ffffff;
  --reign-header-sub-menu-bg-hover-color:      var(--kac-brand);

  /* ──────────────────────────────────────────────────────────────
   * Mobile menu
   * ────────────────────────────────────────────────────────────── */
  --reign-mobile-menu-bg-color:          #ffffff;
  --reign-mobile-menu-color:             var(--kac-navy-dark);
  --reign-mobile-menu-hover-color:       var(--kac-brand);
  --reign-mobile-menu-active-color:      var(--kac-brand);
  --reign-mobile-menu-active-color-rgb:  41, 82, 163;
  --reign-mobile-menu-active-bg-color:   rgba(41, 82, 163, 0.1);
  --reign-mobile-sub-menu-bg-hover-color: var(--kac-brand);

  /* ──────────────────────────────────────────────────────────────
   * Left panel / sidebar
   * ────────────────────────────────────────────────────────────── */
  --reign-left-panel-bg-color:           #ffffff;
  --reign-left-panel-toggle-color:       var(--kac-brand);
  --reign-left-panel-menu-font-color:    var(--kac-navy-dark);
  --reign-left-panel-menu-bg-active-color:     var(--kac-brand);
  --reign-left-panel-menu-bg-active-color-rgb: 41, 82, 163;
  --reign-left-panel-menu-icon-active-color:   #ffffff;
  --reign-left-panel-menu-bg-hover-color:      rgba(41, 82, 163, 0.1);
  --reign-left-panel-menu-hover-color:         var(--kac-navy-dark);
  --reign-left-panel-tooltip-bg-color:         var(--kac-navy-dark);
  --reign-left-panel-tooltip-color:            #ffffff;

  /* ──────────────────────────────────────────────────────────────
   * Body / content area
   * ────────────────────────────────────────────────────────────── */
  --reign-site-body-bg-color:            var(--kac-page);           /* #F5F7FA */
  --reign-site-body-text-color:          var(--kac-ink-2);          /* #5A6578 */
  --reign-site-alternate-text-color:     var(--kac-ink-2);
  --reign-site-sections-bg-color:        var(--kac-surface);        /* #FFFFFF */
  --reign-site-secondary-bg-color:       var(--kac-page);
  --reign-site-headings-color:           var(--kac-navy-dark);      /* #0F1A3D */
  --reign-site-link-color:               var(--kac-navy-dark);
  --reign-site-link-hover-color:         var(--kac-brand);

  /* ──────────────────────────────────────────────────────────────
   * Buttons
   * ────────────────────────────────────────────────────────────── */
  --reign-site-button-text-color:        #ffffff;
  --reign-site-button-text-hover-color:  #ffffff;
  --reign-site-button-bg-color:          var(--kac-brand);
  --reign-site-button-bg-hover-color:    var(--kac-navy);

  /* ──────────────────────────────────────────────────────────────
   * Borders
   * ────────────────────────────────────────────────────────────── */
  --reign-site-border-color:             var(--kac-border);         /* #E2E8F0 */
  --reign-site-hr-color:                 var(--kac-border);

  /* ──────────────────────────────────────────────────────────────
   * Footer — widget area
   * ────────────────────────────────────────────────────────────── */
  --reign-footer-widget-area-bg-color:   var(--kac-navy);           /* #1B2A5E */
  --reign-footer-widget-title-color:     #ffffff;
  --reign-footer-widget-text-color:      rgba(255, 255, 255, 0.75);
  --reign-footer-widget-link-color:      rgba(255, 255, 255, 0.85);
  --reign-footer-widget-link-hover-color: var(--kac-gold);

  /* ──────────────────────────────────────────────────────────────
   * Footer — copyright bar
   * ────────────────────────────────────────────────────────────── */
  --reign-footer-copyright-bg-color:     var(--kac-navy-dark);      /* #0F1A3D */
  --reign-footer-copyright-text-color:   rgba(255, 255, 255, 0.6);
  --reign-footer-copyright-link-color:   rgba(255, 255, 255, 0.8);
  --reign-footer-copyright-link-hover-color: var(--kac-gold);

  /* ──────────────────────────────────────────────────────────────
   * Forms
   * ────────────────────────────────────────────────────────────── */
  --reign-form-text-color:               var(--kac-ink);
  --reign-form-background-color:         var(--kac-surface);
  --reign-form-border-color:             var(--kac-border);
  --reign-form-placeholder-color:        var(--kac-ink-2);
  --reign-form-focus-text-color:         var(--kac-ink);
  --reign-form-focus-background-color:   var(--kac-surface);
  --reign-form-focus-border-color:       var(--kac-brand);
  --reign-form-focus-placeholder-color:  var(--kac-ink-2);

  /* ──────────────────────────────────────────────────────────────
   * Status colors (keep KAC's)
   * ────────────────────────────────────────────────────────────── */
  --reign-color-success:                 var(--kac-success);        /* #22C55E */
  --reign-color-error:                   var(--kac-danger);         /* #EF4444 */
  --reign-color-loading:                 var(--kac-gold);           /* #C9A84C */
  --reign-color-info:                    var(--kac-brand);

  /* ──────────────────────────────────────────────────────────────
   * Geometry — match KAC portal radii
   * ────────────────────────────────────────────────────────────── */
  --reign-global-border-radius:          var(--kac-radius-lg);      /* 12px */
  --reign-global-border-radius-inner:    var(--kac-radius-md);      /* 8px */
  --reign-global-button-radius:          var(--kac-radius-md);
  --reign-global-form-radius:            var(--kac-radius-md);

  /* ──────────────────────────────────────────────────────────────
   * Elevation
   * ────────────────────────────────────────────────────────────── */
  --reign-more-options-box-shadow:       var(--kac-shadow-card);
}

/*
 * LearnDash core --ld-* variables.
 *
 * The dashboard vars (--ld-primary-color etc.) already reference
 * --reign-* which we override above. These additional vars cover
 * the LD form fields, system colors, and one hardcoded value.
 */
:root {
  /* Dashboard — override the one hardcoded value */
  --ld-background2:                      var(--kac-page);

  /* LD form fields */
  --ld-color-field-bg:                   var(--kac-surface);
  --ld-color-field-bg-active:            var(--kac-surface);
  --ld-color-field-bg-hover:             var(--kac-page);
  --ld-color-field-bg-disabled:          var(--kac-page);
  --ld-color-field-border:               var(--kac-border);
  --ld-color-field-border-active:        var(--kac-brand);
  --ld-color-field-border-disabled:      var(--kac-border);
  --ld-color-field-text:                 var(--kac-ink);
  --ld-color-field-text-active:          var(--kac-ink);
  --ld-color-field-text-disabled:        var(--kac-ink-2);
  --ld-color-field-text-error:           var(--kac-danger);
  --ld-color-field-text-valid:           var(--kac-success);
  --ld-color-field-description:          var(--kac-ink-2);
  --ld-color-field-error:                var(--kac-danger);
  --ld-color-label:                      var(--kac-navy-dark);

  /* LD system colors */
  --ld-color-semantic-error:             var(--kac-danger);
  --ld-color-semantic-success:           var(--kac-success);
  --ld-color-system-body-text:           var(--kac-ink-2);
  --ld-color-system-border:              var(--kac-border);
  --ld-color-system-light-2:             var(--kac-page);
  --ld-color-system-middle-gray:         var(--kac-ink-2);
  --ld-color-system-middle-gray-light:   var(--kac-border);
  --ld-color-system-subtle:              var(--kac-page);
}

/*
 * LearnDash Focus Mode — branded sidebar and topbar.
 */
.learndash-wrapper .ld-focus .ld-focus-header {
  background: var(--kac-navy-dark) !important;
}

.learndash-wrapper .ld-focus .ld-focus-header .ld-focus-header-main .ld-focus-title {
  color: #fff !important;
}

.learndash-wrapper .ld-focus .ld-focus-sidebar {
  background: var(--kac-surface) !important;
  border-right-color: var(--kac-border) !important;
}

.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger {
  background: var(--kac-brand) !important;
  color: #fff !important;
}

.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-lesson-item.ld-is-current-lesson {
  border-left-color: var(--kac-brand) !important;
}

.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-lesson-item.ld-is-current-lesson .ld-lesson-title {
  color: var(--kac-brand) !important;
  font-weight: 600;
}

/* Focus mode progress bar */
.learndash-wrapper .ld-focus .ld-focus-header .ld-progress .ld-progress-bar .ld-progress-bar-percentage {
  background: var(--kac-gold) !important;
}

/*
 * LearnDash course navigation tabs.
 */
.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab.ld-active {
  border-bottom-color: var(--kac-brand) !important;
  color: var(--kac-brand) !important;
}

.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab:hover {
  color: var(--kac-brand) !important;
}

/*
 * LearnDash expand/collapse panels.
 */
.learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-expanded {
  border-top-color: var(--kac-border) !important;
}

.learndash-wrapper .ld-item-list .ld-item-list-item .ld-expand-button {
  color: var(--kac-brand) !important;
}

.learndash-wrapper .ld-item-list .ld-item-list-item .ld-expand-button:hover {
  color: var(--kac-navy) !important;
}

/*
 * LearnDash single course header banner — navy blue.
 */
.learndash-single-course-header {
  background-color: var(--kac-navy) !important;
}

.learndash-single-course-header::before {
  background-color: var(--kac-navy-dark) !important;
  background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0) 4%, var(--kac-navy-dark) 100%) !important;
}

/*
 * LearnDash course card grid — gold accent on progress bars
 * and KAC navy on course titles for the archive page.
 */
.learndash-wrapper .ld-progress .ld-progress-bar .ld-progress-bar-percentage {
  background: var(--kac-brand) !important;
}

.learndash-wrapper .ld-item-list .ld-item-list-item a.ld-item-name {
  color: var(--kac-navy-dark);
}

.learndash-wrapper .ld-item-list .ld-item-list-item a.ld-item-name:hover {
  color: var(--kac-brand);
}

/*
 * Course archive grid cards — consistent card styling.
 */
.learndash-course-list .ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price {
  background: var(--kac-brand);
}

.learndash-course-list .ld-course-list-items .ld_course_grid .btn-primary,
.learndash-wrapper .ld-login-modal input[type="submit"],
.learndash-wrapper .learndash_join_button,
#learndash_start_quiz .btn-join {
  background: var(--kac-brand) !important;
  border-color: var(--kac-brand) !important;
}

.learndash-course-list .ld-course-list-items .ld_course_grid .btn-primary:hover,
.learndash-wrapper .learndash_join_button:hover {
  background: var(--kac-navy) !important;
  border-color: var(--kac-navy) !important;
}

/*
 * Reign course archive page overrides.
 */
.reign-course-inner .course-content h3 a {
  color: var(--kac-navy-dark);
}

.reign-course-inner .course-content h3 a:hover {
  color: var(--kac-brand);
}

.reign-course-inner .reign-course-info {
  border-top-color: var(--kac-border);
}