/*
Theme Name: BKH 2026
Theme URI: 
Author: Hedengren Agency
Author URI: 
Description: Theme for Bonniers Konsthall, based on the visual re-brand of 2026.
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 7.0
Version: 0.9.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bkh-2026
Tags: blog, one-column, three-columns, wide-blocks, block-patterns, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, rtl-language-support, style-variations, template-editing, theme-options, threaded-comments, translation-ready

/* Smooth scroll for anchor links. */

html {
	scroll-behavior: smooth;
}

/* Transition page background when scrolling into footer (opacity overlay). */

body {
	position: relative;
	/* 1x = 16px image (normal size). 2x = 32px image at 1:1 so Retina doesn’t scale it up. */
	/*
	cursor: url('/wp-content/themes/bkh-2026/assets/images/bkh-cursor_16x16.png') 8 8, auto;
	cursor: -webkit-image-set(
		url('/wp-content/themes/bkh-2026/assets/images/bkh-cursor_16x16.png') 1x,
		url('/wp-content/themes/bkh-2026/assets/images/bkh-cursor_32x32.png') 2x
	) 8 8, auto;
	*/
}

/* Use pointer (hand) cursor for links and buttons so hover is clearly interactive. */
a,
button,
[role="button"],
[type="button"],
[type="submit"] {
	cursor: pointer;
}

body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 0;
	background-color: var(--footer-scroll-bg, transparent);
	opacity: var(--footer-scroll-opacity, 0);
	transition: opacity 0.25s ease;
	pointer-events: none;
}

.wp-site-blocks {
	position: relative;
	z-index: 1;
}

/* Progresive enhancement to reduce widows and orphans. */

h1,
h2,
h3,
h4,
h5,
h6,
blockquote {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* Set default line height for font size presets. */

.has-xx-large-font-size {
	line-height: 1;
}

/* Fix line height for sub and sup. */

.entry-content p sub,
.entry-content p sup,
p.block-editor-block-list__block.wp-block-paragraph sub,
p.block-editor-block-list__block.wp-block-paragraph sup {
	line-height: 0;
}

/* Make sure footers have no margin. */

footer {
	margin-top: 0 !important;
}

/* Move header core/navigation to the right on mobile. */

.order-0 {
	order: 0;
}

.order-1 {
	order: 1;
}

.grow-0 {
	flex-grow: 0;
}

.grow {
	flex-grow: 1;
}

@media (min-width: 600px) {

	.md\:order-0 {
		order: 0;
	}

	.md\:order-1 {
		order: 1;
	}

	.md\:grow-0 {
		flex-grow: 0;
	}

	.md\:grow {
		flex-grow: 1;
	}

}

.overflow-hidden {
	overflow: hidden;
}


/* Migration fixes */

.gallery>figure,
.gallery img,
.section-inner img {
	max-width: 100%;
	height: auto;
}

hr {
	border: 1px solid var(--wp--preset--color--theme-6);
	border-width: 1px 0 0 0;
}

blockquote.wp-block-quote {
	margin-left: 0;
	margin-right: 0;
}

.migrated figcaption {
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--theme-4);
}

/**
 * Header navigation toggle: BKH triangle icon.
 * - Replace default hamburger icon with theme SVG.
 * - Make the toggle fill its container so the whole area is clickable.
 * - Rotate triangle to point down when menu is open.
 */

/* Ensure navigation wrapper can host a full-area toggle */
.wp-block-navigation {
	position: relative;
}

/* Base responsive toggle button (icon-sized, stays within layout) */
.wp-block-navigation__responsive-container-open {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0;
	min-width: 0;
}

/* Nuke all default contents (icon + text) so only our pseudo-element is visible */
.wp-block-navigation__responsive-container-open>* {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	opacity: 0 !important;
}

/* Triangle icon using the theme's SVG asset (points right by default) */
.wp-block-navigation__responsive-container-open::before {
	content: "";
	display: block;
	width: 36px;
	/* ~3:1 to get 12px height from SVG ratio */
	height: 12px;
	aspect-ratio: 1880 / 617;
	background: url("/wp-content/themes/bkh-2026/assets/images/bkh-next.svg") center / contain no-repeat;
	transition: transform 0.2s ease;
}

/* Make the entire menu-container group act as the clickable area */
.menu-container {
	cursor: pointer;
}

