/* local_welcome site-wide house styling — loads on ALL pages (frontend + dashboard)
 *
 * RULE: paint only (colour, background, border, border-radius, box-shadow).
 * Do not set display, flex, width, height, padding, margin, overflow, or
 * transform on Moodle/Edumy layout. Theme owns stacking and mobile layout.
 */

/* ==========================================================================
   REMOVAL OF CONTENT #1 — Site home Welcome blurb + “Course categories” title
   --------------------------------------------------------------------------
   Welcome body cleared; section renamed “Learning Portal” (thin title).
   Hides skip-link + “Course categories” heading + availability badges.
   Backup: local/welcome/rollback/removal_content_01_*.json
   ========================================================================== */
body#page-site-index a.skip-block,
body#page-site-index .skip-block,
body.path-site a.skip-block,
body#page-site-index .ccnPseudoFrontpageBlock > .row:first-child,
body#page-site-index .ccnPseudoFrontpageBlock .main-title,
body#page-site-index .ccnPseudoFrontpageBlock h3,
body#page-site-index .frontpage-category-names .main-title,
body#page-site-index .frontpage-category-names > h2,
body#page-site-index .frontpage-category-names > h3 {
  display: none !important;
}
/* “Not available” / hidden-section badges on site home */
body#page-site-index .section .badge,
body#page-site-index .section .availabilityinfo,
body#page-site-index .sectionname .badge,
body#page-site-index .course-section-header .badge,
body#page-site-index span.badge-warning,
body#page-site-index .badge-info,
body#page-site-index .ishidden,
body#page-site-index .hidden-section,
body#page-site-index .section .section_availability,
body#page-site-index [data-region="sectionbadges"],
body#page-site-index .course-section-header .course-tool-area {
  display: none !important;
}
/* Minimal “Learning Portal” section title — light weight, not heavy bold */
body#page-site-index .section .sectionname,
body#page-site-index .sectionname,
body#page-site-index .course-section-header .sectionname,
body#page-site-index .course-section-header h3,
body#page-site-index #section-1 .sectionname,
body#page-site-index #section-1 h3.sectionname,
body#page-site-index .section-handle + .sectionname,
body#page-site-index .content .sectionname {
  font-weight: 300 !important;
  font-size: clamp(1.15rem, 2vw, 1.45rem) !important;
  letter-spacing: 0.04em !important;
  color: #1a1a1a !important;
  text-transform: none !important;
}
body#page-site-index .ccnPseudoFrontpageBlock {
  margin-top: 0 !important;
  margin-bottom: 30px !important;
  padding-top: 10px !important;
}
/* === END REMOVAL OF CONTENT #1 === */

