/**
 * Chapter tabs styling (Frontend\ChapterTabsShortcode /
 * templates/chapter-tabs.php), plus the Overview and Gallery blocks that fill
 * its fixed tabs.
 *
 * SPECIFICITY NOTE — read before "simplifying" a selector here.
 * This markup renders inside an Elementor Shortcode widget, so Elementor's own
 * frontend.css applies to it: `.elementor img { height: auto }`,
 * `.elementor a { ... }` and friends. Those are (0,1,1) and load *after* this
 * file, so a plain `.bchbc-chapter-gallery-item img` (also (0,1,1)) loses on
 * source order and images silently revert to their natural heights. Every rule
 * that Elementor also targets is therefore deliberately written with two
 * classes, e.g. `.bchbc-chapter-gallery .bchbc-chapter-gallery-item img`.
 * Dropping the extra class will re-break it in a way that only shows up on the
 * live site.
 *
 * Three states matter:
 *   - unenhanced (no JavaScript): plain stacked sections with headings
 *   - `.is-enhancing` (the template's inline script ran, the footer script
 *     has not yet): laid out as tabs, first panel showing — so there is no
 *     flash of the stacked layout while the page finishes loading
 *   - `.is-enhanced` (JS ran): a real tab strip
 * Everything tab-specific is scoped to those last two, so the no-JS view can
 * never end up half-styled as a tab strip that does not work.
 *
 * @package BCHBC\ChapterManagement
 */

