/* Islamipedia v1.4: tampilan ponsel. Dimuat setelah style.css, jadi aman menimpa aturan lama. */

/* Desktop: item tambahan dan menu bawah disembunyikan */
.nav-extra{display:none}
.bottom-nav{display:none}
.footer-cats>li:nth-child(n+7){display:none}

@media (max-width:900px){
  :root{--bn-h:64px;--bn-off:calc(var(--bn-h) + 22px + env(safe-area-inset-bottom,0px))}

  /* ===== Header: logo | cari | mode terang-gelap, lalu slider menu ===== */
  .site-header .wrap{flex-wrap:wrap;gap:0 .5rem;min-height:0;padding-top:.5rem}
  .brand{flex:1 1 auto;min-height:44px}
  .header-actions{margin-left:auto;gap:.4rem}
  .header-actions .icon-btn{display:inline-grid!important}
  .header-actions .nav-toggle,.nav-close,.nav-backdrop{display:none!important}

  .nav{position:static!important;inset:auto!important;transform:none!important;width:100%!important;height:auto!important;flex:0 0 100%;order:3;margin:0!important;padding:0!important;border:0!important;background:transparent!important;overflow:visible!important;z-index:auto}
  .nav ul{position:relative;display:flex;flex-direction:row!important;align-items:center;gap:.4rem!important;margin:0;padding:.35rem 2.25rem .65rem 0;overflow-x:auto;overflow-y:hidden;list-style:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  .nav ul::-webkit-scrollbar{display:none}
  .nav li{flex:none;position:relative;scroll-snap-align:start}
  .nav a{display:block;padding:.42rem .9rem;border:1px solid var(--line);border-radius:999px!important;background:var(--card);color:var(--ink);font-size:.875rem;font-weight:600;line-height:1.3;white-space:nowrap}
  .nav .nav-extra{display:block}
  .nav .nav-extra a{background:var(--tint);border-color:transparent}
  .nav a:hover{background:var(--tint);color:var(--link)}
  .nav .current-menu-item>a,.nav .current_page_item>a,.nav .current-menu-ancestor>a,.nav a[aria-current="page"]{background:var(--btn);border-color:var(--btn);color:#fff}
  .nav .sub-menu{display:none!important}
  html{scroll-padding-top:112px}

  /* ===== Footer: grid ===== */
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;padding:2rem 0 1.25rem}
  .footer-brand,.footer-col--cats{grid-column:1/-1}
  .footer-col{background: rgb(255 255 255 / 0%);border: 1px solid rgb(255 255 255 / 0%);border-radius:16px;padding:1rem 1.1rem}
  .footer-col .footer-title{margin-bottom:.5rem}
  .footer-col li{margin:0}
  .footer-col li a{display:block;padding:.35rem 0;font-size:.9375rem}
  .footer-cats,.footer-col--cats>ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem}
  .footer-cats>li:nth-child(n+7){display:list-item}
  .footer-brand p{max-width:34rem}
  .footer-bottom{flex-direction:column;gap:.35rem;padding-bottom:1.25rem}

  /* ===== Menu bawah melayang ===== */
  body.has-bottomnav{padding-bottom:var(--bn-off)}
  .bottom-nav{display:block;position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:88}
  .bottom-nav ul{list-style:none;margin:0;padding:.35rem;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.15rem;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:0 10px 30px -10px rgba(5,25,23,.45)}
  @supports (backdrop-filter:blur(1px)){.bottom-nav ul{background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}}
  .bottom-nav li{margin:0}
  .bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;min-height:50px;padding:.35rem .1rem;border-radius:16px;color:var(--muted);font-size:.6875rem;font-weight:600;line-height:1.1;text-align:center;text-decoration:none;white-space:nowrap}
  .bottom-nav a:hover{text-decoration:none;color:var(--ink)}
  .bottom-nav svg{width:22px;height:22px;flex:none}
  .bottom-nav a[aria-current="page"]{background:var(--btn);color:#fff}
  body.bn-hide .bottom-nav{display:none}
  body.bn-hide.has-bottomnav{padding-bottom:0}

  /* Elemen melayang lain naik di atas menu bawah */
  body.has-bottomnav .to-top{bottom:calc(var(--bn-off) + 8px)}
  body.has-bottomnav .toast{bottom:calc(var(--bn-off) + 8px)}
  body.has-bottomnav .ad-anchor{bottom:var(--bn-off);padding-bottom:.35rem}
  body.has-bottomnav.has-anchor{padding-bottom:calc(var(--bn-off) + 84px)}
  body.has-bottomnav .player{left:8px;right:8px;bottom:var(--bn-off);padding-bottom:.65rem;border:2px solid var(--gold);border-radius:18px}
  body.has-bottomnav.has-player{padding-bottom:calc(var(--bn-off) + 110px)}
  body.has-bottomnav.has-player .to-top{bottom:calc(var(--bn-off) + 118px)}
  body.has-bottomnav.has-anchor .to-top{bottom:calc(var(--bn-off) + 92px)}
}

@media (max-width:380px){
  .bottom-nav a{font-size:.625rem}
  .bottom-nav svg{width:20px;height:20px}
  .footer-cats,.footer-col--cats>ul{grid-template-columns:minmax(0,1fr)}
}
@media print{.bottom-nav{display:none!important}}