/* =========================================================================
   Header — Main Category / Sub-Category Dropdown Menu (independent
   settings group — see inc/header-category-menu.php). Every rule below is
   scoped under .gzfc-header-cat-menu, and every color/size value comes
   from its OWN dedicated --gzfc-hcm-* custom properties, so this can never
   be affected by, or affect, Homepage Sidebar Categories (--gzfc-hs-*) or
   Footer Categories (--gzfc-footer-cat-*).
   ========================================================================= */

/* ---------------------------------------------------------------------
   BUG FIX (Header Bar disappearing / hiding behind the page on Category
   pages): two separate causes are both closed off here, and this rule
   applies on EVERY page (Homepage and every Category archive alike),
   since the Header Bar now always uses this one renderer/markup.

   1. The framework's own .gzf-header-cat-list rule sets `overflow-x: auto`
      (for the classic bar's mobile horizontal scroll). Per the CSS spec
      that also forces overflow-y to `auto`, which clips any dropdown
      trying to open below it. Scoped to our own extra classes only, so
      the classic flat bar's mobile scroll is untouched.
   2. The row's own containers are explicitly forced to `overflow: visible`
      too, so nothing between the dropdown and the edge of the header can
      ever clip it on any template, including Category archives.
   --------------------------------------------------------------------- */
.gzfc-header-cat-menu,
.gzfc-header-cat-menu-list,
.gzfc-header-cat-menu .gzf-container {
	overflow: visible;
}

/* Belt-and-suspenders: whenever this row is present, make sure the header
   itself never clips it either — covers every page/template, not only the
   Homepage. */
.gzf-header:has(.gzfc-header-cat-menu) {
	overflow: visible;
}

.gzfc-header-cat-menu-list {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	position: relative;
	font-family: var(--gzfc-hcm-font-family, inherit);
	font-weight: var(--gzfc-hcm-font-weight, 600);
	min-height: var(--gzfc-hcm-height, 48px);
	align-items: center;
}

/* Alignment (Left / Center / Right) — declared with !important so it always
   wins regardless of selector order/specificity from any other stylesheet
   (e.g. the parent framework's own .gzf-header-cat-list rule). */
.gzfc-hcm-align-left .gzfc-header-cat-menu-list   { justify-content: flex-start !important; }
.gzfc-hcm-align-center .gzfc-header-cat-menu-list { justify-content: center !important; }
.gzfc-hcm-align-right .gzfc-header-cat-menu-list  { justify-content: flex-end !important; }

.gzfc-header-cat-item {
	position: relative;
}
.gzfc-header-cat-item > a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--gzfc-hcm-text, #c9c9d1);
	font-size: var(--gzfc-hcm-font-size, 13px);
	font-weight: inherit;
	padding: 6px 12px;
	border-radius: var(--gzfc-hcm-radius, 8px);
	background: var(--gzfc-hcm-bg, transparent);
	border: 1px solid transparent;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.gzfc-header-cat-caret {
	font-size: .7em;
	opacity: .75;
	transition: transform .2s ease;
	/* Tappable on its own (see assets/js/header-cat-menu.js): opening the
	   Sub-Categories dropdown no longer requires following the Main
	   Category link away from the page. */
	cursor: pointer;
	padding: 4px;
	margin: -4px;
}
.gzfc-header-cat-item.has-dropdown:hover .gzfc-header-cat-caret,
.gzfc-header-cat-item.has-dropdown:focus-within .gzfc-header-cat-caret {
	transform: rotate(180deg);
}

