/*
Theme Name: Kestrel Aluminium
Theme URI: https://olliewp.com
Description: A child theme for Ollie.
Author: Mike McAlister
Author URI: https://olliewp.com
Template:     ollie
Version: 1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         blog, portfolio, entertainment, grid-layout, one-column, two-columns, three-columns, four-columns, block-patterns, block-styles, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, rtl-language-support, style-variations, template-editing, theme-options, translation-ready, wide-blocks
Text Domain: kestrel-aluminium
*/

/* Extend burger/overlay menu to 1024px breakpoint
--------------------------------------------- */

@media (max-width: 1024px) {
	/* Show the burger menu button */
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

	/* Hide the desktop nav */
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}
}

/* Account for admin bar on tablet */

@media (max-width: 782px) {
	header:has(>.is-position-sticky) {
		top: 0;
	}
}

/* Stack columns on tablet (below 1024px)
--------------------------------------------- */

@media (max-width: 1023px) {
	.wp-block-columns.is-stacked-on-tablet {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.is-stacked-on-tablet > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Constrain footer product images on tablet
--------------------------------------------- */

@media (min-width: 768px) and (max-width: 1023px) {
	footer .wp-block-gallery img,
	footer .wp-block-image img {
		max-width: 150px !important;
		height: auto;
	}
}

/* Header search dropdown
--------------------------------------------- */

/* Hide the inline input, show only the icon as a toggle */
.kestrel-search-toggle .wp-block-search__inside-wrapper {
	border: none !important;
	background: none !important;
	padding: 0 !important;
}

.kestrel-search-toggle .wp-block-search__input {
	display: none !important;
}

.kestrel-search-toggle .wp-block-search__button {
	background: none !important;
	border: 1px solid var(--wp--preset--color--border-light) !important;
	border-radius: 6px;
	padding: 8px;
	cursor: pointer;
	color: var(--wp--preset--color--main);
	transition: border-color 0.2s;
}

.kestrel-search-toggle .wp-block-search__button:hover {
	border-color: var(--wp--preset--color--main);
}

/* The dropdown panel */
.kestrel-search-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 100;
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.3s ease, box-shadow 0.3s ease;
	background: var(--wp--preset--color--base);
	box-shadow: none;
}

.kestrel-search-panel.is-open {
	max-height: 80px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Ensure the header is a positioning context */
.site-header {
	position: relative;
}

.kestrel-search-panel__form {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	padding: 16px var(--wp--preset--spacing--medium);
	border-top: 1px solid var(--wp--preset--color--border-light);
	color: var(--wp--preset--color--main-accent);
}

.kestrel-search-panel__icon {
	flex-shrink: 0;
	fill: currentColor;
}

.kestrel-search-panel .kestrel-search-panel__input[type="search"] {
	flex: 1;
	border: none;
	outline: none;
	font-size: var(--wp--preset--font-size--small);
	font-family: inherit;
	background: transparent;
	color: var(--wp--preset--color--main);
	padding: 0;
	border-radius: 0;
	box-shadow: none;
}

.kestrel-search-panel .kestrel-search-panel__input[type="search"]::placeholder {
	color: inherit;
	opacity: 1;
}

.kestrel-search-panel__close {
	flex-shrink: 0;
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	color: var(--wp--preset--color--main-accent);
	transition: color 0.2s;
}

.kestrel-search-panel__close:hover {
	color: var(--wp--preset--color--main);
}

.kestrel-search-panel__close svg {
	display: block;
	fill: currentColor;
}

/* Custom global styles (migrated from DB)
--------------------------------------------- */

.swiper .wp-block-image img {
	max-height: 500px;
	width: 100% !important;
}