/* ==========================================================================
   Homepage-only styles. Loaded only when is_front_page().
   ========================================================================== */

/* Offset anchor-scroll targets so the sticky subnav doesn't cover the
   section heading when jumping via the anchor links. */
#hero,
#fordelar,
#kompatibilitet,
#sa-funkar-det,
#vanliga-fragor {
	scroll-margin-top: 5rem;
}

/* -- Compact utility header --------------------------------------------- */
/* A secondary, clearly-utility jump-link strip - deliberately NOT styled
   like a header (tinted background instead of white, thinner, no shadow) so
   it reads as "part of the page" sitting under Blocksy's real site header,
   not as a second competing navbar. Sticks under the real header so both
   stay visible while scrolling. */
.elefantlas-subnav {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--elc-bg-alt);
}
.elefantlas-subnav__bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--elc-space-3);
	padding-block: 0.6rem;
}
.elefantlas-subnav__links {
	display: flex;
	gap: var(--elc-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.elefantlas-subnav__links a {
	color: var(--elc-text-muted);
	text-decoration: none;
	font-size: var(--elc-font-size-sm);
	font-weight: 600;
}
.elefantlas-subnav__links a:hover {
	color: var(--elc-accent);
}
.elefantlas-subnav__cta {
	flex-shrink: 0;
}
@media (max-width: 780px) {
	.elefantlas-subnav__links {
		display: none;
	}
}

/* -- Hero ----------------------------------------------------------------- */
.elefantlas-hero {
	padding-block: var(--elc-space-6);
}
.elefantlas-hero__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: var(--elc-space-6);
	align-items: center;
}
/* The packaging photo is near-square (1127x1086) but the hero slot is a 4:5
   portrait box - object-fit:cover (the default for all other slots) would
   crop its sides. Show it uncropped instead, on a matching white backdrop. */
.elefantlas-hero__image img.elefantlas-image {
	object-fit: contain !important;
	background: var(--elc-surface);
}
.elefantlas-hero h1 {
	font-size: var(--elc-font-size-3xl);
	line-height: 1.08;
	margin: 0 0 var(--elc-space-3);
	letter-spacing: -0.01em;
}
.elefantlas-hero__lead {
	font-size: var(--elc-font-size-lg);
	color: var(--elc-text-muted);
	max-width: 34rem;
	margin: 0 0 var(--elc-space-4);
}
.elefantlas-hero__buybox {
	display: flex;
	align-items: center;
	gap: var(--elc-space-3);
	flex-wrap: wrap;
	background: var(--elc-surface);
	border: 1px solid var(--elc-border);
	border-radius: var(--elc-radius-l);
	padding: var(--elc-space-3);
	box-shadow: var(--elc-shadow-s);
}
.elefantlas-hero__price {
	font-size: var(--elc-font-size-xl);
	font-weight: 800;
	color: var(--elc-text);
}
.elefantlas-hero__stock {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--elc-font-size-sm);
	font-weight: 600;
	color: var(--elc-accent);
}
.elefantlas-hero__stock::before {
	content: "";
	width: 0.55em;
	height: 0.55em;
	border-radius: 50%;
	background: var(--elc-accent);
	display: inline-block;
}
.elefantlas-hero__addtocart {
	flex-basis: 100%;
}
/* Style WooCommerce's own [add_to_cart] shortcode output to match the design
   system, without touching its markup/behaviour. WooCommerce ships this
   shortcode with an inline border/padding style by default - neutralize it. */
.elefantlas-hero__addtocart .add_to_cart_inline,
.elefantlas-hero__addtocart form.cart {
	display: flex;
	align-items: center;
	gap: var(--elc-space-2);
	flex-wrap: wrap;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.elefantlas-hero__addtocart .button,
.elefantlas-hero__addtocart .single_add_to_cart_button,
.elefantlas-hero__addtocart .ajax_add_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--elc-accent);
	color: var(--elc-accent-contrast) !important;
	font-weight: 700;
	padding: 0.9rem 1.75rem;
	border-radius: var(--elc-radius-m);
	min-height: 48px;
	text-decoration: none;
	border: none;
}
.elefantlas-hero__addtocart .button:hover {
	background: var(--elc-accent-hover);
}

