/**
 * Auto Bible Links - front-end styling.
 *
 * Styles scripture links and the Bibles.org pop-up to match the site's
 * design system. Colours are pulled from the Breakdance global palette via
 * CSS custom properties, with the brand hex values as fallbacks so the
 * plugin still looks correct if those variables are unavailable.
 */

:root {
	/* River Slate - global link colour */
	--abl-link: var( --bde-palette-color-1-f8391d81-3691-4b93-a332-ef40d8d9b2c8, #4d6d7e );
	/* Deep Water */
	--abl-link-hover: var( --bde-palette-color-1-bfa3faec-6f94-4110-9d1c-54f42526b67c, #3e5b6b );
	/* Riverwood Blue */
	--abl-accent: var( --bde-palette-color-1-7bd7acce-43b5-4c09-a96d-8558f5df4e5d, #83a8bc );
	/* Raisin - heading ink */
	--abl-ink: var( --bde-palette-color-1-840758d1-d57f-4d57-8528-c7c4268637f4, #141a1d );
	/* Warm Ink - body copy */
	--abl-body: var( --bde-palette-color-1-40e890b3-75da-4bf0-965e-6a442d00fb00, #4a453f );
	/* Riverwood Wood - muted text */
	--abl-muted: var( --bde-palette-color-1-835103c3-abf9-4db1-ac72-0730b4c8879c, #70665d );
	/* Sand Line - hairlines */
	--abl-line: var( --bde-palette-color-1-40dd3db5-8495-451e-931e-89c0f47c3cbe, #e9e2d9 );
	/* Parchment - modal surface */
	--abl-surface: var( --bde-palette-color-1-e2ecb920-285e-4c2d-a19c-dcbf442731a5, #faf7f3 );

	--abl-font-heading: Newsreader, "Noto Serif", Georgia, serif;
	--abl-font-body: Montserrat, -apple-system, sans-serif;
}

/* ---------------------------------------------------------------------
 * Scripture references in content
 *
 * Inside rich text the theme already styles these exactly like every other
 * link, and the site's accessibility stylesheet intentionally underlines
 * them - so these rules are deliberately low specificity. They only supply
 * a sensible baseline for scripture links that appear outside rich-text
 * containers (headings, widgets, captions), and let the theme win elsewhere.
 * ------------------------------------------------------------------ */

a.gb-link,
a.verseLink {
	color: var( --abl-link );
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color 0.15s ease;
}

a.gb-link:hover,
a.gb-link:focus,
a.verseLink:hover,
a.verseLink:focus {
	color: var( --abl-link-hover );
}

/* The highlighter renders its links as buttons, not navigable links. */
a.gb-link {
	cursor: pointer;
}

/* Visible keyboard focus for the pop-up triggers. */
a.gb-link:focus-visible,
a.verseLink:focus-visible {
	outline: 2px solid var( --abl-accent );
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---------------------------------------------------------------------
 * Bibles.org passage pop-up
 *
 * Selectors are scoped to #gb-modal so they win over the widget's own
 * class-based styles, which are injected at runtime.
 * ------------------------------------------------------------------ */

#gb-modal .gb-modal-wrapper {
	background-color: rgba( 20, 26, 29, 0.55 );
	-webkit-backdrop-filter: blur( 3px );
	backdrop-filter: blur( 3px );
}

#gb-modal .gb-modal-container {
	background-color: var( --abl-surface );
	border: 1px solid var( --abl-line );
	border-radius: 12px;
	box-shadow:
		0 1px 2px rgba( 20, 26, 29, 0.06 ),
		0 12px 32px rgba( 20, 26, 29, 0.18 );
	padding: 32px;
	/* Match the site's article measure (720px) so the passage reads like the
	   surrounding content instead of stretching across the whole screen. */
	width: min( 720px, calc( 100vw - 32px ) );
	max-width: calc( 100vw - 32px );
	max-height: calc( 100vh - 32px );
}

/* Let the inner scroll area follow the panel width. */
#gb-modal .gb-modal-content {
	width: auto;
	max-width: 100%;
}

/* Passage reference heading. */
#gb-modal .gb-passage-reference {
	font-family: var( --abl-font-heading );
	font-size: 28px;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var( --abl-ink );
	margin: 0 0 18px;
	/* Symmetrical inline padding keeps a long reference clear of the close control. */
	padding: 0 30px 14px;
	border-bottom: 1px solid var( --abl-line );
}

/* Passage body. */
#gb-modal .gb-passage-content,
#gb-modal .scripture-styles {
	font-family: var( --abl-font-heading );
	font-size: 18px;
	line-height: 1.7;
	color: var( --abl-body );
}

#gb-modal .scripture-styles p {
	margin: 0 0 1em;
}

/* Verse numbers. */
#gb-modal .scripture-styles .v {
	color: var( --abl-accent );
	font-family: var( --abl-font-body );
	font-size: 0.68em;
	font-weight: 600;
	vertical-align: 0.42em;
	line-height: 1;
	margin-right: 0.35em;
}

/* Section headings within a passage. */
#gb-modal .scripture-styles .s1,
#gb-modal .scripture-styles .s2 {
	font-family: var( --abl-font-heading );
	font-size: 15px;
	font-weight: 400;
	font-style: italic;
	letter-spacing: 0.01em;
	color: var( --abl-muted );
	margin: 1.6em 0 0.6em;
}

/* Copyright / attribution footer. */
#gb-modal .gb-passage-copyright {
	font-family: var( --abl-font-body );
	font-size: 12px;
	line-height: 1.6;
	color: var( --abl-muted );
	margin-top: 24px;
	padding: 16px 0 0;
	border-top: 1px solid var( --abl-line );
}

/* Close control.
 *
 * The widget hangs this outside the panel's top-right corner, which can fall
 * off-screen on narrow viewports. Tuck it inside the panel's padding instead.
 */
#gb-modal .gb-modal-close-icon {
	top: 14px;
	right: 14px;
	width: 22px;
	height: 22px;
	padding: 5px;
	box-sizing: border-box;
	background-color: var( --abl-link );
	border-radius: 100%;
	z-index: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

#gb-modal .gb-modal-close-icon:hover,
#gb-modal .gb-modal-close-icon:focus {
	background-color: var( --abl-ink );
}

@media ( max-width: 782px ) {

	#gb-modal .gb-modal-container {
		padding: 22px;
		border-radius: 10px;
	}

	#gb-modal .gb-passage-reference {
		font-size: 23px;
	}

	#gb-modal .gb-passage-content,
	#gb-modal .scripture-styles {
		font-size: 17px;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	body a.gb-link,
	body a.verseLink,
	#gb-modal .gb-modal-close-icon {
		transition: none;
	}
}