/* =============================================================================
  MEDIA.CSS (clean)
  Goal: responsive layout/typo only. No menu rules here.
============================================================================= */

/* <= 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; }

  .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;
  }

  /* Header simplification on mobile: the logo is hidden, the title stays */
  .logo .brand { display: none; }
  .logo > a img{ width: 100%; }

  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; }
}