/* ============================================================
   Site UI - modern navigation menu + homepage custom block
   (loaded by includes/partials/public_nav.php, auto cache-busted)
   ============================================================ */

/* ---------- Header (kept) ---------- */
.site-navbar { padding-top:.55rem; padding-bottom:.55rem; }

/* ---------- Menu: desktop ---------- */
@media (min-width:992px){
  .site-navbar .navbar-collapse { gap:1rem; }
  .site-navbar .navbar-nav.nav-main { gap:.15rem; margin-left:1.25rem; align-items:center; }
  .site-navbar .nav-main .nav-link {
    position:relative; display:flex; align-items:center; gap:.4rem;
    font-weight:600; font-size:.9rem; color:#334155;
    padding:.5rem .8rem !important; border-radius:999px; white-space:nowrap;
    transition:background .18s, color .18s, transform .18s;
  }
  .site-navbar .nav-main .nav-link .nl-ico { font-size:1rem; color:#64748b; transition:color .18s; }
  .site-navbar .nav-main .nav-link:hover { background:#eef4ff; color:#1d4ed8; transform:translateY(-1px); }
  .site-navbar .nav-main .nav-link:hover .nl-ico { color:#2563eb; }
  .site-navbar .nav-main .nav-link.active { background:#e3edff; color:#1d4ed8; }
  .site-navbar .nav-main .nav-link.active .nl-ico { color:#2563eb; }
  .site-navbar .nav-main .nav-link.active::after {
    content:""; position:absolute; left:50%; bottom:-.62rem; width:22px; height:3px; margin-left:-11px;
    border-radius:3px; background:linear-gradient(90deg,#2563eb,#6366f1);
  }
  /* LIVE item */
  .site-navbar .nav-main .nav-link.nl-live { color:#b91c1c; }
  .site-navbar .nav-main .nav-link.nl-live:hover, .site-navbar .nav-main .nav-link.nl-live.active { background:#fff1f1; color:#b91c1c; }
  .site-navbar .nav-main .nav-link.nl-live.active::after { background:linear-gradient(90deg,#dc2626,#f97316); }
  /* More dropdown */
  .site-navbar .dropdown-menu.nav-more {
    border:1px solid #e6ecf5; border-radius:1rem; padding:.45rem; min-width:230px; margin-top:.9rem !important;
    box-shadow:0 18px 40px rgba(15,23,42,.14); animation:navPop .16s ease;
  }
  .site-navbar .nav-more .dropdown-item {
    display:flex; align-items:center; gap:.65rem; padding:.55rem .65rem; border-radius:.7rem; font-weight:600; font-size:.88rem; color:#334155;
  }
  .site-navbar .nav-more .dropdown-item:hover, .site-navbar .nav-more .dropdown-item.active { background:#eef4ff; color:#1d4ed8; }
  .site-navbar .nav-more .di-ico { width:32px; height:32px; border-radius:10px; background:#eef4ff; color:#2563eb; display:flex; align-items:center; justify-content:center; flex:0 0 32px; }
}
@keyframes navPop { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

.nl-livedot { width:8px; height:8px; border-radius:50%; background:#ef4444; display:inline-block; animation:nlPulse 1.5s infinite; }
@keyframes nlPulse { 0%{box-shadow:0 0 0 0 rgba(239,68,68,.55);} 70%{box-shadow:0 0 0 8px rgba(239,68,68,0);} 100%{box-shadow:0 0 0 0 rgba(239,68,68,0);} }

/* ---------- Menu: mobile / tablet (app-style panel) ---------- */
@media (max-width:991.98px){
  .site-navbar .navbar-collapse {
    margin-top:.7rem; padding:.6rem; border:1px solid #e6ecf5; border-radius:1.1rem; background:#fff;
    box-shadow:0 16px 36px rgba(15,23,42,.12); max-height:calc(100vh - 90px); overflow-y:auto;
  }
  .site-navbar .navbar-nav.nav-main { gap:.2rem; }
  .site-navbar .nav-main .nav-link, .site-navbar .nav-main .dropdown-item {
    display:flex; align-items:center; gap:.75rem; padding:.7rem .75rem !important; border-radius:.85rem;
    font-weight:600; font-size:.95rem; color:#1e293b; min-height:48px;
  }
  .site-navbar .nav-main .nav-link .nl-ico, .site-navbar .nav-main .di-ico {
    width:36px; height:36px; border-radius:11px; background:#eef4ff; color:#2563eb; display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex:0 0 36px;
  }
  .site-navbar .nav-main .nav-link::after { content:"\F285"; font-family:"bootstrap-icons"; margin-left:auto; color:#cbd5e1; font-size:.8rem; border:0; }
  .site-navbar .nav-main .nav-link:hover, .site-navbar .nav-main .nav-link:active, .site-navbar .nav-main .dropdown-item:hover { background:#f4f8ff; }
  .site-navbar .nav-main .nav-link.active { background:#e3edff; color:#1d4ed8; }
  .site-navbar .nav-main .nav-link.nl-live .nl-ico { background:#fee2e2; color:#dc2626; }
  .site-navbar .nav-main .nav-link.nl-live { color:#b91c1c; }
  /* flatten the "More" dropdown into the list on phones */
  .site-navbar .nav-more-toggle { display:none !important; }
  .site-navbar .dropdown-menu.nav-more { display:block !important; position:static !important; border:0; box-shadow:none; padding:0; margin:0; background:transparent; transform:none !important; }
  .site-navbar .nav-more .dropdown-item::after { content:"\F285"; font-family:"bootstrap-icons"; margin-left:auto; color:#cbd5e1; font-size:.8rem; }
  .site-navbar .nav-auth { flex-direction:row !important; gap:.5rem; margin-top:.6rem; padding-top:.6rem; border-top:1px solid #eef2f7; }
  .site-navbar .nav-auth .nav-item { flex:1; }
  .site-navbar .nav-auth .nav-link, .site-navbar .nav-auth .btn { width:100%; justify-content:center; text-align:center; border-radius:.85rem; min-height:46px; display:flex; align-items:center; }
  .site-navbar .nav-auth .nav-link { border:1px solid #d8e2f2; }
  .site-navbar .nav-auth .nav-link::after { display:none; }
}

/* ---------- Homepage: custom HTML block ---------- */
.home-custom-html { overflow:hidden; }
.home-custom-html .hch-full { width:100%; }
.home-custom-html .hch-inner { max-width:100%; overflow-x:auto; }
.home-custom-html img, .home-custom-html video, .home-custom-html canvas, .home-custom-html svg { max-width:100%; height:auto; }
.home-custom-html iframe, .home-custom-html embed, .home-custom-html object { max-width:100%; }
.home-custom-html table { max-width:100%; }

/* ---------- Homepage: live tests row ---------- */
.lv-home-row { display:flex; gap:1rem; overflow-x:auto; padding:.25rem .1rem 1rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.lv-home-row::-webkit-scrollbar { height:6px; } .lv-home-row::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:6px; }
.lv-home-item { flex:0 0 86%; max-width:340px; scroll-snap-align:start; }
@media (min-width:576px){ .lv-home-item { flex-basis:46%; } }
@media (min-width:992px){
  .lv-home-row { display:grid; grid-template-columns:repeat(3,1fr); overflow:visible; }
  .lv-home-item { flex:none; max-width:none; }
}