/* Bright white = same as preferred course cards (#ffffff), not Edumy #f9fafc mud */
body,
body #page,
body #page-wrapper,
body .main-content,
body .wrapper,
body .our-dashbord,
body .dashboard_main_content,
body .dashboard_main_content .main_content_container,
body .ccn_context_dashboard,
body .ccn_context_dashboard #page,
body .ccn_context_dashboard .our-dashbord,
body .courses-list,
body .my_course_content,
body .my_course_content_container,
body .breadcrumb_widgets,
body .card,
body .block,
body .block .card-body,
body .block .card,
body .modal-content,
body .dropdown-menu,
body .list-group-item,
body .course-content,
body .shadow_box,
body .instructor_search_result,
body .application_statics,
body .dashboard_sidebar:before {
  background-color: #ffffff !important;
  background-image: none !important;
}
/* Kill common muddy greys wherever Edumy paints them on content surfaces */
body .our-dashbord,
body .courses-list,
body .breadcrumb_widgets,
body .dashbord_nav_list li.active,
body.ccn_context_dashboard .block,
body.ccn_context_dashboard .card {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

/* === IMMANUEL HEADER ICONS (gold / dark blue) === */
/* Bright alive gold — applies on frontend AND dashboard / My courses */
body .header_user_notif li .dropdown .notification_icon,
body .header_user_notif a.notification_icon,
body .header_user_notif .notification_icon,
body .ccn_context_dashboard .header_user_notif .notification_icon,
body .ccn_context_frontend .header_user_notif .notification_icon,
body header .header_user_notif .notification_icon,
body .user_notif .notification_icon,
body #ccnToggleDarkMode.notification_icon {
  background-color: #07123F !important;
  background-image: none !important;
  color: #FFC933 !important;
  box-shadow:
    0 0 0 2px #FFC933,
    0 0 10px rgba(255, 201, 51, 0.55),
    inset 0 0 0 1px rgba(255, 230, 140, 0.35) !important;
  border: none !important;
}
body .header_user_notif .notification_icon .icon,
body .header_user_notif .notification_icon i,
body .header_user_notif .notification_icon span,
body .header_user_notif .notification_icon:before,
body .header_user_notif .notification_icon span:before,
body .header_user_notif .notification_icon .icon:before,
body .ccn_context_dashboard .header_user_notif .notification_icon span:before,
body .ccn_context_dashboard .header_user_notif .notification_icon .icon,
body #ccnToggleDarkMode.notification_icon span,
body #ccnToggleDarkMode.notification_icon span:before {
  color: #FFC933 !important;
  text-shadow: 0 0 6px rgba(255, 201, 51, 0.65);
}
/* Flaticon / font icons inherit fill via color */
body .header_user_notif .notification_icon [class*="flaticon"],
body .header_user_notif .notification_icon [class^="fa"] {
  color: #FFC933 !important;
}
body .header_user_notif .notification_icon .count-container,
body .header_user_notif .notification_icon .count,
body .header_user_notif .count-container,
body .popover-region .count-container {
  background-color: #FFC933 !important;
  color: #07123F !important;
  border: none !important;
  box-shadow: 0 0 6px rgba(255, 201, 51, 0.7);
}
/* === END IMMANUEL HEADER ICONS === */

/* === IMMANUEL CARDS + HERO GRADIENT === */
/* ONE seamless banner only — never paint an inner breadcrumb box */
body .inner_page_breadcrumb {
  background-color: transparent !important;
  background-image: linear-gradient(
    115deg,
    #0E2A6B 0%,
    #1A3F9E 38%,
    #4A3A9E 72%,
    #2F2A7A 100%
  ) !important;
}
body .inner_page_breadcrumb:before {
  background-image: none !important;
  background-color: transparent !important;
  opacity: 0 !important;
}
body .inner_page_breadcrumb .breadcrumb_content,
body .inner_page_breadcrumb_content,
body .breadcrumb_content,
body .inner_page_breadcrumb .row,
body .inner_page_breadcrumb .col-xl-12,
body .inner_page_breadcrumb [class*="col-"] {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
body .inner_page_breadcrumb .breadcrumb_title,
body .inner_page_breadcrumb .breadcrumb,
body .inner_page_breadcrumb .breadcrumb-item,
body .inner_page_breadcrumb .breadcrumb-item a,
body .inner_page_breadcrumb .breadcrumb-item.active,
body .inner_page_breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: #ffffff !important;
  background: transparent !important;
}

/* Course + category cards — paint only. Do not target My courses list rows. */
body .top_courses,
body .hvr_img_box_container,
body .hvr_img_box_container.home13,
body .course-card,
body .card.dashboard-card,
body .block-cards .card,
body .dashboard-card-deck .card {
  border-radius: 16px !important;
  border: 1px solid rgba(14, 42, 107, 0.10) !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow:
    0 2px 6px rgba(14, 42, 107, 0.06),
    0 10px 22px rgba(14, 42, 107, 0.07);
  transition: box-shadow 0.35s ease, border-color 0.35s ease !important;
}

body .top_courses .thumb,
body .top_courses .thumb img.img-whp,
body .hvr_img_box_container .hvr_img_box,
body .course-card .card-img-top {
  border-radius: 12px !important;
}

body .top_courses .details,
body .top_courses .tc_content,
body .top_courses .tc_footer {
  background: transparent !important;
}

body .top_courses:hover,
body .hvr_img_box_container:hover,
body .course-card:hover,
body .card.dashboard-card:hover,
body .block-cards .card:hover,
body .dashboard-card-deck .card:hover {
  border-color: rgba(74, 58, 158, 0.35) !important;
  box-shadow:
    0 14px 28px rgba(14, 42, 107, 0.16),
    0 0 0 1px rgba(255, 201, 51, 0.35);
}