:root {
	--bchbc-primary: var( --e-global-color-primary, #2c4540 );
	--bchbc-secondary: var( --e-global-color-secondary, #5e7c8a );
	--bchbc-accent: var( --e-global-color-accent, #5e7c8a );
	--bchbc-on-primary: #ffffff;
	--bchbc-border-color: #e3e0d8;
	--bchbc-muted: #6b6f66;
	--bchbc-heading-font: var( --e-global-typography-primary-font-family, Georgia, 'Times New Roman', serif );
	--bchbc-tab-border: #5e7c8a82;
	--bchbc-tab-box-bg: #ffffff5c;
	--bchbc-tab-box-border: #5e7c8a80;
}

/* ---- Eyebrow heading ---- */

.bchbc-chapter-tab-panel .bchbc-chapter-tab-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 1.25em;
	color: var( --bchbc-primary );
	font-size: 0.85em;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.bchbc-chapter-tab-panel .bchbc-chapter-tab-eyebrow-dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	background: var( --bchbc-accent );
	border-radius: 50%;
}

/* ---- Unenhanced: stacked sections ---- */

/* Server-rendered tab buttons do nothing without JavaScript. */
.bchbc-chapter-tabs:not( .is-enhancing ):not( .is-enhanced ) .bchbc-chapter-tablist {
	display: none;
}

/* Scoped to `:not(.is-enhanced)` rather than being reset again further down.
   An earlier version did the reset with
   `.is-enhanced .panel + .panel { padding-top: 0 }`, which at (0,4,0) beat the
   (0,3,0) `padding: 40px` on the panel itself — so every panel *except the
   first* silently lost its top padding. Making the two states mutually
   exclusive means they cannot fight at all. */
.bchbc-chapter-tabs:not( .is-enhanced ):not( .is-enhancing ) .bchbc-chapter-tab-panel + .bchbc-chapter-tab-panel {
	margin-top: 2em;
	padding-top: 2em;
	border-top: 1px solid var( --bchbc-border-color );
}

.bchbc-chapter-tab-panel .bchbc-chapter-tab-title {
	margin: 0 0 0.75em;
	font-family: var( --bchbc-heading-font );
	font-size: 1.4em;
	font-weight: 700;
}

/* ---- Enhanced: real tab strip ---- */

/* The tab button carries the panel's accessible name once enhanced, so the
   original heading would be announced twice. */
.bchbc-chapter-tabs.is-enhanced .bchbc-chapter-tab-title--enhanced,
.bchbc-chapter-tabs.is-enhancing > .bchbc-chapter-tab-panel > .bchbc-chapter-tab-title {
	display: none;
}

/* Before the footer script sets `hidden` on the inactive panels, show only
   the first — the one it selects unless the URL deep-links elsewhere. */
.bchbc-chapter-tabs.is-enhancing:not( .is-enhanced ) > .bchbc-chapter-tab-panel ~ .bchbc-chapter-tab-panel {
	display: none;
}

/* Holds the tablist and, after it, the Contact link. Both are flex rows with
   the same gap, so the Contact pill lines up with the tabs as though it were
   one of them — while staying outside the tablist in the accessibility tree,
   because it opens no panel. */
.bchbc-chapter-tabs .bchbc-chapter-tabstrip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 1em;
}

.bchbc-chapter-tabs .bchbc-chapter-tablist {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0;
	padding: 0;
}

/* Pills that sit above the panel rather than trying to fuse with it. The
   earlier "active tab joined to the box" treatment depended on a 1px overlap
   surviving every theme, breakpoint and wrapped row — it did not, and a tab
   half-attached to a card is exactly what read as janky. A clear gap is
   robust at any width and still obviously a tab strip. */
/* Shared by the real tab `<button>`s and the Contact `<a>`, so the two are
   visually identical. The anchor-specific resets (`display`, `text-decoration`)
   are harmless on a button. */
.bchbc-chapter-tabs .bchbc-chapter-tab {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	margin: 0;
	padding: 0.85em 1.5em;
	background: #fff;
	color: var( --bchbc-primary );
	font-family: inherit;
	font-size: 0.85em;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	border: 1px solid var( --bchbc-tab-border );
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* The Contact link never becomes "active" — it navigates rather than
   selecting a panel — so it only ever has the resting and hover states. */
.bchbc-chapter-tabs .bchbc-chapter-tab--link:hover,
.bchbc-chapter-tabs .bchbc-chapter-tab--link:focus {
	color: var( --bchbc-on-primary );
	text-decoration: none;
}

.bchbc-chapter-tabs .bchbc-chapter-tab:hover {
	background: var( --bchbc-secondary );
	color: var( --bchbc-on-primary );
	border-color: var( --bchbc-secondary );
}

/* Never colour-only: the active tab is also the only one with no border
   contrast against its own fill, and it is the only one whose panel is shown —
   but for anyone who cannot see the fill, `aria-selected` carries it. */
.bchbc-chapter-tabs .bchbc-chapter-tab.is-active {
	background: var( --bchbc-primary );
	color: var( --bchbc-on-primary );
	border-color: var( --bchbc-primary );
}

.bchbc-chapter-tabs .bchbc-chapter-tab:focus-visible {
	outline: 2px solid var( --bchbc-primary );
	outline-offset: 2px;
}

/* Only one panel is ever visible, so styling each individually reads as a
   single card below the strip. */
.bchbc-chapter-tabs.is-enhanced .bchbc-chapter-tab-panel,
.bchbc-chapter-tabs.is-enhancing .bchbc-chapter-tab-panel {
	padding: 40px;
	background: var( --bchbc-tab-box-bg );
	border: 1px solid var( --bchbc-tab-box-border );
	border-radius: 20px;
	box-shadow: 0 22px 39px -18px rgba( 0, 0, 0, 0.21 );
}

/* Focusable per the ARIA tabs pattern, but it should not draw a ring when
   merely clicked into. */
.bchbc-chapter-tabs .bchbc-chapter-tab-panel:focus {
	outline: none;
}

.bchbc-chapter-tabs .bchbc-chapter-tab-panel:focus-visible {
	outline: 2px solid var( --bchbc-primary );
	outline-offset: 4px;
}

.bchbc-chapter-tab-panel .bchbc-chapter-tab-content > :first-child {
	margin-top: 0;
}

.bchbc-chapter-tab-panel .bchbc-chapter-tab-content > :last-child {
	margin-bottom: 0;
}

/* ---- Chapter Overview block ---- */

.bchbc-chapter-tab-content .bchbc-chapter-overview,
.bchbc-chapter-overview {
	display: grid;
	/* 70/30, matching the column widths the Elementor template used. */
	grid-template-columns: minmax( 0, 7fr ) minmax( 0, 3fr );
	gap: 2.5em;
	align-items: start;
}

.bchbc-chapter-overview .bchbc-chapter-overview-content > :first-child {
	margin-top: 0;
}

.bchbc-chapter-overview .bchbc-chapter-overview-content > :last-child {
	margin-bottom: 0;
}

.bchbc-chapter-overview .bchbc-chapter-overview-aside {
	display: flex;
	flex-direction: column;
	gap: 1em;
	min-width: 0;
}

/* Two classes: `.elementor img { height: auto }` would otherwise win on
   source order — see the specificity note at the top of this file. */
.bchbc-chapter-overview .bchbc-chapter-overview-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

/* Sidebar buttons (Contact Us, Follow Us On Facebook). Every visual property
   is stated explicitly rather than inherited — a theme link colour landing on
   these is what made the Facebook button render as an empty pill. */
.bchbc-chapter-overview .bchbc-chapter-aside-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em;
	width: 100%;
	padding: 0.9em 1.5em;
	color: #fff;
	font-family: inherit;
	font-size: 0.85em;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	/* Both sidebar buttons share one colour — they are a matched pair of
	   secondary actions, and giving Contact Us the primary fill made it read
	   as the more important of the two. The `--contact` / `--facebook`
	   modifier classes stay because the icon rules below still need them. */
	background: var( --bchbc-accent );
	border: none;
	border-radius: 999px;
	box-sizing: border-box;
}

.bchbc-chapter-overview .bchbc-chapter-aside-btn:hover,
.bchbc-chapter-overview .bchbc-chapter-aside-btn:focus {
	background: color-mix( in srgb, var( --bchbc-accent ) 85%, black );
	color: #fff;
	text-decoration: none;
}

.bchbc-chapter-overview .bchbc-chapter-aside-btn-label {
	flex: 1 1 auto;
	color: #fff;
	text-align: left;
}

/* Pinned to a fixed size. Elementor and many themes set `svg { width: 100% }`,
   which would blow the icon up to fill the button and squeeze the label to
   zero width — the empty-looking button again. */
.bchbc-chapter-overview .bchbc-chapter-aside-btn-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
}