/* Hover / Animation Effect variants (Main Categories only). */
.gzfc-hcm-hover--underline .gzfc-header-cat-item > a { position: relative; }
.gzfc-hcm-hover--underline .gzfc-header-cat-item > a::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 2px;
	height: 2px;
	background: var(--gzfc-hcm-hover, #ff4d1c);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s ease;
}
.gzfc-hcm-hover--underline .gzfc-header-cat-item:hover > a::after { transform: scaleX(1); }
.gzfc-hcm-hover--underline .gzfc-header-cat-item:hover > a,
.gzfc-hcm-hover--underline .gzfc-header-cat-item.gzf-header-cat-current > a { color: var(--gzfc-hcm-hover, #ff4d1c); }

.gzfc-hcm-hover--background .gzfc-header-cat-item:hover > a,
.gzfc-hcm-hover--background .gzfc-header-cat-item.gzf-header-cat-current > a {
	background: var(--gzfc-hcm-hover, #ff4d1c);
	color: #fff;
}

.gzfc-hcm-hover--glow .gzfc-header-cat-item:hover > a,
.gzfc-hcm-hover--glow .gzfc-header-cat-item.gzf-header-cat-current > a {
	color: var(--gzfc-hcm-hover, #ff4d1c);
	box-shadow: 0 0 10px rgba(255,77,28,.5), 0 0 22px rgba(255,77,28,.25);
}

.gzfc-hcm-hover--lift .gzfc-header-cat-item:hover > a {
	transform: translateY(-2px);
	color: var(--gzfc-hcm-hover, #ff4d1c);
}

.gzfc-hcm-hover--none .gzfc-header-cat-item:hover > a,
.gzfc-hcm-hover--none .gzfc-header-cat-item.gzf-header-cat-current > a {
	color: var(--gzfc-hcm-hover, #ff4d1c);
}

/* ---------------------------------------------------------------------
   Dropdown panel — position/visibility logic is shared by every style;
   only the visual skin changes per Dropdown Style choice.
   --------------------------------------------------------------------- */
.gzfc-header-cat-dropdown {
	list-style: none;
	margin: 0;
	padding: 6px 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
	/* Raised well above any Category/archive page content (post grid,
	   cards, archive title) that could otherwise sit on top of it — see
	   the "BUG FIX" note above this stylesheet's first rule. */
	z-index: 9999;
}
.gzfc-header-cat-item.has-dropdown:hover .gzfc-header-cat-dropdown,
.gzfc-header-cat-item.has-dropdown:focus-within .gzfc-header-cat-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.gzfc-header-cat-dropdown li a {
	display: block;
	padding: 9px 16px;
	color: var(--gzfc-hcm-text, #eaeaea);
	font-size: calc(var(--gzfc-hcm-font-size, 13px) - 1px);
	font-weight: 500;
	white-space: nowrap;
}
.gzfc-header-cat-dropdown li a:hover {
	color: var(--gzfc-hcm-hover, #ff4d1c);
}

/* Classic — simple bordered panel (default). */
.gzfc-hcm-dropdown--classic .gzfc-header-cat-dropdown {
	background: var(--gzf-color-surface, #1a1a1f);
	border: 1px solid var(--gzfc-hcm-border, rgba(255,255,255,.08));
	border-radius: var(--gzfc-hcm-radius, 8px);
	box-shadow: 0 14px 28px -10px rgba(0,0,0,.6);
}
.gzfc-hcm-dropdown--classic .gzfc-header-cat-dropdown li a:hover {
	background: rgba(255,255,255,.05);
}

/* Card — soft shadow, rounded, more spacing. */
.gzfc-hcm-dropdown--card .gzfc-header-cat-dropdown {
	background: var(--gzf-color-card-bg, #1e1e24);
	border: 0;
	border-radius: calc(var(--gzfc-hcm-radius, 8px) + 4px);
	box-shadow: 0 20px 40px -14px rgba(0,0,0,.7);
	padding: 10px;
	min-width: 220px;
}
.gzfc-hcm-dropdown--card .gzfc-header-cat-dropdown li a {
	border-radius: 8px;
	padding: 10px 14px;
}
.gzfc-hcm-dropdown--card .gzfc-header-cat-dropdown li a:hover {
	background: var(--gzfc-hcm-bg, rgba(255,255,255,.05));
}

/* Minimal — no border, subtle background only. */
.gzfc-hcm-dropdown--minimal .gzfc-header-cat-dropdown {
	background: rgba(20,20,24,.98);
	border: 0;
	border-radius: 4px;
	box-shadow: none;
}
.gzfc-hcm-dropdown--minimal .gzfc-header-cat-dropdown li a:hover {
	color: var(--gzfc-hcm-hover, #ff4d1c);
	background: transparent;
}

/* Touch / small screens: no hover here, so the dropdown stays hidden until
   `.gzfc-open` is toggled by assets/js/header-cat-menu.js (tapping the
   caret) or the item gains keyboard focus — it then expands inline, in
   this same row, as a simple block instead of a floating panel. Tapping
   the Main Category label itself (not the caret) still navigates to that
   category's archive, same as before. */
@media (max-width: 782px) {
	.gzfc-header-cat-dropdown {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
		box-shadow: none;
		border: 0;
		background: transparent;
		padding-left: 12px;
	}
	.gzfc-header-cat-item.has-dropdown:focus-within .gzfc-header-cat-dropdown,
	.gzfc-header-cat-item.has-dropdown.gzfc-open .gzfc-header-cat-dropdown {
		display: block;
	}
}


/* ---------------------------------------------------------------------
   Category icon (Header Category Bar only). Small emoji before the label;
   the link is already inline-flex with a 4px gap, so no other spacing
   changes. Never used on Game Cards or other category labels.
   --------------------------------------------------------------------- */
.gzfc-header-cat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	font-size: 1em;
	line-height: 1;
	font-style: normal;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	margin-right: 2px;
}