/**
 * WC Subcategory Buttons — Frontend Styles
 *
 * All colour/dimension values are driven by CSS custom properties that are
 * injected inline by PHP (scb_generate_css_vars()) so they reflect the
 * admin-saved settings without needing a build step.
 *
 * Breakpoint: ≤768 px → native <select> (mobile), >768 px → <a> buttons (desktop).
 */

/* ─────────────────────────────────────────────────────────────────────────────
   CSS custom-property defaults
   (overridden by the inline block generated from saved settings)
───────────────────────────────────────────────────────────────────────────── */
:root {
	--scb-btn-bg:           #2d3748;
	--scb-btn-color:        #ffffff;
	--scb-btn-border:       #e97b2e;
	--scb-btn-border-width: 3px;
	--scb-btn-active-bg:    #4a5568;
	--scb-btn-radius:       4px;
	--scb-btn-font-size:    14px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Wrapper — centres the entire nav block
───────────────────────────────────────────────────────────────────────────── */
.scb-wrapper {
	display:         flex;
	justify-content: center;
	align-items:     center;
	width:           100%;
	margin:          1.5rem 0 2rem;
	box-sizing:      border-box;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Desktop: button list  (hidden on mobile via media query below)
───────────────────────────────────────────────────────────────────────────── */
.scb-btn-list {
	display:         flex;
	flex-wrap:       wrap;
	gap:             0.65rem;
	justify-content: center;
	align-items:     center;
	list-style:      none;
	margin:          0;
	padding:         0;
}

.scb-btn-item {
	list-style: none;
	margin:     0;
	padding:    0;
}

.scb-btn {
	display:          inline-block;
	background-color: var(--scb-btn-bg);
	color:            var(--scb-btn-color);

	/* Only bottom border visible — matches the design reference */
	border-top:       none;
	border-right:     none;
	border-left:      none;
	border-bottom:    var(--scb-btn-border-width) solid var(--scb-btn-border);

	border-radius:    var(--scb-btn-radius);
	font-size:        var(--scb-btn-font-size);
	font-weight:      700;
	letter-spacing:   0.06em;
	text-transform:   uppercase;
	text-decoration:  none;
	padding:          0.9rem 1.4rem;
	line-height:      1;
	cursor:           pointer;
	white-space:      nowrap;

	/* Smooth micro-animations */
	transition:
		background-color 0.2s ease,
		transform        0.15s ease,
		box-shadow       0.2s ease;
}

/* Hover / focus */
.scb-btn:hover,
.scb-btn:focus-visible {
	/* Lighten background by 15 % using color-mix (supported in all modern browsers) */
	background-color: color-mix(in srgb, var(--scb-btn-bg) 82%, #ffffff 18%);
	color:            var(--scb-btn-color);
	text-decoration:  none;
	transform:        translateY(-2px);
	box-shadow:       0 5px 16px rgba(0, 0, 0, 0.22);
	outline:          none;
}

/* Active (current page) */
.scb-btn--active {
	background-color: var(--scb-btn-active-bg);
	box-shadow:       0 2px 10px rgba(0, 0, 0, 0.28);
}

.scb-btn--active:hover,
.scb-btn--active:focus-visible {
	background-color: color-mix(in srgb, var(--scb-btn-active-bg) 82%, #ffffff 18%);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Mobile: <select> — hidden on desktop
───────────────────────────────────────────────────────────────────────────── */
.scb-select {
	display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Accessibility: visually hidden but screen-reader accessible
───────────────────────────────────────────────────────────────────────────── */
.scb-sr-only {
	position:   absolute;
	width:      1px;
	height:     1px;
	padding:    0;
	margin:     -1px;
	overflow:   hidden;
	clip:       rect(0, 0, 0, 0);
	white-space: nowrap;
	border:     0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Mobile breakpoint  ≤ 768 px
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

	.scb-wrapper {
		flex-direction: column;
	}

	/* Hide button list on mobile */
	.scb-btn-list {
		display: none;
	}

	/* Show native select on mobile */
	.scb-select {
		display:          block;
		width:            100%;
		max-width:        420px;
		background-color: var(--scb-btn-bg);
		color:            var(--scb-btn-color);

		border-top:       none;
		border-right:     none;
		border-left:      none;
		border-bottom:    var(--scb-btn-border-width) solid var(--scb-btn-border);
		border-radius:    var(--scb-btn-radius);

		font-size:        var(--scb-btn-font-size);
		font-weight:      700;
		letter-spacing:   0.06em;
		text-transform:   uppercase;

		padding:          0.7rem 2.8rem 0.7rem 1rem;
		cursor:           pointer;

		/* Remove browser default arrow — add a custom SVG chevron */
		-webkit-appearance: none;
		appearance:         none;
		background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23ffffff' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-repeat:  no-repeat;
		background-position: right 1rem center;

		/* Smooth highlight */
		transition: box-shadow 0.2s ease;
	}

	.scb-select:focus {
		outline:        2px solid var(--scb-btn-border);
		outline-offset: 2px;
		box-shadow:     0 0 0 3px color-mix(in srgb, var(--scb-btn-border) 35%, transparent 65%);
	}

	/* Style options for dark background (works in Firefox; limited in Chrome) */
	.scb-select option {
		background-color: #1a202c;
		color:            #ffffff;
		font-weight:      600;
	}
}