/*
 * Header components: announcement strip and product search (inc/header.php).
 * Row layout, heights and colours are Blocksy header builder settings (config/theme-mods.json).
 */

/* Announcement strip: one short line on Forest. */
.ca-announcement {
	background: var(--ca-bg-brand);
	color: var(--ca-text-on-brand);
	font-size: var(--ca-text-small);
	line-height: var(--ca-text-small-line-height);
	text-align: center;
}

.ca-announcement__inner {
	max-width: var(--theme-normal-container-max-width);
	margin-inline: auto;
	padding: var(--ca-space-2) var(--ca-space-4);
}

.ca-announcement :is(p, .wp-block-paragraph) {
	max-width: none;
	margin: 0;
}

.ca-announcement a {
	color: inherit;
	text-decoration-line: underline;
	text-underline-offset: 0.15em;
}

.ca-announcement a:hover {
	color: var(--ca-text-accent-on-brand);
}

/* Product search: field plus a square Forest button, one 48px control. Hover and focus treat the two as one:
 * the ring goes round both (:focus-within on the form). */
.ca-search {
	display: flex;
	width: 100%;
	max-width: 40rem;
	margin-inline: auto;
	border-radius: var(--ca-radius-md);
}

.ca-search .ca-search__input {
	flex: 1;
	min-width: 0;
	height: var(--ca-size-control);
	margin: 0;
	padding-inline: var(--ca-space-4);
	border: var(--ca-border-width-thin) solid var(--ca-border-strong);
	border-inline-end: 0;
	border-radius: var(--ca-radius-md) 0 0 var(--ca-radius-md);
	background: var(--ca-bg-surface);
	color: var(--ca-text-primary);
	font: inherit;
}

.ca-search:hover .ca-search__input {
	border-color: var(--ca-border-brand);
}

/* The field's own ring (theme.css) is replaced by one round the whole form: Forest border, Wheat outside. */
.ca-search .ca-search__input:focus-visible {
	outline: 0;
	box-shadow: none;
}

.ca-search:focus-within {
	outline: var(--ca-border-width-focus) solid transparent;
	box-shadow: 0 0 0 calc(var(--ca-border-width-focus) + var(--ca-border-width-thin)) var(--ca-border-focus-halo);
}

.ca-search:focus-within .ca-search__input {
	border-color: var(--ca-border-focus);
	box-shadow: inset 0 0 0 var(--ca-border-width-thin) var(--ca-border-focus);
}

.ca-search .ca-search__input::placeholder {
	color: var(--ca-text-secondary);
	opacity: 1;
}

.ca-search .ca-search__button {
	display: grid;
	place-items: center;
	flex: none;
	width: var(--ca-size-control);
	height: var(--ca-size-control);
	padding: 0;
	border: 0;
	border-radius: 0 var(--ca-radius-md) var(--ca-radius-md) 0;
	background: var(--ca-action-primary-bg);
	color: var(--ca-action-primary-text);
	cursor: pointer;
	transition: background-color var(--ca-duration-fast) var(--ca-ease-standard);
}

.ca-search .ca-search__button:hover {
	background: var(--ca-action-primary-bg-hover);
}

/* With the ring already round the form, the focused button shows a Wheat square inside itself. */
.ca-search .ca-search__button:focus-visible {
	outline: var(--ca-border-width-focus) solid var(--ca-border-focus-halo);
	outline-offset: calc(-2 * var(--ca-border-width-focus) - var(--ca-border-width-thin));
	box-shadow: none;
}

.ca-search .ca-search__button svg {
	width: var(--ca-size-icon);
	height: var(--ca-size-icon);
}

/* Suggestions under the search box (assets/js/search.js). */
.ca-search {
	position: relative;
}

.ca-search__suggestions {
	position: absolute;
	inset: calc(100% + var(--ca-space-1)) 0 auto;
	z-index: var(--ca-z-dropdown);
	max-height: min(32rem, 70vh);
	overflow-y: auto;
	padding: var(--ca-space-2);
	border: var(--ca-border-width-thin) solid var(--ca-border-default);
	border-radius: var(--ca-radius-md);
	background: var(--ca-bg-surface);
	box-shadow: var(--ca-shadow-3);
	text-align: start;
}

