/* =========================================================
   BHM Course Filter — Frontend Styles
   ========================================================= */

.bhm-course-filter {
	/* Paleta de Kadence si existeix; si no, valors per defecte */
	--bhm-cf-primary:       var( --global-palette1, #382c8a );
	--bhm-cf-text:          var( --global-palette3, #1a1714 );
	--bhm-cf-muted:         var( --global-palette4, #5a5550 );
	--bhm-cf-border:        #f3f3f3;
	--bhm-cf-bg:            #fff;
	--bhm-cf-search-bg:     #e8e4dc;
	--bhm-cf-radius:        6px;
	--bhm-cf-columns:       3;
	font-family: inherit;
	color: var( --bhm-cf-text );
}

/* ---------------------------------------------------------
   Search bar
   --------------------------------------------------------- */

.bhm-cf-search {
	display:        flex;
	flex-direction: row-reverse;
	margin-bottom:  1.5rem;
	border-radius:  24px;
	overflow:       hidden;
	transition:     box-shadow 0.2s;
	background:     var( --bhm-cf-search-bg );
}

/* L'input no té outline: l'indicador de focus és l'anell del contenidor */
.bhm-cf-search:focus-within {
	box-shadow: 0 0 0 2px var( --bhm-cf-primary );
}

input[type="search"].bhm-cf-search-input {
	flex:          1;
	border:        none;
	outline:       none;
	padding:       0.75rem 1rem;
	font-size:     1rem;
	background:    transparent;
	color:         var( --bhm-cf-text );
	min-width:     0;
}

.bhm-cf-search-input::placeholder {
	color: var( --bhm-cf-muted );
}

/* Remove the browser-default search clear button so we control UX */
.bhm-cf-search-input::-webkit-search-cancel-button { display: none; }

.bhm-cf-search-btn {
	flex-shrink:     0;
	border:          none;
	color:           var( --bhm-cf-muted );
	padding:         0 1rem;
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      transparent;
}

.bhm-cf-search-btn:hover,
.bhm-cf-search-btn:focus-visible {
	background: transparent;
}

/* ---------------------------------------------------------
   Taxonomy sections (categories + tags)
   --------------------------------------------------------- */

.bhm-cf-taxonomy {
	margin-bottom: 1.25rem;
}

.bhm-cf-taxonomy-label {
	display:        block;
	font-size:      0.75rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color:          var( --bhm-cf-muted );
	margin-bottom:  0.5rem;
}

.bhm-cf-pills {
	display:   flex;
	flex-wrap: wrap;
	gap:       0.375rem;
}

.bhm-cf-pill {
	display:       inline-flex;
	align-items:   center;
	gap:           0.3rem;
	background:    var( --bhm-cf-bg );
	border:        2px solid var( --bhm-cf-primary );
	border-radius: 100px;
	padding:       0.3rem 0.85rem;
	font-size:     0.85rem;
	color:         var( --bhm-cf-primary );
	text-transform: uppercase;
	cursor:        pointer;
	transition:    background 0.15s, border-color 0.15s, color 0.15s;
	line-height:   1.4;
}

.bhm-cf-pill:hover {
	border-color: var( --bhm-cf-primary );
	color:        var( --bhm-cf-bg );
	background-color: var( --bhm-cf-primary );
}

.bhm-cf-pill:focus-visible {
	outline:        2px solid var( --bhm-cf-primary );
	outline-offset: 2px;
}

.bhm-cf-pill.active {
	background:   var( --bhm-cf-primary );
	border-color: var( --bhm-cf-primary );
	color:        #fff;
}

.bhm-cf-pill-count {
	background:    rgba( 0, 0, 0, 0.12 );
	border-radius: 100px;
	padding:       0 0.4rem;
	font-size:     0.75em;
	line-height:   1.6;
}

.bhm-cf-pill.active .bhm-cf-pill-count {
	background: rgba( 255, 255, 255, 0.25 );
}

/* ---------------------------------------------------------
   Results area
   --------------------------------------------------------- */

.bhm-cf-results {
	margin-top:  2rem;
	position:    relative;
	min-height:  200px;
}

.bhm-cf-results-meta {
	margin-bottom: 1rem;
	color:         var( --bhm-cf-muted );
	font-size:     0.875rem;
	min-height:    1.25em;
}

/* ---------------------------------------------------------
   Course grid
   --------------------------------------------------------- */

.bhm-cf-grid {
	display:               grid;
	grid-template-columns: repeat( var( --bhm-cf-columns, 3 ), minmax( 0, 1fr ) );
	gap:                   1.5rem;
	transition:            opacity 0.2s;
}

@media ( max-width: 900px ) {
	.bhm-cf-grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

@media ( max-width: 560px ) {
	.bhm-cf-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   Loading spinner
   --------------------------------------------------------- */

.bhm-cf-loading {
	display:         flex;
	justify-content: center;
	align-items:     center;
	padding:         3rem 0;
}

.bhm-cf-spinner {
	display:       block;
	width:         36px;
	height:        36px;
	border:        3px solid var( --bhm-cf-border );
	border-top-color: var( --bhm-cf-primary );
	border-radius: 50%;
	animation:     bhm-cf-spin 0.7s linear infinite;
	flex-shrink:   0;
}

@keyframes bhm-cf-spin {
	to { transform: rotate( 360deg ); }
}

/* ---------------------------------------------------------
   No results
   --------------------------------------------------------- */

.bhm-cf-no-results {
	text-align:  center;
	padding:     3rem 1rem;
	color:       var( --bhm-cf-muted );
	font-size:   1rem;
}

/* ---------------------------------------------------------
   Pagination
   --------------------------------------------------------- */

.bhm-cf-pagination {
	margin-top: 2rem;
}

.bhm-cf-pages {
	display: flex;
	justify-content: center;
}

.bhm-cf-pages ul {
	display:     flex;
	flex-wrap:   wrap;
	gap:         0.25rem;
	list-style:  none;
	margin:      0;
	padding:     0;
	justify-content: center;
}

.bhm-cf-page-btn {
	background:    var( --bhm-cf-bg );
	border:        1px solid var( --bhm-cf-border );
	border-radius: var( --bhm-cf-radius );
	padding:       0.4rem 0.75rem;
	cursor:        pointer;
	font-size:     0.875rem;
	color:         var( --bhm-cf-text );
	transition:    background 0.15s, border-color 0.15s, color 0.15s;
	min-width:     36px;
	line-height:   1.4;
}

.bhm-cf-page-btn:hover {
	border-color: var( --bhm-cf-primary );
	color:        var( --bhm-cf-primary );
}

.bhm-cf-page-btn:focus-visible {
	outline:        2px solid var( --bhm-cf-primary );
	outline-offset: 2px;
}

.bhm-cf-page-btn.active {
	background:   var( --bhm-cf-primary );
	border-color: var( --bhm-cf-primary );
	color:        #fff;
	font-weight:  700;
	cursor:       default;
}