.elefantlas-hero__meta {
	display: flex;
	gap: var(--elc-space-3);
	margin-top: var(--elc-space-2);
	font-size: var(--elc-font-size-sm);
	color: var(--elc-text-muted);
	flex-wrap: wrap;
}

@media (max-width: 900px) {
	.elefantlas-hero__grid {
		grid-template-columns: 1fr;
	}
	.elefantlas-hero__image {
		order: -1;
	}
}

/* -- Problem / Solution ---------------------------------------------------- */
.elefantlas-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--elc-space-6);
	align-items: center;
}
.elefantlas-split__body h2 {
	font-size: var(--elc-font-size-2xl);
	margin: 0 0 var(--elc-space-2);
}
.elefantlas-split__body p {
	color: var(--elc-text-muted);
	font-size: var(--elc-font-size-lg);
	line-height: 1.6;
}
.elefantlas-split--reverse .elefantlas-split__image {
	order: 2;
}
@media (max-width: 900px) {
	.elefantlas-split {
		grid-template-columns: 1fr;
	}
	.elefantlas-split--reverse .elefantlas-split__image,
	.elefantlas-split .elefantlas-split__image {
		order: -1;
	}
}

/* -- Benefit grid ------------------------------------------------------- */
.elefantlas-benefit-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--elc-space-3);
}
.elefantlas-benefit-card {
	background: var(--elc-surface);
	border: 1px solid var(--elc-border);
	border-radius: var(--elc-radius-l);
	padding: var(--elc-space-3);
	text-align: left;
}
.elefantlas-benefit-card__icon {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--elc-bg-alt);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--elc-space-2);
	color: var(--elc-accent);
}
.elefantlas-benefit-card h3 {
	font-size: var(--elc-font-size-base);
	margin: 0 0 0.35rem;
}
.elefantlas-benefit-card p {
	margin: 0;
	color: var(--elc-text-muted);
	font-size: var(--elc-font-size-sm);
	line-height: 1.5;
}
@media (max-width: 900px) {
	.elefantlas-benefit-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.elefantlas-benefit-grid {
		grid-template-columns: 1fr;
	}
}

/* -- Compatibility ---------------------------------------------------- */
.elefantlas-compat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--elc-space-3);
	max-width: 50rem;
	margin-inline: auto;
}
.elefantlas-compat-card {
	background: var(--elc-surface);
	border: 1px solid var(--elc-border);
	border-radius: var(--elc-radius-m);
	padding: var(--elc-space-3);
	text-align: center;
	font-weight: 700;
}
.elefantlas-compat-card span {
	display: block;
	font-weight: 400;
	color: var(--elc-text-muted);
	font-size: var(--elc-font-size-sm);
	margin-top: 0.25rem;
}
@media (max-width: 700px) {
	.elefantlas-compat-grid {
		grid-template-columns: 1fr;
	}
}

/* -- Install steps ---------------------------------------------------- */
.elefantlas-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--elc-space-4);
}
.elefantlas-step__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--elc-accent);
	color: var(--elc-accent-contrast);
	font-weight: 700;
	margin-bottom: var(--elc-space-2);
}
.elefantlas-step h3 {
	font-size: var(--elc-font-size-lg);
	margin: var(--elc-space-2) 0 0.35rem;
}
.elefantlas-step p {
	color: var(--elc-text-muted);
	margin: 0;
}
@media (max-width: 780px) {
	.elefantlas-steps {
		grid-template-columns: 1fr;
	}
}

/* -- Video demos ---------------------------------------------------- */
.elefantlas-video-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--elc-space-4);
	max-width: 50rem;
	margin-inline: auto;
}
.elefantlas-video-card video {
	width: 100%;
	height: auto;
	max-height: 32rem;
	display: block;
	border-radius: var(--elc-radius-l);
	border: 1px solid var(--elc-border);
	background: #000;
}
.elefantlas-video-card__caption {
	text-align: center;
	font-weight: 600;
	margin: var(--elc-space-1) 0 0;
	color: var(--elc-text-muted);
}
@media (max-width: 700px) {
	.elefantlas-video-grid {
		grid-template-columns: 1fr;
	}
}

