/* Bookworm Elementor Builder – front-end glue between Elementor and the Bookworm theme. */

/* Elementor containers that carry the theme's .container class behave like it. */
.e-con.container {
	--width: 100%;
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}
@media (min-width: 576px) { .e-con.container { max-width: 540px; } }
@media (min-width: 768px) { .e-con.container { max-width: 720px; } }
@media (min-width: 992px) { .e-con.container { max-width: 960px; } }
@media (min-width: 1200px) { .e-con.container { max-width: 1200px; } }
@media (min-width: 1480px) { .e-con.container { max-width: 1430px; } }

/* Headings keep the theme's typography; utility classes on the widget reach the title. */
.elementor-widget-heading .elementor-heading-title { line-height: 1.2; }
.elementor-widget-heading[class*="font-size-"] .elementor-heading-title { font-size: inherit; }
.elementor-widget-heading[class*="font-weight"] .elementor-heading-title { font-weight: inherit; }
.elementor-widget-heading[class*="text-lh-"] .elementor-heading-title { line-height: inherit; }

/* Images converted from the block editor keep their natural block behaviour. */
.elementor-widget-image.bwel-img-block img { display: block; }

.bwel-notice {
	padding: 16px;
	border: 1px dashed #c3c4c7;
	color: #50575e;
	font-size: 14px;
	text-align: center;
}

/* ---------- Swiper based sliders ---------- */
.bwel-swiper { position: relative; }
.bwel-swiper .swiper { overflow: hidden; }
.bwel-swiper .swiper-slide { height: auto; }
.bwel-swiper:not(.bwel-swiper--ready) .swiper-wrapper { display: flex; overflow: hidden; }
.bwel-swiper:not(.bwel-swiper--ready) .swiper-slide { flex: 0 0 33.333%; }

.bwel-swiper-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	background: transparent;
	border: 0;
	padding: 0;
	font-size: 1.6rem;
	line-height: 1;
	color: #000;
	cursor: pointer;
}
.bwel-swiper-arrow:hover { color: #323232; }
.bwel-swiper-arrow:focus { outline: 0; }
.bwel-swiper-prev { left: 8px; }
.bwel-swiper-next { right: 8px; }
.bwel-swiper-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; position: static; }
.bwel-swiper-dots .swiper-pagination-bullet { width: 8px; height: 8px; background: #ccc; opacity: 1; margin: 0 !important; }
.bwel-swiper-dots .swiper-pagination-bullet-active { background: #000; }

.bwel-banner { margin: 0; }
.bwel-banner img { display: block; width: 100%; height: auto; }

.bwel-card { display: flex; flex-direction: column; gap: 8px; }
.bwel-card__image { margin: 0; }
.bwel-card__image img { display: block; width: 100%; height: auto; object-fit: cover; }
.bwel-card__body { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bwel-card__title { margin: 0; }
.bwel-card__text { margin: 0; }
.bwel-card__actions { margin-top: 8px; }
.bwel-card__button {
	display: inline-block;
	background-color: #161619;
	color: #fff;
	padding: 12px 1.2em;
	font-size: 1rem;
	line-height: 1.5;
	border: 1px solid transparent;
	border-radius: 5px;
	text-decoration: none;
}
.bwel-card__button:hover { color: #fff; opacity: .85; text-decoration: none; }

/* Stand-alone view of a site template. */
.bwel-template-view { background: #fff; }

/* Rows converted from Bookworm "Columns" blocks: same gutters as the theme grid. */
.e-con.bwel-row {
	--width: calc(100% + 30px);
	width: calc(100% + 30px);
	max-width: none;
	margin-left: -15px;
	margin-right: -15px;
}

/* Converted sections stack their content in normal document flow, exactly like the
   theme's own pages: margins of neighbouring blocks overlap instead of adding up.
   Remove the "bwel-flow" class from a container (Advanced > CSS classes) to turn
   it back into a regular Elementor flex container. */
.e-con.bwel-flow,
.e-con.bwel-flow > .e-con-inner {
	display: block;
}
.e-con.bwel-flow {
	--width: auto;
}

/* Elementor resets a few elements inside its content; give the theme's values back. */
.elementor hr {
	box-sizing: content-box;
	margin-top: 1rem;
	margin-bottom: 1rem;
}
.elementor img.rounded-circle { border-radius: 50%; }
.elementor img.rounded { border-radius: .25rem; }
.elementor img.rounded-lg { border-radius: .3rem; }

/* Columns converted from the theme grid: width between 992px and 1199px, a step the
   theme has and Elementor's default breakpoints do not. Remove the "bwel-lg-*" class
   from a column to control this range with Elementor's own width settings. */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.e-con.bwel-lg-1 { --width: 8.3333% !important; }
	.e-con.bwel-lg-2 { --width: 16.6667% !important; }
	.e-con.bwel-lg-3 { --width: 25% !important; }
	.e-con.bwel-lg-4 { --width: 33.3333% !important; }
	.e-con.bwel-lg-5 { --width: 41.6667% !important; }
	.e-con.bwel-lg-6 { --width: 50% !important; }
	.e-con.bwel-lg-7 { --width: 58.3333% !important; }
	.e-con.bwel-lg-8 { --width: 66.6667% !important; }
	.e-con.bwel-lg-9 { --width: 75% !important; }
	.e-con.bwel-lg-10 { --width: 83.3333% !important; }
	.e-con.bwel-lg-11 { --width: 91.6667% !important; }
	.e-con.bwel-lg-12 { --width: 100% !important; }
}