.menu-container .wp-block-navigation__responsive-container-open {
	display: flex;
	width: 100%;
	justify-content: flex-end;
}

/* New class for menu trigger container (old .menu-container kept for rollback). */
.hamburger-container {
	cursor: pointer;
}

.hamburger-container .wp-block-navigation__responsive-container-open {
	display: flex;
	width: auto;
	justify-content: flex-end;
}

/* Use the new hamburger icon only for the new container class. */
.hamburger-container .wp-block-navigation__responsive-container-open::before {
	width: 25px;
	height: 20px;
	aspect-ratio: 25 / 20;
	background:
		linear-gradient(currentColor 0 0) left 0 top 2px / 12px 2px no-repeat,
		linear-gradient(currentColor 0 0) left 0 center / 18px 2px no-repeat,
		linear-gradient(currentColor 0 0) left 0 bottom 2px / 25px 2px no-repeat;
	transition: background-size 0.2s ease;
}

/* Flip triangle to point down when the overlay menu is open */
.wp-block-navigation__responsive-container-open[aria-expanded="true"]::before {
	transform: rotate(90deg);
}

/* Keep hamburger static while preserving triangle rotation for old toggle. */
.hamburger-container .wp-block-navigation__responsive-container-open[aria-expanded="true"]::before {
	transform: none;
}

/* Link: .puff */

.puff.is-linked {
	transform: translateY(0);
	transition: transform 0.2s ease;
}

.puff.is-linked:hover {
	transform: translateY(-10px);
}

/* Front page intro header animation. */
@media (min-width: 680px) {

	body.has-front-logo-intro .wp-site-blocks header.wp-block-template-part header.wp-block-group.alignwide .wp-block-outermost-icon-block .icon-container {
		display: block;
		line-height: 0;
		opacity: 0;
		transform-origin: left center;
		will-change: transform;
	}

	body.has-front-logo-intro .wp-site-blocks header.wp-block-template-part header.wp-block-group.alignwide .wp-block-outermost-icon-block .icon-container svg {
		display: block;
		width: 100%;
		height: auto;
	}

	body.has-front-logo-intro.is-front-logo-intro-ready .wp-site-blocks header.wp-block-template-part header.wp-block-group.alignwide .wp-block-outermost-icon-block .icon-container {
		opacity: 1;
		transition: opacity 0.8s ease, width 2.1s cubic-bezier(0.22, 1, 0.36, 1);
	}

	body.has-front-logo-intro.is-front-logo-intro-ready .wp-site-blocks header.wp-block-template-part header.wp-block-group.alignwide>.wp-block-group:not(:first-child) {
		transition: opacity 0.35s ease 0.9s, visibility 0.35s ease 0.9s, width 0.35s ease 0.9s;
	}

	body.has-front-logo-intro.is-front-logo-intro-ready .wp-site-blocks header.wp-block-template-part header.wp-block-group.alignwide>.wp-block-group:first-child {
		transition: width 2.1s cubic-bezier(0.22, 1, 0.36, 1), flex-basis 2.1s cubic-bezier(0.22, 1, 0.36, 1);
	}

	body.has-front-logo-intro:not(.is-front-logo-intro-active) .wp-site-blocks header.wp-block-template-part header.wp-block-group.alignwide>.wp-block-group:first-child {
		flex: 0 0 var(--front-logo-default-width);
		width: var(--front-logo-default-width);
	}

	body.has-front-logo-intro:not(.is-front-logo-intro-active) .wp-site-blocks header.wp-block-template-part header.wp-block-group.alignwide>.wp-block-group:first-child>.wp-block-group,
	body.has-front-logo-intro:not(.is-front-logo-intro-active) .wp-site-blocks header.wp-block-template-part header.wp-block-group.alignwide>.wp-block-group:first-child>.wp-block-group>.wp-block-group,
	body.has-front-logo-intro:not(.is-front-logo-intro-active) .wp-site-blocks header.wp-block-template-part header.wp-block-group.alignwide>.wp-block-group:first-child .wp-block-outermost-icon-block {
		width: var(--front-logo-default-width);
	}

	body.has-front-logo-intro:not(.is-front-logo-intro-active) .wp-site-blocks header.wp-block-template-part header.wp-block-group.alignwide .wp-block-outermost-icon-block .icon-container {
		width: var(--front-logo-default-width) !important;
	}

	body.is-front-logo-intro-active .wp-site-blocks header.wp-block-template-part header.wp-block-group.alignwide>.wp-block-group:first-child {
		flex: 1 1 100%;
		flex-basis: 100%;
		width: 100%;
	}

	body.is-front-logo-intro-active .wp-site-blocks header.wp-block-template-part header.wp-block-group.alignwide>.wp-block-group:first-child>.wp-block-group,
	body.is-front-logo-intro-active .wp-site-blocks header.wp-block-template-part header.wp-block-group.alignwide>.wp-block-group:first-child>.wp-block-group>.wp-block-group,
	body.is-front-logo-intro-active .wp-site-blocks header.wp-block-template-part header.wp-block-group.alignwide>.wp-block-group:first-child .wp-block-outermost-icon-block {
		width: 100%;
		transition: width 2.1s cubic-bezier(0.22, 1, 0.36, 1);
	}

	body.is-front-logo-intro-active .wp-site-blocks header.wp-block-template-part header.wp-block-group.alignwide .wp-block-outermost-icon-block .icon-container {
		width: 100% !important;
		transform: none !important;
	}

	body.is-front-logo-intro-active .wp-site-blocks header.wp-block-template-part header.wp-block-group.alignwide {
		flex-wrap: nowrap;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		margin-bottom: var(--wp--preset--spacing--10) !important;
	}

	body.is-front-logo-intro-active .wp-site-blocks header.wp-block-template-part header.wp-block-group.alignwide>.wp-block-group:not(:first-child) {
		position: absolute !important;
		width: 0 !important;
		max-width: 0 !important;
		height: 0 !important;
		overflow: hidden;
		white-space: nowrap;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	body.is-front-logo-overlay-collapsing .wp-site-blocks header.wp-block-template-part header.wp-block-group.alignwide>.wp-block-group:first-child,
	body.is-front-logo-overlay-collapsing .wp-site-blocks header.wp-block-template-part header.wp-block-group.alignwide>.wp-block-group:first-child>.wp-block-group,
	body.is-front-logo-overlay-collapsing .wp-site-blocks header.wp-block-template-part header.wp-block-group.alignwide>.wp-block-group:first-child>.wp-block-group>.wp-block-group,
	body.is-front-logo-overlay-collapsing .wp-site-blocks header.wp-block-template-part header.wp-block-group.alignwide>.wp-block-group:first-child .wp-block-outermost-icon-block,
	body.is-front-logo-overlay-collapsing .wp-site-blocks header.wp-block-template-part header.wp-block-group.alignwide>.wp-block-group:first-child .icon-container {
		transition: none !important;
	}

}

/* Header icon row + WPML dropdown overrides (migrated from inline PHP styles). */
header .wp-block-group.has-tiny-font-size {
	gap: var(--wp--preset--spacing--10) !important;
}

header .wp-block-navigation__responsive-container-open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin-left: 0;
}

