/**
 * Class pages (Barbarian, Bard, ...): subclass toggle buttons.
 *
 * Every subclass's feature text at a given level sits in its own
 * .subclass-panel Group block, hidden until its matching .subclass-btn
 * is clicked - see subclass-toggle.js. Both use a shared slug suffix
 * class (e.g. "subclass-btn-berserker" / "subclass-panel-berserker") so
 * one click can show/hide that subclass's panel at every level it
 * appears (3, 6, 10, 14, ...) in one pass.
 */

.subclass-panel {
	display: none;
}

.subclass-panel.is-active {
	display: block;
}

/* The real Buttons block normally gets its gap from an inline
   "--wp--style--block-gap" custom property set on the block itself
   (part of the block's own saved markup) - since these buttons are
   plain generated HTML with no such inline style, that variable falls
   back to whatever (or nothing) the theme sets globally, which here
   collapses every button flush against the next with no rounding, so
   they read as one solid bar instead of separate buttons. Setting gap
   and radius explicitly here fixes that regardless of the theme. */
.subclass-buttons.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	margin-bottom: 1em;
}

.subclass-btn .wp-block-button__link {
	cursor: pointer;
	opacity: 0.55;
	border-radius: 4px;
	transition: opacity 0.15s ease;
	/* A bit smaller than the site's normal (Discord/Back to Top style)
	   buttons - this is a dense row of 4-5+ per level, not a single call
	   to action - but not so small they're hard to tap/read. */
	padding: 0.55rem 1.15rem;
	font-size: 0.95rem;
}

.subclass-btn:hover .wp-block-button__link {
	opacity: 0.8;
}

/* Full opacity + a dark outline is the "selected" look - the button
   keeps its normal fill color/branding, it just visually pops off the
   unselected (dimmed) buttons next to it. */
.subclass-btn.is-active .wp-block-button__link {
	opacity: 1;
	outline: 2px solid var(--wp--preset--color--contrast, #373D49);
	outline-offset: 2px;
}