.ca-search__suggestions[hidden] {
	display: none;
}

.ca-search__group {
	margin: var(--ca-space-2) var(--ca-space-3) var(--ca-space-1);
	color: var(--ca-text-secondary);
	font-size: var(--ca-text-caption);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ca-search .ca-search__option {
	display: flex;
	gap: var(--ca-space-3);
	align-items: center;
	min-height: var(--ca-size-control);
	padding: var(--ca-space-1) var(--ca-space-3);
	border-radius: var(--ca-radius-sm);
	color: var(--ca-text-primary);
	text-decoration: none;
}

/* The highlighted choice, by arrow keys or pointer: underlined like a link, on a tint. */
.ca-search .ca-search__option:is(.is-active, :hover) {
	background: var(--ca-bg-brand-subtle);
	text-decoration-line: underline;
}

.ca-search .ca-search__option.is-active {
	box-shadow: inset 3px 0 0 var(--ca-border-brand);
}

.ca-search__product img {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: var(--ca-radius-sm);
	object-fit: cover;
}

.ca-search__text {
	display: grid;
	min-width: 0;
}

.ca-search__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ca-search__price {
	color: var(--ca-text-secondary);
	font-size: var(--ca-text-small);
}

.ca-search__stock {
	color: var(--ca-status-error-text);
}

.ca-search .ca-search__all {
	margin-block-start: var(--ca-space-1);
	border-block-start: var(--ca-border-width-thin) solid var(--ca-border-default);
	border-radius: 0 0 var(--ca-radius-sm) var(--ca-radius-sm);
	color: var(--ca-text-link);
	font-weight: 600;
	text-decoration-line: underline;
}

/* Blocksy's HTML element wraps its content in a paragraph. */
[data-id="text"] .entry-content > p:has(> .ca-search) {
	margin: 0;
}

/* On phones the search has its own row: full width. On desktop it sits in the middle column, which is
 * sized by its content, so give it a width. */
[data-id="text"]:has(.ca-search) {
	width: 100%;
}

[data-device="desktop"] [data-id="text"]:has(.ca-search) {
	width: clamp(20rem, 36vw, 36rem);
}

/* Inline SVG logo: the file's width attribute would otherwise set the box width; scale it from the height
 * Blocksy sets (Customizer → Header → Logo → Max height). */
.site-logo-container svg {
	width: auto;
	max-width: 100%;
	height: var(--logo-max-height, 44px);
}

/* Tap targets: Blocksy sizes the menu, account and cart links to their icons (18px or less). Each gets a 48px
 * box; the negative margins keep the icons where Blocksy put them. */
.ct-header :is(.ct-header-trigger, .ct-account-item, .ct-cart-item) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--ca-size-control);
	min-height: var(--ca-size-control);
}

/* Account and cart: 24px icons (Customizer) with "Account" and "Cart €0.00" beside them in sentence case,
 * instead of Blocksy's small capitals. Phones show the icons and the total only. */
.ct-header :is(.ct-account-item, .ct-cart-item) {
	gap: var(--ca-space-2);
}

.ct-header :is(.ct-account-item, .ct-cart-item) .ct-label {
	margin: 0;
	font-family: var(--ca-font-body);
	font-size: var(--ca-text-small);
	font-weight: 600;
	line-height: var(--ca-text-small-line-height);
	letter-spacing: 0;
	text-transform: none;
}

/* Phones and tablets: the total sits under the cart icon, so the account icon fits beside it. */
.ct-header .ct-cart-item[data-label='bottom'] {
	gap: 0;
}

.ct-header .ct-cart-item[data-label='bottom'] .ct-label {
	font-size: var(--ca-text-caption);
	line-height: 1.2;
}