header .wp-block-navigation__responsive-container-open>* {
	display: none !important;
}

header .wp-block-navigation__responsive-container-open::before {
	content: "";
	display: block;
	width: 25px;
	height: 20px;
	background:
		linear-gradient(currentColor 0 0) left 0 top 2px / 12px 2px no-repeat,
		linear-gradient(currentColor 0 0) left 0 center / 18px 2px no-repeat,
		linear-gradient(currentColor 0 0) left 0 bottom 2px / 25px 2px no-repeat;
	transition: background-size 0.2s ease;
	transform: none;
}

header .wp-block-navigation__responsive-container-open[aria-expanded="true"]::before {
	transform: none;
}

header .hamburger-container:hover .wp-block-navigation__responsive-container-open::before,
header .wp-block-navigation__responsive-container-open:hover::before,
header .wp-block-navigation__responsive-container-open:not([aria-expanded="true"]):focus-visible::before {
	background-size: 25px 2px, 25px 2px, 25px 2px;
}

header .hamburger-container,
header .hamburger-container .wp-block-navigation {
	margin: 0 !important;
	padding: 0 !important;
}

header .wpml-language-switcher-block {
	background: transparent !important;
	position: relative;
	margin: 0 !important;
}

header .wpml-language-switcher-block.wp-block-navigation {
	width: 18px !important;
	min-width: 18px !important;
}

header .wpml-language-switcher-block .wp-block-navigation-item.has-child {
	margin: 0 !important;
	padding: 0 !important;
	position: relative;
	list-style: none;
}

