/* ==========================================================================
   Hittin Hard Music — Beatvault-style overhaul
   App-shell layout: Astra top bar (main menu) + fixed left rail (secondary
   menu), plus a card grid for FileGuard packs. Overrides are scoped under
   .hhm-themed so they reliably beat the plugin's fg-front.css.
   ========================================================================== */

:root {
	--hhm-sidebar-w: 240px;
	--hhm-bg:        #141414;
	--hhm-panel:     #1a1a1a;
	--hhm-panel-2:   #222;
	--hhm-border:    #2e2e2e;
	--hhm-text:      #e8e8e8;
	--hhm-muted:     #9a9a9a;
	--hhm-accent:    #fefa00;
}

/* --------------------------------------------------------------------------
   1. App-shell: push the whole page right to clear the fixed sidebar.
   -------------------------------------------------------------------------- */
@media (min-width: 921px) {
	body.hhm-themed {
		padding-left: var(--hhm-sidebar-w);
	}

	/* Astra sticky-header add-on positions the header relative to the viewport,
	   so body padding doesn't move it — offset it explicitly. */
	body.hhm-themed .ast-header-sticked,
	body.hhm-themed .ast-sticky-active #masthead,
	body.hhm-themed #masthead.ast-header-sticked {
		left: var(--hhm-sidebar-w);
		right: 0;
		width: auto;
	}

	/* Sidebar always visible on desktop; toggle/overlay only matter on mobile. */
	.hhm-nav-toggle,
	.hhm-nav-overlay {
		display: none !important;
	}

	/* Sticky top bar — keep the Astra header (top menu) on screen while
	   scrolling. This is position:fixed, not a <frame>: same "detached" feel,
	   none of the frames downsides we talked about. */
	body.hhm-themed #masthead {
		position: fixed;
		top: 0;
		left: var(--hhm-sidebar-w);
		right: 0;
		width: auto;
		z-index: 998;
	}
	body.admin-bar.hhm-themed #masthead {
		top: 32px; /* clear the WP admin bar for logged-in users */
	}
	/* Reserve space so content isn't hidden under the fixed bar; the exact
	   height is measured live by hhm-sidebar.js (--hhm-header-h). */
	body.hhm-themed #page {
		padding-top: var(--hhm-header-h, 60px);
	}
	/* The logo already sits in the left rail, so drop the duplicate header
	   logo (the one you'd X'd) to keep the sticky bar slim. Desktop only —
	   on mobile the off-canvas rail is hidden, so the header logo stays. */
	body.hhm-themed #masthead .site-branding,
	body.hhm-themed #masthead .ast-site-identity {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   2. The fixed left sidebar.
   -------------------------------------------------------------------------- */
#hhm-sidebar {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--hhm-sidebar-w);
	z-index: 1000;
	display: flex;
	flex-direction: column;
	background: var(--hhm-panel);
	border-right: 1px solid var(--hhm-border);
	color: var(--hhm-text);
	overflow: hidden;
}

/* Keep clear of the WP admin bar for logged-in users. */
body.admin-bar #hhm-sidebar {
	top: 32px;
}
@media (max-width: 782px) {
	body.admin-bar #hhm-sidebar {
		top: 46px;
	}
}

.hhm-sidebar-brand {
	padding: 18px 18px 14px;
	border-bottom: 1px solid var(--hhm-border);
	flex: 0 0 auto;
}
.hhm-sidebar-brand img,
.hhm-sidebar-brand .custom-logo {
	max-width: 100%;
	height: auto;
}
.hhm-sidebar-title {
	color: var(--hhm-accent);
	font-weight: 800;
	font-size: 20px;
	letter-spacing: 0.5px;
	text-decoration: none;
	line-height: 1.2;
}

