:root{
	--dj-primary: #2563EB;
	--dj-secondary: #9333EA;
	--dj-text: #111827;
	--dj-bg: #F9FAFB;
	--dj-muted: #6B7280;
	--dj-border: #E5E7EB;
}

/* in Assets/css/main.css */
.dh { display: none; }
.sr-only { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }


.dj-header { position: sticky; top: 0; z-index: 1000; background: var(--dj-bg); border-bottom: 1px solid var(--dj-border); backdrop-filter: saturate(180%) blur(4px); }
.dj-container { max-width: 1200px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }


/* Logo */
.dj-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--dj-text); font-weight: 800; letter-spacing: .2px; }
.dj-logo-img { width: 100px; height: 100px;}
.dj-logo-text { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: 1.125rem; }
.dj-logo-text span { color: var(--dj-primary); }
.dj-logo-mark { color: var(--dj-primary); display:grid; place-items:center; }


/* Nav */
.dj-burger { display: none; background: transparent; border: 1px solid var(--dj-border); border-radius: 10px; padding: 8px; color: var(--dj-text); }
.dj-nav { display: flex; align-items: center; gap: 22px; }
.dj-menu { list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; }
.dj-menu a { text-decoration: none; color: var(--dj-text); padding: 10px 12px; border-radius: 10px; font-weight: 600; }
.dj-menu a:hover, .dj-menu .current-menu-item > a { background: rgba(37,99,235,.1); color: var(--dj-primary); }


/* Dropdown basic */
.dj-menu li { position: relative; }
.dj-menu li ul { position: absolute; left: 0; top: 100%; min-width: 220px; background: var(--dj-bg); border: 1px solid var(--dj-border); border-radius: 12px; padding: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.06); display: none; }
.dj-menu li:hover > ul { display: block; }
.dj-menu li ul li a { display: block; padding: 10px 12px; border-radius: 8px; }


/* Actions */
.dj-actions { display: flex; align-items: center; gap: 14px; margin-left: 8px; }
.dj-search-toggle { border: none; background: transparent; padding: 6px; border-radius: 10px; color: var(--dj-text); }
.dj-search-toggle:hover { background: rgba(0,0,0,.06); }
.dj-btn-link { color: var(--dj-text); text-decoration: none; font-weight: 600; padding: 8px 10px; border-radius: 10px; }
.dj-btn-link:hover { background: rgba(0,0,0,.06); }


.dj-social { list-style: none; display: flex; gap: 10px; margin: 0; padding: 0; }
.dj-social a { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--dj-border); border-radius: 10px; color: var(--dj-text); }
.dj-social a:hover { color: var(--dj-primary); border-color: var(--dj-primary); background: rgba(37,99,235,.06); }


/* Search panel */
.dj-searchpanel { position: fixed; inset: 0; background: rgba(17,24,39,.55); display: grid; place-items: start center; padding-top: 10vh; }
.dj-searchpanel[hidden] { display: none; }
.dj-searchpanel__inner { width: min(800px, 92vw); background: var(--dj-bg); border-radius: 16px; padding: 16px; border: 1px solid var(--dj-border); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.dj-search-close { background: transparent; border: none; float: right; color: var(--dj-text); padding: 6px; border-radius: 10px; }
.dj-search-close:hover { background: rgba(0,0,0,.06); }