/*
 * RS BibleGateway - front end styles.
 *
 * Do not edit: change the look from  RS BibleGateway > Appearance.
 * The settings are printed as CSS custom properties (--wpbgw-*) on .wpbgw;
 * the fallbacks below are the plugin defaults.
 */

.wpbgw,
.wpbgw *,
.wpbgw *::before,
.wpbgw *::after {
	box-sizing: border-box;
}

.wpbgw {
	container-type: inline-size;
	width: 100%;
	max-width: var(--wpbgw-max-width, 100%);
	margin: 0 auto 1.5em;
	font-family: var(--wpbgw-font, "Open Sans", Arial, Helvetica, sans-serif);
	color: var(--wpbgw-text, inherit);
	text-align: var(--wpbgw-align, left);
}

.wpbgw [hidden] {
	display: none !important;
}

/* ------------------------------------------------------------ layout */

.wpbgw__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 3%;
	align-items: start;
}

.wpbgw[data-layout="side"] .wpbgw__layout {
	grid-template-columns: var(--wpbgw-image-width, 49%) minmax(0, 1fr);
}

.wpbgw[data-layout="side"][data-image="right"] .wpbgw__layout {
	grid-template-columns: minmax(0, 1fr) var(--wpbgw-image-width, 49%);
}

.wpbgw[data-layout="side"][data-image="right"] .wpbgw__media {
	order: 2;
}

.wpbgw[data-layout="side"][data-has-image="0"] .wpbgw__layout {
	grid-template-columns: minmax(0, 1fr);
}

.wpbgw__media {
	min-width: 0;
}

.wpbgw[data-layout="stack"] .wpbgw__media {
	margin-bottom: 1em;
}

.wpbgw__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wpbgw-radius, 6px);
}

.wpbgw__panel {
	min-width: 0;
	padding: calc(var(--wpbgw-padding, 30px) * 0.66) var(--wpbgw-padding, 30px);
	background-color: var(--wpbgw-panel-bg, #f1f1f1);
	border-radius: var(--wpbgw-radius, 6px);
}

/* Narrow containers (phones, narrow theme columns): always stack. */
@container (max-width: 640px) {
	.wpbgw[data-layout][data-image][data-context] .wpbgw__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.wpbgw[data-layout][data-image][data-context] .wpbgw__media {
		order: 0;
		margin-bottom: 1em;
	}
}

/* -------------------------------------------------------- typography */

.wpbgw__reference {
	margin: 0 0 0.4em;
	padding: 0;
	font-family: inherit;
	font-size: var(--wpbgw-h-size, 32px);
	font-weight: var(--wpbgw-h-weight, 400);
	line-height: 1.2;
	color: var(--wpbgw-heading, var(--wpbgw-text, inherit));
	text-align: var(--wpbgw-align, left);
}

.wpbgw__text {
	font-size: var(--wpbgw-t-size, 23px);
	font-weight: var(--wpbgw-t-weight, 400);
	line-height: var(--wpbgw-line-height, 1.5);
	color: var(--wpbgw-text, inherit);
}

.wpbgw__text p {
	margin: 0 0 0.8em;
	padding: 0;
}

.wpbgw__text > :last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------ links, buttons */

.wpbgw__chapter {
	margin: 20px 0;
	padding: 10px 0;
	border-top: 1px solid var(--wpbgw-border, #ccc);
	border-bottom: 1px solid var(--wpbgw-border, #ccc);
	text-align: center;
}

/* Plain text link: underline (or not) exactly as the theme styles links. */
.wpbgw__chapter a {
	color: var(--wpbgw-link, #eb0627);
	font-size: 19px;
}

.wpbgw__pager {
	margin: 10px 0 15px;
	text-align: center;
}

.wpbgw__pager ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpbgw__pager li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpbgw__pager a {
	display: inline-block;
	padding: 5px 14px;
	border: 1px solid #ddd;
	border-radius: 15px;
	background-color: #fff;
	color: var(--wpbgw-link, #eb0627);
	text-decoration: none;
}

.wpbgw__all {
	margin: 0 0 10px;
	padding: 10px 0;
	text-align: center;
}

.wpbgw__all a {
	display: inline-block;
	padding: 10px 20px;
	border-radius: 5px;
	background-color: var(--wpbgw-button-bg, #4a525f);
	color: var(--wpbgw-button-text, #fff);
	text-decoration: none;
}

/* Buttons are never underlined, whatever the theme does to links
   (text-decoration, or fake underlines made with a shadow). */
.wpbgw .wpbgw__all a,
.wpbgw .wpbgw__all a:hover,
.wpbgw .wpbgw__all a:focus,
.wpbgw .wpbgw__all a:visited,
.wpbgw .wpbgw__pager a,
.wpbgw .wpbgw__pager a:hover,
.wpbgw .wpbgw__pager a:focus,
.wpbgw .wpbgw__pager a:visited,
.wpbgw .wpbgw__share a,
.wpbgw .wpbgw__share a:hover,
.wpbgw .wpbgw__share a:focus,
.wpbgw .wpbgw__share a:visited {
	text-decoration: none !important;
	box-shadow: none !important;
}

/* ------------------------------------------------------------ sharing */

.wpbgw__share {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--wpbgw-border, #ccc);
	text-align: center;
}

.wpbgw__share ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpbgw__share li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpbgw__share a {
	display: inline-flex;
	align-items: center;
	padding: 5px 20px;
	border: 1px solid #ddd;
	border-radius: 4px;
	color: #fff;
	text-decoration: none;
}

.wpbgw__share a.fb {
	background-color: #4267b2;
}

.wpbgw__share a.tw {
	background-color: #1da1f2;
}

/* Replace the Twitter dashicon with the X logo. */
.wpbgw .dashicons.dashicons-twitter::before {
	content: unset;
}

.wpbgw .dashicons.dashicons-twitter {
	border-radius: 3px;
	background: #fff url("../img/twitter-logo.svg") no-repeat center bottom;
	background-size: 20px 20px;
	vertical-align: text-bottom;
}

/* ------------------------------------------------------------- widget */

.wpbgw[data-context="widget"] {
	margin-bottom: 0;
}

.wpbgw[data-context="widget"] .wpbgw__layout {
	display: block;
}

.wpbgw[data-context="widget"] .wpbgw__media {
	margin-bottom: 0.5em;
}

.wpbgw[data-context="widget"] .wpbgw__panel {
	padding: 10px 5px;
	background: none;
	border-radius: 0;
}

.wpbgw[data-context="widget"] .wpbgw__reference {
	font-size: var(--wpbgw-w-h-size, 22px);
}

.wpbgw[data-context="widget"] .wpbgw__text {
	font-size: var(--wpbgw-w-t-size, 16px);
}

.wpbgw[data-context="widget"] .wpbgw__chapter a {
	font-size: 1em;
}