/*
Theme Name: Bananakit
Theme URI: https://bananakit.com
Description: Custom FSE child theme of Twenty Twenty-Five for Bananakit/Algajoy. Block-only, no page builder.
Author: Bananakit
Version: 0.6.0
Template: twentytwentyfive
Text Domain: bananakit
*/

/* Allow full-opacity custom gradients on cover blocks (override has-background-dim-N). */
.wp-block-cover .wp-block-cover__background.has-background-gradient {
	opacity: 1 !important;
}

/* ---------------- Compact language switcher ---------------- */
.bk-lang-switcher { position: relative; display: inline-block; font-family: 'Open Sans', sans-serif; }
.bk-lang-switcher .bk-lang-current,
.bk-lang-switcher .bk-lang-menu a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	background: transparent;
	border: 1px solid #e5e0ec;
	border-radius: 100px;
	color: #0e0c19;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.bk-lang-switcher .bk-lang-current:hover,
.bk-lang-switcher .bk-lang-menu a:hover {
	background: #f7f5fa;
	border-color: #8300e9;
}
.bk-lang-switcher .bk-lang-current img,
.bk-lang-switcher .bk-lang-menu img {
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(14,12,25,0.08);
}
.bk-lang-switcher .bk-lang-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #ffffff;
	border: 1px solid #e5e0ec;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(14,12,25,0.12);
	display: none;
	min-width: 80px;
	z-index: 9999;
}
.bk-lang-switcher .bk-lang-menu li { margin: 2px 0; }
.bk-lang-switcher .bk-lang-menu a {
	width: 100%;
	border: none;
	padding: 8px 12px;
	border-radius: 8px;
}
.bk-lang-switcher.is-open .bk-lang-menu { display: block; }
.bk-lang-switcher.is-open .bk-lang-current svg { transform: rotate(180deg); }
.bk-lang-switcher .bk-lang-current svg { transition: transform 0.15s; }