/* My courses filter buttons — keep blue/gold, not purple */
body .my_course_content .btn-outline-secondary,
body .block-myoverview .btn-outline-secondary,
body .my_course_content_header .btn,
body .block-myoverview .dropdown-toggle {
  background-color: #0B1A5C !important;
  border-color: #FFC933 !important;
  color: #FFC933 !important;
  border-radius: 999px !important;
}
body .my_course_content .btn-outline-secondary:hover,
body .block-myoverview .btn-outline-secondary:hover {
  background-color: #143A8C !important;
  color: #ffffff !important;
}

@media (prefers-reduced-motion: reduce) {
  body .top_courses,
  body .hvr_img_box_container,
  body .course-card,
  body .card.dashboard-card,
  body .block-cards .card,
  body .dashboard-card-deck .card {
    transition: none !important;
  }
}
/* === END IMMANUEL CARDS + HERO GRADIENT === */

/* === IMMANUEL DASHBOARD EXTRAS (My courses /my/*) === */
body.ccn_context_dashboard .header_user_notif .notification_icon,
body.ccn_context_dashboard .header_user_notif a.notification_icon,
body.ccn_context_dashboard .header_user_notif li .dropdown .notification_icon,
body.ccn_context_dashboard .ccn-settings-nav .notification_icon,
body .header-nav.dashbord_pages .notification_icon,
body .header-nav.dashbord_pages .header_user_notif .notification_icon,
body.path-my .header_user_notif .notification_icon,
body.path-my .notification_icon {
  background-color: #07123F !important;
  background-image: none !important;
  color: #FFC933 !important;
  box-shadow:
    0 0 0 2px #FFC933,
    0 0 10px rgba(255, 201, 51, 0.55),
    inset 0 0 0 1px rgba(255, 230, 140, 0.35) !important;
}
body.ccn_context_dashboard .header_user_notif .notification_icon span,
body.ccn_context_dashboard .header_user_notif .notification_icon span:before,
body.ccn_context_dashboard .header_user_notif .notification_icon .icon,
body.ccn_context_dashboard .header_user_notif .notification_icon .icon:before,
body.ccn_context_dashboard .ccn-settings-nav .notification_icon > .icon,
body.path-my .header_user_notif .notification_icon span:before,
body.path-my .notification_icon .icon {
  color: #FFC933 !important;
  text-shadow: 0 0 6px rgba(255, 201, 51, 0.65);
}
body.ccn_context_dashboard .header_user_notif .count-container,
body.path-my .header_user_notif .count-container,
body.path-my .popover-region .count-container {
  background-color: #FFC933 !important;
  color: #07123F !important;
}

/* Dashboard course cards (grid tiles) — paint only, no list-row layout */
body.ccn_context_dashboard .course-card,
body.ccn_context_dashboard .card.dashboard-card,
body.ccn_context_dashboard .dashboard-card-deck .card,
body.path-my .course-card,
body.path-my .card.dashboard-card,
body.path-my .dashboard-card-deck .card {
  border-radius: 16px !important;
  box-shadow:
    0 2px 6px rgba(14, 42, 107, 0.06),
    0 10px 22px rgba(14, 42, 107, 0.07) !important;
}
body.ccn_context_dashboard .course-card:hover,
body.ccn_context_dashboard .card.dashboard-card:hover,
body.path-my .course-card:hover,
body.path-my .card.dashboard-card:hover {
  box-shadow:
    0 14px 28px rgba(14, 42, 107, 0.16),
    0 0 0 1px rgba(255, 201, 51, 0.35) !important;
}
/* === END IMMANUEL DASHBOARD EXTRAS (My courses /my/*) === */

/* My courses list photos: do not stretch with the description.
   Desktop: photo stays beside the text (Edumy list), 174px tall.
   Mobile: same stacked card as Profile (bottom of /user/profile):
   full-width photo on top (192px like .top_courses), details under it. */
