/* =========================================================================
   Header Category Bar — Display Styles
   (Appearance > Customize > Categories > Header Category Bar >
   "Category Display Style" — see inc/header-cat-style.php)

   Every rule below is scoped to `.gzf-header-cat-list` (the bottom header
   row's category quick-links, template-parts/header-bottom.php) AND to a
   `body.gzfc-header-cat-style-*` class, so:
     - nothing here can affect the sidebar/footer Categories block
       (.gzf-category-list), the Post Card category label
       (.gzfc-card-info-cat / .gzf-card-cat), or any other part of the site;
     - the "Classic" style (the default) has NO rules at all here — the
       framework's original .gzf-header-cat-list CSS keeps rendering
       exactly as before, so existing sites see zero change until a style
       is deliberately picked.
     - the row itself is still shown/hidden only by the existing "Enable
       Bottom Header Row" toggle; this file never touches that.

   All styles reuse the theme's own color tokens (--gzf-color-*, defined by
   the parent framework) so every style automatically follows whatever
   accent/skin colors a site already has — no new colors are hard-coded.
   ========================================================================= */

/* The Icon style's icon markup is always present in the markup (see the
   template override) but hidden everywhere except the Icon style itself,
   so every other style's link renders with the exact same content as the
   original framework markup. */
.gzfc-header-cat-icon { display: none; }

/* Touch-friendly horizontal scrolling for every non-Classic style, same
   scrollable row the framework already provides, just with items that
   snap neatly into place while swiping on mobile. */
body[class*="gzfc-header-cat-style-"] .gzf-header-cat-list {
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}
body[class*="gzfc-header-cat-style-"] .gzf-header-cat-list li {
	scroll-snap-align: start;
}

/* -------------------------------------------------------------------
   1. Gaming Pills — rounded/pill-shaped category buttons.
   ------------------------------------------------------------------- */
.gzfc-header-cat-style-pills .gzf-header-cat-list {
	gap: 10px;
	padding: 12px 0;
}
.gzfc-header-cat-style-pills .gzf-header-cat-list a {
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	border-radius: 999px;
	background: var(--gzf-color-surface);
	border: 1px solid var(--gzf-color-border);
	transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
.gzfc-header-cat-style-pills .gzf-header-cat-list li.gzf-header-cat-current a {
	background: var(--gzf-color-primary);
	border-color: var(--gzf-color-primary);
	color: #fff;
}
@media (hover: hover) {
	.gzfc-header-cat-style-pills .gzf-header-cat-list a:hover,
	.gzfc-header-cat-style-pills .gzf-header-cat-list a:focus-visible {
		background: var(--gzf-color-primary);
		border-color: var(--gzf-color-primary);
		color: #fff;
		transform: translateY(-2px);
	}
}

/* -------------------------------------------------------------------
   2. Neon Gaming — soft glow + gaming-style hover.
   ------------------------------------------------------------------- */
.gzfc-header-cat-style-neon .gzf-header-cat-list {
	gap: 12px;
	padding: 12px 0;
}
.gzfc-header-cat-style-neon .gzf-header-cat-list a {
	display: inline-flex;
	align-items: center;
	padding: 7px 16px;
	border-radius: 999px;
	border: 1px solid var(--gzf-color-border);
	transition: color .3s ease, border-color .3s ease, text-shadow .3s ease, box-shadow .3s ease;
}
.gzfc-header-cat-style-neon .gzf-header-cat-list li.gzf-header-cat-current a {
	color: var(--gzf-color-accent);
	border-color: var(--gzf-color-primary);
	text-shadow: 0 0 8px rgba(255, 77, 28, .8), 0 0 18px rgba(255, 138, 61, .45);
	box-shadow: 0 0 14px rgba(255, 77, 28, .35), inset 0 0 10px rgba(255, 77, 28, .12);
}
@media (hover: hover) {
	.gzfc-header-cat-style-neon .gzf-header-cat-list a:hover,
	.gzfc-header-cat-style-neon .gzf-header-cat-list a:focus-visible {
		color: var(--gzf-color-accent);
		border-color: var(--gzf-color-primary);
		text-shadow: 0 0 8px rgba(255, 77, 28, .8), 0 0 18px rgba(255, 138, 61, .45);
		box-shadow: 0 0 14px rgba(255, 77, 28, .35), inset 0 0 10px rgba(255, 77, 28, .12);
	}
}

/* -------------------------------------------------------------------
   3. Underline Slide — an animated underline slides in on hover.
   ------------------------------------------------------------------- */
.gzfc-header-cat-style-underline .gzf-header-cat-list {
	gap: 24px;
	padding: 12px 0;
}
.gzfc-header-cat-style-underline .gzf-header-cat-list a {
	position: relative;
	padding-bottom: 5px;
}
.gzfc-header-cat-style-underline .gzf-header-cat-list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--gzf-color-primary), var(--gzf-color-accent));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .3s ease;
}
.gzfc-header-cat-style-underline .gzf-header-cat-list li.gzf-header-cat-current a::after {
	transform: scaleX(1);
}
@media (hover: hover) {
	.gzfc-header-cat-style-underline .gzf-header-cat-list a:hover::after,
	.gzfc-header-cat-style-underline .gzf-header-cat-list a:focus-visible::after {
		transform: scaleX(1);
	}
}

/* -------------------------------------------------------------------
   4. Highlight Box — animated background/highlight behind the
      hovered or active category.
   ------------------------------------------------------------------- */