.bchbc-chapter-overview .bchbc-chapter-aside-btn-icon svg {
	display: block;
	width: 18px;
	height: 18px;
	color: #fff;
	fill: currentColor;
	stroke: currentColor;
}

/* The Facebook mark is a solid glyph, not a stroked outline like the rest of
   the icon set — stroking it would thicken it into a blob. */
.bchbc-chapter-overview .bchbc-chapter-aside-btn--facebook .bchbc-chapter-aside-btn-icon svg {
	stroke: none;
}

.bchbc-chapter-overview .bchbc-chapter-aside-btn--contact .bchbc-chapter-aside-btn-icon svg {
	fill: none;
}

/* ---- Chapter gallery ---- */

.bchbc-chapter-tab-content .bchbc-chapter-gallery,
.bchbc-chapter-gallery {
	display: grid;
	/* 200px rather than 160px: fewer, larger columns leave a smaller orphan
	   row when the image count does not divide evenly, which is what made the
	   grid look unfinished. */
	grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
	gap: 1em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bchbc-chapter-gallery .bchbc-chapter-gallery-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bchbc-chapter-gallery .bchbc-chapter-gallery-item a {
	display: block;
	line-height: 0;
}

/* Two classes, and `aspect-ratio` rather than a fixed height, so every tile
   matches at any column width. See the specificity note at the top. */
.bchbc-chapter-gallery .bchbc-chapter-gallery-item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px;
	transition: transform 0.15s ease;
}

.bchbc-chapter-gallery .bchbc-chapter-gallery-item a:hover img {
	transform: scale( 1.02 );
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	border: 0;
}

/* ---- Responsive ---- */

@media ( max-width: 1024px ) {
	.bchbc-chapter-tabs.is-enhanced .bchbc-chapter-tab-panel,
	.bchbc-chapter-tabs.is-enhancing .bchbc-chapter-tab-panel {
		padding: 24px 20px;
	}
}

@media ( max-width: 800px ) {
	.bchbc-chapter-tab-content .bchbc-chapter-overview,
	.bchbc-chapter-overview {
		display: flex;
		flex-direction: column;
	}
}

@media ( max-width: 600px ) {
	.bchbc-chapter-tabs .bchbc-chapter-tablist {
		gap: 0.4em;
	}

	.bchbc-chapter-tabs .bchbc-chapter-tab {
		flex: 1 1 auto;
		padding: 0.75em 1em;
		font-size: 0.78em;
		letter-spacing: 0.03em;
	}

	.bchbc-chapter-tabs.is-enhanced .bchbc-chapter-tab-panel,
	.bchbc-chapter-tabs.is-enhancing .bchbc-chapter-tab-panel {
		padding: 18px 15px;
	}

	.bchbc-chapter-tab-content .bchbc-chapter-gallery,
	.bchbc-chapter-gallery {
		grid-template-columns: repeat( auto-fill, minmax( 140px, 1fr ) );
		gap: 0.6em;
	}
}