/* Owlsora Elements — FAQ widget
 * Colors/sizes come from widget controls as CSS variables on .spf2.
 */

.spf2 {
	--spf2-bg: #F7FAFD;
	--spf2-max: 1200px;
	--spf2-left: 40%;
	--spf2-pad-y: 104px;
	--spf2-pad-x: 16px;
	--spf2-gap: 64px;
	--spf2-eyebrow: #0B6BF0;
	--spf2-title: #0B1A3D;
	--spf2-still: #56658A;
	--spf2-link: #0B6BF0;
	--spf2-link-hover: #0845B0;
	--spf2-item-bg: #FFFFFF;
	--spf2-item-radius: 22px;
	--spf2-item-gap: 16px;
	--spf2-q: #060F24;
	--spf2-a: #56658A;
	--spf2-chev: #0B6BF0;
	--spf2-accent: #0B6BF0;
	--spf2-frame: #0B1A3D;
	--spf2-frame-shadow: #2D8CFF;

	position: relative;
	background-color: var(--spf2-bg);
	color: var(--spf2-q);
	font-family: "Figtree", "Avenir Next", "Segoe UI", system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.6;
}
.spf2 *,
.spf2 *::before,
.spf2 *::after { box-sizing: border-box; }

.spf2--texture {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%230b1a3d' fill-opacity='.06'%3E%3Ccircle cx='12' cy='20' r='1.4'/%3E%3Ccircle cx='70' cy='44' r='1'/%3E%3Ccircle cx='130' cy='12' r='1.2'/%3E%3Ccircle cx='40' cy='96' r='1.4'/%3E%3Ccircle cx='110' cy='80' r='1'/%3E%3Ccircle cx='150' cy='130' r='1.3'/%3E%3Ccircle cx='86' cy='140' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
}

.spf2.owe-stretch { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); }

.spf2__inner {
	max-width: var(--spf2-max);
	margin: 0 auto;
	padding-top: var(--spf2-pad-y);
	padding-bottom: var(--spf2-pad-y);
	padding-left: max(var(--spf2-pad-x), env(safe-area-inset-left, 0px));
	padding-right: max(var(--spf2-pad-x), env(safe-area-inset-right, 0px));
	display: grid;
	grid-template-columns: minmax(0, var(--spf2-left)) minmax(0, 1fr);
	gap: var(--spf2-gap);
	align-items: start;
}
.spf2__side { min-width: 0; }

/* left side */
.spf2__eyebrow { display: block; margin-bottom: 14px; color: var(--spf2-eyebrow); font-size: 15px; font-weight: 800; letter-spacing: .01em; }
.spf2 .spf2__title {
	margin: 0;
	padding: 0;
	color: var(--spf2-title);
	font-family: "Anton", Impact, "Arial Narrow Bold", sans-serif;
	font-size: clamp(46px, 6vw, 84px);
	font-weight: 400;
	line-height: .98;
	text-transform: uppercase;
	text-wrap: balance;
}
.spf2__photo {
	position: relative;
	margin-top: 36px;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border: 4px solid var(--spf2-frame);
	border-radius: 26px;
	box-shadow: 8px 8px 0 var(--spf2-frame-shadow);
	background: radial-gradient(circle at 50% 45%, #FFFFFF 0, #E1EEF9 60%, #BFDCF3 100%);
}
.spf2 .spf2__img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; max-width: none; }
.spf2__photo--cover .spf2__img { object-fit: cover; }
.spf2__photo--contain .spf2__img { object-fit: contain; padding: 10%; }
.spf2 .spf2__fallback { position: absolute; inset: 0; z-index: 0; width: 80%; height: auto; margin: auto; object-fit: contain; }
.spf2__still { margin-top: 36px; color: var(--spf2-still); font-size: 20px; line-height: 1.6; }
.spf2__still > span { display: block; }
.spf2 .spf2__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	color: var(--spf2-link);
	font-size: 22px;
	font-weight: 800;
	text-decoration: none;
}
.spf2 .spf2__link:hover,
.spf2 .spf2__link:focus-visible { color: var(--spf2-link-hover); }
.spf2__link svg { width: 18px; height: 18px; transition: transform .15s ease; }
.spf2__link:hover svg { transform: translateX(4px); }

/* accordion */
.spf2__list { display: grid; gap: var(--spf2-item-gap); min-width: 0; }
.spf2__item {
	background: var(--spf2-item-bg);
	border-radius: var(--spf2-item-radius);
	box-shadow: 0 10px 24px rgba(11, 26, 61, .1);
	overflow: hidden;
	border-left: 0 solid var(--spf2-accent);
	transition: border-left-width .2s ease;
}
.spf2--bar .spf2__item[open] { border-left-width: 5px; }
.spf2__sum {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 24px 28px;
	cursor: pointer;
}
.spf2__sum::-webkit-details-marker { display: none; }
.spf2__sum::marker { content: ""; }
.spf2 .spf2__q { margin: 0; padding: 0; color: var(--spf2-q); font-size: 19px; font-weight: 800; line-height: 1.6; text-transform: none; letter-spacing: 0; }
.spf2__chev { width: 20px; height: 20px; flex: none; color: var(--spf2-chev); transition: transform .2s ease; }
.spf2__item[open] .spf2__chev { transform: rotate(180deg); }
.spf2__sum:hover .spf2__q { color: var(--spf2-title); }
.spf2__sum:focus-visible { outline: 3px solid var(--spf2-accent); outline-offset: -3px; border-radius: var(--spf2-item-radius); }

.spf2__a { padding: 0 28px 26px; color: var(--spf2-a); font-size: 18px; line-height: 1.75; }
.spf2 .spf2__a p { margin: 0 0 12px; }
.spf2 .spf2__a p:last-child { margin-bottom: 0; }
.spf2 .spf2__a a { color: var(--spf2-eyebrow); font-weight: 700; }

@media (max-width: 900px) {
	.spf2__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.spf2__photo { max-width: 460px; }
	.spf2--photo-desktop .spf2__photo { display: none; }
}
@media (max-width: 767px) {
	.spf2__sum { padding: 20px 22px; }
	.spf2__a { padding: 0 22px 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.spf2 * { transition: none !important; }
}

/* Full width: when this widget is alone in an Elementor container/column,
 * drop that container's padding so no gap shows above, below or beside it. */
.e-con:has(> .elementor-widget-ow-faq:only-child .owe-stretch),
.e-con:has(> .e-con-inner > .elementor-widget-ow-faq:only-child .owe-stretch) {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--margin-top: 0px;
	--margin-bottom: 0px;
	padding: 0;
}
.elementor-widget-wrap:has(> .elementor-widget-ow-faq:only-child .owe-stretch) { padding: 0 !important; }
.elementor-section:has(.elementor-widget-wrap > .elementor-widget-ow-faq:only-child .owe-stretch) { padding-top: 0; padding-bottom: 0; }
.elementor-widget-ow-faq:has(.owe-stretch) { margin-top: 0; margin-bottom: 0; --kit-widget-spacing: 0px; }