header .wpml-language-switcher-block .wp-block-navigation-submenu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px !important;
	height: 18px !important;
	padding: 0;
	cursor: pointer;
	transform: none !important;
	transition: none !important;
	scale: 1 !important;
}

header .wpml-language-switcher-block .current-language-item [data-wpml="label"],
header .wpml-language-switcher-block .wp-block-navigation__submenu-icon {
	display: none !important;
}

header .wpml-language-switcher-block .wp-block-navigation-submenu__toggle::before {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	background: url("/wp-content/themes/bkh-2026/assets/images/globe-simple.svg") center / contain no-repeat;
	transform: none !important;
	transition: none !important;
	scale: 1 !important;
}

header .wpml-language-switcher-block .wp-block-navigation-submenu__toggle:hover,
header .wpml-language-switcher-block .wp-block-navigation-submenu__toggle:focus,
header .wpml-language-switcher-block .wp-block-navigation-submenu__toggle:focus-visible,
header .wpml-language-switcher-block .wp-block-navigation-submenu__toggle:active,
header .wpml-language-switcher-block .wp-block-navigation-submenu__toggle:hover::before,
header .wpml-language-switcher-block .wp-block-navigation-submenu__toggle:focus::before,
header .wpml-language-switcher-block .wp-block-navigation-submenu__toggle:focus-visible::before,
header .wpml-language-switcher-block .wp-block-navigation-submenu__toggle:active::before {
	transform: none !important;
	transition: none !important;
	scale: 1 !important;
}

header .wpml-language-switcher-block .wp-block-navigation__submenu-container {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

header .wpml-language-switcher-block [data-wpml="language-item"],
header .wpml-language-switcher-block [data-wpml="link"] {
	display: none !important;
}

header .wpml-language-switcher-block .bkh-lang-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	min-width: 72px;
	padding: 8px 10px;
	background: rgba(255, 255, 255, 0.98);
	border: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
	box-sizing: border-box;
	z-index: 1000;
}

header .wpml-language-switcher-block .bkh-lang-dropdown::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -12px;
	height: 12px;
}

header .wpml-language-switcher-block .wp-block-navigation-item.has-child:hover .bkh-lang-dropdown,
header .wpml-language-switcher-block .wp-block-navigation-item.has-child:focus-within .bkh-lang-dropdown,
header .wpml-language-switcher-block .wp-block-navigation-item.has-child.is-open-touch .bkh-lang-dropdown {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 4px !important;
}

header .wpml-language-switcher-block .bkh-lang-option {
	display: block !important;
	width: 100% !important;
	padding: 3px 0 !important;
	text-align: left !important;
	font-size: 14px !important;
	line-height: 1.25 !important;
	white-space: nowrap !important;
	text-transform: none !important;
	text-decoration: none !important;
	color: inherit !important;
}

header .wpml-language-switcher-block .bkh-lang-option.is-current {
	opacity: 0.5;
	pointer-events: none;
}

header .wpml-language-switcher-block a.bkh-lang-option:hover,
header .wpml-language-switcher-block a.bkh-lang-option:focus {
	background: rgba(0, 0, 0, 0.08);
}

header .search-icon {
	margin: 0 !important;
	width: 26px !important;
	height: 26px !important;
	flex: 0 0 26px !important;
}

header .search-icon svg,
header .search-icon img {
	width: 26px !important;
	height: 26px !important;
	max-width: 26px !important;
	max-height: 26px !important;
}

header .wp-block-woocommerce-mini-cart {
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
}

header .wp-block-woocommerce-mini-cart:not(.is-empty) {
	margin-right: 6px !important;
}

header .wp-block-woocommerce-mini-cart .wc-block-mini-cart__button {
	position: relative !important;
	top: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	min-height: 22px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
}

header .wp-block-woocommerce-mini-cart .wc-block-mini-cart__button svg,
header .wp-block-woocommerce-mini-cart .wc-block-mini-cart__button .wc-block-mini-cart__icon {
	display: none !important;
}

header .wp-block-woocommerce-mini-cart .wc-block-mini-cart__badge,
header .wp-block-woocommerce-mini-cart .wc-block-mini-cart__quantity-badge {
	position: static !important;
	right: auto !important;
	left: auto !important;
	top: auto !important;
	transform: none !important;
	margin: 0 !important;
}

header .wp-block-woocommerce-mini-cart.is-empty {
	display: none !important;
}