body .my_course_content_list .mc_content_list,
body.ccn_context_dashboard .my_course_content_list .mc_content_list,
body.path-my .my_course_content_list .mc_content_list {
  align-items: flex-start !important;
}
body .my_course_content_list .mc_content_list .thumb,
body.ccn_context_dashboard .my_course_content_list .mc_content_list .thumb,
body.path-my .my_course_content_list .mc_content_list .thumb,
body.path-my-courses .my_course_content_list .mc_content_list .thumb,
body #page-my-courses .my_course_content_list .mc_content_list .thumb {
  align-self: flex-start !important;
  overflow: hidden !important;
  max-height: 174px !important;
  height: 174px !important;
  min-height: 0 !important;
}
body .my_course_content_list .mc_content_list .thumb img,
body .my_course_content_list .mc_content_list .thumb img.img-whp {
  width: 100% !important;
  height: 100% !important;
  max-height: 174px !important;
  object-fit: cover !important;
  object-position: center center !important;
}

@media only screen and (max-width: 1200px) {
  body .my_course_content,
  body .my_course_content_list,
  body .my_course_content_list .mc_content_list {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  /* Column stack even if an older rule still has display:flex */
  body .my_course_content_list .mc_content_list,
  body.ccn_context_dashboard .my_course_content_list .mc_content_list,
  body.path-my .my_course_content_list .mc_content_list,
  body.path-my-courses .my_course_content_list .mc_content_list,
  body #page-my-courses .my_course_content_list .mc_content_list {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }
  body .my_course_content_list .mc_content_list .thumb,
  body.path-my .my_course_content_list .mc_content_list .thumb {
    display: block !important;
    float: none !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 192px !important;
    max-height: 192px !important;
    min-height: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 16px !important;
    position: relative;
  }
  body .my_course_content_list .mc_content_list .thumb img,
  body .my_course_content_list .mc_content_list .thumb img.img-whp {
    position: static;
    width: 100% !important;
    height: 100% !important;
    max-height: 192px !important;
    object-fit: cover !important;
  }
  body .my_course_content_list .mc_content_list .details,
  body .my_course_content_list .mc_content_list .mc_content,
  body .my_course_content_list .mc_content_list .ccn_mc_content_header,
  body .my_course_content_list .mc_content_list .ccn_mc_content_header_details {
    display: block !important;
    float: none !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
  body .my_course_content_list .mc_content_list .sonny_progressbar .bar-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100%;
  }
}

/* ==========================================================================
   SAFETY: never block header / Login with stuck overlays
   ========================================================================== */
.mk-fullscreen-search-overlay:not(.mk-fullscreen-search-overlay-show),
#mk-search-overlay:not(.mk-fullscreen-search-overlay-show) {
  pointer-events: none !important;
}
#ccnSearchOverlayWrap {
  pointer-events: none !important;
}
#ccnSearchOverlayWrap .mk-fullscreen-search-overlay-show {
  pointer-events: auto !important;
}
body#page-login-index .mk-fullscreen-search-overlay,
body.path-login .mk-fullscreen-search-overlay,
body#page-login-index #local-welcome-root,
body.path-login #local-welcome-root,
body#page-login-index .iw-live-layer,
body.path-login .iw-live-layer {
  display: none !important;
  pointer-events: none !important;
}

/* ==========================================================================
   Grade Me + dark Bootstrap pills — light text on navy/purple
   --------------------------------------------------------------------------
   Theme/house navy backgrounds left Grade Me count pills (badge-primary)
   as dark grey on dark purple. White text, scoped so gold/warning pills
   keep dark lettering.
   ========================================================================== */
body .block_grade_me .badge,
body .block_grade_me .badge-pill,
body .block_grade_me .badge-primary,
body [data-block="grade_me"] .badge,
body [data-block="grade_me"] .badge-pill,
body [data-block="grade_me"] .badge-primary {
  color: #ffffff !important;
}

body .badge-primary,
body .badge-dark,
body .badge-info,
body .badge-success,
body .badge-danger,
body .badge-secondary {
  color: #ffffff !important;
}

body .badge-warning,
body .badge-light,
body .badge-pill.badge-warning {
  color: #0B1222 !important;
}

/* ==========================================================================
   House chrome: navy header, rounded filters, tile hue
   PAINT ONLY — Edumy keeps display / flex / sizes / spacing.
   ========================================================================== */