/* Scrollable menu area. */
.hhm-sidebar-nav {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 10px 0;
}
.hhm-sidebar-menu,
.hhm-sidebar-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.hhm-sidebar-menu li {
	margin: 0;
}
.hhm-sidebar-menu a {
	display: block;
	padding: 11px 18px;
	color: var(--hhm-text);
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	border-left: 3px solid transparent;
	transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.hhm-sidebar-menu a:hover,
.hhm-sidebar-menu a:focus {
	background: var(--hhm-panel-2);
	color: var(--hhm-accent);
	border-left-color: var(--hhm-accent);
}
.hhm-sidebar-menu .current-menu-item > a,
.hhm-sidebar-menu .current-menu-ancestor > a {
	background: var(--hhm-panel-2);
	color: var(--hhm-accent);
	border-left-color: var(--hhm-accent);
}
/* Sub-menus: indent, no fly-out (kept simple for a vertical rail). */
.hhm-sidebar-menu .sub-menu a {
	padding-left: 34px;
	font-weight: 500;
	font-size: 14px;
	color: var(--hhm-muted);
}
.hhm-sidebar-hint {
	padding: 12px 18px;
	color: var(--hhm-muted);
	font-size: 13px;
}
.hhm-sidebar-hint a {
	color: var(--hhm-accent);
}

.hhm-sidebar-footer {
	flex: 0 0 auto;
	border-top: 1px solid var(--hhm-border);
	padding: 12px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.hhm-sidebar-footer a {
	color: var(--hhm-muted);
	text-decoration: none;
	font-size: 14px;
}
.hhm-sidebar-footer a:hover {
	color: var(--hhm-accent);
}
.hhm-sidebar-account {
	font-weight: 700;
	color: var(--hhm-text) !important;
}

/* --------------------------------------------------------------------------
   3. Mobile toggle button + overlay.
   -------------------------------------------------------------------------- */
.hhm-nav-toggle {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 1002;
	width: 42px;
	height: 42px;
	display: none; /* shown via media query below */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4px;
	padding: 0;
	background: var(--hhm-panel);
	border: 1px solid var(--hhm-border);
	border-radius: 8px;
	cursor: pointer;
}
body.admin-bar .hhm-nav-toggle {
	top: 42px;
}
.hhm-nav-toggle-bar {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--hhm-accent);
	transition: transform .2s ease, opacity .2s ease;
}
body.hhm-nav-open .hhm-nav-toggle-bar:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}
body.hhm-nav-open .hhm-nav-toggle-bar:nth-child(2) {
	opacity: 0;
}
body.hhm-nav-open .hhm-nav-toggle-bar:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

.hhm-nav-overlay {
	position: fixed;
	inset: 0;
	z-index: 999;
	background: rgba(0, 0, 0, .55);
}

/* --------------------------------------------------------------------------
   4. Mobile: off-canvas sidebar.
   -------------------------------------------------------------------------- */
@media (max-width: 920px) {
	body.hhm-themed {
		padding-left: 0;
	}
	#hhm-sidebar {
		transform: translateX(-100%);
		transition: transform .25s ease;
		box-shadow: 0 0 30px rgba(0, 0, 0, .5);
	}
	body.hhm-nav-open #hhm-sidebar {
		transform: none;
	}
	.hhm-nav-toggle {
		display: inline-flex;
	}
	/* Overlay only renders while the menu is open. */
	.hhm-nav-overlay {
		display: none;
	}
	body.hhm-nav-open .hhm-nav-overlay {
		display: block;
	}
}

/* --------------------------------------------------------------------------
   5. Pack grid — restyle FileGuard's subfolder list into cards.
      Scoped under .hhm-themed; base markup stays a plain list elsewhere.
   -------------------------------------------------------------------------- */
.hhm-themed .fg-subcat-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 18px;
	margin: 18px 0 26px;
	padding: 0;
	list-style: none;
}

.hhm-themed .fg-subcat-entry {
	background: var(--hhm-panel);
	border: 1px solid var(--hhm-border);
	border-radius: 10px;
	overflow: hidden;
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.hhm-themed .fg-subcat-entry:hover {
	transform: translateY(-3px);
	border-color: var(--hhm-accent);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
	background: var(--hhm-panel);
}

/* Turn the row link into a vertical card: cover on top, text below. */
.hhm-themed .fg-subcat-link {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
	color: var(--hhm-text);
}
.hhm-themed .fg-subcat-link .fg-folder-icon {
	display: none; /* emoji folder icon not needed once there's artwork */
}

/* Cover artwork (background image set inline by the shortcode). */
.hhm-themed .fg-subcat-cover {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: #111;
	background-size: cover;
	background-position: center;
}
.hhm-themed .fg-subcat-cover--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #2c2c2c 0%, #161616 70%);
}
.hhm-themed .fg-subcat-cover--empty::after {
	content: attr(data-initial);
	font-size: 54px;
	font-weight: 800;
	line-height: 1;
	color: var(--hhm-accent);
	opacity: .85;
}

.hhm-themed .fg-subcat-name {
	flex: 0 0 auto;
	padding: 11px 13px 0;
	font-weight: 700;
	font-size: 15px;
	color: var(--hhm-text);
	line-height: 1.3;
}
.hhm-themed .fg-subcat-count {
	padding: 3px 13px 13px;
	color: var(--hhm-muted);
	font-size: 12px;
}

/* Folder heading + description sit above the grid. */
.hhm-themed .fg-cat-title {
	color: var(--hhm-text);
	font-size: 24px;
	margin-bottom: 8px;
}
.hhm-themed .fg-folder-desc {
	color: var(--hhm-muted);
	margin-bottom: 14px;
}

/* Narrower phones: two-up, then comfortable single column. */
@media (max-width: 600px) {
	.hhm-themed .fg-subcat-list {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		gap: 12px;
	}
}

/* --------------------------------------------------------------------------
   6. Small dark-theme polish that pairs with the existing FileGuard styles.
   -------------------------------------------------------------------------- */
.hhm-themed .fg-folder-actions {
	margin: 6px 0 18px;
}