.ct-header .ct-cart-item .ct-amount {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* The menu button sits at the left edge, so its bigger box is shifted back to keep the icon where it was
 * (Blocksy sets header item margins with an ID selector, so a margin can't do it). */
.ct-header [data-id="trigger"].ct-header-trigger {
	translate: calc((var(--theme-icon-size, 18px) - var(--ca-size-control)) / 2) 0;
}

.ct-header .site-logo-container {
	display: inline-flex;
	align-items: center;
	min-height: var(--ca-size-control);
}

/* "Added to your cart" panel (inc/cart-added.php, assets/js/cart-added.js): under the cart icon, or at the top
 * of the screen once the header has scrolled away. Full width on phones, 24rem from 690px. */
.ca-added {
	position: fixed;
	inset: var(--ca-added-top, var(--ca-space-2)) var(--ca-space-4) auto;
	z-index: var(--ca-z-toast);
	display: grid;
	gap: var(--ca-space-3);
	padding: var(--ca-space-2) var(--ca-space-2) var(--ca-space-4) var(--ca-space-4);
	border: var(--ca-border-width-thin) solid var(--ca-border-default);
	border-radius: var(--ca-radius-md);
	background: var(--ca-bg-surface);
	box-shadow: var(--ca-shadow-3);
	opacity: 0;
	translate: 0 calc(-1 * var(--ca-space-2));
	transition: opacity var(--ca-duration-fast) var(--ca-ease-standard), translate var(--ca-duration-fast) var(--ca-ease-standard);
}

.ca-added.is-open {
	opacity: 1;
	translate: none;
}

@media (prefers-reduced-motion: reduce) {
	.ca-added {
		translate: none;
		transition: none;
	}
}

@media (min-width: 690px) {
	.ca-added {
		inset-inline: auto var(--ca-added-right, var(--ca-space-4));
		width: 24rem;
	}
}

.ca-added__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ca-added__title {
	display: flex;
	gap: var(--ca-space-2);
	align-items: center;
	margin: 0;
	font-family: var(--ca-font-heading);
	font-weight: 600;
}

.ca-added__title svg {
	width: var(--ca-size-icon);
	height: var(--ca-size-icon);
	color: var(--ca-status-success-icon);
}

.ca-added__close {
	display: grid;
	flex: none;
	place-items: center;
	width: var(--ca-size-control);
	height: var(--ca-size-control);
	padding: 0;
	border: 0;
	border-radius: var(--ca-radius-md);
	background: transparent;
	color: var(--ca-text-primary);
	cursor: pointer;
}

.ca-added__close:hover {
	background: var(--ca-bg-brand-subtle);
}

.ca-added__close svg {
	width: var(--ca-size-icon);
	height: var(--ca-size-icon);
}

.ca-added__item {
	display: grid;
	grid-template-columns: 4rem 1fr;
	gap: var(--ca-space-3);
	align-items: start;
	padding-inline-end: var(--ca-space-2);
}

.ca-added__item .ca-added__image {
	width: 4rem;
	height: 4rem;
	border-radius: var(--ca-radius-sm);
	object-fit: cover;
}

.ca-added__text p {
	margin: 0;
}

.ca-added__name {
	font-weight: 600;
}

.ca-added__detail {
	color: var(--ca-text-secondary);
	font-size: var(--ca-text-small);
}

.ca-added__text .ca-added__price {
	margin-block-start: var(--ca-space-1);
	font-size: var(--ca-text-small);
	font-variant-numeric: tabular-nums;
}

.ca-added__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ca-space-2);
	padding-inline-end: var(--ca-space-2);
}

.ca-added__actions .button {
	min-height: var(--ca-size-control);
	text-align: center;
}

.ca-added__actions .ca-added__cart {
	border: var(--ca-border-width-control) solid var(--ca-action-secondary-border);
	background: var(--ca-action-secondary-bg);
	color: var(--ca-action-secondary-text);
}

.ca-added__actions .ca-added__cart:hover {
	background: var(--ca-action-secondary-bg-hover);
}

/* WooCommerce's "View cart" link beside the button, replaced by the panel once its script has loaded. */
.ca-cart-added .added_to_cart.wc-forward {
	display: none;
}