/* ============================================
   MOBILE RESPONSIVE (improved menu, hidden mandalas, high contrast)
   Desktop (width > 1024px) unchanged
   ============================================ */

@media only screen and (max-width: 1024px) {
  /* Reset fixed layout */
  HTML {
    overflow: auto !important;
  }
  body {
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #supramental_global {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    left: auto !important;
    top: auto !important;
    height: auto !important;
    overflow-x: hidden !important;
  }

  /* Convert absolute positioning to relative */
  #titlebar, div.titlebar3, div.titlebar2, #supramental_logol,
  #supramental_logor, #supramental_menu, #supramental_page_titre,
  #supramental_logo2l, #supramental_logo2r, #supramental_search,
  #supramental_maj, #supramental_chargement, #bottomborder,
  div.supramental, #greyborder, #readMoreArrowDown, #readMoreArrowUp,
  #supramental_table_matiere, #supramental_journal, #supramental_print,
  #mandala_popup {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* HIDE mandalas on mobile */
  #supramental_logol,
  #supramental_logor,
  #supramental_logo2l,
  #supramental_logo2r {
    display: none !important;
  }

  /* Auto height for containers */
  div.titlebar3, div.titlebar2, div.supramental {
    height: auto !important;
  }

  /* Main content */
  div.supramental {
    overflow-x: visible !important;
    overflow-y: visible !important;
    margin: 10px 0 !important;
  }
  div.supramental p {
    margin: 10px 5% !important;
    width: auto !important;
  }

  /* ===== IMPROVED MOBILE MENU WITH LIGHT TEXT ===== */
  #supramental_menu {
    text-align: center !important;
    background: #000 !important;
    padding: 5px 0 !important;
    width: 100% !important;
  }

  #supramental_menu ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  #supramental_menu li {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
    border-bottom: 1px solid #444 !important;
  }

  /* Main menu items – dark background, light bold text */
  #supramental_menu > ul > li > a {
    display: block !important;
    padding: 12px 15px !important;
    background-color: #222 !important;
    color: #F6FBBB !important;  /* light yellow, high contrast */
    font-weight: bold !important;
    font-size: 14px !important;
    text-decoration: none !important;
  }

  /* Submenu container – hidden by default, shows on hover/focus */
  #supramental_menu ul li ul {
    display: none !important;
    position: static !important;
    width: 100% !important;
    background-color: #333 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* Show submenu when parent is hovered/focused (touch) */
  #supramental_menu ul li:hover > ul,
  #supramental_menu ul li:focus-within > ul,
  #supramental_menu ul li.active > ul {
    display: block !important;
  }

  /* Submenu items – indented + light text */
  #supramental_menu ul li ul li {
    width: 100% !important;
    border-bottom: 1px solid #555 !important;
  }

  #supramental_menu ul li ul li a {
    display: block !important;
    padding: 10px 15px 10px 30px !important;
    background-color: #333 !important;
    color: #F6FBBB !important;  /* same light color for readability */
    font-size: 13px !important;
    text-decoration: none !important;
    border-left: 3px solid #F6FBBB !important; /* visual hierarchy */
  }

  /* 2nd level submenu – extra indent, keep light text */
  #supramental_menu ul li ul li ul li a {
    padding-left: 45px !important;
    background-color: #3d3d3d !important;
    border-left-color: #ffcc00 !important;
    color: #fff !important;
  }

  /* 3rd level */
  #supramental_menu ul li ul li ul li ul li a {
    padding-left: 60px !important;
    background-color: #4a4a4a !important;
    color: #fff !important;
  }

  /* Hover/focus for submenu items – keep readable */
  #supramental_menu ul li ul li a:hover,
  #supramental_menu ul li ul li a:focus {
    background-color: #fa9b6c !important;
    color: #000 !important;  /* dark text on orange background is fine */
  }

  /* Main menu hover (optional, but keep contrast) */
  #supramental_menu > ul > li > a:hover,
  #supramental_menu > ul > li > a:focus {
    background-color: #444 !important;
    color: #fff !important;
  }

  /* Images */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Search bar */
  #supramental_search {
    text-align: center !important;
    margin: 10px 0 !important;
  }
  #supramental_search input[name="q"] {
    width: 70% !important;
    font-size: 16px !important;
  }

  /* Page title */
  #supramental_page_titre {
    text-align: center !important;
    margin: 20px 0 10px !important;
  }

  /* "Dernière màj" */
  #supramental_maj {
    text-align: center !important;
    margin: 5px 0 !important;
  }

  /* Popups */
  #maj_popup, #extra_popup, #menu_popup, #styled_popup_span {
    width: 90% !important;
    left: 5% !important;
    right: 5% !important;
    top: 10% !important;
    max-height: 80% !important;
    overflow-y: auto !important;
    position: fixed !important;
  }

  /* Bottom border */
  #bottomborder {
    font-size: 11px !important;
    text-align: center !important;
    padding: 5px 0 !important;
  }

  /* Scroll arrows */
  #readMoreArrowDown, #readMoreArrowUp {
    position: fixed !important;
    bottom: 10px !important;
    top: auto !important;
    left: auto !important;
    right: 10px !important;
    width: auto !important;
    z-index: 999 !important;
  }
  #readMoreArrowUp {
    right: 50px !important;
  }
}

/* Tablet and phone fine-tuning */
@media only screen and (max-width: 768px) {
  .blockheaderbodycontent, .blockheaderbody {
    font-size: 14px !important;
    line-height: 1.4 !important;
    padding: 5px !important;
  }
  .blockheadertop2 {
    font-size: 18px !important;
  }
  .blockheadertop3 {
    font-size: 11px !important;
  }
  #supramental_search input[name="q"] {
    width: 80% !important;
  }
}

@media only screen and (max-width: 480px) {
  .blockheaderbodycontent {
    font-size: 12px !important;
  }
  #supramental_search input[name="q"] {
    width: 85% !important;
  }
  .blockheadertoptitle, .blockheadertoptitle2, .blockheadertoptitle4 {
    font-size: 10px !important;
  }
}