/* Dawatul Islam 24 — Final Mobile Compact Fix
   Upload as: assets/css/di-mobile-final-fix.css
   Add after di-mobile-polish.css in header.php
*/

/* Mobile: header/menu compact and stable */
@media(max-width:768px){

  .di-brand-inner{
    min-height:auto !important;
  }

  .di-header-ad{
    display:none !important;
  }

  .di-nav{
    max-height:none !important;
  }

  .di-nav a,
  .di-dropdown > button{
    font-size:16px !important;
    padding:12px 14px !important;
  }

  .di-dropdown-menu a{
    padding:11px 24px !important;
  }

  /* Only first menu + hamburger visible before click */
  .di-nav:not(.responsive) a:not(:first-child),
  .di-nav:not(.responsive) .di-dropdown{
    display:none !important;
  }

  .di-nav:not(.responsive) .di-menu-icon{
    display:block !important;
  }
}

/* Mobile homepage: card compact */
@media(max-width:768px){

  .di-home-hero-card img,
  .di-home-medium-card img,
  .di-cat-featured-card img,
  .di-cat-small-card img,
  .di-cat-grid-card img,
  .di-related-card img{
    aspect-ratio: 16 / 8.5 !important;
    object-fit: cover !important;
  }

  .di-home-hero-content h1{
    font-size:22px !important;
    line-height:1.28 !important;
  }

  .di-home-hero-content p{
    font-size:15px !important;
    line-height:1.6 !important;
  }

  .di-home-medium-card h2,
  .di-cat-small-card h3,
  .di-cat-grid-body h3{
    font-size:17px !important;
    line-height:1.35 !important;
  }

  .di-home-list-item,
  .di-cat-grid-body{
    padding:9px 10px !important;
  }
}

/* Mobile article: sidebar should stay below, content should be comfortable */
@media(max-width:768px){

  .di-article-grid,
  .di-cat-layout{
    display:block !important;
  }

  .di-sidebar,
  .di-cat-sidebar{
    position:static !important;
    margin-top:16px !important;
  }

  .di-featured-img img{
    max-height:280px !important;
    object-fit:contain !important;
  }

  .di-content{
    word-break:normal !important;
    overflow-wrap:break-word !important;
  }
}

/* Mobile footer compact */
@media(max-width:768px){
  .di-footer-social a{
    width:34px !important;
    height:34px !important;
  }

  .di-footer-bottom .di-footer-menu a{
    margin:0 5px 6px !important;
  }
}

/* Very small screen */
@media(max-width:380px){
  .di-date{
    font-size:12px !important;
  }

  .di-logo img{
    max-width:170px !important;
  }

  .di-home-wrap,
  .di-cat-wrap,
  .di-article-wrap{
    padding:0 8px !important;
  }

  .di-content{
    font-size:16.5px !important;
  }
}
@media(max-width:768px){

  .di-nav{
    position:relative !important;
  }

  .di-nav .di-menu-icon{
    display:block !important;
    position:absolute !important;
    right:0 !important;
    top:0 !important;
    width:52px !important;
    text-align:center !important;
    font-size:24px !important;
    z-index:99999 !important;
  }

  .di-nav:not(.responsive) a:not(:first-child):not(.di-menu-icon),
  .di-nav:not(.responsive) .di-dropdown{
    display:none !important;
  }

  .di-nav:not(.responsive) a:first-child{
    display:block !important;
    padding-right:60px !important;
  }
}
@media(max-width:768px){
  .di-nav .di-menu-icon{
    display:block !important;
    float:right !important;
    position:absolute !important;
    right:0 !important;
    top:0 !important;
    color:#fff !important;
    background:#0b4b2e !important;
    width:52px !important;
    height:44px !important;
    line-height:44px !important;
    text-align:center !important;
    z-index:999999 !important;
  }
}
@media(max-width:768px){
  .di-nav{
    position:relative !important;
    min-height:46px !important;
  }

  .di-nav .di-menu-icon{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:absolute !important;
    right:0 !important;
    top:0 !important;
    width:56px !important;
    height:46px !important;
    line-height:46px !important;
    text-align:center !important;
    color:#fff !important;
    background:#07351f !important;
    z-index:999999 !important;
  }

  .di-nav .di-menu-icon::before{
    content:"☰";
    font-size:26px;
    font-weight:700;
  }

  .di-nav .di-menu-icon{
    font-size:0 !important;
  }
}
.di-menu-icon{
  display:none;
  border:0;
  cursor:pointer;
}

@media(max-width:768px){
  .di-menu-icon{
    display:block !important;
    position:absolute !important;
    right:0 !important;
    top:0 !important;
    width:56px !important;
    height:46px !important;
    background:#07351f !important;
    color:#fff !important;
    font-size:26px !important;
    line-height:46px !important;
    text-align:center !important;
    z-index:999999 !important;
  }
}
@media(max-width:768px){
  .di-nav{
    display:flex !important;
    overflow-x:auto !important;
    white-space:nowrap !important;
  }

  .di-nav a,
  .di-dropdown > button{
    display:inline-flex !important;
    width:auto !important;
    font-size:15px !important;
    padding:11px 12px !important;
  }

  .di-menu-icon{
    display:none !important;
  }

  .di-dropdown-menu{
    display:none !important;
  }
}
@media(max-width:768px){
  .di-nav-wrap{
    border-bottom:3px solid #c9a646 !important;
  }

  .di-nav{
    min-height:54px !important;
    background:#07351f !important;
  }

  .di-nav a:first-child{
    font-size:22px !important;
    padding:15px 18px !important;
  }

  .di-menu-icon{
    width:64px !important;
    height:54px !important;
    line-height:54px !important;
    background:#f5f5f5 !important;
    color:#111 !important;
    border-left:3px solid #c9a646 !important;
  }
}

@media(max-width:768px){

.single-title,
h1{
font-size:24px !important;
line-height:1.35 !important;
}

}
.di-featured-img{
width:100% !important;
overflow:hidden !important;
border-radius:14px !important;
}

.di-featured-img img{
width:100% !important;
height:auto !important;
display:block !important;
object-fit:cover !important;
}