/* Solid deep navy top bar — matches local My courses, ignores Edumy gradient DB */
body.ccn_context_dashboard header.header-nav,
body header.header-nav.dashbord_pages,
body header.header-nav.menu_style_home_one.dashbord_pages {
  background-color: #07123F !important;
  background-image: none !important;
}

/* Filter / sort row: light navy wash so it is not a white strip on white */
body .my_course_content_header,
body .courses_list_heading,
body .block-myoverview [data-region="filter"] {
  background-color: #EEF2FB !important;
  background-image: none !important;
  border-radius: 18px !important;
  border-bottom-color: rgba(11, 26, 92, 0.08) !important;
}

/* Messages / Profile / Settings / Grades shortcut tiles */
body a.ff_one,
body .ff_one {
  background-color: #EEF3FB !important;
  background-image: linear-gradient(180deg, #F7F9FE 0%, #E4EBF7 100%) !important;
  border: 1px solid rgba(11, 26, 92, 0.12) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 18px rgba(14, 42, 107, 0.08) !important;
}
body .ff_one .ff_icon {
  border-radius: 18px !important;
}

/* Mobile: Edumy makes the bar transparent; white wrapper + white IOS/hamburger */
@media only screen and (max-width: 1199.98px) {
  body .mobile-menu .header.stylehome1,
  body .mobile-menu .header.stylehome1.dashbord_pages,
  body .stylehome1.dashbord_pages,
  body .mobile-menu .header.stylehome1:before,
  body .mobile-menu .header.stylehome1.dashbord_pages:before,
  body .stylehome1:before {
    background-color: #07123F !important;
    background-image: none !important;
  }
  body .mobile-menu .header a:not(.mobileBrand):not(.ccn-btn-backtocourse):not(.mk-search-trigger):before,
  body .mobile-menu .header a:not(.mobileBrand):not(.ccn-btn-backtocourse):not(.mk-search-trigger) span {
    background: #ffffff !important;
    background-color: #ffffff !important;
  }
}

/* Real phones (not only a squeezed desktop window): same stacked card */
@media (max-width: 1200px), (hover: none) and (pointer: coarse) {
  body .my_course_content_list .mc_content_list {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body .my_course_content_list .mc_content_list .thumb {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 192px !important;
    max-height: 192px !important;
  }
  body .my_course_content_list .mc_content_list .details,
  body .my_course_content_list .mc_content_list .mc_content,
  body .my_course_content_list .mc_content_list .ccn_mc_content_header,
  body .my_course_content_list .mc_content_list .ccn_mc_content_header_details {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }
}

/* Homepage / inner banner on phones: wrap the site title, shorten the 400px bar */
@media (max-width: 1200px) {
  body .inner_page_breadcrumb {
    height: auto !important;
    min-height: 210px !important;
    padding: 110px 16px 28px !important;
    background-size: cover !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  body .inner_page_breadcrumb .container,
  body .inner_page_breadcrumb .breadcrumb_content,
  body .inner_page_breadcrumb .breadcrumb_content .row,
  body .inner_page_breadcrumb .breadcrumb_content [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    text-align: center !important;
  }
  body .inner_page_breadcrumb .breadcrumb_content {
    margin-top: 0 !important;
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body .inner_page_breadcrumb .breadcrumb_content .row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  body .inner_page_breadcrumb .breadcrumb_title,
  body .inner_page_breadcrumb h4.breadcrumb_title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    width: 100% !important;
    font-size: 1.35rem !important;
    line-height: 1.3 !important;
    hyphens: none;
    text-align: center !important;
    margin: 0 auto 10px !important;
    float: none !important;
  }
  body .inner_page_breadcrumb .breadcrumb,
  body .inner_page_breadcrumb .breadcrumb-item,
  body .inner_page_breadcrumb ol.breadcrumb,
  body .inner_page_breadcrumb nav {
    justify-content: center !important;
    text-align: center !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body#page-site-index .ccnPseudoFrontpageBlock {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding-top: 0 !important;
  }
  body#page-site-index #section-1,
  body#page-site-index .course-content > ul > li:first-child,
  body#page-site-index .course-content .section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: 0 !important;
  }
}