/* ==========================================================================
   Medilearn public site — UI/UX fix layer (visual only)
   Loaded LAST in application/views/frontend/layout/front_header.php, after
   style.css, so it wins without needing !important everywhere.

   Override-only: no class is renamed and no markup is assumed, so every
   Owl Carousel / Bootstrap / lightbox JS hook keeps working.

   Every value below traces to a measurement taken at 390px on the live site.
   ========================================================================== */

@import url('../../shared/ml-tokens.css');

/* --- Text contrast --------------------------------------------------------
   Measured failures against WCAG AA (4.5:1 for body text). Hues preserved;
   only lightness moved far enough to pass. */

/* #0d6efd on the pale-blue section (#d3ebf7) measured 3.64:1 */
.leading_sec .text_content h4.leading_title,
.leading_sec .d-flex h4,
.popular_sec .text_content h4.leading_title { color: #0b5ed7; }        /* 4.73:1 */

/* #717171 body grey measured 3.95:1 on #d3ebf7 and 4.34:1 on #f3f1f1 */
.text_content p.des,
.location_list li,
.text_content .download,
.footer_sec .footer_menu_sec .f_menu .f_menu_list a,
.footer_sec p { color: #636363; }                                       /* 4.86:1 */

/* #007bbe measured 4.08-4.30:1 on the near-white sections */
.learn_sec .learn_wrapper .text_content .sub_title,
.text_content h4.sub_title,
.text_content h4.dr_name,
.text_content p.address_title { color: #00699f; }                       /* 5.30:1+ */

/* --- Tap targets ----------------------------------------------------------
   WCAG 2.5.8 asks for 24x24 CSS px minimum on standalone controls. Measured:
   footer links 256x18, the support-email link 148x15, carousel dots 10x10,
   the mobile course buttons 57-152x20. The visual size is preserved — only
   the hit area grows, via padding, so nothing shifts visibly. */
.f_menu_list a,
.text_content > a,
.footer_sec a {
  display: inline-block;
  min-height: 24px;
  padding-block: 3px;
  line-height: 1.5;
}
.m_courses_menu a.courses_btn {
  display: inline-block;
  min-height: 24px;
  padding-block: 2px;
}
/* Carousel dots: keep the 10px dot, grow the button around it. */
.owl-dots button.owl-dot {
  min-width: 24px;
  min-height: 24px;
  padding: 7px !important;
  background-clip: content-box !important;
  vertical-align: middle;
}

/* --- Keyboard focus -------------------------------------------------------
   The search input and several controls had no focus indicator at all. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--ml-accent, #00388c);
  outline-offset: 2px;
  border-radius: var(--ml-radius-xs, 6px);
}
/* style.css sets `outline: none` at 0,2,1 on the search field and on the
   course accordion's :focus-visible, which silently removed the ring. Match
   or beat that specificity rather than blanket-!important. */
.search_box_sec .search_box input[type="search"]:focus-visible,
.search_box input:focus-visible,
form.search_box > input:focus-visible {
  outline: 2px solid var(--ml-accent, #00388c);
  outline-offset: 1px;
}
.sm_courses_accordion .accordion .accordion-item:focus-visible,
.sm_courses_accordion .accordion .accordion-item .accordion-button[aria-expanded="true"]:focus-visible {
  outline: 2px solid var(--ml-accent, #00388c);
  outline-offset: -2px;
}

/* --- Clipped course titles ------------------------------------------------
   On the course list a card title measured scrollWidth 239 vs clientWidth 163
   under overflow:hidden, so names were silently truncated mid-word. Allow the
   title to wrap to two lines instead of being cut. */
.courses_page .courses_grid .c_title,
.courses_page .c_title,
.course_grid .c_title {
  overflow: visible;
  white-space: normal;
  word-break: break-word;
}

/* --- Accordion teaser duplicated the body text ----------------------------
   The collapsed header prints a 150-char teaser of the section. That was the
   only visible text while the panel body rendered empty; now that the body
   prints the description, a short description appeared TWICE at once - once in
   the header, once below it - because the header teaser stays on screen while
   the panel is open. Verified in-browser: identical 135-char sentence rendered
   twice on one open section. Keep the teaser as the closed-state preview, drop
   it while the section is expanded. */
.sm_courses_accordion .accordion-button:not(.collapsed) .title_sec .des {
  display: none;
}

/* Belt and braces: the rule above keys off the BUTTON's class, but what actually decides whether
   the body is on screen is the PANEL's .show. Those normally track each other (verified: single
   click and fast double-click both stay in sync) - but toggling several panels mid-transition
   desynced them, leaving a collapsed button next to an open panel, i.e. the duplication back again.
   Key it off the panel too where :has() is supported. Older browsers just fall back to the rule
   above. */
.sm_courses_accordion .accordion-item:has(.accordion-collapse.show) .accordion-button .title_sec .des {
  display: none;
}

/* --- Course location block ------------------------------------------------
   Branch name, address and seat count are three separate facts that were
   rendering as one run-on string ("... Kolkata - 700106 17 seats"). Give each
   its own line and separate multiple branches from each other. */
.address_location_sec .location_list li {
  display: block;
  margin-bottom: 0.5rem;
}
.address_location_sec .location_list li + li {
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.address_location_sec .location_list .location_address,
.address_location_sec .location_list .location_seats {
  display: block;
}
.address_location_sec .location_list .location_seats {
  font-weight: 600;
}

/* --- Cards collapsed to their image's intrinsic width -----------------------
   Measured: a card in the homepage Popular strip rendered 183px wide inside a
   335px slot, with a 152px bare strip beside it. The image was NOT the problem -
   it was already at width:100% of its holder. The CARD was the problem: owl sets
   `.owl-item { display: flex }`, so `.popular_grid` is a flex item, and with no
   width it shrinks to fit its content. Its content width comes from the photo's
   intrinsic ratio at 200px tall - 343px for a 1200x700 landscape (clamped to the
   slot) but only 183px for a 390x426 portrait. So the whole card, background
   included, was sized by the photo's aspect ratio.

   Make the card fill its slot; the image then covers it and crops as intended. */
.popular_sec .popular_slider .owl-item .popular_grid,
.leading_sec .leading_slider .owl-item .leading_grid,
.courses_sec .courses_slider .owl-item .courses_grid {
  width: 100%;
}
.popular_sec .popular_slider .popular_grid .popular_photo,
.leading_sec .leading_slider .leading_grid .leading_photo,
.courses_sec .courses_grid .courses_photo {
  width: 100%;
}
.popular_sec .popular_slider .popular_grid .popular_photo img,
.leading_sec .leading_slider .leading_grid .leading_photo img,
.courses_sec .courses_grid .courses_photo img {
  width: 100%;
}

/* --- Sliders holding fewer cards than fit on screen -------------------------
   owl sizes the track for 3.5 cards. Looping used to hide that by cloning
   slides to fill it (which showed the same course several times); with looping
   correctly off for short lists, two cards left 517px of the 1196px track empty
   and hard against the left edge, reading as a broken section. Centre the group
   so a short list looks deliberate. `ml-slider-static` is set by custom.js on
   exactly the sliders it decided not to loop. */
.ml-slider-static .owl-stage {
  margin: 0 auto;
  justify-content: center;
}
.ml-slider-static .owl-nav {
  display: none;
}

/* --- Header course search ---------------------------------------------------
   The box used to be a dead form (no action, no name, an <img> for a button).
   These rules dress the real control and its suggestion panel.

   z-index 40 is chosen, not guessed: the header is position:fixed z-index:4 and
   the highest z-index anywhere else in the frontend CSS is 20, so 40 clears
   everything. No header ancestor sets overflow:hidden, so the panel is free to
   hang below the box. */
.search_box_sec .search_box {
  display: flex;
  align-items: center;
}
.search_box_sec .search_box input[type="search"] {
  /* Leave room for the clear + submit controls sitting on top of the field. */
  padding-right: 76px;
}
/* Chrome/Edge draw their own clear cross on type=search; ours is keyboard reachable. */
.search_box_sec .search_box input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

.search_box_sec .search_box .search_submit,
.search_box_sec .search_box .search_clear {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.search_box_sec .search_box .search_submit {
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 6px;
}
.search_box_sec .search_box .search_submit img {
  width: 20px;
  position: static;
}
.search_box_sec .search_box .search_clear {
  right: 44px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: #003E77;
}
.search_box_sec .search_box .search_submit:hover,
.search_box_sec .search_box .search_clear:hover {
  background: rgba(0, 62, 119, 0.1);
}
.search_box_sec .search_box .search_submit:focus-visible,
.search_box_sec .search_box .search_clear:focus-visible {
  outline: 2px solid #00388c;
  outline-offset: 2px;
}

/* Screen-reader-only live region: announces the result count without showing it twice. */
.search_box_sec .search_status.visually-hidden-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.search_box_sec .search_suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 30, 60, 0.18);
  text-align: left;
}
.search_box_sec .search_suggest[hidden] {
  display: none;
}
.search_suggest_item {
  display: block;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0, 62, 119, 0.08);
  text-decoration: none;
  color: #003E77;
}
.search_suggest_item:last-child {
  border-bottom: none;
}
/* One highlight for both hover and keyboard, so the two never disagree. */
.search_suggest_item:hover,
.search_suggest_item.is-active {
  background: #eaf4fa;
}
.search_suggest_name {
  display: block;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
}
.search_suggest_name mark {
  background: #ffe9a8;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}
.search_suggest_meta {
  display: block;
  font-size: 12.5px;
  color: #4a5b6b;
  margin-top: 2px;
  /* The full tree is five levels and wrapped to two or three lines on mobile, making every row
     tall enough that only three fitted on screen. One line, truncated, keeps the list scannable. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search_suggest_price {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #007BBE;
  margin-top: 3px;
}
.search_suggest_message {
  padding: 14px;
  font-size: 14px;
  color: #4a5b6b;
}
.search_suggest_foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 10px 14px;
  border-top: 1px solid rgba(0, 62, 119, 0.12);
  background: #f7fbfd;
}
.search_suggest_foot_link {
  font-size: 13px;
  font-weight: 700;
  color: #007BBE;
  text-decoration: none;
}
.search_suggest_foot_link.is-primary {
  color: #003E77;
}
.search_suggest_foot_link:hover,
.search_suggest_foot_link:focus-visible {
  text-decoration: underline;
}
.search_suggest_message + .search_suggest_foot_link {
  display: inline-block;
  margin: 0 14px 14px;
}

/* --- Course card fee block --------------------------------------------------
   The fee shared a flex row with the title, so it was squeezed into whatever width the title left
   and "₹ 185,000.00 + 18% tax" wrapped across two lines into the heading. It is now its own block:
   a quiet label, the amount as the loudest thing after the title, and tax as secondary. Applies to
   every listing at once - course list, module tab switch, subtype filter and search results - since
   they all render layout/course_card.php. */
.courses_content .text_content .course_fee {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 10px 0 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 62, 119, 0.12);
}
.courses_content .text_content .course_fee_label {
  flex: 0 0 100%;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7b8c;
}
.courses_content .text_content .course_fee_amount {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  color: #003E77;
  white-space: nowrap;
}
.courses_content .text_content .course_fee_tax {
  font-size: 12px;
  font-weight: 600;
  color: #4a5b6b;
  white-space: nowrap;
}
.courses_content .text_content .course_fee_enquire {
  font-size: 15px;
  font-weight: 700;
  color: #4a5b6b;
}

/* Push the CTA to the bottom so cards in a row end on the same line even when one has no fee. */
.courses_sec .courses_list_sec .courses_content {
  display: flex;
  flex-direction: column;
}
.courses_sec .courses_list_sec .courses_content .text_content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.courses_sec .courses_list_sec .courses_content .text_content .details_btn {
  margin-top: auto;
  align-self: flex-start;
}

/* --- Search results page --------------------------------------------------- */
/* The site header is position:fixed and measured 160px tall, so a page whose first section has no
   top padding renders underneath it - the heading and the Browse link were invisible. Every other
   page carries its own offset (.courses_banner uses padding: 130px 0 210px); this matches that
   convention rather than introducing a global spacer that would move every existing page. */
.search_results_sec {
  padding: 190px 0 60px;
}
.search_results_sec .top_sec {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
}
.search_results_sec .title {
  margin-bottom: 6px;
}
.search_empty {
  padding: 28px 0 8px;
}
.search_empty_title {
  font-size: 18px;
  font-weight: 700;
  color: #003E77;
  margin-bottom: 6px;
}
.course_snippet {
  font-size: 13px;
  color: #4a5b6b;
  margin: 0 0 10px;
}

/* This site overrides .container padding to 8px, while a Bootstrap .row carries -12px side
   margins - so a stock row inside a container escapes by 4px each side and gives the whole
   document a horizontal scrollbar (measured 402px of content in a 390px viewport). Zero the
   row margins on this grid only and hand the spacing to the columns, rather than touching
   .container or .row globally where every existing page would move. */
.search_results_grid {
  margin-left: 0;
  margin-right: 0;
}
.search_results_grid > [class*="col-"] {
  padding-left: 8px;
  padding-right: 8px;
}

@media (max-width: 767px) {
  /* .search_box_sec is absolutely positioned below the header at this width, so the
     panel must stay pinned to the input rather than the viewport. */
  .search_box_sec .search_suggest {
    max-height: 55vh;
  }
  /* The mobile header is taller than the desktop one - the search box drops below the nav, putting
     its bottom edge at 248px - so the desktop 190px offset still hid the heading. Measured, not
     guessed. */
  .search_results_sec {
    padding-top: 270px;
  }
  .search_results_sec .top_sec {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   Course mega menu (desktop) and the same tree in the mobile drawer.

   The taxonomy is five levels deep. The old header rendered it as nested
   hover flyouts, which meant six hovers held in a row to reach anything and a
   dead href on every level but the last. These rules lay the tree out as three
   columns in one panel instead, so any level is one click away, and give the
   mobile drawer a depth-agnostic accordion (its old rules only styled four
   levels, and the tree can be deeper).
   ========================================================================== */

.header_sec .nav_menu .navbar-nav.mega_nav li {
  margin: 0 18px;
}

.mega_trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 28px 4px;
  font-size: 16px;
  font-weight: 500;
  color: #003E77;
  cursor: pointer;
}

.mega_trigger:hover,
.mega_trigger[aria-expanded="true"] {
  color: #007bbe;
}

.mega_trigger i {
  font-size: 11px;
  transition: transform 0.18s ease;
}

.mega_trigger[aria-expanded="true"] i {
  transform: rotate(180deg);
}

/* The panel hangs off the nav bar, not off the individual item: at three
   columns it is wider than any one menu label. */
.header_sec .nav_menu .navbar-nav.mega_nav {
  position: static;
}

.header_sec .nav_menu .container {
  position: relative;
}

.mega_panel {
  position: absolute;
  top: calc(100% - 6px);
  left: 0;
  right: 0;
  z-index: 60;
  background: #fff;
  border: 1px solid #e3ecf3;
  border-radius: var(--ml-radius-md, 14px);
  box-shadow: 0 18px 44px rgba(0, 56, 140, 0.16);
  padding: 18px 20px 14px;
}

.mega_panel[hidden] {
  display: none;
}

/* Two cells: the categories, and the holder the fetched branch lands in. The branch is its own
   grid so its two columns sit side by side - as one plain div they stacked, putting course types
   underneath the sub-categories instead of beside them. */
.mega_cols {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 2.4fr);
  gap: 0 18px;
}

.mega_branch {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(240px, 1.4fr);
  gap: 0 18px;
  min-width: 0;
}

.mega_col {
  max-height: 58vh;
  overflow-y: auto;
  margin: 0;
  padding: 0 14px 0 0;
  list-style: none;
}

.mega_col_2,
.mega_col_3 {
  border-left: 1px solid #eef3f8;
  padding-left: 18px;
}

.mega_group {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mega_group.is_shown {
  display: block;
}

/* One row at any level. Overrides the inherited 28px nav padding, which was
   sized for the top-level bar. */
.header_sec .nav_menu .navbar-nav.mega_nav .mega_link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--ml-radius-xs, 8px);
  font-size: 15px;
  font-weight: 500;
  color: #10365c;
  text-decoration: none;
}

.header_sec .nav_menu .navbar-nav.mega_nav .mega_link:hover,
.header_sec .nav_menu .navbar-nav.mega_nav .mega_link:focus-visible,
.header_sec .nav_menu .navbar-nav.mega_nav .mega_link.is_active {
  background: #eef5fb;
  color: var(--ml-accent, #00388c);
}

.mega_link .mega_label {
  flex: 1 1 auto;
}

.mega_link i {
  font-size: 10px;
  opacity: 0.55;
}

.mega_type {
  margin-bottom: 10px;
}

.mega_type_link {
  font-weight: 600 !important;
}

.mega_subtypes {
  margin: 0 0 0 10px;
  padding: 0;
  list-style: none;
  border-left: 2px solid #eef3f8;
}

.header_sec .nav_menu .navbar-nav.mega_nav .mega_subtype_link {
  font-size: 14px;
  font-weight: 400;
  color: #446a8c;
}

.mega_empty {
  padding: 9px 10px;
  font-size: 14px;
  color: #7c8ea1;
  list-style: none;
}

/* The count is the only signal of how much sits under a branch, since courses
   themselves are not listed. Zero stays visible but recedes. */
.menu_count {
  display: inline-block;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #e3eefb;
  color: #10365c;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  line-height: 1.6;
}

.menu_count.is_empty {
  background: #f1f4f7;
  color: #9bacbd;
}

/* style.css puts 28px block padding on every `a` inside a nav `li`, sized for the
   top-level bar. Inside the panel that turned into 56px of dead space under this
   link, so the override has to name it as well as .mega_link. */
.header_sec .nav_menu .navbar-nav.mega_nav .mega_all,
.mega_all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 4px 2px;
  border-top: 1px solid #eef3f8;
  width: 100%;
  font-size: 15px;
  font-weight: 600;
  color: var(--ml-accent, #00388c) !important;
  text-decoration: none;
}

.mega_all:hover {
  text-decoration: underline;
}

@media (max-width: 991px) {
  /* The drawer owns navigation at this width. */
  .mega_panel {
    display: none !important;
  }
}

/* -------------------------------------------------------------------------
   Mobile drawer tree
   ------------------------------------------------------------------------- */

.m_menu_sec .m_menu_tree .sub_menu {
  list-style: none;
}

/* Depth-agnostic: one indent step per level, however deep the taxonomy grows.
   The original rules stopped at four levels and the fifth rendered unindented. */
.m_menu_sec .m_menu_tree .sub_menu {
  padding-left: 14px;
}

.m_menu_sec .m_menu_tree a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.m_menu_sec .m_menu_tree a .icon {
  flex: 0 0 auto;
}

.m_menu_sec .m_menu_tree a .menu_count {
  margin-left: auto;
}

.m_menu_sec .m_menu_tree a i.fa-solid {
  flex: 0 0 auto;
  font-size: 11px;
  transition: transform 0.18s ease;
}

/* A plus rotated 45deg is an x, and an x on a menu row reads as "remove", not "collapse".
   A chevron turning over says the same thing without the wrong verb. */
.m_menu_sec .m_menu_tree .m_caret[aria-expanded="true"] i.fa-solid,
.m_menu_sec .m_menu_tree a[aria-expanded="true"] i.fa-solid {
  transform: rotate(180deg);
}

.m_menu_sec .m_menu_tree .m_all_link {
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   Course list: module tabs, result bar, sidebar filter rows

   The tabs are links rather than Bootstrap tab buttons now, so they need the
   button look back. The result bar is new: with the filter in the URL a
   visitor needs to see what is applied and how many courses it left.
   ------------------------------------------------------------------------- */

.courses_module_tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.courses_result_bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0 0 18px;
}

.courses_count_pill {
  padding: 6px 14px;
  border-radius: 999px;
  background: #eef5fb;
  color: #10365c;
  font-size: 14px;
}

.courses_filter_trail {
  font-size: 14px;
  color: #5c7288;
}

.courses_clear_filter {
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--ml-accent, #00388c);
}

/* Sidebar filter: which row am I on?

   style.css hangs every "this branch is active" signal off aria-expanded="true" -
   the tick icon, the bold accent text, the rotated chevron. Those rules were written
   when each row was a Bootstrap collapse toggle. The rows are plain links now, so
   nothing carries aria-expanded and every signal went silent: the selected row
   rendered in the same weight and colour as its siblings, over a #eef5fb tint that
   is not legible against the panel background (measured 238,245,251 on 244,248,251).

   Same signals, keyed on the state the server sets instead:
     .is-selected  the level the URL is filtering on
     .on-path      an ancestor of it */

.courses_menu_list a {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Ancestors: the trail reads down the tree without competing with the selected row. */
.courses_menu_list a.on-path,
.courses_menu_list .sub_menu a.on-path {
  font-weight: 700;
  color: #007bbe;
}

/* The selected row.

   style.css already designed this - solid navy pill, white text, a tick - but keyed it
   on `.course_filter`, the class the old AJAX leaf carried. Selection can now sit at any
   level, so the same look applies to any .is-selected row. Values copied from that rule
   rather than invented, so the panel keeps one visual language.

   Its `color` needs !important only because style.css sets the sub-level grey with
   !important at line 1563; matching that is the alternative to editing style.css. */
.courses_menu_list a.is-selected,
.courses_menu_list .sub_menu a.is-selected,
.courses_menu_list a.courses_link.is-selected {
  background: #003E77;
  color: #fff !important;
  border-radius: 6px;
  padding: 7px 10px;
  margin: 1px 0;
  font-weight: 600;
}

.courses_menu_list a.is-selected:hover,
.courses_menu_list .sub_menu a.is-selected:hover,
.courses_menu_list a.courses_link.is-selected:hover {
  background: #003E77;
  color: #fff !important;
}

/* The tick style.css puts on a selected leaf, for a selection at any level. */
.courses_menu_list a.is-selected .label::after {
  content: "00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 10px;
  margin-left: 8px;
  opacity: 0.85;
}

/* The white tick on a navy pill needs the icon svg recoloured too. */
.courses_menu_list a.courses_link.is-selected .icon svg path {
  fill: #fff;
}

/* The tick style.css shows for an expanded branch, back for the open path. */
.courses_menu_list a.courses_link.on-path .icon,
.courses_menu_list a.courses_link.is-selected .icon {
  display: flex;
}

/* And the chevron turns down on the open branch, as it did when rows were toggles. */
.courses_menu_list a.on-path > .caret,
.courses_menu_list a.is-selected > .caret {
  transform: rotate(90deg);
  color: #007bbe;
}

/* -------------------------------------------------------------------------
   Split filter rows: label filters, caret expands

   One row cannot both navigate and toggle on a single click. The first attempt
   added a separate "All Cataract" row under every branch, which put a second
   entry in the tree for something that is not a category. Splitting the row
   keeps both actions without inventing rows.
   ------------------------------------------------------------------------- */

.filter_row,
.m_menu_tree .m_row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.filter_row > a,
.m_menu_tree .m_row > a {
  flex: 1 1 auto;
  min-width: 0;
}

.caret_btn,
.m_menu_tree .m_caret {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 24x24 minimum hit area, per the tap-target rules above. */
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}

.caret_btn .caret,
.m_menu_tree .m_caret i {
  font-size: 12px;
  transition: transform 0.18s ease;
}

.caret_btn[aria-expanded="true"] .caret {
  transform: rotate(90deg);
}

.m_menu_tree .m_caret[aria-expanded="true"] i {
  transform: rotate(180deg);
}

/* -------------------------------------------------------------------------
   Header: the hamburger is a phone control

   Above 767px it opened a small panel whose entire contents were ENQUIRY and a
   Login link - and Login is already a button in the same bar, so the only thing
   it really guarded was ENQUIRY. That link is in the bar now, so the icon has
   nothing left to open on a desktop. Below 768px it still opens the drawer.
   ------------------------------------------------------------------------- */

.nav_enquiry {
  margin-left: auto;
  margin-right: 18px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #003E77;
  text-decoration: none;
  white-space: nowrap;
}

.nav_enquiry:hover {
  color: #007bbe;
}

@media (min-width: 768px) {
  .header_sec .nav_menu .menu_left .navbar-toggler {
    display: none;
  }
}

@media (max-width: 767px) {
  /* The drawer already lists Enquiry; two of them in a narrow bar is clutter. */
  .nav_enquiry {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   Course list on a phone

   Below 768px style.css hides .tab_btn_sec (so the module tabs and the button
   that opens the filter panel both vanish) and pins .m_courses_menu to the
   bottom. That left a phone with no module switch and no filter: the bottom
   bar's buttons were href="javascript:;" and the panel had no trigger.

   The bar is real links now, and the Filter button below opens the same tree
   the desktop sidebar shows.
   ------------------------------------------------------------------------- */

.courses_filter_toggle {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #cfe0ee;
  border-radius: 999px;
  background: #fff;
  color: var(--ml-accent, #00388c);
  font-size: 14px;
  font-weight: 600;
}

.courses_filter_close {
  display: none;
  background: none;
  border: 0;
  font-size: 26px;
  color: #d63333;
}

@media (max-width: 767px) {
  .courses_filter_toggle,
  .courses_filter_close {
    display: inline-flex;
  }

  /* The panel is fixed and full height, so its own list has to scroll. */
  .courses_page.active .courses_menu {
    overflow-y: auto;
    background: #fff;
    box-shadow: 0 -2px 30px rgba(0, 56, 140, 0.18);
    padding: 0 18px 90px;
  }

  .courses_page.active .courses_menu .courses_menu_sec {
    height: auto;
    min-height: 100%;
  }

  /* Clear the pinned module bar so the last filter row is reachable. */
  .courses_page .courses_list_sec {
    padding-bottom: 84px;
  }

  /* Three equal columns that all fit, rather than a strip that scrolls sideways.
     Scrolling looked tidy in a measurement and was unusable in the hand: the bar could sit
     mid-scroll with "Doctor" clipped off the left edge and the third module running off the
     right, with nothing to say it moved. Full names are kept and clamped to two lines - the
     title attribute carries the whole thing for a long press. */
  .m_courses_menu {
    justify-content: space-between;
    flex-wrap: nowrap;
    overflow: visible;
    gap: 4px;
    padding: 10px 10px 12px;
  }

  .m_courses_menu .courses_btn {
    flex: 1 1 0;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    text-align: center;
    font-size: 12px;
    line-height: 1.25;
    padding: 8px 4px;
    border-radius: 10px;
  }

  .m_courses_menu .courses_btn.is_current {
    color: var(--ml-accent, #00388c);
    font-weight: 700;
    text-decoration: underline;
  }
}

/* Filter chevrons: a control of their own, beside the label that filters. */
.filter_caret {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  background: none;
  border: 0;
  color: #9AA4B0;
  cursor: pointer;
}

.filter_caret .caret {
  font-size: 12px;
  transition: transform 0.2s ease;
}

.filter_caret[aria-expanded="true"] .caret {
  transform: rotate(90deg);
  color: #007bbe;
}

.filter_caret.is_loading .caret {
  opacity: 0.4;
}

.filter_empty {
  display: block;
  padding: 8px 2px;
  font-size: 13px;
  color: #7c8ea1;
}

/* Sticky-header offset, measured instead of guessed
   -------------------------------------------------
   The header is position:fixed and its height CHANGES with viewport width - 200px on a desktop,
   332px at 768px where the search box wraps, 284px on a phone. Every page then set its own
   margin-top to clear it: .courses_page 160/220/258, .courses_details_page 160/225/252,
   .search_results_sec its own, .cms_page_sec none at all. Measured across five pages and three
   widths, the course list, course details, search results and every custom page (About us worst, by
   200-331px) all rendered their first line UNDER the header.

   custom.js writes the real height into --ml-header-h on load and on resize, so one rule clears the
   header at every width and cannot drift when the header changes again. The fallback matches the
   desktop measurement for anyone with JavaScript off. */

.courses_page,
.courses_details_page,
.search_results_sec,
.cms_page_sec {
  margin-top: calc(var(--ml-header-h, 200px) + 16px) !important;
}

/* .courses_page also carries padding-top: 80px of its own; with the offset above that is dead space. */
.courses_page {
  padding-top: 24px !important;
}