/* =============================================================================
  MEDIA.CSS (clean)
  Goal: responsive layout/typo only. No menu rules here.
============================================================================= */

/* Hide legacy responsive menu hooks (kept if elements still exist) */
#topnav_hamburger_icon,
#topnav_responsive_menu{
  display: none;
}

/* <= 1250px (container full width) */
@media screen and (max-width: 1250px){
  .container{
    margin: 0;
  }
}

/* <= 768px (title/subtitle adjustments) */
@media only screen and (max-width: 768px){
  /* header .site-title .mobile{ display: block; }
  header .site-subtitle{ display: none; } */
}

/* >= 650px (DESKTOP/TABLET) */
@media screen and (min-width: 650px){
  /* Title desktop version visible, mobile title hidden */
  header .site-title{ display: block; }
  header .site-title .mobile{ display: none; }

  /* Desktop menu visible */
  .menu-desktop{ display: block; }

  /* Hide mobile UI on desktop */
  .nav-toggle,
  .nav-drawer{ display: none; }

  .search-container{ width: 250px; }
  .search-container .search-input{ opacity: 1; }

  #audio div.player{ display: block; }
  #audio div.player.mobile{ display: none; }
}

/* < 650px (MOBILE) */
@media screen and (max-width: 650px){
  /* Admin tables: compact */
  #admin_user table{ font-size: 0.8rem; }
  #admin_user th:not(.mobile),
  #admin_user td:not(.mobile){ display: none; }

  /* Container: edge-to-edge mobile */
  .container{
    position: relative;
    margin: 0;
    padding: 10px;
    border-radius: 0;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  .container > header {
    min-height: 75px;
  }

  /* Desktop menu visible */
  .menu-desktop{ display: none; }

  /* Header simplification on mobile */
  .logo > a img{ width: 100%; }

  header .top .site-title{
    font: 400 1.5em Verdana, sans-serif;
  }

  header .title{ font-size: 24px; }
}

/* 320px–640px (extra small tweaks) */
@media screen and (min-width: 320px) and (max-width: 640px){
  header .site-title .mobile{ display: block; }

  header .profile-menu > li > a{ font-size: 1.2rem; }

  .jq-toast-wrap.bottom-right{ right: 20px; }
}

/* Desktop HARD FIX */
@media (min-width: 650px) {
  .nav-toggle,
  .nav-drawer {
    display: none !important;
  }

  .menu-desktop {
    display: block !important;
  }

  nav[role="navigation"] {
    display: block !important;
  }

  .horiznav {
    display: flex !important;
  }
}