.gzfc-header-cat-style-highlight .gzf-header-cat-list {
	gap: 6px;
	padding: 10px 0;
}
.gzfc-header-cat-style-highlight .gzf-header-cat-list a {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: 8px;
	background-color: transparent;
	transition: background-color .25s ease, color .25s ease;
}
.gzfc-header-cat-style-highlight .gzf-header-cat-list li.gzf-header-cat-current a {
	background-color: rgba(255, 77, 28, .18);
	color: var(--gzf-color-heading);
}
@media (hover: hover) {
	.gzfc-header-cat-style-highlight .gzf-header-cat-list a:hover,
	.gzfc-header-cat-style-highlight .gzf-header-cat-list a:focus-visible {
		background-color: rgba(255, 77, 28, .12);
		color: var(--gzf-color-heading);
	}
}

/* -------------------------------------------------------------------
   5. Gradient Style — modern gradient accent on the category text,
      filling in as a solid gradient pill on hover/active.
   ------------------------------------------------------------------- */
.gzfc-header-cat-style-gradient .gzf-header-cat-list {
	gap: 14px;
	padding: 12px 0;
}
.gzfc-header-cat-style-gradient .gzf-header-cat-list a {
	display: inline-flex;
	align-items: center;
	padding: 6px 6px;
	border-radius: 999px;
	font-weight: 700;
	background-image: linear-gradient(90deg, var(--gzf-color-primary), var(--gzf-color-accent));
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	transition: padding .25s ease, color .25s ease, -webkit-text-fill-color .25s ease, background-clip .1s;
}
.gzfc-header-cat-style-gradient .gzf-header-cat-list li.gzf-header-cat-current a {
	background-clip: border-box;
	-webkit-background-clip: border-box;
	color: #fff;
	-webkit-text-fill-color: #fff;
	padding: 6px 16px;
}
@media (hover: hover) {
	.gzfc-header-cat-style-gradient .gzf-header-cat-list a:hover,
	.gzfc-header-cat-style-gradient .gzf-header-cat-list a:focus-visible {
		background-clip: border-box;
		-webkit-background-clip: border-box;
		color: #fff;
		-webkit-text-fill-color: #fff;
		padding: 6px 16px;
	}
}
/* Browsers without text background-clip support (rare) simply keep the
   plain muted link color instead of transparent-on-nothing text. */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
	.gzfc-header-cat-style-gradient .gzf-header-cat-list a {
		color: var(--gzf-color-muted);
		-webkit-text-fill-color: initial;
	}
}

/* -------------------------------------------------------------------
   6. Icon Style — a small tag icon appears next to each category.
   ------------------------------------------------------------------- */
.gzfc-header-cat-style-icon .gzf-header-cat-list {
	gap: 18px;
	padding: 12px 0;
}
.gzfc-header-cat-style-icon .gzf-header-cat-list a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.gzfc-header-cat-style-icon .gzfc-header-cat-icon {
	display: inline-flex;
	color: var(--gzf-color-primary);
	transition: color .25s ease, transform .25s ease;
}
.gzfc-header-cat-style-icon .gzf-header-cat-list li.gzf-header-cat-current .gzfc-header-cat-icon {
	color: var(--gzf-color-accent);
}
@media (hover: hover) {
	.gzfc-header-cat-style-icon .gzf-header-cat-list a:hover .gzfc-header-cat-icon,
	.gzfc-header-cat-style-icon .gzf-header-cat-list a:focus-visible .gzfc-header-cat-icon {
		color: var(--gzf-color-accent);
		transform: scale(1.15) rotate(-8deg);
	}
}

/* -------------------------------------------------------------------
   Responsive fine-tuning — Tablet (<=1024px) and Mobile (<=782px / <=600px).
   The row itself already scrolls horizontally (framework default), these
   just trim spacing/sizes so pills/boxes/gaps don't feel oversized on
   small screens. Classic is untouched (no selectors below match it).
   ------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.gzfc-header-cat-style-pills .gzf-header-cat-list,
	.gzfc-header-cat-style-neon .gzf-header-cat-list,
	.gzfc-header-cat-style-underline .gzf-header-cat-list,
	.gzfc-header-cat-style-highlight .gzf-header-cat-list,
	.gzfc-header-cat-style-gradient .gzf-header-cat-list,
	.gzfc-header-cat-style-icon .gzf-header-cat-list {
		gap: 10px;
	}
}

@media (max-width: 782px) {
	.gzfc-header-cat-style-pills .gzf-header-cat-list a,
	.gzfc-header-cat-style-neon .gzf-header-cat-list a {
		padding: 6px 14px;
		font-size: .8rem;
	}
	.gzfc-header-cat-style-highlight .gzf-header-cat-list a {
		padding: 7px 12px;
		font-size: .8rem;
	}
	.gzfc-header-cat-style-underline .gzf-header-cat-list {
		gap: 18px;
	}
	.gzfc-header-cat-style-icon .gzf-header-cat-list {
		gap: 14px;
	}
	.gzfc-header-cat-style-icon .gzfc-header-cat-icon svg {
		width: 12px;
		height: 12px;
	}
}

@media (max-width: 600px) {
	body[class*="gzfc-header-cat-style-"] .gzf-header-cat-list {
		padding: 10px 0;
	}
	.gzfc-header-cat-style-pills .gzf-header-cat-list a,
	.gzfc-header-cat-style-neon .gzf-header-cat-list a {
		padding: 6px 12px;
	}
	.gzfc-header-cat-style-gradient .gzf-header-cat-list {
		gap: 10px;
	}
}

/* Respect reduced-motion preferences, same as the rest of this theme. */
@media (prefers-reduced-motion: reduce) {
	.gzf-header-cat-list a,
	.gzf-header-cat-list a::after,
	.gzfc-header-cat-icon {
		transition: none !important;
	}
}