/* -- Package contents ---------------------------------------------------- */
.elefantlas-package-section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--elc-space-6);
	align-items: center;
}
@media (max-width: 900px) {
	.elefantlas-package-section {
		grid-template-columns: 1fr;
	}
}

/* -- Delivery/returns ---------------------------------------------------- */
.elefantlas-info-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--elc-space-3);
}
.elefantlas-info-card {
	background: var(--elc-surface);
	border: 1px solid var(--elc-border);
	border-radius: var(--elc-radius-m);
	padding: var(--elc-space-3);
}
.elefantlas-info-card h3 {
	font-size: var(--elc-font-size-base);
	margin: 0 0 0.5rem;
}
.elefantlas-info-card p {
	margin: 0;
	color: var(--elc-text-muted);
	font-size: var(--elc-font-size-sm);
	line-height: 1.6;
}
@media (max-width: 780px) {
	.elefantlas-info-grid {
		grid-template-columns: 1fr;
	}
}

/* -- FAQ accordion ---------------------------------------------------- */
.elefantlas-faq {
	max-width: var(--elc-container-narrow);
	margin-inline: auto;
	display: grid;
	gap: 0.75rem;
}
.elefantlas-faq-item {
	background: var(--elc-surface);
	border: 1px solid var(--elc-border);
	border-radius: var(--elc-radius-m);
	overflow: hidden;
}
.elefantlas-faq-item > summary {
	list-style: none;
	cursor: pointer;
	padding: var(--elc-space-2) var(--elc-space-3);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--elc-space-2);
	min-height: 48px;
}
.elefantlas-faq-item > summary::-webkit-details-marker {
	display: none;
}
.elefantlas-faq-item__icon {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	position: relative;
}
.elefantlas-faq-item__icon::before,
.elefantlas-faq-item__icon::after {
	content: "";
	position: absolute;
	background: var(--elc-accent);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.elefantlas-faq-item__icon::before {
	width: 100%;
	height: 2px;
}
.elefantlas-faq-item__icon::after {
	width: 2px;
	height: 100%;
	transition: transform 0.15s ease;
}
.elefantlas-faq-item[open] .elefantlas-faq-item__icon::after {
	transform: translate(-50%, -50%) scaleY(0);
}
.elefantlas-faq-item__answer {
	padding: 0 var(--elc-space-3) var(--elc-space-3);
	color: var(--elc-text-muted);
	line-height: 1.6;
}

/* -- Final CTA ---------------------------------------------------- */
.elefantlas-final-cta {
	background: var(--elc-accent);
	color: #ffffff;
	border-radius: var(--elc-radius-l);
	padding: var(--elc-space-6) var(--elc-space-4);
	text-align: center;
}
.elefantlas-final-cta h2 {
	font-size: var(--elc-font-size-2xl);
	margin: 0 0 var(--elc-space-2);
	color: #ffffff;
}
.elefantlas-final-cta p {
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--elc-font-size-lg);
	max-width: 36rem;
	margin: 0 auto var(--elc-space-4);
}
.elefantlas-final-cta .elc-btn--primary {
	background: #ffffff;
	color: var(--elc-accent);
}
.elefantlas-final-cta .elc-btn--primary:hover {
	background: var(--elc-bg-alt);
}
/* The [add_to_cart] shortcode reuses .elefantlas-hero__addtocart's button
   styling, which is accent-on-transparent - invisible against this section's
   own accent-colored background. Force it to match .elc-btn--primary here. */
.elefantlas-final-cta .elefantlas-hero__addtocart .add_to_cart_inline {
	justify-content: center;
}
.elefantlas-final-cta .elefantlas-hero__addtocart .button,
.elefantlas-final-cta .elefantlas-hero__addtocart .single_add_to_cart_button,
.elefantlas-final-cta .elefantlas-hero__addtocart .ajax_add_to_cart {
	background: #ffffff;
	color: var(--elc-accent) !important;
}
.elefantlas-final-cta .elefantlas-hero__addtocart .button:hover {
	background: var(--elc-bg-alt);
}