.badge{ display:inline-block; padding:.25rem .55rem; border-radius:999px; border:1px solid var(--border); background:var(--bg-alt); color:var(--muted); font-size:.8rem; }
.kbd{ padding:.15rem .35rem; border-radius:.35rem; border:1px solid var(--border); background:var(--bg-alt); }
.text-gradient{ background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ratio-16x9{ aspect-ratio:16/9; object-fit:cover; border-radius:14px; display:block; }


/* Tabs active */
.tabs .button[aria-selected="true"]{ background: var(--brand-grad); color:#fff; border-color: transparent; }

/* Skeleton cards */
.skel{ position:relative; overflow:hidden; background:var(--card); border:1px solid var(--border); border-radius: var(--radius-xl); min-height: 220px; }
.skel::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); animation: ds-shimmer 1.2s infinite; }
@keyframes ds-shimmer { 100% { transform: translateX(100%); } }


/* Footer custom text */
.footer-copy{ text-align:center; color:var(--muted,#9ca3af); margin-top:1rem; }
.footer-note{ text-align:center; font-size:.85rem; opacity:.8; margin-top:.35rem; margin-bottom:.65rem; }


/* === Mobile header simplification === */
@media (max-width: 768px){
  /* turn off sticky behaviour */
  header, .site-header, #masthead, .header, .topbar { position: static !important; top:auto !important; transform:none !important; box-shadow:none !important; }

  /* hide everything except logo inside header */
  .site-header nav,
  .site-header .menu,
  .site-header .menu-toggle,
  .site-header .primary-menu,
  .site-header .header-nav,
  .site-header .header-actions,
  .site-header .search,
  .site-header .site-title,
  .site-header .site-description,
  .site-header .cta,
  .site-header .breadcrumbs,
  .site-header .social,
  .site-header [class*="menu-"],
  .site-header [class*="nav"] { display: none !important; }

  /* center and size logo */
  .site-header, #masthead { padding: 10px 12px !important; }
  .site-header .brand, .site-header .site-branding { display:flex; align-items:center; justify-content:center; width:100%; }
  .site-header .custom-logo-link, .site-header .site-logo { display:flex; align-items:center; justify-content:center; margin:0 auto; }
  .site-header .custom-logo, .site-header .site-logo img { max-height: 28px; height:auto; width:auto; }
}

/* Remove any sticky offset margin on content for mobile */
@media (max-width: 768px){
  .has-sticky-offset, body.has-sticky, .site-content { margin-top: 0 !important; }
}