/* ---------------- Cover blocks: constrain inner-container to match header (1200px) and left-align text groups ---------------- */
.wp-block-cover .wp-block-cover__inner-container {
	max-width: 1200px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.wp-block-cover .wp-block-cover__inner-container > [style*="max-width:550px"],
.wp-block-cover .wp-block-cover__inner-container > p[style*="max-width:550px"] {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* ---------------- Button hover fix ---------------- */
/* All buttons: white text + purple bg on hover */
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus,
.wp-block-button__link.wp-element-button:hover,
.wp-block-button__link.wp-element-button:focus,
.wp-block-button__link.has-background:hover,
.wp-block-button__link.has-text-color:hover {
	color: #ffffff !important;
	background-color: #8300e9 !important;
	border-color: #8300e9 !important;
}

/* ===== MOBILE HERO IMAGE SWAP (page-id selectors) ===== */
@media (max-width: 781px) {

	/* ---- HOME: image on top, white text below ---- */
	.page-id-6154 .wp-block-cover.alignfull,
.page-id-6172 .wp-block-cover.alignfull,
.page-id-6181 .wp-block-cover.alignfull,
.page-id-6192 .wp-block-cover.alignfull,
.page-id-6203 .wp-block-cover.alignfull,
.page-id-6214 .wp-block-cover.alignfull,
.page-id-6225 .wp-block-cover.alignfull {
		display: flex !important;
		flex-direction: column !important;
		min-height: auto !important;
		height: auto !important;
		aspect-ratio: unset !important;
		background: #ffffff !important;
	}
	.page-id-6154 .wp-block-cover.alignfull .wp-block-cover__image-background,
.page-id-6172 .wp-block-cover.alignfull .wp-block-cover__image-background,
.page-id-6181 .wp-block-cover.alignfull .wp-block-cover__image-background,
.page-id-6192 .wp-block-cover.alignfull .wp-block-cover__image-background,
.page-id-6203 .wp-block-cover.alignfull .wp-block-cover__image-background,
.page-id-6214 .wp-block-cover.alignfull .wp-block-cover__image-background,
.page-id-6225 .wp-block-cover.alignfull .wp-block-cover__image-background {
		position: relative !important;
		display: block !important;
		width: 100% !important;
		height: 360px !important;
		object-fit: cover !important;
		object-position: center 20% !important;
		content: url('/wp-content/uploads/2026/04/Bananakit_Couple-mobile.jpg') !important;
	}
	.page-id-6154 .wp-block-cover.alignfull > .wp-block-cover__background,
.page-id-6172 .wp-block-cover.alignfull > .wp-block-cover__background,
.page-id-6181 .wp-block-cover.alignfull > .wp-block-cover__background,
.page-id-6192 .wp-block-cover.alignfull > .wp-block-cover__background,
.page-id-6203 .wp-block-cover.alignfull > .wp-block-cover__background,
.page-id-6214 .wp-block-cover.alignfull > .wp-block-cover__background,
.page-id-6225 .wp-block-cover.alignfull > .wp-block-cover__background { display: none !important; }
	.page-id-6154 .wp-block-cover.alignfull > .wp-block-cover__inner-container,
.page-id-6172 .wp-block-cover.alignfull > .wp-block-cover__inner-container,
.page-id-6181 .wp-block-cover.alignfull > .wp-block-cover__inner-container,
.page-id-6192 .wp-block-cover.alignfull > .wp-block-cover__inner-container,
.page-id-6203 .wp-block-cover.alignfull > .wp-block-cover__inner-container,
.page-id-6214 .wp-block-cover.alignfull > .wp-block-cover__inner-container,
.page-id-6225 .wp-block-cover.alignfull > .wp-block-cover__inner-container {
		position: relative !important;
		background: #ffffff !important;
		color: #0e0c19 !important;
		padding: 24px 20px 32px !important;
	}
	.page-id-6154 .wp-block-cover.alignfull .wp-block-group.has-background,
.page-id-6172 .wp-block-cover.alignfull .wp-block-group.has-background,
.page-id-6181 .wp-block-cover.alignfull .wp-block-group.has-background,
.page-id-6192 .wp-block-cover.alignfull .wp-block-group.has-background,
.page-id-6203 .wp-block-cover.alignfull .wp-block-group.has-background,
.page-id-6214 .wp-block-cover.alignfull .wp-block-group.has-background,
.page-id-6225 .wp-block-cover.alignfull .wp-block-group.has-background {
		background: transparent !important;
		backdrop-filter: none !important;
		padding: 0 !important; border-radius: 0 !important; max-width: 100% !important;
	}
	.page-id-6154 .wp-block-cover.alignfull .wp-block-cover__inner-container *,
.page-id-6172 .wp-block-cover.alignfull .wp-block-cover__inner-container *,
.page-id-6181 .wp-block-cover.alignfull .wp-block-cover__inner-container *,
.page-id-6192 .wp-block-cover.alignfull .wp-block-cover__inner-container *,
.page-id-6203 .wp-block-cover.alignfull .wp-block-cover__inner-container *,
.page-id-6214 .wp-block-cover.alignfull .wp-block-cover__inner-container *,
.page-id-6225 .wp-block-cover.alignfull .wp-block-cover__inner-container * { color: #0e0c19 !important; }
	.page-id-6154 .wp-block-cover.alignfull .wp-block-button__link,
.page-id-6172 .wp-block-cover.alignfull .wp-block-button__link,
.page-id-6181 .wp-block-cover.alignfull .wp-block-button__link,
.page-id-6192 .wp-block-cover.alignfull .wp-block-button__link,
.page-id-6203 .wp-block-cover.alignfull .wp-block-button__link,
.page-id-6214 .wp-block-cover.alignfull .wp-block-button__link,
.page-id-6225 .wp-block-cover.alignfull .wp-block-button__link { color: #ffffff !important; }

	/* ---- PRODUCTS: swap to portrait ---- */
	.page-id-6168 .wp-block-cover.alignfull .wp-block-cover__image-background,
.page-id-6178 .wp-block-cover.alignfull .wp-block-cover__image-background,
.page-id-6187 .wp-block-cover.alignfull .wp-block-cover__image-background,
.page-id-6198 .wp-block-cover.alignfull .wp-block-cover__image-background,
.page-id-6209 .wp-block-cover.alignfull .wp-block-cover__image-background,
.page-id-6220 .wp-block-cover.alignfull .wp-block-cover__image-background,
.page-id-6231 .wp-block-cover.alignfull .wp-block-cover__image-background {
		content: url('/wp-content/uploads/2026/04/Banana-products-mobile.jpg') !important;
	}

	/* ---- BLOG: swap to portrait ---- */
	.category-blog .wp-block-cover.alignfull .wp-block-cover__image-background {
		content: url('/wp-content/uploads/2026/04/Banana-Blogger-mobile.jpg') !important;
	}

	/* Kit & Refills: reposition */
	.wp-block-cover img.wp-block-cover__image-background[src*="Bananakit_3tubes"] {
		object-position: 70% center !important;
	}
	.wp-block-cover img.wp-block-cover__image-background[src*="Bananakit_Refills"] {
		object-position: 60% center !important;
	}
}

/* ===== MOBILE RESPONSIVE ===== */

/* Force hamburger menu on tablet & below */
@media (max-width: 781px) {
	/* Hide the responsive container (holds all nav items), show hamburger button */
	.wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
	.wp-block-navigation__responsive-container-open {
		display: flex !important;
		align-items: center;
		padding: 4px;
		color: #0e0c19;
	}
	/* Full-screen overlay menu when open */
	.wp-block-navigation__responsive-container.is-menu-open {
		display: flex !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		z-index: 99999 !important;
		background: #ffffff !important;
		padding: 2rem !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		display: flex !important;
		flex-direction: column !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		display: flex !important;
		flex-direction: column !important;
		gap: 4px;
		padding-top: 0;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-size: 15px !important;
		color: #0e0c19 !important;
		padding: 8px 0 !important;
		display: block !important;
	}
	/* Hide close button - tap hamburger again or outside to close */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		position: absolute !important;
		top: 8px !important;
		right: 16px !important;
	}
	/* Keep header relative for dropdown positioning */
	header.wp-block-group {
		position: relative !important;
	}
}

/* Tablet & below (matches WP core column-stacking breakpoint) */
@media (max-width: 781px) {
	/* Hero covers: auto height so text is never clipped */
	.wp-block-cover.alignfull {
		min-height: 340px !important;
	}

	/* Kit / Refills: switch left-to-right gradient to top-to-bottom
	   so text is readable when it fills the full mobile width */
	.wp-block-cover .wp-block-cover__background[style*="linear-gradient(90deg"] {
		background: linear-gradient(180deg, rgba(14,12,25,0.80) 0%, rgba(14,12,25,0.40) 60%, rgba(14,12,25,0) 100%) !important;
	}

	/* Product card covers: taller to show images, lighter gradient */
	.wp-block-columns .wp-block-column .wp-block-cover {
		min-height: 380px !important;
	}
	.wp-block-columns .wp-block-column .wp-block-cover .wp-block-cover__background {
		opacity: 0.55 !important;
	}

	/* Cover images: ensure they fill and don't overflow */
	.wp-block-cover__image-background {
		object-fit: cover !important;
		width: 100% !important;
		height: 100% !important;
	}

	/* Hide forced <br> in cover text so it reflows naturally */
	.wp-block-cover p br,
	.wp-block-cover .wp-block-group p br {
		display: none;
	}

	/* Let text groups fill available width instead of capping at 550px */
	.wp-block-cover .wp-block-cover__inner-container .wp-block-group[style*="max-width:550px"],
	.wp-block-cover .wp-block-cover__inner-container > [style*="max-width:550px"] {
		max-width: 100% !important;
	}

	/* Columns stack vertically: full width */
	.wp-block-columns {
		flex-direction: column !important;
	}
	.wp-block-columns .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}

	/* Images in content: constrain to viewport */
	.wp-block-image img,
	.wp-block-cover img:not(.wp-block-cover__image-background) {
		max-width: 100% !important;
		height: auto !important;
	}

	/* Reduce font size on hero titles for mobile */
	.wp-block-cover h1 {
		font-size: clamp(28px, 7vw, 48px) !important;
	}
	.wp-block-cover h2 {
		font-size: clamp(22px, 5vw, 36px) !important;
	}

	/* Inner container padding */
	.wp-block-cover .wp-block-cover__inner-container {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* Phone */
@media (max-width: 480px) {
	/* Shorter heroes on small phones */
	.wp-block-cover.alignfull {
		min-height: 300px !important;
	}

	/* Product cards: adequate height for image + text */
	.wp-block-columns .wp-block-column .wp-block-cover {
		min-height: 320px !important;
	}

	/* Buttons: smaller padding */
	.wp-block-button__link {
		padding: 12px 24px !important;
		font-size: 15px !important;
	}

	/* Language switcher: keep dropdown on screen */
	.bk-lang-switcher .bk-lang-menu {
		right: -8px;
		min-width: 70px;
	}

	/* Footer: stack vertically */
	footer.wp-block-group .wp-block-group {
		flex-direction: column;
		gap: 12px;
		align-items: flex-start !important;
	}

	/* Tables: make scrollable */
	.wp-block-table {
		overflow-x: auto !important;
		display: block !important;
	}
	.wp-block-table table {
		min-width: 500px;
	}
}