/**
 * BS360 Glossary — Frontend styles.
 *
 * Intentionally minimal. The active theme controls typography and colours.
 * These rules handle layout only (grid, filter bar, basic spacing).
 *
 * @since 1.0.0
 */

/* -----------------------------------------------------------------
   Overview: grid
   ----------------------------------------------------------------- */

.bs360-glossary-overview {
	width: 100%;
}

.bs360-glossary-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.bs360-glossary-list--cols-1 { grid-template-columns: 1fr; }
.bs360-glossary-list--cols-2 { grid-template-columns: repeat(2, 1fr); }
.bs360-glossary-list--cols-3 { grid-template-columns: repeat(3, 1fr); }
.bs360-glossary-list--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
	.bs360-glossary-list--cols-3,
	.bs360-glossary-list--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.bs360-glossary-list--cols-2,
	.bs360-glossary-list--cols-3,
	.bs360-glossary-list--cols-4 {
		grid-template-columns: 1fr;
	}
}

/* -----------------------------------------------------------------
   Overview: list items
   ----------------------------------------------------------------- */

.bs360-glossary-list__item {
	border: 1px solid #e5e7eb;
	border-radius: 4px;
}

/*
 * The link is the card's clickable surface: display: block makes it take
 * the full width of the grid cell, and the padding (moved here from the
 * card) gives it its own height instead of shrinking to the word. No
 * positioning needed — it's simply the first block-level thing in the card.
 * @since 1.1.19
 * @since 1.1.20/1.1.21 Tried position: absolute variants; overcomplicated
 *              this and didn't render correctly in practice.
 * @since 1.1.22 Simplified: display: block + padding directly on the link,
 *              no position/inset/z-index at all.
 */
/*
 * font-weight: 700, not 600: the bs360 theme only registers Roboto 400 and
 * 700 as actual font files (see theme.json). A 600 request has no matching
 * file, so the browser approximates it (usually resolving to 700 anyway)
 * after a render/reflow delay — visible as text first rendering in a
 * fallback font, then snapping narrower once the real file loads. Using
 * 700 directly, matching an existing font file, avoids that delay/jump.
 * @since 1.1.23
 */
.bs360-glossary-list__link {
	display: block;
	padding: 0.75rem;
	font-weight: 700;
	text-decoration: none;
}

.bs360-glossary-list__link:hover {
	text-decoration: underline;
}

.bs360-glossary-list__excerpt {
	margin: 0.4rem 0 0;
	font-size: 0.9em;
	color: #6b7280;
}

/* -----------------------------------------------------------------
   Letter-block filter
   1:1 visual match with BS360 Downloads / BS360 Customers filter tabs:
   centered row, filled anthracite-050 pill with green-500 active/hover
   state, same padding/radius/shadow/transition values.
   @since 1.1.18 Replaced single-letter tabs (bordered outline style, no
   hover state, 999px radius, not centered) with the shared tab design.
   ----------------------------------------------------------------- */

.bs360-glossary-filter-tabs {
	display:         flex;
	flex-wrap:       wrap;
	justify-content: center;
	gap:             8px;
	margin-bottom:   24px;
}

.bs360-glossary-filter-tab {
	padding:       8px 20px;
	border:        none;
	border-radius: 12px;
	background:    var( --wp--preset--color--anthracite-050, #F5F6F7 );
	color:         var( --wp--preset--color--anthracite-400, #5E737F );
	font-size:     14px;
	cursor:        pointer;
	box-shadow:    0 1px 3px rgba( 0, 0, 0, 0.08 );
	transition:    background 0.3s, color 0.3s, box-shadow 0.3s;
}

.bs360-glossary-filter-tab:hover {
	background: var( --wp--preset--color--green-500, #679D2E );
	color:      #fff;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.12 );
}

.bs360-glossary-filter-tab.bs360-is-active {
	background: var( --wp--preset--color--green-500, #679D2E );
	color:      #fff;
	box-shadow: none;
}

/* -----------------------------------------------------------------
   Empty state
   ----------------------------------------------------------------- */

.bs360-glossary-empty {
	color: #6b7280;
}

/* -----------------------------------------------------------------
   Hidden items (JS filter)
   ----------------------------------------------------------------- */

.bs360-glossary-list__item.is-hidden {
	display: none;
}

/* -----------------------------------------------------------------
   Auto-generated glossary links (in regular page content, not the
   overview list above)
   Follows the de-facto web convention for definitional/glossary links
   (also used by Wikipedia's glossary templates): inherit the
   surrounding text colour instead of the usual link colour, and use a
   dotted underline instead of a solid one, so an auto-link reads as
   "this word has a definition" rather than "this is a navigation link"
   and doesn't create a visual "sea of links" in running text.
   @since 1.2.0
   ----------------------------------------------------------------- */

.bs360-glossary-auto-link {
	color: inherit;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 2px;
}

.bs360-glossary-auto-link:hover {
	text-decoration-style: solid;
}